Введение в HTML
Итак гипертекст это текст, в котором имеютя ссылки для автоматического перехода на другие тексты – гиперссылки, а язык HTML (Hyper Text Marcup Language) – это независимый от платформ язык разметки текста. Документы размеченные при помощи этого языка визуализируются браузерами конечных пользователей в большинстве случаев одинаково , благодаря тому, что “понимают” и правильно обрабатывают структурные элементы HTML. Исходный код представляет собой текст, между строк которого вставляются элементы разметки, посетителю страницы эти элементы не видны, а виден результат их воздействия на документ.
Элементы разметки состоят из заключённых в угловые скобки (< и >) дескрипторов – тэгов(tags) и их атрибутов. Совокупность открывающего (< >) и закрывающего (< / >) дескрипторов – есть контейнер. Элементы HTML подразделяются на структурные – которые организуют текст и на форматирующие – которые задают его стиль. Для создания документа HTML необходимо создать текстовый файл с содержимым, вставить нужные тэги и после внесения изменений текстовый файл сохраняется с расширением .htm или .html.
Обьявление <!DOCTYPE>
Элемент <!DOCTYPE> должен первым указываться в документе HTML (теоретически). Он сообщает серверу WEB способ обработки документа и то какие дескрипторы могут находиться на странице, хотя чаще всего он игнорируется броузерами. Поэтому его применение строго не обязательно.
Синтаксис: <!DOCTYPE HTML “текст“”URL” >
Здесь текст определяет версию HTML , а URL позволяет броузерам пользователей загрузить DTD например:
<! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 // EN”
“http://www.w3.org/TR/REC-html40/strict.dtd“>
Ниже описаны некоторые версии HTML
- <! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 // EN”
“http://www.w3.org/TR/REC-html40/strict.dtd“> Строгое DTD. Документы, использующие такое объявление типа документа, включают в себя все элементы и атрибуты, не являющиеся нежелательными и не использующие кадры. - <! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional // EN”
“http://www.w3.org/TR/REC-html40/loose.dtd“> Документы, использующие такое объявление типа документа, включает все, что включено в строгое DTD, а также нежелательные элементы и атрибуты, относящиесяся к визуальному оформлению. - <! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Frameset // EN”
“http://www.w3.org/TR/REC-html40/frameset.dtd“> Документы, использующие такое объявление типа документа, включает все, что включено в предыдущее DTD, а также кадры.
Поскольку язык HTML развился из стандартного обобщенного языка описания документов SGML, являясь его производной, созданной для разметки текстовых документов, то этим и объясняется необходимость задания типа документа. На языке SGML может быть созданно приложение для разметки текста, но для описания функциональных особенностей каждого элемента этого приложения разработчику необходимо создать комментарии или специальную документацию, так как сам язык SGML формально может лишь сообщить где может встречаться тот или иной элемент, но не его свойства. Документы, в которых могут встречаться те или иные элементы, были отнесены к различным типам документов (document type). И теперь если возникает необходимость описать элементы разметки документа – достаточно выбрать стандартное определение типа документа – DTD (Document Type Definition).
Ниже для примера приведена выдержка из DTD, описывающая правила задания абзацев текста в документе:
<! ELEMENT P – 0 ( %text ) * >
<! ATTLIST P
align (left|center|right) #IMPLIED>
Отсюда следует, что абзацы текста необходимо заключать в тэги <P> и </P>, причем закрывающий тэг принимает значение “0”, следовательно, может быть опущен как необязательный, т.е. наличие в исходном коде начального тэга <P> подразумевает автоматическое завершение предыдущего абзаца. Содержимым абзаца может быть текст любого объема. Атрибутом абзаца является его выравнивание по правому, левому краям или по центру.
Определение границ документа спомощью элемента <HTML>
Тэг <HTML> определяет границы документа HTML, ему соответствует конечный тэг </HTML>. Между этими двумя тэгами располагается собственно весь документ. Как и <!DOCTYPE> тэги <HTML> и </HTML> – не являются строго обязательными. Но, все-таки, их использование является правилами хорошего тона т.к. броузеры у пользователей могут быть всякие и не известно – насколько корректно они визуализируют такой код.
Синтаксис: <HTML> текст и прочие дескрипторы </HTML>
А уже непосредственно документ, обозначенный тэгами <HTML> и </HTML> дополнительно делится на голову – <HEAD></HEAD> и тело – <BODY></BODY>
Общая схема исходного кода документа HTML
<HTML>
<HEAD>
служебные дескрипторы
</HEAD>
<BODY>
текст и прочие дескрипторы
</BODY>
</HTML>
Элемент <HEAD>
Область, обозначаемая тэгами <HEAD> и </HEAD> служит только для формирования общей структуры документа, задавая его глобальные свойства. Информация находящаяся в этом разделе документа является служебной и необходима программе броузеру пользователя. Она допускает вложение между дескрипторами следующих элементов: <TITLE>,<BASE>,<ISINDEX>,<LINK>,<META>,<STYLE>.
Создание титула документа с помощью элемента <TITLE>
При помощи данного дескриптора создается краткое однострочное название страницы, которое выводится в заголовке окна броузера, рядом с названием самого броузера. Если титул опускается разработчиком страницы, броузер попытается сгенерировать его из названия файла. Рекомендуется делать длину титула минимальной и одновременно с этим информативной. Синтаксис: <TITLE> текст </TITLE>
Разрешение относительных ссылок с помощью элемента <BASE>
Данный элемент автоматически задаёт URL для относительных ссылок документа, которые по умолчанию указывают на тот же сервер, где расположена сама страница. Однако этот дескриптор позволяет разрешать также ссылки относительно других каталогов и серверов. Элемент <BASE> имеет один лишь атрибут HREF и не имеет конечного тега.
Синтаксис: <BASE HREF=”протокол://имя сервера/путь“>
Здесь протокол соответствует схеме извлечения данных Internet, например, HTTP, a имя сервера соответствует имени или IP-адресу сервера, например, www.microsoft.com, путь определяет расположение ресурса в иерархии каталогов предыдущего сервера. Путь является необязательным компонентом указателя URL. Если протокол и имя сервера будут опущены, то указатель по умолчанию будет относиться к текущему серверу. Это очень полезный элемент он избавляет разработчика от необходимости вносить множественные коррективы в ссылках исходного кода документа, например, при размещении копии документа на другом сервере. Достаточно лишь вставить в заголовок копии элемент <BASE> с именем прежнего сервера и тогда целый узел будет отзеркален лишь копией одного файла, а ссылки будут адресоваться по прежнему адресу.
Обеспечение поиска при помощи элемента <ISINDEX>
Элемент <ISINDEX> используется во время проведения интерактивного поиска на Web странице. Этот элемент вставляется в документ,сгенерированный сценарием CGI, и предоставляет пользователю сформулировать критерии поиска. При этом любой введённый в приглашении текст склеивается с URL самого документа и пересылается сценарию CGI для обработки в форме URL?слово1+слово2+…+словоN. Это стандартный синтаксис для возврата значений сценариям CGI, согласно которому знак вопроса соответствует началу строки данных, а каждый плюс соответствует пробелу. Дескриптор внедряется в документы исключительно ради сценариев CGI, для предоставления пользователю возможности поиска по заданным словам. Он поддерживает атрибуты : prompt который позволяет изменять текст приглашения и action , последний указывает сценарий или программу, которой будет передан критерий поиска.
Синтаксис: <ISINDEX prompt=”строка” action=”сценарий“>
Где строка и задаёт текст приглашения длиной не более 35 символов.
Взаимосвязь между документами с помощью элемента <LINK>
Справедливости ради надо отметить, что этот элемент используется довольно редко, хотя и появился он в самой первой версии языка HTML. Этот дескриптор можно использовать для создания в документе панелей инструментов и меню, для определения последовательности печати файлов HTML и для связывания таких ресурсов, как таблицы стилей и сценарии. С дескриптором <LINK> используется ряд атрибутов :
- href
Указатель URL связанного документа. - rel
Атрибут указывает как связаны документы с заданным атрибутом href . Ему могут быть присвоены значения Present, History, Made, Annotation и Precede .
Например: <LINK rel=Annotation href=”annotations.html“>
означает, что все аннотации для текущего документа расположены в файле annotations.html. - rev
Атрибут во многом похож на rel ему могут быть присвоены те же значения.
Например: <LINK rev=Annotation href=”master.html“>
означает, что текущий документ содержит аннотации к файлу master.html. - title
Атрибут относится к href и задает название документа, на который ссылается href .Естественно, что значение атрибута должно соответствовать значению дескриптора <TITLE>. - name
Позволяет назначить ссылке на фрагмент текущего документа более описательное имя. - methods
Позволяет указать метод извлечения документа, например, FTP, Gopher и т. д. - lang
Позволяет указать информацию о языке документа, например: ru, en, fr. - target
Позволяет указать информацию о целевом фрейме. - charset
Позволяет указать кодировки символов документа.
В настоящее время элемент <LINK> используется только для ссылок на внешние таблицы стилей.
Например: <LINK rel=stylesheet href=”style.css” type=”text/css“>
,где style.css файл, который содержит набор дескрипторов <style> и любые другие определения таблицы стилей.
Предоставление дополнительной информации о документе с помощью <META>
Элемент предоставляет дополнительные сведения о способе обработки документа, он позволяет поисковым машинам идентифицировать и классифицировать документ без его загрузки. Элемент поддерживает парные атрибуты, первый из которых name определяет тип данных, а второй content – содержание. Атрибут name используется приложением-клиентом (броузером)для получения дополнительной информации о документе. Его часто заменяют элементом http-equiv , который используется сервером для создания дополнительных полей при выполнении запроса. В этом случае тэг <META> с атрибутом будет включен в заголовок ответа броузера.
Другими словами атрибут name используется с целью предоставления сведений о документе, которые могут пригодиться при его поиске, а элемент http-equiv поручает выполнение каких либо действий серверу .
Например: <META HTTP-EQUIV=”Window-target” CONTENT=”_top“>
Использование элемента http-equiv со значением “refresh” позволяет организовать принудительное обновление страницы с некоторым промежутком времени или загрузку нескольких страниц с определенным интервалом, что незаменимо при создании страниц, где публикуются непрерывно меняющиеся данные (скажем курсы валют или акций). Значение элемента content в этом случае означает промежуток между обновлениями в секундах, так если оно равно нулевому значению – страница будет обновляться непрерывно.
- <META HTTP-EQUIV=”Refresh” content=”5;URL=http://www.arcus.lv/dimas/index.html“>
Перезагрузка документа. - <META HTTP-EQUIV=”Expires” content=”Дата“>
Дата, обозначающая срок годности документа, при его значении равном “0” документ будет подгружаться не из кэша а с сервера. - <META HTTP-EQUIV=”Reply-to” content=”Имя@Адрес“>
Адрес электронной почты . - <META HTTP-EQUIV=”Content-Type” content=”text/html; charset=windows-1251“>
Описание типа и характеристик документа. - <META HTTP-EQUIV=”Content-language” content=”en“>
Описание языка документа. - <META HTTP-EQUIV=”Cache-Control” content=”no-cache“>
Контроль за кэшированием документа.- Может принимать значения:
- no-store – не сохраняется.
- no-cache – не сохраняется в кэш.
- Public – доступен для любого кэширования.
- Private – кэшируется в частных кэшах.
- <META HTTP-EQUIV=”Window-target” content=”_top“>
Определяет способ появления новых окон браузера. - <META HTTP-EQUIV=”pragma” content=”no-cache“>
Контроль за кэшированием документа. - <META HTTP-EQUIV=”Set-Cookie” content=”NAME=имя;EXPIRES=дата; DOMAIN=имя домена;PATH=путь;SECURE”>
- имя – любая строка без запятых, пробелов и переходов на след.стр. (обязательный парaметр)
- дата – дата истечения срока хранения в формате: Sun, 25-Feb-01 12:00:01 GMT , если не задан, то cookie не сохраняется (необязательный парaметр)
- имя домена – домен для которого действительно значения cookie , если не задан, то тот сервер, где лежит сайт (необязательный парaметр)
- путь – путь к документам домена, для которого действительно значения cookie, если не задан, тогда тот каталог, где лежит сайт (необязательный парaметр)
- SECURE -указывается только тогда, когда применяется защищенный режим SSL, если не задан, тогда информация передается в обычном режиме (необязательный парaметр)
Установка Cookie для броузера в том случае, когда надо сохранить информацию в компьютере посетителя и при необходимости к ней обратиться.
Работает так:
Броузер, встретив такую конструкцию записывает файл .txt с данными ввиде имя/значение и хранит в кэше, в следующий раз он сверяет все свои cookie на предмет полного совпадения, и если находит то отсылает серверу как HTTP заголовок. Конечно в настройках cookie должны быть разрешены, каждый cookie не может превышать 4 kB (если больше, то отсекается кусок вначале записи) всего их может храниться до 300, причем с одного сервера не больше 20 (если больше, то последние пишутся поверх первых) - <META name=”Author” content=”Имя автора“>
Имя автора документа. - <META name=”Keywords” lang=”ru” content=”Слово1,слово2,слово3 …“>
Набор ключевых слов для поиска. - <META name=”Title” content=”Название“>
Название станицы. - <META name=”Robots” content=”index,nofollow“>
Указание индексации поисковыми роботами данного документа- Может принимать значения:
- ALL – индексировать всё.
- INDEX – индексировать эту страницу.
- FOLLOW – индексировать ссылки на этой странице.
- NONE – не индексировать, игнорировать полностью.
- NOINDEX – не индексировать, игнорировать эту страницу.
- NOFOLLOW – не индексировать ссылки на этой странице.
- <META name=”Description” content=”Содержание“>
Краткое однострочное описание содержания документа. - <META name=”Document-state” content=”Dynamic“>
Определяет единовременную либо постоянную индексацию документа поисковыми системами.- Может принимать значения:
- Static – индексировать единожды.
- Dynamic – индексировать многократно.
- <META name=”Generator” content=”Название“>
Название приложения, в котором был создан документ. - <META name=”Copyright” content=”Условия“>
Условия копирования и распространения документа.
Определение стиля страницы с помощью <STYLE>
Применение дескрипторов <STYLE> и </STYLE> само по себе является отдельным способом форматирования документа, когда текст форматируется целиком автоматически. Между дескрипторами <STYLE> и </STYLE> указывается описание стилей документа HTML, определяющих свойства элементов, классов, идентификаторов и общих стилей. Внутри дескриптора <STYLE> должны находиться атрибуты:
- TYPE
Атрибут описывает тип таблиц стилей.
Например: <STYLE TYPE=”text/javascript“> - media
Позволяет указать информацию о том под какое из устройств вывода стилизован документ, например:- screen
Указывает на экраны компьютеров, не разделенные на страницы. - tty
Указывает на носители с фиксированной сеткой для символов, таких как телетайпы, терминалы или переносные устройства с ограниченными возможностями отображения. - tv
Указывает на устройства типа телевизора (низкое разрешение, цвета, ограниченные возможности прокрутки). - projection
Указывает на всевозможные проекторы. - handheld
Указывает на карманные устройства (небольшой экран, монохромный, растровая графика, ограниченный диапазон). - print
Указывает на страничные, непрозрачные материалы и документы, просматриваемые на экране в режиме предварительного просмотра печати. - braille
Указывает на тактильные устройства с алфавитом Бройля (для незрячих). - aural
Указывает на синтезаторы речи. - all
Указывает на все устройства используется в случае, если разработчик предоставляет различные варианты с возможностью выбора.
- screen
Элемент <BODY>
Элемент <BODY> предназначается для выделения той части документа, которая будет визуализирована для пользователя. Он имеет как начальный, так и конечный теги. Начальный тег <BODY> может иметь несколько атрибутов .
Вложенные атрибуты элемента <BODY>
- BACKGROUND
Атрибут задает графическое изображение, которое как черепица заполнит фон документа.Файл с изображением должен быть сохранен в формате GIFилиJPEG .
Синтаксис: <BODY BACKGROUND=”(URL)(путь) имя файла“>
Вданном случае файл с изображением фона лучше размещать в том же каталоге, что и сам файл, тогда (URL) и (путь) указывать не нужно. - BGCOLOR
Этот атрибут задает цвет фона документа при помощи шеснадцатеричных значений интенсивности цветов RGB , или при помощи строчного литерала,соответсвующего названию цвета.
Синтаксис: <BODY BGCOLOR=”#ff0000“> или <BODY BGCOLOR=”RED“>
- TEXT
Этот атрибут задает используемый по умолчанию цвет текста, который не является гиперссылкой.По умолчанию такой текст будет черным.
Синтаксис: <BODY TEXT=” цвет “>
- LINK
Этот атрибут задает цвет гиперссылки, в большенстве броузеров он задан по умолчанию темно синим.
Синтаксис: <BODY LINK=”цвет” >
- ALINK
Этот атрибут задает цвет активной гиперссылки, он меняет цвет гиперссылки в момент щелчка по ней мышью,не желательно задавать ему цвет фона по понятным причинам.
Синтаксис: <BODY ALINK=”цвет” >
- VLINK
Этот атрибут задает цвет посещенной гиперссылки, не желательно задавать ему цвет фона и цвет атрибута LINK по понятным причинам.
Синтаксис: <BODY VLINK=”цвет” >
- BGPROPERTIES
Этот атрибут задает свойства фонового изображения .В данный момент браузерами поддерживается единственное его значение fixed,запрещающее скролинг изображения .
Синтаксис: <BODY BGPROPERTIES=”fixed” >
- TOPMARGIN
Этот атрибут задает верхнюю границу страницы в пикселах .
Синтаксис: <BODY TOPMARGIN=число >
- BOTTOMMARGIN
Этот атрибут задает нижнюю границу страницы в пикселах .
Синтаксис: <BODY BOTTOMMARGIN=число >
- LEFTMARGIN
Этот атрибут задает границу страницы в пикселах слева.
Синтаксис: <BODY LEFTMARGIN=число >
- RIGHTMARGIN
Этот атрибут задает границу страницы в пикселах справа.
Синтаксис: <BODY RIGHTMARGIN=число >
