Главная | Обратная связь | Поможем написать вашу работу!

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-документа.

Пояснение:

Пример очень простого XML DTD, описывающего список людей:

<!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>

<name>Иванов Иван Иванович</name>

</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, на которую ориентированы. В таблице 1 приведены основные типы документов с их описанием.

Таблица 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">
<!DOCTYPE html>	HTML5

Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок, что обычно приводит к иному отображению документа, чем планировал разработчик. Переходный HTML более "спокойно" относится к некоторым огрехам кода.

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается по-разному при использовании <!DOCTYPE> и без него. Чтобы не произошло подобных ситуаций, необходимо всегда добавлять этот тег в начало документа.

Заголовок документа

В строке 2 находится тег <HTML>, определяющий начало HTML -файла, внутри него хранится заголовок (<HEAD>) и тело документа (<BODY>). В примере тег <HTML> закрывается на строке 73.

Заголовок документа, как еще называют блок <HEAD>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице. В примере заголовок открывается на строке 3 и закрывается на строке 15.

<head>

<title>Тестовая страница</title>

</head>

Как показано в примере, некоторый текст можно скрыть от показа в браузере, сделав его комментарием (строка 4). Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрываемую информацию. Комментарии начинаются тегом . Все, что находится между этими тегами отображаться на веб-странице не будет.

Метатеги

На строках 4-9 находятся метатеги.

Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Хотя тег <META> всего один, он имеет множество параметров, поэтому для его обращения применяется множественное число.

Разрешается использовать более чем один метатег, все они размещаются в контейнере <HEAD>. Как правило, параметры любого метатега сводятся к парам "имя=значение", которые определяются аргументами content, name или http-equiv. Метатеги имеют следующие параметры:

с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 - список ключевых слов, встречающихся на странице.

Соответственно строка в примере:

определяет тип кодировки документа.

Строка

определяет язык кодировки документа.

Строка

определяет описание текущего документа.

Строка

определяет список ключевых слов, встречающихся на странице.

Строка

определяет режим индексирования страницы поисковыми роботами.

В HTML5 применяются упрощенные определения некоторых мета-мегов, например:

Заголовок страницы

Тег <TITLE> (строка 10) используется для отображения строки текста в левом верхнем углу окна браузера. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик:

Рисунок 2 – Заголовок страницы

Link

Строки 11-13 содержат тег <LINK>.

Этот тег устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. Тег <LINK> размещается всегда внутри контейнера <HEAD> и не создает "видимую" ссылку.

Параметры:

href – путь к файлу, на который делается ссылка (URL), в качестве значения принимается полный или относительный путь к файлу;
rel – параметр rel определяет отношения между текущим документом и файлом, на который делается ссылка, чтобы браузер знал, как использовать подключаемый документ. Аргументы:

stylesheet – определяет, что подключаемый файл хранит таблицу стилей (CSS);

application/rss+xml – файл в формате XML для описания ленты новостей, анонсов статей.
type – сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.

Аргументы – имена MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css.

media – определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати. Допускается писать несколько аргументов через запятую. Аргументы:

all – все устройства;
screen (значение по умолчанию) – экран монитора;
print – печатающее устройство вроде принтера;
projection – проектор;
braille – устройства, основанные на системе Брайля, которые предназначены для слепых людей;
speech – речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

Соответственно строка

определяет ссылку на значок нашей страницы:

Рисунок 3 – Значок страницы

Строки

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

В HTML5 указанные строки определяются следующим образом:

Script

Строка 14 содержит тег <SCRIPT>

Тег <SCRIPT> предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML -документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.

<SCRIPT> может располагаться в заголовке или теле HTML -документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.

Параметры:

defer – откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Этот параметр работает только в браузере Internet Explorer, а в остальных браузерах будет проигнорирован.
language – устанавливает язык программирования, на котором написан скрипт.

Параметр language не чувствителен к регистру и может принимать одно из четырех значений:

JavaScript (значение по умолчанию) – язык программирования JavaScript. К этому параметру часто еще присоединяют номер версии, например – JavaScript1.3.
JScript – разновидность языка JavaScript разработанная компанией Microsoft. Смена названия продиктована тем, что имя JavaScript уже было зарегистрировано, при этом различия между языками состоят не только в названии, но и в подходах.
VBS, VBScript - язык программирования VBScript основанный на Visual Basic. Является продуктом Microsoft и поддерживается преимущественно браузером Internet Explorer.

src – адрес скрипта из внешнего файла для импорта в текущий документ. Как только внешние инструкции полностью загружаются, браузер обрабатывает их, словно они были внедрены в текущий документ.

Преимуществ использования внешних файлов несколько. Внешний файл после первого обращения сохраняется в кэше браузера и при последующих вызовах загружается быстрее. Кроме того, вызываемые функции удобно править в одном месте и код проще контролировать. Это особенно актуально, когда множество веб-страниц используют одни и те же скрипты.

В качестве значения аргумента принимается полный или относительный путь к файлу.

type – указывает тип MIME для определенного языка. Поскольку некоторые старые браузеры не понимают параметр type, можно задавать два атрибута одновременно – language и type. Если браузер распознает значение параметра type, то значение language отменяется. Параметр type не чувствителен к регистру и принимает следующие значения:

text/javascript (значение по умолчанию) – для языка программирования JavaScript.
text/vbscript – для языка VBScript.

В нашем примере строка

указывает на использование Javascript-скрипта из внешнего файла.

В HTML5 отсутствует параметр language, добавлены параметры charset и параметр async, который определяет, что скрипт выполняется асинхронно. Допускается использование только параметра src.

Тело документа

Тело документа <BODY> предназначено для отображения данных на веб-странице, в частности, в теле размещается текст, изображения, ссылки, таблицы, списки и т.д.

В примере тело документа открывается на строке 16 и закрывается на строке 72.

DIV

На строке 17 (и еще в нескольких местах) находится тег <DIV>.

Элемент <DIV> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей CSS.

Cодержимое тега <DIV> всегда начинается с новой строки. После него также добавляется перенос строки.

Параметры:

align –задает выравнивание содержимого тега <DIV>. Аргументы:

center – выравнивание текста по центру;
left (значение по умолчанию) – выравнивание текста по левому краю;
right – выравнивание текста по правому краю;
justify – выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю.

title – добавляет поясняющий текст к контейнеру <DIV> в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается на содержимом. В качестве аргумента принимает любую текстовую строку. Строка должна заключаться в двойные или одинарные кавычки.

Таблица

На строке 21 находится тег <TABLE>.

Для добавления таблицы на веб-страницу используется тег -контейнер <TABLE>. Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. Однако, с появлением тега <DIV> более удобным и эффективным с точки зрения читаемости и объема кода является верстка макетов страниц именно блоками.

Для добавления строк используется тег <TR>. Чтобы разделить строки на колонки применяются теги <TD> и <TH>. Разница между этими тегами следующая. Тег <TH> предназначен для создания заголовков, содержимое такой ячейки обозначается жирным начертанием и выравнивается по центру. В остальном, действуют эти теги одинаково.

У каждого параметра таблицы есть свое значение, установленное по умолчанию. Это означает, что если какой-то атрибут пропущен, то неявно он все равно присутствует, причем с некоторым значением. Из-за чего вид таблицы может оказаться совсем другим, нежели предполагал разработчик.

Чтобы понимать, что можно ожидать от таблиц, следует знать их явные и неявные особенности, которые перечислены далее:

одну таблицу допускается помещать внутрь ячейки другой таблицы;
размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек;
если для таблицы задана ее ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры;
если ширину содержимого ячейки невозможно изменить, то ширина таблицы увеличивается, несмотря на указанные размеры;
пока таблица не загрузится полностью, ее содержимое не начнет отображаться;
таблица, если не указано особо, всегда выравнивается по левому краю;
по умолчанию таблица выводится без рамки;

Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге <TABLE>. Описание параметров таблицы и их значений приведен о в таблице 2.

Таблица 2. Параметры тега <table>
Свойство	Значение	Описание
align	left right center	Выравнивание таблицы.
background	Гиперссылка	Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы.
bgcolor	Код или название цвета	Цвет фона таблицы.
border	Число	Толщина рамки в пикселах.
cellpadding	Число	Расстояние между ячейкой и ее содержимым.
cellspacing	Число	Дистанция между ячейками.
cols	Число	Задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению.
nowrap		Запрещает переносы строк в тексте.
frame	void above below lhs rhs hsides vsides box	Задание типа рамки таблицы
rules	all groups cols none rows	Определяет, где рисовать границы между ячейками.
width	Число или проценты	Минимальная ширина таблицы, можно задавать в пикселах или процентах.

Заголовки

На строке 24 (а также 57) находится тег заголовка <H1> (<H2>).

Заголовки выполняют важную функцию на веб-странице:

они показывают важность раздела, к которому относятся, т.е. чем больше заголовок, тем более он значимый;
с помощью различных заголовков легко регулировать размер текста, т.е. чем выше уровень заголовка, тем больше размер шрифта (самым верхним уровнем является уровень 1 (<H1>), а самым нижним – уровень 6 (<H6>));
поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка.

Синтаксис создания заголовков следующий.

<h1>Заголовок первого уровня</h1>

<h2>Заголовок второго уровня</h2>

<h3>Заголовок третьего уровня</h3>

<h4>Заголовок четвертого уровня</h4>

<h5>Заголовок пятого уровня</h5>

<h6>Заголовок шестого уровня</h6>

Как правило, на веб-странице применяют заголовки с первого по третий уровень, их вполне достаточно. Редко когда приходится использовать заголовки более низкого уровня.

Ссылки

На строке 25 (а также в других местах) находится тег ссылки <A>.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега <A>, который имеет единственный обязательный параметр href. В качестве значения используется адрес документа (URL).

Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP, соответственно, абсолютные ссылки начинаются с ключевого слова http://.

Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса. Примерами относительных ссылок могут служить:

/demo/

/images/pic.gif

../help/index.html

manual/info.html

Иногда можно встретить в адресе ссылки путь в виде./file/doc.html. Точка с косой чертой означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html.

Списки

На строке 47 начинается маркированный список.

<ul>

<li>

<span>Общее описание</span>

</li>

<li>

<a href="advantages.html" title="Преимущества">Преимущества</a>

</li>

</ul>

Маркированные списки позволяют разбить большой текст на отдельные блоки. Тем самым привлекается внимание читателя к тексту и повышается его читабельность. С учетом того, что восприятие текста с экрана монитора хуже, чем с его печатного варианта, это является весьма полезным приемом.

Для установки маркированного списка используются теги <UL> и <LI>.

Для выбора типа маркера используется параметр type="..." тега <UL>. Маркеры могут принимать один из трех видов:

круг (по умолчанию) – <ul type="disc">;
окружность – <ul type="circle">;
квадрат – <ul type="square">.

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега <OL>, который и используется для создания списка. В качестве маркеров могут быть следующие значения:

арабские цифры;
заглавные латинские буквы;
строчные латинские буквы;
заглавные римские цифры;
строчные римские цифры.

Абзацы

На строках 58-60 отображены абзацы.

Как правило, блоки текста разделяют между собой абзацами (параграфами). По умолчанию между параграфами существует небольшой вертикальный отступ, называемый отбивкой. Каждый абзац начинается с тега <p> и должен иметь необязательный закрывающий тег </p>.

Изображения

На строке 60 имеется тег <IMG>.

Для встраивания изображения в документ используется тег <IMG>, имеющий обязательный параметр src, который определяет адрес файла с картинкой.

Закрывающий тег для <IMG> не требуется. scr представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес (также как и у тега <A>).

Как правило, в качестве формата графического файла выступает GIF и JPEG. Есть еще формат PNG, который также поддерживается браузерами при добавлении изображений и существует в двух ипостасях – PNG-8 и PNG-24.

Для изменения размеров изображения средствами HTML предусмотрены параметры width и height тега <IMG>.

Для создания альтернативного текста используется параметр alt тега <IMG>. Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.

Другие элементы

Кроме элементов, в HTML -документах есть и сущности (entities) – "специальные символы". Сущности начинаются с символа амперсанда и имеют вид &имя; или &#NNNN;, где NNNN – код символа в Юникоде в десятеричной системе счисления. Например, © – знак авторского права () (строка 66).

Тег <NOINDEX> (строка 18 и другие) — имя не входящего в официальную спецификацию тега языка гипертекстовой разметки веб-страниц HTML, предназначенного для включения в него частей веб-страниц, находящуюся между <noindex> и </noindex>, не предлагаемых к индексации поисковыми системами. Тег предложен российской компанией "Яндекс" в качестве альтернативы атрибуту nofollow (значение предназначено для поисковых систем: он указывает им на то, что гиперссылку, задаваемую тегом <A>, не следует никаким образом учитывать при индексировании данной страницы).

Тег <SPAN> (строка 49) предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как <TABLE>, <P> или <DIV>, с помощью тега <SPAN> можно выделить часть информации внутри других тегов и установить для нее свой стиль.

В последних версиях HTML практически у каждого тега огромное число необязательных параметров – обычно не меньше 15. Приведем только основные параметры тегов.

Текстовые блоки

<BR> – новая строка. Этот тег не закрывается (то есть не существует тега </BR>);
<HR> – горизонтальная линия;
<BLOCKQUOTE> … </BLOCKQUOTE> – цитата (обычно текст сдвигается вправо);
<PRE> … </PRE> – режим preview. В этом режиме текст заключается в рамку и никак не форматируется (то есть теги, кроме </PRE>, игнорируются, и переводы строки ставятся там, и только там, где они есть в оригинальном документе). Форматирование текста
<EM> … </EM> – логическое ударение (обычно отображается курсивным шрифтом);
<STRONG> … </STRONG> – усиленное логическое ударение (обычно отображается жирным шрифтом);
<I> … </I> – выделение текста курсивом;
<B> … </B> – выделение текста жирным шрифтом;
<U> … </U> – подчеркивание текста;
<S> … </S> – зачеркивание текста;
<STRIKE> … </STRIKE> – то же самое, что <S> … </S>;
<BIG> … </BIG> – увеличение шрифта;
<SMALL> … </SMALL> – уменьшение шрифта;
<SUB> … </SUB> – _{подстрочный текст};
<SUP> … </SUP> – ^{надстрочный текст};
<FONT параметры> … </FONT> – задание параметров шрифта:

COLOR=color – задание цвета (в шестнадцатеричной форме или названием);
FACE=шрифт меняет шрифт;
SIZE=размер меняет размер шрифта (от 1 до 7, стандартный по умолчанию 3);
SIZE=+размер или SIZE=-размер – размер задается по сравнению со стандартным.

Объекты

EMBED – вставка различных объектов: не- HTML документов и media-файлов;
APPLET – вставка Java-апплетов.

Формы

Создание форм в HTML является довольно сложным делом. Здесь приводятся только названия основных тегов.

FORM – создание формы;
INPUT – элемент ввода (может иметь разные функции – от ввода текста до отправки формы);
TEXTAREA – текстовая область (многострочное поле для ввода текста);
SELECT – список (обычно в виде выпадающего меню);
OPTION – пункт списка.

Ключевые термины

HTML, Веб-браузер, W3C, Теги, DTD, Заголовок документа, Метатеги, Теги <LINK>, <title>, <SCRIPT>, Тело документа, Теги <DIV>, <TABLE>, <H1>, <A>, <IMG>, <SPAN>, Маркированные списки, Параграфы, XHTML.

Задание.

1) Ознакомиться с представленным материалом.

2) Ознакомиться со структурой какого-нибудь сайта, воспользовавшись дополнением FireBug[1] для Firefox.

3) Ознакомиться с предлагаемым макетом будущего сайта (предварительно выбрав вариант), открыв его в редакторе GIMP.

4) Написать HTML-страницу, отображающую структуру выбранного шаблона (без использования оформления)[2] с использованием редактора Komodo Edit.

Отчет.

1) HTML-страница со структурой выбранного шаблона.

2) Ответы на вопросы:

а. Что такое HTML?

б. Какова структура HTML-документа?

в. Как пользоваться дополнением Firebug для Firefox?

г. Что такое сущность в HTML-документе?

д. Почему HTML не является языком программирования?

е. В чем состоит преимущество блочной верстки (с помощью тегов DIV) перед версткой таблицами?

[1] http://firebug.ru/

[2] http://htmlbook.ru/samhtml

Воспользуйтесь поиском по сайту: