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

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

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

<head>

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

</head>

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

Метатеги

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

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

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

Метатеги имеют следующие параметры [2, 13]:

· сontent – устанавливает значение параметра, заданного с помощью name или http-equiv;

· http-equiv –браузеры преобразовывают значение параметра http-equiv, заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.

Ниже приведены некоторые допустимые аргументы параметра http-equiv.

o сontent-еype – тип кодировки документа;

o expires – устанавливает дату и время, после которой информация в документе будет считаться устаревшей;

o pragma – способ кэширования документа;

o refresh – загрузить другой документ в текущее окно браузера.

· name –устанавливает идентификатор метатега для пары «имя=значение». Одновременно использовать параметры name и http-equiv не допускается.

Ниже приведены некоторые допустимые аргументы параметра name.

o author – имя автора документа;

o description – описание текущего документа;

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

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

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

Строка

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

Строка

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

Строка

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

Строка

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

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

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

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

Link

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

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

Параметры [2, 14]:

· href – путь к файлу, на который делается ссылка (URL), в качестве значения принимается полный или относительный путь к файлу;

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

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

o application/rss+xml – файл в формате XML для описания ленты новостей, анонсов статей.

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

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

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

o all – все устройства;

o screen (значение по умолчанию) – экран монитора;

o print – печатающее устройство вроде принтера;

o projection – проектор;

o braille – устройства, основанные на системе Брайля, которые предназначены для слепых людей;

o speech – речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

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

определяет ссылку на фавикон нашей страницы (Рис. 2.3).

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

Строки

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

Script

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

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

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

Параметры [2, 15]:

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

· language– устанавливает язык программирования, на котором написан скрипт.

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

o JavaScript (значение по умолчанию) – язык программирования JavaScript. К этому параметру часто еще присоединяют номер версии, например – JavaScript1.3.

o JScript – разновидность языка JavaScript разработанная компанией Microsoft. Смена названия продиктована тем, что имя JavaScript уже было зарегистрировано, при этом различия между языками состоят не только в названии, но и в подходах.

o VBS, VBScript - язык программирования VBScript основанный на Visual Basic. Является продуктом Microsoft и поддерживается преимущественно браузером Internet Explorer.

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

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

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

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

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

o text/vbscript – для языка VBScript.

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

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

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

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

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

DIV

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

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

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

Параметры [2, 16]:

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

o center – выравнивание текста по центру;

o left (значение по умолчанию) – выравнивание текста по левому краю;

o right – выравнивание текста по правому краю;

o justify – выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю.

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

Таблица

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

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

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

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

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

· одну таблицу допускается помещать внутрь ячейки другой таблицы;

· размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек;

· если для таблицы задана ее ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры;

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

· пока таблица не загрузится полностью, ее содержимое не начнет отображаться;

· таблица, если не указано особо, всегда выравнивается по левому краю;

· по умолчанию таблица выводится без рамки;

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

Табл. 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>).

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

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

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

· поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка.

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

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

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

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

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

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

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

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

Ссылки

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

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку [19]. Оба действия выполняются с помощью тега <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>

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

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

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

· круг (по умолчанию) – <ul type="disc">;

· окружность – <ul type="circle">;

· квадрат – <ul type="square">.

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

· арабские цифры;

· заглавные латинские буквы;

· строчные латинские буквы;

· заглавные римские цифры;

· строчные римские цифры.

Абзацы

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

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

Изображения

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

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

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

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

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

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

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

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

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

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

Дата добавления: 2016-02-04; просмотров: 680;