Алгоритм создания шаблона страницы:

Шаг 1. Откройте обычный блокнот. При этом следует учесть, что программа «Блокнот» поддерживает только основное форматирование, поэтому случайное сохранение специального форматирования в документах, в которых должен остаться чистый текст, исключено. Это особенно полезно при создании HTML-документов для простых вэб–страниц, так как особые знаки или другое форматирование могут не отображаться на опубликованных вэб–страницах и даже могут приводить к возникновению ошибок.

Шаг 2. Напишите код html-страницы в блокноте (например, текст тегов рассмотренных в данном разделе – все, что было приведено в угловых скобках)

Шаг 3. Сохраните документ, например как index.html и кликните на нем мышкой. После чего должен запуститься браузер, в окне которого на белом фоне черными буквами будет выведен текст и красными буквами ссылка, цвет которой изменится на черный, при наведении курсора.

3 Создание текстового документа

Рассмотрим, как происходит форматирование текста на вэб–странице. Краткая справка по HTML, а именно «Структура HTML-страницы» и «Основные теги, предназначенные для оформления страницы» приводится в приложении А.

Тэги управления цветом и размером шрифта Задание базового шрифта

Не только размер, но и цвет, и стиль базового шрифта задается с помощью тэга <BASEFONT>. Данный тег не применяется к заголовкам. Если базовый шрифт не задан, то по умолчанию используется шрифт со стандартным размером 3 (см. ниже).

Атрибуты элемента <BASEFONT>:

color -! Цвет шрифта;

size -! Размер шрифта (целое число от 1 до 7);

face -! Названия шрифтов (список, разделенный запятыми).

Пример: <BASEFONT SIZE=»2»> Устанавливаем размер базового шрифта равным двум. 

Управление размером шрифта с помощью тэга <FONT>

Размер шрифта меняется с помощью атрибута SIZE тэга <FONT>

Пример: HTML код:

<font size= „1“>size=1 </font> <font size=“2“> size=2 </font>

<font size=“3“> size=3 </font> <font size=“4“> size=4 </font>

<font size=“5“> size=5 </font> <font size=“6“> size=6 </font>

<font size=“7“> size=7 </font>

Результат выполнения – постепенное увеличение размеров шрифта в окне браузера.

Задание относительного размера шрифта с помощью тега <FONT>

Ter <FONT> с атрибутом SIZE имеет дополнительные возможности для задания размера шрифта относительно текущего размера основного текста. Вместо определенного номера можно задать относительный размер шрифта, например +3 или –1.

Web-браузер прибавляет (или вычитает) заданное число к стандартному номеру шрифта, используемого по умолчанию (размер 3). Обратите внимание, что с помощью тэга <BASEFONT> можно изменить размер по умолчание на любой другой, но в диапазоне от 1 до 7: если задан относительный размер текста больше чем +4, или меньше чем –2, браузеры отобразят текст шрифтом самого крупного (соответственно, 7) или самого мелкого размера (соответственно, 1).

Пример: HTML код:

< font size=+1>Крупный </FONT>

< font size=+2> Kpyпнee </FONT>

< font size=+3> Kpyпнейший </FONT>

Результат выполнения: последовательное увеличение размера шрифта охватываемого им текста на один номер относительно последнего размера основного текста, то есть текст «Крупный» будет выведен размером 4, «Kpyпнee» – размером 5, «Kpyпнейший» – размером 6.

Управление цветом шрифта с помощью тэга <FONT>

Цвет шрифта меняется с помощью атрибута COLOR тэга <FONT>

Пример: HTML код:

<FONT COLOR=»#FF0000»>»#FF0000» – Красный цвет в формате RGB </FONT>

<FONT COLOR=»red»> «red» – Константа красного цвета не (!) в формате RGB </FONT>

Результат выполнения:

Текст «»#FF0000» – Красный цвет в формате RGB» и «»red» – Константа красного цвета не (!) в формате RGB» будет выведен на экран красным цветом.

Задание шрифтов с помощью тэга <FONT>

Имя шрифта задается с помощью атрибута FACE тэга <FONT>:

<font face=”имя шрифта”></font>.

Тэг </FONT> задает имя шрифта. Можно задавать несколько шрифтов через запятую, в этом случае используется первый найденный шрифт.

Пример: HTML код:

<font face=»Impact», «Arial Cyr», «Arial», «MS Sans Serif»> текст будет выведен шрифтом «Impact» при наличии его на вашем компьютере. </font>

Результат выполнения:

Текст будет выведен шрифтом «Impact» при наличии его на вашем компьютере.

Тэги форматирования основного текста

Тег <P> и необязательный парный ему </P>. Данный тег создает новый параграф. Два или более тега <P>, идущих подряд, заменяются одним.

Жирный шрифт (Bold)

Для управления плотностью шрифта применяются теги:

<b>текст</b>

<strong>текст</strong>

Отличие тэга <b> от тэга <strong> в том, что тэг <b> указывает браузеру выводить текст жирным шрифтом, а тэг <strong> указывает, что текст надо выделить. Как браузер будет выделять текст, жирным шрифтом, курсивом или жирным курсивом – зависит от конкретного браузера.

Пример: Жирный шрифт.

Курсив (Italic)

Курсивный шрифт выводится с помощью тэгов:

<i>текст</i> <em>текст</em>

Пример: Курсив.

Подчеркнутый шрифт (Underline)

Выводится с помощью тэга:

<u>текст</u>

Пример: Подчеркнутый шрифт.

Надстрочный индекс (Superscript)

Выводится с помощью тэга:

^текст

Пример: основной текст ^{надстрочный индекс} (2³ = 8).

Подстрочный индекс (Subscript)

Выводится с помощью тэга:

_текст

Пример: основной текст _{подстрочный индекс} (C₂H₅OH)

Имитация стиля печатной машинки (Teletype)

<tt>текст</tt>

Пример: Teletype

Заголовки

Выводятся с помощью тэгов:

<H1> </H1>

<H2> </H2>

<H3> </H3>

<H4> </H4>

<H5> </H5>

<H6> </H6>

Пример:

<h1>Самый большой заголовок</h1>

… … … … … … … … … … … … …

<h6>Самый маленький заголовок</h6>

Блок с отступом

Выводится с помощью тэга:

<BLOCKQUOTE> блок текста с отступом </BLOCKQUOTE>

Пример: основной текст

блок текста с отступом

Дополнительные служебные теги

Комментарии в HTML коде

Комментарии вставляются в программу с помощью тэгов: <!–комментарии. Эти тэги предназначены для вставки в документ HTML строк комментария, которые не отображаются браузером.

В приложении Б приводятся содержание простейшего сайта, состоящего из 4-х вэб–страниц, причем каждый HTML-документ содержит прокомментированные теги.

Переход на следующую строку

Принудительный перенос строки выполняется с помощью тэга <br>

Пример: HTML код:

Выполняем<br>переход на<BR>следующую строку

Результат выполнения:

Выполняем

переход

на следующую строку

Запрет переноса

Тэги <nobr>текст</nobr> указывает браузеру, что вывод текста между ними должен выполняться одной строкой. Если строка не помещается в окно браузера, появляется горизонтальная линейка прокрутки.

Управление выравниванием текста

Выравнивание блока текста осуществляется с помощью атрибута ALIGN тэга <DIV>текст</DIV>.

Атрибут ALIGN могут иметь значения:

ALIGN=»LEFT» – выравнивание по левому краю

ALIGN=»RIGHT» – выравнивание по правому краю

ALIGN=»CENTER» – выравнивание по центру

ALIGN=»JUSTIFY» – выравнивание по обоим краям

Пример: HTML код:

<DIV ALIGN=»CENTER»>Текст, выровненный по центру</DIV>

Обратите внимание, что атрибут ALIGN можно применять во многих тэгах, например:

<P ALIGN=»JUSTIFY»>текст</P> – выравнивание абзаца

<TD ALIGN=»CENTER»>текст</TD> – выравнивание текста в ячейке таблицы

<H1 ALIGN=»CENTER»>текст</H1> – выравнивание заголовка и т.д.

Отцентрировать блок текста можно также и с помощью тэга <CENTER>текст</CENTER> без атрибута ALIGN.