🎓 ВТиП — Веб-технологии и программирование

HTML

👤 Бизюк Андрей 📅 16.01.2025 ⏱️ 19 мин. чтения lecture

Введение

Форматы документов

Документы могут быть разделены на две основные категории по формату данных: текстовые и двоичные.

Текстовые форматы документов:

TXT (Text): Простой текстовый формат, в котором информация представлена в виде чистого текста без форматирования.
HTML (Hypertext Markup Language): Язык разметки, используемый для создания веб-страниц. Включает текст и разметку элементов.
XML (Extensible Markup Language): Формат данных, предназначенный для хранения и обмена структурированными данными в текстовой форме.
JSON (JavaScript Object Notation): Легковесный формат обмена данными, используется для представления структурированных данных в текстовой форме.
CSV (Comma-Separated Values): Формат для хранения табличных данных, где значения разделены запятыми или другими разделителями.

Двоичные форматы документов:

PDF (Portable Document Format): Универсальный формат документов, который поддерживает текст, изображения, графику и формы, сохраняя форматирование.
DOCX (Microsoft Word): Формат документов, используемый Microsoft Word. Содержит текст, изображения и форматирование.
XLSX (Microsoft Excel): Формат таблиц, используемых Microsoft Excel. Содержит данные, таблицы и формулы.
PPTX (Microsoft PowerPoint): Формат презентаций, используемый Microsoft PowerPoint. Содержит слайды с текстом, изображениями и мультимедийным контентом.
JPEG (Joint Photographic Experts Group): Формат для хранения изображений с сжатием. Часто используется для фотографий и графики.
PNG (Portable Network Graphics): Формат для хранения изображений без потери качества. Часто используется для графики с прозрачными фонами.
GIF (Graphics Interchange Format): Формат для хранения коротких анимаций и изображений с ограниченной цветовой палитрой.
TIFF (Tagged Image File Format): Формат для хранения высококачественных изображений без сжатия.
MP3 (MPEG-3): Аудиоформат для хранения музыки и звуковых записей.
MP4 (MPEG-4): Видеоформат для хранения видеофайлов, включая видео и аудио.

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

Языки разметки документов

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

HTML (Hypertext Markup Language): HTML является стандартным языком разметки для создания веб-страниц. Он определяет структуру и содержание веб-документов с использованием тегов, таких как <html>, <head>, <title>, <body>, <p>, <a>, и многих других.
XML (Extensible Markup Language): XML является универсальным языком разметки, предназначенным для создания собственных языков разметки. Он широко используется для обмена данными между различными системами и веб-службами.
SGML (Standard Generalized Markup Language): SGML является предшественником HTML и XML и был разработан для создания общего стандарта разметки документов. Он редко используется непосредственно в настоящее время, но оказал значительное влияние на развитие других языков разметки.
Markdown: Markdown - это легковесный язык разметки, который позволяет авторам быстро и легко создавать форматированные документы с использованием простого синтаксиса. Он широко используется для написания текстовых документов, блогов и документации.
LaTeX: LaTeX - это высокоуровневый язык разметки, который часто используется для создания научных и технических документов, таких как статьи, книги и отчёты. Он предоставляет мощные возможности для создания сложных документов.
JSON (JavaScript Object Notation): JSON, хотя и не является языком разметки документов в строгом смысле, используется для обмена данными и структурирования информации. Он часто используется в веб-разработке для передачи данных между клиентом и сервером.
YAML (YAML Ain’t Markup Language): YAML - это формат сериализации данных, который может использоваться для конфигурации и структурирования информации. Он также используется в веб-разработке и настройке программного обеспечения.
BBCode (Bulletin Board Code): BBCode - это язык разметки, который используется в интернет-форумах и сообществах для форматирования сообщений и обсуждений.

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

Определение HTML

Что такое HTML

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

Основные особенности HTML:

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

История и эволюция HTML

История HTML:

Ранние годы (1990-1995)
- HTML был разработан Тимом Бернерсом-Ли в 1991 году для обмена научными и техническими документами в CERN.
- Первая версия HTML включала простые теги для заголовков, параграфов и ссылок.
HTML 2.0 (1995)
- HTML 2.0 стал первым официальным стандартом, выпущенным IETF (Internet Engineering Task Force) в 1995 году.
- Включал основные элементы и атрибуты, необходимые для создания простых веб-страниц.
HTML 3.2 (1997)
- HTML 3.2 был выпущен W3C (World Wide Web Consortium) в 1997 году.
- Добавлены таблицы, апплеты, математические выражения и другие элементы.
HTML 4.0 (1997)
- HTML 4.0 был также выпущен W3C в 1997 году.
- Включал поддержку каскадных таблиц стилей (CSS), улучшенные формы, скрипты и мультимедиа.
XHTML 1.0 (2000)
- XHTML 1.0 был выпущен W3C в 2000 году как реформа HTML 4.0, объединяющая его с XML.
- Требовал строгого соблюдения синтаксиса и правил XML.
HTML5 (2014)
- HTML5 был официально завершен и выпущен W3C в 2014 году.
- Включал новые семантические элементы (например, <header>, <footer>, <article>), поддержку мультимедиа (видео и аудио), элементы графики (например, <canvas>) и встроенные API.
- HTML5 стал важным шагом к созданию более интерактивных и мощных веб-приложений.

Эволюция HTML:

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

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

Основы HTML

Структура HTML-документа

HTML-документ имеет определённую структуру, которая включает в себя обязательные и необязательные элементы. Основные компоненты HTML-документа включают в себя декларацию Doctype, корневой элемент <html>, а также дочерние элементы <head> и <body>.

Doctype

Doctype — это инструкция для браузера, которая указывает, в какой версии HTML написан документ. В HTML5 используется следующая декларация Doctype:

1<!DOCTYPE html>

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

Элементы `<html>`, `<head>`, `<body>`

HTML-документ начинается с корневого элемента <html>, внутри которого содержатся два основных элемента: <head> и <body>.

Элемент <html>
Это корневой элемент, который заключает в себе весь контент HTML-документа. Он может содержать атрибут lang, указывающий на язык документа.
```
1<html lang="en">
2...
3</html>
```
Элемент <head>
Этот элемент содержит метаинформацию о документе, такую как заголовок, ссылки на стили, скрипты и метатеги. Вот основные элементы, которые могут находиться внутри <head>:
- <title>: Определяет заголовок страницы, который отображается в заголовке вкладки браузера.
- <meta>: Включает метаинформацию, такую как кодировка, описание, ключевые слова и инструкции для поисковых систем.
- <link>: Используется для подключения внешних ресурсов, таких как таблицы стилей.
- <style>: Содержит внутренние стили CSS.
- <script>: Включает или подключает скрипты JavaScript.
Пример структуры элемента <head>:
```
1<head>
2    <meta charset="UTF-8">
3    <meta name="viewport" content="width=device-width, initial-scale=1.0">
4    <title>Моя веб-страница</title>
5    <link rel="stylesheet" href="styles.css">
6    <script src="script.js"></script>
7</head>
```
Элемент <body>
Этот элемент содержит основное содержимое веб-страницы, которое отображается в браузере. Все видимые элементы, такие как заголовки, параграфы, изображения, ссылки, таблицы и формы, находятся внутри <body>.
Пример структуры элемента <body>:
```
1<body>
2    <h1>Заголовок страницы</h1>
3    <p>Это параграф текста на моей веб-странице.</p>
4    <img src="image.jpg" alt="Описание изображения">
5    <a href="https://www.example.com">Ссылка на внешний ресурс</a>
6</body>
```

Пример полного HTML-документа

 1<!DOCTYPE html>
 2<html lang="ru">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Пример HTML-документа</title>
 7    <link rel="stylesheet" href="styles.css">
 8</head>
 9<body>
10    <h1>Добро пожаловать на мою веб-страницу</h1>
11    <p>Это пример простого HTML-документа.</p>
12    <img src="example.jpg" alt="Пример изображения">
13    <a href="https://www.example.com">Посетить пример сайта</a>
14</body>
15</html>

Основные теги и их использование

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

Теги заголовков (`<h1>` - `<h6>`)

Теги заголовков используются для обозначения заголовков различных уровней. Всего существует шесть уровней заголовков, где <h1> обозначает самый важный заголовок, а <h6> - наименее важный.

1<h1>Заголовок первого уровня</h1>
2<h2>Заголовок второго уровня</h2>
3<h3>Заголовок третьего уровня</h3>
4<h4>Заголовок четвертого уровня</h4>
5<h5>Заголовок пятого уровня</h5>
6<h6>Заголовок шестого уровня</h6>

Параграфы (`<p>`)

Тег <p> используется для создания параграфов текста. Каждый параграф отделяется от других вертикальным отступом.

1<p>Это первый параграф.</p>
2<p>Это второй параграф.</p>

Ссылки (`<a>`)

Тег <a> создаёт гипертекстовые ссылки. Основной атрибут этого тега — href, который указывает на адрес ссылки.

1<a href="https://www.example.com">Перейти на пример сайта</a>

Дополнительные атрибуты: - target="_blank" открывает ссылку в новой вкладке. - title добавляет всплывающую подсказку.

1<a href="https://www.example.com" target="_blank" title="Откроется в новой вкладке">Пример сайта</a>

Изображения (`<img>`)

Тег <img> используется для вставки изображений. Основные атрибуты:

src указывает путь к изображению.
alt предоставляет альтернативный текст, который отображается, если изображение не загружается.

1<img src="example.jpg" alt="Пример изображения">

Дополнительные атрибуты:

width и height задают размеры изображения.

1<img src="example.jpg" alt="Пример изображения" width="600" height="400">

Списки (`<ul>`, `<ol>`, `<li>`)

HTML поддерживает два типа списков: маркированные (<ul>) и нумерованные (<ol>). Каждый элемент списка создаётся с помощью тега <li>.

Маркированный список:

1<ul>
2    <li>Элемент списка 1</li>
3    <li>Элемент списка 2</li>
4    <li>Элемент списка 3</li>
5</ul>

Нумерованный список:

1<ol>
2    <li>Элемент списка 1</li>
3    <li>Элемент списка 2</li>
4    <li>Элемент списка 3</li>
5</ol>

Таблицы (`<table>`, `<tr>`, `<td>`)

Таблицы используются для представления табличных данных. Основные теги таблиц включают:

<table>: контейнер для всей таблицы.
<tr>: строка таблицы.
<td>: ячейка таблицы.

Пример таблицы:

 1<table>
 2    <tr>
 3        <td>Ячейка 1</td>
 4        <td>Ячейка 2</td>
 5    </tr>
 6    <tr>
 7        <td>Ячейка 3</td>
 8        <td>Ячейка 4</td>
 9    </tr>
10</table>

Другие важные теги для таблиц:

<th>: заголовочная ячейка таблицы.
<thead>: блок заголовка таблицы.
<tbody>: блок основного содержимого таблицы.
<tfoot>: блок нижнего колонтитула таблицы.

Пример таблицы с этими тегами:

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Заголовок 1</th>
 5            <th>Заголовок 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Данные 1</td>
11            <td>Данные 2</td>
12        </tr>
13        <tr>
14            <td>Данные 3</td>
15            <td>Данные 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Итог 1</td>
21            <td>Итог 2</td>
22        </tr>
23    </tfoot>
24</table>

Атрибуты и их применение

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

Атрибуты тега

Атрибуты могут быть общими для всех тегов или специфическими для конкретных тегов. Рассмотрим основные атрибуты и их применение.

Общие атрибуты

id
- Уникальный идентификатор элемента на странице. Значение должно быть уникальным в пределах документа.
```
1<div id="header">Заголовок страницы</div>
```
class
- Класс элемента, который может быть использован для применения стилей и JavaScript. Значение может содержать несколько классов, разделённых пробелами.
```
1<p class="text large">Этот текст имеет два класса: "text" и "large".</p>
```

style

Применяет встроенные стили CSS к элементу.

1<p style="color: red; font-size: 20px;">Этот текст будет красным и размером 20px.</p>

Атрибуты ссылок

href

Задаёт URL, на который указывает ссылка.

1<a href="https://www.example.com">Перейти на пример сайта</a>

target
- Определяет, как будет открываться ссылка. Значение _blank открывает ссылку в новой вкладке или окне.
```
1<a href="https://www.example.com" target="_blank">Перейти на пример сайта в новой вкладке</a>
```

Атрибуты изображений

src

Задаёт путь к изображению.

1<img src="example.jpg" alt="Пример изображения">

alt
- Предоставляет альтернативный текст, который отображается, если изображение не может быть загружено. Также используется для доступности.
```
1<img src="example.jpg" alt="Пример изображения">
```
width
- Определяет ширину изображения в пикселях или процентах.
```
1<img src="example.jpg" alt="Пример изображения" width="300">
```
height
- Определяет высоту изображения в пикселях или процентах.
```
1<img src="example.jpg" alt="Пример изображения" height="200">
```

Примеры использования атрибутов

Пример с общими атрибутами:

1<div id="main-content" class="container" style="background-color: lightgrey;">
2    <h1 class="title">Заголовок</h1>
3    <p class="text">Это пример текста с атрибутами id, class и style.</p>
4</div>

Пример с атрибутами ссылок:

1<a href="https://www.example.com" target="_blank">Посетите наш сайт</a>

Пример с атрибутами изображений:

1<img src="example.jpg" alt="Описание изображения" width="500" height="300">

Форматирование текста

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

Полужирный (`<b>`, `<strong>`)

Теги <b> и <strong> используются для выделения текста полужирным шрифтом.

<b> (bold): Используется для визуального выделения текста без дополнительной семантики.
```
1<p>Это <b>важный</b> текст.</p>
```
<strong>: Имеет семантическое значение, указывая, что текст имеет сильное значение или важность. Современные браузеры также отображают текст полужирным.
```
1<p>Это <strong>очень важный</strong> текст.</p>
```

Курсив (`<i>`, `<em>`)

Теги <i> и <em> используются для выделения текста курсивом.

<i> (italic): Используется для визуального выделения текста курсивом без дополнительной семантики.
```
1<p>Это <i>наклонный</i> текст.</p>
```
<em> (emphasis): Имеет семантическое значение, указывая на акцент или важность текста. Современные браузеры также отображают текст курсивом.
```
1<p>Это <em>очень важный</em> текст.</p>
```

Подчёркивание (`<u>`)

Тег <u> используется для подчёркивания текста. В HTML5 он также может использоваться для обозначения неправильно написанного текста или текста на иностранном языке.

1<p>Это <u>подчёркнутый</u> текст.</p>

Зачёркивание (`<s>`)

Тег <s> используется для обозначения зачёркнутого текста, который больше не актуален или имеет ошибки.

1<p>Это <s>устаревший</s> текст.</p>

Подсказки и комментарии (`<abbr>`)

<abbr> (abbreviation): Используется для обозначения аббревиатур или сокращений. Атрибут title используется для предоставления полного значения аббревиатуры.
```
1<p>HTML означает <abbr title="HyperText Markup Language">HTML</abbr>.</p>
```

В HTML комментарии можно вставлять с помощью синтаксиса .

1<!-- Это комментарий, он не будет отображаться на странице -->
2<p>Это текст с <!-- комментарий --> комментарием внутри.</p>

Примеры использования тегов форматирования текста

 1<!DOCTYPE html>
 2<html lang="ru">
 3<head>
 4    <meta charset="UTF-8">
 5    <title>Пример форматирования текста</title>
 6</head>
 7<body>
 8    <p>Это пример текста с <b>полужирным</b> и <strong>семантически важным полужирным</strong> выделением.</p>
 9    <p>Это пример текста с <i>курсивным</i> и <em>семантически важным курсивным</em> выделением.</p>
10    <p>Это <u>подчёркнутый</u> текст.</p>
11    <p>Это <s>зачёркнутый</s> текст.</p>
12    <p>HTML означает <abbr title="HyperText Markup Language">HTML</abbr>.</p>
13    <!-- Это комментарий, он не будет отображаться на странице -->
14    <p>Это текст с <!-- комментарий --> комментарием внутри.</p>
15</body>
16</html>

Семантические элементы HTML

Семантика в HTML

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

Зачем нужна семантика

Использование семантических элементов HTML важно по нескольким причинам:

Улучшение доступности: Ассистивные технологии, такие как экранные читалки, могут лучше понимать и представлять содержание пользователям.
SEO: Поисковые системы лучше понимают содержание страницы, что может улучшить индексацию и ранжирование.
Поддержка стандарта: Следование стандартам веб-разработки улучшает совместимость и предсказуемость работы сайта в разных браузерах.
Удобство разработки: Семантические теги делают код более читаемым и поддерживаемым, облегчая понимание структуры документа.

Основные семантические теги

HTML5 представил несколько новых семантических тегов, которые помогают структурировать контент веб-страниц. Рассмотрим основные из них.

`<header>`

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

 1<header>
 2    <h1>Мой сайт</h1>
 3    <nav>
 4        <ul>
 5            <li><a href="#home">Главная</a></li>
 6            <li><a href="#about">О нас</a></li>
 7            <li><a href="#contact">Контакты</a></li>
 8        </ul>
 9    </nav>
10</header>

`<nav>`

Элемент <nav> предназначен для определения навигационного меню. Внутри этого тега обычно размещаются ссылки на другие страницы или разделы текущего документа.

1<nav>
2    <ul>
3        <li><a href="#home">Главная</a></li>
4        <li><a href="#services">Услуги</a></li>
5        <li><a href="#contact">Контакты</a></li>
6    </ul>
7</nav>

`<section>`

Элемент <section> используется для определения раздела документа. Он может содержать заголовки и другие элементы и используется для логического разделения контента.

1<section>
2    <h2>Наши услуги</h2>
3    <p>Мы предлагаем широкий спектр услуг для вашего бизнеса.</p>
4</section>

`<article>`

Элемент <article> предназначен для содержания независимого и самодостаточного контента, такого как статьи, блоги, новости и т.д.

1<article>
2    <h2>Новости компании</h2>
3    <p>Сегодня мы запустили новый продукт...</p>
4</article>

`<aside>`

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

1<aside>
2    <h3>Полезные ссылки</h3>
3    <ul>
4        <li><a href="#link1">Ссылка 1</a></li>
5        <li><a href="#link2">Ссылка 2</a></li>
6    </ul>
7</aside>

`<footer>`

Элемент <footer> используется для определения нижнего колонтитула документа или секции. Обычно содержит информацию об авторе, ссылки на правовые документы, контактную информацию и т.д.

1<footer>
2    <p>&copy; 2024 Мой сайт. Все права защищены.</p>
3    <nav>
4        <ul>
5            <li><a href="#privacy">Политика конфиденциальности</a></li>
6            <li><a href="#terms">Условия использования</a></li>
7        </ul>
8    </nav>
9</footer>

Пример использования семантических элементов

 1<!DOCTYPE html>
 2<html lang="ru">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Пример семантической разметки</title>
 7</head>
 8<body>
 9    <header>
10        <h1>Мой сайт</h1>
11        <nav>
12            <ul>
13                <li><a href="#home">Главная</a></li>
14                <li><a href="#services">Услуги</a></li>
15                <li><a href="#contact">Контакты</a></li>
16            </ul>
17        </nav>
18    </header>
19    <main>
20        <section>
21            <h2>Наши услуги</h2>
22            <p>Мы предлагаем широкий спектр услуг для вашего бизнеса.</p>
23        </section>
24        <article>
25            <h2>Новости компании</h2>
26            <p>Сегодня мы запустили новый продукт...</p>
27        </article>
28        <aside>
29            <h3>Полезные ссылки</h3>
30            <ul>
31                <li><a href="#link1">Ссылка 1</a></li>
32                <li><a href="#link2">Ссылка 2</a></li>
33            </ul>
34        </aside>
35    </main>
36    <footer>
37        <p>&copy; 2024 Мой сайт. Все права защищены.</p>
38        <nav>
39            <ul>
40                <li><a href="#privacy">Политика конфиденциальности</a></li>
41                <li><a href="#terms">Условия использования</a></li>
42            </ul>
43        </nav>
44    </footer>
45</body>
46</html>

Формы и взаимодействие с пользователем

Формы являются важным элементом взаимодействия с пользователями на веб-страницах. Они позволяют собирать данные от пользователей и отправлять их на сервер для обработки.

Создание форм

Форма создается с помощью тега <form>, который является контейнером для различных полей ввода и элементов управления.

Тег `<form>` и его атрибуты

Тег <form> определяет форму и её параметры. Основные атрибуты тега <form> включают:

action: URL, на который будут отправлены данные формы.
method: Метод отправки данных (GET или POST).
name: Имя формы.
id: Уникальный идентификатор формы.

Пример:

1<form action="/submit-form" method="POST" id="user-form">
2    <!-- Поля ввода и элементы управления здесь -->
3</form>

Поля ввода

Поля ввода включают различные теги, такие как <input>, <textarea>, <select>, и <button>. Каждый из них используется для разных типов ввода данных.

Тег `<input>`

Тег <input> используется для создания интерактивных элементов ввода данных. Он поддерживает различные типы ввода через атрибут type.

Примеры различных типов полей ввода:

text: Однострочное текстовое поле.

1<input type="text" name="username" placeholder="Введите ваше имя">

email: Поле для ввода электронной почты, которое проверяет правильность формата.
```
1<input type="email" name="email" placeholder="Введите ваш email">
```
password: Поле для ввода пароля, скрывающее вводимые символы.
```
1<input type="password" name="password" placeholder="Введите ваш пароль">
```
submit: Кнопка для отправки формы.
```
1<input type="submit" value="Отправить">
```

checkbox: Поле для выбора нескольких вариантов.

1<input type="checkbox" name="subscribe" value="yes"> Подписаться на рассылку

radio: Поле для выбора одного из нескольких вариантов.

1<input type="radio" name="gender" value="male"> Мужчина
2<input type="radio" name="gender" value="female"> Женщина

Тег `<textarea>`

Тег <textarea> используется для создания многострочного текстового поля.

1<textarea name="message" rows="4" cols="50" placeholder="Введите ваше сообщение"></textarea>

Тег `<select>`

Тег <select> используется для создания выпадающего списка, а тег <option> - для определения вариантов в списке.

1<select name="country">
2    <option value="ru">Россия</option>
3    <option value="us">США</option>
4    <option value="de">Германия</option>
5</select>

Тег `<button>`

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

1<button type="submit">Отправить</button>
2<button type="reset">Сбросить</button>

Лейблы и их связь с полями ввода (`<label>`)

Тег <label> используется для связи с полями ввода и улучшения доступности. Лейбл привязывается к полю ввода через атрибут for, значение которого должно совпадать с атрибутом id поля ввода.

Пример:

 1<form action="/submit-form" method="POST" id="user-form">
 2    <label for="username">Имя пользователя:</label>
 3    <input type="text" id="username" name="username" placeholder="Введите ваше имя">
 4    
 5    <label for="email">Email:</label>
 6    <input type="email" id="email" name="email" placeholder="Введите ваш email">
 7    
 8    <label for="password">Пароль:</label>
 9    <input type="password" id="password" name="password" placeholder="Введите ваш пароль">
10    
11    <button type="submit">Отправить</button>
12</form>

Пример полной формы

 1<!DOCTYPE html>
 2<html lang="ru">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Пример формы</title>
 7</head>
 8<body>
 9    <form action="/submit-form" method="POST" id="user-form">
10        <div>
11            <label for="username">Имя пользователя:</label>
12            <input type="text" id="username" name="username" placeholder="Введите ваше имя">
13        </div>
14        <div>
15            <label for="email">Email:</label>
16            <input type="email" id="email" name="email" placeholder="Введите ваш email">
17        </div>
18        <div>
19            <label for="password">Пароль:</label>
20            <input type="password" id="password" name="password" placeholder="Введите ваш пароль">
21        </div>
22        <div>
23            <label for="message">Сообщение:</label>
24            <textarea id="message" name="message" rows="4" cols="50" placeholder="Введите ваше сообщение"></textarea>
25        </div>
26        <div>
27            <label for="country">Страна:</label>
28            <select id="country" name="country">
29                <option value="ru">Беларусь</option>
30                <option value="ru">Россия</option>
31                <option value="us">США</option>
32                <option value="de">Германия</option>
33            </select>
34        </div>
35        <div>
36            <input type="checkbox" id="subscribe" name="subscribe" value="yes">
37            <label for="subscribe">Подписаться на рассылку</label>
38        </div>
39        <div>
40            <button type="submit">Отправить</button>
41            <button type="reset">Сбросить</button>
42        </div>
43    </form>
44</body>
45</html>

Мультимедиа

Добавление мультимедиа контента на веб-страницы позволяет создавать более интерактивные и привлекательные сайты. HTML5 предоставляет удобные теги для добавления видео и аудио на страницы.

Видео (`<video>`)

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

Атрибуты тега `<video>`

src: Указывает путь к видеофайлу.
controls: Показывает элементы управления воспроизведением (плей, пауза, громкость и т.д.).
autoplay: Автоматически воспроизводит видео при загрузке страницы.
loop: Повторяет видео после его окончания.
muted: Воспроизводит видео без звука.
poster: Указывает изображение, которое будет отображаться до начала воспроизведения видео.

Пример использования `<video>`

1<video src="video.mp4" controls width="600">
2    Ваш браузер не поддерживает видео.
3</video>

В этом примере добавлено видео с элементами управления и шириной 600 пикселей. Если браузер не поддерживает видео, будет отображено сообщение.

Пример с несколькими источниками видео

Чтобы обеспечить совместимость с разными браузерами, можно использовать несколько источников видео в разных форматах (.mp4, .webm, .ogg).

1<video controls width="600" poster="poster.jpg">
2    <source src="video.mp4" type="video/mp4">
3    <source src="video.webm" type="video/webm">
4    <source src="video.ogv" type="video/ogg">
5    Ваш браузер не поддерживает видео.
6</video>

Аудио (`<audio>`)

Тег <audio> используется для вставки аудио на веб-страницу. Он также поддерживает различные атрибуты для управления воспроизведением.

Атрибуты тега `<audio>`

src: Указывает путь к аудиофайлу.
controls: Показывает элементы управления воспроизведением (плей, пауза, громкость и т.д.).
autoplay: Автоматически воспроизводит аудио при загрузке страницы.
loop: Повторяет аудио после его окончания.
muted: Воспроизводит аудио без звука.

Пример использования `<audio>`

1<audio src="audio.mp3" controls>
2    Ваш браузер не поддерживает аудио.
3</audio>

В этом примере добавлено аудио с элементами управления. Если браузер не поддерживает аудио, будет отображено сообщение.

Пример с несколькими источниками аудио

Чтобы обеспечить совместимость с разными браузерами, можно использовать несколько источников аудио в разных форматах (.mp3, .ogg).

1<audio controls>
2    <source src="audio.mp3" type="audio/mpeg">
3    <source src="audio.ogg" type="audio/ogg">
4    Ваш браузер не поддерживает аудио.
5</audio>

Пример страницы с мультимедиа

 1<!DOCTYPE html>
 2<html lang="ru">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Пример мультимедиа</title>
 7</head>
 8<body>
 9    <h1>Пример добавления мультимедиа</h1>
10    
11    <h2>Видео</h2>
12    <video controls width="600" poster="poster.jpg">
13        <source src="video.mp4" type="video/mp4">
14        <source src="video.webm" type="video/webm">
15        <source src="video.ogv" type="video/ogg">
16        Ваш браузер не поддерживает видео.
17    </video>
18    
19    <h2>Аудио</h2>
20    <audio controls>
21        <source src="audio.mp3" type="audio/mpeg">
22        <source src="audio.ogg" type="audio/ogg">
23        Ваш браузер не поддерживает аудио.
24    </audio>
25</body>
26</html>

Дополнительные возможности HTML

Фреймы и встроенные элементы

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

Встраивание других документов (`<iframe>`)

Тег <iframe> используется для встраивания другого HTML-документа на текущую веб-страницу. Этот тег позволяет отображать содержимое другого сайта или документа внутри рамки.

Атрибуты тега `<iframe>`

src: Указывает URL документа, который будет отображаться внутри фрейма.
width: Ширина фрейма (в пикселях или процентах).
height: Высота фрейма (в пикселях или процентах).
frameborder: Указывает, должен ли быть отображен бордюр вокруг фрейма (0 или 1).
allowfullscreen: Позволяет включить полноэкранный режим для содержимого фрейма.

Пример использования `<iframe>`

1<iframe src="https://www.example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>

В этом примере на страницу встраивается содержимое сайта “example.com” с указанными размерами и без бордюра.

Эмбеддинги (`<embed>`, `<object>`)

Элементы <embed> и <object> позволяют встраивать мультимедийный контент, такие как видео, аудио, PDF-документы и флеш-контент.

Тег `<embed>`

Тег <embed> используется для встраивания мультимедийного контента.

Атрибуты тега `<embed>`

src: Указывает путь к мультимедийному файлу.
width: Ширина элемента (в пикселях или процентах).
height: Высота элемента (в пикселях или процентах).
type: Указывает MIME-тип встраиваемого содержимого.

Пример использования `<embed>`

1<embed src="video.mp4" width="600" height="400" type="video/mp4">

Тег `<object>`

Тег <object> более универсален и может использоваться для встраивания различных типов контента.

Атрибуты тега `<object>`

data: Указывает путь к встраиваемому файлу.
width: Ширина элемента (в пикселях или процентах).
height: Высота элемента (в пикселях или процентах).
type: Указывает MIME-тип встраиваемого содержимого.

Пример использования `<object>`

1<object data="document.pdf" type="application/pdf" width="600" height="400">
2    Ваш браузер не поддерживает просмотр PDF. Пожалуйста, <a href="document.pdf">скачайте PDF-документ</a>.
3</object>

Гипертекст и навигация

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

Использование якорей

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

Пример использования якорей

1<h2 id="section1">Раздел 1</h2>
2<p>Содержимое раздела 1...</p>
3
4<h2 id="section2">Раздел 2</h2>
5<p>Содержимое раздела 2...</p>
6
7<a href="#section1">Перейти к Разделу 1</a>
8<a href="#section2">Перейти к Разделу 2</a>

В этом примере ссылки позволяют перемещаться к различным разделам страницы.

Внутренние ссылки

Внутренние ссылки используются для перехода между страницами одного сайта. Они задаются с относительными путями.

Пример использования внутренних ссылок

1<a href="page1.html">Перейти на Страницу 1</a>
2<a href="page2.html">Перейти на Страницу 2</a>

Пример страницы с использованием фреймов, эмбеддингов и гипертекста

 1<!DOCTYPE html>
 2<html lang="ru">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Дополнительные возможности HTML</title>
 7</head>
 8<body>
 9    <h1>Пример дополнительных возможностей HTML</h1>
10    
11    <h2>Встраивание других документов</h2>
12    <iframe src="https://www.example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>
13    
14    <h2>Эмбеддинг мультимедиа контента</h2>
15    <embed src="video.mp4" width="600" height="400" type="video/mp4">
16    
17    <h2>Гипертекст и навигация</h2>
18    <h3 id="section1">Раздел 1</h3>
19    <p>Содержимое раздела 1...</p>
20    
21    <h3 id="section2">Раздел 2</h3>
22    <p>Содержимое раздела 2...</p>
23    
24    <a href="#section1">Перейти к Разделу 1</a>
25    <a href="#section2">Перейти к Разделу 2</a>
26    
27    <p><a href="page1.html">Перейти на Страницу 1</a></p>
28    <p><a href="page2.html">Перейти на Страницу 2</a></p>
29    
30    <h2>Встраивание PDF-документа</h2>
31    <object data="document.pdf" type="application/pdf" width="600" height="400">
32        Ваш браузер не поддерживает просмотр PDF. Пожалуйста, <a href="document.pdf">скачайте PDF-документ</a>.
33    </object>
34</body>
35</html>

Введение

Форматы документов

Языки разметки документов

Определение HTML

Что такое HTML

История и эволюция HTML

Основы HTML

Структура HTML-документа

Doctype

Элементы <html>, <head>, <body>

Пример полного HTML-документа

Основные теги и их использование

Теги заголовков (<h1> - <h6>)

Параграфы (<p>)

Ссылки (<a>)

Изображения (<img>)

Списки (<ul>, <ol>, <li>)

Таблицы (<table>, <tr>, <td>)

Атрибуты и их применение

Атрибуты тега

Общие атрибуты

Атрибуты ссылок

Атрибуты изображений

Примеры использования атрибутов

Форматирование текста

Полужирный (<b>, <strong>)

Курсив (<i>, <em>)

Подчёркивание (<u>)

Зачёркивание (<s>)

Подсказки и комментарии (<abbr>)

Примеры использования тегов форматирования текста

Семантические элементы HTML

Семантика в HTML

Зачем нужна семантика

Основные семантические теги

<header>

<nav>

<section>

<article>

<aside>

<footer>