После того как у все инструменты готовы, о которых было все подробно расписано здесь. Теперь приступаем к созданию первой страницы.
В конце прошлой статьи, было сказано про тег DOCTYPE. Это то выражение которое характеризиует версии HTML или XHTML. Как обозначить тег DOCTYPE ? На самом деле нечего сложного нет, и проблем с этим возникать не должно. Обозначается он просто, вот так:
|
1 |
<!DOCTYPE> |
У него нет закрывающегося тега, сам же его синтаксис обозначается так:
|
1 |
<!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]"> |
Параметры
Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег <html>.
Публичность — объект является публичным или системным ресурсом, например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.
Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (ISO) И принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и — (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».
Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>.
Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.
Имя — уникальное имя документа для описания DTD.
Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).
URL — адрес документа с DTD.
Дальше идут несколько тегов, это основные теги, которые используются на любом сайте, на любой странице.
|
1 2 3 4 5 6 |
<html> <head> </head> <body> </body> </html> |
Тег <html> говорит браузеру о том что дальше идет HTML код.
Тег <head> содержит различные служебные теги, например, заголовок страницы, кодировка страницы, описание, ключевые слова, подключение всяких скриптов, файлов стилей и так далее.
В <body> находится само тело страницы. То есть все, что вы видите на странице.
Последним идет закрывающий тег <html>.
В область тега <head> вписывается заголовок страницы <title>, то есть то, что будет отображаться вместо http://mysite.local/. При записи конкретного заголовка внутри этого тега, после обновления страницы с помощью кнопки F5, заголовок появляется на вкладке.
А именно у нас получается следущее:
|
1 2 3 4 5 6 7 |
<html> <head> <title>Пример заголовка страницы</title> </head> <body> </body> </html> |
Далее прописывается метатег с атрибутом http-equiv, значение которого Content-Type. Далее content, тип содержимого идет как текстовый, формат html и charset=utf-8 (кодировка utf-8). Выглядит она так:
|
1 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
Далее идут теги «описание страницы» и «ключевые слова».
|
1 2 |
<meta name="description" content="Описание страницы"> <meta name="Keywords" content="Ключевые слова для поисковых систем"> |
К сожалению из за того что стало очень много людей желающих попасть в ТОП-10 выдачи всех поисковых систем, а точнее из за их действий, большинство поисковых систем просто пропускают этот параметр, но указывать его все же есть смысл.
Эти теги относятся к оптимизации сайта под поисковые системы, а не к его созданию. Сейчас они пустые, и смысла в них нет на данный момент. Но лучше их прописать, что бы в дальнейшем их заполнить.
Дальше нужно указать путь к CSS файлу, т.е. к тому файлу, который будет отвечать за стили. Вы указываете в теге link атрибут type со значением text и css. Указываете, что это таблица стилей, и указываете путь: что в папке styles содержится файл main.css. Выглядит это следующим образом:
|
1 |
<link rel="stylesheet" type="text/css" href="styles/main.css"> |
Эту папку нужно создать. Для этого зайдите в папку «www» и в ней создаете папку «styles». Затем в ней создайте с помощью программы Notepad++ файл main.css, так же как Вы создавали файлы «.htaccess» и «index.html». Далее внутри папки «www» создайте папку «images». В ней будут храниться изображения Вашего сайта.
В итоге должно получиться следующее:
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <title>Пример заголовка страницы</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="Описание страницы"> <meta name="Keywords" content="Ключевые слова для поисковых систем"> <link rel="stylesheet" type="text/css" href="styles/main.css"> </head> <body> </body> </html> |
В программе Notepad++ обязательно зайдите во вкладку «Опции/Настройки» и радио-кнопку переключите в положение, как показано на скриншоте:
Это нужно для того, чтобы в дальнейшем избежать проблем с кодировкой на сайте, а если точнее, то эта опция все новые документы будет кодировать в UTF-8, которую мы и используем.
Итак, во второй часте мы окончательно подготовились, к верстке сайта. А именно: установили весь необходимый софт, Денвер, либо OpenServer, установили Notepad++. Написали DOCTYPE, написали основные HTML-теги, написали заголовок, подключили таблицу стилей, которой еще пока нет, хотя Вы уже создали файл main.css.
Автор публикации
Создание, доработка сайтов, редизайн.