HTML учебник. Бесплатные уроки HTML для начинающих разработчиков и веб-мастеров. Пробуем создать простой HTML сайт.

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Язык HTML, если можно так сказать, состоит из двух элементов: HTML тэги и HTML атрибуты. Первые определяют структуру HTML документа, а вторые предназначены для того, чтобы сделать HTML элементы на страницах в браузере уникальными и непохожими друг на другу. В этой публикации мы как раз-таки и будем разбираться, как сделать элементы более уникальными при помощи HTML атрибутов.

Виды HTML атрибутов: атрибуты событий или HTML события, универсальные HTML атрибуты.

Из этой записи вы узнаете о том для чего нужны HTML атрибуты; о особенностях синтаксиса HTML атрибутов. Так же мы поговорим о том, какие виды атрибутов существуют в HTML и рассмотрим каждую группу HTML атрибутов более подробно: универсальные HTML атрибуты, атрибуты событий или просто события и уникальные HTML атрибуты.

Для чего нужны HTML атрибуты

Обычно во всех учебниках HTML и на сайтах, где авторы пытаются научить посетителей языку разметки HTML, про HTML атрибуты говорят уже после того, как опишут особенности всех HTML тэгов, на наш взгляд, это не совсем правильный подход и про HTML атрибуты нужны рассказать перед тем, как приступать к изучению особенностей HTML тэгов, так будет намного проще усваивать дальнейшую информацию.

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

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

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

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

Синтаксис HTML атрибутов

Когда мы говорили про синтаксис HTML и HTML тэги, мы упоминали о том, что есть еще и HTML атрибуты, давайте вспомним их синтаксис:

[php]

attribute = “value”

[/php]

HTML атрибут состоит из имени атрибута и значения, между именем и значением указывается знак равно. Некоторые HTML атрибуты вообще не имеют значений. Если значение HTML атрибута это строка, то она обязательно обрамляется кавычками, кавычки можно использовать, как одинарные, так и двойные. Если значение HTML атрибута число, то оно указывается так же в кавычках.

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

В более ранних публикация раздела HTML мы уже использовали HTML атрибуты  давайте приведем пример:

[php]

<div id="content" style="width: 800px; margin: 0 auto;">…</div>

[/php]

В данном случае для блока <div>мы задали два HTML атрибута: атрибут id и атрибут style, которым присвоили значения: значение атрибута id поможет нам «найти»  данный HTML элемент DIV, когда мы захотим изменить его отображение при помощи таблицы стилей или изменить его поведение при помощи JavaScript, например, воспользовавшись библиотекой jQuery.

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

Поэтому вам сразу лучше выбрать стиль написания HTML атрибутов и придерживаться его в дальнейшем: так будет проще и вам и тем людям, которые будут работать вместе с вами.

Виды HTML атрибутов

HTML атрибуты, как и HTML тэги, и HTML элементы делятся на виды. С уверенностью можно выделить три вида HTML атрибутов:

• универсальные HTML атрибуты;
• HTML атрибуты событий;
• уникальные HTML атрибуты.

Универсальные HTML атрибуты имеют все (или практически все) HTML тэги. HTML атрибуты событий нужны для того, чтобы взаимодействовать с HTML элементами при помощи языков программирования, например, при помощи JavaScript или PHP.Уникальные HTML атрибуты свойственны только для определенных HTML элементов или для определенной группы HTML элементов.

Конечно, можно выделить еще и запрещенные HTML атрибуты или делить их на HTML атрибуты таблиц, HTML атрибуты фреймов и так далее, но предложенная классификация HTML атрибутов наиболее полная и удобная для понимания.

Универсальные HTMLатрибуты

Универсальные HTML атрибуты есть у каждого HTML элемента на странице. Но это не означает, что если вы не задали универсальный HTML атрибут, то его нет, просто браузер из каких-то своих соображений подставит не заданному атрибуту значение по умолчанию. Давайте приведем список универсальный HTML атрибутов и дадим им краткую характеристику:

1. Универсальный HTML атрибут accesskey. Этот HTML атрибут позволяет взаимодействовать с HTML элементами при помощи заданного сочетания клавиш.
2. Универсальный HTML атрибут class. Этот атрибут позволяет задать класс для HTML элемента, чтобы потом взаимодействовать с элементом при помощи таблицы стилей или языка программирования.
3. Универсальный HTML атрибут contenteditable. Если HTML элементу задан такой атрибут, то пользователь может его редактировать.
4. Универсальный HTML атрибут contextmenu. Данный атрибут позволяет создать контекстное меню для HTML элемента на странице.
5. Универсальный HTML атрибут dir.Этот атрибут полезен для многоязычных сайтов, так как позволяет задать направление текста: слева направо или справа налево .
6. Универсальный HTML атрибут hidden. При помощи данного атрибута можно скрыть HTML элемент и его содержимое на странице.
7. Универсальный HTML атрибут id. Этот атрибут позволяет задать идентификатор для HTML элемента, идентификатор должен быть уникальным и не должен повторяться внутри HTML документа.
8. Универсальный HTML атрибут lang. Этот атрибут используется браузером, чтобы правильно отображать символы некоторых языков.
9. Универсальный HTML атрибут spellcheck. Данный атрибут позволяет сказать браузеру, чтобы тот проверял правописание.
10. Универсальный HTML атрибут style. Атрибут нужен чтобы задать CSS правила в HTML документе для конкретного элемента страницы.
11. Универсальный HTML атрибут tabindex. Не каждый пользуется мышью для работы, поэтому данный атрибут полезен, если вы хотите задать порядок переключения между HTML элементами страницы при помощи клавиши Tab.
12. Универсальный HTML атрибут title. Данный атрибут создает всплывающую подсказку при наведении курсора мыши на HTML элемент, текст подсказки – содержимое данного атрибута.
13. Универсальный HTML атрибут xml:lang. Этот атрибут по своему действию похож на lang, но для документов  xHTML.

Еще раз повторим, что атрибуты, указанные в списке сверху являются универсальными и есть у каждого HTML элемента на странице.

HTMLатрибуты событий

HTML атрибуты событий обычно используются для того, чтобы вызвать какой-нибудь код на исполнение, когда пользователь совершает определенные действия, хотя это не всегда так. HTML атрибуты событий часто используются вместе с HTML формами, но и не только. Давайте приведем список HTML атрибутов событий или просто HTML событий:

1. HTML событие onblur. Событие потери фокуса на HTML элементе.
2. HTML событие onchange. Событие Изменения значения элемента формы.
3. HTML событие onclick. Событие щелчка левой кнопкой мыши на HTML элементе.
4. HTML событие ondblclick. Событие двойного клика левой кнопкой мыши на HTML элементе.
5. HTML событие onfocus. Событие происходит, когда HTML элемент получает фокус.
6. HTML событие onkeydown. Это событие означает, что клавиша нажата, но не отпущена.
7. HTML событие onkeypress. Это событие означает, что клавиша нажата и отпущена.
8. HTML событие onkeyup. Это событие означает, что клавиша отпущена.
9. HTML событие onload. Событие того, что документ загружен.
10. HTML событие onmousedown. Срабатывает, если нажата левая кнопка мыши.
11. HTM Lсобытие onmousemove. Такое событие сработает, когда будет перемещен курсор мыши.
12. HTML событие onmouseout. Этот атрибут начнет работать, когда курсор покидает элемент.
13. HTML событие onmouseover. Событие, которое означает, что курсор наводится на элемент.
14. HTML событие onmouseup. Событие начнет работать, когда левая кнопка мыши отпущена.
15. HTML событие onreset. Событие того, что форма очищена.
16. HTML событие onselect. Данное событие говорит о том, выделен текст в поле формы.
17. HTML событие onsubmit.Событие того, что форма отправлена.
18. HTML событие onunload Событие закрытия окна.

Это все HTML события или атрибуты событий в HTML.

Уникальные HTMLатрибуты

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