Созданная веб-страница в прошлом уроке отличалась минимализмом - в ней присутствовал только тег <html>, объявляющий данный документ html-документом. Веб-страница отличается несколько более сложной структурой, которую мы и рассмотрим. Изучив данную статью, вы сможете без труда делать заготовки веб-страниц.
Структура HTML-документа
Изучите внимательно данный пример html-документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML-документ</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta name="description" content="Здесь находится описание документа">
<meta name="keywords" content="Ключевые слова">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<style type="text/css">
h1 { color: red; }
</style>
<script type="text/javascript">
alert ('Hello World!')
</script>
</head>
<body>
Контент...
</body>
</html>
Рассмотрим все это подробнее.
<!DOCTYPE>
Доктайп всегда стоит на первой строчке и служит для определения типа html-документа (DTD - Definite Type Definition). Доктайп бывает трех типов - Strict, Transitional и Frameset. Тип Strict указывает, что в документе используется строгий синтаксис, Transitional означает переходный тип, а Frameset применяется, если ваш документ содержит фреймы.
Полностью доктайп пишется так:
Строгий синтаксис:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
Переходный синтаксис:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/HTML4/loose.dtd">
Документ с фреймами:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/HTML4/frameset.dtd">
<html>
Как уже говорилось в "Основах HTML", тег <html> служит для указания того, что содержимое является документом HTML. Все остальные теги вложены между <html> и </html>.
<head>
Здесь в основном располагается вся невидимая информация о странице. <head> содержит теги <link>, <meta>, <script>, <style> и <title>. Рассмотрим их по порядку.
<link>
Служит для связи документа с внешними файлами, в основном с каскадными таблицами стилей.
Пример:
<link rel="stylesheet" type="text/css" href="styles/style.css">
Здесь мы видим связывающий с таблицами стилей тег <link>, который имеет атрибут rel, указывающий, что присоединяется таблица стилей, type, указывающий тип содержимого, а href задает путь к css-файлу.
<meta>
<meta> служит для определения невидимых параметров страницы, таких как ключевые слова (keywords), описание страницы (description) и кодировку.
Примеры указания кодировки:
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta http-equiv="content-type" content="text/html; charset=koi8-r">
Также с помощью тега <meta> можно задать имя автора страницы или, например, редактор, с помощью которого был сверстан сайт. Делается это так:
<meta name="author" content="Ivan Ivanov">
<meta name="generator" content="Notepad">
Думаю расшифровывать не надо.
Примечание: тег <meta> является одиночным.
<script>
Тег <script> служит для вставки скрипта на страницу. Атрибут type указывает язык скрипта (по умолчанию JavaScript).
Пример:
<script type="text/javascript">
alert ('Hello World!')
</script>
Также скрипты могут располагаться в теле страницы и даже в отдельном файле с расширением .js. Делается это при помощи атрибута src, указывающего путь к файлу.
Пример:
<script type="text/javscript" src="scripts/script.js">
<style>
Тег <style> задает таблицы стилей прямо в документе.
Пример:
<style type="text/css">
h1 {
color: red;
}
</style>
В этом примере мы делаем все заголовки h1 красного цвета. Желательно указывать атрибут type.
<title>
<title> задает заголовок веб-страницы на вкладке браузера.
Пример использования <title>:
<title>Заголовок сайта</title>
<body>
Между тегом <body> и закрывающим </body> находятся все видимые элементы страницы: текст, графика, таблицы т.д.
Последним идет </html>, объявляющий о конце документа.
Изучив представленный в статье html-документ, вы сможете сами создавать заготовки веб-страниц, впоследствии превращая их в сайты. Нужно только запастись терпением и все досконально разобрать, что к чему.