Название страницы

Разбираем HTML документ

Урок №3
Разбираем HTML код

Давайте разберём, что означает каждая часть нашего кода HTML-документа, введённого в Блокнот на прошлом уроке:

    
Заголовок статьи
 
Абзац статьи.
   

Но для начала узнаем, что такое HTML-тег или просто «тег»?

Тег — основа языка HTML

Основной частью языка HTML является — тег. HTML документ (как и весь html-код) и состоит и тегов. Тег содержит в себе имя и угловые скобки, которые расположены по бокам — :

— это один из множества, различных HTML-тегов, означает абзац.

Теги бывают открывающими и закрывающими. У закрывающих тегов перед именем стоит косая черта (слэш) /

— открывающий тег.

— закрывающий тег.

Между открывающим и закрывающим тегами, обычно располагается текст или другие теги.

У тегов разные имена и каждое имя означает какой либо элемент HTML-страницы: заголовок статьи , абзац (параграф) статьи , фотографию , ссылку , кнопку и т.п.

Рассмотрим другие теги используемые в нашем HTML коде.

Теги — начало и конец HTML-документа

Возвращаемся к нашему HTML документу:

    
Заголовок статьи
 
Абзац статьи.
   

Каждый HTML-документ начинается с открывающегося тега и заканчивается закрывающимся тегом

Теги и — голова и тело HTML-документа

Между тегами располагаются два блока.
1. Первый блок начинается и заканчивается тегами — их называют головой HTML-документа.
2. Второй блок начинается и заканчивается тегами — их называют телом HTML-документа.

    
Заголовок статьи
 
Абзац статьи.
  

1. — голова HTML-документа .
2. — тело HTML-документа , между этими тегами располагается основная информация страницы: заголовки , абзацы , фотографии , ссылки , кнопки и т.д.

Теги — название HTML-страницы

    
Заголовок статьи
 
Абзац статьи.
  

В голове между тегами , располагаются теги
. Между тегами помещают текст, который выступает в качестве названия страницы .

В нашем примере, между тегами , находится текст:
Название страницы

Текст помещённый между тегами появляется в двух местах, в виде названия окна браузера и в виде названия вкладки браузера:

Название страницы, которую вы сейчас читаете, содержит следующий текст:
Разбираем код HTML-документа. Выясняем что такое тег.

Теги и — заголовок и абзац статьи

    
Заголовок статьи Абзац статьи.
  

В теле нашего HTML-документа, между тегами , располагаются два вида тегов:
— теги заголовока статьи,
— теги абзаца статьи.

— между этими тегами располагается текст, который является заголовком статьи.
Например, текст заголовока статьи, которую вы сейчас читаете содержит следующее:
Разбираем HTML код

— между этими тегами располагается текст, который является абзацем статьи.
Например, второй абзац статьи, которую вы сейчас читаете, содержит следующее:
Но для начала узнаем, что такое HTML-тег или просто «тег»?

Обобщаем материал по структуре HTML-документа:

Каждый HTML-документ начинается и заканчивается тегами Каждый HTML-документ состоит из двух блоков, головы и тела:
1. — голова HTML-документа,
2. — тело HTML-документа.

В голове HTML-документа между тегами , располагаются теги и некоторая служебная информация о странице (мета-теги) , которую мы изучим чуть позже.

В теле HTML-документа между тегами , располагается основной контент: тексты, изображения, формы, которые обрамлены тегами заголовков h1 , абзацев p , изображений img , ссылок a , кнопок input и т.д.

Источник

Структура HTML-кода

Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 1 показан код простого документа, содержащего основные элементы.

Пример 1. Исходный код веб-страницы

      
Заголовок
 
Первый абзац.
 
Второй абзац.
  

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example2.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example2.html. В браузере откроется веб-страница, показанная на рис. 1.

Рис. 1. Результат примера в браузере

Далее разберём отдельные строки нашего кода.

Элемент (жарг. доктайп) предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях — современный HTML5 или устаревшие HTML4 и XHTML. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

Поскольку мы в дальнейшем будем работать только с HTML5, то нам потребуется только один короткий и современный доктайп.

Мы упоминали, что имена элементов можно писать маленькими и большими буквами. К это правило тоже относится и его можно записывать по разному. Тем не менее, традиционно имя этого элемента пишется в верхнем регистре.

Открывающий тег определяет начало HTML-документа, внутри него хранится «голова» ( ) и «тело» документа ( ).

Содержимое этого раздела не показывается напрямую на странице, за исключением элемента . Внутри могут располагаться следующие элементы: , , , , или .

Элемент является универсальным и добавляет целый класс возможностей, в частности, с помощью метатега, как обобщённо называют этот элемент, можно изменить кодировку страницы, добавить ключевые слова, описание документа и многое другое, предназначенное для браузера или поисковых систем. В частности, чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

Элемент определяет название веб-страницы. В браузере оно отображается на текущей вкладке (рис. 2).

Рис. 2. Название веб-страниц в браузере

Элемент .

Закрывающий тег показывает, что «голова» документа завершена.

«Тело» документа предназначено для размещения элементов и содержимого веб-страницы.

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

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

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

Элемент

определяет абзац текста.

Элемент

является блочным, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 1.

Следует добавить закрывающий тег , чтобы показать, что «тело» документа завершено.

Последним элементом в коде всегда идёт закрывающий тег .

Источник