В прошлый раз мы с Вами познакомимся с HTML тегами, атрибутами и их значениями. В этот раз изучим теги текста и теги декораций. Поехали!
Теги текста
<h1>...<h1> - заголовок первого уровня. На каждой странице должен быть только один. Всего 6 уровней заголовков
Создадим по одному заголовку каждого уровня с классом title и текстом внутри: Заголовок, заголовочек и посмотрим, что по этому поводу думает браузер:
Заголовки разных уровней отличаются размером и значением на веб-странице. Хочу заметить, что заголовок первого уровня на странице может быть только 1, не больше.
Иначе браузер съедет с катушек.
<p>...</p> - тег текстового параграфа. Внутри находится многострочный текст.
Покажу на примере: напишем в этот тег любой текст:
Красота! Идем дальше.
<span>...</span> - тег текстового фрагмента. Обычно в него заключается фрагмент текста, состоящий из двух-трех слов, для придания определенных отличных от всего текста стилей.
Добавим в нашем текст один такой тег, в файлах стилей обратимся к нему напрямую без класса и сделаем текст синего цвета:
Текст поменял свой цвет ровно там, где мы вставили этот тег
<a href="">...</a> - тег ссылки. В качестве адреса перехода задаётся либо другая страница, либо id блока, чтобы перейти на него, либо заглушка(@#@), которая никуда вести не будет.
<ul>...</ul>, <ol>...</ol> - теги ненумерованного и нумерованного списков.
<li>...</li> - тег элемента списка
Создадим один нумерованный и один ненумерованный список и добавим туда по 5 элементов и посмотрим на это дело в браузере:
Мне всё нравится, а вам?
<br> - тег переноса строки
Тут надеюсь всё понятно - есть текст, вставить этот текст между словами и будет перенос - как enter в ворде на компутере
Теги декораций
<img src=""> - тег добавления картинки на сайт. src атрибут задаёт адрес картинки.
Покажу как это работает на примере одной миледи. Для удобство стоит закинуть картинку в ту же папку, где лежат файлы разметки и стилей, что мы, собственно и сделаем:
Картиночка в папке, теперь подключим ее в разметке и посмотрим на реакцию браузера:
Изумительно! Подпишись на канал, так как в следующий раз мы разберем теги контейнеры и теги формы.
Другие материалы от автора:
Что такое Flat Design и как его использовать
Понравилась статья? Поддержи автора: подпишись на канал и поставь лайк!
