HTML

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

Теория

Автор

принадлежность

Бизюк Андрей

ВГТУ

Дата публикации

3 декабря 2024 г.

Введение

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

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

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

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:

<!DOCTYPE html>

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

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

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

Элемент <html>

Это корневой элемент, который заключает в себе весь контент HTML-документа. Он может содержать атрибут lang, указывающий на язык документа.
```
<html lang="en">
...
</html>
```
Элемент <head>

Этот элемент содержит метаинформацию о документе, такую как заголовок, ссылки на стили, скрипты и метатеги. Вот основные элементы, которые могут находиться внутри <head>:
- <title>: Определяет заголовок страницы, который отображается в заголовке вкладки браузера.
- <meta>: Включает метаинформацию, такую как кодировка, описание, ключевые слова и инструкции для поисковых систем.
- <link>: Используется для подключения внешних ресурсов, таких как таблицы стилей.
- <style>: Содержит внутренние стили CSS.
- <script>: Включает или подключает скрипты JavaScript.
Пример структуры элемента <head>:
```
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя веб-страница</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>
```
Элемент <body>

Этот элемент содержит основное содержимое веб-страницы, которое отображается в браузере. Все видимые элементы, такие как заголовки, параграфы, изображения, ссылки, таблицы и формы, находятся внутри <body>.

Пример структуры элемента <body>:
```
<body>
    <h1>Заголовок страницы</h1>
    <p>Это параграф текста на моей веб-странице.</p>
    <img src="image.jpg" alt="Описание изображения">
    <a href="https://www.example.com">Ссылка на внешний ресурс</a>
</body>
```

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<table>
    <tr>
        <td>Ячейка 1</td>
        <td>Ячейка 2</td>
    </tr>
    <tr>
        <td>Ячейка 3</td>
        <td>Ячейка 4</td>
    </tr>
</table>

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

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

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

<table>
    <thead>
        <tr>
            <th>Заголовок 1</th>
            <th>Заголовок 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Данные 1</td>
            <td>Данные 2</td>
        </tr>
        <tr>
            <td>Данные 3</td>
            <td>Данные 4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Итог 1</td>
            <td>Итог 2</td>
        </tr>
    </tfoot>
</table>

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

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

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

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

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

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

style

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

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

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

href

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

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

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

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

src

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Семантика в HTML

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

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

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

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

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

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

`<header>`

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

<header>
    <h1>Мой сайт</h1>
    <nav>
        <ul>
            <li><a href="#home">Главная</a></li>
            <li><a href="#about">О нас</a></li>
            <li><a href="#contact">Контакты</a></li>
        </ul>
    </nav>
</header>

`<nav>`

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

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

`<section>`

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

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

`<article>`

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

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

`<aside>`

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

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

`<footer>`

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

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

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример семантической разметки</title>
</head>
<body>
    <header>
        <h1>Мой сайт</h1>
        <nav>
            <ul>
                <li><a href="#home">Главная</a></li>
                <li><a href="#services">Услуги</a></li>
                <li><a href="#contact">Контакты</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>Наши услуги</h2>
            <p>Мы предлагаем широкий спектр услуг для вашего бизнеса.</p>
        </section>
        <article>
            <h2>Новости компании</h2>
            <p>Сегодня мы запустили новый продукт...</p>
        </article>
        <aside>
            <h3>Полезные ссылки</h3>
            <ul>
                <li><a href="#link1">Ссылка 1</a></li>
                <li><a href="#link2">Ссылка 2</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>&copy; 2024 Мой сайт. Все права защищены.</p>
        <nav>
            <ul>
                <li><a href="#privacy">Политика конфиденциальности</a></li>
                <li><a href="#terms">Условия использования</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

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

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

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

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

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

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

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

Пример:

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

Поля ввода

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

Тег `<input>`

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

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

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

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

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

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

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

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

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

Тег `<textarea>`

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

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

Тег `<select>`

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

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

Тег `<button>`

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

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

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

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

Пример:

<form action="/submit-form" method="POST" id="user-form">
    <label for="username">Имя пользователя:</label>
    <input type="text" id="username" name="username" placeholder="Введите ваше имя">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Введите ваш email">
    
    <label for="password">Пароль:</label>
    <input type="password" id="password" name="password" placeholder="Введите ваш пароль">
    
    <button type="submit">Отправить</button>
</form>

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример формы</title>
</head>
<body>
    <form action="/submit-form" method="POST" id="user-form">
        <div>
            <label for="username">Имя пользователя:</label>
            <input type="text" id="username" name="username" placeholder="Введите ваше имя">
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Введите ваш email">
        </div>
        <div>
            <label for="password">Пароль:</label>
            <input type="password" id="password" name="password" placeholder="Введите ваш пароль">
        </div>
        <div>
            <label for="message">Сообщение:</label>
            <textarea id="message" name="message" rows="4" cols="50" placeholder="Введите ваше сообщение"></textarea>
        </div>
        <div>
            <label for="country">Страна:</label>
            <select id="country" name="country">
                <option value="ru">Беларусь</option>
                <option value="ru">Россия</option>
                <option value="us">США</option>
                <option value="de">Германия</option>
            </select>
        </div>
        <div>
            <input type="checkbox" id="subscribe" name="subscribe" value="yes">
            <label for="subscribe">Подписаться на рассылку</label>
        </div>
        <div>
            <button type="submit">Отправить</button>
            <button type="reset">Сбросить</button>
        </div>
    </form>
</body>
</html>

Мультимедиа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример мультимедиа</title>
</head>
<body>
    <h1>Пример добавления мультимедиа</h1>
    
    <h2>Видео</h2>
    <video controls width="600" poster="poster.jpg">
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">
        <source src="video.ogv" type="video/ogg">
        Ваш браузер не поддерживает видео.
    </video>
    
    <h2>Аудио</h2>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        Ваш браузер не поддерживает аудио.
    </audio>
</body>
</html>

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

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

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

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

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

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

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

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

<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>`

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

Тег `<object>`

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

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

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

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

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

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

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

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

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

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

<h2 id="section1">Раздел 1</h2>
<p>Содержимое раздела 1...</p>

<h2 id="section2">Раздел 2</h2>
<p>Содержимое раздела 2...</p>

<a href="#section1">Перейти к Разделу 1</a>
<a href="#section2">Перейти к Разделу 2</a>

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Дополнительные возможности HTML</title>
</head>
<body>
    <h1>Пример дополнительных возможностей HTML</h1>
    
    <h2>Встраивание других документов</h2>
    <iframe src="https://www.example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>
    
    <h2>Эмбеддинг мультимедиа контента</h2>
    <embed src="video.mp4" width="600" height="400" type="video/mp4">
    
    <h2>Гипертекст и навигация</h2>
    <h3 id="section1">Раздел 1</h3>
    <p>Содержимое раздела 1...</p>
    
    <h3 id="section2">Раздел 2</h3>
    <p>Содержимое раздела 2...</p>
    
    <a href="#section1">Перейти к Разделу 1</a>
    <a href="#section2">Перейти к Разделу 2</a>
    
    <p><a href="page1.html">Перейти на Страницу 1</a></p>
    <p><a href="page2.html">Перейти на Страницу 2</a></p>
    
    <h2>Встраивание PDF-документа</h2>
    <object data="document.pdf" type="application/pdf" width="600" height="400">
        Ваш браузер не поддерживает просмотр PDF. Пожалуйста, <a href="document.pdf">скачайте PDF-документ</a>.
    </object>
</body>
</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>