howto4all.net

В помощь начинающему WEB-мастеру

делаем шаблон 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, стили и картинки соответственно.

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

HTML шаблон
Теперь уже не будете по сто раз делать одно и тоже. Также можно найти программку для верстки и этот шаблон использовать там. Сам я пользуюсь вот этой :)

Comments

Leave a Reply





JSantispam

В Вашем браузере отключена поддержка JavaScript! Для корректной работы Вам необходимо включить поддержку JavaScript и обновить данную страницу.
  • Вход

  • Управление подпиской

  • Колличество подписанных

    7
  •  

    Октябрь 2009
    Пн Вт Ср Чт Пт Сб Вс
        Дек »
     1234
    567891011
    12131415161718
    19202122232425
    262728293031