Основы HTML
Last updated
Last updated
Что такое HTML? Это язык разметки гипертекста. Он позволяет пользователю создавать и структурировать разделы, параграфы, заголовки, ссылки и блоки для веб-страниц и приложений.
HTML не является языком программирования, то есть он не имеет возможности создавать динамические функции. Вместо этого он позволяет организовывать и форматировать документы, аналогично Microsoft Word.
При работе с HTML мы используем простые структуры кода (теги и атрибуты), чтобы разметить страницу веб-сайта. Например, мы можем создать абзац, поместив прилагаемый текст в исходный тег <p> и закрывающий </p>.
Мало кто любит терминологию и формальности, но, к счастью, в мире HTML всё довольно просто.
Вкратце:
Страница состоит из элементов.
Элемент — это набор из тегов и содержания.
Теги чаще всего идут парами: открывающий (<tag>) и закрывающий (</tag>). Между ними находится то, что попадает под действие этого элемента.
Открывающий тег может содержать дополнительную информацию — атрибуты и значения атрибутов. Атрибуты позволяют «настроить» тег.
В примере из предыдущего урока есть элемент a (anchor — якорь), состоящий из открывающего и закрывающего тегов <a></a>.
Это ссылка, и у неё есть атрибут href со значением https://ru.hexlet.io. Между открывающим и закрывающим тегами находится содержание — слово «Хекслет». Именно оно становится ссылкой.
А ниже есть картинка. Это пример одиночного тега, элемента, в котором не нужен закрывающий тег. Их ещё называют self-closing element — «самозакрывающиеся элементы».
Как видите, мы указали атрибут src (от английского "source" — источник) со значением https://i.imgur.com/789p0uP.png. Это адрес файла изображения.
А некоторые элементы состоят из нескольких вложенных элементов. Например, списки:
Это — пронумерованный список (ordered list), поэтому тег называется <ol>. А каждая строчка списка — это элемент списка (list item) — <li>.
div
a
используется для создания ссылок
span
используется для стилизации отдельных слов и фраз в блоке текста.
ul > li
<ul> создаёт неупорядоченный список, то есть элементы в нём не пронумерованы, а помечены маркером. Внутри тега с помощью <li> добавляются элементы списка.
p
Тег <p> создаёт абзацы — отделяет одну часть текста от другой. Например, все абзацы на этой странице размечены тегом
img
Тег <img> добавляет графики, иллюстрации и фотографии.
br
Тег <br> переносит текст на другую строку, не начиная нового абзаца.
script
Тег подключает на страницу JavaScript. <script> ставится в конце документа, перед закрывающим тегом </body>.
link
Тег <link> подключает CSS-файлы. В отличие от <script>, он ставится в начале документа, в теге <head>.
i
Тег <i> форматирует текст — делает его курсивным.
button
Кнопка, При клике на кнопку срабатывают функции
h1-h6
Создает загаловки от h1 - самый большой до h6 самый маленький
b
Создает жирный текст
cite
Используется для цитат, обычно наклонный текст
table
Создает таблицу
tr
Определяет строку в таблице
td
Определяет отдельную ячейку в таблице
th
Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)
form
Создает формы
select
Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки
option
Указывает каждый отдельный элемент select - меню
textarea
Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.
input
Это тег для получения информации от пользователя
audio
Для добавления звуков, музыки на страницу
video
Для добавления видео на страницу
используется как контейнер для HTML-элементов.
