В предыдущем уроке я познакомил вас с основным скелетом веб-документа, сегодня же мы начнем наращивать на него мясо.
Продолжим расширять код нашей страницы, добавляя теги, которых нам предстоит изучить еще большое количество. Все теги в зависимости от свойств и области применения разделены на группы по типам. Условно теги делятся на следующие типы:
- теги верхнего уровня;
- теги заголовка документа;
- блочные элементы;
- строчные элементы;
- универсальные элементы;
- списки;
- таблицы;
- фреймы;
- семантическая разметка
- К тегам верхнего уровня относятся уже известные нам <html>, <head> и <body>. Вкратце <html></html> - это общий контейнер, куда помещается <head></head>, в котором хранятся теги заголовка документа <title></title> ,<meta> и <body></body> в котором хранятся все остальные теги, текст и мультимедиа.
- Блочные элементы служат для указания размещения элементов страницы. И примерно вот так все это может выглядеть:
- тег <H1> размещения заголовка текста, различают 6 уровней данного тега. H1 - самый большой шрифт, <H6> - самый маленький шрифт;
- тег <P> представляет тег абзаца
Добавим эти теги в наш код
И страница примет вот такой вид
- тег <DIV> представляет из себя универсальный блочный элемент.
- тег <HR> рисует горизонтальную черту на странице
- тег <PRE> является тегом предварительного форматирования. Объясню что это значит. Давайте добавим в код нашей страницы стих:
Если жизнь тебя обманет,
Не печалься, не сердись!
В день уныния смирись:
День веселья, верь, настанет.
Если добавить этот стих без тега <PRE>, то текст будет отображаться одной строкой
Заключив текст в тег предварительного форматирования <PRE>, увидим, как картина разительно изменится.
Конечно это можно было сделать и иначе, например разделив каждую строчку на абзацы тегом <P>
Получаем такой вид
В следующем уроке продолжим изучать типы тегов.