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. Проверьте чтобы в коде не было никаких ошибок.