Коротко о HTML для чайников
 |
Дорогие друзья, уже давно хотел написать что-то о HTML для чайников. Только учтите, что говоря «чайник» я подразумевая человека, начинающего познавать HTML, а не кухонную утварь. Если с этим разобрались, то стоит отметить, что HTML это очень много и мало одновременно. Говоря об этом языке разметки вам достаточно узнать что такое тег, атрибут, элемент, иерархия и структура HTML-документа – вот и всё. Но всего становится слишком много, если вдаваться в детали.
Поэтому я обойдусь без подробностей и остановлюсь лишь на самом основном. Не знаю, получится у меня это или нет, но давайте попробуем. Главное, не стесняйтесь задавать вопросы. Ведь, как обычно, я буду непроизвольно использовать жаргонные словечки и прочую абракадабру. У каждого свои недостатки. Приступим?
HTML для чайников
А начну я с того, что HTML-документ представляет собой обычный текстовый файл. Зачастую с расширением .html или .htm. Его можно создать и редактировать в любом текстовом редакторе. Например, в стандартном «Блокноте» операционной системы Windows. Для удобства рекомендую использовать бесплатную программу Notepad++, которая осуществляет и подсветку синтаксиса.
Копнём чуть глубже. По сути, HTML-код это набор чётко структурированных по иерархии элементов. Элементом в HTML можно назвать картинку, таблицу, строку текста и т.д., что определяется тегом. Тег – основная конструкция языка разметки HTML. Теги могут выступать в качестве контейнеров или объектов.
Говоря «контейнер» я подразумеваю конструкцию, состоящую из открывающего и закрывающего тегов. Например:
<p>Параграф, в котором есть <b>жирный</b> текс.</p>
В данном примере мы имеем два тега контейнера. Первый, это тег p, который преобразует своё содержание в параграф. Второй, это тег b, который выделяет содержащийся в нём текст жирным шрифтом. Точнее говоря, теги указывают на соответствующие преобразования и выделения, которые осуществляют браузеры. При этом синтаксис обоих контейнеров можно описать следующим образом:
<{название тега}>{содержание контейнера}</{название тега}>
Обратите внимание на то, что в приведённом примере контейнеры чётко структурированы. Так контейнер b входит в контейнер p. Несмотря на то, что многие браузеры допускаю некоторую вольность в иерархии, нарушать её не стоит. Например:
<p>Первая <b>строка.</p>
<p>Вторая</b> строка.</p>
Такой HTML-код будет обработано браузером вполне корректно, но иерархия уже будет нарушена.
Говоря «объект» я подразумеваю конструкцию, состоящую из одного открывающегося (HTML) или открывающегося и закрывающегося одновременно (XHTML) тега. Примером объекта может служить HTML-код картинки:
<img src="image.jpg">
Понятно, что такие толь открывающиеся теги объекты несколько не вписываются в понятие иерархии. В XHTML это не допустимо. Здесь применяется тег объект, который является открывающимся и закрывающимся одновременно. Вот как выглядит тот же HTML-код картинки в XHTML:
<img src="image.jpg" />
Другими словами, многое зависит от того, какой язык разметки вы выбрали. Несмотря на то, что браузеры допускают вольности по отношению к используемым типам разметки, нарушать их не стоит. Сам тип разметки документа задаётся в теге !doctype. С него и должен начинаться HTML-документ. Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Но давайте вернёмся к главному. В примере с картинкой, помимо названия тега имеется атрибут src. Что такое атрибут? Я бы сказал, что атрибут – это то или иное свойство тега. Так значением (указанное в одинарных или двойных кавычках, после знака равно) атрибута src тега img является адрес файла картинки.
Здесь следует отметить, что для каждого тега допустимы лишь определённые стандартом атрибуты, которые задают те или иные их свойства. Так атрибут alt в теге img задаёт альтернативный текст, который будет отображаться браузером в том случае, если файл картинки будет не доступен. Например:
<img alt="альтернативный текс" src="image_not_exists.jpg">
Полный список тегов и их атрибутов, а также подробное описание для каждого из них вы можете найти на сайте htmlbook.ru в разделе «Справочник по HTML».
Структура HTML-документа
Надеюсь, что вы уже поняли – HTML это структурированный язык разметки. Здесь всё чётко и понятно. По крайней мере, если соблюдать иерархию входящих в него элементов. А теперь давайте поговорим о структуре самого HTML-документа.
Как говорилось выше, любой HTML-документ лучше начинать с указания !doctype. После него идёт основной тег контейнер, который содержит весь HTML-документ, он так и называется html. Внутри него обычно находятся два основных тега контейнера head и body.
Тег head (голова документа) содержит описание HTML документа, метатеги и сопутствующие элементы (например: script, style и т.д.). Эти данные не выводятся и предназначены в первую очередь для браузеров, поисковиков и т.д. Тег body (тело документа) содержит сам HTML-код. Именно он обрабатывается и выводится в окне браузера.
Для того чтобы всё стало на свои места, ниже я приведу пример структуры HTML-документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- голова HTML-документа -->
</head>
<body>
<!-- HTML-код документа -->
</body>
</html>
Обращаю ваше внимание на то, что в данном примере, для наглядности иерархии, я использовал отступы. Обычно рекомендуют использовать два пробела, но я отдаю предпочтение табуляции (её размер можно зачастую задать в редакторе).
Полезно знать:
- Несколько идущих подряд пробелов в HTML-коде отображаются браузером как один пробел. Исключением является тег pre и иже. Для того чтобы сделать два пробела, можно использовать мнемонику
и пробел.- Перенос строки отображается браузером как тот же пробел. Для того чтобы реализовать перенос строки, можно использовать тег br.
Послесловие
Ну а теперь самое главное – не ограничивайтесь только теорией. Пробуйте и экспериментируйте. Смотрите, что получается в том или ином браузере. Не забывайте, что у каждого браузера есть свои особенности. Ну а если вы хотите убедиться, что всё делаете правильно, используйте – валидаторы. Что это такое? Валидатор - это сервис, который проверяет ваш HTML-код на соответствие стандартом и указывает на имеющиеся ошибки. Например, валидатор от W3C.
Ещё раз уточню, браузеры допускают многие вольности. Это плохо и хорошо одновременно. Не всегда получается добиться полного соответствия стандартам. Тем не менее, валидность HTML-кода у сайта тоже учитывается поисковиками и позволяет избежать и ряд других неприятностей. На этом у меня всё. Спасибо за внимание. Удачи!
5 комментариев:
Отправить комментарий