Что такое html элемент
Введение в HTML
Версии HTML ¶
Язык HTML был разработан британским ученым Тимом Бернерсом-Ли в 1991 году. Позже начали появляется усовершенствованные версии HTML.
| Версия | Год |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
Основные понятия в HTML ¶
Основной структурной единицей веб-страницы является HTML элемент, для определения которого используются HTML теги.
HTML теги¶
HTML теги используются для определения структуры контента на веб-странице. При помощи тегов мы размечаем контент и даем понять браузеру, как именно показывать ту или иную часть контента (к примеру, текст, изображение, гиперссылка, и т.д.). Сами теги в браузере не показываются.
Большинство тегов в HTML парные (к примеру,
Рассмотрим вышесказанное на примере.
Если нам нужно обозначить в HTML документе абзац (который в HTML документе является элементом), мы используем HTML тег
. Содержимое абзаца мы запишем между открывающим (
HTML атрибуты¶
Структура HTML страницы ¶
Элемент указывает на принадлежность текущего документа к определенному типу HTML. Как мы уже отмечали, существует несколько версий HTML, и для того, чтобы браузер не путался и отображал правильный стандарт, необходимо ему на него указать.
Заголовок веб-страницы пишется между открывающим и закрывающим тегами.
Элемент содержит всю информацию о веб-странице (текст, изображения, видео, и т.д.). Информация записывается между открывающим и закрывающим
Основы HTML для начинающих
Для изучения урока, скачайте архив с необходимыми файлами.
Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.
Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.
На самом деле, существует масса редакторов, с помощью которых можно создавать и редактировать HTML странички по аналогии с Word. То есть исходный HTML код для нас скрыт и в него мы не лезем.
Этакий Word для HTML. Такие визуальные редакторы называются:
Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.
Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.
Структура документа HTML
Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.
Обратите внимание, документы HTML имеют расширение .html.
Итак, по порядку из примера.
— тип документа (доктайп)
Данная конструкция всегда указывается в начале документа для правильного «понимания» браузером того, какая версия HTML используется при построении документа.
В принципе, углубляться в изучение типов документа нет ни какого смысла, ибо с выходом HTML5 данная конструкция стала стандартом. Просто вставляйте ее в начало документа каждый раз, когда начинаете верстать макет сайта.
— начало документа
Тег является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.
Тег предназначен для хранения метаинформации HTML документа, то есть информации, которая не отображается в самом документе, но является важной и во многом определяет, как документ будет выглядеть и как себя вести.
Данный тег обязателен в документе.
Метатег
Метатег, содержащий информацию о кодировке документа. Очень желательно указывать данный тег во всех создаваемых документах для правильного отображения. Отсутствие данного тега может привести к тому, что вместо слов, на странице будут отображены неведомые символы и текст перестанет быть разборчивым и человекопонятным.
Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.
Фавиконка (favicon)
CSS стили документа
Подключает к документу CSS файл со стилями оформления HTML.
Структура HTML-кода
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 4.1 показан код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
Рис. 4.1. Результат выполнения примера
Далее разберем отдельные строки нашего кода.
| DOCTYPE | Описание |
|---|---|
| HTML 4.01 | |
| Строгий синтаксис HTML. | |
| Переходный синтаксис HTML. | |
| В HTML-документе применяются фреймы. | |
| HTML 5 | |
| В этой версии HTML только один доктайп. | |
| XHTML 1.0 | |
| Строгий синтаксис XHTML. | |
| Переходный синтаксис XHTML. | |
| Документ написан на XHTML и содержит фреймы. | |
| XHTML 1.1 | |
| Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам. | |
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее.
Тег определяет начало HTML-файла, внутри него хранится заголовок ( ) и тело документа ( ).
Тег является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.
Тег определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).
Рис. 4.2. Вид заголовка в браузере
Тег является обязательным и должен непременно присутствовать в коде документа.
Тело документа предназначено для размещения тегов и содержательной части веб-страницы.
HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег
представляет собой наиболее важный заголовок первого уровня, а тег
служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги
относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.
определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 4.1.
Часть I.
Веб-страницы: язык HTML
Глава 1.1. Введение в HTML
1.1.1. Что такое HTML?
HTML (HyperText Markup Language) – это язык, принятый в World Wide Web для создания и публикации Веб-страниц. HTML предоставляет авторам средства для:
При этом именно HTML-документ является той средой, в которой размещаются остальные компоненты Веб-страницы. Поэтому мы начинаем наш справочник с описания языка HTML, за которым следуют описания CSS и JavaScript.
Первоначально HTML был разработан Тимом Бернерсом-Ли (Tim Berners-Lee) и его коллегами из CERN Laboratories для обмена текстовыми документами и другими данными между учеными и приобрел популярность благодаря обозревателю Mosaic, авторы которого добавили к нему поддержку графических образов и ряд других полезных качеств. Быстрое развитие Сети в 90-е годы потребовало стандартизации этого языка, и в ноябре 1995 г. по эгидой IETF был создан HTML 2.0. Следующим шагом стала кодификация W3C в январе 1997 г. новой, гораздо более мощной версии HTML 3.2. Наконец, в апреле 1998 г. появился HTML 4.0, который является в настоящее время действующим стандартом языка (в уточненной редакции HTML 4.01, опубликованной в декабре 1999 г.). Именно стандарт HTML 4.0 и будет предметом нашего рассмотрения в данной части книги.
По мере своего развития HTML не только приобретал новые возможности. Часть первоначально введенных в него понятий на сегодня официально объявлены морально устаревшими (deprecated), поскольку они лучше выражаются новыми средствами языка. Автор является сторонником создания HTML-документов в соответствии с требованиями стандарта (между прочим, почти вся эта книга написана на строгом HTML 4.0). Поэтому в этой главе мы не описываем и не используем морально устаревшие элементы и атрибуты языка, хотя они по традиции поддерживаются обозревателями и их можно встретить на многих Веб-страницах; их краткое описание можно найти в Приложении 10. По той же причине не упоминаются в нашем справочнике ни полностью устаревшие (obsolete) элементы языка HTML, ни те дополнения к нему, которые были сделаны разработчиками популярных обозревателей, но не являются стандартными. Вместе с тем, мы увязываем стандарт языка с его реализацией в обозревателях Microscape и потому приводим для каждого элемента сведения о том, как он поддерживается этими обозревателями.
1.1.2. Составные элементы HTML-документа
1.1.2.1. Элементы и теги
HTML это теговый язык разметки документов. Иными словами, любой документ на языке HTML представляет собой набор элементов, причем начало и конец каждого элемента обозначается специальными пометками, называемыми тегами.
Элементы это структуры, которые описывают отдельные составляющие HTML-документа. Элемент состоит из трех частей: начального тега, содержимого и конечного тега. Тег это специальный текст, заключенный в угловые скобки » «. Конечный тег имеет то же имя, что начальный тег, но начинается с косой черты «/». Например, элемент EM (выделение текста) выглядит так:
Имена элементов могут быть набраны в любом регистре, т. е. и равнозначны.
Элементы должны либо следовать друг за другом, либо быть вложены один в другой. Если начальный тег расположен внутри элемента
, то и конечный тег должен быть расположен внутри этого элемента.
Конечные теги некоторых элементов могут быть опущены. Например, конечный тег элемента LI (пункт списка) не обязателен, поскольку начало очередного пункта списка означает конец предыдущего пункта:
Мы, однако, рекомендуем указывать конечный тег элемента даже в тех случаях, когда стандарт позволяет его опустить. Для этого есть две причины:
Некоторые элементы, такие, как BR (новая строка), не имеют конечного тега, поскольку не имеют содержимого.
1.1.2.2. Атрибуты
Атрибуты элемента определяют его свойства. Например, элемент IMG (графический образ) имеет атрибут src, указывающий расположение графического файла, и атрибут alt, задающий альтернативный текст на тот случай, если обозреватель не отображает графику:
Атрибуты всегда включаются в начальный тег элемента и имеют вид:
Значение атрибута может быть заключено в одинарные или двойные кавычки. Кавычки можно опустить, если значение атрибута состоит только из латинских букв (A-Za-z), цифр (0-9), дефисов («-«), подчеркиваний («_»), двоеточий («:») и точек («.»).
Имена атрибутов могут быть набраны в любом регистре, но их значения могут зависеть от регистра. Мы для определенности всюду в дальнейшем пишем имена элементов прописными буквами, а именами атрибутов строчными.
1.1.2.3. Специальные символы
Ряд символов в языке HTML зарезервирован и должен представляться специальным образом:
Для некоторых символов, отсутствующих на клавиатуре, также есть специальные обозначения. Например, символ авторского права © представляется как ©. Полный перечень специальных символов приведен в Приложении 6.
При желании авторы могут пользоваться и числовой кодировкой символов в стандарте Unicode. При этом символ может быть задан своим десятичным кодом (&#код;) или шестнадцатеричным кодом (&#xкод;). Например © представляет символ авторского права ©, а А – русскую букву А.
1.1.2.4. Комментарии
HTML-документы могут содержать комментарии, которые не влияют на отображение документа, а только поясняют его содержимое при просмотре HTML-текста. Комментарии в HTML имеют довольно сложный синтаксис, поэтому мы рекомендует следовать следующим четким правилам:
1.1.3. Типы данных HTML
Значения атрибутов в языке HTML могут иметь различные типы данных. Основными типами данных являются следующие.
CDATA Значения атрибутов типа CDATA являются цепочками символов, включая, возможно, специальные символы. При отображении переносы строк игнорируются, а символы возврата каретки и табуляции заменяются на пробелы. Также игнорируются начальные и конечные пробелы в значении атрибута. Обычно (но не всегда) значения типа CDATA зависят от регистра. ID и NAME Значения атрибутов типа ID и NAME должны начинаться с латинской буквы (A-Za-z) и состоять только из латинских букв (A-Za-z), цифр (0-9), дефисов («-«), подчеркиваний («_»), двоеточий («:») и точек («.»). Эти значения зависят от регистра. Они отличаются тем, что NAME может содержать специальные символы, а ID не может. IDREF и IDREFS Значения типа IDREF и IDREFS указывают на идентификаторы, т. е. на значения атрибута id других элементов. Значение типа IDREF это единственный идентификатор, а значение типа IDREFS это список идентификаторов, разделенных пробелами. IDREF и IDREFS зависят от регистра. Число Числовые значения атрибутов это десятичные числа, состоящие хотя бы из одной цифры (0-9). Текст Текстовые значения атрибутов это значения типа CDATA, представляющие собой осмысленный текст. URI Значения атрибутов типа URI это унифицированные идентификаторы ресурсов (полные или относительные), синтаксис которых должен соответствовать Приложению 2. Цвет Цветовые значения атрибутов могут задаваться либо шестнадцатеричным числом с префиксом «#» вида «#rrggbb», задающим RGB-код цвета, либо одним из 16-ти символических имен, приведенных в Таблице П9.1. Имена цветов не зависят от регистра.
Примечание. Обозреватели Microscape дополнительно поддерживают имена цветов, перечисленные в Таблице П9.2.
| Alternate | Альтернативная версия документа. С атрибутом lang указывает на перевод данного документа на другой язык, с атрибутом media указывает на версию документа, предназначенную для другого носителя (например, для печати). |
| Stylesheet | Указывает на внешнюю таблицу стилей. Этот тип ссылки может использоваться в сочетании с типом Alternate для альтернативных таблиц стилей по выбору пользователя. |
| Start | Ссылка на первый документ в коллекции. Сообщает поисковым системам, какой из документов коллекции автор считает начальным. |
| Next | Ссылка на следующий документ в коллекции. Такие обозреватели, как WebTV, могут использовать эту ссылку для предварительной загрузки следующего документа с целью экономии времени. |
| Prev | Ссылка на предыдущий документ в коллекции. |
| Contents | Ссылка на документ, содержащий оглавление. |
| Index | Ссылка на документ, содержащий алфавитный указатель. |
| Glossary | Ссылка на документ, содержащий глоссарий терминов. |
| Copyright | Ссылка на документ, содержащий сведения об авторском праве. |
| Chapter | Ссылка на документ, служащий главой в коллекции документов. |
| Section | Ссылка на документ, служащий разделом в коллекции документов. |
| Subsection | Ссылка на документ, служащий подразделом в коллекции документов. |
| Appendix | Ссылка на документ, служащий приложением в коллекции документов. |
| Help | Ссылка на документ, содержащий справочную информацию. |
| Bookmark | Указывает на закладку, т. е. содержит ссылку по имени, которое задается атрибутом title. |
| Shortcut Icon | Ссылка на значок документа в папке «Избранное» для обозревателя Internet Explorer 5.x. |
Устройства Значения атрибутов этого типа представляют собой список имен устройств для отображения документа, разделенных пробелами. Имена устройств зависят от регистра и могут быть следующими.
| all | все типы устройств |
| aural | синтезатор речи |
| braille | тактильное устройство Брайля для слепых |
| embossed | печатающее устройство Брайля |
| handheld | переносное устройство (например, пейджер) |
| принтер | |
| projection | проектор |
| screen | графический дисплей |
| tty | неграфический дисплей (терминал, телетайп) |
| tv | телевизор |
| _blank | Загрузить документ в новое безымянное окно. |
| _self | Загрузить документ в окно текущего фрейма. |
| _parent | Загрузить документ в окно предка текущего фрейма. Если фрейм не имеет предка, эквивалентно _self. |
| _top | Загрузить документ в полное текущее окно, отменяя тем самым все фреймы. |
1.1.4. Общие атрибуты элементов HTML
Ряд атрибутов применим к большинству элементов HTML. Эти атрибуты подразделяются на:
1.1.4.1. Идентификатор элемента: атрибут id
Атрибут id присваивает элементу имя, уникальное в пределах данного документа. Никакие два элемента не могут иметь одинаковых значений id. Этот атрибут имеет несколько применений в HTML:
В следующем примере атрибут id использован для идентификации двух абзацев:
С абзацами из этого примера могут быть связаны соответствующие стили. Например, следующая таблица стилей определяет цвета каждого из абзацев:
Эти же абзацы могут использоваться как цель в гиперссылках:
Примечание. Значения атрибутов id и name хранятся в одном пространстве имен, поэтому их значения не могут совпадать в пределах документа. Отметим также, что name может содержать специальные символы, а id нет.
1.1.4.2. Класс элемента: атрибут class
Атрибут class указывает, что элемент является членом определенного класса. В отличие от атрибута id любое количество элементов может относиться к одному классу. Далее, элемент может принадлежать к нескольким классам в этом случае значением атрибута является список имен классов, разделенных пробелами.
Примечание. Большинство обозревателей не поддерживают списки классов, попросту игнорируя такой атрибут class.
Атрибут class особенно полезен в селекторах стилей. Рассмотрим следующий пример:
Здесь в заголовке документа заданы размеры шрифта для обычных абзацев и для абзацев класса note (примечание). Теперь для того, чтобы включить в текст примечание, достаточно присвоить соответствующему абзацу (т. е. элементу P) атрибут class=»note». Именно так построены все примечания в данном справочнике.
1.1.4.3. Стиль элемента: атрибут style
Атрибут style позволяет задать стиль элемента внутри его начального тега, например:
Для использования этого атрибута в заголовок документа должен быть включен метаописатель
В большинстве случаев употребление атрибутов class и id предпочтительнее, т. к. они обеспечивают разделение содержимого документа и стиля его отображения, что обычно упрощает сопровождение разработки.
1.1.4.4. Титул элемента: атрибут title
Атрибут title определяет титул элемента и часто используется обозревателями как подсказка (tooltip), которая выводится на экран, когда курсор помещается на данный элемент. Он особенно полезен в элементах A, LINK, IMG и OBJECT, в которых он указывает на титул связанного или вложенного ресурса. Приведем несколько примеров.
Ссылка на почтовый ящик:
Ссылка на Веб-страницу:
Ссылка на альтернативную Веб-страницу:
Атрибут title полезен также с элементами ABBR и ACRONYM, где он позволяет дать расшифровку сокращения. Примеры:
1.1.4.5. Язык элемента: атрибут lang
Атрибут lang определяет естественный язык, на котором написаны значения остальных атрибутов данного элемента и его содержимое (а также всех вложенных элементов, не имеющих своего атрибута lang). Хотя этот атрибут поддерживается не слишком широко, он находит все большее применение, например:
Значение атрибута lang не зависит от регистра. Список его возможных значений приведен в Приложении 8.
Использование lang также позволяет авторам легко менять стиль текста в зависимости от языка. Например, один из языков в двуязычном документе может изображаться курсивом или произноситься другим голосом в синтезаторе речи. Текст такого документа должен оформляться следующим образом:
Основной язык документа может быть задан атрибутом lang в элементе HTML или в поле заголовка HTTP Content-Language.
Примечание. Атрибут lang не должен использоваться для задания направления вывода текста оно задается атрибутом dir.
1.1.4.6. Направление вывода текста: атрибут dir
Атрибут dir определяет направление вывода текста: слева направо (dir=»», по умолчанию) или справа налево (dir=»»). Всем символам в кодировке Unicode приписано направление, с тем, чтобы текст отображался правильно. Так, латинские и русские буквы выводятся слева направо, а еврейские и арабские – справа налево.
Стандарт Unicode определяет двунаправленный алгоритм, который должен применяться всякий раз, когда документ содержит символы, выводимые справа налево. Хотя обычно этот алгоритм дает правильное изображение текста, существуют ситуации, когда направление вывода текста приходится задавать явно с помощью атрибута dir.
Допустим, например, что русское предложение содержит ивритскую фразу, которая содержит английскую цитату. В этом случае направление вывода ивритской фразы потребует явного указания направления: ивритская фраза, включая английскую цитату, должна быть заключена в элемент SPAN или BDO с атрибутом dir=»».
1.1.4.7. Обработчики событий
HTML поддерживает обработку многих событий, которые могут происходить на компьютере-клиенте. Для обработки события нужно присвоить элементу соответствующий атрибут, имя которого является именем этого события, а значением – сценарий (либо вызов функции, либо набор операторов). Значение такого атрибута может содержать специальные символы.
Следующий пример использует операторы языка JavaScript для обработки двух событий, связанных с кнопкой «Submit», а именно выводит подсказку в строке состояния, когда курсор мыши попадает на кнопку, и очищает строку состояния, когда курсор мыши оказывается за ее пределами. Обратите внимание, что значения атрибутов заключены в одинарные кавычки из-за того, что двойные кавычки использованы внутри них. Подробно правила обработки событий описаны в гл. 4.11.
Если документ содержит обработку событий, то язык сценариев, принятый по умолчанию, должен быть задан в заголовке документа в метаописателе