Перейти на okumy.com` | | `` | Определяет текст как аббревиатуру | `HTML ` --> HTML | | `` | Контактная информация автора или владельца документа, поисковики могут извлекать эту информацию для определения географической принадлежности сайта | | | `` | Полужирный текст | `bold text ` --> bold text | | `` | Цитата | `To be or not to be ` --> To be or not to be | | ` ` | Перенос строки | `Текст с новой строки` --> Текст с новой строки | | `` | Сноска на название материала | `За Альянс ` --> За Альянс | | `` | Используется для вставки компьютерного кода в текстовом виде, браузеры не умеют подсвечивать синтаксис языков | `print("Hello! | Тег | Описание | | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | `` | Статья, обозначает начало содержимого страницы без навигации | | `` | Контент в стороне, обычно задает боковое навигационное меню или дополнительное содержимое | | `` | Нижний колонтитул, подвал | | `` | Блок заголовка, не является повторением тегов ` - `, потому что может содержать внутри блок навигации, заголовок и краткое описание статьи | | `` | Основной контент страницы | | `` | Блок с навигационным меню, обычно содержит ссылки на другие страницы | | `` | Определяет элементы, которые пользователь может вызвать из контекстного меню | | `` | Контейнер для навигационных элементов, например горизонтальное меню в шапке или ссылки в подвале страницы | | `` | Раздел, может имет вложенные разделы, обычно применяется чтобы выделить главу или подраздел |">
Распространенные HTML теги - Pylot.me
Перейти на okumy.com` | | `` | Определяет текст как аббревиатуру | `HTML ` --> HTML | | `` | Контактная информация автора или владельца документа, поисковики могут извлекать эту информацию для определения географической принадлежности сайта | | | `` | Полужирный текст | `bold text ` --> bold text | | `` | Цитата | `To be or not to be ` --> To be or not to be | | ` ` | Перенос строки | `Текст с новой строки` --> Текст с новой строки | | `` | Сноска на название материала | `За Альянс ` --> За Альянс | | `` | Используется для вставки компьютерного кода в текстовом виде, браузеры не умеют подсвечивать синтаксис языков | `print("Hello! | Тег | Описание | | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | `` | Статья, обозначает начало содержимого страницы без навигации | | `` | Контент в стороне, обычно задает боковое навигационное меню или дополнительное содержимое | | `` | Нижний колонтитул, подвал | | `` | Блок заголовка, не является повторением тегов ` - `, потому что может содержать внутри блок навигации, заголовок и краткое описание статьи | | `` | Основной контент страницы | | `` | Блок с навигационным меню, обычно содержит ссылки на другие страницы | | `` | Определяет элементы, которые пользователь может вызвать из контекстного меню | | `` | Контейнер для навигационных элементов, например горизонтальное меню в шапке или ссылки в подвале страницы | | `` | Раздел, может имет вложенные разделы, обычно применяется чтобы выделить главу или подраздел |" />
Перейти на okumy.com` | | `` | Определяет текст как аббревиатуру | `HTML ` --> HTML | | `` | Контактная информация автора или владельца документа, поисковики могут извлекать эту информацию для определения географической принадлежности сайта | | | `` | Полужирный текст | `bold text ` --> bold text | | `` | Цитата | `To be or not to be ` --> To be or not to be | | ` ` | Перенос строки | `Текст с новой строки` --> Текст с новой строки | | `` | Сноска на название материала | `За Альянс ` --> За Альянс | | `` | Используется для вставки компьютерного кода в текстовом виде, браузеры не умеют подсвечивать синтаксис языков | `print("Hello! | Тег | Описание | | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | `` | Статья, обозначает начало содержимого страницы без навигации | | `` | Контент в стороне, обычно задает боковое навигационное меню или дополнительное содержимое | | `` | Нижний колонтитул, подвал | | `` | Блок заголовка, не является повторением тегов ` - `, потому что может содержать внутри блок навигации, заголовок и краткое описание статьи | | `` | Основной контент страницы | | `` | Блок с навигационным меню, обычно содержит ссылки на другие страницы | | `` | Определяет элементы, которые пользователь может вызвать из контекстного меню | | `` | Контейнер для навигационных элементов, например горизонтальное меню в шапке или ссылки в подвале страницы | | `` | Раздел, может имет вложенные разделы, обычно применяется чтобы выделить главу или подраздел |" />
Ступень 2
Введение в HTML
Распространенные HTML теги
Теги для создания структуры HTML документа:
Тег
Описание
Пример
<!DOCTYPE>
Определяет тип документа
<!-- ... -->
Комментарий
<!--...--> Будет не виден пользователю, но будет доступен в исходном коде страниы
<html>
Корневой тег документа, открывается в начале HTML страницы и заканчивается в самом конце
<head>
Головная часть HTML документа
<title>
Заголовок документа, будет видно в заголовке окна браузера
<link>
Позволяет привязать внешний документ для отображения текущего, обычно CSS или JavaScript
<link rel="stylesheet" href="styles.css"> подключит файл styles.css
<meta>
Мета данные документа, расположено в внутри <head>
<meta charset="UTF-8"> — указывает, что документ в кодировке UTF-8
<body>
Основное тело документа, именно эта часть будет отображаться пользователю
<style>
Встраивает в HTML документ CSS правила, может быть как в <head> так и в <body>
<style>p {color:blue;}</style>
Пример простейшего HTML документа с полной структурой:
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Название документа</ title >
</ head >
< body >
<!-- Тут расположено тело документа -->
Тело документа
</ body >
</ html >
Теги для работы с текстом:
Тег
Описание
Пример
<a>
Ссылка, гиперссылка, якорьный элемент
<a href="https://www.okumy.com/">Перейти на okumy.com</a>
<abbr>
Определяет текст как аббревиатуру
<abbr title="Hypertext Markup Language">HTML</abbr> → HTML
<address>
Контактная информация автора или владельца документа, поисковики могут извлекать эту информацию для определения географической принадлежности сайта
<b>
Полужирный текст
<b>bold text</b> → bold text
<blockquote>
Цитата
<blockquote>To be or not to be</blockquote> → To be or not to be
<br>
Перенос строки
Текст <br>с новой строки → Текст с новой строки
<cite>
Сноска на название материала
<cite>За Альянс</cite> → За Альянс
<code>
Используется для вставки компьютерного кода в текстовом виде, браузеры не умеют подсвечивать синтаксис языков
<code>print("Hello!")</code> → print("Hello!")
<del>
Текст, который удален в новой версии документа
<del>не</del>возможно → невозможно
<details>
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть
<dfn>
Указывает, что содержимое является термином
<div>
Блочный элемент - один из основных элементов верстки
<dl>
Определяет список определений
<dt>
Название термина в списке определений <dl>
<em>
выделенный по смыслу текст (обычно, текст выделенный курсивом)
Луна — это ближайший <em>филиал</em> Земли → Луна — это ближайший филиал Земли
<h1> - <h6>
Заголовки HTML разного уровня: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<h1>Этот город</h1> → Этот город
<hr>
Горизонтальная линия - тематический разделитель
<hr> →
<i>
Выделяет текст курсивом
Нетокра́тия (англ. <i>netocracy</i>) → Нетокра́тия (англ. netocracy )
<ins>
Текст, который был добавлен в новой версии документа
Успешный <ins>счастливый</ins> и богатый → Успешный счастливый и богатый
<kbd>
Текст введенный с клавиатуры или названия кнопок клавиатуры обычно выделен моноширинным шрифтом
<kbd>Control + A</kbd> → Control + A
<li>
Элемент списка
<map>
Контейнер для <area> Определяет пользовательскую карту на изображении
<mark>
Выделенный текст (обычно с помощью подсветки фона)
2+2=<mark>4</mark> → 2+2=4
<meter>
Отображает элемент отображающий часть заполнения
Диск заполнен на <meter value="0.6">60%</meter> → Диск заполнен на 60%
<noscript>
Альтернативный контент для пользователей, отключивших скрипты
<ol>
Определяет нумерованный список
<output>
Результат вычислений
<p>
Абзац текста
<p>Привет, я текст</p> → Привет, я текст
<pre>
Предварительно отформатированный текст
<progress>
Индикатор выполнения (прогресса)
Скачано 35% файла <progress value="35" max="100">32%</progress> → Скачано 35% файла 32%
<q>
Цитата в тексте
<q>Тсс! Не мешай мне думать!</q>
<s>
Перечеркнутый текст
<s>Купить авокадо</s> → Купить авокадо
<samp>
Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом )
<small>
Текст шрифтом меньшего размера
<span>
Строчный элемент
<strong>
Текст, выделенный по значению обычно отображается полужирным
Мое сердце принадлежит <strong>Орде</strong>! → Мое сердце принадлежит Орде !
<sub>
Отображает текст в виде нижнего индекса
Я <sub>почти</sub> готов! → Я почти готов!
<summary>
Заголовок внутри тега <details>
<sup>
Отображает текст в виде верхнего индекса
y=x<sup>2</sup> → y=x2
<time>
Дата и/или время
<ul>
Определяет маркированный список
<var>
Используется для обозначения содержимого тега как переменной
<wbr>
Место, где допускается перенос строки
Примеры списков:
< ol >
< li > Кофе</ li >
< li > Чай</ li >
< li > Какао</ li >
</ ol >
< ul >
< li > Кофе</ li >
< li > Чай</ li >
< li > Какао</ li >
</ ul >
Что даст:
Кофе
Чай
Какао
Теги для встраивания других документов или объектов:
Тег
Описание
Пример
<audio>
Позволяет вставить воспроизводимый аудио файл
<canvas>
Используется для рисовании графики с помощью скриптов
<embed>
Контейнер для внешнего приложения
<figcaption>
Заголовок для <figure> элемента
<figure>
Определяет автономную группу из нескольких элементов (например картинка с подписью)
<iframe>
Определяет встроенный фрейм, в страницу встраивается другая страница
<img>
Изображение, картинка
<object>
Определяет встроенный объект
<param>
Задает параметры для встроенных объектов
<picture>
Контейнер для нескольких изображений
<script>
Определяет скрипт или подключение скрипта из внешнего ресурса
<source>
Определяет ресурс для тегов <video>, <audio> и <picture>
<track>
Определяет текстовую дорожку для тегов <video> и <audio>
<video>
Позволяет вставить воспроизводимое видео
Теги для создания таблиц:
Тег
Описание
Пример
<caption>
Подпись таблицы
<col>
Задает характеристики колонок в таблице
<colgroup>
Определяет группу из одной или более колонок таблицы для форматирования
<table>
Определяет таблицу
<tbody>
Определяет область контента в таблице
<td>
Ячейка в таблице <table>
<tfoot>
Определяет группу строк в нижней части таблицы <table> - нижний колонтитул
<th>
Ячейка - заголовок в таблице <table>
<thead>
Определяет группу строк в верхней части таблицы <table> - верхний колонтитул
<tr>
Определяет строку в таблице
Пример таблицы:
< table >
< caption > Таблица побед</ caption >
< colgroup >
< col style = "background-color:lightgray" >
< col style = "background-color:yellow" >
</ colgroup >
< thead >
< tr >
< th > Игрок</ th >
< th > Количество побед</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > Илья</ td >
< td > 5</ td >
</ tr >
< tr >
< td > Иван</ td >
< td > 7</ td >
</ tr >
</ tbody >
< tfoot >
< tr >
< td > Всего побед</ td >
< td > 12</ td >
</ tr >
</ tfoot >
</ table >
Что превратится в:
Таблица побед
Игрок
Количество побед
Илья
5
Иван
7
Всего побед
12
Теги для задания семантической структуры документа:
Тег
Описание
<article>
Статья, обозначает начало содержимого страницы без навигации
<aside>
Контент в стороне, обычно задает боковое навигационное меню или дополнительное содержимое
<footer>
Нижний колонтитул, подвал
<header>
Блок заголовка, не является повторением тегов <h1> - <h6>, потому что может содержать внутри блок навигации, заголовок и краткое описание статьи
<main>
Основной контент страницы
<menu>
Блок с навигационным меню, обычно содержит ссылки на другие страницы
<menuitem>
Определяет элементы, которые пользователь может вызвать из контекстного меню
<nav>
Контейнер для навигационных элементов, например горизонтальное меню в шапке или ссылки в подвале страницы
<section>
Раздел, может имет вложенные разделы, обычно применяется чтобы выделить главу или подраздел
Теги для работы с формами:
Тег
Описание
<button>
Кликабельная кнопка
<fieldset>
Группа связанных элементов в форме
<form>
Определяет форму пользовательского ввода
<input>
Поле для ввода, элемент формы
<label>
Метка для поля ввода Обычно содержит подпись поля
<legend>
Заголовок элементов <fieldset>
<optgroup>
Определяет группу связанных вариантов в выпадающем списке Дает название группы
<option>
Параметр (вариант выбора) в выпадающем списке
<select>
Определяет выпадающий список или список с множественным выбором
<textarea>
Многострочное поле для ввода
К началу