В документе может быть до шести уровней заголовков(теги <h1></h1>...<h6></h6>).

Заголовок самого высокого уровня размещается между тегами <h1></h1>, он отображается самым большим шрифтом. Заголовок низкого уровня располагается между тегами <h6></h6> и он отображается самым маленьким шрифтом. При помощи атрибута align можно выровнять заголовок по левому краю, по правому краю или по центру.

Для создания параграфа используются теги <p></p>. Каждый параграф отделяется браузером от другого параграфа пустой строкой. Параграф можно выровнять по левому краю, по правому краю, по центру или параллельно. При оформлении параграфа необходимо помнить следующее:

• символ перехода строки не имеет в коде никакого значения; если необходимо сменить строку нужно использовать тег <br />
• все символы невозможно корректно отобразить, это связано с различными системами кодирования (например, для отображения буквы ä необходимо использовать специальный символ)
• При показе строк текста принимается во внимание пустое место, куда помещается текст (например, браузер продолжает текст в следующей строке, если он не влезает в окно браузера или таблицу)

В тексте можно использовать также жёсткое оформление. Это делается в случае, если все концы параграфов, пробелы и табуляция находятся на определённом месте. Тегами для этого являются <pre></pre>. Весь текст выводится в фиксированном предложением шрифте. Основным недостатком такого оформления является то, что текст не переносится на следующую строчку даже тогда, когда он в окно не влезает. Вместо этого возникает горизонтальная полоса прокрутки, которая усложняет чтение страницы.

Оформление цитат происходит при помощи тегов <blocknote></blocknote>. Этот тег создаёт отступ от левого края страницы и отделяет цитату от другого текста пустыми строчками сверху и снизу.

Для создания полос между частями текста используется тег <hr />. При помощи различных атрибутов можно поменять толщину, ширину, цвет и вырвнивание линии.

Списки могут быть несколькоз типов:

• непронумерованные (неупорядоченные) - теги <ul></ul>;
• пронумерованные (упорядоченные) - теги <ol></ol>;
  • для создания элементов списка используют теги <li></li>;
• список определений - используются теги <dl></dl>, <dt></dt> ja <dd></dd>.

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

Для создания таблицы используются теги <table></table>. Таблица состоит из рядов и ячеек, ряды создаются при помощи тегов<tr></tr>, ячейки - тегами <td></td>. Первый ряд таблицы используется как заголовочный, там находятся заголовки столбцов. Для выделения ячеек первого ряда можно использовать теги <th></th>.

Оформление текста

После создания структуры документа можно приступать к оформлению текста. Рекомендуется всё оформление текста проводить при помощи стилей(CSS). HTML тоже позволяет оформлять текст, однако возможностей тут меньше. HTML использует два типа оформления: физический (внешний вид оформленного текста определён точно) и логическим (при помощи тегов определяется текст, которые должен отличаться от другого текста; отображение текста зависит от установок браузера).

Теги физического оформления:

• <b></b> (полужирный текст)
• <i></i> (наколонный текст)
• <tt></tt> (текста фиксированной ширины)
• <u></u> (подчёркнутый)
• <strike></strike> (перечеркнутый).

Теги логического оформления:

• <em></em> (обычно отображается наклонным)
• <strong></strong> (обычно отображается полужирным)
• <cite></cite> (акцентирование цитаты, наклонный)
• <ins></ins> (При обновлении страницы текст, которого до этого не было, отображается подчёркнутым)
• <del></del> (перечёркивание)
• <acronym></acronym> (выделение аббревиатур)

Специальные символы и комментарии:

Код HTML	Символ
 	Строгий пробел, отображается всегда
"	"
&lt;	<
&gt;	>
&amp;	&
&laquo;	«
&raquo;	»
&Auml;	Ä
&auml;	ä
&Ouml;	Ö
&ouml;	ö
&Uuml;	Ü
&uuml;	ü
&Otilde;	Õ
&otilde;	õ

Для упрощения читаемости и редактируемости кода рекомендуется добавлять комментарии. Также если вы сделали обновления, не стоит сразу удалять старый вариант. Оставьте его в коде закомментированным, так вы всегда сможете быстро вернуться обратно к старой версии.

<!--комментарий-->

Добавление изображений

Веб-страница - это обычный текстовый файл, в который нельзя интегрировать другие объекты. Для добавления изображения необходимо сослаться на него, указав путь и имя файла, и браузер покажет изображение на веб-странице. Для ссылки на изображение используется тег <img />. Этот тег используется всегда с атрибутами. Для указания пути и имени файла изображения существует атрибут src (<img src="failinimi.gif">).

Изображение можно выровнять на веб-странице двумя способами: подобно части текста внутри параграфа, отображая её вертикальное выравнивание по отношению к строке, или как отдельный параграф, показывая горизонтальное выравнивание. Для этого используется атрибут align. Внутри строчки можно выровнять по верхнему краю строки (top), по нижнему краю строки (bottom) или по центру.

Если выравнивать изображение отдельным параграфом, значения атрибута могут быть left (левый край) või right (правый край). Отцентровать изображение нельзя.

Гиперссылки (указатели)

Работа «мировой сети» не была бы возможна веб-ссылок. Гиперссылки находятся на веб-страницах и объединяют между собой как различные страницы, так и сайты. Причём сайты могут находиться на серверах, которые находятся друг от друга на удалении сотен тысяч километров. Для создания ссылки используется тег <a></a>. Как и тег изображения у тега ссылки должен быть атрибут, который указывает на местонахождение и имя файла (<a href="путь">).

Ссылки бывают трёх типов:

• внешние - указывают на внешние ресурсы, которые не принадлежат этому сайту (<a href="http://www.eucip.com">);
• внутренние - ссылки в пределах сайта(<a href="folder/file.html">);
• ссылки в пределах страницы - позволяют передвигаться из одной части документа в другую, не покидая страницы; ссылка записывается как <a href="#имя-якоря">, где имя-якоря это отмеченное место на странице, обозначаемое как <a name="имя-якоря">.

Для отображения гиперссылки можно использовать как текст, так и изображение. Например, ссылка <a href="pealeht.htm"><img src="logo.jpg" /></a> отображается в окне браузера изображением из файла logo.jpg, кликнув на которой переходите к файлу pealeht.htm.

Формы

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

Форма создаётся при помощи тегов <form></form>. На одной странице может быть и несколько форм. Для того чтобы данные из формы можно было обработать, при помощи атрибута action указывается, какое приложение нужно запустить, а при помощи атрибута method, каким методом необходимо данные обработать. Атрибут method может принимать значения GET или POST.

Для получения данных по электронной почте используется метод POST, и полная запись тега может выглядеть так:

<form method=post action="mailto:address@server.com">.

Для создания управляющих элементов используются теги <input />, <textarea></textarea>, <select></select>.

При помощи тега <input /> создаются управляющие элементы формы, для определения их типа используется атрибут type.

Типы атрибута type:

• текстовое поле
  • text - текстовое поле ;
  • hidden - скрытый текст;
  • password - поле пароля (введённые данные показываются звёздочками)
• выбор
  • checkbox - флажки;
  • radio - опции
• кнопки
  • submit - подтверждение ввода;
  • reset - отмена, очистка полей;
  • file - окно выбора файла;
  • image - графическая кнопка;
  • button - простая кнопка.

Тег <textarea></textarea> позволяет создать текстовые поля для ввода текста в несколько строчек. Если весь текст не влезает в поле, появляется полоса прокрутки.

Например: <textarea name="textarea" cols="25" rows="4"></textarea>

Тег <select></select> - при помощи этого тега создаётся управляющий элемент типа меню. Каждый элемент меню создаётся тегом <option></option>. Из меню можно выбрать одно или несколько значений. Типы меню определяет атрибут size. Если его значение 1, возникает выпадающее меню. Если же значение атрибута больше единицы, но меньше, чем число элементов - возникает полоса прокрутки.

Пример:

<select name="list" size=3>
<option value="element 1" selected=selected> строка 1</option>
<option value=" element 2"> строка 2</option>
<option value=" element 3"> строка 3</option>
</select>