Опубликован: 04.05.2010 | Доступ: свободный | Студентов: 4030 / 454 | Оценка: 4.64 / 4.44 | Длительность: 41:24:00
Лекция 2:

Создание статического содержания. HTML

< Лекция 1 || Лекция 2: 1234 || Лекция 3 >
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) >

Начиная с первой строки:

  1. Элемент <people_list> содержит любое число элементов <person>. Знак <*> означает, что возможно 0, 1 или более элементов <person> внутри элемента <people_list>.
  2. Элемент <person> содержит элементы <name>, <birthdate>. Знак <?> означает, что элемент необязателен. Элемент <name> не содержит <?>, что означает, что элемент <person> обязательно должен содержать элемент <name>.
  3. Элемент <name> содержит данные.
  4. Элемент <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-технологии по ряду причин:

  1. Используется отличный от XML синтаксис.
  2. Отсутствует типизация узлов.
  3. Отсутствует поддержка пространств имен.

На смену DTD пришел стандарт консорциума W3C XML Schema.

В примере !DOCTYPE предназначен для указания типа текущего документа – DTD.

Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер "не путался" и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы [11]. В табл. 2.1 приведены основные типы документов с их описанием.

Таблица 2.1. Основные виды DOCTYPE
DOCTYPE Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Строгий синтаксис HTML – не содержит элементов, помеченных как "устаревшие" или "не одобряемые"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Переходный синтаксис HTML –содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> В HTML-документе применяются фреймы – аналогичен переходному, но содержит также теги для создания наборов фреймов
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"> Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML.

Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа [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.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).

 Фавикон страницы

Рис. 2.3. Фавикон страницы

Строки

<link type="text/css" href="reset.css" rel="Stylesheet" />
<link type="text/css" href="main.css" rel="Stylesheet" />

определяют подключаемые файлы, содержащие CSS.

< Лекция 1 || Лекция 2: 1234 || Лекция 3 >