Как определяется внешний вид html документа

HTML :: Физическое и логическое форматирование html-документа

В предыдущих версиях HTML элементы, отвечающие за форматирование документа, делились на две группы: элементы физического и логического форматирования. Однако в пятой версии языка все элементы физической разметки, которые не были удалены, изменили свое назначение и стали относиться к группе элементов логического форматирования.

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

Приведем описание тегов, которые в предыдущих версиях HTML можно было смело отнести к тегам физического форматирования:

Все перечисленные элементы формируются соответствующими парными тегами и отображаются браузерами как строчные элементы.

Использование перечисленных элементов разметки показано в примере №1 .

HTML Результат htmlCodes

      Я – просто жирный текст. 
Я – курсивный. 
Я – подчеркнутый. 
Я – зачеркнутый. 
А вот это выражение похоже на странную формулу: 
aверхний индекс + bнижний индекс.
 
Для изменения внешнего вида используйте не нас, а стили CSS!  

Пример №1. Использование элементов физической разметки

Как видим, указанные теги вполне можно было бы использовать для физической разметки документа. Тем более, что сами названия явно указывают на предназначение элементов: italic, bold, underline и т.д. Однако все это пережитки старых версий, и применять какие-либо теги только лишь для изменения внешнего вида текста крайне не рекомендуется. Ведь в HTML 5 все теги имеют логическую нагрузку, хотя отношение некоторых из них к логическим и выглядит несколько натянутым. Однако в любом случае, теперь HTML 5 практически полностью используется в веб-программировании, как инструмент логической разметки документа, а за внешний вид отвечает CSS .

Логическое форматирование html-документа

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

Приведем описание тегов логического форматирования:

Все перечисленные элементы также формируются соответствующими парными тегами и отображаются браузерами как строчные элементы (см. пример №2 ).

HTML Результат htmlCodes

       
PHP – скриптовый язык общего назначения. 
Узнайте, как расшифровывается аббревиатура PHP, наведя на нее курсор. 
Хотя первоначально аббревиатура PHP означала Personal Home Page Tools, 
теперь ее стоит расшифровывать как Hypertext Preprocessor. 
Давайте посмотрим на фрагмент кода PHP: echo "Всем привет от PHP!";. 
Как сказал автор кода на своей страничке http://www.fdpppdf.com: 
Великий код!. 
Для запуска кода нажмите на клавиатуре ALT+SHIFT+«Поехали!». 
На экран будет выведено приветствие: «Всем привет от PHP!». 
Убедились? Оператор echo – это сила! Все права на пример защищены марсианским законодательством.   

Пример №2. Использование элементов логической разметки

Не смотря на то, что при логической разметке внешний вид форматируемого текста по умолчанию не всегда устраивает разработчика, изменить его не составляет труда при помощи стилей CSS . При этом логика разметки никоим образом не пострадает, и для поисковых машин такие изменения не будут считаться решающими.

В завершение пункта отдельно приведем описание еще двух элементов логической разметки документа:

Использование данных элементов показано в примере №3 .

HTML Результат htmlCodes

      
Бернард Шоу
 
Мир настолько сгнил, что даже влюбиться в кого-то — 
это самый большой риск, который мы можем себе позволить. 
Нас сжимает изнутри от вероятности, что это окажется не 
взаимно или агрессивно воспринято. Люди разучились любить, 
миром правят потребительские отношения.
 
Связаться с автором цитаты не получится.
   

Пример №3. Использование элементов «address» и «blockquote»

Быстрый переход к другим страницам

• Элементы «span» и «div»
• Физическое и логическое форматирование html-документа
• Cписки в HTML
• Вернуться к оглавлению учебника

html.okpython.net Copyright © 2016-2023.

Информатика

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

HTML не является языком программирования, но веб-страницы могут содержать встроенные или загружаемые программы на скриптовых языках (в первую очередь Javascript) и программы-апплеты на языке Java.

HTML-документ состоит из текста, который представляет собой информационное содержимое и специальных средств языка HTML — тегов разметки, которые определяют структуру и внешний вид документа при его отображении браузером. Структура HTML-документа довольно проста:

1.Описание документа начинается с указания его типа (секция DOCTYPE).

2.Текст документа заключается в тег . Текст документа состоит из заголовка и тела, которые выделяются соответственно тегами и .

В заголовке () указывают название HTML-документа и другие параметры, которые браузер будет использовать при отображении документа.

Тело документа () — это та часть, в которую помещается собственно содержимое HTML-документа. Тело включает предназначенный для отображения текст и управляющую разметку документа (теги), которые используются браузером.

Наличие секции DOCTYPE позволяет указать браузеру, какой тип документа ему предстоит разбирать, т.е, какие требования нужно выполнять при обработке гипертекста.

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

Блок содержит то, что нужно показать пользователю: текст, изображения, внедренные объекты и пр.

Стандарт требует, чтобы секция DOCTYPE присутствовала в документе, т.к. это позволяет ускорить и улучшить обработку гипертекста. Это достигается за счет того, что браузер может не делать предположений о том, как интерпретировать теги, а свериться со стандартным определением (файлом .dtd).

Мета-тег HTML — это элемент разметки html, описывающий свойства документа как такового (метаданные). Назначение мета-тега определяется набором его атрибутов, которые задаются в теге . Мета-теги размещают в блоке . веб-страницы. Они не являются обязательными элементами, но могут быть весьма полезны.

Тег (html-тег, тег разметки) — управляющая символьная последовательность, которая задает способ отображения гипертекстовой информации. HTML-тег состоит из имени, за которым может следовать необязательный список атрибутов. Весь тег (вместе с атрибутами) заключается в угловые скобки <>:

Как правило, теги являются парными и состоят из начального и конечного тегов, между которыми и помещается информация. Имя конечного тега совпадает с именем начального, но перед именем конечного тега ставится косая черта / (. ). Конечные теги никогда не содержат атрибутов. Некоторые теги не имеют конечного элемента, например тег . Регистр символов для тегов не имеет значения.

Примеры часто используемых тегов HTML:
. — контейнер гипертекста
. — контейнер заголовка документа
— название документа (то, что отображается в заголовке окна браузера)
. — контейнер тела документа

— контейнер общего назначения (структурный блок)
. — заголовок N-ного уровня(N = 1. 6)

.

— основной текст
. — гиперссылка

.

— нумерованный список

.

— маркированный список

. — элемент списка

.

— контейнер таблицы

.

— строка таблицы

.

— ячейка таблицы
. — изображение

.

— форма
. — отображение текста курсивом
. — отображение текста полужирным шрифтом
. — выделение (курсивом)
. — усиление (полужирным шрифтом)
— принудительный разрыв строки

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

Атрибуты — это пары вида «свойство = значение», уточняющие представление соответствующего тега:<тег атрибут="значение">. Атрибуты указывают в начальном теге, несколько атрибутов разделяют одним или несколькими пробелами, табуляцией или символами конца строки. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Порядок записи атрибутов в теге не важен. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в кавычки, особенно если они содержат несколько разделенных пробелами слов.

Краткий список некоторых часто используемых атрибутов и их возможных значений:
style=»описание_стилей» — локальные стили
src=»https://psk68.ru/files/metod/uchebnik_Informatika/%D0%B0%D0%B4%D1%80%D0%B5%D1%81″ — адрес (URI) источника данных (например картинки или скрипта)
align=»left|center|right|justify» — выравнивание, по умолчанию left (по левому краю)
width=»число» — ширина элемента (в пикселях, пиках, поинтах и др.)
height=»число» — высота элемента (в пикселях, пиках, поинтах и др.)
href=»адрес» — гиперссылка, адрес (URI) на который будет выполнен переход
name=»имя» — имя элемента
id=»идентификатор» — уникальный (в пределах веб-страницы) идентификатор элемента
size=»число» — размер элемента
class=»имя_класса» — имя класса во встроенной или связанной таблице стилей
title=»строка» — название элемента
alt=»строка» — альтернативный текст

Гиперссылка — это особым образом помеченный фрагмент веб-страницы (текст, изображение и др.), который связан с другим документом. Для указания гиперссылок используется тег . Гиперссылки позволяют перемещаться между связанными веб-страницами.

Переход по ссылкам можно выполнять как на целые документы, так и на специальным образом помеченные (именованные) фрагменты текста. Ссылки могут быть абсолютными и относительными. Абсолютные ссылки указывают, как правило, на внешний ресурс. Для них нужно указывать полный путь:

Относительные ссылки, напротив, используют для перехода на внутренние страницы сайта. Для них нужно указывать путь относительно ссылающейся страницы:

Кроме тегов, в HTML-документах могут присутствовать и специальные символы. Например, © — знак авторского права. Для отображения специальных символов используется мнемонический или числовой код вида &имя; или &#NNNN;, где NNNN — код символа в Юникоде в десятеричной системе счисления. Например: & (числовой код ©) — амперсанд (&), < — символ «меньше» (<) и > — символ «больше» (>), « — левая типографская кавычка («) и т.д.

Разнообразие браузеров и различия в их функциональности, а также изначальная ориентация HTML на поддержку различных устройств вывода, приводит разработчиков веб-сайтов к необходимости решения вопроса о кросс-браузерности. Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентичн. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Термин «кросс-браузерность» начали использовать во время браузерных войн, начавшихся с серидины 90-х годов XXв. В этом контексте термин относился к сайтам, которые одинаково работают как в Internet Explorer, так и в Netscape Navigator. В то время производители стали внедрять собственные функции для браузеров, что привело к существенным отличиям отображения веб-содержимого и концептуальным различиям в разработке веб-сайтов. В настоящее время ситуация смягчилась (отчасти из-за ухода с рынка Netscape), но не настолько, чтобы можно было говорить о близком окончании браузерных войн.

Как определяется внешний вид html документа

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

HTML-документ — это один большой контейнер, который начинается с тега и заканчивается тегом :

Содержание документа 

Контейнер HTML или гипертекстовый документ состоит из двух других вложенных контейнеров: заголовка документа (HEAD) и тела документа (BODY). Рассмотрим простейший пример классического документа.

Компания Netscape Communication расширила классическую форму документа возможностью организации фреймов (кадров), позволяющих разделить рабочее окно программы просмотра на несколько независимых фреймов. В каждый фрейм можно загрузить свою страницу HTML. Приведем пример документа с фреймами.

Назначение заголовка

Заголовок HTML-документа является необязательным элементом разметки. В HTML 2.0 предлагалось вообще отказаться от элементов HEAD и BODY. В то время в HTML не было элементов, которые использовались одновременно и в заголовке, и в теле документа. Современная практика HTML-разметки такова, что почти в каждом документе есть HTML-заголовок.

Первоначально существование заголовка определялось необходимостью именования окна браузера. Это достигалось за счет элемента разметки TITLE:

   . .  

Отображение содержания элемента TITLE

Однако задумывался заголовок для несколько иных целей. Исходя из общих соображений, связанных с теорией и практикой разработки и эксплуатации гипертекстовых систем, все гипертекстовые связи информационных узлов принято разделять на контекстные и общие.

Контекстные гипертекстовые связи соответствуют определенному месту документа — контексту. В HTML такие связи реализованы в виде гипертекстовых ссылок (элемент A (anchor)). Фактически до реализации таблиц описателей стилей в современных браузерах это был единственный вид связей, которыми мог управлять автор HTML-документа.

Общие гипертекстовые связи определяются не частью документа (контекстом), а всем документом целиком. Например, быть предыдущим по отношению к другому документу или следующим — это общая гипертекстовая связь, которая позволяет организовать так называемый «линейный» просмотр информационных узлов гипертекстовой сети.

Реализация такого сорта ссылок уже давно является частью проектов W3C (Arena, Amaya). В коммерческих браузерах такой механизм реализован только для описателей стилей (элемент разметки LINK).

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

Еще одной функцией заголовка HTML-документа является управление HTTP-обменом через элемент разметки META. При современной практике размещения Web-узлов компаний на серверах провайдеров администраторы этих узлов могут не иметь возможности управлять программой-сервером. В этом случае для управления обменом остается только одна возможность — через заголовок HTML-документа.

Нельзя также не упомянуть еще об одном важном назначении заголовка HTML-документа — поисковом образе документа для индексирования роботами поисковых систем. Элемент META позволяет хранить списки ключевых слов и описания документа, которые будут использоваться для составления индекса поисковой системы и появляться в качестве описания документа в случае выдачи ссылки на него при поиске по ключевым словам.

Основные контейнеры заголовка

Основные контейнеры заголовка — это элементы HTML-разметки, которые наиболее часто встречаются в заголовке HTML-документа, т.е. внутри элемента разметки HEAD.

Мы рассмотрим только восемь элементов разметки, включая сам элемент разметки HEAD:

• HEAD (элемент разметки HEAD);
• TITLE (заглавие документа);
• BASE (база URL);
• ISINDEX (поисковый шаблон);
• META (метаинформация);
• LINK (общие ссылки);
• STYLE (описатели стилей);
• SCRIPT (скрипты).

Чаще всего применяются элементы TITLE, SCRIPT, STYLE. Использование элемента META говорит об осведомленности автора о правилах индексирования документов в поисковых системах и возможности управления HTTP-обменом данными. BASE и ISINDEX в последнее время практически не применяются. LINK указывают только при использовании внешних относительно данного документа описателей стилей.

Элемент разметки HEAD

Элемент разметки HEAD содержит заголовок HTML-документа. Данный элемент разметки не является обязательным. При наличии тега начала элемента разметки желательно использовать и тег конца элемента разметки. По умолчанию элемент HEAD закрывается, если встречается либо тег начала контейнера BODY, либо тег начала контейнера FRAMESET. Атрибутов у тега начала контейнера нет, хотя в DTD HTML один необязательный атрибут прописан. Синтаксис контейнера HEAD в общем виде выглядит следующим образом:

Сайт УрГПУ 

Контейнер заголовка служит для размещения информации, относящейся ко всему документу в целом. Необязательный атрибут PROFILE указывает на внешний файл META-тегов. В качестве значения этого атрибута указывается URL данного файла.

Элемент разметки TITLE

Элемент разметки TITLE служит для именования документа в World Wide Web. Более прозаическое его назначение — именование окна браузера, в котором просматривается документ. Состоит контейнер из тега начала, содержания и тега конца. Наличие тега конца обязательно. Тег начала элемента не имеет специфических атрибутов.

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

     .   

Такой механизм на современных компьютерах не работает. При этом следует учитывать, что в отличие от реализации «бегущей» строки средствами JavaScript, лидирующие пробелы в заголовке игнорируются.

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

Синтаксис контейнера TITLE в общем виде выглядит следующим образом:

Заголовок не является обязательным контейнером документа. Его можно опустить. Роботы многих поисковых систем используют содержание элемента TITLE для создания поискового образа документа. Слова из TITLE попадают в индекс поисковой системы. Из этих соображений элемент TITLE всегда рекомендуется использовать на страницах Web-узла.

Элемент разметки BASE

Элемент разметки BASE служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной (частичной) форме. Кроме того, BASE позволяет определить мишень (окно) загрузки документа по умолчанию при выборе гипертекстовой ссылки текущего документа.

Разметка гипертекстовых ссылок обычно выполняется как разметка в частично заданных (относительных) адресах, когда URL задается относительно текущего местоположения документа.

В этом случае в качестве базы по умолчанию выбирается каталог, в котором размещен HTML-документ (../). Такой стиль разметки удобен тем, что при переносе всего дерева документов в другое место не потребуется менять систему гипертекстовых ссылок внутри документов. Кроме того, распространению этого стиля способствует и сама архитектура World Wide Web. Наиболее тесные связи между документами задаются только в рамках одного Web-узла. Связей данного узла с остальными существенно меньше, и их можно прописать непосредственно в ссылках в полной форме.

Контейнер BASE можно использовать вне документа, в заголовке или теле документа. При этом область действия базового адреса определяется от места размещения контейнера до следующего контейнера BASE.

Наиболее часто BASE встречается на страницах узлов, которые имеют «зеркала». Часть документов основного сервера по разным причинам на «зеркальный» сервер не переносится. В этом случае документ с принудительно заданным базовым URL всегда будет ссылаться на основной сервер. Он оказывается «белой вороной» среди прочих документов Web-узла. При этом такая схема часто используется вместе с запретом на кэширование данного документа как клиентом (браузером), так и proxy-серверами.

Существуют различия и при определении базового URL по умолчанию при обращении к страницам, которые различны по своей природе. Если для обычного файла базовым адресом по умолчанию является адрес каталога, где хранится данный файл, то для страниц, которые генерируются «на лету», возможны и другие базовые адреса по умолчанию. Например, для страниц, сгенерированных CGI-скриптом, адресом по умолчанию является URL данного скрипта. Если из такой страницы снова вызвать скрипт, как частично заданную ссылку, то имя скрипта будет передано в качестве параметра скрипту, который сгенерировал данную страницу.

Базовый адрес: http://uspu.ru/cgi-bin/script/uspu.ru

Если скрипт вызовет сам себя по частично заданной ссылке, то он себя не найдет.

Возможность определения мишени загрузки позволяет не указывать атрибут TARGET в теге начала контейнера A (anchor):

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

Особенно полезен атрибут TARGET на страницах с вызовом скриптов, если результат работы скрипта нужно загрузить в определенное окно (фрейм).

Тег начала контейнера содержит один обязательный атрибут HREF, и может содержать один необязательный атрибут TARGET. Синтаксис контейнера BASE в общем виде выглядит следующим образом:

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

Элемент разметки ISINDEX

Элемент разметки ISINDEX используется для указания поискового шаблона и унаследован от ранних версий HTML. В HTML 4.0 этот контейнер не определен. Утрата данного контейнера объясняется широким применением форм и CGI-скриптов. Тем не менее все браузеры его поддерживают.

Шаблон ввода ключевых слов при наличии данного контейнера в заголовке HTML-документа отображается в виде дополнительного поля ввода рабочей области браузера, что нарушает компоновку HTML-страниц, выполненных с применением современных средств разметки. Больше всего ISINDEX подходит для документов с компоновкой в стиле HTML 2.0.

Применение элемента ISINDEX

В классическом варианте при использовании ISINDEX список ключевых слов, которые вводятся в поисковом шаблоне и разделены символом «+», присоединяется к базовому адресу HTML-документа после символа «?».

http://uspu.ru/isindex.html?keyword+list

Очевидно, что сам HTML-документ не способен выполнить поиск. Это может сделать только поисковая программа.

Присоединение запроса к документу унаследовано от первого сервера CERN (Conseil Europeen pour la Recherche Nucleaire, Европейская организация по ядерным исследованиям), в котором оно использовалось по аналогии с поисковыми серверами Gopher. Современный подход, основанный на HTML-формах, позволяет указывать URL поисковой программы, что дает большую свободу при разметке страниц.

Современный синтаксис ISINDEX позволяет применить аналогичный формам подход. Для этой цели в теге начала контейнера ISINDEX можно указать атрибут ACTION.

Однако и традиционная форма контейнера позволяет обращаться к внешним CGI-скриптам. Сделать это можно либо в совокупности с контейнером BASE, либо с использованием SSI.

В первом случае для всего документа устанавливается базовый URL поисковой программы. Все URL гипертекстовых ссылок на другие страницы задаются в полной форме или базовый адрес переназначается после ISINDEX. Это вполне оправдано, если данная страница ничего, кроме поискового критерия и ссылки на домашнюю страницу Web-узла, не содержит.

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

Тег начала элемента может содержать два необязательных атрибута: ACTION и PROMPT. Синтаксис элемента ISINDEX в общем виде выглядит следующим образом:

Первый необязательный атрибут тега начала ISINDEX — PROMPT. Он позволяет вместо стандартного приглашения к вводу ключевых слов задать приглашение, которое, по мнению автора документа, лучше отражает суть поискового шаблона. Например, можно задать приглашение к вводу ключевых слов на русском языке.

Введите ключевые слова:

Применение атрибута PROMPT

ISINDEX — отмирающий элемент разметки. Однако он определил формат обмена данными ISINDEX. Данные в этом формате передаются от браузера серверу в случае применения ISINDEX и в случае прямого указания дополнительных параметров после символа «?» в гипертекстовой ссылке.

Элемент разметки META

Это наиболее популярный элемент разметки заголовка, более распространен только элемент TITLE. Такое положение дел объясняется назначением данного элемента разметки. META содержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания тела документа.

Впервые контейнер META был задействован при принудительной перезагрузке документа браузером через заголовок HTTP-сообщения. В заголовке HTTP-сообщения можно указать оператор refresh. Время, заданное как параметр этого оператора, определяет интервал в секундах, после которого браузер загружает документ, определенный атрибутом URL данного оператора. Впервые этот механизм был реализован на сервере CERN, но наибольшую популярность приобрел при использовании сервера WN (Web-сервер, который был разработан для платформы Linux).

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

В данном случае через одну секунду после загрузки документа браузер должен инициировать загрузку страницы refresh.htm.

Используя этот механизм, можно построить автоматически перезагружаемую последовательность страниц. Для этого в заголовке каждой страницы из данной последовательности следует разместить соответствующий контейнер META.

Заглавная буква «Х» в слове «refreshX.htm» — это цифра номера кадра. На странице нулевого кадра в этом месте следует указать на первый кадр (refresh1.htm), на странице первого кадра — на второй (refresh2.htm) и т.д.

В Windows 95 и Windows NT 4.0 с поддержкой таблиц UNICODE появилась возможность указывать тип кодировки документа — CHARSET. К сожалению, на многих Unix-платформах этот механизм не работает, что часто приводит к ошибкам, например в IRIX версий 6.2-6.4. Скептическое отношение поклонников Unix к этой возможности ничем не подкреплено, так как основная масса пользователей российской части Internet просматривает документы World Wide Web в Windows. Для перекодировки на стороне клиента (документ подготовлен в кодировке cp1251) в заголовок документа необходимо включить META-тег следующего вида:

Приведенный выше пример показывает, как используются операторы заголовка HTTP-сообщения. Однако здесь тоже следует быть осторожным. Большинство российских Web-узлов используют в качестве HTTP-сервера Russian Apache. Эта модификация сервера поддерживает перекодировку документов «на лету» для правильного отображения на стороне клиента. Russian Apache сам вставляет в HTTP-заголовок (не путать с HEAD) директиву Content-type. Если в документе будет META-элемент c указанием типа кодировки, а Apache перекодировал содержание, то возможно несоответствие между указанным в META типом кодировки и реальной кодировкой содержания документа.

Кроме Content-type, можно указать и другие операторы. Например, запретить кэширование документа. Необходимость в этом возникает при частом обновлении документа или наличии в нем изменяющихся SSI-вставок. Для запрета кэширования достаточно вставить в заголовок META-тег вида:

Pragma — это наследие HTTP 1.0. В новой версии протокола HTTP (HTTP 1.1) управление кэшированием осуществляется через оператор Cache-Control. Для получения такого же эффекта, как в случае с Pragma, в заголовке HTML-документа достаточно указать:

Новый механизм управления кэшированием и хранением документа на стороне клиента гораздо более гибок, чем в HTTP 1.0. Например, можно запретить хранение документа после пересылки:

Точно так же можно задать время последней модификации (Last-Modified) или дату истечения актуальности документа (Expire).

С появлением роботов поисковых машин на META-тег была возложена еще одна функция — описание поискового образа документа. Наиболее последовательно это было впервые реализовано в Webcrawler. До этого в качестве поискового образа документа использовался либо весь список слов документа, либо слова первого абзаца.

Собственно, для описания документа используется два META-тега. Один определяет список ключевых слов, а второй – реферат (краткое содержание документа), который отображается в качестве пояснения к ссылке на документ в отчете поисковой машины о выполненном запросе. Контейнер TITLE здесь также используется в качестве названия документа.

При индексировании такого документа содержимое контейнера TITLE и атрибутов CONTENT контейнеров META после фильтрации попадет в индекс поисковой машины и может быть использовано для составления запросов. Процесс фильтрации отбракует так называемые stop-слова и общие слова. Они не попадут в индекс поисковой машины. В частности, будут отбракованы предлоги или, если речь идет о тематическом поисковом индексе, например по технологиям World Wide Web, то в него не попадут: web, Web-технология и т.п.

META-тегом пользуются и программы подготовки документов. Они размещают в нем свой идентификатор. В общем случае контейнер META выглядит следующим образом:

Практика показывает, что при индексировании можно указывать одновременно и атрибут NAME, и атрибут HTTP-EQUIV с одинаковыми значениями. Это связано с тем, что одни роботы индексирования анализируют содержание META-элемента по атрибуту NAME, а другие — по атрибуту HTTP-EQUIV.

Элемент разметки LINK

Элемент разметки LINK – это результат давно предпринятой попытки придать HTML академический вид. Согласно теории гипертекстовых систем, все гипертекстовые связи разделяют на два типа: контекстные и общие. Такое деление чисто условное и определяется тем, что контекстную связь можно привязать к определенному месту документа, а общую — отнести только ко всему документу целиком. Если взглянуть на проблему связи чуть шире, то очевидной становится аналогия с отношениями. Гипертекстовая связь задает отношение на множестве информационных узлов.

Контекстная связь определяет отношение на паре узлов. При этом в модели World Wide Web один из узлов является источником, а второй — мишенью. Собственно, это и отражено в названии элемента разметки A (anchor), который определяет гипертекстовую ссылку (не путать с гипертекстовой связью). При этом в контекстной связи один и тот же термин может идентифицировать разные связи. Например, в контексте содержания конспекта данной темы слово «HEAD» определяет документ head.htm, который описывает контейнер HEAD и особенности его применения, а в контексте справочника по данной теме слово «HEAD» будет означать ссылку на описание синтаксиса этого контейнера.

Общие ссылки нельзя привязать по контексту. Например, два информационных узла находятся в отношении следования, т.е. при «линейном» просмотре одна Web-страница является следующей для другой Web-страницы. В этом случае речь идет о страницах целиком, а не об отдельных их частях. Такой же общей связью является принадлежность к Web-узлу, который ассоциируется со своей домашней страницей.

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

В настоящее время в браузерах не существует единого способа программирования или определения общих гипертекстовых связей. В течение последних пяти лет W3C строит уже второй браузер, который должен продемонстрировать возможность программирования икон меню браузера (вперед, назад и т.п.). Однако производители наиболее популярных браузеров такой поддержки через HTML-разметку в своих программах не предлагают.

Существенный сдвиг в этом направлении произошел после реализации поддержки описателей стилей в Netscape Navigator и Internet Explorer четвертых версий. CSS (Cascade STYLE Sheets, каскадные таблицы стилей) позволяют определять для различных типов гипертекстовых связей вид гипертекстовых ссылок. При этом можно определять различные типы контекстных ссылок. Кроме того, впервые нашел осмысленное применение контейнер LINK. Он позволил загружать внешние описатели стилей:

В данном случае речь идет о загрузке стилей из файла style.css. При этом стили задаются в нотации W3C, а не JavaScript, что определяется атрибутом TYPE. В сущности, атрибут REL определяет тип гипертекстовой связи, HREF (Нуреrtехt REFerence) указывает адрес документа, идентифицирующего связь, а атрибут TYPE определяет тип содержания этого документа.

В общем случае контейнер LINK имеет следующий вид:

Для разных типов содержания действия по интерпретации элемента разметки будут различными. В настоящее время идет процесс разработки спецификаций описания метаданных, где возможно применение элемента разметки LINK.

Элемент разметки STYLE

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

В настоящее время контейнер используется только с одним атрибутом TYPE, который задает тип описателя стиля. Это может быть либо text/css , либо text/javascript. Если элемент разметки открыт тегом начала, то он должен быть закрыт тегом конца. В общем виде запись элемента STYLE выглядит так:

Применению стилей в HTML-разметке, а также проектированию Web-узлов с применением CSS посвящена отдельная глава «Применение каскадных таблиц и стилей».

Элемент разметки SCRIPT

Элемент разметки SCRIPT служит для размещения кода JavaScript, VBScript или JScript. Вообще говоря, SCRIPT можно использовать не только в заголовке документа, но и в его теле. В отличие от контейнера STYLE, ему не требуется дополнительный контейнер LINK для загрузки внешних файлов кодов. Это можно сделать непосредственно в самом контейнере SCRIPT:

Если открыт тег начала, то нужно обязательно использовать тег конца контейнера. В противном случае, браузер может отобразить только символ «]». Если код не помещен в HTML-комментарии, то старые версии браузеров (до Mozilla 2) отображают программу перед текстом страницы. В ряде случаев страница вообще может не отображаться.

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

Существует несколько скриптовых языков: JavaScript, VBScript, JScript. По умолчанию подразумевается JavaScript.

1.1. Основы HTML

Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.

HTML-документ — это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот), так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.). HTML-документ имеет расширение .html .

HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).

Начальный тег показывает, где начинается элемент, конечный — где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем элемента: … . Между начальным и закрывающим тегами находится содержимое элемента — контент.

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

Элементы могут вкладываться друг в друга, например,

Текст

. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки»), например, следующая запись будет неверной:

Текст

.

HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута=»значение» . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.

Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.

Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы — заголовки, таблицы, изображения и т.д.

Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.

HTML-документ состоит из двух разделов — заголовка — содержимое элемента и содержательной части — содержимое .

Структура веб-страницы

• Содержание:
• 1. Структура HTML-документа
• 1.1. Элемент
• 1.2. Элемент
• 1.2.1. Элемент
• 1.2.2. Элемент
• 1.2.3. Элемент
• 1.2.4. Элемент
• 1.2.5. Элемент
• 1.3. Элемент

1. Структура HTML-документа

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие элементы, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

Элементы, находящиеся внутри элемента , образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент является корневым элементом.

Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.

• Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем элементов: ,

  , , и т.д.

• Потомок — элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент

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

• Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 является родительским только для и . Элемент

  является родительским только для .

• Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,

  и являются дочерними по отношению к .

• Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и

  являются между собой сестринскими.

1.1. Элемент

Является корневым элементом документа. Все остальные элементы содержатся внутри . . Все, что находится за пределами элемента, не воспринимается браузером как HTML-код и никак им не обрабатывается.

Для элемента доступен атрибут, описанный в таблице ниже, а также ‎глобальные атрибуты.

Таблица 1. Атрибут элемента

Атрибут	Описание, принимаемое значение
manifest	С помощью значения атрибута указывается путь к документу кэша манифеста, например:

1.2. Элемент

Раздел . содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.

1.2.1. Элемент

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

Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.

1.2.2. Элемент

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

Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.

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

С помощью элемента можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Индексация и переход по ссылкам разрешены:

Индексация разрешена, переход по ссылкам запрещен:

Индексация и переход по ссылкам запрещены:

Для автоматической перезагрузки страницы через заданный промежуток времени (например, через 30 секунд) нужно воспользоваться значением refresh :

Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url :

Для элемента доступны атрибуты, описанные в таблице ниже, а также ‎глобальные атрибуты.

Таблица 2. Атрибуты элемента

Атрибут	Описание, принимаемое значение
charset	Указывает кодировку символов для текущего HTML-документа:
content	Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name , в зависимости от их значения.
http-equiv	Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента , содержащего таблицу стилей. refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка «url=адрес_страницы» . Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд: Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url :
name	Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop . application-name указывает название веб-приложения, используемого на странице. author указывает имя автора документа в свободном формате. description определяет краткое описание к содержимому страницы, например: generator указывает один из пакетов программного обеспечения, используемого для создания документа, например: . keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например: . Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято.

1.2.3. Элемент

Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.

Для элемента доступны атрибуты, приведенные в таблице ниже, а также ‎глобальные атрибуты.

Таблица 3. Атрибуты элемента

Атрибут	Описание, принимаемое значение
media	Определяет, для какого типа устройства предназначены те или иные каскадные таблицы стилей. Внутри таблицы стилей CSS специфичные правила для определенных устройств прописываются с помощью media query.
nonce	Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
type	Определяет MIME-тип подключаемого файла со стилями, в данном случае type=»text/css» .

Элемент может содержать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.

 .paper 

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id ) присвоить элементу соответствующее название:

CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:

1.2.4. Элемент

Задать стили для документа можно также при помощи другого способа — записать их в отдельный файл с расширением .css , например, style.css .

Подключить файл со стилями к веб-странице можно двумя способами:

• через директиву @import url
• с использованием элемента . Данный способ является предпочтительным.

Элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько.

Для элемента доступны атрибуты, приведенные в таблице ниже, а также ‎глобальные атрибуты.

Таблица 4. Атрибуты элемента

Атрибут	Описание, принимаемое значение
crossorigin	Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта. anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована. use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true , то загрузка изображения будет заблокирована.
href	Основной атрибут элемента, в качестве значения выступает путь к файлу со стилями.
hreflang	Определяет язык текста в документе, на который идет ссылка.
media	Определяет тип устройства, к которым должен быть применен ресурс ссылки.
nonce	Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
rel	Атрибут определяет отношения между текущим документом и документом, на который идет ссылка. alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom), . archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов. author ссылка на страницу об авторе документа или на страницу с контактными данными автора. bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка. external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта. first указывает ссылку, ведущую на первый документ из последовательности документов. help ссылка на документ со справкой. icon определяет путь к иконке, которая будет использована для текущего документа. last указывает ссылку, ведущую на последний документ в последовательности документов. license ссылка на сведения об авторских правах для документа. next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии. nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер. noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке. pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него. prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка. prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии. search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов. sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок. stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа. tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу. up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре.
sizes	Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel=»icon» , и может принимать следующий значения: ширина х высота — определяет список размеров, разделенных пробелами, каждый размер должен быть в формате — ширина х высота (размеры иконки задаются в пикселях), например: ; any — иконка может масштабироваться до любого размера.
title	Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст.
type	Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение «text/css» .

1.2.5. Элемент

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

Для элемента доступны атрибуты, приведенные в таблице ниже, а также ‎глобальные атрибуты.

Таблица 5. Атрибуты элемента

Атрибут	Описание, принимаемое значение
async	Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы).
charset	Определяет кодировку символов
crossorigin	Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src). anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена , скрипт не будет загружен. use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true , скрипт не будет загружен.
defer	Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя.
nonce	Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется.
src	Указывает на месторасположение файла со сценарием, значение атрибута — это url файла, содержащего JavaScript-программу.
type	Используются для объявления языка сценария, использованного при составлении содержимого элемента.

1.3. Элемент

В разделе располагается все содержимое документа.

Для элемента доступны атрибуты, приведенные в таблице ниже, а также ‎глобальные атрибуты.

Таблица 5. Атрибуты элемента

Атрибут	Описание, принимаемое значение
onafterprint	Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати.
onbeforeprint	Событие, срабатывающее перед отправкой страницы на печать.
onbeforeunload	Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу.
onhashchange	Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2 .
onmessage	Событие происходит, когда сообщение получено через источник события.
onoffline	Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало.
ononline	Событие вызывается браузером в том случае, когда соединение с интернет возобновилось.
onpagehide	Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д.
onpageshow	Событие происходит, когда пользователь переходит на веб-страницу, после события onload.
onunload	Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера.