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

Блочная верстка сайта

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

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

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

pigru.jpg

Что такое тип документа DOCTYPE

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

Тэг head и метаданные сайта

Следующий тэг <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>Пиггасы | Главная</title>

Понятное дело, что туда необходимо вписать название страницы. Не Index, не default, не просто цифра 1 какая, а настоящее, хорошее название. Это также необходимо, как и название для книги. Да и поисковые роботы сильно уважают, когда в титле набран вменяемый текст.

А теперь впишем закрывающий тэг </head>. Все, со служебной инфой покончено. Обратите внимание — тэги как бы вложены друг в друга:

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

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

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

Тэг body

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

<body>
</body>
</html>

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

Окей! На сегодня хватит. В следующем уроке займемся написанием листа стилей CSS для нашего сайта.

Продолжение следует. Оставайтесь на связи! Если что-то непонятно, спрашивайте в комментариях.

Блочная верстка сайта | Урок 1
Блочная верстка сайта | Урок 2
Блочная верстка сайта | Урок 3
Блочная верстка сайта | Урок 4
Блочная верстка сайта | Урок 5
Блочная верстка сайта | Урок 6
Блочная верстка сайта | Урок 7
Блочная верстка сайта | Урок 8
Блочная верстка сайта | Урок 9

16.12.2007

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

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