Создание сайта. Блочная верстка сайта | Урок 2
Продолжение цикла статей «Создание сайта. Блочная верстка» и о том, как создать свой сайт самостоятельно. Урок 2. Начинаем верстать небольшой сайт.
Для написания кода рекомендую пользоваться специальным редактором. Например, PSPad. Это весьма удобная программа, которой пользуются как программисты, так и верстальщики. Она бесплатная и имеет русскоязычный интерфейс.
Верстать мы будем вот такой вот симпатичный сайт о Летающих Поросенках.
Для начала определим тип нашего документа.
Что такое тип документа 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">
Прошу обратить внимание: как я уже говорил, требования здесь весьма строгие — все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем / перед закрывающей угловой скобкой.
Но вот ведь сам доктайп тоже выглядит как тэг! Почему же у него нет этого пробела со слэшем? А просто! Захотелось так разработчикам строгих правил. Но это единственный случай, где правило не работает.
Обновлено (2018 г): т.к. статья впервые была опубликована в 2005 году, то доктайп Strict 1.0 уже морально устарел, хотя и используется многими сайтами до сих пор. Рекомендую сразу писать код в HTML5, где данная строка указывается просто и лаконично:
<!DOCTYPE html>
Подробнее про HTML5 читайте здесь.
Далее мы впишем ещё одну хитрую строку:
<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" />
Поясним:
- Первый мета-тэг content-type показывает на кодировку сайта. В рунете желательно использовать
все-таки windows-1251, чтобы случайно у Васи Пяткина в его IE версии 3.0 не повылезали вместо красивого и грамотного текста всякие кракозябры.Устарело! На сегодняшний день (2018 год) рулит utf-8, вот и его и используйте. - Второй мета-тэг description — это краткое описание сайта. Именно эта строка первой покажется в результатах поиска яндекса или рамблера, если они ещё нас найдут.
- В третьем мета-тэге keywords — ключевые слова для поисковиков. Объяснять не буду зачем это нужно, думаю и так ясно.
- И наконец последняя строка — это не что иное как ссылка на наш файл стилей CSS, который мы создадим чуть позже.
Про файл стилей скажу пока лишь вот что: по умолчанию его могут использовать любые устройства вывода инфы, будь то экран монитора, принтер, либо телетайп какой-нить шпиёнский.
Но если мы хотим указать для какого конкретно устройства предназначена страница, то после атрибута type со значением text/сss должны будем указать дополнительный атрибут media со значениями:
print — для принтера
hendheld — для «наладонника»
screen — для монитора only и т.д.
Это понятно — если кто-то захочет распечатать нашу страничку, то ему вовсе ни к чему на отпечатке навигация, кнопки-картинки, рекламные баннеры и супер-красивые заголовки. Только полезная инфа. И вот для такого случая пишется отдельный файл стилей, попроще.
Тэг title
Следующим парным тегом будет 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
Доброго дня!
По вашему 2 уроку я правыльно все напысав
Мой первый сайт!
Богуслав, код в комментариях не отображается.
Мой первый сайт!
А как можно отправить вам?
Богуслав, смотря для чего :) Вы хотите просто показать вашу работу или есть какие-то вопросы по верстке?
Мне хотелось бы научиться програмировать Html,Css,java ,заробатывать деньги дома и учить дальше языки програмированые бо стройка замахала.
И выучить японский и уехать в Японию.
:) Понимаю. Что ж, стремление похвальное. Учитесь, возможно у вас что-то и получится.