русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Форматирование HTML текста

ОГЛАВЛЕНИЕ

Введение
1 Структура HTML-документа
2 Форматирование текста с помощью HTML
2.1 Задание полей на Web-странице
2.2 Задание цвета на Web-странице
2.3 Выравнивание текста на Web-странице
2.4 Задание заголовков HTML-документа
2.5 Задание размера шрифта
2.6 Задание шрифта по имени
2.7 Физическое форматирование символов
2.8 Логическое форматирование символов
2.9 Вставка специальных символов
2.10 Выделение текста горизонтальной линией
Пример №1
Пример №2
Пример №3

Введение

Для подготовки Web-документа используется язык разметки гипертекста HTML (HyperText Markup Language). Как это следует из названия, HTML не является алгоритмическим языком программирования, а, как язык разметки, обладает средствами представления текста и изображений на экране в виде Web-страницы. HTML также позволяет работать с гипертекстовыми ссылками, с помощью которых осуществляется доступ к другим Web-страницам.

Стандарт HTML создан и поддерживается некомерческой международной организацией W3C (World Wide Web Consortium).
Поскольку HTML-документ записывается в ASCII-формате, для создания Web-страницы может быть использован любой текстовый редактор, работающий с простым текстом, т.е. таким текстом, который не содержит служебной информации. Такими редакторами являются, например, NotePad (Блокнот) или FAR.

После того, как с помощью текстового редактора HTML-документ создан, он должен быть сохранен на диске в виде файла с расширением .htm или .html. Это позволит после щелчка мыши по этому файлу запустить браузер, который осуществит формирование Web-страницы в соответствии с данным HTML-документом. Можно поступить по-другому. Сначала запустить браузер, а затем в его поле адреса (Address) указать путь к файлу с данным HTML-документом.
Браузером (browser, от англ. to browse - выслеживать) называется программа, которая выполняет следующие основные функции:

  • после задания пользователем адреса Web-страницы и нажатия клавиши "переход" ("Go") устанавливает с помощью http-протокола соединение с Web-сервером, передает ему запрос и получает от него требуемую Web-страницу в виде HTML-документа;
  • преобразует полученный HTML-документ в изображение не экране пользователя, которое и называется Web-страницей (если HTML-документ содержится на компьютере пользователя, то соединение с Web-сервером не является обязательным).

Примерами браузеров могут служить такие программы, как Microsoft Internet Explorer (MIE), Mozilla Firebox, Apple Safari, Netscape Navigator, Opera и др.
С помощью HTML можно создавать только статические Web-страницы. Для создания динамических страниц необходимо совместное использование HTML с такими языками, как JavaScript, PHP и др.

Оглавление

1 Структура HTML-документа

HTML-документ состоит из слов двух типов: служебных слов и собственно текста, выводимого на экран. Служебные слова называются тэгами (tags) и берутся в угловые скобки < >. В литературе тэги называют также дескрипторами и операторами. Тэги бывают двойными, называемые контейнерами (container), и одиночными. Примером контейнера служат тэги, задающие начало HTML-документа: <HTML> и его окончание: </HTML>. Тэг окончания контейнера отличается от тэга его начала наличием символа "/". Текст, находящийся между началом контейнера и его окончанием, является его содержимым.
Примером одиночного тэга служит тэг перевода на новую строку: <BR> (браузерами не обрабатываются повледовательности пробелов, символы текстовых редакторов перевода каретки CR и перехода на новую строку LF).
В HTML-документе в наименованиях тэгов и их параметров, а также в словах, являющимися их значениями, заглавные и строчные буквы не различаются. В дальнейшем будем придерживаться следующего соглашения: наименования тэгов и параметров будут указываться заглавными буквами, а их значения - строчными буквами.
HTML-документ имеет следующую базовую структуру, которая состоит из заголовка HTML-документа и тела HTML-документа:

<HTML>
<HEAD>
. . .
</HEAD>
<BODY>
. . .
</BODY>
</HTML>

В заголовке HTML-документа, который находится внутри тэга-контейнера <HEAD> . . . </HEAD>, помещается информация, которая не выводится в основное поле Web-страницы. Она используется браузером для других целей. Например, с помощью контейнера <TITLE>. . . </TITLE> задается заголовок Web-страницы, помещаемый вверху экрана. Этот заголовок указывается в перечне посещенных страниц и в других местах. Поэтому, если разработчик Web-страницы хочет, чтобы его сайт был востребован, ему необходимо внимательно отнестись к содержимому заголовка Web-страницы.
Данная Web-страница при использовании браузера MIE имеет следующий заголовок:

Форматирование HTML текста - Microsoft Internet Explorer

Последние три слова добавляет сам браузер.
В теле HTML-документа, который находится внутри тэга-контейнера <BODY> . . . </BODY>, помещается текст, который будет непосредственно выводится на экран. Примером (№1) простейшего HTML-документа, выводящего на экран традиционное сообщение "Привет, мир!", является следующий текст:

Пример 1

<HTML>
<BODY>
Привет, мир!
</BODY>
</HTML>

Оглавление

В этом примере и в дальнейшем при описании HTML-документов будем придерживаться следующего правила - тэги, их параметры и значения будут иметь темно-синий цвет, а исходный текст, который форматируется и выводится на экран будет темно-зеленого цвета.
Щелкнув по кнопке "Пример 1" мы получим на экране результат выполнения этого HTML-документа: сообщение "Привет, мир!" находится в верхнем левом углу экрана, имеет черный цвет и небольшой размер букв (эти параметры заданы по умолчанию) и выглядит непривлекательно. Чтобы сделать его вид более приятным, необходимо выполнить форматирование текста, т.е. задать его цвет, размер, выравнивание и другие параметры средствами HTML (см. раздел 2).

Чтобы вернуться назад к данной странице необходимо щелкнуть по стрелке Back (Назад) на панели управления браузера.
Чтобы увидеть исходный текст текущей Web-страницы необходимо на панели управления браузера выбрать View (Вид), а затем Source (Просмотр HTML-кода).

Отметим, что современные браузеры способны понимать и упрощенную структуру документа. Например, HTML-документ, состоящий из одной строки:

Привет, мир!

даст на экране такое же сообщение. Но мы в дальнейшем будем придерживаться полной формы HTML-документа.
Текст может быть разбит на параграфы (текстовые блоки). Для указания параграфа используется контейнер <P> . . . </P>:

<P>
Текст
параграфа
</P>

На экране между параграфами вставляется пустая строка. Тэг окончания параграфа </P> можно не указывать. В этом случае тэг начала следующего параграфа <P> (или </BODY>) будет означать закрытие текущего.

Для указания одно- и многострочных комментариев в HTML-документе используется такая конструкция:

<!--
Этот текст браузером не обрабатывается.
Он закомментирован.
-->

Отметим, что комментарии помещаются в HTML-документе только между тэгами. Образец использования комментария приведен в примере № 2

Оглавление

2 Форматирование текста с помощью HTML

2.1 Задание полей на Web-странице

Для задания левого, правого, верхнего и нижнего поля документа на Web-странице используются соответственно параметры LEFTMARGIN, RIGHTMARGIN, TOPMARGIN и BOTTOMMARGIN тэга <BODY>. Значение каждого поля указывается в пикселях. Например, верхнее поле размером 50 пикселей задается так:

<BODY TOPMARGIN=50 >

Оглавление

2.2 Задание цвета на Web-странице

Когда браузер выводит на экран текст, то в качестве цвета текста и цвета фона он использует значения, заданные по умолчанию (в примере 1 цвет текста - черный, а цвет фона - светло-серый). Однако в HTML есть средства для задания и изменения как цвета текста, так и цвета фона. Для этого используются соответственно параметры TEXT и BGCOLOR тэга <BODY>.
Если необходимо указать некоторый цвет только для части текста, то используется параметр COLOR тэга <FONT>.
В HTML есть два способа задания значения цвета.
В первом способе значение цвета задаются с помощью трех составляющих цветов в виде численного значения #RrGgBb, где:

  •  Rr - две 16-ричние цифры, задающие компоненту красного цвета;
  •  Gg - две 16-ричние цифры, задающие компоненту зеленого цвета;
  •  Bb - две 16-ричние цифры, задающие компоненту синего цвета.

Значение компоненты каждого цвета может меняться от 0 до FFh, т.е. от 0 до 255. Например, значение #FF0000 задает ярко-красный цвет, #00AA00 - темно-зеленый, #С0С0С0 - серебристый. Таким способом можно задать более 16 млн (2 24) цветов.
Вторым способом можно задать только 16 основных значений цвета в виде символических (английских) названий. В таблице 1 приведены эти цвета, их символические названия и численные значения в виде #RrGgBb.

Таблица 1
Цвет Символическое название Численное значение
Морской волны Aqua #00FFFF
Черный Black #000000
Голубой Blue #0000FF
Малиновый Futsia #FF00FF
Серый Gray #808080
Зеленый Green #008000
Ярко-зеленый Lime 00FF00
Темно-красный Maroon #800000
Темно-синий Navi #000080
Оливковый Olive #808000
Пурпурный Purple #800080
Красный Red #FF0000
Серебренный Silver #C0C0C0
Темной морской волны Teal #008080
Белый White #FFFFFF
Желтый Yellow #FFFF00

Образцы задания цвета на Web-странице средствами HTML приведены в примере № 2

Оглавление

2.3 Выравнивание текста на Web-странице

Каждый параграф текста может быть выравнен по левому краю, по правому краю, по обеим краям (по ширине) или по центру экрана. Для этого используется параметр ALIGN тэга <P>. Он имеет такие значения:

  •  left: параграф выравнен по левому краю (задается по умолчанию);
  •  right: параграф выравнен по правому краю;
  •  center:параграф выравнен по центру;
  •  justify:параграф выравнен по ширине экрана.

Например:

<P ALIGN=right> Текст выравнен по правому краю

Текст также может быть выравнен по центру с помощью тэга-контейнера <CENTER> . . .</CENTER>:

<CENTER> Текст выравнен по центру </CENTER>

В этом случае текст между тэгами <CENTER> и </CENTER> выводится по центру новой строки экрана.

Оглавление

2.4 3адание заголовков HTML-документа

В HTML-документе может быть использовано до шести заголовков разного уровня. Они задаются с помощью тэгов- контейнеров от <H1> . . . </H1> (самый высокий уровень) до <H6> . . . </H6> (самый низкий уровень).
Шрифты заголовков разных уровней отличаются друг от друга и от основного текста размером и другими особенностями, заданными по умолчанию в браузере.
Цвет заголовков задается или параметром TEXT тэга <BODY>, если параметр указан, или принимается по умолчанию.
Заголовки могут быть выравнены, так же как и параграфы, с помощью параметра ALIGN. По умолчанию для заголовков задано выравнивание по левому краю экрана.
В примере № 2 показано использование заголовков и средств выравнивания текста на Web-странице.

Оглавление

2.5 3адание размера шрифта

Для задания размера шрифта на Web-странице используется параметр SIZE тэга-контейнера <FONT>. . . </FONT>. Текст, указанный между тэгами <FONT> и </FONT> будет иметь требуемый размер. Размер текста, следующего дальше, будет определяться значением парамета TEXT тэга <BODY> или будет браться по умолчанию.
Значения параметра SIZE задаются не в пунктах (1 пункт равен 1/72 дюйма), а в относительных единицах от 1 до 7. Соотношение между этими единицами и пунктами приведено в таблице 2.

 

Таблица 2
Относительные
единицы
Пункты (pt)
1 9
2 10
3 12
4 14
5 18
6 24
7 36

Например,

<FONT SIZE=5> Размер шрифта 18 pt </FONT>

Можно поступить и так: задать с помощью тэга <BASEFONT> с параметром SIZE базовый размер шрифта. А затем с помощью тэга <FONT> с параметром SIZE, который принимает значения от -4 до +4, изменить базовый размер на необходимую величину.
Например,

<BASEFONT SIZE=4>
<FONT SIZE=+2> Размер шрифта 24 pt </FONT>

С помощью тэгов-контейнеров <BIG> . . . </BIG> и <SMALL> . . . </SMALL>можно задать текст соответственно большого и малого размера, не указывая конкретно величину шрифта. Эту величину задает сам браузер.

Оглавление

2.6 3адание шрифта по имени

Поскольку неизвестно, какой тип шрифтов использует браузер на стороне пользователя, можно с помощью параметра FACE тэга <FONT> явным образом указать тип шрифта по имени.
В одном параметре FACE можно указать несколько типов шрифтов, которые перечисляются через запятую:

<FONT FACE="Arial Cyr, Arial, Helv DL"> Шрифт гельветика

Если на стороне пользователя установлен первый из указанных шрифтов - Arial Cyr, то строка "Шрифт гельветика" будет отображаться на экране с использованием именно этого шрифта. Иначе будет сделана попытка отобразить строку шрифтом Arial, а затем - Helv DL. Если окажется, что в системе пользователя нет ни одного из перечисленных шрифтов, строка будет отображена тем шрифтом, который установлен в браузере для использования по умолчанию.
Отметим, что значения параметра FACE взяты в двойные кавычки, поскольку имена шрифтов содержат пробелы. Но в HTML не будет ошибкой указывать значения любого параметра в кавычках. Поэтому, если есть сомнения в задании значений параметров, лучше указать их в кавычках.

В примере (№2) заданы верхнее поле, цвет и выравнивание текста, типы и размеры шрифта на Web-странице средствами HTML.

Пример 2

<HTML>
<HEAD>
<TITLE> HTML: выравнивание текста, задание цвета, размера и типа шрифта </TITLE>
</HEAD>
<!-- Цвет текста: синий, фона - светло-синий: -->
<BODY TOPMARGIN="50" TEXT=blue BGCOLOR= #E0E0FF>
<H1 ALIGN=center>ЗАГОЛОВОК 1 УРОВНЯ</H1>
<P ALIGN=right>
<FONT COLOR=red> <SMALL> Текст маленького размера (SMALL) красного цвета выравнен по правому краю экрана </SMALL> </FONT>
<P> Выравнивание текста, размер (12 pt) и тип шрифта, заданы по умолчанию
<P ALIGN=justify> <FONT SIZE=6 COLOR=#FF00FF
FACE="Courier, Courier New Cyr, Courier New"> Текст выравнен по ширине экрана с использованием шрифта Courier лилового цвета размером 24 pt </FONT>
</BODY>
</HTML>

Оглавление

2.7 Физическое форматирование символов

В HTML предусмотрено несколько тэгов-контейнеров для физического форматирования символов. Эти тэги определяют внешний вид символов явным образом в противоположность тэгам логического форматирования (см. п. 2.8):

  • <B> . . . </B>: выделяет текст жирным шрифтом;
  • <I> . . .</I>: выделяет текст наклонным шрифтом (курсивом);
  • <U> . . .</U>:выделяет текст подчеркиванием;
  • <STRIKE> . . .</STRIKE>:выделяет текст перечеркиванием;
  • <TT> . . .</TT>:задает текст с фиксированной шириной символов (например, листинги программ);
  • <SUB> . . .</SUB>:указывает подстрочный (нижний) индекс;
  • <SUP> . . .</SUP>:указывает надстрочный (верхний) индекс;
  • <BLOCKQUOTE> . . . </BLOCKQUOTE>: задает левое поле;
  • <PRE> . . . </PRE>(preformatted - предварительно отформатированный): выводит текст на экран с отработкой всех знаков пробелов, табуляции, перевода строки и новой строки.
Оглавление

2.8 Логическое форматирование символов

Тэги логического форматирования символов, в отличие от тэгов физического форматирования, указывают участки текста, различаемые по смысловому содержанию, способ выделения которых на экране определяет сам браузер. В HTML используются следующие тэги-контейнеры логического форматирования:

  • <CITE> . . . </CITE>: цитата;
  • <EM> . . . </EM>(emphasis - ударение): текст, имеющий большое значение;
  • <STRONG> . . . </STRONG> (сильный): сильное выделение текста;
  • <SAMP> . . . </SAMP>(sample - образец): образец сообщений, выводимых на экран;
  • <KBD> . . . </KBD>(keyboard - клавиатура):текст, вводимый с клавиатуры;
  • <CODE;> . . . </CODE>(code - код): фрагмент исходного текста;
  • <VAR> . . . </VAR>(variable - переменная): имя переменной.

На Web-страницах иногда указывают аббревиатуру некоторого термина или понятия без его раскрытия, например, "ОЗУ" вместо "Оперативное запоминающее устройство". Чтобы поисковые системы в сети Internet могли осуществлять поиск термина не только по его аббреавитуре, но и по полному обозначению, а также в качестве подсказки для пользователя Web-страницы, используется тэг-контейнер <ACRONYM> аббревиатура </ACRONYM>с параметром TITLE, который раскрывает значение используемой аббревиатуры.
В примере №3 показано применение этого тэга для аббревиатур МП и HT.

Оглавление

2.9 Вставка специальных символов

В HTML предусмотрено четыре специальных символа, предназначенных для служебных целей (для выделения тэгов и значений их параметров). Это символы <, >, & и ". Они интерпретируются браузером по особому и требуют замены для их включения в текст, в качестве обычных символов. Замена требуется и для представления символов права © и регистрации ®. В таблице 3 приведены эти замены.

 

Таблица 3
Символ Замена
< &lt;
> &gt;
& &amp;
" &quot;
© &copy;
® &copy;

В общем случае в HTML-документ можно вставить любой символ, зная его ASCII-код. Для этого вместо символа подставляется такая последовательность символов: &#XX, где XX - десятичное значение ASCII-кода символа.
К специальным символам можно отнести и символ "неустранимого пробела" - &nbsp; (no breaking space). Эти символы используются тогда, когда необходимо поместить на Web-странице несколько пробелов подряд, поскольку браузеры заменяют последовательности подряд идущих пробелов в HTML-документе одним пробелом при выводе документа на экран.

Оглавление

2.10 Выделение текста горизонтальной линией

При оформлении Web-страниц часто используется такой прием, как разделение параграфов текста или других его частей горизонтальной линией.

Для того, чтобы вставить в HTML-документ горизонтальную разделительную линию необходимо использовать одиночный тэг <HR>. Он имеет несколько параметров, которые задают внешний вид линии:

  • ALIGN - определяет выравнивание линии и имеет такие значения:
    • left - по левому краю;
    • right - по правому краю;
    • center - по центру (задан по умалчанию).
  • COLOR - задает цвет линии.
  • NOCHADE - если указан этот параметр, линия изображается без тени.
  • SIZE - высота линии в пикселях.
  • WIDTH - ширина линии, может выражаться либо в пикселях, либо в процентах (%) от величины окна браузера.

В примере №3 приведен HTML-документ, осуществляющий физическое и логическое форматирование символов на Web-странице, разделенных горизонтальной линией:

Пример 3

<HTML>
<HEAD>
<TITLE> Физическое и логическое форматирование символов
</TITLE>
</HEAD>
<BODY TEXT=000070>
<CENTER>
<FONT SIZE=6>
<P><B> Полужирный шрифт </B>
<P><STRIKE> Перечеркнутый шрифт </STRIKE>
<P><TT> Шрифт с фиксированной шириной символов
</TT>
<P> Формула воды: H <SUB> 2 </SUB> O
<HR COLOR=EEEE00 SIZE=5 WIDTH=80%>
<P><CITE> Цитата: "Среди вещей величайшим есть ничто" </CITE>
<P><FONT COLOR=FF00FF>
<ACRONYM TITLE="Микропроцессоры "> МП
</ACRONYM>
фирмы Intel подтвердили эффективность технологии
<ACRONYM TITLE="HyperThreading"> HT
</ACRONYM>
</CENTER>
</BODY>
</HTML>

Оглавление

Просмотров: 20098

Вы можете --> заказать сайт - полноценный или в качестве обучения для студентов.

Вернуться воглавление


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.