Создание HTML-сайта: Работа с тегом head. Создание первой html-страницы.

Рубрикатор статьи

Здравствуйте, уважаемые друзья, блога sdelaemblog. Сегодня продолжим изучение html-кода. И наконец-таки приступим к созданию HTML-страниц сайта. Сегодня еще немного технической информации и в следующих статьях приступим непосредственно к созданию сайта. В прошлой статье, о структуре HTML-кода, мы говорили об обязательных тегах, которые должны быть использованы в html-документе. И один из таких тегов, был тег head, который отвечает за «техническую» часть html-документа. Как мы помним, содержимое данного тега не выводится на страницу, за исключением тега title, который назначает заголовок страницы. И его можно увидеть, например, во вкладке браузера.

Создание HTML-сайта: Работа с тегом head. Создание первой html-страницы.

Сегодня мы попробуем разобраться, что нужно писать между тегами head и для чего? И в завершении, чтобы не было совсем скучно, выведем какую-нибудь информацию в «теле» документа.

Итак, для начала обзаведемся всем нужным. Что нам сегодня понадобится? Для начала необходимо подготовить папку, то есть создать ее в любом месте на компьютере. И назвать ее так, чтобы нам было понятно, что содержит данная папка. Я, например, назову папку html-site и расположу ее на рабочем столе. Чтобы не потерять. :-)

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

И второе, что нам понадобится, для создания, это текстовый редактор. Можно использовать стандартный блокнот, он для этого подойдет, но я предпочитаю, и вам рекомендую использовать текстовый редактор NotePad++. В нем работать будет гораздо удобнее и проще. Тем более, если вы новичок.

Теперь, перейдем к ответам на обозначенные вопросы в начале статьи.

Что нужно писать между тегами head и зачем?

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

Теперь открываем файл в текстовом редакторе. На данный момент это пустой файл в формате txt. Давайте исправим это недоразумение.

Для начала возвращаемся к истокам. И в первой строке документа указываем необходимый DOCTYPE. Затем, прописываем все обязательные теги, о которых мы говорили в статье о структуре html-документа. У меня в итоге получился такой код:

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
 <head>
 <title>Заголовок документа</title>
 </head>
 <body>
 </body>
</html>

У вас DOCTYPE может быть другим, в зависимости от выбранного.

Теперь, чтобы было удобней. Необходимо поменять синтакис документа, при использовании NotePad. Для этого, в верхнем меню выбираем «Файл», затем «Сохранить как», и в появившемся окне, в графе «Тип файла», необходимо выбрать «Hyper Text Markup Language file». И нажать на кнопку «Сохранить». После чего, наш документ становится файлом формата html.

Да, при этом текстовый документ в папке может остаться. Его можно удалить, так как он нам больше не нужен.

Создание HTML-сайта: Работа с тегом head.

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

Для начала, предлагаю изменить заголовок документа. Для этого, пишем нужное словосочетание между тегами title. Например, я напишу: «Главная страница HTML-сайта».

Теперь, чтобы ускорить процесс, я выложу готовый код. А затем расскажу что для чего нужно.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
 <head>
 <title>Главная страница HTML-сайта</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta name="description" content="Описание" />
 <meta name="keywords" content="Ключевые слова" />
 <meta name = "robots" content = "index,follow" />
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 </head>
 <body>
 </body>
</html>

Итак, теперь по порядку:

[checklist]

  • 1. Тег title — уже знаем, что это и зачем.
  • 2. <meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> — Это мета тег, который определяет тип документа и его кодировку, для браузера. В данной строке указано, что используется тип документа — HTML. И его кодировка - UTF-8, что означает, что браузер должен распознать символы, как 8-битный Юникод. Также, кодировка может быть другой - windows-1251. Данные кодировки используются для вывода знаков в виде кириллицы. Если данная строка не указана, то браузер попытается сам определить кодировку, что иногда может привести к неправильному отображению символов, например, в виде различных непонятных знаков (кракозябр). В данном случае выбрана кодировка Юникод, так как она более универсальна и удобна.
  • 3. description — Мета тег description, предназначен, для описания страниц. Данное описание также не присутствует в видимой части страницы и необходимо, для поисковых систем. Которые в свою очередь могут его использовать, для формирования сниппета поисковой выдачи. Также, актуален в сфере SEO. Данный тег необязателен и используется по желанию.
  • 4. keywords — Также предназначен, для поисковых систем. Используется, для указания ключевых слов на странице. И конечно же, используется SEO-мастерами, в продвижении сайта. Тег, как и предыдущий необязателен. Но использования данных двух тегов, может напрямую повлиять на занимаемые позиции в поисковой выдаче сайтом.
  • 5. robots — Еще один мета тег, с которым стоит познакомиться, но использовать также необязательно. Данный тег предназначен, для поисковых роботов. Указывает, какие страницы индексировать, а какие нет. Кроме того, указывает, как относиться к ссылкам расположенным на странице. Данный тег имеет четыре значения:
  • index,follow — означает, что страница должна быть проиндексирована, а также следует перейти по всем ссылкам на странице.
  • noindex,follow — указывает поисковому роботу, что страницу не нужно индексировать, но при этом следует перейти по всем ссылкам.
  • index,nofollow — индексировать страницу, но по ссылкам не переходить.
  • noindex,nofollow — не индексировать страницу и не переходить по ссылкам.
  • 6. <link rel=»stylesheet» href=»style.css» type=»text/css» media=»screen» /> — Данная строка говорит браузеру о том, что есть документ описания стилей CSS, адрес которого указан в атрибуте href. Кроме того, указан атрибут, определяющий, на каком устройстве должны быть применены стили данного файла. В данном случае указано, что документ предназначен, для отображения на мониторах компьютеров. Если не указан, принимается по умолчанию. Для использования одинаковых стилей на всех устройствах, можно указать вместо media=»screen»media=»all».

[/checklist]

Теперь, я надеюсь, мы поняли, что желательно указывать между тегами head и зачем?

Создание первой html-страницы.

Сейчас, если мы скопируем данный код и вставим в наш html-документ. Сохраним его и откроем в веб-браузере — будет отображена пустая страница. И чтобы увидеть уже хоть какой-то результат на этом этапе, я предлагаю, написать между тегами body что-нибудь. Что не имеет никакого значения. Для вывода текста воспользуемся одним из тегов заголовка. Например, первого уровня. Таким образом, код между тегами body должен выглядеть так:

1
<h1>Какой-то текст</h1>

После того, как текст написан, сохраняем документ. И открываем его в браузере. И на этом этапе мы сразу можем столкнуться с проблемой. Вместо текста отображаются какие-то символы, например, вопросительные знаки. Почему же так получилось? Все очень просто. Мы просто не преобразовали наш документ в необходимую кодировку. Возвращаемся в текстовый редактор. В верхнем меню выбираем «Кодировки» и в выпавшем списке выбираем пункт «Преобразовать в UTF-8″. После чего, сохраняем файл и обновляем страницу. Если все сделано правильно, текст должен стать читаемым.

Что еще мы можем сделать? Чтобы наша первая страничка стала немного красивее. Мы можем, например, залить цветом фон страницы и покрасить заголовок в какой-нибудь цвет. И для этого, мы будем использовать каскадную таблицу стилей. Между тегами head, чуть раньше мы уже подключили файл со стилями, но его еще нет. Значит, его необходимо создать.

Для этого в NotePad нажимаем «Файл» и выбираем «Новый» Или же просто нажимаем сочетание клавиш Ctrl+N. После чего прописываем стили CSS. Для примера сделаем фон, покрасим текст заголовка и расположим его посередине страницы и на этом закончим. После указания стилей, не забываем преобразовать документ в UTF-8. Выбираем «Сохранить как», называем документ style и сохраняем в формате CSS.

Создание первой html-страницы.

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

1
2
3
4
5
6
7
body{
background: #5b84ee;
}
h1{
color: #ffffff;
text-align: center;
}

Да, кстати, рекомендую все предлагаемые коды не копировать и вставлять, а прописывать самостоятельно. Так будет намного полезней, нежели просто копировать.

Итак, что мы имеем? А имеем мы заполненную техническую часть документа, что находится между тегами head. А также первую html-страницу, созданную самостоятельно. Да, в ней нет ничего особенного, но первый шаг к созданию HTML-сайта сделан. А в следующий раз мы продолжим, и приступим к созданию главной страницы сайта. Подписывайтесь, чтобы не пропустить.

У меня на этом все. Надеюсь, данная маленькая :mrgreen: статья, поможет вам разобраться, что писать между тегами head, а что нет. И конечно же, надеюсь, что у вас получилось создать первую html-страницу. Если же нет, попробуйте еще раз и все получится.

Удачи!

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

VN:F [1.9.22_1171]
Оценка статьи: 9.7/10 (3 голосов)
Автор: Михаил Веб Дата публикации: 06.06.2013