Course Content
Введение в HTML
Цель уроков из этого раздела подготовить вас к началу работы над проектом.
0/5
Введение в CSS
В этом разделе курса ты познакомишься с каскадными таблицами стилей.
Создание сайта: базовый курс 2022
Конспект урока

Введение

Для простоты понимания темы урока предлагаю тебе воспринимать структуру html-страницы как ветвистое дерево. Ствол этого дерева — это тег <html>.

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

Первый уровень вложенности

Так как структура дверовидная — каждая её часть имеет свой уровень вложенности.

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

  • <!DOCTYPE html>
  • <html lang=»ru»>
  • <html>

<!DOCTYPE html>

Декларация типа документа — говорим браузеру какой именно язык разметки используется на этой странице (HTML, XHTML или XML) — <!DOCTYPE>

<html lang=»ru»>

Информация о кодировке текста на странице — <html lang=»ru»>

Тег <html>

Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы. Закрывающий тег <html> должен всегда стоять в документе последним.

Имеет Языковой атрибут lang=»ru»

Это помогает инструментам синтеза речи определить, какое произношение использовать, инструментам перевода определить, какие правила использовать, и так далее.

Второй уровень вложенности

На втором уровне находятся два базовых раздела:

  • HEAD — содержит техническую информацию. Техническая часть. Не отображается в браузере и нужна для правильного отображения страницы.
  • BODY — содержит контентную часть страницы. Отображается в браузере при просмотре страницы.

Тег <head>

Тег <head> предназначен для хранения служебной информации о странице. Он располагается первым в теге <html> , сразу перед <body> . Внутри <head> обычно содержится заголовок, ключевые слова, описание страницы и другие служебные данные. Более подробно разберём содержимое этого тега в следующем уроке.

Тег <body>

HTML-элемент <body> представляет собой контент (содержимое) документа HTML. В документе может быть только один элемент <body>.

Дополнительная информация

Декларация <!DOCTYPE>

Каждый HTML-документ должен начинаться с декларации типа документа или «доктайпа».

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

Инструкция для веб-браузера о том, какая версия HTML используется в документе.

Декларация ! DOCTYPE помогает браузеру отобразить веб-страницу правильно, для этого браузер должен знать, как тип, так и версию документа.

ВАЖНО!
декларация должна указываться самой первой в HTML документе, перед тегом <html>.

Декларация <!DOCTYPE> не чувствительна к регистру.

Синтаксис

Синтаксис doctype (упрощенно):

<!DOCTYPE корневой_тег_документа [данные_DTD]>

Разница в DOCTYPE для HTML 4.01 и HTML5

HTML 4.01 основан на стандартном обобщённом языке разметки SGML, поэтому при его использовании следует указывать DTD, определяющий правила разметки конкретной версии.

HTML5 не использует SGML как основу, и указывать DTD при его использовании не нужно.

Примеры DOCTYPE для всех версий HTML

DOCTYPE HTML 5
<!DOCTYPE html>
DOCTYPE HTML 4.01 Strict

Поддерживает все актуальные для DTD HTML 4.01 элементы и атрибуты, не включая презентационные и устаревшие. Фреймсеты не допускаются.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DOCTYPE HTML 4.01 Transitional

Поддерживает все актуальные для DTD HTML 4.01 элементы и атрибуты, а также презентационные и устаревшие. Фреймсеты не допускаются.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
DOCTYPE HTML 4.01 Frameset

Аналогичен HTML 4.01 Transitional. Разрешено использовать фреймсеты.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
DOCTYPE XHTML 1.0 Strict

Поддерживает все актуальные для DTD HTML 4.01 элементы и атрибуты, не включая презентационные и устаревшие. Фреймсеты не допускаются. Необходимо, чтобы документ соответствовал стандартам XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DOCTYPE XHTML 1.0 Transitional

Поддерживает все актуальные для DTD HTML 4.01 элементы и атрибуты, а также презентационные и устаревшие. Фреймсеты не допускаются. Необходимо, чтобы документ соответствовал стандартам XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DOCTYPE XHTML 1.0 Frameset

Аналогичен XHTML 1.0 Transitional. Разрешено использовать фреймсеты.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
DOCTYPE XHTML 1.1

Аналогичен XHTML 1.0 Strict. Есть возможность добавлять собственные модули.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Дополнительные материалы
Тут пока что пусто...
Тут пока что пусто...
0% Complete