| Россия, г. Санкт-Петербург |
Инспектор
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 04.05.2010 | Уровень: для всех | Доступ: платный
Лекция 2:
Создание статического содержания. HTML
2.1.3.1. Document Type Definition (DTD)
В первой строке объявляется Document Type Definition:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DTD (Document Type Definition, определение типа документа) – язык описания структуры SGML-документа [10].
Пример очень простого XML DTD, описывающего список людей [10,12]:
<!ELEMENT people_list (person*)> <!ELEMENT person (name, birthdate?)> <!ELEMENT name (#PCDATA) > <!ELEMENT birthdate (#PCDATA) >
Начиная с первой строки:
- Элемент <people_list> содержит любое число элементов <person>. Знак <*> означает, что возможно 0, 1 или более элементов <person> внутри элемента <people_list>.
- Элемент <person> содержит элементы <name>, <birthdate>. Знак <?> означает, что элемент необязателен. Элемент <name> не содержит <?>, что означает, что элемент <person> обязательно должен содержать элемент <name>.
- Элемент <name> содержит данные.
- Элемент <birthdate> содержит данные.
Пример XML-документа, использующего этот DTD:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE people_list SYSTEM "example.dtd">
<people_list>
<person>
<name>Иванов Иван Иванович</name>
<birthdate>22.03.1978</birthdate>
</person>
</people_list>Сейчас идет отказ от использования DTD в XML-технологии по ряду причин:
- Используется отличный от XML синтаксис.
- Отсутствует типизация узлов.
- Отсутствует поддержка пространств имен.
На смену DTD пришел стандарт консорциума W3C XML Schema.
В примере !DOCTYPE предназначен для указания типа текущего документа – DTD.
Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер "не путался" и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.
Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы [11]. В табл. 2.1 приведены основные типы документов с их описанием.
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа [10]. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок, что обычно приводит к иному отображению документа, чем планировал разработчик. Переходный HTML более "спокойно" относится к некоторым огрехам кода, поэтому этот тип использовать предпочтительнее.
Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается по-разному при использовании <!DOCTYPE> и без него. Чтобы не произошло подобных ситуаций, необходимо всегда добавлять этот тег в начало документа.
2.1.3.2. Заголовок документа
В строке 2 находится тег <HTML>, определяющий начало HTML -файла, внутри него хранится заголовок ( <HEAD> ) и тело документа ( <BODY> ). В примере тег <HTML> закрывается на строке 73.
Заголовок документа , как еще называют блок <HEAD>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице. В примере заголовок открывается на строке 3 и закрывается на строке 15.
<head> <!-- Этот раздел предназначен для заголовка страницы и технической информации. --> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <meta http-equiv="Content-Language" content="ru"/> <meta name="description" content="Это тестовая страница." /> <meta name="keywords" content="HTML, CSS, DTD, теги" /> <meta name="robots" content="index, follow" /> <title>Тестовая страница</title> <link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" /> <link type="text/css" href="reset.css" rel="Stylesheet" /> <link type="text/css" href="main.css" rel="Stylesheet" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> </head>
Как показано в примере, некоторый текст можно скрыть от показа в браузере, сделав его комментарием ( строка 4 ). Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрываемую информацию. Комментарии начинаются тегом <!-- и заканчиваются тегом -->. Все, что находится между этими тегами отображаться на веб-странице не будет.
2.1.3.2.1. Метатеги
На строках 5-9 находятся метатеги.
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <meta http-equiv="Content-Language" content="ru"/> <meta name="description" content="Это тестовая страница." /> <meta name="keywords" content="HTML, CSS, DTD, теги" /> <meta name="robots" content="index, follow" />
Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем [13]. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Хотя тег <META> всего один, он имеет множество параметров, поэтому для его обращения применяется множественное число.
Разрешается использовать более чем один метатег, все они размещаются в контейнере <HEAD>. Как правило, параметры любого метатега сводятся к парам "имя=значение", которые определяются аргументами content, name или http-equiv. Метатеги имеют следующие параметры [2,13]:
- сontent – устанавливает значение параметра, заданного с помощью name или http-equiv ;
-
http-equiv –браузеры преобразовывают значение параметра http-equiv, заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.
Ниже приведены некоторые допустимые аргументы параметра http-equiv.
- сontent-type – тип кодировки документа;
- expires – устанавливает дату и время, после которой информация в документе будет считаться устаревшей;
- pragma – способ кэширования документа;
- refresh – загрузить другой документ в текущее окно браузера.
-
name – устанавливает идентификатор метатега для пары "имя=значение". Одновременно использовать параметры name и http-equiv не допускается.
Ниже приведены некоторые допустимые аргументы параметра name.
- author – имя автора документа;
- description – описание текущего документа;
- keywords - список ключевых слов, встречающихся на странице.
Соответственно строка в примере:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
определяет тип кодировки документа.
Строка
<meta http-equiv="Content-Language" content="ru"/>
определяет язык кодировки документа.
Строка
<meta name="description" content="Это тестовая страница." />
определяет описание текущего документа.
Строка
<meta name="keywords" content="HTML, CSS, DTD, теги" />
определяет список ключевых слов, встречающихся на странице.
Строка
<meta name="robots" content="index, follow" />
определяет режим индексирования страницы поисковыми роботами.
2.1.3.2.2. Заголовок страницы
Тег <TITLE> (строка 10) используется для отображения строки текста в левом верхнем углу окна браузера. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик (Рис. 2.2).
2.1.3.2.3. Link
Строки 11-13 содержат тег <LINK>.
<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" /> <link type="text/css" href="reset.css" rel="Stylesheet" /> <link type="text/css" href="main.css" rel="Stylesheet" />
Этот тег устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. Тег <LINK> размещается всегда внутри контейнера <HEAD> и не создает "видимую" ссылку.
Параметры [2]:
- href – путь к файлу, на который делается ссылка (URL), в качестве значения принимается полный или относительный путь к файлу;
-
rel – параметр rel определяет отношения между текущим документом и файлом, на который делается ссылка, чтобы браузер знал, как использовать подключаемый документ. Аргументы:
- stylesheet – определяет, что подключаемый файл хранит таблицу стилей (CSS);
- application/rss+xml – файл в формате XML для описания ленты новостей, анонсов статей.
-
type – сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.
Аргументы – имена MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css.
-
media – определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати. Допускается писать несколько аргументов через запятую. Аргументы:
- all – все устройства;
- screen (значение по умолчанию) – экран монитора;
- print – печатающее устройство вроде принтера;
- projection – проектор;
- braille – устройства, основанные на системе Брайля, которые предназначены для слепых людей;
- speech – речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
Соответственно строка
<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />
определяет ссылку на фавикон нашей страницы (рис. 2.3).
Строки
<link type="text/css" href="reset.css" rel="Stylesheet" /> <link type="text/css" href="main.css" rel="Stylesheet" />
определяют подключаемые файлы, содержащие CSS.
