Любой язык имеет синтаксис, т.е. набор правил построения фраз, позволяющий определить осмысленные предложения в этом языке. С изучения этих правил мы и начнем изучение языка HTML. Для начала откроем наш Dremweaver и создадим какой-нибудь несложный HTML-документ в привычном нам визуальном режиме. Посмотрим, какой HTML-код соответствует нашему документу.
Как Вы помните, переключение в режим просмотра HTML-кода производится с помощью кнопки Code View. В Dremweaver"е есть ещё один режим, очень удобный, особенно когда у Вас большой монитор. Это "промежуточный" режим который показывает одновременно и код, и соответствующий ему документ. Так гораздо проще разобраться, где у нас что: мы отмечаем некий фрагмент в визуальном режиме и тут же видим этот фрагмент в режиме HTML-кода. Итак, вы можете заметить, что HTML содержит наш исходный текст в чистом виде и, кроме того, массу каких-то непонятных слов, заключенных в угловые скобки. Эти непонятные конструкции и есть основные строительные блоки нашего языка. Называются они тэгами. Тег состоит из названия тега, заключенного в угловые скобки. Названия тегов могут быть написаны как строчными, так и прописными буквами - это не важно.
Если вы присмотритесь повнимательнее, то заметите, что многие теги имеют свою "вторую половину", дополненную косой чертой. И такие "пары" окружают фрагменты нашего "содержательного" текста. Например, заголовок окружен тегами и , абзац окружен тегами . Такая конструкция называется Элементом. Элемент - это и есть единица разметки. Элемент состоит из Открывающего тэга, данных (т.е. содержательной информации) и закрывающего тега. Таким образом, назначение тегов состоит в обозначении границ элементов.
Давайте попробуем изменить разметку текста: например, заголовок вместо элемента заключим в элемент . Когда мы что-то меняем в коде, то изменения не сразу отображаются в визуальном режиме, а в панели свойств появляется сообщение, что мы изменили код и, дабы увидеть изменения, необходимо нажать кнопку "refresh" или клавишу "F5".
Вместо заголовка мы получили обычный абзац текста. Поздравляю! Вы сделали первый шаг к ручному редактированию HTML-кода. При разметке текста на элементы очень важно, чтобы открывающему тегу соответствовал такой же закрывающий. Если бы мы изменили открывающий тег на
А закрывающий оставили - это было бы грубейшей ошибкой. Dreamweaver способен "отлавливать" такие ошибки и сообщать нам об этом. Бывают элементы, для которых указывать закрывающий тег не обязательно. Таким элементом, например, является элемент P. Конец первого абзаца может быть обозначен началом второго.
Бывают элементы, которые вообще не могут иметь закрывающего тега, состоит только из открывающего. Это случается, когда элемент предназначен не для разметки текста, а несет самостоятельную смысловую нагрузку. Например изображение, элемент . Элементы могут быть вложены друг в друга. Например, элемент
вложен в элемент
Это значит, что картинка находится внутри абзаца. Мы можем вложить в этот абзац и другие элементы.
Например, давайте какой-нибудь фрагмент текста заключим в элемент . Этот фрагмент выделился курсивом. Элементы не должны не должны при этом "пересекаться": если элемент открылся внутри элемента
То закрыться он должен также внутри
Если же мы закроем элемент "снаружи" его родительского элемента, это будет грубейшей ошибкой, о чём Dreamweaver нам так же сообщит. Вот, он сообщает, что у нас имеются пересекающиеся теги. Некоторые теги помимо имени могут включать в себя атрибуты, содержащие дополнительную информацию о данном конкретном элементе. Атрибут состоит из имени атрибута и значения, разделенных знаком равенства. Например, тег содержит атрибут width, отвечающий за ширину изображения.
Мы можем изменить значение этого атрибута, и ширина картинки изменится. Особыми атрибутами являются id и class. Эти атрибуты применимы почти к любому элементу. Id позволяет дать элементу некоторое уникальное имя и таким образом выделить его из ряда аналогичных элементов. Это имя затем может использоваться: Во-первых, для нестандартного оформления конкретного элемента(например, у нас есть 2 абзаца - одинаковые элементы, выглядят,соответственно, одинаково; присвоив им имена с помощью атрибута id, мы можем контролировать оформление каждого из них по отдельности). Во-вторых, id может использоваться в качестве цели в гиперссылке, т. е. мы можем ссылаться не просто на страницу, а на конкретное её место. В-третьих, для программистских нужд (для определенных манипуляций с конкретным элементом). Class, в отличие от id, не должен быть уникальным. Он задает принадлежность одного или нескольких элементов к определенному классу. Классы используются в основном для оформительских нужд.
Например, мы можем пометить несколько абзацев как принадлежащих к одному классу. Сейчас у нас этот и этот абзацы принадлежат к одному классу и мы можем теперь одним махом изменить их оформление. Помимо тегов в HTML используются так называемые " подстановки" (entities). Они нужны в двух случаях: для вставки в документ символов, отсутствующих на клавиатуре (например, "правильных" кавычек) и для вставки символов, имеющих в HTML служебное значение. Например, если нам нужна угловая скобка и мы напишем её в коде как есть, то, естественно, это будет воспринято браузером как тег. В данном случае вместо угловых скобок нужно указать специальные подстановки, которые будут восприняты браузером, как угловые скобки.
Подстановки имеют следующий вид: &код; Код может быть либо мнемоническим, специальные слова, либо числовым, когда мы просто
указываем номер символа. Числовой код предваряется "решеткой". Существует огромное количество мнемонических кодов, для самых разных символов, но с помощью числового кода мы можем указать абсолютно любой символ, имеющийся в данном шрифте, даже такой, для которого не существует мнемонического кода.
Итак, элементы, теги, атрибуты и подстановки - это основные "кирпичики", из которых строится HTML-документ. Но в любом строительстве мы должны придерживаться некоторых базовых правил: сначала заложить фундамент, возвести стены, накрыть строение крышей и т.д. В строительстве HTML-документа также есть свои законы, которые находят отражение в структуре документа. С разметкой текста мы более-менее разобрались. Вы убедились, что в основе документа лежит ваш текст, разбитый на элементы с помощью тегов. Однако вы можете видеть ещё ряд элементов, непонятно к чему относящихся. Располагаются они строго определенным образом.
Начинается документ с такой строки: . Это так называемая декларация версии HTML. Дело в том, что, как Вы помните, за недолгую, но насыщенную историю своего развития, HTML вышел в нескольких версиях. Чтобы браузер мог правильно показать данный документ, он должен знать, на каком из HTML-ей он написан. В данном случае в этой строке указано, что мы имеем дело с HTML версии 4.01. После декларации начинается сам документ. Он заключен в элемент . Мы видим открывающий тег, и в конце документа находится закрывающий.
Внутри элемента располагаются друг за другом два обязательных элемента: и, следом за ним, . , т.е. заголовок, содержит служебную информацию, не отображаемую в окне браузера, например, элемент содержит название документа, которое выводится в заголовке окна. - это тело документа - оно в себя включает содержимое нашего документа, т.е. то, что мы видим в окошке браузера.
Если всё это изобразить графически, то получится следующая схема. Интересно заметить, что с точки зрения спецификации минимальный HTML-документ должен содержать только два элемента: декларацию версии HTML и элемент TITLE - название документа. Все остальные элементы, строго говоря, являются опциональными. Правда, понятно, что информационная ценность такого документа будет весьма сомнительна.
указывает, в соответствии с каким стандартом HTML написана ваша Web-страница.
| HTML5 | |
| Для всех документов. | |
| HTML 4.01 | |
| Строгий синтаксис HTML. | |
| Переходный синтаксис HTML. | |
| В HTML-документе применяются фреймы. | |
| XHTML 1.0 | |
| Строгий синтаксис XHTML. | |
| Переходный синтаксис XHTML. | |
| Документ написан на XHTML и содержит фреймы. | |
| XHTML мобильного профиля, добавляет специфические элементы для мобильных телефонов. | |
| XHTML 1.1 | |
| Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам. | |
Итак, доктайпов существует несколько (строгие и переходные, для HTML и XHTML). Какой стандарт выбрать - вот в чем вопрос.
Стандарты HTML и XHTMLHTML - стандартный язык разметки Web-документов.
В HTML 4.01 и HTML5 внешний вид страницы отделен от ее содержания. Содержание и структура (заголовки, абзацы, ссылки) задаются в HTML. Оформление (выравнивание, шрифты, цвета) задаются CSS-стилями.
Например, тег и атрибут align объявлены устаревшими.
XHTML - расширяемый язык разметки Web-документов, созданный на базе XML . Стандарт XHTML представляет собой перечень различий между HTML 4.01 и XHTML.
Достоинства языка XHTML - не строгость синтаксиса, а возможность придумывать собственные теги.
Однако, 2 июля 2009 года Консорциум Всемирной паутины (W3C) сообщил о прекращении работ над XHTML 2.0, посчитав концепцию XHTML неверной. Группа программистов переключилась на работу над стандартом HTML5. И хотя стандарт HTML5 всё ещё не утверждён, на нём уже написано множество сайтов.
Кому интересно, когда же HTML5 будет закончен, могут ознакомиться с первоисточниками:
Официальная версия стандарта HTML5 находится по адресу: www.w3.org/TR/html5/
Определимся с выбором. Сделать его несложно: использовать XHTML-стандарт не стоит, если вы не собираетесь расширять язык HTML.
На!DOCTYPE, предназначенных для документов, использующих фреймы , останавливаться не будем: позавчерашний день.
Следующий вопрос: какой выбрать синтаксис - строгий или переходный?
Строгий и переходный синтаксис HTML 4.01Переходные синтаксисы существуют для того, чтобы облегчить переход на новый стандарт. Они пропустят многое из того, что строгий синтаксис посчитает ошибками.
Понять, что тут к чему, проще на примере. Сначала зададим строгий синтаксис.
Строгий синтаксис Проверка на валидность Проверка на валидностькрасным цветом.
Соответствие HTML-кода объявленному стандарту называют валидностью , а проверку на это соответствие - валидацией .
Чтобы отслеживать ошибки верстки, установим дополнение к FireFox Html Validator .
Откроем нашу страницу в браузере FireFox, наведем мышку на знак валидатора:
Двойной щелчок на знаке валидатора даст развернутый список ошибок:
Поменяем!DOCTYPE на переходный синтаксис:
Переходный синтаксис Проверка на валидность Проверка на валидностьЧасть текста понадобилось выделить красным цветом.
Запускаем FireFox. Ошибок нет:
Вроде все прекрасно. Может, на этом и остановиться?
Мой совет: делать валидную верстку или в соответствии со строгим синтаксисом HTML 4.01, или сразу на HTML5. HTML надо использовать по его прямому назначению, а оформление оставить CSS. Кроме того, если у сайта валидная верстка, а он неправильно отображается в каком-либо браузере, то это однозначно проблема браузера. Новые версии браузера будут лучше соответствовать стандарту и не ошибаться в интерпретации валидного кода. Если же сложная верстка реализована невалидным способом, то нет гарантий, что новые версии браузеров не рассыпят ее на кусочки.
Не соблазняйтесь лояльностью переходного синтаксиса, только строгое соответствие стандартам!
Зачем нужна валидная версткаКазалось бы, зачем мучиться? Ведь маленькие недочеты верстки браузеры часто исправляют автоматически, и сайт работает абсолютно нормально. Но эти мелкие, практические незаметные ошибки тем не менее замечают поисковые системы. Даже один отсутствующий тег
- это минус на оценке качества сайта.Именно из-за способности поисковых систем замечать любые недочеты HТML-кода и рекомендуется соблюдать валидность верстки. Кроме того, проверяя код на валидность, можно обнаружить наряду с мелкими недочетами еще и серьезные ошибки, которые были не замечаны ранее.
HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.
Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.
Все HTML-элементы делятся на пять типов:
- пустые элементы
— , ,
, , , ,, , , , , , , , ;
- элементы с неформатированным текстом — , ;
- элементы, выводящие неформатированный текст — , ;
- элементы из другого пространства имён — MathML и SVG;
- обычные элементы — все остальные элементы.
В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.
Полный список HTML-элементов| Используется для добавления комментариев. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Создаёт гипертекстовые ссылки. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title . | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега . | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Загружает звуковой контент на веб-страницу. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Отображает текст в направлении, указанном в атрибуте dir , переопределяя текущее направление написания текста. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Выделяет текст как цитату, применяется для описания больших цитат. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Представляет тело документа (содержимое, не относящееся к метаданным документа). | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |
Перенос текста на новую строку. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Добавляет подпись к таблице. Вставляется сразу после тега
|
