Як створити HTML сторінку (покроково)

Крок №1
Створюємо кістяк HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Название страницы</title>

</head>
<body>

</body>
</html>

Крок №2
Створюємо інший файл з назвою style.css, який буде розташовано поряд з файлом index.html

Крок №3
Додаємо всередину <head> </head> (можна під тегом <title>) наступний код:

таким чином, <head> буде виглядати так:

<head>
<meta charset="UTF-8">
<title>Название страницы</title>
<link rel="stylesheet" href="style.css">
</head>

Крок №4
Додаємо теги <div></div> всередину <body> </body> за допомо яких ми робимо панелі, меню, колонки, заголовок тощо. Одразу прописуємо класи CSS для цих блоків
Наприклад:

<div class="tilo">
<div class="shapka">
</div>
<div class="horizont-menu">
</div>
<div class="publikacia">
</div>
<div class="podval">
</div>
</div>

Крок №5
Додаємо створені класи до CSS файлу.

.tilo{ background-color: #BEBEBE; width: 1005px;
}
.shapka{background-color: #A2CD5A; background-image: url(http://www.smilebooks.ru/i/pDTQg6j3.jpg); width: 970px; height: 150px; margin: auto;
}
.horizont-menu{background-color: #DDA0DD; width: 970px; height: 40px; margin: auto;
}
.publikacia{background-color: #7A67EE; width: 930px; min-height: 400px; margin: auto; padding: 20px;
}
.podval{background-color: #FFEC8B; width: 970px; height: 80px; margin: auto; margin-bottom: 10px;
}

Додаємо властивості та значення до класів: наприклад, до блоку tilo можна додати властивість margin: -10px auto -10px auto; за допомогою якої можна виставити блок тіла по центру сторінки. Також можна додати багато інших значень. Матеріали, до заняття у загальній теці та Google пошук допоможе знайти необхідні.

Крок №6
Додаємо публікацію, меню, заголовок.

Приклад сторінок:
http://goo.gl/mPcxob