Файл: Основы программирования на языке HTML ( Понятие и история языков разметки).pdf

Объявление XML указывает версию языка, на котором написан документ. Поскольку интерпретация содержимого документа, вообще говоря, зависит от версии языка, то спецификация предписывает начинать документ с объявления XML. В первой (1.0) версии языка использование объявления не было обязательным, в последующих версиях оно обязательно. Таким образом, версия языка определяется из объявления, и если объявление отсутствует, то принимается версия 1.0. Кроме версии XML, объявление может также содержать информацию о кодировке документа и «оставаться ли документу со своим собственным DTD или с подключенным» (по умолчанию "no"):

• Standalone = "yes" — значит документ будет пользоваться своим DTD,

• Standalone = "no" — значит DTD подключается извне.

Инструкции обработки (англ. processing instruction, PI) позволяют размещать в документе инструкции для приложений. В данном примере показана инструкция обработки, передающая xml-stylesheet-приложению (например, браузеру) инструкции в файле mystyle.css посредством атрибута href:

<?xml-stylesheet type="text/css" href="mystyle.css"?>

Далее следует корневой тег <knowledgeDatabase>, в который вложены все остальные теги по принципу матрешки.

В 1998 г. W3C начал работу над XHTML — новым языком разметки, основанным на HTML 4, но соответствующим синтаксису XML.

26 января 2000 г. W3C опубликовал рекомендацию XHTML 1.0. В те годы назывались следующие преимущества XHTML в сравнении с HTML4:

1. Xhtml-документы соответствуют стандарту XML, и, следовательно, они могут просматриваться, редактироваться и проверяться на синтаксическую правильность стандартными средствами поддержки языка XML.

2. Xhtml-документы могут отображаться как существующими обозревателями html-документов, так и новыми обозревателями, поддерживающими стандарт XHTML.

3. Xhtml-документы могут обращаться к сценариям и аплетам, основанным на объектной модели документов (DOM). С практической точки зрения выделялись следующие преимущества XHTML [15]:

1. И разработчики документов, и разработчики обозревателей постоянно ищут новые способы выражения своих идей с помощью новых html-тегов. XML обеспечивает единый и простой способ создания новых элементов языка и их дополнительных атрибутов. XHTML призван унифицировать такие расширения языка HTML посредством xhtml-модулей, которые будут поддерживать комбинации существующих элементов HTML с новыми элементами при разработке и отображении документов.

2. Постоянно возникают все новые способы и средства доступа к Сети: карманные компьютеры и телевизионные приставки, сотовые телефоны и пейджеры. XHTML был разработан с ориентацией на обобщенный обозреватель, который в сочетании с механизмами словарей метаданных должен обеспечить оптимальное преобразование содержимого документа при его отображении, с тем чтобы в конце концов перейти к разработке таких документов, которые будут адекватно отображаться любым обозревателем, поддерживающим стандарт XHTML. Как показало время, язык XHTML не получил своего развития, так как не был принят сообществом разработчиков [15].

Глава 2. Основы программирования на языке HTML

2.1. Структура html-документа и его элементы

HTML — это теговый язык разметки документов, т. е. любой документ на языке HTML представляет собой набор элементов, причем начало и конец каждого элемента обозначаются специальными пометками, называемыми тегами [3].

Версии языка HTML

HTML 0.9
HTML 2.0, одобренный как стандарт 22 сентября 1995 года;
HTML 3.2— 14 января 1997 года;
HTML 4.0 — 18 декабря 1997 года;
HTML 4.01 — 24 декабря 1999 года;
HTML 5— 28 октября 2014 года
HTML 5.1 начал разрабатываться примерно 19 декабря 2012 года.

Для создания web-страниц понадобиться обычный текстовый редактор, например, Блокнот или NotePad++. Отличие в том, что создаваемым файлам дается расширение html [11].

Сам по себе HTML-документ представляет собой текстовый файл, содержащий набор инструкций для представления информации в требуемом виде в окне браузера. Инструкции записываются в виде тегов (читается тэг, от англ. tag) и имеют следующий синтаксис:

<имя_тега [возможные параметры]>

Чтобы указать браузеру место окончания действия того или иного тега, используется закрывающий тег. Это тег, имеющий то же самое имя с прямым слешем ‘/’ перед ним/

<html>

HTML-документ

</html>

Следует отметить, что не каждый открывающий тег должен иметь соответствующий закрывающий.

Как правило, элементы имеют следующую структуру: открывающий тег, содержимое, закрывающий тег. Однако элементы могут быть пустыми, т. е. не содержащими никакого текста и других данных (например, тег перевода строки <br />). Элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, URL-адрес для элемента a). Атрибуты указываются в открывающем теге, как показано в примере:

Каждый html-документ, отвечающий спецификации HTML какой-либо версии, должен включать:

1) строку, содержащую декларацию типа документа;

2) заголовок документа (заключенный в теги <head>…</head>);

3) тело документа (заключенное в теги <body>…</body> или <frameset>…</frameset>).

<! DOCTYPE html public "-//w3c//dtd html 4.0//en">

<html>

<head>

<title>мой первый html-документ</title>

</head>

<body>

<p>это html-документ.</p>

</body>

</html>

Основная структура HTML-документа должна состоять из заглавия и тела. Явное вложение заголовка в элемент HEAD не обязательно. Использование элемента HEAD не сказывается на вывод документа. Атрибуты отсутствуют. В документе должен присутствовать только один элемент HEAD, и он должен появиться до элемента BODY.

Синтаксис использования

<HEAD>

элемент TITLE

</HEAD>

Заметим, что начальный и конечный теги могут отсутствовать. Тег <HEAD> должен содержать один TITLE элемент и возможно следующие элементы

ISINDEX:
META;
LINK;
STYLE;
SCRIPT.

BODY (ТЕЛО) — тело документа. Основная структура документа HTML всегда состоит из заголовка и тела. Нет необходимости явно помещать тело в элемент BODY, однако делая так, можно специфицировать атрибуты, влияющие на представление документа в целом (например, установить фоновое изображение или цвет).

Если элемент BODY не содержит атрибуты, использование его не дает явного эффекта в непосредственном отображении документа. Элемент HTML может быть задан яво или подразумеваться. Только один элемент BODY разрешен в документе, и он должен находится после элемента HEAD (который тоже может быть как подразумеваемым, так и явным) [6].

Основной синтаксис

<BODY>тело документа</BODY>

Возможные атрибуты тега BODY

Таблица 1

Имя атрибута	Возможные значения	Смысл
BGCOLOR	Цвет	Фоновый цвет документа
TEXT	Цвет	Цвет для текста документа
LINK	Цвет	Цвет для непосещенной гипертекстовой связи
VLINK	Цвет	Цвет для посещенной гипертекстовой связи
ALINK	Цвет	Цвет для активной гипертекстовой связи; используется для выделения текста , когда пользователь нажал на связь
BACKGROUND	URL	URL фонового образа

При создании HTML-документов рекомендуется соблюдать следующую структуру:

html>

<head>

</head>

<body>

</body>

</html>

Здесь <html> - это тег, обозначающий начало HTML-документа. Браузер, встретивший данный тег, будет «знать», что представленную ниже информацию следует интерпретировать как HTML-страницу. Тег <head> означает раздел заголовка, который обычно включает:

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

<title>Государственный центр оказания услуг</title>

Кодировку, в которой представлен HTML-документ

Краткое описание содержания документа

Список ключевых слов документа

5. Подключаемые внешние javascript файлы (скрипты)

6. Внешние таблицы стилей (css) для форматирования документа

Раздел тега <head> может содержать и другие конструкции языка HTML. В конечном итоге разработчик сам решает, что должно быть записано в данном разделе. Он может быть и пустым, т.е. не содержать ничего. Тогда браузер будет руководствоваться своими настройками и алгоритмами при отображении такого документа. Наконец, раздел <head> может совсем отсутствовать и это будет аналогично пустому разделу. Однако при разработке HTML-страницы крайне не рекомендуется пропускать данный раздел и его «минимальная конфигурация» должна иметь следующий вид^{^[1]} (рис. 1):

<head>

<title>Заголовок страницы</title>

</head>

В тегах <body>...</body> заключается отображаемая информация (тело) страницы: текст, изображения, таблицы, звук, видео, объекты (например, flash-проигрыватель), javascript-программы, таблицы стилей (css) и т.д^{^[2]}.

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

Текст HTML-документа, как правило, представляет собой непосредственно текст и ссылки, ведущие либо на отдельные фрагменты того же документа, либо на другие документы.

Рисунок 1 – Структура документа HTML

Пример: простейший HTML-документ (рис. 2).

Рисунок 2 – Пример простого HTML-документа

Для создания заголовков в HTML используются теги:

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

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

<h3>Заголовок 3 уровня</h3>

<h4>Заголовок 4 уровня</h4>

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

<h6>Заголовок 6 уровня</h6>

На рис. 3 показано отображение заголовков разного уровня в браузере.

Рисунок 3 – Отображение заголовков в браузере

HTML есть возможность создавать нумерованные и маркированные списки^{^[3]}.

Тег <ol>...</ol> - создает нумерованный список элементов/

Атрибуты:

start="N" - начать нумерацию с числа N;

type="..." -определяет формат нумерации:

1 - арабские цифры (по умолчанию);

A - прописные буквы (A, B, C);

а - строчные буквы (a, b, c);

I - прописные римские цифры (I, II, III);

i - строчные римские цифры (i, ii, iii).

Тег <ul>...</ul> - создает маркированный список элементов.

Атрибут:

type="..." - определяет формат маркера:

disk - диск (по умолчанию);

circle – окружность;

square – квадрат.

<li>...</li> - задает элемент списка в нумерованном или маркированном списке

Атрибуты:

type="..." - формат номера или маркера (см. описание <ol> и <ul>);

value="N" - задает номер элемента списка.

Примеры создания отображения списка показаны на рис. 4-6.

Рисунок 4 – Создание списка в HTML

Рисунок 5 – Отображение списка в браузере

Для создания ссылок используется тег <a>...</a>.

Обязательный атрибут href указывает абсолютный или относительный адрес, на который ведет ссылка. Ссылка может указывать на HTML- документ, изображение, файл для сохранения на диск и пр. Текст ссылки записывается между открывающим и закрывающим тегом.

Абсолютный адрес содержит в себе имя хоста и полный путь к ресурсу, например, http://www.example.com/docs/about.html. С помощью абсолютного адреса можно ссылаться на любой открытый ресурс в Интернете. Если нужно поставить ссылку на главную страницу сайта, указывают его адрес и слеш.

Пример для абсолютного адреса:

HTML-код: <a href="http://www.vk.com">Яндекс</a>

В браузере ссылка обычно представляется как подчеркнутый текст. При клике по ссылке браузер загружает страницу, указанную в атрибуте href.

Также для документов, расположенных на одном сайта, можно использовать относительный адрес.

Рисунок 6 - Пример файловой структуры