About Teletype
Join
Артем
@refreshpvp
Веб-разработка
October 18

Что такое HTML? И с чем его едят

Телеграм канал

Приблизительная оценка времени на чтиво каждого блока:

  1. Введение в HTML и установка рабочего окружения: 10-15 минут
  2. Структура HTML-документа: 5-10 минут
  3. Элементы и атрибуты: 5-10 минут
  4. Семантические теги: 10-15 минут
  5. Формы в HTML: 15-20 минут
  6. Базовые концепции: 5-10 минут
  7. Мультимедиа в HTML: 10-15 минут

А также, в самом низу есть практика, которую можете пройти по желанию и скинуть -> smertoubijstvenost

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

HTML тесно связан с другими технологиями:

  • CSS (Cascading Style Sheets) — используется для стилизации и оформления элементов на странице.
  • JavaScript — применяется для добавления интерактивности на веб-страницы.

Пример HTML-кода:

<!DOCTYPE html>
<html>
  <head>
    <title>Пример HTML страницы</title>
  </head>
  <body>
    <h1>Добро пожаловать на мой сайт!</h1>
    <p>Это мой первый сайт на HTML.</p>
  </body>
</html>

Этот пример демонстрирует базовую структуру HTML-документа. Мы подробно рассмотрим каждый элемент в следующих уроках.

История HTML

HTML был разработан в 1990 году Тимом Бернерс-Ли, британским ученым, как способ публикации документов с использованием гипертекста. С тех пор HTML прошел несколько стадий развития, и текущей версией является HTML5. HTML5 расширил возможности языка, добавив поддержку мультимедиа, таких как видео и аудио, а также более семантически правильную разметку страниц.

Основные задачи HTML

HTML позволяет:

  • Структурировать информацию (заголовки, абзацы, списки).
  • Вставлять изображения, видео, аудио.
  • Создавать ссылки на другие веб-страницы.
  • Формировать формы для ввода данных (например, поля для ввода текста, кнопки).
  • Создавать таблицы и другие сложные элементы.

Браузеры и их работа с HTML

Браузеры, такие как Google Chrome, Mozilla Firefox, Microsoft Edge и Safari, интерпретируют HTML-код и отображают его в виде веб-страниц. Каждый браузер имеет встроенный движок, который отвечает за обработку HTML и его визуализацию.

Пример:

  • Браузер получает HTML-документ с сервера.
  • Движок браузера читает HTML-код и "строит" дерево элементов (DOM).
  • На основе этого дерева браузер отображает веб-страницу, добавляя стили и элементы интерактивности.

Установка рабочего окружения

Для того чтобы начать работать с HTML, нам потребуется несколько инструментов:

  1. Текстовый редактор — программа, в которой мы будем писать HTML-код.
  2. Браузер — программа, которая будет отображать наш HTML-код в виде веб-страницы.

Выбор текстового редактора:

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

  • VS Code (Visual Studio Code) — один из самых популярных и мощных редакторов для веб-разработки. Он бесплатен и поддерживает множество расширений.
  • Sublime Text — быстрый и легкий текстовый редактор с хорошей поддержкой HTML.
  • Notepad++ — простой и легкий редактор для Windows, который поддерживает подсветку синтаксиса HTML.
Как установить VS Code (рекомендуется):
  1. Перейдите на официальный сайт Visual Studio Code.
  2. Выберите версию для вашей операционной системы (Windows, MacOS, Linux).
  3. Скачайте установочный файл и следуйте инструкциям для установки.
  4. После установки запустите VS Code.
Как установить расширение для работы с HTML:
  1. Откройте VS Code.
  2. Перейдите в раздел "Extensions" (Расширения) слева на панели или нажмите Ctrl+Shift+X.
  3. В поисковой строке введите "HTML" и установите одно из популярных расширений для работы с HTML (например, "HTML Snippets" или "HTML CSS Support").

Настройка браузера

Для проверки написанного кода нам понадобится современный браузер. Любой из этих браузеров подойдет:

  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
  • Safari (на Mac)

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

Как открыть инструменты разработчика:
  1. Откройте любой браузер.
  2. Нажмите F12 или Ctrl+Shift+I (в большинстве браузеров) — это откроет панель разработчика.
  3. Во вкладке "Elements" вы сможете видеть HTML-код страницы и взаимодействовать с ним.

Создание первого HTML-документа

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

Шаги:
  1. Откройте ваш текстовый редактор (например, VS Code).
  2. Создайте новый файл и назовите его index.html.
  3. Вставьте в файл следующий код:
<!DOCTYPE html>
<html>
  <head>
    <title>Моя первая HTML-страница</title>
  </head>
  <body>
    <h1>Добро пожаловать на мой сайт!</h1>
    <p>Это мой первый сайт, созданный с помощью HTML.</p>
  </body>
</html>

4. Сохраните файл.

Открытие HTML-документа в браузере:
  1. Найдите файл index.html на вашем компьютере.
  2. Дважды щелкните на файл или откройте его через "Открыть с помощью..." и выберите браузер.
  3. Ваш браузер отобразит страницу с заголовком "Добро пожаловать на мой сайт!" и параграфом "Это мой первый сайт, созданный с помощью HTML."

4. Проверка и отладка кода

Чтобы убедиться, что ваш код правильно работает, можно использовать инструменты разработчика в браузере:

  1. Нажмите F12 или Ctrl+Shift+I, чтобы открыть инструменты разработчика.
  2. Во вкладке "Elements" вы увидите структуру вашего HTML-документа.
  3. Можно изменять HTML-код прямо в этой панели и видеть изменения на странице в реальном времени.

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

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

Основные компоненты HTML-документа

HTML-документ состоит из нескольких ключевых элементов:

  1. <!DOCTYPE html> — определяет тип документа. Это не HTML-тег, а инструкция браузеру, указывающая на использование HTML5.
  2. <html> — основной контейнер для всего HTML-кода. Внутри него размещаются все остальные теги.
  3. <head> — содержит метаинформацию о документе (например, заголовок, кодировку, ссылки на стили и скрипты).
  4. <body> — содержит контент страницы, который отображается в браузере.

Пример структуры HTML-документа

<!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>
    <p>Это мой первый сайт на HTML.</p>
  </body>
</html>
Давайте разберем этот код по частям:

3. Элемент <!DOCTYPE html>

Это обязательная часть HTML-документа. Он сообщает браузеру, что мы используем HTML5. В более ранних версиях HTML тип документа был более сложным, но в HTML5 достаточно просто использовать <!DOCTYPE html>.

4. Тег <html>

Тег <html> является корневым элементом, который охватывает весь HTML-документ. Все остальные элементы должны быть вложены в него.

  • Атрибут lang="ru" указывает язык документа (в данном случае — русский). Это полезно для поисковых систем и браузеров.

5. Элемент <head>

Тег <head> содержит информацию о документе, которая не отображается на странице, но важна для работы браузеров и поисковых систем:

  • <meta charset="UTF-8"> — определяет кодировку страницы. UTF-8 — это стандартная кодировка, которая поддерживает большинство языков мира, включая русский.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — этот тег необходим для того, чтобы страница корректно отображалась на устройствах с разными экранами (например, мобильные телефоны и планшеты). Он говорит браузеру адаптировать ширину страницы под размер экрана устройства.
  • <title> — задает название страницы, которое отображается на вкладке браузера. Это важно для пользователя и поисковой оптимизации (SEO).

6. Элемент <body>

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

  • <h1> — это заголовок первого уровня. Он используется для обозначения основного заголовка на странице. В HTML есть шесть уровней заголовков: от <h1> до <h6>, где <h1> — самый важный.
  • <p> — это абзац. Все текстовые блоки на странице обычно оборачиваются в теги <p>, чтобы браузер знал, что это отдельный фрагмент текста.

Атрибуты в HTML

Атрибуты предоставляют дополнительную информацию о HTML-элементах. Они всегда прописываются внутри открывающего тега. Пример:

<a href="https://example.com">Перейти на сайт</a>
  • href="https://example.com" — атрибут тега <a>, который указывает ссылку на другой сайт.

8. Заметки по структуре документа

  • HTML-документ всегда должен начинаться с <!DOCTYPE html> и иметь корневой элемент <html>.
  • Тег <head> включает в себя метаданные, необходимые для работы страницы.
  • Тег <body> включает видимый контент.

Основные HTML-теги — Заголовки и параграфы

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

Заголовки

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

Пример использования заголовков:
htmlКопировать код<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
  • <h1> — самый важный заголовок. Обычно он используется для основного заголовка страницы.
  • <h2> — подзаголовок, который идет ниже по уровню.
  • <h6> — самый мелкий и наименее значимый заголовок.
Результат в браузере:
  • Заголовок <h1> будет самым большим и жирным.
  • Заголовки <h2> - <h6> постепенно уменьшаются по размеру и визуальной важности.

Параграфы

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

Пример использования параграфов:
<p>Это мой первый абзац на странице. Он будет заключен в отдельный блок и отделен от другого текста.</p>
<p>А это уже второй абзац, который будет отделен от первого абзаца небольшим отступом.</p>
  • <p> — это блоковый элемент, что значит, что каждый абзац отображается с новой строки и имеет отступы сверху и снизу.
Как это выглядит в браузере:

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

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

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

Пример кода:
<!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>
    <p>Это первый абзац на моей странице. Он объясняет, что мы учимся работать с HTML.</p>
    
    <h2>Подзаголовок второго уровня</h2>
    <p>Этот текст относится ко второму заголовку и помогает структурировать контент на странице.</p>

    <h3>Подзаголовок третьего уровня</h3>
    <p>Заголовки третьего уровня используют для обозначения еще более низких уровней текста.</p>
  </body>
</html>
Что происходит в этом примере:
  • Основной заголовок <h1> задает тему страницы.
  • Под ним идут абзацы и заголовки уровней <h2> и <h3>, которые разделяют текст на подтемы.
  • Каждый абзац начинается с новой строки и отделен от другого текста.

Рекомендации по использованию заголовков и параграфов

  • На странице должен быть только один заголовок <h1>, который представляет собой основной заголовок.
  • Используйте заголовки последовательно: сначала <h2>, потом <h3>, и так далее, чтобы текст был логически структурирован.
  • Абзацы <p> помогают структурировать текст на удобочитаемые блоки, делая контент понятным и организованным.

Ссылки и изображения

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

Ссылки в HTML

Ссылки (или гиперссылки) позволяют пользователям переходить на другие веб-страницы или части текущей страницы. Для создания ссылок используется тег <a>, который расшифровывается как anchor (якорь).

Основной синтаксис ссылки:
<a href="https://example.com">Текст ссылки</a>
  • href="https://example.com" — атрибут href определяет URL (адрес), на который ведет ссылка.
  • Текст ссылки — это текст, на который пользователи могут кликнуть.
Пример ссылки:
<a href="https://www.google.com">Перейти на Google</a>

В этом примере при нажатии на текст "Перейти на Google" пользователь будет перенаправлен на сайт Google.

Ссылка на внутреннюю страницу:

Если ты хочешь создать ссылку на другую страницу внутри твоего сайта:

<a href="about.html">О нас</a>

Здесь ссылка ведет на страницу about.html, которая может быть другой страницей твоего сайта.

Ссылка на определенную часть страницы:

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

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

Изображения в HTML

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

Основной синтаксис для изображения:
<img src="image.jpg" alt="Описание изображения">
  • src="image.jpg" — атрибут src (source) указывает путь к изображению, которое должно быть отображено.
  • alt="Описание изображения" — атрибут alt задает альтернативный текст, который отображается, если изображение не может быть загружено. Это также полезно для пользователей с ограниченными возможностями, которые используют программы чтения с экрана.
Пример с изображением:
<img src="https://example.com/image.jpg" alt="Пример изображения">

В этом примере на странице будет показано изображение по адресу https://example.com/image.jpg.

Изображение из локальной папки:

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

<img src="logo.png" alt="Логотип сайта">

Пример с ссылками и изображениями

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

Пример кода:
<!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>
    <p>Это пример страницы с <a href="https://www.google.com">ссылкой на Google</a> и изображением.</p>

    <h2>Изображение</h2>
    <img src="https://www.example.com/image.jpg" alt="Пример изображения" width="300">

    <h2>Переход к разделу</h2>
    <a href="#section1">Перейти к следующему разделу</a>

    <h2 id="section1">Раздел 1</h2>
    <p>Здесь начинается раздел 1. Это пример ссылки, которая ведет к якорю на странице.</p>
  </body>
</html>
Что происходит в этом примере:
  • Ссылка на Google добавлена в абзац с текстом.
  • Изображение загружается с внешнего URL.
  • Создана якорная ссылка, которая ведет к разделу 1 на той же странице.

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

  • width и height — эти атрибуты позволяют задавать размеры изображения в пикселях:
<img src="logo.png" alt="Логотип" width="300" height="150">
  • alt — всегда следует указывать, так как это важно для доступности и поисковых систем.
  • title — атрибут title добавляет всплывающую подсказку при наведении на изображение:
<img src="logo.png" alt="Логотип" title="Это логотип нашего сайта">

Открытие ссылки в новой вкладке

Чтобы ссылка открывалась в новой вкладке, добавь атрибут target="_blank":

<a href="https://www.google.com" target="_blank">Перейти на Google</a>

Использование относительных и абсолютных путей

  • Абсолютный путь: полный URL (например, https://example.com/image.jpg).
  • Относительный путь: путь относительно текущего местоположения (например, images/logo.png).

Списки и таблицы

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

1. Списки в HTML

В HTML существует два основных типа списков: нумерованные и маркированные.

1.1. Маркированный список (<ul>)

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

Пример маркированного списка:
<ul>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>
  • <ul> — означает unordered list (неупорядоченный список), т.е. маркированный.
  • <li> — означает list item (элемент списка). Каждый элемент списка должен быть обернут в тег <li>.
Результат в браузере:
  • Элемент 1
  • Элемент 2
  • Элемент 3
1.2. Нумерованный список (<ol>)

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

Пример нумерованного списка:
<ol>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ol>
  • <ol> — означает ordered list (упорядоченный список), т.е. нумерованный.
Результат в браузере:
  1. Первый элемент
  2. Второй элемент
  3. Третий элемент
1.3. Вложенные списки

Ты можешь создавать вложенные списки, т.е. один список внутри другого.

Пример вложенного списка:
<ul>
  <li>Элемент 1</li>
  <li>Элемент 2
    <ul>
      <li>Вложенный элемент 1</li>
      <li>Вложенный элемент 2</li>
    </ul>
  </li>
  <li>Элемент 3</li>
</ul>
Результат в браузере:
  • Элемент 1
  • Элемент 2
    • Вложенный элемент 1
    • Вложенный элемент 2
  • Элемент 3

2. Таблицы в HTML

Таблицы используются для организации данных в строках и столбцах. Для создания таблиц используется тег <table>.

2.1. Основная структура таблицы

Таблица состоит из строк (<tr>) и ячеек (<td>). Также можно использовать заголовки столбцов с помощью тега <th>.

Пример простой таблицы:
<table>
  <tr>
    <th>Имя</th>
    <th>Возраст</th>
    <th>Город</th>
  </tr>
  <tr>
    <td>Алексей</td>
    <td>25</td>
    <td>Москва</td>
  </tr>
  <tr>
    <td>Мария</td>
    <td>30</td>
    <td>Киев</td>
  </tr>
</table>
  • <table> — создаёт таблицу.
  • <tr> — строка таблицы (table row).
  • <th> — заголовок столбца (table header), текст в этой ячейке обычно жирный и выравнен по центру.
  • <td> — обычная ячейка таблицы (table data), текст выравнен по умолчанию по левому краю.
Результат в браузере:
2.2. Добавление границ к таблице

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

Пример таблицы с границами:
<table border="1">
  <tr>
    <th>Имя</th>
    <th>Возраст</th>
    <th>Город</th>
  </tr>
  <tr>
    <td>Алексей</td>
    <td>25</td>
    <td>Москва</td>
  </tr>
  <tr>
    <td>Мария</td>
    <td>30</td>
    <td>Киев</td>
  </tr>
</table>
Результат в браузере:

Теперь каждая ячейка таблицы будет обведена границей.

2.3. Объединение ячеек

Ты можешь объединять ячейки таблицы по горизонтали с помощью атрибута colspan, и по вертикали с помощью атрибута rowspan.

Пример объединения ячеек:
<table border="1">
  <tr>
    <th>Имя</th>
    <th colspan="2">Данные</th>
  </tr>
  <tr>
    <td>Алексей</td>
    <td>25</td>
    <td>Москва</td>
  </tr>
  <tr>
    <td>Мария</td>
    <td>30</td>
    <td>Киев</td>
  </tr>
</table>
  • colspan="2" объединяет две ячейки в заголовке "Данные" по горизонтали.
Результат в браузере:

Имя

Данные

Алексей

25

Мария

30

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

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

Пример кода:
<!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>
    <ul>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ul>

    <h2>Нумерованный список</h2>
    <ol>
      <li>Элемент 1</li>
      <li>Элемент 2</li>
      <li>Элемент 3</li>
    </ol>

    <h2>Пример таблицы</h2>
    <table border="1">
      <tr>
        <th>Имя</th>
        <th>Возраст</th>
        <th>Город</th>
      </tr>
      <tr>
        <td>Алексей</td>
        <td>25</td>
        <td>Москва</td>
      </tr>
      <tr>
        <td>Мария</td>
        <td>30</td>
        <td>Киев</td>
      </tr>
    </table>
  </body>
</html>
Что происходит в этом примере:
  • Создан маркированный и нумерованный списки для отображения данных в разных форматах.
  • Таблица с данными людей, которая отображается с границами.

Формы в HTML

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

1. Основная структура формы

Форма в HTML создается с использованием тега <form>, который объединяет все элементы управления (поля ввода, кнопки и т. д.). Основные атрибуты тега <form> включают:

  • action — URL, куда отправляются данные формы.
  • method — метод передачи данных (обычно используется GET или POST).
Пример простой формы:
<form action="/submit" method="POST">
  <!-- Элементы формы будут здесь -->
</form>
  • action="/submit" — данные формы будут отправлены по этому URL.
  • method="POST" — данные отправляются на сервер методом POST.

2. Поля ввода

Поле ввода создается с помощью тега <input>. У этого тега много атрибутов, в зависимости от типа данных, которые пользователь должен ввести.

2.1. Поле ввода текста

Поле для ввода текста создается с атрибутом type="text".

<form>
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name">
</form>
  • <label> — тег, который ассоциирует текст с определенным полем ввода. Атрибут for связывает метку с элементом, указывая его id.
  • type="text" — указывает, что это текстовое поле.
2.2. Поле для ввода пароля

Для ввода пароля используется type="password". Все символы будут скрыты.

<form>
  <label for="password">Пароль:</label>
  <input type="password" id="password" name="password">
</form>
2.3. Поле для электронной почты

Поле для ввода email создается с атрибутом type="email". В браузерах есть встроенная валидация, проверяющая, что введенное значение соответствует формату электронной почты.

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</form>

3. Кнопки

Кнопки в формах используются для отправки данных на сервер. Самая распространенная кнопка — это кнопка отправки формы.

3.1. Кнопка отправки
<form>
  <input type="submit" value="Отправить">
</form>
  • type="submit" — кнопка, которая отправляет данные формы.
  • value="Отправить" — текст, который будет отображаться на кнопке.
3.2. Кнопка сброса

Кнопка сброса очищает все поля формы.

<form>
  <input type="reset" value="Сбросить">
</form>

4. Радиокнопки и флажки

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

4.1. Радиокнопки

Радиокнопки (type="radio") позволяют выбрать только один вариант из группы.

<form>
  <p>Выберите ваш пол:</p>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Мужской</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Женский</label><br>
</form>
  • type="radio" — радиокнопка.
  • name="gender" — все радиокнопки с одинаковым значением name объединены в одну группу, и можно выбрать только одну из них.
4.2. Флажки

Флажки (type="checkbox") позволяют выбрать несколько вариантов.

<form>
  <p>Выберите ваши интересы:</p>
  <input type="checkbox" id="coding" name="interests" value="coding">
  <label for="coding">Программирование</label><br>
  <input type="checkbox" id="music" name="interests" value="music">
  <label for="music">Музыка</label><br>
  <input type="checkbox" id="sports" name="interests" value="sports">
  <label for="sports">Спорт</label><br>
</form>
  • type="checkbox" — флажок для множественного выбора.

5. Выпадающие списки

Выпадающие списки позволяют выбрать один вариант из предложенных. Создаются с использованием тега <select> и его дочерних элементов <option>.

Пример выпадающего списка:
<form>
  <label for="country">Выберите вашу страну:</label>
  <select id="country" name="country">
    <option value="ukraine">Украина</option>
    <option value="russia">Россия</option>
    <option value="usa">США</option>
  </select>
</form>
  • <select> — создает выпадающий список.
  • <option> — каждый элемент списка.
  • value — значение, которое будет отправлено на сервер, если этот элемент выбран.

6. Поле для ввода текста на несколько строк

Для ввода больших текстовых данных (например, комментариев) используется тег <textarea>.

Пример текстового поля:
<form>
  <label for="message">Сообщение:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea>
</form>
  • <textarea> — позволяет ввести многострочный текст.
  • rows и cols — задают размер текстового поля (в строках и столбцах).

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

Теперь давай объединим все элементы формы в одном HTML-документе.

Пример кода:
<!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>
    <form action="/submit" method="POST">
      <label for="name">Имя:</label>
      <input type="text" id="name" name="name" required><br><br>

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required><br><br>

      <p>Выберите ваш пол:</p>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male">Мужской</label><br>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female">Женский</label><br><br>

      <p>Выберите ваши интересы:</p>
      <input type="checkbox" id="coding" name="interests" value="coding">
      <label for="coding">Программирование</label><br>
      <input type="checkbox" id="music" name="interests" value="music">
      <label for="music">Музыка</label><br>
      <input type="checkbox" id="sports" name="interests" value="sports">
      <label for="sports">Спорт</label><br><br>

      <label for="country">Выберите вашу страну:</label>
      <select id="country" name="country">
        <option value="ukraine">Украина</option>
        <option value="russia">Россия</option>
        <option value="usa">США</option>
      </select><br><br>

      <label for="message">Сообщение:</label><br>
      <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

      <input type="submit" value="Отправить">
      <input type="reset" value="Сбросить">
    </form>
  </body>
</html>
Что происходит в этом примере:
  • Создана форма для регистрации с полями для имени, email, выбора пола и интересов.
  • Добавлена кнопка отправки и сброса формы.

Базовые концепции и семантические теги

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

1. Базовые концепции HTML

1.1. Элементы и атрибуты
  • Элементы: Основные строительные блоки HTML. Это комбинация открывающего тега, содержимого и закрывающего тега. Например, <p>Это параграф</p>.
  • Атрибуты: Дополнительная информация для элементов. Атрибуты задаются в открывающем теге и могут определять свойства или поведение элемента. Например, в <img src="image.jpg" alt="Описание">, атрибут src указывает путь к изображению, а alt — текст, который отображается, если изображение не загружается.
1.2. Иерархия и вложенность

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

1.3. Поток документа

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

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

Семантические теги были введены в HTML5 для улучшения смысла и структуры HTML-документов. Они делают код более понятным для разработчиков, поисковых систем и вспомогательных технологий (например, скринридеров для людей с нарушениями зрения). Вместо использования общих контейнеров, таких как <div>, семантические теги точно описывают содержание.

2.1. Важные семантические теги
  • <header> — используется для определения верхней части страницы или раздела. Обычно содержит логотип, навигацию или заголовок.htmlКопировать код<header> <h1>Заголовок страницы</h1> <nav>Меню навигации</nav> </header>
  • <nav> — определяет навигационные ссылки на странице.htmlКопировать код<nav> <a href="/home">Главная</a> <a href="/about">О нас</a> </nav>
  • <section> — используется для группировки связанных элементов, например, раздела с новостями или блогом.htmlКопировать код<section> <h2>Новости</h2> <p>Последние события и обновления.</p> </section>
  • <article> — определяет независимый фрагмент контента, который может быть распространён отдельно, например, новостную статью или блог.htmlКопировать код<article> <h2>Заголовок статьи</h2> <p>Содержание статьи...</p> </article>
  • <aside> — используется для дополнительной информации, такой как боковая панель с рекламой или ссылками, не связанной напрямую с основным контентом.htmlКопировать код<aside> <p>Реклама или полезные ссылки</p> </aside>
  • <footer> — содержит информацию о нижней части страницы, например, копирайт, контактные данные или ссылки на политику конфиденциальности.htmlКопировать код<footer> <p>&copy; 2024 Все права защищены</p> </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>
        <a href="#">Главная</a>
        <a href="#">О нас</a>
        <a href="#">Контакты</a>
      </nav>
    </header>

    <section>
      <article>
        <h2>Заголовок статьи</h2>
        <p>Содержание статьи...</p>
      </article>
    </section>

    <aside>
      <p>Полезные ссылки или реклама</p>
    </aside>

    <footer>
      <p>&copy; 2024 Все права защищены</p>
    </footer>
  </body>
</html>

Мультимедиа в HTML

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

1. Работа с изображениями

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

  • src — путь к изображению.
  • alt — текст, который отображается, если изображение не загружается (важно для SEO и доступности).
Пример вставки изображения:
<img src="image.jpg" alt="Описание изображения">

Ты можешь изменять размеры изображения с помощью атрибутов width и height:

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

2. Видеофайлы в HTML

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

Пример вставки видео:
<video controls width="500">
  <source src="video.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео.
</video>
  • controls — добавляет элементы управления (плей, пауза, громкость).
  • width — задает ширину видео.
Важные атрибуты:
  • autoplay — видео автоматически запускается при загрузке страницы.
  • loop — видео воспроизводится по кругу.
  • muted — отключает звук по умолчанию.

3. Аудиофайлы в HTML

Для добавления аудио используется тег <audio>. Ты можешь встроить аудиофайлы для воспроизведения на странице.

Пример вставки аудио:
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает аудио.
</audio>
  • controls — добавляет элементы управления для воспроизведения, паузы и регулировки громкости.

4. Использование YouTube видео

Ты можешь также встраивать видео с таких платформ, как YouTube, используя код встраивания.

Пример встраивания YouTube видео:
<iframe width="560" height="315" src="https://www.youtube.com/embed/video_id" frameborder="0" allowfullscreen></iframe>
  • iframe — тег для встраивания внешнего контента.
  • allowfullscreen — позволяет пользователям переключаться в полноэкранный режим.

5. Пример мультимедийной веб-страницы

Теперь объединим изображения, видео и аудио на одной странице.

Пример кода:
<!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>
    <img src="image.jpg" alt="Описание изображения" width="300">

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

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

    <h2>Видео с YouTube</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/video_id" frameborder="0" allowfullscreen></iframe>
  </body>
</html>
Артем
October 18, 00:54
1 reaction
0 views