Некоторые ортодоксы от веб-строительства возможно уже копят какашки, чтобы закидать меня ими, ибо прежде чем писать код, нужно вначале создать макет сайта в том же Фотошопе. Моя имха на сей счет такова: Если вы намереваетесь создать нечто Словами Невыразимое И Пуще Блеска Солнца Афигенно-Креативное, то да, рисуйте прежде это Невыразимое в виде общей картины, а потом кромсайте на кусочки. Но мы на такое дело не замахиваемся. Простой сайт можно и даже нужно творить по-ходу.
Есть уже целая масса отработанных до мелочей шаблонных подходов. Это и верстка в две, три колонки, "контейнерная" или "резиновая", и менюшка, выполненная либо по горизонтали, либо по вертикали. Ничего сверх естественного нет. А потому собирать сайт можно как конструктор: нашел интересную делать — пристроил на место, поглядел, не понравилось — прицепил другое.
Не нужно быть семи пядей во лбе, чтобы удерживать визуально общую картину. Если что-то где-то вылезло или недостает, то всегда можно оперативно поправить. И блочная верстка как раз весьма этому способствует. Поэтому я никогда не рисую предварительный макет. Ну, мож на листке бумаги разве, да и то на стадии обдумывания Идеи и будущих разделов сайта. Зачастую я наоборот отталкиваюсь от разметки и уже под нее рисую картинки с заведомо заданными размерами.
Та-да-а-ам!.... А теперь запускаем наш PSPad и создаем в нем новый документ. В выпавшем списке выбираем тип документа HTML и получаем уже готовый кусочек кода:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
</body>
</html>
Давайте его разберем. Самая первая строка с DOCTYPE — очень важная штука. Как и любая азбука, HTML имеет свои правила. Для чего это нужно? Как я уже и упоминал ранее, различные браузеры по разному отображают разметку страниц. Вот чтобы этого бардака было как можно меньше и были придуманы некие стандарты. Есть построже, есть полиберальнее. В нашем случае как раз второй вариант.
Далее идет тэг html. Что такое тэг? Проще говоря, это элемент языка. Как, например, в случае с азбукой таким элементов будет буква. Другими словами, тэг — это буква языка HTML. Усвоилось? Ну, тогда поехали дальше.
Тэг html означает веб-страницу вообще. То есть, он говорит браузеру: "Щас, приятель, пойдет обычная html-страница, так что ты не выпендривайся и показывай ее как надо!" Если посмотрите в конец представленного кода, то увидите второй такой же тэг, но с косой чертой перед ним. Это так называемый "закрывающий" тэг, а косая черта (слэш) — явно это показывает. Большинство тэгов имеют такие вот закрывающие пары, и далее расскажу для чего это надо.
Следующий тэг head — "голова". Вообще любая html-страница разбита на две функциональные части: голова (head) и тушка (body). В голове в основном пишется то, что на самой странице не видно. То есть всякая служебная информация для браузера. Чтобы он знал, подлец, какой мы желаем использовать язык, как называется наша страница, описание для нее, ключевые слова и пр. Например, сейчас у нас там как раз обозначены некие мета-тэги (meta). Первый из них показывает выбранный нами язык страницы — windows-1250 (кстати, исправьте сразу на 1251, чтобы не получились кракозябры), а второй есть рекламная хитрость хозяев нашего замечательного редактора кода PSPad, и его мы нафик удалим вообще. :) В результате у нас должно получиться вот так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title></title>
</head>
<body>
</body>
</html>
Тэги <title></title> не менее, а то и более важная часть, чем даже DOCTYPE. Это заголовок страницы. Не тот, что мы видем в тексте на экране, а тот, что высвечивается на самой верхушке браузера. Вот как, например, данный блог у вас обзывается там "Делаем Свой Первый Сайт - (тут имя браузера, которым вы смотрите данную страницу)". Заголовки такого рода очень важны для поисковых машин типо Яндекса или Гугля. Именно они будут в поисковой выдаче. Так что советую обратить на это дело особое внимание.
Другое дело тушка (body). Это уже как раз то, что мы предъявляем посетителям. Именно тут мы станем складывать текст в абзацы, добавлять к ним картинки, ссылки всякоразные и т.д. Соответственно, все это добро будет у нас расположено между тэгами <body> - </body>.
Обратите внимание: у нас "голова" и "тушка" вложены в общий тэг html. Причем они не пересекаются. То есть нельзя сделать вот такую запись:
<html>
<head>
<body>
</head>
</body>
</html>
Это будет ашипкой! Тэги head и body должны(!) поочередно открываться и закрываться. Другое дело, если мы хотим вложить один тэг в другой. Как, например, у нас вложены и head и body в общий тэг html. Иначе говоря, соблюдайте принцип матрешки. Ибо нельзя приторкать бюст самой мелкой на торс самой крупной.
А теперь давайте-ка сохраним это дело в виде Самаглавной страницы сайта, а именно под названием index.html. Почему index.html? Дело в том, что когда вы в своем браузере набираете нечто вроде: www.shtirlets.com, то он (браузер) моментально кинется искать на удаленном сервере именно эту страницу, потому как по-умолчанию они все это делают.
Рекомендую сразу для нашего сайта завести папку, куда и будем складывать страницы, картинки к ним и еще кой чего. Но об кой-чем в следующий раз.
