Как создать веб-страницу | Теги DOCTYPE, html, head и body
"Все аспекты самостоятельного создания и продвижения сайтов
от практика с многолетним опытом." — блог
info@site-on.net
от практика с многолетним опытом." — блог
info@site-on.net
Здравствуйте уважаемые читатели блога 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>вместе с его описанием. Без этого тега, между прочим, наша страница тоже работала бы, НО! Но писать его обязательно, так как он служит указателем для браузеров: какой разметкой и её версией мы собираемся дальше пользоваться (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>, который обязателен к закрытию (хотя современные браузеры могут закрыть его и без вас). Обращаю ваше внимание, что при использовании XHTML в теге
<html>обязательно должна присутствовать ссылка на спецификацию xhtml и тег в конечном варианте выглядит как
<html xmlns="http://www.w3.org/1999/xhtml">
«Голова» нашего сайта начинается тегом head. Информация, находящаяся в голове нашей странички, также как и предыдущие её части не видны нашим посетителям (за исключением тега title). В голове указывается мета-информация для поисковых систем и браузеров, а также подключаются (если есть) скрипты и стили нашего сайта. Однако самым важным элементом в голове сайта (особенно для поисковой оптимизации) является тег title, в котором записывается название нашей страницы. Это же название выводится в выдаче поисковых систем (для каждой страницы должно быть разным!).
Внимание! Обязательно указывайте мета-тег кодировки , как я сделал в примере выше
<meta http-equiv="content-type" content="text/html; charset=utf-8" />Более подробно о том, как правильно задать кодировку страницы читайте по ссылке.
Далее наконец-то открывается тег body, который олицетворяет начало «тела» - основной части нашей страницы. Вся информация, которая записана внутри этого тега, создана для посетителей. Именно здесь мы и будем разворачивать наши действия, по написанию правильного и «чистого» макета для нашего сайта. В следующей статье мы на практике разберём самые элементарные основы CSS – каскадных таблиц стилей.
А на сегодня всё, спасибо за то, что уделили своё внимание. Если у вас возникли какие-либо вопросы – пишите в комментариях, я обязательно отвечу.
Заметки:
1) Тег head и тег body могут встречаться только по одному разу на странице: у сайта, как и у человека, может быть только одна голова и одно туловище. Естественно теги !DOCTYPE, html и title – тоже употребляются единожды на странице.
2) Теги html, head, body, title – обязательно должны иметь закрывающий тег!
3) Не ставьте enter’ов (переносов строки ) и пробелов (табуляций) в самом начале документа, пишите тег <!DOCTYPE> начиная с самого первого символа в вашем текстовом документе.
Пожалуйста, прокомментируйте, как Вам моя статья?