С помощью какого тега размечают блок в котором находится отображаемая часть документа
В этой лекции разбираются типовая структура 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.
HTML. Лекция 3. Контейнеры тела документа
В этой лекции рассказывается об элементах разметки тела HTML-документа, подробно разбирается их типизация, назначение и применение.
Теги тела документа
Теги тела документа предназначены для управления отображением информации в программе интерфейса пользователя. Они описывают гипертекстовую структуру базы данных при помощи встроенных в текст контекстных гипертекстовых ссылок. Тело документа состоит из:
- иерархических контейнеров и заставок;
- заголовков (от Н1 до Н6);
- блоков (параграфы, списки, формы, таблицы, картинки и т.п.);
- горизонтальных отчеркиваний и адресов;
- текста, разбитого на области действия стилей (подчеркивание, выделение, курсив);
- математических описаний, графики и гипертекстовых ссылок.
Тело документа – контейнер ВОDY
Описание тегов тела документа следует начать с тега ВОDY. В отличие от тега НEАD, тег ВОDY имеет атрибуты. Атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Так, если источником для фона HTML- документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:
Как видно из этого примера, в качестве значения данного атрибута используется адрес в сокращенной форме URL. В данном случае это адрес локального файла. Следует заметить, что разные интерфейсы пользователя поддерживают различные дополнительные атрибуты для тега ВОDY.
| Атрибут | Значение |
| ВGCOLOR=#FFFFFF | Цвет фона |
| ТЕХТ=#0000FF | Цвет текста |
| VLINK =#FF0000 | Цвет пройденных гипертекстовых ссылок |
| LINK =#00FF00 | Цвет гипертекстовой ссылки |
В данной таблице строка #ХХХХХХ определяет цвет в терминах RGB в шестнадцатеричной нотации. Также имеется возможность задавать цвета по названию. Далее в таблице приведены названия цветов, определенные в стандарте HTML 4 и соответствующие им RGB-коды. Отметим, что многие современные браузеры выходят за рамки стандартов и поддерживают гораздо больше названий цветов.
| Название | Код | Название | Код |
| aqua | #00FFFF | navy | #000080 |
| black | #000000 | olive | #808000 |
| blue | #0000FF | purple | #800080 |
| fuchsia | #FF00FF | red | #FF0000 |
| gray | #808080 | silver | #C0C0C0 |
| green | #008000 | teal | #008080 |
| lime | #00FF00 | white | #FFFFFF |
| maroon | #800000 | yellow | #FFFF00 |
Так, значения атрибутов в таблице 3.1 определяют цвет текста как синий, фона — белый, пройденные ссылки красные, а новые ссылки зеленые. Если в качестве атрибутов тега ВОDY указать
то цвет фона будет белым, текст будет синим, ссылки — зелеными, а пройденные ссылки станут красными. Однако пользоваться этими атрибутами следует крайне осторожно, так как у пользователя может оказаться другой интерфейс, который эти параметры не интерпретирует. Microsoft Internet Explorer и Netscape Navigator допускают применение атрибутов LEFTMARGIN=n и ТОРМАRGIN=n в теге <ВОDY>. Атрибут LEFTMARGIN= задает левое поле для всей страницы. ТОРМАRGIN= определяет верхнее поле. Число n показывает ширину поля в пикселах. Например, тег <ВОDY LEFTMARGIN =»40″>создаст на всей странице левое поле шириной 40 пикселов. При n, равном 0, левое поле отсутствует.
Теги управления разметкой
Заголовки
Заголовок обозначает начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами , получается большим — это основной заголовок. Если текст окружен тегами , то он выглядит несколько меньше (подзаголовок); текст внутри еще меньше и так далее до . Некоторые программы позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 — крайне редко. Ниже на рисунке показан результат использования следующих заголовков:
Заголовок 1
Заголовок 2
Тег
Тег
применяется для разделения текста на параграфы. В нем используются те же атрибуты, что и в заголовках.
Атрибут АLIGN
Атрибут АLIGN позволяет выровнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам. Далее приведены возможные значения атрибута АLIGN: АLIGN=justify выравнивание по левому и правому краям. Реализовано не во всех программах интерпретации. АLIGN=left выравнивание по левому краю. По умолчанию текст HTML выравнивается по левому краю и не выравнивается по правому, то есть начало строк находится на одном уровне по вертикали, а концы — на разных. Чаще всего, получающийся при этом текст с равными промежутками между словами выглядит лучше. Поскольку выравнивание по левому краю задается автоматически, атрибут АLIGN=left можно опустить. АLIGN=right выравнивание по правому краю. Текст, выравненный по правому краю и не выравненный по левому — концы строк находятся на одном уровне, а начало на разных, — часто используется с целью создать оригинальный дизайн. Для этого задается атрибут АLIGN=right в обычных тегах, например в теге . АLIGN=center центрирование текста и графики. Есть несколько способов отцентрировать текст или графику. В спецификациях HTML 3.0 предлагается пользоваться тегом . Однако этот тег применим не ко всем объектам HTML-страницы, поэтому разработчики Netscape добавили тег , который центрирует любые объекты и поддерживается браузерами Netscape Navigator 3.0, Microsoft Explorer 3.0 и другими. К тегу нужно относиться с осторожностью. Какой-нибудь браузер может его вообще проигнорировать, и на странице окажется текст, выравненный по левому краю. Обтекание графики текстом. С помощью атрибута ALIGN можно заставить текст «обтекать» графический объект. Для этого следует поместить тег туда, где должен быть графический объект, и добавить атрибут ALIGN=left, ALIGN=right или АLIGN=center. Кроме того, с помощью атрибутов НSPAСЕ и VSPАСЕ (они описаны ниже) задается ширина горизонтальных и вертикальных полей, отделяющих изображение от текста. Можно также создать рамку вокруг картинки или обрамление таблицы текстом. Чтобы текст не «обтекал» графику, а прерывался, необходимо применить тег c атрибутом СLEAR.
Использование тега
Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает текст в рабочем окне, автоматически разбивая его на строки. В этом режиме концы строк текста игнорируются. Иногда для большей выразительности требуется начать печать с новой строки. Для этого и нужен тег ВR. Атрибут СLЕАR в теге <ВR>используется для того, чтобы остановить в указанной точке обтекание объекта текстом и затем продолжить текст в пустой области за объектом. Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT, RIGHT или АLL атрибута СLЕАR:
Текст будет продолжен, начиная с ближайшего пустого левого поля. Текст будет продолжен, начиная с ближайшего пустого правого поля. Текст будет продолжен, как только и левое, и правое поля окажутся пустыми.
Элемент разметки
Тег
Теги управления отображением символов
Все эти теги можно разбить на два класса: теги, управляющие формой отображения (font style), и теги, характеризующие тип информации (information type). Часто внешне разные теги при отображении дают одинаковый результат. Это зависит главным образом от настроек интерпретирующей программы и вкусов пользователя.
Теги, управляющие формой отображения
Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации — все это делает страницы более интересными. Microsoft Internet Explorer и Netscape Navigator позволяют определить шрифт с помощью тега FONT. Теперь можно объединять на одной странице несколько видов шрифтов, вне зависимости от того, какой из них задан по умолчанию в браузере пользователя.
Теги и — изменение размеров шрифта
Текст, расположенный между тегами или , будет, соответственно, больше или меньше стандартного.
Верхние и нижние индексы
С помощью тегов
Атрибут SIZЕ
Атрибут SIZЕ тега
Атрибут СОLОR
Если вы хотите сделать свою страницу более красочной, можете воспользоваться атрибутом СОLОR в теге FONТ, и тогда единственным ограничением будет цветовая палитра на компьютере пользователя. Теги, управляющие формой отображения, приведены в таблице.
| Тег | Значение |
| … | Курсив (Italic) |
| … | Усиление (Вold) |
| … | Телетайп |
| … | Подчеркивание |
| Перечеркнутый текст | |
| … | Увеличенный размер шрифта |
| … | Уменьшенный размер шрифта |
| … | Подстрочные символы |
| … | Надстрочные символы |
| <ЕМ>… | Типографское усиление |
| <СIТЕ>… | Цитирование |
| … | Усиление |
| <СODE>… | Отображает примеры кода (например, «коды программ») |
| Последовательность литералов | |
| <КВD>… | Пример ввода символов с клавиатуры |
| … | Переменная |
| … | Определение |
… |
Текст, заключенный в двойные кавычки |
Эти теги допускают вложенность, поэтому все они имеют тег начала и конца. При использовании таких тегов следует помнить, что их отображение зависит от настроек программы-интерфейса пользователя, которые могут и не совпадать с настройками программы-разработчика гипертекста.
Создание списков в HTML
- ), чтобы сменить тип маркера в середине списка. После появления нового атрибута все последующие маркеры в списке будут иметь такой же вид.
), нумерованный список (упорядоченный) (Ordered Lists
) и список определений. Теги для ненумерованных и нумерованных списков — это основа HTML. HTML 3.2 добавляет несколько атрибутов к тегам списков для выбора разных типов маркеров в ненумерованных списках и разных схем нумерации в нумерованных. Можно включать такие атрибуты и в сами теги элементов списка (List Item
Неупорядоченные списки — тег
- первый элемент списка;
- второй элемент списка;
- третий элемент списка.
- первый элемент списка
- второй элемент списка
- третий элемент списка
Атрибуты маркеров в ненумерованном списке
Чтобы не применять одни и те же маркеры на разных уровнях вложенности, можно использовать атрибут ТYРЕ. Вы можете задать любой тип маркера в произвольном месте списка. Можно даже смешивать разные типы маркеров в одном списке. Ниже перечислены теги с атрибутами стандартных маркеров:
Тег создает сплошные маркеры такого типа, как в списках первого уровня по умолчанию. Тег создает маркеры в виде окружностей. Тег создает сплошные квадратные маркеры.
Упорядоченные списки — тег
вместе с атрибутом ТYРЕ= в HTML 3.2 позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке:
Тег создает список с нумерацией в формате 1., 2., 3., 4. и т.д. Тег создает список с нумерацией в формате А., В., С., D. и т.д. Тег создает список с нумерацией в формате а., b., с., d. и т.д. Тег создает список с нумерацией в формате I., II., III., IV. и т.д.
Список определений — тег
Теги списка (Definition List:
- , , ) используют для создания списка терминов и их определений. Схема использования тега следующая.
- Термин
- Определение
Определяемый термин записывается на одной строке, а его определение — на следующей, с небольшим отступом вправо. Тег
- позволяет создавать отдельные абзацы с отступом без нумерации или маркеров. Отступ делается от левого края. Если на странице несколько тегов
- Смысловую роль текстового блока (например: логическое ударение, заголовок (от первого до шестого уровня), параграф, пункт списка и др.), который обрабатывается браузером в соответствии со смыслом (например, в голосовых браузерах — изменение интонации, в графических — выделением курсивом, и т. п.) или настройками пользователя.
- Гипертекстовые ссылки, которые значительно упрощают чтение множества связанных документов, ибо позволяют запросить документ с адресом, указанным в коде ссылки, простым щелчком мыши.
- Гарнитуру, кегль, начертание, цвет шрифта для визуального вывода.
- Специальные символы (выходящие за рамки ASCII символы пунктуации, математические символы, греческие и готические буквы, стрелки и т. п.)
- Формы для введения пользователем данных, которые позднее подвергаются обработке. Формы и другую информацию можно обрабатывать с помощью специальных серверных программ (например, на языках PHP или Perl ).
- Открытие мультимедийных файлов, выводимых как непосредственно браузером (например, изображения в форматах JPEG, GIF или PNG; аудиофайлы MIDI и др.), так и внешними приложениями, « встраиваевыми » в окно браузера ( Flash-анимация, Java-апплеты и прочее).
- пустые элементы — , ,
, , ,
,
, , , , , , , , ;
- элементы с неформатированным текстом — , ;
- элементы, выводящие неформатированный текст — , ;
- элементы из другого пространства имён — MathML и SVG;
- обычные элементы — все остальные элементы.
- , то текст постепенно сдвигается все больше вправо. В конце определения поместите закрывающий тег
Горизонтальные линейки — тег
Горизонтальное отчеркивание (Horizontal Rule) применяется для разделения документа на части. С помощью одного лишь тега <НR>можно придать странице оригинальный вид. Попробуйте поэкспериментировать с тегом <НR>, и вы получите линии, совсем не похожие на те, которыми обычно пользуетесь.
Преформатированный вывод — тег
Применение этого тега позволяет отобразить текст «как есть» (без форматирования), теми же символами и с тем же разбиением на строки.
Применение тега
Текст, помещенный между тегами , мерцает. Данный тег поддерживается только браузером Netscape Navigator. Пользоваться им следует с большой осторожностью.
Комментарии в языке HTML
При разметке документов HTML возникает необходимость в использовании комментариев, которые браузер не выводит на экран, но другой специалист, редактирующий данный документ, может прочитать. В таких примечаниях можно найти информацию о том, кто является автором документа, где и почему используется конкретный элемент HTML и т.п. Комментарии HTML начинаются с символа «». Можно вставлять текст с любыми символами. Комментарии могут состоять из нескольких строк текста. В общем и целом они ничем не отличаются от аналогичных комментариев в других языках программирования, так как видимы только тогда, когда это необходимо. Например, браузер игнорирует их. При создании файла HTML можно разместить в нем комментарии о его структуре. Кроме того, там можно размещать информацию о том, какие сложные операции способен выполнять данный документ.
Гипертекстовые ссылки
Все рассмотренные выше средства управления отображением текста, безусловно, важны, но они только дополняют основной тег HTML-документа — гипертекстовую ссылку. Для записи гипертекстовой ссылки используется тег <А>, который называют «якорь» (аnchor). Якорь имеет несколько атрибутов, главным из которых является НREF. Простую ссылку можно записать в виде
<А НREF="http://www.uspy.ru/">Отображаемое название гипертекстовой ссылки,
где значение атрибута HREF — адрес документа «index.htm» на машине «www.intuit.ru», доступ к которой осуществляется по протоколу НТТР. Форма записи этого адреса называется универсальным локатором ресурсов URL и является составной частью технологии WWW. Согласно схеме HTTP нотации URI, полный адрес информационного ресурса, доступного по протоколу HTTP, надлежит записывать следующим образом:
http://user:password@domain.ru:port/path/some.html?query_string,
где http — протокол обмена данными; user — идентификатор пользователя; password – пароль; domain.ru — доменное имя сервера; port — номер TCP-порта, на котором ведет обслуживание сервер; path — путь в корневом каталоге сервера к файлу ресурса; some.html — файл ресурса;query_string — поисковое предписание. Заданный в таком виде адрес ресурса называется абсолютным или полным адресом ресурса. На практике редко используют все компоненты полного адреса схемы HTTP. Чаще всего первые компоненты опускают. Например, обращение к документу в том же каталоге в гипертекстовой ссылке будет записано просто как имя данного файла. Обращение к CGI-скрипту может выглядеть следующим образом:
Имя протокола, имя домена, номер порта и другие компоненты начала URL опущены. В этом случае говорят, что ссылка задана частично определенной или неполной формой URL. Естественно, что браузер при обращении к серверу будет восстанавливать полную форму URL, опираясь на некоторую схему по умолчанию, которая называется базовым URL. Иногда неполную форму URL называют относительным URL, подразумевая, что адрес задается относительно некоторого базового адреса. По умолчанию в качестве базового используется URL каталога, в котором находится текущий документ. Если URL начинается с символа «.» или «..», то это означает исчисление от текущего каталога. Если URL начинается с символа «/», то относительный URL берется от корня каталогов сервера. В HTML есть элемент разметки BASE (рассмотренный ранее), который позволяет задать или переопределить базовый адрес. Первоначально этот контейнер использовался только в заголовке HTML-документа. Сейчас его применяют как за пределами документа (например, при создании документов HTML-редакторами), так и в теле документа. Содержание контейнера гипертекстовой ссылки, заключенное между тегом начала и тегом конца, выделяется в тексте цветом, определенным для контекстных гипертекстовых ссылок. В атрибутах тега <ВОDY>:
| Атрибут | Значение |
| ТЕХТ=#000000 | Цвет текста (черный) |
| ALINK=#FF0000 | Цвет «активных» гипертекстовых ссылок (красный) |
| VLINK=#FF00FF | Цвет пройденных гипертекстовых ссылок (пурпурный) |
| LINK=#0000FF | Цвет гипертекстовой ссылки (синий) |
Одна из особенностей создания Web-сайта состоит в том, что представленную на нем информацию желательно разбить на отдельные части, которые могут быть выведены на экран без необходимости его прокрутки. Организация связей между отдельными частями осуществляется с помощью гипертекстовых ссылок.
При нажатии на ссылку в окно браузера будет загружен новый документ. Другой формой использования тега <А>является определение точек внутри текста, на которые можно сослаться. Такой метод применяется в том случае, когда документ нельзя поделить на части и необходимо быстро перемещаться из оглавления в текст:
Для ссылки на такую точку используют следующую форму URL:
<А НREF="http://www.uspu.ru/index.html#роint">Ссылка на точку "роint" в документе "index.html"
На описании простых гипертекстовых ссылок обзор средств языка НТМL, ориентированных на текстовое представление информации и организацию гипертекстовых баз данных, можно закончить.
Запись опубликована в рубрике HTML с метками html, WEB, Лекция. Добавьте в закладки постоянную ссылку.
Язык разметки HT ML
1. Язык разметки гипертекста HTML. История, развитие и перспективы HTML.
HTML (от англ. Hypertext Markup Language — « язык разметки гипертекста») — это стандартный язык разметки документов во Всемирной паутине. Практически все веб-страницы создаются при помощи языка HTML или его последователя — XHTML.
Формально, HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.
И HTML и XML произошли от SGML. HTML это некоторое приложение SGML, а XML это подмножество SGML, разработанное для упрощения процесса машинного разбора документа. Другими приложениями SGML является SGML Docbook (документирование), и «Z Format » ( типографика и документирование).
Язык HTML позволяет размечать в тексте:
2. Структура HTML-документа, основные теги. Конструкции SGML, используемые в HTML.
Первым тегом с которого следует начинать описание HTML -документа, является тег html > html >. Эти теги обозначают что находящиеся между ними строки представляют единый HTML -документ. Сам по себе документ представляется обыкновенным ASCII -файлом. Без этих тегов браузер или другая программа просмотра, возможно будет не в состоянии идентифицировать формат документа и правильно его интерпретировать. Чаще всего тег < html >используется без параметров (в версии HTML 4.0).
В стандарте HTML 4.01 перед тегом < html >необходимо указывать специальный тег DOCTYPE. Браузеры используют doctype для того, чтобы оценить как рассматривать разметку документа text / html . Этот метод основан на определении объявления типа документа (или его отсутствия) в начале HTML документа. Он бывает нескольких видов:
· Строгий ( Strict ): не содержит элементов, помеченных как «устаревшие» или «не одобряемые» ( deprecated ). Пример : < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
· Переходный ( Transitional ): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML. Пример : < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
· С фреймами ( Frameset ): аналогичен переходному, но содержит также теги для создания наборов фреймов. Пример : < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Раздел документа HEAD
Раздел документа HEAD определяет его заголовок и не является обязательным тегом, однако хорошо составленный заголовок может быть весьма полезен. Задачей заголовка является предоставление необходимой информации для программы, интерпретирующей документ. Теги, находящиеся внутри раздела HEAD (кроме названия документа, описываемого с помощью тега < title >) не отображаются на экране.
Раздел заголовка открывается тегом < head >и закрывается тегом . Между упомянутыми тегами располагаются остальные теги раздела заголовка.
Тег-контейнер < title >является единственным обязательным тегом заголовка и служит для того, чтобы дать документу название. Оно обычно отображается в заголовке окна браузера. По умолчанию текст названия документа используется при создании закладки для документа.
Тег < base >служит для указания полного базового URL-адреса документа. С его помощью относительная ссылка продолжает работать, если документ переносится в другой каталог или даже на другой компьютер. Тег имеет один обязательный атрибут href , после которого указывается полный URL -адрес документа ( < base href =” www . myhost . ru / docs ”>).
Тег < link >указывает на связь документа, содержащего данный тег и другого документа или объекта. Заголовок документа может содержать любое количество тегов < link >. Например:
Атрибут rel определяет отношение между текущим и другим документом (в данном примере это документ таблицы стилей). Атрибут type указывает тип и параметры присоединенной таблицы стилей. Атрибут media конкретизирует способ отображения страницы (те какая таблица стилей будет применяться), в данном случае страница выводится для печати. Href – отвечает за ссылку на присоединяемый файл. Также используются некоторые другие атрибуты.
Тег < meta >определяет метатеги , которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег , все они размещаются в контейнере < HEAD >. Как правило, параметры любого метатега сводятся к парам « имя=значение » , которые определяются аргументами content , name или http — equiv .
· content – Устанавливает значение параметра, заданного с помощью name или http — equiv .
· http — equiv – Предназначен для конвертирования метатега в заголовок HTTP.
· name – Имя метатега , также косвенно устанавливает его предназначение.
Приведем несколько примеров использования тега < meta >:
В разделе заголовка документа могут присутствовать еще два тега – style > и script > . Их назначение связанно с использованием таблиц стилей в документе и записью скриптов .
Раздел документа BODY
Элемент < BODY >предназначен для хранения содержания веб-странице ( контента ), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера BODY . К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
Тег < BODY >также применяется для определения цветов ссылок и текста на веб-странице . Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY . Тем не менее, большинство параметров до сих пор поддерживается разными браузерами.
Часто тег < BODY >используется для размещения обработчика событий, например, onLoad , которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.
Основные теги HTML
Ниже, в таблице перечислены наиболее часто используемые теги HTML .
Таблица №2: Основные теги HTML
Описание действия тега
Тег < A >является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег < A >устанавливает ссылку или якорь. Где indent – идентификатор
Тег < IMG >предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный параметр src , который определяет адрес файла с изображением.
Определяет текстовый параграф. Тег < P >является блочным элементом, перед ним всегда добавляется пустая строка, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком.
Тег < LI >определяет отдельный элемент списка. Внешний тег < UL >или < OL >устанавливает тип списка — маркированный или нумерованный.
Элемент < DIV >является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора. Как и при использовании других блочных элементов, содержимое тега < DIV >всегда начинается с новой строки. После него, также, добавляется перенос строки.
Заголовок 1 уровня
Заголовок 6 уровня
HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег < H 1>представляет собой наиболее важный заголовок первого уровня, а тег < H 6>служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги < H 1>: < H 6>относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Видом заголовком легко можно управлять с помощью стилей.
Тег < MAP >служит контейнером для элементов < AREA >, которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования тега < MAP >— в связывании тега < IMG >с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в теге < IMG >, задаваемого параметром usemap , так и в теге < MAP >, устанавливаемого атрибутом name .
Тег < SPAN >предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как < TABLE >, < P >или < DIV >, с помощью тега < SPAN >можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри параграфа (тега < P >) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег < SPAN >и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора.
Тег < BR >устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа , использование тега BR не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью параметра clear тега < BR >можно сделать так, чтобы следующая строка начиналась ниже элемента.
Тег < IFRAME >создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы. Тег < IFRAME >является контейнером, содержание которого игнорируется браузерами, не поддерживающих данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами .
3. Основные типы данных HTML (информация о символах, цветах, длинах, URI, типах содержимого и т.д.).
Значения атрибутов в языке HTML могут иметь различные типы данных. Основными типами данных являются следующие .
Основные типы SGML
В определении типа документа определяется синтаксис содержимого элемента HTML и значений атрибутов с использованием меток SGML . Вот обобщенная информация о ключах:
CDATA — это последовательность символов из набора символов документа, она может включать character entities (сущности). Агенты пользователей (браузеры) должны интерпретировать значения атрибутов следующим образом:
· Заменять сущности на символы ,
· Игнорировать перевод строки,
· Заменять каждый возврат каретки или табуляцию на один пробел.
Агенты пользователей могут игнорировать пробелы в начале и в конце значений атрибута CDATA (например, » text » интерпретируется как » text «). Авторы не должны объявлять значения атрибутов с пробелами в начала или в конце.
Метки ID и NAME Значения атрибутов типа ID и NAME должны начинаться с латинской буквы и состоять только из латинских букв, цифр, дефисов, подчеркиваний, двоеточий и точек. Эти значения зависят от регистра. Они отличаются тем, что NAME может содержать специальные символы, а ID не может.
Значения типа IDREF и IDREFS указывают на идентификаторы, т. е. на значения атрибута id других элементов. Значение типа IDREF — это единственный идентификатор, а значение типа IDREFS — это список идентификаторов, разделенных пробелами. IDREF и IDREFS зависят от регистра.
Метки NUMBER должны содержать по крайней мере одну цифру ([0-9]).
Текстовые строки, URI, цвета, длины
Ряд атрибутов принимают текст, который предназначается для чтения людьми. Это текстовые стороки .
Значения атрибутов типа URI — это унифицированные идентификаторы ресурсов (полные или относительные), синтаксис которых должен соответствовать синтаксису URI .
Значение атрибута типа » color » относится к определениям цветов. Значение цвета может быть шестнадцатеричным числом системы RGB (которому предшествует знак диеза #) или одним из шестнадцати стандартных названий цветов. Названия цветов учитывают регистр.
К примеру, значения «#800080″ и » Purple » оба означают пурпурный цвет.
HTML определяет три типа значений длины для атрибутов:
· Пиксели – это целое, представляющее число пикселей (на экране, на бумаге). Таким образом, значение «50» означает пятьдесят пикселей.
· Длина – доля вертикального или горизонтального расстояния в процентах. Таким образом, значение «50%» означает половину доступного пространства.
· Кратный размер – это либо целое число, задающее количество пикселей, либо доля в процентах от размера по горизонтали или вертикали, либо относительный размер вида , где – целое число. При распределении пространства обозреватель сначала выделяет место для размеров, заданных в числах и процентах, а затем разделяет оставшееся пространство между элементами с относительными размерами. Элементу размером 3 будет выделено пространство в три раза большее, чем элементу размером 1. Значение * эквивалентно 1* и часто означает «заполнить оставшееся пространство».
Типы содержимого (типы MIME), типы ссылок, дескрипторы носителей
Примеры типов содержимого включают » text / html «, » image / png «, » image / gif «, » video / mpeg «, » audio / basic «, » text / tcl «, » text / javascript » и » text / vbscript «.
Авторы могут использовать распознаваемые типы ссылок, указанные в таблице вместе с условными интерпретациями. Символы пробелов в типах ссылок не допускаются.
Агенты пользователей, поисковые машины и т.д. могут интерпретировать эти типы ссылок несколькими способами. Например, агенты пользователя могут предоставлять доступ к связанным документам с помощью навигационной панели.
Авторы могут определить дополнительные типы ссылок, не описанные в этой спецификации. При этом они должны использовать профиль для указания соглашений, используемых для определения типов ссылок.
Таблица №6: Типы ссылок
Обозначает альтернативные версии документа, в котором находится ссылка. Вместе с атрибутом lang означает переведенную версию документа. Вместе с атрибутом media означает версию, созданную для другого носителя.
Обозначает внешнюю таблицу стилей. Подробнее см . раздел о внешних таблицах стилей. Используется вместе с типом ссылки » Alternate » для таблиц стилей, выбираемых пользователем.
Обозначает первый документ в наборе. Этот тип ссылки сообщает поисковым машинам о том, какой документ автор считает началом набора.
Обозначает следующий документ в линейной последовательности документов. Агенты пользователей могут предварительно загружать документ » next » для сокращения времени загрузки.
Обозначает предыдущий документ в упорядоченной серии документов. Некоторые агенты пользователей также поддерживают синоним » Previous «.
Обозначает документ, служащий содержанием. Некоторые агенты пользователей также поддерживают синоним ToC (из » Table of Contents «).
Обозначает документ, являющийся указателем текущего документа.
Обозначает документ — глоссарий терминов, относящихся к текущему документу.
Обозначает замечание об авторском праве для текущего документа.
Обозначает документ, являющийся главой в наборе документов.
Обозначает документ, являющийся разделом в наборе документов.
Обозначает документ, являющийся подразделом в наборе документов.
Обозначает документ, являющийся приложением в наборе документов.
Обозначает документ, содержащий справку (более подробная информация, ссылки на другие информационные ресурсы и т.д.)
Обозначает закладку. Закладка — это ссылка на ключевую точку в расширенном документе. Атрибут title может использоваться, например, для пометки закладки. Необходимо учесть, что в каждом документе можно определить несколько закладок.
Обозначает альтернативные версии документа, в котором находится ссылка. Вместе с атрибутом lang означает переведенную версию документа. Вместе с атрибутом media означает версию, созданную для другого носителя.
Ниже в таблице приведен список распознаваемых дескрипторов носителей, те устройств, с помощью которых, пользователь просматривает страницу. Это значения атрибута media
Таблица №7: Типы дескрипторов
Описание дескриптора
Предназначен для экранов компьютеров, не разделенных на страницы.
Предназначен для носителя с фиксированной сеткой для символов, таких как телетайпы, терминалы или переносные устройства с ограниченными возможностями отображения.
Предназначен для устройств типа телевизора (низкое разрешение, цвета, ограниченные возможности прокрутки).
Предназначен для проекторов.
Предназначен для карманных устройств (небольшой экран, монохромный, растровая графика, ограниченный диапазон).
Предназначен для страничных, непрозрачных материалов и документов, просматриваемых на экране в режиме предварительного просмотра печати.
Предназначен для тактильных устройств с алфавитом Бройля.
Предназначен для синтезаторов речи.
Для всех устройств.
4. Стиль в документах HTML. Внешние таблицы стилей. Каскады таблиц стилей.
CSS (Cascading Style Sheets — каскадные таблицы стилей ) — технология оформления веб — страниц , элемент концепции DHTML. Таблицы (точнее — списки) CSS служат для оформления преимущественно HTML- и XHTML-документов, но иногда используются и для других документов, структурированных с помощью XML (например, в браузере « Mozilla » для оформления элементов графического интерфейса, XUL).
Спецификации CSS
Данная рекомендация W 3 C принята 17 декабря 1996, откорректирована 11 января 1999. Среди наиболее важных возможностей, предоставляемых этой рекомендацией, были:
· Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
· Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
· Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (т.е. межстрочные отступы)
· Выравнивание для текста, изображений, таблиц и других элементов.
· Свойства блоков, такие как высоту, ширину, внутренние ( padding ) и внешние ( margin ) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear .
Данная рекомендация W 3 C принята 12 мая 1998. Построена на CSS 1 с сохранением обратной совместимости.
Добавление к функциональности:
· Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной верстки
· Типы носителей. Позволяет устанавливать разные стили для разных носителей (например, монитор, принтер, КПК)
· Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например, для слепых посетителей сайта)
· Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати
· Расширенный механизм селекторов
· Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента
Рабочая версия W 3 C от 6 ноября 2006. Построена на CSS 2, содержит исправления ошибок.
Основные принципы CSS
Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.
Каскадные таблицы стилей [ 5] позволяют хранить цвет, размеры текста и другие параметры в стилях. Стилем называется набор правил форматирования, который применяется к элементу документа, чтобы быстро изменить его внешний вид.
Стили позволяют одним действием применить сразу всю группу атрибутов форматирования. С их помощью можно, например, изменить вид всех заголовков. Вместо форматирования заголовка в три приема, когда сначала задается его размер, затем шрифт » Arial » и, наконец, выравнивание по центру, то же самое можно сделать одновременно, применив стиль к тегу < H 1>. Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры стиля во всех документах, где он используется, и вид текста поменяется автоматически.
Другое преимущество CSS состоит в том, что стили предлагают намного больше возможностей для форматирования, нежели простой HTML. Кроме того, стили могут храниться во внешнем файле, браузер кэширует такие документы, поэтому загрузка сайта будет происходить чуть быстрее.
CSS представляют собой мощную систему для разработчиков сайтов, расширяя их возможности по дизайну и верстке веб-страниц . В научной среде, откуда пошла родом технология WWW, люди были больше заняты содержанием документов, чем их оформлением, однако для большинства людей представление сайта, то, как он выглядит, играет более важную роль. Ограничения HTML породили множество техник создания веб-страниц , таких как:
· использование различных расширений HTML;
· применение изображений вместо текста;
· использование рисунков для контроля пустого пространства, так называемые распорки;
· использование таблиц для верстки веб-страниц ;
· написание программных скриптов вместо использования HTML.
Эти техники значительно увеличивают сложность разработки веб-страниц , предлагают ограниченную гибкость в их создании и управлении, а также создают трудности для людей ими не владеющими.
Стили решают эти проблемы, в то же время заменяя лишь ограниченную область механизмов представления HTML.
Синтаксис CSS.
Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.
Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений.
Схематически это можно показать так:
Подключение стиля к станице
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрены способы подключения CSS.
· При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css , а для связывания документа с этим файлом применяется тег < link >. Данный тег помещается в контейнер
· При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы . По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера
· Внутренний стиль – является по существу расширением для одиночного тега используемого на веб-странице . Для определения стиля используется параметр тега style , а его атрибуты указываются с помощью языка таблицы стилей
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей.
5. Фреймы.
Вводя тег < frame >, дизайнер HTML -станицы разделяет экран браузера на части. В результате пользователь, рассматривающий страницу сайта, может изучать одну часть страницы не зависимо от остальной части. Браузер, распознающий фреймы, загружает разные страницы в разные секции (фреймы) экрана.
Тег frameset > обрамляет текст, описывающий компоновку фреймов. Здесь размещается информация о числе фреймов, их размерах и ориентации (горизонтальной или вертикальной). У тега < frameset >только два возможных атрибута: row , задающий число строк, и cols задающий число столбцов. Между тегами < frameset >не требуется указания тега < body >, но его можно поместить между тегами < noframe >в конце фреймовой структуры. Между тегами < frameset >не должно быть никаких тегов или атрибутов, которые обычно используются между тегами < body >. Единственными тегами, которые могут находиться между ними, являются теги < frame >, < frameset >и < noframe >.
Приведем пример использования фреймов.
6. Формы.
Формы предназначены для обмена данными между пользователем и сервером.
Для указания браузеру где начинается и заканчивается форма, используется тег < form >. Между открывающим и закрывающим тегами < form >и можно помещать любые необходимые теги HTML. Это позволяет добавить элементы формы в ячейки таблицы для их форматирования, а также использовать изображения. Документ HTML может содержать несколько форм, но они не должны быть вложены одна в другую.
Любая форма содержит несколько параметров:
· Элементы формы, которые представляют собой стандартные поля для ввода информации.
· Кнопку отправки данных формы на сервер.
· Адрес программы на веб-сервере , которая будет обрабатывать содержимое данных формы.
Чтобы указать браузеру куда и как отправлять данные формы используется два параметра:
· action — адрес CGI-программы, которая принимает данные формы.
· method — метод пересылки данных, содержащихся в форме, от браузера к веб-серверу . Может принимать два значения: GET и POST.
Элементы формы представляют собой стандартные элементы управления, используемых для заполнения значений, которые затем передаются веб-сереверу .
К стандартным элементам формы относятся: текстовые поля (многострочное текстовое поле и поле пароля), кнопки (для отправки введенной в форму информации серверу и для очистки формы), флажки, переключатели, поле со списком и кнопки-изображения.
Привидем пример простой HTML -формы.
7. Скрипты .
Скриптовый язык ( scripting language , также называют язык сценариев) — язык программирования, разработанный для записи «сценариев», последовательностей операций, которые пользователь может выполнять на компьютере. Простые скриптовые языки раньше часто называли языками пакетной обработки ( batch languages или job control languages ). Сценарии обычно интерпретируются, а не компилируются.
В прикладной программе, сценарий ( скрипт ) — это программа, которая автоматизирует некоторую задачу, которую без сценария пользователь делал бы вручную, используя интерфейс программы.
В веб-программировании скриптом называют программу, которая загружается вместе с текстом документа на компьютер пользователя и выполняется программой-браузером. С помощью скриптов реализуются самые разнообразные функции веб-сайтов . Например, с помощью сценария можно организовать проверку отправляемых пользователем на сервер данных (к примеру, через форму). Если информация не верна (вместо численных данных посланы текстовые и тп ), то пользователь увидит предупреждение, выданное скриптом . Данная функция снимает нагрузку с сервера.
Также с помощью сценариев создается оформление сайтов, придание им большей интерактивности. Например, раскрывающиеся меню, динамически меняющие размер картинки и тд .
Тег < script >предназначен для описания скриптов , может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.
< script >может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты , которые должны выполняться в первую очередь, обычно помещают в заголовок документа.
Параметр Language устанавливает язык программирования на котором написан скрипт ( language =» JavaScript | JScript | VBS | VBScript « ).
· JavaScript – язык программирования JavaScript . К этому параметру часто еще присоединяют номер версии, например — JavaScript1.3.
· JScript – разновидность языка JavaScript разработанная компанией Microsoft . Смена названия продиктована тем, что имя JavaScript уже было зарегистрировано, при этом различия между языками состоят не только в названии, но и в подходах.
· VBS, VBScript – язык программирования VBScript основанный на Visual Basic . Является детищем Microsoft и поддерживается преимущественно браузером Internet Explorer .
Наиболее распространенным языком программирования скриптов является JavaScript .
Приведем пример HTML -страницы, с встроенным скриптом .
1.2. HTML-элементы
HTML-элементы — основа языка HTML. Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя элемента.
Все HTML-элементы делятся на пять типов:
В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие элементы исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.