Подписаться

Урок 2. HTML: Понятие, стандарты, тэги и атрибуты

Понятие языка разметки гипертекста. Современные HTML-стандарты: HTML4 / 5, XHTML. Элементы HTML и их разновидности, структура тегов. Основные атрибуты тегов, классификация.

Урок 2. HTML: Понятие, стандарты, тэги и атрибуты

Понятие языка разметки гипертекста. Современные HTML-стандарты: HTML4 / 5, XHTML. Элементы HTML и их разновидности, структура тегов. Основные атрибуты тегов, классификация.
Smartiqa Automation web sm
Предыдущий урок
Урок 1. Web-приложение: Понятие, компоненты и принципы работы
Следующий урок
Урок 3. HTML: Структура страницы, DOM-дерево, применение тэгов

Оглавление

1
Теоретический блок
1. Понятие языка разметки HTML
2. Современные стандарты HTML:
  1. HTML4
  2. XHTML
  3. HTML5
3. Консорциум Всемирной сети
4. HTML теги. Структура тега.
5. HTML теги. Парные и одиночные теги.
6. HTML теги. Блочные и строчные теги.
7. HTML теги. Семантические теги.
8. HTML теги. Классификация атрибутов:
  1. Универсальные атрибуты
  2. Уникальные атрибуты
  3. Специфические атрибуты
  4. Событийные атрибуты
Перейти
2
Практический блок
1. Вопросы
2. Задания
3. Ответы
Перейти

ТЕОРЕТИЧЕСКИЙ БЛОК

1

Понятие языка разметки HTML

HTML (HyperText Markup Language) – это не язык программирования (как, например, Python), а так называемый язык разметки. Он необходим для сообщения браузеру способа отображения посещаемой вами веб-страницы. Вместо того, чтобы показывать сплошной текст, HTML позволяет обернуть его в специальные элементы (теги). Это обеспечивает особое поведение передаваемой информации: она может выделяться курсивом, жирным текстом, транслироваться в виде таблиц, списков, рисунков и иных мультимедиа-данных.

Теги способны нести как структурный смысл (например, показать, что перед нами таблица некоторой размерности с заголовком), так и семантический (выделить информацию определенным образом для поисковых роботов, чтобы те лучше индексировали ваш сайт, или браузеров).
Полезно знать
HTML разработал британец Тим Бернес-Ли в конце 1980-х годов, а как официальный стандарт HTML функционирует с 1993 года. Им же опубликован первый в мире сайт – http://info.cern.ch/hypertext/WWW/TheProject.html - работающий по сей день. На нем содержится информация о технологии World Wide Web, базирующейся на протоколе HTTP, адресации URI, разметке HTML.

Сегодня Тим Бернес-Ли возглавляет W3-Консорциум (World Wide Web Consortium), основная задача которого: разработка и внедрение стандартов Интернета с учетом современных потребностей.
    Изначально HTML был кроссплатформенным, что создавало определенные трудности. Разные браузеры отображали теги по-своему, некоторые элементы могли восприниматься не всеми программами. Причина: отсутствие единого стандарта, поддерживаемого разработчиками. Особую проблему доставлял Internet Explorer (Microsoft долгое время следовала своим наработкам в понимании HTML), что требовало от сайтостроителей учета разных видов браузеров, чтобы содержимое страниц выглядело более-менее одинаковым у пользователей.

    В последние годы данная проблема фактически решена, так как крупные игроки на рынке браузеров пришли к соглашению. На просторах Интернета еще можно встретить сайты, учитывающие старые браузеры, но это уже не обязательное требование к верстальщикам. Чаще всего вас просто попросят обновить свой браузер, чтобы вы смогли увидеть сайт в задуманном виде (для эксперимента попробуйте зайти в любую социальную сеть с очень старого браузера).
    2

    Современные стандарты HTML

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

    До этого 17 лет главенствующим стандартом являлся HTML 4 (с 1997 года). Он встречается и сегодня на ряде сайтов. Определить его можно на основании так называемого доктайпа.
    Доктайп HTML4
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Это первая строка любого HTML-документа, позволяющего браузерам понять способ работы с содержимым страницы. Хоть стандарт и является устаревшим, в нем содержится основной набор тегов, которыми пользуются при создании сайтов. Важно учесть, что часть элементов уже не рекомендована к применению и со временем будет убрана.

    Несмотря на строгую типизацию в языке HTML, ряд браузеров достаточно лояльно относится к документам. Так, тег абзаца (обозначается <p><\p>) разработчик вполне может написать по своему усмотрению:

    1. <p>Абзац<\p> (написание в соответствии со стандартом);
    2. <P>Абзац<\P> (браузеры редко учитывают регистр тегов);
    3. <p>Абзац (некоторые верстальщики могут забыть поставить закрывающий тег, что никак не смутит новую версию практически любого браузера).

    Хорошая практика показывает, что нужно придерживаться некоего единого стиля. Чтобы как-то ограничить вольности программистов, внедрили стандарт XHTML. Он сочетает в себе HTML и XML форматы. Первоочередная задача данного стандарта – замена HTML 4. Однако после появления HTML5 эта потребность несколько снизилась. Тем не менее, многие разработчики используют его и сегодня, чтобы гарантировать отсутствие ошибок в написании кода.

    Ключевые особенности стандарта XHTML:
    – все элементы пишутся строго в нижнем регистре;
    – закрываются даже одиночные теги (например, <img />);
    – основная кодировка – UTF-8;
    – все атрибуты записываются только в развернутом виде (например, если в HTML5 отключить возможность выбора элемента из выпадающего списка можно указанием простого атрибута disabled, то в XHTML обязательно писать disabled="disabled").

    Верстать код сайта на основании стандарта XHTML не обязательно, так как HTML5 и современные браузеры не столь требовательны, но он может встретиться (и этого не нужно пугаться).

    Охарактеризуем специфику HTML5:
    – добавлены семантические элементы (<nav>, <section>, <article> и др.), которые облегчают чтение структуры страницы как разработчикам, так и поисковым машинам;
    – внедрена поддержка векторной графики и специальных форматов (svg, canvas, MathML);
    – представлены новые элементы управления (dates, email, tel);
    – удалены устаревшие теги (big, center, isindex).
    Итог
    Таким образом, базис современной разработки – стандарт HTML5.
      3

      Консорциум Всемирной сети

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

      Некоммерческая организация W3-Консорциум (www.w3.org) разрабатывает единые принципы и рекомендации для производителей Интернет-контента, чтобы обеспечить максимальную совместимость между продуктами, платформами, программами. Это позволяет делать Всемирную сеть максимально удобной и универсальной.
      W3-Консорциум
      W3-Консорциум
      Помимо непосредственно стандартов HTML компания занимается утверждением и других связанных положений:
      1. CSS (каскадные таблицы стилей),
      2. DOM (объектная модель документа),
      3. PNG (формат хранения растровых изображений),
      4. HTTP (протокол передачи данных),
      5. RDF (модель представления метаданных),
      6. XPath (язык для доступа к частям XML-документов) и др

      Важно и то, что вы всегда можете проверить соответствие вашего кода стандарту при помощи валидаторов. В сети их огромное множество и для разных целей: HTML, CSS, JavaScript. Сервисы позволяют валидировать свой или чужой код. Для этого требуется ввести в поисковике требуемый (например, HTML5 валидатор), вставить туда код и произвести проверку. Все нарушения будут подсвечены соответствующим цветом и подсказками. Ими пользуются все разработчики для верификации качества работы программистов. Все современные IDE дают возможность валидировать код (в большинстве случаев для этого потребуется установка плагина).
      4

      HTML теги. Структура тега

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

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

      На текущий момент насчитывается около 120 тегов, а если убрать устаревшие, то и того меньше. Их не так сложно запомнить, да и наиболее часто используемых несколько десятков.

      Рассмотрим типичную структуру web-элемента:

      1. Открывающий тег (все теги представляются в угловых скобках, в открывающем, если требуется, перечисляются атрибуты);
      2. Закрывающий тег (присутствует не во всех тегах, идентифицируется косой чертой);
      3. Атрибут, свойство (название свойства и его значение предпочтительно в двойных кавычках, возможно использовать и одинарные);
      4. Содержимое (внутреннее содержимое тега, обычно в виде текста либо других вложенных тегов).
      Структура web-элемента
      Структура web-элемента
      Подобным образом выглядит любой элемент web-страницы. При наличии нескольких атрибутов они разделяются пробелом. Теги не всегда могут иметь свойства или содержимое.

      Первичное знакомство с разнообразием html-элементов можно осуществить на любом сайте. Если вы находитесь в браузере Chrome, то прямо сейчас можно нажать сочетание клавиш CTRL + U (откроются Инструменты разработчика) и просмотреть код данной страницы . Фактически, весь этот набор тегов и свойств в сочетании с JavaScript обрабатывается браузером, чтобы вы смогли удобно пользоваться текущим сайтом.

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

      Далее поговорим о классификации тегов и атрибутов. Более детальное их описание и примеры будут представлены в следующем уроке.
      5

      HTML теги. Парные и одиночные теги

      Как мы уже поняли выше, теги бывают парными или одиночными.

      1. Одиночные тэги

      Одиночных элементов насчитывается 16 штук. Наиболее часто используемые:

      1. <!doctype> Некая инструкция браузерам для определения того, к какому типу относится документ, какую версию HTML использовать.
      2. <meta> Необходим для задания дополнительной информации о странице, указывается в заголовке HTML-документа. Как и вышеупомянутый тег, не влияет на внешний вид страницы, так как носит служебный характер.
      3. <hr> Задает горизонтальную линию для визуального отделения элементов страницы, применяется для отделения заголовка от основного текста, выделения логических блоков. По умолчанию представляет собой серую линию толщиной в 1 пиксель.
      4. <br> Перенос нижеидущего содержимого на новую строку. Может потребоваться для избегания длинных полотен текста. Небольшие куски информации воспринимаются лучше, чем огромный абзац.
      5. <img> Чтобы вставить на страницу графический элемент. Рисунки можно демонстрировать в одном из следующих форматов: jpg, png, gif. Само изображение в документ не вставляется непосредственно, указывается ссылка на него (локальная или из другого источника), а уже браузер загружает картинку и демонстрирует пользователю.
      6. <input> Применяется в формах и задает тип полей (могут быть текстовыми, числовыми, позволяют выбирать дату, файл, отмечать те или иные элементы списка и т.п.).
      Парные и одиночные теги
      Парные и одиночные теги

      2. Парные тэги

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

      1. <p>Текст</p> Представляет заключенный внутри текст в виде отдельного абзаца. По умолчанию он имеет отступ и отделяется от предыдущего и последующего элементов дополнительным разрывом (это поведение можно поменять).
      2. <a href="#">Текст ссылки</a> Используется для задания и представления в документе ссылки (она может вести на другую страницу сайта, определенный участок на самой странице или любой адрес в Интернете).
      3. <small>Текст</small> Делает текст меньшего масштаба по сравнению с основным.
      4. <mark>Текст</mark> Выделяет текст по подобию маркера (аналог того, как на листах бумаги подчеркивают самое важное фломастером) желтым цветом.
      Важно
      С помощью CSS имеется возможность менять поведение практически всех тегов.
        6

        HTML теги. Блочные и строчные теги

        Поведение любого тега сегодня (в стандарте HTML5) легко изменить по своему усмотрению. Деление элементов на блочные и строчные сложилось исторически (именно поэтому они изначально относятся к одному из этих типов). Сейчас таких типов больше, но их определение связано с каскадными таблицами стилей, о которых пойдет детальная речь в одном из последующих уроков.

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

        Строчные теги не имеют строго размера. Он зависит от того, сколько символов в них содержится. Несколько подряд идущих строчных элементов не будут разделяться новыми строками, а будут выстраиваться друг за другом.
        Полезно знать
        В CSS-свойствах отображение тегов можно менять по следующим типам:

        1. Блочные (display: block) – получает свойство блочности, занимает всю ширину страницы;
        2. Строчные (display: inline) – тег становится строчным;
        3. Флекс (display: flex) – элемент приобретает свойство особого типа блоков – флекс (ведет себя как блок, но внутреннее содержимое гибко настраивается);
        4. Грид (display: grid) – еще один блочный тип с особенностями внутреннего поведения элементов (строятся на основании «сетки», состоящей из строк и колонок);
        5. Таблица (display: table) – тег и его содержимое будут наследовать свойства таблиц;
        6. Строчный блок (display: inline-block) – блочный элемент ведет себя как строка, но сохраняет часть свойств (можно задать размер, границы).
        7. Спрятанный (display: none) – делает элемент невидимым и полностью удаляет его отображение со страницы.

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

          1. Блочный тэг <div>

          Самый популярный блочный тег времен HTML 4. Основная его задача – отобразить содержимое как блок. Он и сегодня входит в список часто используемых. Достаточно открыть код любой страницы в сети и проанализировать его. Почти везде <div> применяется максимально широко. Посмотрим на простой пример.
          Пример - HTML
          
<div>Этот текст занимает всю ширину страницы</div>
<div>Этот текст начнется с новой строки</div>
          Если сохранить приведенный код в виде html-файла и открыть в браузере, то увидим, что куски текста начинаются с разных строк. Причина – в сути блочных элементов (они стремятся занять всю доступную ширину, которая им предоставлена).

          Другие блочные теги:

          1. <table></table> Позволяет рисовать таблицы
          2. <p>Параграф</p> Обозначает параграф текста
          3. <h1>Большой заголовок</h1> Для оформления заголовка самого верхнего уровня (в роли такового обычно выбирается основная статья страницы).
          4. <form></form> Отражает на сайте форму (авторизации, регистрации, опроса и др.)
          Блочные и строчные тэги
          Блочные и строчные тэги

          2. Строчный тэг <span>

          Часто используемый строчный элемент. Фактически, он ничего не делает с текстом, но при помощи атрибутов его содержимое можно определенным образом выделять. Важно и то, что информация не будет прерываться, переноситься на новую строку, выделяться абзацем.
          Пример - HTML
          
<span>Обычный текст без особенностей. </span>
<span>Этот текст не будет начинаться с новой строки</span>
          Вторая часть текста идет вслед за первой без каких-либо разрывов. Строчные элементы занимают столько места, сколько необходимо для их отображения.

          На практике нередко используются следующие строчные теги:

          1. <b>Выделение жирным шрифтом</b> Выделяет участок содержимого жирным шрифтом без придания особой важности. Тег применяют в целях визуализации, чтобы информация воспринималась лучше
          2. <strong>Важный текст</strong> Обозначение значимого участка текста. Чаще всего выглядит как выделенный жирным шрифтом, но воспринимается поисковыми системами как имеющий особую важность в приведенном контексте
          3. <a href="#">Ссылка в никуда</a> Ссылка занимает тот объем на странице, который требуется для демонстрации ее текста
          4. <sub>, <sup> Необходимы для представления степеней и индексов. Рассмотрим пример:
          Пример - HTML
          
<span>sin<sup>2</sup>x + cos<sup>2</sup>x = 1</span>
<br>
<span>CO<sub>2</sub></span>
          В первом случае мы получаем тригонометрическое тождество, а во втором – формулу углекислого газа.
          В HTML5 прямого разделения тегов на блочные и строчные фактически нет. Сейчас говорят о категориях контента, который содержится внутри элемента.
          Полезно знать
          Контентная модель HTML5 позволяет более точно описать типы содержимого, с которым сталкиваются авторы при разработке сайтов. Она включает такие типы:

          1. Поток (flow) – отображает основное содержимое страницы (большая часть тегов включается именно сюда. Например: a, button, header, nav, ol, section);
          2. Метаданные (metadata) – применяются в заголовке документа и определяют поведение остального содержимого и связь с иными данными (Пример тегов: title, meta, script, style);
          3. Текст (phrasing) – включает непосредственно текст страницы и используемые для его форматирования теги. Фактически, это строчные элементы: a, button, i, img, span, textarea;
          4. Встроенный контент (embedded) – часть текстового, строчного содержимого, включающая импортированный контент (Пример тегов: audio, video, img, svg, canvas);
          5. Интерактивные элементы (interactive) – позволяют посетителю сайта взаимодействовать с ресурсом (Включает теги: button, select, video, a, input, textarea);
          6. Заголовки (heading) – для определения заголовков сайта, статей, подразделов (теги от h1 до h6);
          7. Секции (sectioning) – выделение изолированного контента в блоки. Включает теги: article, aside, nav, section.
          Несмотря на это, все элементы с начальными свойствами являются или строчными или блочными по своей сути.
          7

          HTML теги. Семантические теги

          Появление HTML5 позволило подойти к вопросу размещения контента на сайтах по-новому. До этого решался лишь технический вопрос: как сделать сайт, который будет нормально отображаться у разных пользователей с разными устройствами и системами. Так как данная проблема сегодня не столь актуальна (разработчики браузеров более-менее договорились и пришли к единому стандарту), возникла другая: огромное количество сайтов затрудняет демонстрацию пользователям максимально релевантных. Немаловажной стала задача обеспечения доступности ресурсов посетителям с ограниченными возможностями (например, слепым).

          Обычного набора тегов стало не хватать. Потребовался семантический набор. Обычный пользователь особой разницы не увидит: страницы выглядят так же, имеют ту же скорость загрузки. Однако решена важная проблема: поисковые системы стали лучше понимать интернет-ресурсы, а люди с ограниченными возможностями теперь могут удобнее пользоваться сайтами (так, специализированный софт для таких граждан понимает семантику тегов: заголовки будут озвучены как заголовки, побочную информацию из того же тега <aside> можно будет пропустить и т.п.).

          Семантические теги помогают браузерам, поисковикам, разработчикам. Теперь с проблемой однозначности трактования практически покончено. Рассмотрим простой пример.
          Пример - HTML
          
<div>Чтобы создавать сайты необходимо знать HTML, CSS, JavaScript и серверную технологию (например, Node.js, Python или php)</div>
<div>Первый сайт, к слову, создал Тим Бернес-Ли</div>
          Анализ содержимого такой страницы не сложен. Многие, скорее всего, поймут, что первый блок текста затрагивает основное содержимое раздела, тогда как второй – дополнение, интересный факт, побочная, но не обязательная информация. А если речь идет о более комплексной ситуации? Как выяснить, какую смысловую нагрузку имеет тот или иной <div>? Фактически, никак.

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

          Семантические элементы позволяют упростить такую ситуацию. Разработчик помогает не только своим коллегам, но и браузерам и поисковикам. Да и сам сайт существенно быстрее попадет к целевой аудитории (ведь какой-нибудь Яндекс будет показывать вашу страничку не тем, кому интересна биография основателя W3-Консорциума, а тем, кому хочется научиться создавать сайты. Именно в этом заключается суть обозначенного выше HTML-кода).

          К основным тегам такого типа относят:

          1. <article>Будущая статья</article>
          Для выделения независимого, самоопределяемого контента. Тег подразумевает содержимое, которое несет ценность само по себе, обосабливается в общем контексте сайта. Хорошим примером такого вида служит пост на форуме или в блоге, отдельная статья сайта, новость;

          2. <aside>Побочная информация</aside>
          Некие дополнительные данные, косвенно связанные с основным содержанием страницы. Например, вы пишете про списки в Python. В блоке aside можно рассказать про списки и их свойства в других языках программирования;

          3. <details>Дополнительные сведения</details>
          Справочная, дополняющая информация, которую пользователь по своему желанию может не смотреть. Это раскрывающийся блок с надписью Подробнее (по умолчанию). Сюда могут включать сведения об авторе, некие уточнения;

          4. <summary></summary>
          Дает краткую характеристику содержимого блока details. Посмотрим на примере совместную работу элементов.
          Пример - HTML
          
<details>
    <summary>W3-Консорциум</summary>
    Возглавляется Тимом Бернесом-Ли, разработчиком языка разметки HTML.
</details>
          Вместо кнопки Подробнее пользователь увидит надпись W3-Консорциум, нажав на которую получит дополнительные сведения;


          5. <figcaption>Описание</figcaption>
          Комментарий к картинке, пояснения, название;


          6. <figure></figure>
          Выделяет рисунок и его описание в единый блок. Посмотрим пример:
          Пример - HTML
          
<figure>
    <img src="cat.jpg">
    <figcaption>Мой кот сегодня доволен</figcaption>
</figure>
          В тег <figure> мы поместили картинку кота и дополнили пояснениями;


          7. <footer>Заключение</footer>
          Позволяет выделить нижний колонтитул статьи или раздела сайта. Здесь часто подводят итоги, пишут информацию об авторе, резюмируют написанное;

          8. <header>Введение</header>
          Служит для вступительного содержания страницы сайта или статьи. Тут указывают заголовок, подзаголовок, некие вводные данные;

          9. <main>Основное содержимое</main>
          Основной контент документа. Если речь о статье, то именно тут находится ее тело за исключением вводной и заключительной частей;

          10. <nav>Разделы сайта</nav>
          Основное меню сайта заключают в тег nav. Содержит ссылки на разделы сервиса;

          11. <section>Некий блок сайта</section>
          Отдельный раздел документа, не обязательно независимый. Представляет некую тему с содержимым, которые требуется выделить в изолированный блок;



          12. <time></time>
          Позволяет браузеру и поисковым системам понять, что заключенные в тег данные представляют собой дату. Например:
          Пример - HTML
          
Мы работаем до <time>22:00</time> ежедневно
          Визуально этот элемент себя никак не проявляет, тем не менее подразумевает семантический контекст;



          11. <mark>Выделенные данные</mark>
          Содержит информацию, требующую выделения или подчеркивания.
          Структура web-страницы, построенной на семантических тегах
          Структура web-страницы, построенной на семантических тегах
          Подытожим
          Представленные семантические теги являются новыми, введенными в HTML5. Важно понимать, что и многие старые элементы относятся по сути к семантическим (<h1>, <strong>, <table>, <form> и др.).

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

            8

            HTML теги. Классификация атрибутов

            Атрибуты или свойства тегов позволяют расширить функционал HTML-элементов либо предоставить дополнительные сведения о них. Когда идет речь об атрибутах, важно понимать следующее:
            1. У всех тегов есть атрибуты (универсальные, уникальные, событийные или специфические);
            2. Они необходимы для дополнения элемента новыми особенностями;
            3. Они приводятся в открывающем теге через пробел;
            4. Типичный вид атрибута – пара ключ="значение".
            Классификация атрибутов HTML тэгов
            Классификация атрибутов HTML тэгов

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

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

            Перечень универсальных свойств:

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

            Характерны только для одного элемента. Приведем несколько примеров:

            1. ismap
            Имеется только у тега <img> (позволяет получать координаты клика по картинке);

            2. high, low
            Уникальны для тега <meter> – для задания верхней и нижней границы предела определенного диапазона в рамках элемента (например, мы показываем пользователю процент прочтения статьи. Он может варьироваться от 0 до 100 %);

            3. list
            Принадлежит элементу <input> – указывает на id списка, из элементов которого можно выбирать значения для выбранного поля формы.

            8.3. Специфические атрибуты

            Существенная часть атрибутов относится не к одному тегу, а к нескольким. До HTML5 их было еще больше, но сейчас их запретили, так как предпочтительнее задавать их через таблицы стилей. Озвучим ряд из них, которые актуальны в HTML5:

            1. src
            Ссылка на источник медиа-файла (применим к тегам: <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>).

            2. target
            Задает источник целевого открытия ссылки или валидации формы. Актуально для элементов: <a>, <area>, <base>, <form>. Может принимать следующие значения: _blank (откроется новая вкладка в браузере), _self (останемся на текущей вкладке), _parent (загрузка в родительский фрейм, если страница на них разделена), _top (несмотря на наличие фреймов они все закроются, а ссылка откроется на всё окно браузера)

            3. height, width
            Определяют высоту и ширину элемента. Применимы для тегов <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>. Значения – положительные числа (трактуются как пиксели). Можно использовать и проценты - считаются относительно родительского элемента.

            4. name
            Для задания имени элемента. Применяется для следующих тегов: <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea>. По этому названию к объекту можно обращаться через JavaScript, например.

            8.4. Событийные атрибуты

            Связаны с JavaScript-событиями. При взаимодействии пользователя с элементами эти события могут срабатывать и изменять поведение объектов. Их практическое использование будет рассмотрено в теме по JavaScript. Сейчас лишь озвучим некоторые из них для понимания:

            1. onclick
            Скрипт срабатывает при клике мышкой по элементу (можно вызвать всплывающее окно, изменить размер или цвет, перенаправить на другую страницу и т.п.).

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

            3. onmousemove
            Эффект при движении мыши (позволяет создавать интересные эффекты на странице: смещение, увеличение, тряску и т.п.).

            4. onkeydown
            Обработка нажатия определенной клавиши.

            5. onfocus
            Изменение поведения объекта при фокусе на нем (например, когда поставили курсор в поле для ввода логина, само поле может изменить цвет, стать больше, дать какую-то подсказку).

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

              ПРАКТИЧЕСКИЙ БЛОК

              1

              Вопросы

              2

              Задание

              Найдите и исправьте все ошибки в коде (использованы только изученные элементы). Знать структуру web-страницы пока не обязательно - задание больше на внимательность.
              Задание – IDE
              
    <footer>Успехов в освоении</footer>
    <section>
        <H1>Языки программирования</H1>
        <figure>
            <img src="https://www.python.org/">
            <figcaption>Логотип Python</figcaption>
        </figure>
        <article>
            <p>Изучать Python очень весело</p>
            <p>Но нужно читать и практиковаться</p>
            <p>И сильно-сильно стараться<p>
        </article>    
    </section>
    <header>Узнай на все 100 %!</header>
    <navigation>
        <a href="#">Главная страница</a><br>
        <a href="#">Раздел 1</a><br>
        Раздел 2
    </navigation >
              3

              Ответ на задание

              Так как мы еще не изучали структуру html-документа, задание заключалось во внимательности и логике. Итак, в коде можно увидеть такие ошибки:
              1. Тег <h1> написан в верхнем регистре. Хоть браузер и поймет вас, но стилистика кода не должна страдать;
              2. Тег <p> в одном из абзацев не закрыт;
              3. Тэги <header> и <footer> – семантические. Первый относится к введению, а второй – нижнему колонтитулу. Их нужно поменять местами;
              4. Тега <navigation> не существует, есть тег <nav>. Обычно его располагают вверху страницы, но никто не запрещает размещать его и внизу;
              5. Тег <img> указывает не на картинку, а на сайт, что неверно. Да и подсказка ниже убеждает нас в ошибке;
              6. Первые 2 раздела в меню навигации обернуты в ссылку, а третий нет, что нужно подкорректировать.
              Решение - HTML
              
    <header>Узнай на все 100 %!</header>
    <section>
        <h1>Языки программирования</h1>
        <figure>
            <img src="https://www.python.org/static/img/python-logo.png">
            <figcaption>Логотип Python</figcaption>
        </figure>
        <article>
            <p>Изучать Python очень весело</p>
            <p>Но нужно читать и практиковаться</p>
            <p>И сильно-сильно стараться</p>
        </article>    
    </section>
    <nav>
        <a href="#">Главная страница</a><br>
        <a href="#">Раздел 1</a><br>
        <a href="#">Раздел 2</a><br>
    </nav>
    <footer>Успехов в освоении</footer>
              Предыдущий урок
              Урок 1. Web-приложение: Понятие, компоненты и принципы работы
              Следующий урок
              Урок 3. HTML: Структура страницы, DOM-дерево, применение тэгов
              Как вам материал?
              ПОКАЗАТЬ КОММЕНТАРИИ
              Курс. Автоматизация тестирования Web-приложений на Python.
              [ Web ] Урок 1. Web-приложение: понятие, компоненты и принципы работы.
              [ Web ] Урок 2. HTML: Понятие, стандарты, тэги и атрибуты
              [ Web ] Урок 3. HTML: Структура страницы, DOM-дерево, применение тэгов

              Читайте также