Как создать веб-страницу | Теги DOCTYPE, html, head и body

"Все аспекты самостоятельного создания и продвижения сайтов
от практика с многолетним опытом." — блог Рудь Сергея
info@site-on.net
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
29.03.2013

Здравствуйте уважаемые читатели блога Site on! В прошлый раз мы говорили об основах HTML (XHTML) – языка гипертекстовой разметки. Сегодня у нас с вами будет вступительная статья в практику по созданию сайтов. А именно, сегодня мы создадим нашу первую веб-страницу всего за пару минут, и узнаем все подробности об её составляющих.

И так, ниже представлен макет самой простой веб-страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Как создать веб страницу?</title>
</head>
<body>
И здесь пишем любой интересующий нас текст.
</body>
</html>

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

создать веб-страницу

Тег !DOCTYPE

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

<!DOCTYPE>
вместе с его описанием. Без этого тега, между прочим, наша страница тоже работала бы, НО! Но писать его обязательно, так как он служит указателем для браузеров: какой разметкой и её версией мы собираемся дальше пользоваться (XHTML, HTML). Без указания DOCTYPE (типа документа) браузеры, из-за отсутствия информации о вашей страничке, автоматически переходят в таинственный Quirks Mode (эдакий режим совместимости), поведение которого абсолютно не предсказуемо для вашего сайта.

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

<!DOCTYPE>
мало, нужно также дать браузеру его полное описание, а именно

<!DOCTYPE html PUBLIC "-//W3C//DTD

Эта часть у всех одинакова, далее идёт тип и версия разметки. Лично я использую XHTML 1.0 Transitional (также есть Strict и Frameset), где Strict означает строгий синтаксис, Transitional – переходной (лояльный) и Frameset – синтаксис с фреймами. Не хочется долго на этом останавливаться, просто посоветую использовать либо Strict, либо Transitional. И вообще, старайтесь всегда приучать себя к определённым жёстким рамкам, и стараться всегда делать всё максимально по стандарту, к примеру, если тег НЕ обязателен к закрытию (p, li), то лучше всё равно его закрыть!

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

далее указываем ссылку на спецификацию

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

и не забываем в конце поставить угловую скобку.

Тег html

Следующим по списку идёт тег начала страницы

<html>
, который обязателен к закрытию (хотя современные браузеры могут закрыть его и без вас). Обращаю ваше внимание, что при использовании XHTML в теге
<html>
обязательно должна присутствовать ссылка на спецификацию xhtml и тег в конечном варианте выглядит как
<html xmlns="http://www.w3.org/1999/xhtml">

Тег head

«Голова» нашего сайта начинается тегом head. Информация, находящаяся в голове нашей странички, также как и предыдущие её части не видны нашим посетителям (за исключением тега title). В голове указывается мета-информация для поисковых систем и браузеров, а также подключаются (если есть) скрипты и стили нашего сайта. Однако самым важным элементом в голове сайта (особенно для поисковой оптимизации) является тег title, в котором записывается название нашей страницы. Это же название выводится в выдаче поисковых систем (для каждой страницы должно быть разным!).

Внимание! Обязательно указывайте мета-тег кодировки , как я сделал в примере выше

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
Более подробно о том, как правильно задать кодировку страницы читайте по ссылке.

Тег body

Далее наконец-то открывается тег body, который олицетворяет начало «тела» - основной части нашей страницы. Вся информация, которая записана внутри этого тега, создана для посетителей. Именно здесь мы и будем разворачивать наши действия, по написанию правильного и «чистого» макета для нашего сайта. В следующей статье мы на практике разберём самые элементарные основы CSS – каскадных таблиц стилей.

А на сегодня всё, спасибо за то, что уделили своё внимание. Если у вас возникли какие-либо вопросы – пишите в комментариях, я обязательно отвечу.

Заметки:

1) Тег head и тег body могут встречаться только по одному разу на странице: у сайта, как и у человека, может быть только одна голова и одно туловище. Естественно теги !DOCTYPE, html и title – тоже употребляются единожды на странице.

2) Теги html, head, body, title – обязательно должны иметь закрывающий тег!

3) Не ставьте enter’ов (переносов строки ) и пробелов (табуляций) в самом начале документа, пишите тег <!DOCTYPE> начиная с самого первого символа в вашем текстовом документе.

С уважением, .
Пожалуйста, оцените эту статью
Средняя оценка: 4.71 из 5 (проголосовало: 28)
Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Ваш email:
Вы можете помочь развитию проекта, сделав всего 1 клик:
Спасибо!
Пожалуйста, прокомментируйте, как Вам моя статья?
Имя:
Комментарий:

Если Вы хотите вставить код, пожалуйста, заключайте его в [code][/code]

Подписаться на новые комментарии:

E-mail:


Защита от спама: пожалуйста, напишите слово "сел" справа налево
Ответ:
Подписаться на новые комментарии без комментирования - Email:
Защита от спама: пожалуйста, напишите слово "сел" справа налево
Ответ:

20.03.2014 14:42:45 Станислав:
У меня вместо моего текста только знаки вопросов в ромбиках.И Ваш блог открывается без подключения к интернету. В чем секрет?
20.03.2014 17:16:52 Сергей отвечает:
1) Попробуйте изменить кодировку в браузере, или сделайте так.
2) Видимо, клиентское кеширование хорошо работает. О кешировании в Джумла я писал здесь.

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


12.11.2014 15:36:33 SelenIT:
Не рекомендую использовать Transitional-доктайпы, так как с ними браузеры переходят не в стандартный, а в тоже достаточно таинственный «почти стандартный» режим (Almost Standards mode, он же Limited Quirks mode). Обычно разница проявляется только для одиночных картинок в блоках и ячейках таблиц, но бывают и другие сюрпризы (напр. в Опере на Presto вообще переставал работать vertical-aign для инлайн-блоков). Кроме того, современные браузеры разбирают любой HTML-код, независимо от доктайпа, по правилам HTML5 (эти правила специально написаны с учетом обратной совместимости), поэтому единственный доктайп, который сейчас имеет практический смысл — это короткий, ясный и гарантирующий стандартный режим доктайп HTML5: <!DOCTYPE html>.
12.11.2014 21:41:30 Сергей отвечает:
Всё верно, спасибо за дополнение.

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


05.06.2015 10:57:46 Виктор:
У меня такая проблема.
Я создал по вашему шаблону страницу. Назвал index.html.
Если я ее открываю на рабочем столе, шрифты отображаются правильно. Если открываю в apache, то выводит иероглифы.
Не могу понять в чем проблема?!
06.06.2015 11:18:17 Сергей отвечает:
Пробовали рекомендации из статьи про кодировку? Ссылка на неё есть в этой статье.

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

Использую для работы
Мои расширения
Свежие статьи
Рекомендую
Горячо обсуждаемые
Подписка
  • Следовать в twitter:
  • Подписаться по RSS:
  • Подписаться по E-mail:
  • Следить ВКонтакте:
  • Следить на Facebook:
Пользовательское соглашение об условиях использования сайта и Политика конфиденциальности
Перепечатывание или копирование материалов сайта (текста, изображений и другого содержимого) для их публичного или коммерческого использования в сети Интернет, либо в печатных изданиях строго запрещены. При нарушении данного правила, с нашей стороны будут предприняты соответствующие меры, вплоть до судебной жалобы.
© site-on.net
Шрифт: +стандартно-