Что представляет собой структура html
Перейти к содержимому

Что представляет собой структура html

  • автор:

Структура HTML-документа

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

Рис 1. Структура HTML-документа

Следует заметить, что большая часть HTML-тегов является парными, т. е. требуют использования открывающего и закрывающего тегов. Открывающий тег состоит из имени заключенного в угловые скобки <>. В закрывающем теге перед именем добавляется знак слеш /.

Рассмотрим, как создается структура документа средствами HTML:

Здесь в строке объявляется словарь DTD. Дело в том, что сейчас HTML рассматривается как словарь (DTD – Document Type Definition) XML (Extensible Markup Language – расширяемый язык разметки). Такой HTML принято называть XHTML.

Теги … используются для того, чтобы показать, что все, что в них заключено, является HTML-документом.

Парные теги … обрамляют заголовочную часть HTML-документа. Заголовочная часть может содержать , и некоторые другие теги. Тег содержит заголовок документа, который будет отображен в верхней части окна браузера.

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

Содержимое документа, которое будет отображено в окне браузера, заключается в теги … .

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

Основным тегом форматирования текста является парный тег абзаца

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

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

Кто Вы?

Простейшая HTML-страница

Это задание архивной части. Перейдите по ссылке, чтобы пройти задание в актуальной части.

Простейшая HTML-страница состоит как минимум из трёх тегов.

Тег — это контейнер, в котором находится всё содержимое страницы, включая теги и . Как правило, тег идёт в документе вторым после доктайпа.

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

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

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим

Структура html страницы.

Теперь Вы знаете, что такое теги и сейчас самое время разобраться в структуре html страницы. На рисунке ниже изображен html код в котором нет текста, есть только три тега. Это тег &lthtml&gt, &lthead&gt и &ltbody&gt. Все эти три тега должны обязательно закрываться.

Структура html страницы

Именно эти три тега и составляют структуру html страницы. Они должны обязательно присутствовать в каждом html документе. Это железное правило.

Разберем значение каждого из этих тегов.

Тег &lthtml&gt является контейнером для всего содержимого страницы. Другими словами, весь код страницы находиться между открывающимся &lthtml&gt и закрывающимся &lt/html&gt.

В тег &lthead&gt заключается служебная информация для браузера и поисковых систем. Эта информация никак не отображается браузером на экране монитора. Исключение составляет тег &lttitle&gt &lt/title&gt. О нем мы поговорим в конце этого урока.

Тег &ltbody&gt — это основное тело нашего документа. Все, что находится между тегами &ltbody&gt и &lt/body&gt будет выводиться браузером на экран монитора.

Вся суть структуры html страницы в этом рисунке:

Структура html страницы

Тег &lttitle&gt

Тег &lttitle&gt закрывающийся, внутри него указывается название страницы. Данный тег является обязательным для каждой страницы. Он должен находиться строго между &lthead&gt и &lt/head&gt.

Давайте вернемся к странице которую мы создавали на 3-ем уроке. В коде между &lttitle&gt и &lt/title&gt написано «Мой первый сайт» это значит, что наша страница имеет название «Мой первый сайт».

Содержимое тега &lttitle&gt отображается на экране, а именно в окне браузера, обратите внимание на рисунок:

В первую очередь содержание данного тега имеет значение для поисковиков (Яндекс, Гугл и др.). Поисковые роботы считывают содержание тега &lttitle&gt для того чтобы понимать о чем ваша страница.

Вы что-то не поняли из этого урока? Спрашивайте!
— vadimgreb@yandex.ru

Структура HTML-документа

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

    Титул в браузере  код страницы  

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

Сейчас мы верстаем просто на HTML, но на самом деле это HTML 5. Раньше были и другие стандарты: HTML 4, 3, XHTML и т.д. Путаница была жуткая, но только так можно было сказать браузеру в каком режиме ему следует отображать страницу (строгий, нестрогий, фреймы. ). К счастью, сейчас всё упростилось, но doctype указывать нужно.

После этого идёт непосредственный код, который заключается в единственный тэг .

Внутри есть две секции: HEAD и BODY.

Секция HEAD — служебная, где располагается различная мета-информация, например титул страницы, её описание, кодировка, подключаемые файлы стилей, скриптов и прочее. Эта секция никак не отображается браузером, но если ты случайно разместишь в ней какой-то значащий для вывода тэг (например изображение), то браузер автоматически завершит секцию HEAD до этого тэга.

Это позволяет сократить код страницы и не указывать BODY, который является необязательным. Но, с точки зрения качества кода, мы всегда указываем полную структуру html-страницы.

Секция BODY содержит код, который нужен для отображения страницы. Именно здесь и происходит вся вёрстка страницы.

Котик

Автор котика: nan dai

Оформление кода

Сразу поговорим о том, как правильно оформлять код. Запомни простое правило — код должен быть читаемым и понятным другим верстальщикам.

Если мы говорим об исходном коде, то есть тот, который ты пишешь в текстовом редакторе, должен быть оформлен так, чтобы его можно было легко понять. Для этого используются «стандарты» кодирования, хотя это больше устоявшаяся практика, чем реальное требование.

Регистр

Все тэги пишутся в нижнем регистре. Для браузера это вообще не имеет никакого значения, но у верстальщиков используется именно нижний регистр. Тоже самое касается и всех атрибутов. Только нижний регистр.

Отступы

Блоки, которые вложены друг в друга должны отбиваться слева. Вот пример:

 

Заголовок

Подзаголовок

Цитата

Смысл всего этого в том, чтобы визуально сразу видеть вложенность тэгов.

Пробелы или табулятор

Отступ можно делать как табулятором, так и пробелами. В основном кодеры используют пробелы из расчёта 4 пробела — это один табулятор. Табулятор удобен там, где нет автоформатирования (он автоматом расставляет отступы). Но вообще принципиальной разницы нет: если тебе всё равно, то используй пробелы.

Кавычки

Кавычки могут быть одинарные ‘ и двойные » . Правило для HTML такое: вначале двойные, потом одинарные. Обычно это используется в JavaScript-коде:

ссылка 
Кликни на меня
Слэш в конце одиночных тэгов

Иногда встречается такая форма указания одиночных тэгов:

 

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

Порядок атрибутов в тэгах

Пока мы не изучали атрибуты, поэтому ты запомни эту страницу, чтобы вернуться к ней позже.

Для HTML, опять же, без разницы, но для верстальщиков удобней такой вариант: вначале какие-то «особые-особые» атрибуты, потом id (поскольку он уникальный), потом class , а дальше все остальные без разницы. И в конце одиночные атрибуты.

И в заключении отмечу, что Visual Studio Code умеет выполнять форматирование автоматически (после установки соответствующих плагинов). То есть очень часто вообще не приходится об этом задумываться. Даже если получился «ужасный» код, достаточно выбрать пункт «Форматировать документ» и программа приведёт код в приличный вид.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *