Понятие тега или создание каркаса первой html страницы

Понятие тега или создание каркаса первой html-страницыВ данном уроке мы узнаем, что такое тег, а также создадим каркас нашей первой html страницы и разберем его полностью. Для начала установите программу Notepad++ и запустите ее. Вы увидите, что файл здесь создается автоматически. Давайте теперь создадим в этом пустом файле каркас своей первой html страницы. Ниже я привел этот каркас. Скопируйте его и вставьте в пустой файл. Теперь давайте разберем его более подробно. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первый HTML документ</title>
</head>
<body>

</body>
</html>

Тег DOCTYPE

Скопировав данный каркас, сохраните его под именем index.html. Когда мы набираем адрес сайта без указания конкретной страницы, то это значит, что мы запрашиваем страницу index.html. То есть, когда мы обращаемся к серверу, он развернет именно индексную страницу. Если же мы указываем какую-то конкретную страницу, то в итоге она и будет выводиться. Но если адрес не указан, то будет возвращена индексная страница. Поэтому мы называем страницу index.html.

DOCTYPE (тип документа)Теперь мы начинаем разбор данного каркаса. Первая строка очень длинная, но не пугайтесь — это указание браузеру на тип данного документа. Она начинается со строки <!DOCTYPE (тип документа). Тем самым, мы говорим браузеру, что этот документ создан на языке HTML, потом указываем обязательно версию. Есть версия 4.01, есть версия 5, более того есть еще более расширенные версии HTML, которые называются XHTML. Как вы видите, мы указали, что будем работать с версией 4.01 и при этом, каждая такая версия имеет свою подверсию.  Обратите внимание, что сейчас у нас стоит подверсия Transitional — это переходная версия, позволяющая использовать как старые теги, так и более новые, которые появились в версии 4.01. Есть и другие версии этого языка, но не будем вдаваться в такие дебри.

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

Тег html

Теперь двигаемся дальше. Как вы уже, заметили, у нас каркас из html тегов (строка 2 и 10). Что такое html тег? Тег — это конструкция языка, которая указывает браузеру, что нужно делать. Некоторые теги говорят браузеру, что нужно отобразить абзац, другие, что нужно отобразить заголовок, третьи, что нужно сделать таблицу. То есть с помощью этих тегов мы общаемся с нашим браузером и можно сказать, программируем его действия. И первый такой тег — это тег <html> (строка 2). Заострите свое внимание на то, как правильно этот тег создается. В самом начале идет открывающая скобка, название тега и затем закрывающая скобка. При этом обратите внимание, что в самом низу также идет подобный тег, но он уже со слешем (строка 10). То есть — это уже закрытие тега.

Тут нам важно понять, что есть одинарные теги и есть парные. В нашем примере мы видим классический парный тег. В строке 2 он открылся и в строке 10 он закрылся. И в данном случае тег html просто является контейнером, который содержит все остальные html теги. Он особой роли здесь не играет и просто является контейнером и любой html код всегда должен быть внутри этого контейнера.Теги head и body

Тег head

Другой момент — это тег head (строка 3 и 6). Он также парный как вы видите, и содержит два других тега. Почему head? Если мы переведем head с английского, то будет голова. Ниже вы еще видите body (тело). Любой html документ содержит как форматирующие теги, так и специальные. Что такое форматирующие теги? Форматирующие теги — это теги, которые отвечают за абзацы, заголовки, картинки, ссылки и так далее. То есть они, создают видимую часть страницы все, что видит пользователь.

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

Точно также и с серверами. Часть серверов — это основные, где хранятся сайты, а часть серверов — это вспомогательные (например, тот же DNS сервер, который обеспечивает работу всей сети). Тоже самое и здесь. Область head (строка 3 — 6) предназначена для всех вспомогательных тегов, область body (строка 7 — 9) для всех форматирующих. Поэтому имейте ввиду. Здесь, даже специально был назван тег head (голова), которая организует всю работу страницы. То есть она указывает браузеру, какие скрипты будут подключаться, кодировка, какое название у страницы. А в body уже все форматирование и часть, которая будет видна пользователю.

Функция кодировки utf-8

Итак, контейнер head. Начинаем мы с первого тега meta (строка 4), который у нас отвечает за кодировку. Вообще тег meta многогранный он может отвечать не только за кодировку как в данном случае, но и за многие другие вещи. Однако об этом поговорим в следующих статьях. Сейчас у нас тег meta играет роль указателя кодировки. Здесь есть специальная запись, которая говорит браузеру о том, что данный документ создан в кодировке utf-8.  Вот здесь немного подробнее нужно остановиться. Для чего вообще нужна кодировка?

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

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

С того момента, когда она стала уже стандартом, отпала необходимость указывать конкретную кодировку для конкретного языка. Достаточно было указать универсальную кодировку utf-8 и у вас сайт или блог отображался бы нормально во всех браузерах. При этом упрощается еще работа и с базой данных. Поэтому здесь имейте в виду, что кодировку мы всегда будем указывать в utf-8, но тут нужно обратить свое внимание еще на одну вещь.

Проверяем кодировку

Чтобы все правильно работало и браузер правильно отображал страницу, в этой кодировке должен быть  сам документ. Поэтому программа Notepade ++ нам очень хорошо поможет. Здесь есть пункт «Кодировки». Если у вас на данный момент кодировка не стоит как у меня на нижнем рисунке, то щелкните по пункту «Преобразовать в UTF-8 без BOM».

Выбор кодировки html документа

В этом случае ваш документ будет преобразован в кодировку utf-8. Сохраните документ. В правом нижнем углу вы найдете надпись «Dos\Windows ANSI as UTF-8» — это значит что документ создан в режиме utf-8 и отображение будет нормальным.

Кодировка документа

И сразу такой совет! Зайдите в «Опции» —> «Настройки». Здесь есть вкладка «Новый документ», сразу поставьте галочку на UTF-8 без метки BOM, чтобы у вас все новые документы создавались в этой кодировке.

Настройка кодировки html документа

Тег title

Следующий служебный тег — это title (заголовок) (строка 5). В нем мы указываем заголовок самой страницы. В дальнейшем этот заголовок будет отображаться во вкладке браузера, когда мы зайдем на данную страницу. Можно даже проверить этот момент. В Notepade++ для этого есть хорошая возможность. Нажмите на вкладку «Запуски» в соответствии с названием вашего браузера, выберите данную вкладку. Например, если у вас Google Chrome, то выбираем «Launch in Chrome».  В верхнем окне вы увидите название «Первая HTML страница». То есть то, что мы указали в title, здесь и отобразилось. При этом видимая часть у нас пустая. Также пустая, как и блок body. Он у нас пуст и отвечает за форматирующие теги (то, что видят пользователи).

На этом и остановимся. Каркас мы с вами создали, разобрались с Doctype, разобрали тег html, head, который хранит все служебные теги нашей страницы, тег meta, который в данном случае отвечает за кодировку и тег title, который отвечает за название страницы. В общем, изучайте и внедряйте!

Zavitushka-dlya-sayta

 
rss-1Следить за новыми статьями на этом блоге!

 Нажимая на кнопку, вы соглашаетесь с нашей политикой конфиденциальности и пользовательским соглашением.

Комментарии 9

  • Сергей, если можно, расскажите подробнее о !DOCTYPE. Я никогда не понимала, что именно нужно писать в этом теге. Ваша статья немного внесла ясность, но по-прежнему не понятно, как определить версию, например. И можно ли оставлять этот тег пустым.

    • Ольга, Doctype – это самый важный тег. Он должен присутствовать в самой первой строке страницы. Без него, страницы не будут работать правильно. Если вы оставите этот тег пустым или вообще не пропишите его, то браузер посчитает это за ошибку, что повлечет в дальнейшем неправильное отображение страниц.

      В зависимости от версии языка HTML, тег DOCTYPE прописывается по разному. Под каждую версию языка предусмотрены специальные стандарты, которые помогают браузерам правильно прочитать документ. Как правильно прописывать тег DOCTYPE для каждой версии можете узнать по этому адресу htmlbook.ru/html/!doctype

      Сейчас самая последняя версия – это пятая. Многие сайты ее используют. Рекомендую и вам!

  • Я делаю всегда очень просто, списываю от кого-нибудь все метатеги. Потому что они везде почти одинаковые. А еще я не умею в гугл хром смотреть страницу. Я открываю через ctrl+u.
    Недавно занималась похожим от балды кстати. Ну там разные формы вставляла. Списки. Потом все удалила. Наигралась.
    Я заметила, что в блогах моих вордпрессовских много XHTML. а в чем его преимущсество?
    И мне не очень хочется, чтоб все перешли на HTML5. Я там посмотрела, как-то трудно укладывается логика в мозг. Мне с div намного понятней структура. Там сразу видно, что в чем. А по новому я че-то как баран на новые ворота смотрю.

    • Оль, в Google Chrome нажми F12, чтобы на странице код просматривать. А XHTML — это расширенная версия обычного HTML.

  • О, попробую.
    А расширенная в смысле? Там теги новые есть? Я думала, просто по стилю записи отличается.

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

  • Там все равно понятно, что написано. Просто в конце по-другому и немного короче.

  • В HTML-коде страницы должен быть только один тег . Однако при проверке обзора на странице система нашла более одного открывающегося тега :
    Из ща чего может возникать такая проблема? плагин кэша может влиять? на движке wordpress

    • Возможно с темой что-то не так. Может по ошибке где-то прописаны дублирующие теги. Скорее всего из-за этого.

А что вы думаете по этому поводу?

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

Нажимая на кнопку «Отправить», вы соглашаетесь с нашей политикой конфиденциальности и пользовательским соглашением.