Создание сайта - 2: Верстка html

Шаг 3 – Верстка

Для выполнения потребуется: браузер и текстовый редактор.
В качестве текстового редактора можно использовать Блокнот, но мне удобнее пользоваться Notepad.
На этом этапе из макета необходимо получить html код странички.

3.1 – Разметка блоков

Сайт будет состоять из блоков. На рисунке сайта необходимо выполнить разметку этих блоков.

Основные блоки:
Красным обозначен главный блок.
Синим – шапка сайта (хэдэр).
Зеленым – блок меню.
Желтым – блок с содержимым сайта.
Голубым – анонсы постов.
Розовым – список рубрик.
Фиолетовым – подвал (футэр)

3.2 – Основной файл сайта####

Создайте для будущего сайта отдельную папку.
Создайте файл index.html и напишите в нем следующие строки кода:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Основы фрактальной графики</title>   
</head>

<body>
</body>
</html>

Если у вас есть желание лучше понять смысл этих строчек, очень рекомендую пост @qqc.

Подключим файл стилей:

За подробностями стилей css я опять-таки рекомендую обратиться в замечательные посты @qqc. Например, вот этот.

3.3 – Строим из блоков

Начнем с главного блока сайта. На рисунке он обозначен красным цветом.
Блок на языке разметки html обозначают тегом div.

Второй блок – шапка сайта (хэдэр):

Цвет фона для своего сайта я пока оставлю черным. Если это будет слишком мрачно, его легко можно будет заменить.
Фон задаем в файле стилей следующим образом:

Сайт уже можно увидеть. Для этого просто откройте файл index.html в браузере.
Но это будет лишь ссылка на черном фоне.

Собирать наш сайт и продолжим в следующих постах.