Найти в Дзене
GoToWeb
147 подписчиков

Создание сайтов с нуля - урок 3 - Элемент Doctype, теги html, head, body, каркас html-страницы

894
3 мин
Все теги условно можно разделить на следующие группы: В текущем уроке мы изучим первые две маленькие группы и один специфический элемент, а со следующего занятия приступим к изучению тегов для тела документа. 1. Тег <Doctype>. Итак, первое с чего начнем – это специфический элемент <!Doctype>, с которого начинается каждая страница. Несмотря на то, что он тоже пишется в угловых скобках, DOCTYPE не относится к тегам. Главное предназначение этого элемента – это сообщить браузеру тип данного документа для правильного определения используемой версии html и корректного отображения страницы. Например, для версии HTML 4.01 доктайп выглядел так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> А для версии HTML5 доктайп пишется так: <!DOCTYPE html>, что намного проще запомнить. На текущий момент HTML 5 является последней версией, поэтому мы будем пользоваться именно таким вариантом написания тега DOCTYPE. Единственное, на что необходимо обратить внима

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

  • теги верхнего уровня;
  • теги для заголовка документа;
  • теги для тела документа.

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

1. Тег <Doctype>.

Итак, первое с чего начнем – это специфический элемент <!Doctype>, с которого начинается каждая страница.

Несмотря на то, что он тоже пишется в угловых скобках, DOCTYPE не относится к тегам. Главное предназначение этого элемента – это сообщить браузеру тип данного документа для правильного определения используемой версии html и корректного отображения страницы.

Например, для версии HTML 4.01 доктайп выглядел так:

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

А для версии HTML5 доктайп пишется так: <!DOCTYPE html>, что намного проще запомнить. На текущий момент HTML 5 является последней версией, поэтому мы будем пользоваться именно таким вариантом написания тега DOCTYPE. Единственное, на что необходимо обратить внимание – это наличие обязательного восклицательного знака после открывающей угловой скобки.

Исходя из вышеизложенного подытожу:

  • каждый HTML-документ начинается с элемента доктайп;
  • элемент DOCTYPE может использоваться странице всего лишь 1 раз;
  • при его написании необходимо помнить о наличии восклицательного знака;
  • версия доктайпа, которую мы будем использовать - <!DOCTYPE html>.

2. Теги верхнего уровня.

Следующее что рассмотрим – это теги верхнего уровня. Их всего 3: html, head и body.

После элемента доктайп всегда идет парный тег html, который является корневым, т.е. в нем заключен весь остальной код html документа, включая два других тега верхнего уровня head и body.

Простейшая html-страница состоит из элемента <!Doctype> и трех тегов верхнего уровня: html, head и body. Это минимальный набор обязательных элементов, без которых невозможно корректно и правильно отобразить страницу сайта.

3. Тег head.

Элемент head содержит ряд информационных и вспомогательных тегов. При этом, тег head, как и все элементы, располагающиеся внутри него (кроме содержимого тега title), визуально никак не отображаются на веб-странице. Т.е. это служебная информация.

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

<head>

    <title>Заголовок сайта</title>

    <meta charset="utf-8“ />

    <meta name="keywords" content=«ключевые слова" />

    <link href="css/style.css“ />

    <script src="js/functions.js"></script>

</head>

Рассмотрим теги, которые могут быть внутри тега head.

3.1. Парный тег title необходим для определения заголовка документа - текста, который отображается в левом верхнем углу браузера и во вкладках.

3.2. Тег meta необходим для определения метатегов и кодировки.

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

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

Кодировка задается следующим образом: <meta charset="имя кодировки"> (что такое charset мы разберем чуть позже).

Самая распространённая современная кодировка - utf-8 (юникод). Во избежание проблем с отображением текстовой информации во всех своих проектах используйте только её.

3.3. Теги link, style, script - необходимы для описания или подключения внешних документов (связанных файлов). Их предназначение и возможное содержимое мы будем изучать в последующих уроках.

4. Тег body.

Наконец мы подошли к рассмотрению тега body и его содержимого.

Элемент body предназначен для размещения тегов и содержательной части веб-страницы, т.е. все, что должно отображаться на создаваемой Вами web-странице, необходимо размещать внутри парного тега body.

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

  • блочные элементы;
  • строчные элементы;
  • универсальные элементы;
  • списки;
  • таблицы;
  • фреймы.

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