Третий урок. Знакомство с HTML

HTML — язык разметки текста. Это не язык программирования, как PHP, а язык с помощью которого можно отформатировать текст, блок или другой элемент.

HTML состоит из тэгов заключенных в угловые скобки, например <a>, <b>, <i>, <strong>, <img>. Каждый тэг несёт определенную роль. Например тэг B делает текст жирным.

текст текст текст <b>жирный текст</b> текст текст

Результат:

текст текст текст жирный текст текст текст

По своему назначению тэги могут быть служебными, например META, HTML, STYLE, SCRIPT и т.п. — с их помощью выполняются определенные действия, настройки или специальные отметки для html-страницы.

Далее по тексту я буду указывать html-тэги в верхнем регистре и без угловых скобок.

Тэги физического форматирования текста предназначены для непосредственного влияния на выводимый текст. Это жирный (B), курсив (I), подчеркивание (U), зачеркнутый (S) и т.п. С их помощью оформляется текст.

Для позиционирования используются тэги блоков. Они делятся на две группы — строчные и блочные. Блочные начинают вывод с новой строки, а строчные такой перенос не делают. Из блочных, как правило, используют DIV, строчный — SPAN.

Существуют тэги особого назначения. Их роль скорее историческая из-за особой важности. Я бы отметил в первую очередь тэг ссылки (A) и тег для вывода изображения (IMG). Они и не блочные, и не строчные, а работают по своим правилами (об этом позже).

Тэги могут быть двойными и одиночными. В первом случае тэг состоит из двух частей: открывающий и закрывающий, как в вышеприведенном примере. Одиночные тэги не требуют закрывающей части, например IMG:

<img src="адрес изображения">

Иногда вы будете встречать вот такую запись одиночных тэгов (в конце слэш «/»):

<img src="адрес изображения" />

Это не ошибка, а пережиток старых версий HTML (XHTML). Современный стандарт — HTML 5, где такой слэш не нужен.

При написании html-кода важно следить за вложенностью тэгов. Они не должны пересекаться. Вот такой вариант правильный:

<p>текст <b>текст <i>текст</i> текст текст</b> текст текст</p>
В этом же примере тэги B и I пересеклись:
<p>текст <b>текст <i>текст текст текст</b> текст</i> текст</p>

Тэги могут иметь атрибуты. Например ссылка имеет атрибут href, в котором указывается адрес для перехода. Изображение имеет атрибут src с адресом для вывода изображения. То есть многие тэги имеют свои специфичные атрибуты.

<a href="адрес">Ссылка</a>
<img src="адрес картинки">

Вместе с тем, существуют универсальные атрибуты, которые можно применять к любому тэгу. Чаще всего вы будете использовать style, где указываются стили оформления и class — css-класс.

<a class="t-red" style="font-weight: bold;" href="адрес">Ссылка</a>

Так же бывают атрибуты без значений, например selected в выпадающем списке.

Атрибуты можно указывать в любой последовательности. Я рекомендую в качестве первого указывать class (если он есть конечно), после style, далее собственные атрибуты тэга, а в конце уже всё остальное. Такая схема позволяет немного упростить чтение html-кода.

В HTML можно использовать комментарии.

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

Если нужно временно спрятать какой-то кусок кода, то можно его оформить в виде комментария. Этот код будет виден в исходном коде страницы, но браузер будет его игнорировать для отображения.

Названия тэгов нечувствительны к регистру, но обычно тэги на странице пишутся в нижнем регистре, что улучшает их читабельность.

Стандарт HTML постоянно развивается и последняя его версия доступна на сайте W3C. Для начального изучения HTML-тэгов используйте русскоязычный справочник.


Любая html-страница должна иметь определенную структуру. Только в этом случае браузер отобразит её как положено. Вот так выглядит минимальная html-страница:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>Титул в браузере</title>
</head>
<body>

тело страницы

</body>
</html>

Вначале идет DOCTYPE, который указывает браузеру, что эту страницу следует отформатировать по стандарту HTML. Раньше использовались другие DOCTYPE, например для HTML 4 или XHTML, сейчас они практически не встречаются. Следует отметить, что DOCTYPE — это не html-тэг, а специальный указатель.

Вся страница размещается в тегах <HTML>. Это корневой элемент любой страницы.

Сама страница делится на две секции HEAD и BODY. Секция HEAD используется для задания различных настроек страницы. В нашем примере в этой секции в META указана кодировка страницы (UTF-8) и титул браузера в TITLE. Секция HEAD не выводится в браузере.

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

С помощью браузера FireFox можно быстро проверить валидность html-кода страницы. Для этого нужно нажать Ctrl+U, чтобы увидеть исходный код. Если там есть ошибки, то FireFox подсветит их красным цветом. Подведите к этому элементу мышь и появится подсказка с описанием ошибки.

Задания

1. В site1 отредактируйте index.php согласно HTML 5. Добавьте произвольный текст из википедии на астрономическую тему.

2. Разбейте текст на абзацы с помощью тэгов P.

3. Примените тэги физического форматирования текста, чтобы выделить некоторые фразы жирным, курсивом, подчеркнутым и зачеркнутым.

4. Добавьте к тексту заголовок H1 и несколько подзаголовков H2.

5. В конце добавьте ссылку на источник.

6. Проверьте чтобы в коде не было никаких ошибок.