HTML теги и комментарии онлайн урок.



Тэг (дескриптор) HTML - это основная составляющая языка HTML. Тег представляет собой набор символов, которые помещены в треугольные скобки < >. Внутри этих скобок указывается название тега и дополнительные атрибуты с соответствующими значениями. Например,

<div>
  <a href='/home'> Home </a>
</div>


Указывать атрибуты тега не всегда обязательно и не все атрибуты могут принимать значения. Например,

<select name='country'>
  <option>USA</option>
  <option>Germany</option>
  <option selected>Ukraine</option>
</select>


Тут тег <select> имеет атрибут name со значением 'country'. Остальные теги либо не имеют атрибутов, либо атрибуты указаны без значения. Для некоторых тегов присутствие некоторых атрибутов является обязательным, например в теге ссылки <a> атрибут href является обязательным.

Теги делятся на два типа: одиночные (непарные) и двойные (парные).

Двойные (парные) теги - это такие теги, для которых необходимо указывать открывающий и закрывающий тег. Закрывающий тег состоит из скобок, названия тега и символа "/" перед названием тега. Например,

<div>
 <b>Text</b>
</div>


Одиночные (непарные) теги - это теги которые не требуется закрывать, т.е. у них нету закрывающего тега:

<img src='/img/picture.jpg' alt='My picture'>
<br />


В данном случае в теге был использован атрибут, который определяет, где взять необходимый файл с изображением.

В общем, синтаксис тегов можно изобразить следующим образом:

<tagName attr_1='val_1' ... attr_N='val_N'> [content] </tagName>


или

<tagName attr_1='val_1' ... attr_N='val_N'>


Важно отметить, что внутри двойных тегов (т.е. вместо [content]) возможно подставлять другие теги, таким образом вкладывая одни теги в другие (однако, следуя некоторым простым правилам).

Заметим также, что при некорректной расстановке тегов или других синтаксических ошибках, браузер все равно предпримет попытку отобразить страницу корректно - это предусмотрено программной частью браузера.

Рассмотрим теперь пример исходного кода из предыдущего занятия:



Первый тег в исходном коде - тег, который обозначает тип документа. В данном случае это HTML 5. Далее, теги <html>, <head>, <body> определяют основную структуру HTML кода и называются тегами верхнего уровня.

Тег <html> обозначает начало кода с разметкой. Далее структура HTML кода условно имитирует составляющие живых существ - голова <head> и тело <body>.

В голове <head> указывается информация служебного и вспомогательного характера. Например, заголовок окна браузера в качестве заголовка страницы, кодировка, описание страницы, дополнительная информация для поисковых систем, браузеров, и т.п. То есть, в этой части HTML-документа указывают данные, которые явно не будут отображены на странице.

В теле <body> указывается конкретно та информация, которая должна явно быть отображена на странице - текст, картинки, ссылки и другие элементы. В последнем примере мы видим, что в теле документа находится заголовок, текст и ссылка.

По характеру представления на экране теги условно делятся на следующие категории:

  • форматирование текста

  • ссылки

  • изображения

  • таблицы

  • списки

  • формы

  • фреймы


Также, теги можно разделить на блочные (block) и строковые (inline). Основными блочными тегами являются <div>, <p>, <h1>, ... ,<h6>. Основными строчными тегами являются теги <span>, <a>, <b>, <u>, <i>. Для корректного отображения страницы на экране НЕ следует помещать блочные теги в строковые.

Комментарии - это фрагменты исходного кода, которые не влияют на отображение веб-документа. Они используются разработчиками для улучшения читабельности кода. В HTML комментарии имеют следующий синтаксис:

<!-- I am a comment -->


Проверьте свои знания
Разбить текст, написанный в предыдущем задании на абзацы. Использовать двойной тег <p>. Добавить комментарий Test comment перед тегом <h1>