0:00
[БЕЗ_ЗВУКА] В этом видео
мы рассматриваем HTML и его структуру.
Посмотрим, что такое блочные и строчные элементы, а также подробнее рассмотрим
некоторые элементы, такие, как списки и таблицы, гиперссылки и изображения.
На слайде представлен простой HTML, его структура выглядит следующим образом.
Вначале идет DOCTYPE, далее идет тэг верхнего уровня HTML,
и внутри него также тэги верхнего уровня head и body.
Давайте подробнее рассмотрим, что же обозначает DOCTYPE.
DOCTYPE уточняет тип содержимого, указывает HTML парсеру,
как правильно разбирать данный документ.
У HTML есть несколько стандартов, и например,
DOCTYPE, который указан у нас в примере, это HTML5.
Давайте теперь подробнее рассмотрим тэги верхнего уровня.
HTML — это некая обертка, header — это заголовок страниц,
которые не отображаются, и body — это тело страницы, которое видит пользователь.
Давайте теперь подробнее рассмотрим, что находится внутри тэга head.
Это тэг title, который отображается в заголовке окна браузера,
тэги meta — это некая метаинформация о нашей странице,
link — это тэг, который указывает на связанные ресурсы, например, CSS.
И script — там указываются наши файлы JavaScript.
Загрузку CSS, это тэги link, рекомендуется ставить тэг head,
а загрузку JavaScript, наоборот, лучше ставить ближе к концу страницы,
это повышает скорость отрисовки страницы.
Давайте теперь рассмотрим, что такое блочные элементы.
Для начала рассмотрим примеры блочных элементов.
Это h1 – h6 — различные уровни заголовков,
p — разбиение текста на параграфы, hr — это горизонтальная линия,
pre — это блок преформатированного кода, например,
исходного кода, blockquote — это цитирование длинного блока текста,
и div — это некий абстрактный блочный контейнер.
Особенности блочных элементов.
Блоки располагаются по вертикали друг под другом.
На прилегающих сторонах сторонах элементов действует эффект схлопывания отступов.
Что это такое?
Например, если у нас указали отступ снизу у верхнего элемента, маржа,
и указали отступ сверху у нижнего элемента, и например,
у верхнего элемента отступ 20 пикселей, у нижнего 10,
то если они друг под другом, в итоге отступ все равно будет 20.
Это есть эффект схлопывания.
Мы это подробнее рассмотрим, когда будем рассматривать CSS.
Запрещено вставлять блочный элемент внутрь строчного.
По ширине блочный элемент занимает всё доступное пространство.
Высота блочного элемента вычисляется браузером автоматически,
исходя из его содержания.
На блочные элементы не действуют свойства, предназначенные для строчных элементов,
такие как vertical-align.
Теперь строчные элементы.
Это, например, элемент a как гиперссылка,
и i — это акцентирование, strong и b — это выделение жирным текстом,
image — это изображение, sub — это нижний индекс, sup — это верхний индекс,
и span — это некий абстрактный строчный контейнер.
Давайте теперь рассмотрим особенности строчных элементов.
Внутрь строчных элементов допустимо помещать текст и другие строчные элементы.
Вставлять блочные элементы внутрь строчных нельзя.
Эффект схлопывания отступов не действует.
Свойства, связанные с размерами, не применимы.
Ширина равна содержимому плюс значение отступов полей границ.
Несколько строчных элементов, идущих подряд, располагаются
на одной строке и переносятся на другую только при необходимости.
Можно выравнивать по вертикали с помощью vertical-align.
Давайте теперь рассмотрим стандартные HTML-элементы.
Начнем со списков.
В HTML есть маркированные списки и нумерованные списки.
Маркированные списки — это ul, нумерованные — это ol.
Для того чтобы, например, сделать маркированный список, нам сначала нужно
написать тэг ul и внутри него перечислить все пункты с помощью тэга li.
В результате в примере, который приведен на слайде,
будет маркированный список из двух пунктов с кодом a и.
Таблица.
Таблица в HTML делается с помощью тэга table.
Если необходимо сделать заголовок, это делается с помощью тэга caption.
Далее определяется заголовок таблицы с помощью тэга thead и там формируется этот
заголовок с помощью тэга tr и тэгов td.
Далее идет тело нашей таблицы,
оно формируется с помощью тэга tbody и также с помощью тэгов tr и td.
На примере слева представлен HTML код и справа то, что получилось в результате.
Теперь давайте рассмотрим гиперссылки.
Для того чтобы сделать ссылку, необходимо использовать тэг a,
и рассмотрим параметры, которые можно передать внутри.
Это href — это url к гиперссылке, target — это в каком окне открывать ссылку,
name — это имя якоря вместо href.
Внутри a можно указывать тэги или просто текст.
Действия браузера при переходе по ссылке.
Мы не только можем перейти по ссылке и открыть какой-то другой веб-ресурс,
а можно выполнить какое-то другое действие.
Например, если мы в схеме укажем http, https, ftp,
это будет переход по ссылке, если укажем mailto, то он запустит почтовый клиент.
Если указать javascript, будет выполнен JavaScript-код,
если указать внутри ссылки якорь, то есть #anchor,
то произойдет прокрутка до ID, которой соответствует этот якорь.
Для того чтобы вставить изображение, нужно использовать тэг image и указать там
параметры, такие как src — это путь к нашему изображению,
alt — это альтернативный текст для изображения, он появится при наведении и
ожидании некоторого времени курсора на этой картинки.
И указание размеров с помощью width и height.
Итого, в этом видео мы посмотрели, что такое HTML и его структуру,
рассмотрели блочные, строчные элементы и рассмотрели некоторые HTML тэги,
такие как списки и таблицы, гиперссылки и изображения.
[ЗВУК] [БЕЗ_ЗВУКА]
Абрамов Тимур
Пестров Никита
Опрышко Александр
Партилов Алексей
