Содержание

Оглавление

courses / qa automation / web development

Урок 3. HTML: Структура страницы, DOM-дерево, применение тэгов

Типовая структура web-страницы, понятие DOM-дерева и работа браузера с ним. Содержание web-документа: доктайп, блок header, блок body. Классификация элементов HTML-сайта по задачам и областям применения.

Урок 3. HTML: Структура страницы, DOM-дерево, применение тэгов

Предыдущий урок

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

Следующий урок

Урок 4. CSS: Основные понятия, селекторы, блочная модель

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

Структура веб-страницы и DOM-модель

Код, который можно обнаружить в Инструментах разработчика (Developer Tools) любого веб-браузера не обязательно показывает исходный HTML-документ. Современная разработка сайтов – процесс сложный и многоуровневый. Программисты работают не только с HTML, CSS или JavaScript в рамках нескольких отдельных файлов. Сегодня их применяется огромное множество. На продакшене (окончательной публикации сайта в сеть) интернет-сервис, состоящий из большого количества документов, объединяется воедино. Зачастую применяются и другие языки программирования: Java, Python, С#. Они могут генерировать куски HTML-кода, складывающиеся при запросе той или иной страницы.

Таким образом, открываемая в браузере конкретным пользователем HTML-страница является результатом:

Соединения разных документов (HTML, CSS и скриптов) в единую структуру;
Генерации тегов языками программирования и их фреймворками (Python и Django, JavaScript и Angular);
Обращения к данным из некоторой базы (реляционной или NoSQL);
Воздействия Javascript и AJAX-технологии (позволяет динамически подгружать элементы сайта);
Работы браузера по построению дерева документа.

Последний пункт связан с так называемой моделью DOM (Document Object Model, объектная модель документа).

“

DOM – модель документа как объекта, создаваемая веб-браузером в памяти вашего устройства на основании того HTML-кода, который был получен от сервера.

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

1. Сервер создает HTML-код страницы или отдает его (если это простой статический сайт);
2. Браузер получает код и разбирает на элементы дерева;
3. При необходимости подключается JavaScript, если он используется, чтобы изменить поведение тегов и их содержимого в зависимости от воздействий пользователя;
4. DOM-дерево отображается во вкладке браузера в том виде, который задуман разработчиками.

Подытожим
HTML-код, который пишут программисты – это всего лишь текстовый файл определенного формата, а DOM – результат действий браузера, который создает объекты при парсинге текстовых файлов.

Основные понятия модели DOM

Благодаря W3-консорциуму выработан единый стандарт построения и разбора содержимого веб-страницы. До этого разные браузеры действовали по-своему, что создавало массу неудобств разработчикам. Ознакомиться с актуальным DOM-стандартом можно на официальном сайте.

Озвучим основные структуры, используемые в объектной модели документа:

Дерево (веб-страница может быть представлена как иерархическое перевернутое дерево, начинающееся с главного элемента и расширяющееся к низу. У каждого объекта дерева есть родитель, который может быть пустым, т.е. null, и дети, если он находится не в самом низу);
Наследник (любой дочерний элемент узла дерева. Наследник может быть инклюзивным, т.е. не прямым. Пример: у тега <html> есть дочерний элемент <body>, внутри которого содержится элемент <article>, тогда тег <article> это не прямой наследник <html>);
Предок (если у объекта DOM-дерева есть потомки, то для них он является предком. Здесь также возможна инклюзивность. Из примера выше у тега <article> есть прямой предок – тег <body>, а также инклюзивный родитель – тег <html>);
Братья / сестры (в стандарте используется термин sibling, что с английского переводится как родной брат или сестра. Так объект подразумевает наличие у него «соседей», стоящих на там же уровне дерева и единого предка, не являющегося пустым);
События (к объектам дерева можно применять разные события при помощи JavaScript. Они могут срабатывать на действия пользователя или сетевую активность. Так, при наведении мыши, клике, нажатии клавиши или обрыве связи возможно разное поведение всего сайта или его элементов);
Узел (все элементы DOM-дерева являются узлами, нодами, nodes. Их можно создавать, изменять, вызывать свойства и методы с помощью JS).

Приведем пример простого DOM-дерева.

Пример - HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <title>HTML</title>
</head>
<body>
    <span>Изучаем HTML</span>
</body>
</html>

Имеем некую веб-страницу, состоящую из:

Объявления стандарта HTML (в нашем случае доктайп свидетельствует об использовании HTML5);
Тега <html> (все заключенное между ним будет воспринято как язык разметки);
Тега заголовков (<head>, включающего <title>, внутри которого текст);
Тела страницы, отображаемого пользователю (обозначен тегом <body>). Здесь мы видим только один HTML-элемент – тег <span> с некоторым текстовым содержимым.

Такая структура web-документа является стандартной. Обязательно объявление доктайпа (версии HTML), наличие тега <html>, внутри которого содержатся <head> и <body>. Этого минимума достаточно, чтобы пройти валидацию кода.

Означенное выше наследование элементов представляется браузером как дерево.

Структура DOM-дерева

Анализ дерева позволяет нам выделить следующие объекты (приведем ряд примеров):

Узел <html> является родителем для <body> и <head>, а также инклюзивным родителем для, например, <span> и текста Изучаем HTML;
Узел <title> имеет наследника, т.е. текст HTML, а также прямого родителя в виде <head>;
Узлы <body> и <head> относятся к классу родственников (братья или сестры), так как расположены на одном уровне DOM-дерева и имеют общего предка <html>.

При использовании некоторых тегов в предыдущем уроке многие могли заметить, что мы не везде следовали каноническому шаблону представления web-страницы. Мы брали элемент, помещали его в файл формата html и вполне успешно открывали в браузере. Не было ни заголовков, ни тега body, ни объявления стандарта HTML.

Все это объясняется так: современные браузеры сами дорисовывают отсутствующие элементы. Доказать это просто: создайте любой файл с расширением .html, напишите в нем Моя первая, а потому никакая web-страница. Да, вообще не помещайте никаких тегов, просто текст!
Если открыть данный документ в браузере, никаких ошибок не появится: вы увидите свое сообщение. Просмотр кода покажет, что программа дописала отсутствующие элементы.

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

Теги верхнего уровня

Помимо информации, демонстрируемой непосредственно посетителю сайта, на нем обязана присутствовать и служебная. Она включает объявление доктайпа, заголовка, перечисление метасведений, ссылок на CSS- и JS-файлы и т.д. Ниже подробнее посмотрим на эту группу тегов и инструментов.

3.1. Переходный / строгий <!DOCTYPE>

Как говорилось ранее, доктайп задает стандарт, в котором создана веб-страница, чтобы браузерам было проще распарсить содержимое и построить DOM-дерево. На текущее время можно встретить 3 типа:
1. HTML5: <!DOCTYPE html>
2. HTML4: < !DOCTYPE ... "http://www.w3.org/TR/html4/loose.dtd">
3. XHTML: < !DOCTYPE ... "http://www.w3.org/TR/.../xhtml11.dtd">

Самым популярным и функциональным является первый вид (HTML5), но встречаются и остальные.

3.2. Корневые элементы

Помимо объявления стандарта документа, типичная веб-страница включает еще 3 тега:

1. Тэг <html>
Корневой тег, подразумевающий содержимое в качестве HTML-кода. Начинает любой веб-документ и заканчивает его. Может иметь глобальные атрибуты. Также включает в себя при необходимости уникальное свойство xmlns, если ваша страница обязана следовать стандарту XHTML. Из глобальных атрибутов рекомендуется указывать lang, т.е. язык, который применяется для текста сайта.

Пример - HTML

<html lang="ru" xmlns="http://www.w3.org/1999/xhtml">
    …
</html>

В примере мы задали в качестве языка документа русский и xml пространство имен. Валидатор не будет ругаться, если вы опустите xmlns свойство, так как оно по умолчанию включается в XHTML.

2. Тэг <head>
Блок кода, в который оборачивается заголовочная часть веб-страниц. Это контейнер с метаданными, т.е. информацией о самом документе, которые напрямую не отображаются в окне браузера. Особыми атрибутами не обладает, но может использовать глобальные при необходимости. Внутри обязательно наличие тега <title>. Может также включать элементы: <style>, <base>, <link>, <meta>, <script>, <noscript>.

3. Тэг <body>
Основная часть кода HTML-страницы, так называемое тело документа. Все оставшиеся теги будут присутствовать здесь. Естественно, в документе может встречаться только один раз. Допустимо применение глобальных и событийных свойств.

Тэги верхнего уровня

3.3. Комментарии

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

Пример - HTML

<!--Это комментарий. Он не отражается браузером-->

Наличие комментариев в коде – хорошая практика, свидетельствующая о профессионализме верстальщика и его уважении коллег.

Заголовок веб-страницы. Заголовочные тэги.

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

1. Тэг <title>
Необходим для отображения заголовка страницы. Его видно во вкладке окна. Контент – только текст. Содержимое заголовка важно для SEO, оптимизации поиска роботами вашего сайта. Для каждой страницы возможен только в единственном экземпляре.

Пример - HTML

<head>
    <title>Заголовок страницы</title>
</head>

Может включать глобальные атрибуты. Должен отражать суть страницы (используется при показе в результатах поиска Яндексом, Google'ом и др.) и не быть очень длинным (так как не поместится во вкладке).

2. Тэг <style>
Применяется для указания информации о каскадных таблицах стилей. Когда этих стилей на сайте не так много, не обязательно их размещать в отдельном файле. Достаточно обернуть в этот тег.

Пример - HTML

<style>
    h1 {color:brown;}
    body {color:green;}
</style>

Содержимое страницы модифицируется: все заголовки <h1> станут коричневыми, а любой другой текст тела документа будет зеленым. Пока не будем углубляться в CSS свойства, так как мы их еще не проходили.
При необходимости включает атрибуты: media (указывает на тип устройства, для которого предназначаются эти свойства) и type (со значением text/css).

3. Тэг <base>
Данный тег является одиночным и необходим для указания основного адреса сайта. Все относительные ссылки внутри портала будут отталкиваться от этого корня.

Пример - HTML

<base href=" https://smartiqa.ru/" target="_blank">

Тут мы уточняем, что корневым адресом для остальных относительных ссылок на сайте будет https://smartiqa.ru/, и все они будут открываться в новой странице.

4. Тэг <link>
Является одиночным элементом, но может присутствовать во многих экземплярах в документе. Определяет отношения между текущим файлом и внешними ресурсами. Необходим для указания ссылок на CSS-документы, шрифты, фавикон.

Пример - HTML

<!--Говорит о том, что в качестве таблицы стилей сайт использует файл main.css.-->
<link rel="stylesheet" href="main.css">
<!--Связан со шрифтами. Для документа мы выбрали шрифт от Google «Lobster», 
к которому требуется подключиться заблаговременно.-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<!--Эти два примера взяты с Яндекса: иконка и RSS-канал.
Свойство alternate предоставляет пользователю альтернативную версию документа 
(зеркало, перевод на другой язык, устройство и т.п.).-->
<link rel="shortcut icon" href="//yastatic.net/iconostasis/_/8lFaTHLDzmsEZz-5XaQg9iTWZGE.png">
<link rel="alternate" type="application/rss+xml" title="Новости Яндекса" href="https://yandex.ru/company/press_releases/news.rss">

5. Тэг <meta>
Также одиночный тег, используемый для указания метаинформации о странице. Эти сведения используются браузером, поисковыми машинами или другими сервисами. Зачастую игнорируется начинающими разработчиками, но в руках умелых специалистов творит чудеса.

Пример - HTML

<!--Указываем ключевые слова страницы 
(важны для продвижения сайта и лучшего обнаружения поисковыми машинами).-->
<meta name="keywords" content="HTML, tags, W3C">
<!--Описание документа. Цель – та же.-->
<meta name="description" content="Изучаем структуру web-страницы">
<!--При необходимости указывают создателя сайта или разработчика-->
<meta name="author" content="Василий Программистов">
<!--Принуждает браузер перегружать сайт каждую минуту-->
<meta http-equiv="refresh" content="60">
<!--Учитываем разные устройства, с которых посетители могут заходить на портал. 
Если не указать viewport, то на смартфонах страница будет выглядеть коряво
и занимать не весь доступный объем экрана.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Более подробно с дополнительными атрибутами тега <meta> ознакомиться можно в документации.

Заголовочные тэги HTML страницы

6. Тэг <script>
Данный тег применим не только в заголовочной части страницы, но и в любом другом месте (в зависимости от задачи). Содержит JavaScript код или ссылки на js-скрипты.

Когда нужно, чтобы скрипт сработал с самого начала загрузки сайта, то его включают в заголовочную часть. Если же требуется его функционал после полной загрузки страницы, обычно помещается в самом конце тега <body> (есть и другие способы, но о них в теме по JS).

Пример - HTML

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
    console.log('Все работает!')
</script>

Первый тег <script> говорит о том, что сайт использует фреймворк jQuery, а во втором случае мы обернули им просто код на языке JavaScript, который выводит в консоли инструментов разработчика в браузере обозначенный текст.

7. Тэг <noscript>
Не всегда браузеры поддерживают JavaScript (особенно старые версии), либо эта опция отключена. Чтобы не ломать функционал сайта заботятся и о таких посетителях: их либо предупреждают об ограниченных возможностях, либо просят обновить программу, либо убеждают включить опцию поддержки JS.

Пример - HTML

<noscript>
    Ваш браузер не поддерживает JavaScript. Обновите его или активируйте скрипты.
</noscript>

Заголовок веб-страницы. Особые технологии

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

5.1. Open Graph протокол

Социальные сети – неотъемлемая часть нынешнего Интернета. Если их игнорировать, то бизнес теряет значительную аудиторию.

Технология Open Graph позволяет внедрять содержимое страницы в ленту социальных сетей. Изначально разработана Facebook, но сейчас поддерживается и активно используется и другими соцсетями.

Веб-мастера применяют данный протокол для публикации анонсов материалов сайтов. Он позволяет корректно отображать содержимое новости в рамках конкретного ресурса. Для этого используется тег <meta>. Рассмотрим пример для более наглядной демонстрации возможностей.

Пример - HTML

<meta property="og:title" content="Во все тяжкие">
<meta property="og:type" content="video.tv_show">
<meta property="og:url" content="https://www.imdb.com/title/tt0944947/">
<meta property="og:image" content="https://m.media-amazon.com/images/M/MV5BN2JmZGFiMDktYmRhYi00MDNhLWFhNmItNmEwMGZjMDE0N2U4XkEyXkFqcGdeQXVyNjg0Nzk2Nzc@._V1_FMjpg_UX960_.jpg">
<meta property="og:description" content="Описание сериала">

Здесь мы указали название сериала, тип, ссылку на него, адрес постера и описание. Данный контент можно без проблем разместить в социальной сети, и он отобразится так, как мы задумывали. Ознакомиться подробнее с работой протокола Open Graph можно на официальном сайте.

5.2. Resource Description Framework

Технология RDFa (Структура описания ресурсов в атрибутах) позволяет размещать дополнительные метаданные на странице, не обязательно только в заголовочной части. Это рекомендация W3-Консорциума, задуманная для более тонкого указания поисковым машинам идей web-разработчиков.

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

В дополнение к тегам <meta> может применяться RDFa.

Пример - HTML

<!DOCTYPE html>
</body>
</html>
<html lang="ru"> 
    <head> 
        <title>RDFa</title> 
    </head> 
    <body vocab="http://schema.org/"> 
        <p typeof="Blog"> Добро пожаловать на 
            <a property="url" href="https://smartiqa.ru/">
                сайт
            </a>
            по программированию и тестированию ПО.
        </p> 
    </body> 
</html>

Это минимально возможная структура с использованием RDFa. Мы подключили словарь, чем превратили свойства в термины, а также указали атрибут property="url" для ссылки.

5.3. RSS каналы

Не обязательно посещать десятки сайтов ежедневно, чтобы получить сводку об их обновлениях. RSS (Really Simple Syndication, «Действительно простое агрегирование») – один из способов.

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

Пример - HTML

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
  <title>Статья 1</title>
  <link>https://yandex.ru/</link>
  <description>Описание первой публикации</description>
  <item>
    <title>Статья 2</title>
    <link>https://www.google.ru/</link>
    <description>Описание второй публикации</description>
  </item>
</channel>
</rss>

Сегодня RSS уже не столь популярен (превалируют социальные сети, пуш-уведомления), но вполне актуален.

Тело веб-страницы

Полезное для пользователя содержимое web-ресурса располагается внутри тега <body>. Большая часть элементов – его потомки. Они выполняют разные функции: работают с изображениями или видео, форматируют контент, представляют ссылки, изображают таблицы, отрисовывают формы.

6.1. Работа с текстом

Так как огромная часть наполнения сайта – текст, то для работы с ним предусмотрено солидное количество тегов. Они могут носить как стилистический, так и семантический контекст.

Тело веб-страницы. Работа с текстом

Рассмотрим некоторые:

1. Тэг <address>
Как следует из именования, внутри тега приводится контактная информация. По умолчанию текст внутри тега выделяется курсивом.

Пример - HTML

<address>
    Написано <a href="mailto:webmaster@example.com">Ивановым К. Т.</a><br>
    Адрес:<br>
    www.site.ru<br>
    400300, Новогородск, а/я 100<br>
    РФ
</address>

Пример - Браузер

2. Тэг <b>
Делает текст жирным, но не несет семантической нагрузки. Используется для визуального эффекта. Тег является строчным, поэтому текст внутри не переносится на новую строку.

Пример - HTML

<body>
    Обычный текст
    <b>Выделенный текст</b>
    Обычный текст
</body>

Пример - Браузер

3. Тэг <q>
Для обозначения коротких цитат.

Пример - HTML

<p>Закон Мерфи:
    <q>Когда опаздываешь, маршрутка едет очень медленно и останавливается у каждого светофора.</q>
</p>

Тут мы применили 2 тега: <p> (абзац, блочный) и <q> (строчный). Текст обрамляется кавычками.

4. Тэг <abbr>
Используется для выделения аббревиатуры. Можно применять совместно с элементом <dfn>, когда требуется сообщить, что термин будет расшифрован или ему будет дано определение.

Пример - HTML

<p>
    <dfn>
        <abbr title="Язык разметки гипертекста">
            HTML
        </abbr>
    </dfn> - является стандартом для создания web-страниц.
</p>

Пример - Браузер

Имеются и другие теги для взаимодействия с текстовыми данными: <blockquote>, <cite>, <em>, <i>, <mark>, <s>, <strong>, <sup>, <u> и т.д.

6.2. Ссылки

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

Тело веб-страницы. Ссылки.

1. Тэг <a>
Определяет гиперссылку. Имеет немало особых атрибутов (главный из которых – href), поддерживает глобальные и событийные свойства. Поведение тега по умолчанию в современных браузерах следующее:

Не посещённая ссылка выделяется синим цветом и подчеркиванием
Посещенная ссылка – голубого цвета и подчеркнута
Активная ссылка – красная с подчеркиванием

Пример - HTML

<p>Текст</p>
<a href="https://yandex.ru/" target="_blank">Яндекс</a><br>
<a href="mailto:mymail@mail.ru">Моя почта</a><br>
<a href="tel:+79009000000" target="_blank">Мой телефон</a><br>
<a href="#part2" target="_blank">Якорная ссылка</a><br>
<span id="part2">Текст</span>

Пример - Браузер

На что здесь обратить внимание?
1. Cсылки могут вести на другие страницы сайта или внешние ресурсы, почтовые ящики, телефонные номера или другие части внутри документа.
2. Можно задать и атрибут target, который откроет новую вкладку или загрузит ресурс в старой.
3. При нажатии на ссылку с email, откроется почтовая программа, используемая вами по умолчанию.
4. Нажатие на ссылку телефона попробует позвонить на него, используя ваш мобильный.
5. Для обозначения ссылки на другую секцию страницы (актуально для SPA, одностраничных сайтов), требуется указать ее ID и знак #. Такая ссылка называется якорной.

2. Тэг <nav>
Этот тег сам по себе не является ссылкой, но служит оберткой для главного меню сайта (элементы которого уже являются ссылками). Обычно применяется в единственном экземпляре на странице. Относится к блочным тегам.

Пример - HTML

<nav>
    <a href="#">HTML</a> |
    <a href="#">CSS</a> |
    <a href="#">JavaScript</a> |
    <a href="#">Python</a>
</nav>

Пример - Браузер

Как видно, внутри элемента перечисляются ссылки, относящиеся к навигационному меню сайта.

6.3. Рисунки и мультимедиа

Современный сайт вдоволь наполнен картинками, аудио- и видео-данными, так как ограничения трафика и медленный Интернет для большинства пользователей – давно забытое явление.

Тело веб-страницы. Рисунки и мультимедиа

Рассмотрим некоторые теги этого блока.

1. Тэг <img>
Любое изображение растрового формата на сайте обозначается тегом <img>. Рекомендуется применять его с атрибутами src (тут указывается адрес фотографии) и alt (на случай невозможности отобразить картинку выведется текст).

Пример - HTML

<img href="py.jpg" alt="Python на темном фоне" width="555" height="555">

Пример - Браузер

Так как рисунка py.jpg не существует, отобразилось содержимое свойства alt. Для изображений также можно указывать размеры по ширине и высоте (в пикселях или процентах).

2. Тэг <figure>
Более семантически грамотный способ обозначать иллюстрации на странице. Мы не просто задаем адрес изображения, но и подпись к нему (и сообщаем тем самым, что эта надпись относится к данной картинке). Внутри себя содержит теги <img> и <figcaption>.

Пример - HTML

<figure>
    <img src="https://yastatic.net/s3/home-static/_/_/i/tLI86LIriNsIJwhEqZS2o1Ckk.webp" alt="Яндекс">
    <figcaption>Логотип Яндекса на светлом фоне</figcaption>
</figure>

Пример - Браузер

Особых свойств не имеет, но может поддерживать глобальные и событийные атрибуты.

3. Тэг <picture>
Более гибкая настройка отображения картинок. Позволяет не просто шкалировать рисунки в зависимости от используемого девайса или ширины экрана, но и отображать разные фото (по качеству, содержанию). Для этого применяют дополнительно теги <source>, <img>.

Пример - HTML

<picture>
    <source media="(min-width:900px)" srcset="http://ipic.su/img/img7/fs/operator_python-1024x575.1611716628.jpg">
    <source media="(min-width:600px)" srcset="http://ipic.su/img/img7/fs/python.1611716845.jpg">
    <img src="http://ipic.su/img/img7/fs/v20642.1611716739.jpg" alt="Python">
</picture>

По мере изменения размера окна браузера пользователю будут демонстрироваться разные иллюстрации.

Разрешение экрана < 600px

600px < Разрешение экрана < 900px

900px < Разрешение экрана

4. Тэг <video>
Новый тег, появившийся в HTML5. Используется для внедрения на сайт видео-содержимого. Внутри включает элементы <source>, используемые для роликов разных форматов. Всего их поддерживается 3: MP4, WebM, и OGG.

Пример - HTML

<video width="1300" height="800" controls>
    <source src="film.mp4" type="video/mp4">
    <source src="film.ogg" type="video/ogg">
    Ваш браузер не поддерживает тег VIDEO
</video>

Вначале браузер попробует воспроизвести первый файл, потом второй, а в случае невозможности обработать тег <video> сообщит об этом посетителю ресурса.

6.4. Списки

Для более наглядного восприятия информации ее принято делить на списки, которые могут быть нумерованными или ненумерованными. HTML позволяет их создавать при помощи набора тегов: <ul>, <ol>, <li>, <dl>, <dt>, <dd>.

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

Пример - HTML

<ol start="26" reversed type="a">
    <li>Буква Z</li>
    <li>Буква Y</li>
    <li>Буква X</li>
</ol>

Пример - Браузер

Тег <li> отображает отдельные элементы списка. <ol> показывает, что список нумерованный. Мы применили к нему 3 атрибута:

reversed (обратный порядок нумерации),
start (начали с последней буквы английского алфавита),
type – указали, что в качестве номеров будут использоваться буквы в нижнем регистре.

2. Ненумерованные списки
В качестве маркеров используются специальные значки.

Пример - HTML

<ul type="disc">
    <li>Молоко</li>
    <li>Чай</li>
    <li>Квас</li>
</ul>

Пример - Браузер

По умолчанию в роли маркеров используются закрашенные диски. Изменить тип маркера можно через CSS (вплоть до своих собственных рисунков) либо через атрибут type (type="circle" - выведет окружности, type="square" - делает квадратные маркеры).

3. Списки с определениями
Особый тип списков, в которых содержатся термины и их трактовка. Удобно применять при формировании толкового словаря терминов.

Пример - HTML

<dl>
    <dt>Гипертекст</dt>
    <dd>Группа документов, связанных воедино взаимными ссылками</dd>
    <dt>HTML</dt>
    <dd>Язык разметки гипертекста</dd>
</dl>

Пример - Браузер

6.5. Таблицы

Для построения таблиц применяются соответствующие теги:
1. Тэг <table> (содержимое таблицы),
2. Тэги <caption> (заголовок), <th> (заглавная ячейка), <thead> (группирование заголовочной части таблицы)
3. Тэг <tbody> (основная часть),
4. Тэг <tr> (строка таблицы),
5. Тэги <col> (колонка таблицы), <colgroup> (группировка колонок)
6. Тэг <td> (ячейка),
7. Тэг <tfoot> (итоговое содержимое).

Тело веб-страницы. Таблицы

При помощи свойств rowspan и colspan у тегов <th>, <td> ячейки таблиц можно объединять.

Пример - HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Таблица</title>
    <style>
        td {
            border:indigo solid 3px;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <table>
        <caption>Пример таблицы</caption>
        <tbody>
            <tr>
                <td rowspan="2">1</td>
                <td colspan="2">2</td>
                <td colspan="2">3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
            </tr>
            <tr>
                <td>8</td>
                <td colspan="4">9</td>
            </tr>
        </tbody>
    </table>   
</body>
</html>

Пример - Браузер

На что обратить внимание?

Для отображения границ ячеек использованы стили (мы их изучим в следующей теме, а пока просто применим для наглядности результата).
Свойство rowspan объединяет ячейки одной колонки, а атрибут colspan – ячейки разных колонок (подряд идущих в обоих случаях).
Если не указаны заголовочные или итоговые строки таблицы, ее содержимое оборачивается тегом <tbody>.

6.6. Формы и поля ввода

Форма является интерактивным элементом, так как позволяет пользователю вводить некоторые данные и отправлять их на сервер.

Тело веб-страницы. Формы и поля ввода

Формы оборачиваются тегом <form>, внутри которого возможно наличие элементов:
1. Тэг <input> (после ввода),
2. Тэг <textarea> (текстовое поле для ввода длинного текста),
3. Тэг <button> (кнопка),
4. Тэг <select> (меню опций),
5. Тэг <option> (определенная опция),
6. Тэг <optgroup> (группирование опций),
7. Тэг <fieldset> (группирование части формы),
8. Тэг <label> (подпись элемента),
9. Тэг <output> (поле для результатов вычисления в ответ на действия пользователя),
10. Тэг <legend> (заголовок для содержимого тега <fieldset>),
11. Тэг <datalist> (набор опций для выбора в поле ввода со свойством list).

В теге <form> указывают адрес скрипта, который обрабатывает результат заполнения формы, а также метод отправки данных (GET или POST).

Пример - HTML

 <form action="/action.py" method="get">
        <label for="name">Имя:</label>
        <input type="text" id="fname" name="fname"><br>
        <label for="lname">Фамилия:</label>
        <input type="text" id="lname" name="lname"><br>
        <label for="age">Возраст:</label>
        <input type="number" id="age" name="age" max="120", min="10"><br>
        <label for="browser">Какой у вас браузер?</label>
        <input list="browsers" name="browser" id="browser"><br>
        <datalist id="browsers">
          <option value="Edge">
          <option value="Firefox">
          <option value="Chrome">
          <option value="Opera">
          <option value="Safari">
        </datalist>
        <input type="submit" value="Submit">
    </form>

Пример - Браузер

На что обратить внимание?
1. В форме имеем 2 текстовых поля: для ввода имени и фамилии.
2. В поле для объявления возраста мы ограничили минимальные и максимальные значения, чтобы посетитель не ввел недопустимое число.
3. Также создали список браузеров, из которых имеется возможность выбора (но можно ввести и свое значение).
4. Поле <input> с типом submit необходимо для отправления данных на сервер. Мы задали несуществующий скрипт, так как данные некуда отправлять, но в реальности используют эту информацию и добавляют в базу данных.

6.7. Фреймы

Фреймы представляют собой множественные веб-страницы в рамках одной. Каждый из них загружается как бы в своем пространстве и может отдельно обновляться. На текущий момент представлен единственным тегом: <iframe>.

Пример - HTML

<p>Первый фрейм:</p>
<iframe src="" width="50%" height="200">
</iframe>

<p>Второй фрейм:</p>
<iframe src="" width="100%" height="300">
</iframe>

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

6.8. Стили и семантика

Теги данной категории несут в себе некий смысл, понятный разработчикам, роботам, браузерам, но не посетителям сайта. Они даже не заметят, что на сайте имеется логическая верстка.

В любом случае, чтобы ресурс индексировался лучше, пользователи не уходили разочарованными (ведь поисковик их привел на сайт нерелевантным образом), использование семантики обязательно.

Что касается стилей, то их проще заносить в отдельные файлы (проще для редактирования и нагляднее).

1. Тэги <div> и <span>
Это два нейтральных тега, не имеющие смысловой нагрузки. Основная задача – соединить определенный контент в единое целое (как строку или блок). Когда нельзя по смыслу отнести содержимое к какому-то семантическому элементу, но требуется его стилизация, оно обрамляется в один из этих тегов.

Элементы не имеют уникальных атрибутов, но могут использовать любые событийные или глобальные.

Пример - HTML

<body>
    <div>Блок текста</div>
    <span>Произвольный текст в строке</span>
</body>


<КАРТИНКА 25>Пример - Браузер

Элементы не имеют уникальных атрибутов, но могут использовать любые событийные или глобальные.

2. Тэг <details>
Предназначается для данных, которые пользователь может раскрывать или прятать. Это удобно в случае дополнительных пояснений, наличия необязательной информации, которую можно пропустить. Применяется в совокупности с тегом <summary>.

Пример – HTML
----
<details open>
    <summary>Дополнительная информация</summary>
    <p>Можно не читать</p>
</details>

Пример - Браузер

2. Тэг <details>
Предназначается для данных, которые пользователь может раскрывать или прятать. Это удобно в случае дополнительных пояснений, наличия необязательной информации, которую можно пропустить. Применяется в совокупности с тегом <summary>.

Пример - HTML

<details open>
    <summary>Дополнительная информация</summary>
    <p>Можно не читать</p>
</details>

Пример - Браузер

Использовано свойство open, которое принудительно раскрывает содержимое элемента. Тем не менее, его все еще можно закрыть.

3. Тэг <section>
Данным элементом выделяют обособленную часть страницы, имеющую законченную мысль. В отличие от <article> (который является самостоятельным и независимым) подразумевает логический раздел документа.

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

Пример - HTML

<section>
    <h2>HTML</h2>
    <p>Язык разметки позволяет создавать собственные веб-страницы. Новый стандарт - HTML5.</p>
</section>

Пример - Браузер

Здесь мы показываем, что текущий раздел касается HTML, и предполагаем наличие еще ряда разделов (возможно по CSS, JS).

4. Тэги <h1>...<h6>
В качестве заголовков разделов и подразделов используются теги группы h. H1 – самый крупный заголовок, а h6 – самый маленький. Здесь важен не размер текста, а именно семантическое значение.

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

Пример - HTML

<article>
    <h1>HTML</h1>
    <p>Текст</p>
    <h2>История развития</h2>
    <p>Текст</p>
    <h2>Основные элементы</h2>
    <p>Текст</p>
</article>

Пример - Браузер

Страница содержит информацию по HTML, о чем сказано в заголовке статьи. Подзаголовками служат разделы.

6.9. Программирование

Теги данного типа предназначены для встраивания в страницу дополнительного содержимого с использованием js или иного типа. Чаще всего здесь речь идет об элементе <script> и его сородиче <noscript>. О них мы уже упоминали выше. Остается отметить, что внутри <script> содержится код для обработки веб-страницы или ее частей на стороне клиента.

К этим тегам также относят:
1. Тэг <embed> (для отображения внешнего контента),
2. Тэг <object> (отображает внешние ресурсы),
3. Тэг <param> (определяет параметры тега <object>).

Элементы <embed> и <object> практически идентичны по своей сути. Первый появился раньше, а второй стал его альтернативой для большей поддержки браузерами. В большинстве случаев они заменяются более подходящими тегами: <img>, <video>, <audio>, <iframe>.

ПОДЫТОЖИМ
Таким образом, web-страница представляет собой совокупность тегов, свойств и подключаемых внешних файлов. При создании сайта обязательно указывать доктайп, весь код должен находиться внутри тега <html>. Страница условно разделяется на 2 блока: заголовки и метаданные, а также тело документа с основным контентом.

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

Вопросы

Задание

Создайте форму, позволяющую выбирать несколько из данных значений в поле хобби: кино, музыка, спорт. Используйте теги <label> и <input>.

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

Чтобы пользователь имел возможность выбирать отдельные элементы списка в форме, тегу <input> требуется задать свойство checkbox.

Решение - HTML

   <form action="some.py">
        <input type="checkbox" id="cinema" name="cinema" value="Cinema">
        <label for="cinema"> Обожаю кино</label><br>
        <input type="checkbox" id="music" name="music" value="Music">
        <label for="music"> Люблю музыку</label><br>
        <input type="checkbox" id="sport" name="sport" value="Sport">
        <label for="sport"> Фанатею от спорта</label><br>
        <input type="submit" value="Подтвердить">
    </form>

Хорошая практика при создании форм – назначение подписей к полям (label для input). С помощью значения свойства name у тега <input> элемент <label> получает к нему доступ. Атрибуты value и id используются JavaScript'ом и серверной частью сайта для сохранения значений в базу данных.