Изучаем HTML/CSS #2. Стандартный макет html документа.

2
14828

Первый урок был посвящен вступлению, если вы его не читали, тогда рекомендуем это сделать HTML урок 1. Второй урок будет посвящен макету html документа. Макет html документа имеет постоянную форму и каждый раз, когда вы будете начинать работу над новой html страницей вам придется использовать данный макет, о том, как он выглядит вы узнаете ниже. При создании сайта, необходимо придерживаться стандартам, поэтому, начало нашего нового документа должно начинаться не с тега <html>, а с указания браузеру того, что мы будем использовать язык html. Чтобы это сделать нужно написать такую строчку:

Таким образом, мы говорим браузеру, что тип данного документа — html.

Начнем с простой страницы

Давайте создадим простую html страницу и посмотрим, как она выглядит. Ниже я привожу код страницы.

На первой строчке мы указали тип документа, затем начинается html документ, как вы видите, всё, что располагается между тегами <html></html> и есть сама страница. Между тегами <head></head> у нас расположено два тега: <meta> и <title></title> в одном, мы указываем кодировку, в другом заголовок страницы, который будет отображаться в браузере в том месте, где находятся вкладки. Сама страница, а конкретно всё её видимое содержимое находится между тегами <body></body>, основная работа происходит как раз между ними.

Что вы узнали до сих пор

Теперь вы должны знать, как выглядит html документ, а именно:

1) Как указать тип документа — <!doctype HTML>

2) Как выглядит стандартный макет html документа.

3) Где располагается заголовок страницы — <title>Заголовок</title>

4) Где располагается видимое содержимое страницы.

Заголовки — h1, h2, h3, h4, h5

Важным элементом любой страницы являются заголовки, с помощью них мы выделяем элементы на странице. В html существуют 5 вариантов заголовков, они отличаются по размеру. Чем больше цифра после h, тем меньше заголовок. Давайте попробуем все виды заголовков.

Результат вы можете посмотреть у себя в браузере, вот так выглядят он у меня:

Заголовки помогают поисковым системам правильно анализировать содержимое вашей страницы для эффективного представления в поисковой выдаче, поэтому их надо обязательно использовать. Например, у статьи есть заголовок, поэтому есть смысл заключить заголовок в тег h1 или h2. Попробуйте создать несколько своих html страниц, используйте заголовки и параграфы, а также изменяйте у каждой страницы заголовок в теге <title></title>.

Что теперь?

Давайте посмотрим, какие еще теги для оформления теста есть в наборе html. Предлагаю рассмотреть теги <em></em> <strong></strong> <small></small> <br> <hr>

Тэг <em></em> делает текст курсивным, <strong></strong> делает текст жирным, соответственно <small></small> уменьшает текст. Вот так выглядит результат использования тегов:

 

Я курсивный текст  Я жирный текст  Я маленький текст

 

Тег <br> является не парным тегом, т.е. он не нуждается в закрывающем тэге. Он позволяет переносить содержимое строчки на новую строчку. Давайте воспользуемся им, чтобы перенести предыдущий пример на новый строчки:

 

Я курсивный текст
Я жирный текст
Я маленький текст

 

Теперь вы видите, каждая строка на своем месте. Что касается тега <hr>, он тоже не парный и позволяет создать полосу на странице, в прямом смысле, вот так он выглядит в действии:

 

 


Я курсивный текст
Я жирный текст
Я маленький текст


 

В примере, вы можете увидеть две полосы сверху и снизу.

Списки

Еще один очень полезный html тэг — <ul> </ul>, он позволяет создать список элементов, для того, чтобы его использовать нужно знать еще один тег — <li></li>, он позволяет обозначить элемент списка, в результате их совместной работы, мы получим вот такой результат:

 

  • Элемент списка 1
  • Элемент списка 2
  • Элемент списка 3

Вот такие полезные теги есть у языка разметки HTML.

Заключение

После всей проделанной работы, наш код выглядит примерно так:

Мы познакомились с основными элементами html, рекомендую Вам попрактиковаться и создать парочку собственных страниц для закрепления материала. Теперь вы знаете, как выглядит стандартный документ html и умеете применять теги форматирования текста. Благодарю за внимание. До скорых встреч!
Следующий урок серии «HMTL&CSS» #3.

2 КОММЕНТАРИИ

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя