Всем привет! Это вторая часть про основные теги, необходимые для создания своего сайта с нуля. Здесь мы разберём ещё несколько тегов для написания своего сайта. Если вы не читали первую часть, то рекомендую сначала прочитать её, кликнув по этой ссылке.
Добавление подписи к изображению.
В первой части мы научились добавлять изображению на ВЕБ-страницу. Чаще всего к изображениям добавляется подпись, некое краткое описание картинки, которое будет видно читателю.
Чтобы сделать подпись, используется тег <figcaption></figcaption>, внутри которого и будет подпись. Данный тег идёт после <img>, и уже получившаяся конструкция из <img> и <figcaption></figcaption> оборачивается парным тегом <figure></figure>. Это как бы объединит всё в единую часть.
Таблица на HTML.
Немаловажной составляющей сайта является таблица. В ней удобно разместить определённую информацию, провести какое-либо сравнение и тому подобное.
Чтобы сделать таблицу, используется тег <table></table>. Это и будет главным контейнеров для ячеек. Как и у изображений, к таблице можно добавить подпись. Для этого после открывающего <table> нужно написать тег <caption></caption>.
Ячейки таблицы образуются с помощью следующих тегов:
- <tr></tr> – строка таблицы
- <th></th> – ячейка с заголовком, по умолчанию текст в такой ячейке выделен жирным и выравнен по центру
- <td></td> – ячейка с информацией
Изначально у таблицы нет рамок, точнее они невидимы. Границы таблицы задаются с помощью атрибута border="" (в кавычках пишется число, в примере ниже указано 5, то есть 5 пикселей). Далее идёт атрибут cellspacing="". Он нужен для того, чтобы рамка была одинарной. А атрибут cellpadding="" отвечает за отступы внутри ячейки.
Также ячейки таблиц можно объединять. Это будет разобрано в отдельной статье.
Универсальные контейнеры. Тег <div> и тег <span>.
Тег <div></div> является блочным и представляет из себя своеобразный пустой контейнер, который нужен для его дальнейшей стилизации с помощью CSS-стилей. До появления HTML5 именно <div> использовался для деления сайта на фрагменты (шапка, подвал, сайдбар).
Сейчас же появились новые семантические теги, которые также будут разобраны в отдельной статье. Но это не значит, что тег стал бесполезным. Он по-прежнему активно используется для вёрстки декоративных элементов сайта, контейнеров с контентом и вообще там, где не подходят семантические теги.
С тегом <span></span> всё почти также как и с <div></div>. Только <span></span> – это строчный тег. Он подойдёт, допустим, для выделения или стилизации части текста.
Ну и, разумеется, пример. Поместим внутрь <div> бессмысленный текст, часть которого обернём тегом <span>. А для наглядности придётся задействовать пару CSS-стилей. Всё, что написано в кавычках атрибута style="" является этими стилями.
Редактирование текста на HTML.
Ещё в языке HTML существует несколько тегов для редактирования текста. Под редактированием стоит понимать, что текст можно сделать жирным, курсивом, подчёркнутым или зачёркнутым. Ниже приведены эти теги.
- <b></b> – жирный текст
- <i></i> – курсив
- <u></u> – подчёркнутый текст
- <s></s> – зачёркнутый текст
Тут ещё есть горизонтальные линии. Их можно сделать с помощью непарного тега <hr>.
⤵
На этом стоит закончить вторую часть разбора тегов, необходимых для создания своего сайта 🌐
Если есть вопросы, задавайте их в комментариях, постараюсь ответить 💬
Материалы из статьи: https://disk.yandex.ru/d/0RrjfZ1bZpYxDw📎
Читайте также: