Итак, продолжим. Для написания кода удобнее пользоваться WordPad-ом, потому что у него неограничено число шагов назад (если нужно что-то исправить), в то время как у Блокнота есть лишь один такой шаг.
Для начала определим тип нашего документа. Любая грамотно свёрстанная страница должна в самом начале содержать так называемый DOCTYPE. Нужен он не для форсу бандитского, а для всевозможных устройств вывода информации и браузеров в том числе. Пока что все ныне существующие браузеры прекрасно обходятся и без указания доктипа. Но уже грядут те времена, когда страница сайта, сразу начинающаяся с тэга <html> просто не будет прочитана, потому как стандарты становятся жесче.
Мы определим нашу страничку в соответствии с самым крутым и строгим на данный момент доктипом под названием Strict 1.0.
Переключаемся в английскую раскладку и неспешно записываем следующие пару строк:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Прошу обратить внимание: как я уже говорил, требования здесь весьма строгие - все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем / перед закрывающей угловой скобкой. Но вот ведь сам доктип тоже выглядит как тэг! Почему же у него нет этого пробела со слэшем? А просто! Захотелось так разработчикам сих строгих правил. Но это единственный случай, где правило не работает.
Далее мы впишем ещё одну хитрую строку:
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
Ну, раз тут появилось слово lang и ru, то ежу понятно, что это указание на езыг документа. Не путать с кодировкой! Её мы укажем позднее. В этой же строке, в общем-то, и начинается уже код самой страницы с тэга <html>
Следующий тэг <head>. В нём содержится всякая служебная информация: название страницы (то, что входит в титл), кодировка, ключевые слова для поисковых роботов, описание страницы и т.п. Вся эта инфа записана в служебных тэгах meta, которые также не отображаются на странице в браузере.
Мы запишем на нашей страничке следующую информацию:
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="description" content="Сайт о поросенках-летунах и счастливой летучей жизни." />
<meta name="keywords" content="летать, свин-летун, пиггсы, полёты, лёччики, пилоты." />
<link rel="stylesheet" href="style.css" type="text/css" />
Поясним:
1. Первый мета-тэг показывает на кодировку сайта. В рунете желательно пользовать всетки виндовз-1251, чтобы случайно у Васи Пяткина в его IE версии 3.0 не повылезали вместо красивого и грамотного текста всякие кракозябры.
2. Второй мета-тэг - это краткое описание сайта. именно эта строка первой покажется в результатах поиска яндекса или рамблера, если они ещё нас найдут.
3. В третьем мета-тэге ключевые слова для поисковиков. Объяснять не буду зачем это нужно, думаю и так ясно.
4. И наконец последняя строка - это не что иное как ссылка на наш лист стилей CSS, который мы создадим чуть позже. Про него скажу лишь вот что: по умолчанию наш лист стилей могут использовать любые устройства вывода инфы будь то экран монитора, принтер, либо телетайп какой-нить шпиёнский. Но если мы хотим указать для какого устройства конкретно предназначена страница, то после атрибута type со значением text/сss должны будем указать дополнительный атрибут media со значением print - для принтера, hendheld - для "наладонника", screen - для монитора только и т.д. Это понятно - если кто-то захочет распечатать нашу страничку, то ему вовсе ни к чему на отпечатке навигация, кнопки-картинки, рекламные баннеры и супер-красивые заголовки - только инфа. И вот для такого случая пишется отдельный лист стилей, попроще.
Следующим парным тегом будет титла - это тот текст, который появляется на самом верху браузера при открытии странички:
<title>Пиггасы | Главная</title>
Понятное дело, что туда необходимо вписать название страницы. Не Index, не default, не просто цифра 1 какая, а настоящее, хорошее название. Это также необходимо, как и название для книги. Да и поисковые роботы сильно уважают, когда в титле набран вменяемый текст.
А теперь впишем закрывающий тэг </head>. Все, со служебной инфой покончено. Обратите внимание - тэги как бы вложены друг в друга:
<head><title></title></head>
Это правило вложения должно выполняться всегда! Никаких перестановок типа:
<head><title></head></title> - НЕПРАВИЛЬНО!
Вот мы и добрались до тЕльца нашей странички, которое и обзывается соответствующим тэгом <body>. Пока давайте допишем код страницы до конца (он ещё будет впоследствии дополнен):
<body>
</body>
</html>
Сохраним документ в отдельной папке. Сохраняем следующим образом:
Нажимаем Файл - Сохранить как, в строке Тип файла указываем Текстовый документ, в строке Имя файла пишем полностью имя с расширением index.html. Почему именно index? Любой браузер, зайдя по адресу www.пиггс.ру станет сразу искать страницу с этим названием. Устроены они так. Индексная страница для них всегда является главной, стартовой.
В следующем уроке начнем писать для нашего сайта лист стилей css.
Силящийся - да асилит! :)
Websovet - Полезные советы
пятница, 15 июня 2007 г.
Подписаться на:
Комментарии к сообщению (Atom)
0 коммент.:
Отправить комментарий