Пошаговая инструкция создания сайта на html коде / Разметка файла страницы сайта

Разметка файла страницы сайта

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

Откроем файл нашего сайта index.html в программе Notepad++ и сделаем первые записи разметки.

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

<!DOCTYPE html>

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

Элемент <html>

Далее всегда идет элемент <html>, который определяет начало и конец документа и состоит из пары тегов, в середине которых будет находиться все содержимое страницы сайта:

<html> ... Содержимое страницы сайта... </html>

Повторю еще раз - все, что мы будем писать дальше, будет находиться внутри этой пары тегов, которые определяют начало и конец записей страницы сайта (документа):

<!DOCTYPE html>
<html><!-- Начало документа (это комментарий) -->
...Содержимое страницы сайта...
</html><!-- Конец документа (это комментарий) -->

Элемент <html> всегда содержит в себе только два других элемента HTML, следующих друг за другом. Это элемент <head> и элемент <body>.

Элемент <head>

Первый элемент - <head>, состоит из пары тегов, содержимое которых не будут отображаться на сайте, но в них находиться важная ознакомительная информация, описывающая страницу сайта для поисковых интернет-роботов:

<head> <!-- ...Информация для поисковых роботов... --> </head>

Подробнее об элементе <head> расскажу позже в отдельной статье, когда в этом будет необходимость, а пока достаточно просто о нем знать.

Элемент <body>

Второй элемент - <body>, состоит из пары тегов, содержимое которых уже выводится на экран, в виде оформленной страницы сайта.

В учебнике по HTML, содержимое тегов <body> называется телом документа:

<body> <!-- ...Видимая часть страницы сайта... --> </body>


В результате разметки, файл страницы сайта index.html, должен выглядеть вот так:

Вы можете сами набирать текст на клавиатуре, а можете копировать готовые конструкции тегов выделенные голубым цветом и вставлять их в свой файл.

Не забывайте всегда сохранять файл заново, после внесенных в него изменений.


Сделаем небольшую проверку и посмотрим, нормально ли будет отображаться на экране текст. Для этого, внутри пары тегов <body> напишем произвольную фразу, например, такую:

<body>Добро пожаловать на мой сайт!</body>

Затем в адресном окошке браузера наберем название нашего сайта (название папки сайта), в моем случае это "proba.ru", и нажимаем "Enter".

Если в верхнем левом углу экрана появится наша фраза, - то все в порядке, все идет замечательно:

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

Еще может случиться, что вместо надписи на экране появятся вот такие непонятные символы:

В этом случае поробуйте поменять кодировку нашего файла index.html с UTF-8 на UTF-8 с BOM. Для этого заходим в меню "Кодировки" программы Notepad++, и в открывшимся окне отмечаем кодировку UTF-8 с BOM.

Сохраняем файл с новой кодировкой, и проверяем что теперь получилось на экране обновив страницу сайта с помощью круговой стрелки в левом верхнем углу экрана или нажатием клавиш Ctrl+F5.

Если теперь с выводом русского текста на экран все нормально, тогда в локальном хостинге Денвера работаем дальше с кодировкой файлов UTF-8 с BOM. И если в последствии у вас вместо русского текста вдруг появятся непонятные символы, имейте в виду, что дело в кодировке, которую надо поменять либо на UTF-8 без BOM, либо на UTF-8 с BOM.

Следующий шаг - Видимая часть сайта