Блочная верстка | Урок 2

Дата: 16.12.2007 | Автор: Игорь Квентор | Рубрика: Верстка |

Тэги: , ,

Для написания кода удобнее пользоваться редактором PSPad. Это весьма удобная программа, которой пользуются как программисты, так и верстальщики. Рекомендую. Тем более что она бесплатная и имеет русский интерфейс.

Верстать мы будем вот такой вот симпатишный сайт о Летающих Парасенгах.

pigru.jpgНастоящий сайт Pigfly.ru - Об удаче, Счастье и Богатстве выглядит уже несколько по-иному. Мы рассмотрим лишь отвлеченный пример.

Для начала определим тип нашего документа. Любая грамотно свёрстанная страница должна в самом начале содержать так называемый 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 — для монитора only и т.д.

    Это понятно — если кто-то захочет распечатать нашу страничку, то ему вовсе ни к чему на отпечатке навигация, кнопки-картинки, рекламные баннеры и супер-красивые заголовки. Только полезная инфа. И вот для такого случая пишется отдельный лист стилей, попроще.

Следующим парным тегом будет титл — это тот текст, который появляется на самом верху браузера при открытии странички:

<title>Пиггасы | Главная</title>

Понятное дело, что туда необходимо вписать название страницы. Не Index, не default, не просто цифра 1 какая, а настоящее, хорошее название. Это также необходимо, как и название для книги. Да и поисковые роботы сильно уважают, когда в титле набран вменяемый текст.
А теперь впишем закрывающий тэг </head>. Все, со служебной инфой покончено. Обратите внимание — тэги как бы вложены друг в друга:

<head><title></title></head>

Это правило вложения должно выполняться всегда! Никаких перестановок типа:

<head><title></head></title> - НЕПРАВИЛЬНО!

Вот мы и добрались до тЕльца нашей странички, которое и обзывается соответствующим тэгом <body>. Пока давайте допишем код страницы до конца (он ещё будет впоследствии дополнен):

<body>
</body>
</html>

Сохраним документ в отдельной папке. Сохраняем как index.html. Почему именно index? Любой браузер, зайдя по адресу www.piggs.ru станет сразу искать страницу с этим названием. Устроены они так. Индексная страница для них всегда является главной, стартовой.
В следующем уроке займемся написанием листа стилей CSS для нашего сайта.

Вебсовет

1 2 3 4 5 6 7 8 9

rss Подпишитесь на RSS

Или получайте новости на ваш e-mail:

Комментарии (12) на запись “Блочная верстка | Урок 2”

  1. MuRADiN 15.02.2008 01:11

    Хотелось бы отметить по поводу последнего абзаДца, что не браузеры так устроены, а так прописано в настройках ВЕБ-сервера. :)

  2. MuRADiN 15.02.2008 01:13

    Сорри за даблпост, но не вижу кнопке редактировать свой камент) Хочу сказать огромное спасибо за статью! ;)

  3. Kventor 15.02.2008 17:51

    Спасибо за коммент! Вы правы, это конечно же функция серверов. Тут я что-т заговорился :)

  4. Наталья 06.04.2008 00:58

    Спасибо - полезное руководство!
    Если кто знает хорошую статью по созданию
    psd макета сайта напишите плз на адрес
    tamvs@yandex.ru

  5. Kventor 06.04.2008 09:34

    Наташ, вот здесь - Рисуем макет сайта - я вкратце рассказал как создать макет в PSD. Если возникнут вопросы, с удовольствием отвечу.

  6. Ведро 11.04.2008 15:38

    вот в этом фрагменте сразу две ошибки

  7. Ведро 11.04.2008 15:39

    meta http-equiv=”content-type” content=”text/html; charset=windows-1251″

  8. Kventor 11.04.2008 18:10

    Ведро, какие именно ошибки?

  9. Ведро 11.04.2008 22:09

    Простите, пожалуйста, я сделал два файла index.html и style.css и копирование вставлял указанный в Вашем тексте фрагменты кода. Но станица не отображалась. я начал искать ошибки и по незнанию подумал, что эта стока:
    meta http-equiv=”content-type” content=”text/html; charset=windows-1251″
    должна записываться так:
    meta http-equiv=”content-type” content=”text/html” charset=”windows-1251″
    В итоге понял, что был не прав.

  10. Kventor 12.04.2008 09:52

    Ничего. Ошибки случаются у всех :) Я потому и не рекомендую копировать код, а набирать его вручную. Особенно здесь. Потому что Вордпресс, на котором работает Вебсовет, автоматом заменяет прямые двойные кавычки на косые. А они в коде работать не будут.

  11. Peter 07.07.2008 05:24

    Парасёнге руляд. :) а где ссылка на постоянное ужесточение стандартов? в обзорах об IE8 этого не отражалось…

  12. Игорь Квентор 07.07.2008 10:40

    Привет, Peter. Поясните, пожалуйста, о каком обзоре идет речь? Вроде я нигде о ИЕ8 не писал еще. :)

Трэкбеки

Оставить комментарий