делаем шаблон HTML документа
Posted on | октября 13, 2009 | No Comments
Для упрощения работы можно приготовить себе шаблон. Если Вы только начинаете, это не так заметно, а когда нужно создавать чуть ли не каждый день какой нибудь документ, там для эксперимента, или очередного макета, то заново создавать его ой как надоедает. Так как мы народ ленивый, лучше сделать один раз, а потом юзать,так сказать, по накатанной. Я сейчас
покажу выложу весь код, а потом разжую что где:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="www.bergsoftplus.com" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/global.css" type="text/css" media="screen" />
<title>zagotovko</title>
</head>
<body>
</body>
</html>
И так по порядку,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
что такое DOCTYPE , я напишу отдельную статью, сейчас скажу кратко, без него никак. Грубо говоря, он показывает браузеру, как правильно надо обрабатывать HTML код. Особенно сильно реагирует Internet Explorer, наш «любимый браурез»
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
это кодировка текста(контента) на сайте я ставлю utf-8. Здесь есть подробнее
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="www.bergsoftplus.com" />
таак, по порядку, 1 — описание сайта, 2 — ключевые слова, 3 — автор. Ну говорят, что для поисковиков это уже не важно. Но я все равно, по старинке еще добавляю, кто его знает как потом все это перекрутится.
<link rel="shortcut icon" href="favicon.ico">
иконка которая будет отображаться на панели вверху, как сделать себе иконку? Вам сюда
<link rel="stylesheet" href="css/global.css" type="text/css" media="screen" />
это я подключил файл с СSS стилями. Называется он global.css и находиться он в папке /css относительно файла index.htm. Как по другому еще можно подключить CSS-стили напишу позже.(Ну просто Наполеоновские планы
)
<title>zagotovko</title>
это то что будет отображаться вверху в браузере(заголовок). Совет по SEO-оптимизации: Очень полезно для индексирования в google, чтобы для каждой странички был свой title (заголовок). Еще лучше внятные заголовки с ключевыми словами.
<html>
<head></head>
<body></body>
</html>
как Вы поняли это обязательные теги, когторые должны присутствовать всегда (!)
<body></body>
в этом теге уже будет находиться сам макет….
И так как все это будет выглядеть вместе.
Создаю папку проекта(например zagotovka), в ней у меня по умолчанию папки CSS и IMAGES, стили и картинки соответственно.

Вот такая структура, _zagotovka это папка проекта, все файлы должны находиться в ней. Стили я выношу в отдельный файл тут он называется global.css пока это просто пустой файл. Ну и папка для картинок
Потом правда это может перерасти вот в такое,

Теперь уже не будете по сто раз делать одно и тоже. Также можно найти программку для верстки и этот шаблон использовать там. Сам я пользуюсь вот этой
Tags: css > description > DOCTYPE > html > keywords > meta > title > utf-8 > верстка > ключевые слова > описание сайта > разное > шаблон
Comments
Leave a Reply