HTML и CSS - революция в мире web-дизайна!

- управление отображением множества документов с помощью каскадных таблиц стилей

- Более точный контроль над внешним видом web-документов

- Различные представления для разных носителей информации

- Сложная и проработанная техника дизайна

Главная / Верстка шаблонов / Сайт визитка - размечаем основные блоки и элементы в хейдере

Сайт визитка - оформляем html документ

Верстать будем частично используя стандарты html 5 - современные браузеры отлично понимают разметку этого стандарта и даже ИЕ 7 не подкидывает особых сюрпризов.

На итоговый результат можно посмотреть, перейдя по ссылке ниже.

Посмотреть Demo

Внутри папки synchronous создаем еще одну директорию и назовем ее html. Открываем Notepad++, и набираем следующий код:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8" />
		<title>Главная</title>
	</head>
	<body>
	</body>
</html>

Должно получиться что то подобное:

Верстаем скелет сайта визитки

В верхнем меню блокнота выбираем Кодировка/Преобразовать в UTF-8 без BOM. Углубляться в тему кодировок в рамках этой статьи не будем, скажу лишь одно - для русскоязычных сайтов лучше использовать именно ее. Далее, в верхнем меню выбираем Файл/Сохранить как... (или кликаем по изображению дискетки в панели чуть ниже). Появится диалоговое окно - в поле Имя файла пишем index.html, выбираем созданную ранее папку html и кликаем по кнопке Сохранить.

Немного подробнее рассмотрим код.

Первоя строка - <!DOCTYPE html>. Данный доктайп сообщит браузеру о том, что наш документ размечен с помощью языка html 5.

Вторая <html lang="ru"> и последняя </html> строки - тэг html. По стандарту html 5 в открывающем теге html мы указываем атрибут lang="ru".

Третья и шестая строки - <head></head> - служебный раздел сайта.

Четвертая строка <meta charset="utf-8" /> - тэг meta с атрибутом charset="utf-8" сообщает браузеру, какую кодировку использовать на сайте.

Пятая строка - <title> </title> - название (заголовок) страницы.

Седьмая и девятая строки - <body> </body> - секция для информации, которая должна быть показана пользователю.

Создание любого html документа начинается с подобной разметки. Конечно, существуют вариации, но пока их рассматривать не будем. Достаточно знать, что если Ваш html документ будет оформлен подобным образом, он будет правильно распознан всеми современными браузерами.

Ну и напоследок "ложка дегтя". Если сейчас открыть файл в ИЕ, то увидим, что заголовок страницы, мягко говоря, не читаем. Происходит это потому, что ИЕ игнорирует преобразование, которое было выполнено в Notepad++. Побороть эту проблему не сложно. Откройте index.html в стандартном блокноте Window и пере сохраните его в нужной кодировке (UTF-8 без BOM).

В следующей статье приступим к разметке видимой пользователю части страницы.