Практическое введение в программирование на JavaScript
Павел Храмцов, Центр Информационных Технологий
Введение
1. Принципы гипертекстовой разметки. Структура документов
1.1. Группы тагов НТМL
1.2. Контейнеры HTML-документа
1.3. Средства описания таблиц в HTML
1.4. Использование таблиц в дизайне страницы
1.5. Фреймы
1.6. Формы
1.7. Апплеты
1.8. Каскадные таблицы стилей (Cascad Style Sheets)
2. Управление просмотром страниц Web-узла. JavaScript
2.1. Модель объектов JavaScript - объекты Navigator'а
2.2. Методы объектов и свойства объектов. Управление потоком вычислений
2.3. События
2.4. Массивы
2.5. Графика
2.6. Стеки гипертекстовых ссылок
2.7. Фреймы и окна
2.8. Наследование кода скриптов различными страницами
2.9. Java, JavaScript и Plug-ins
2.10. Встраивание в HTML-документ
2.11. Примеры скриптов
2.12. Единство в многообразии
2.13. Приемы программирования на JavaScript
2.14. Примеры манипулирования окнами
2.15. Гипертекстовые ссылки и картинки
Введение
Язык гипертекстовой разметки HTML (HyperText Markup Language) был предложен Тимом Бернерсом-Ли в 1989 году в качестве одного из компонентов технологии разработки распределенной гипертекстовой системы World Wide Web.
Бернерс-Ли предложил свою систему, в мире информационных технологий наблюдался повышенный интерес к новому и модному в то время направлению-гипертекстовым системам. Сама идея, но не термин, была введена В. Бушем в 1945 году в предложениях по созданию электромеханической информационной системы Меmех. Несмотря на то, что Буш был советником по науке президента Рузвельта, идея не была реализована. В 1965 году Т. Нельсон ввел в обращение сам термин "гипертекст", развил и даже реализовал некоторые идеи, связанные с работой с "нелинейными" текстами. В 1968 году изобретатель манипулятора "мышь" Д. Енжильбард продемонстрировал работу с системой, имеющей типичный гипертекстовый интерфейс, и, что интересно, проведена эта демонстрация была с использованием системы телекоммуникаций. Однако внятно описать свою систему он не смог. В 1975 году идея гипертекста нашла воплощение в информационной системе внутреннего распорядка атомного авианосца "Карл Винстон". Работы в этом направлении продолжались, и время от времени появлялись реализации типа НуреrСаrd фирмы Аррlе или НуреrNоdе фирмы Хеrох. В 1987 была проведена первая специализированная конференция Нуреrtехt'87, материалам которой был посвящен специальный выпуск журнала "Соmmunication АСМ".
Идея гипертекстовой информационной системы состоит в том, что пользователь имеет возможность просматривать документы (страницы текста) в том порядке, в котором ему это больше нравится, а не последовательно, как это принято при чтении книг. Нельсон и определил гипертекст как нелинейный текст. Достигается это путем создания специального механизма связи различных страниц текста при помощи гипертекстовых ссылок, т. е. у обычного текста есть ссылки типа "следующий-предыдущий", а у гипертекста можно построить еще сколь угодно много других ссылок. Любимыми примерами специалистов по гипертексту являются энциклопедии, Библия, системы типа "Неlр".
Простой, на первый взгляд, механизм построения ссылок оказывается довольно сложной задачей, т. к. можно построить статические ссылки, динамические ссылки, ассоциированные с документом в целом или только с отдельными его частями, т. е. контекстные ссылки. Дальнейшее развитие этого подхода приводит к расширению понятия гипертекста за счет других информационных ресурсов, включая графику, аудио - и видеоинформацию, до понятия гипермедиа. Тем, кто интересуется более подробно различными схемами и способа ми разработки гипертекстовых систем, стоит обратиться к специальной литературе.
Разработчики HTML должны были решить две задачи:
дать дизайнерам гипертекстовых баз данных простое средство создания документов;
сделать это средство достаточно мощным, чтобы отразить имевшиеся на тот момент представления об интерфейсе пользователя гипертекстовых баз данных.
Первая задача была решена за счет выбора таговой модели описания документа. Такая модель широко применяется в системах подготовки документов для печати. Примером такой системы является хорошо известный язык разметки научных документов TeX, предложенный Американским Математическим Обществом, и программы его интерпретации.
К моменту создания HTML существовал стандарт языка разметки печатных документов - Standard Generalised Markup Language, который и был взят в качестве основы HTML. Предполагалось, что такое решение поможет использовать существующее программное обеспечение для интерпретации нового языка. Однако, будучи доступным широкому кругу пользователей Internet, HTML зажил своей собственной жизнью. Вероятно, многие администраторы баз данных WWW и разработчики программного обеспечения для этой системы имеют довольно смутное представление о стандартном языке разметки SGML.
Язык НТМL позволяет определять структуру электронного документа с полиграфическим уровнем оформления; результирующий документ может содержать самые разнообразные таги: иллюстрации, аудио - и видео - фрагменты и так далее. Язык включает в свой состав развитые средства для специфицирования нескольких уровней заголовков, шрифтовых выделений, различных групп объектов, например, словари, каталоги или меню для размещения иллюстраций и других фрагментов, а также множество других возможностей.
Вторым важным моментом, повлиявшим на судьбу HTML, стал выбор в качестве основы гипертекстовой базы данных обычного текстового файла, который хранится средствами файловой системы операционной среды компьютера. Такой выбор был сделан под влиянием следующих факторов:
такой файл можно создать в любом текстовом редакторе на любой аппаратной платформе в среде любой операционной системы.
к моменту разработки HTML существовал американский стандарт для разработки сетевых информационных систем - Z39.50, в котором в качестве единицы хранения указывался простой текстовый файл в кодировке LATIN1, что соответствует US ASCII.
Таким образом, гипертекстовая база данных в концепции WWW - это набор текстовых файлов, размеченных на языке HTML, который определяет форму представления информации (разметка) и структуру связей этих файлов (гипертекстовые ссылки).
Такой подход предполагает наличие еще одной компоненты технологии - интерпретатора языка. В World Wide Web функции интерпретатора разделены между сервером гипертекстовой базы данных и интерфейсом пользователя.
Сервер, кроме доступа к документам и обработки гипертекстовых ссылок, осуществляет также препроцессорную обработку документов, в то время как интерфейс пользователя осуществляет интерпретацию конструкций языка, связанных с представлением информации.
Если первая версия языка (HTML 1.0) была направлена на представление языка как такового, где описание его возможностей носило скорее рекомендательный характер, вторая версия языка (HTML 2.0) фиксировала практику использования конструкций языка, версия ++ (HTML++) представляла новые возможности, расширяя набор тагов HTML в сторону отображения научной информации и таблиц, а также улучшения стиля компоновки изображений и текста, то версия 3.2 призвана упорядочить все нововведения и согласовать их с существующей практикой. Кроме этого, в версии 3.2 снова делается попытка формализации интерфейса пользователя гипертекстовой распределенной системы.
По сравнению с версией 2.0, HTML 3.2 позволяет реализовать отображение таблиц (контейнер <TABLE>...</TABLE>), выполнение мобильных кодов (<APPLET...>...</APPLET>), обтекание графики текстом, а также отображение верхних и нижних индексов (<SUP>...</SUP>; <SUB>...</SUB>).
Кроме этих возможностей, которые фиксируют текущую практику использования HTML, современные программы просмотра HTML - документов позволяют реализовать и ряд других возможностей разметки текста, которые описаны в стандарте HTML 3.0 и расширениях HTML фирм-разработчиков программного обеспечения:
разметка математических формул (HTML 3.0);
дополнительные контейнеры заголовка (HTML 3.0; Netscape Extensions; Microsoft Extensions);
дополнительные атрибуты стандартных контейнеров тела документа (ALIGN; BGCOLOR; TARGET и т. п.);
разбиение страницы на фреймы;
открытие дополнительных окон и др.
Сейчас World Wide Web Consortium (W3C) уже опубликовал рабочие материалы спецификации HTML 4.0.. Кроме возможностей разметки текста, включения мультимедиа и формирования гипертекстовых связей уже существовавших в предыдущих версиях HTML, в версию 4.0 включены дополнительные средства работы с мультимедиа, языки программирования, таблицы стилей, упрощенные средства печати изображений и документов, которые становятся более доступными для всех пользователей HTML 4.0. Эти дополнения служат интернационализации WWW и распространению ее по всему миру. Кроме этого, для управления сценариями просмотра страниц Website (гипертекстовой базы данных, выполненной в технологии World Wide Web) можно использовать языки программирования этих сценариев типа JavaScript, Java и VBScript.
Прежде всего рассмотрим структуру HTML-документов.
1. Принципы гипертекстовой разметки. Структура документов
За основу модели разметки документов в HTML принята таговая модель. Таговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тагами. Т. е. документ НТМL представляет собой не что иное, как обычный АSСII-файл, с добавленными в него управляющими НТМL-кодами (тагами).
Таги НТМL-документов в большинстве своем просты для понимания и использования, ибо они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений. НТМL-таг состоит из имени, за которым может следовать необязательный список атрибутов тага. Текст тага заключается в угловые скобки (< и >). Простейший вариант тага - имя, заключенное в угловые скобки, например <HEAD> или <i>. Для более сложных тагов характерно различие атрибутов, которые могут иметь конкретные значения, определенные автором для видоизменения функции тага.
Атрибуты тага следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов в таге значения не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута - одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тагов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов. Например, особенно важно использовать нужный регистр при вводе URL других документов в качестве значения атрибута HREF.
Чаще всего НТМL-таги состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тага идентично имени начального, но перед именем конечного тага ставится косая черта (/) (например, для тага стиля шрифта - курсив <i> закрывающая пара представляет собой </i>, для тага заголовка <ТIТLЕ> закрывающей парой будет </ТIТLЕ>). Конечные таги никогда не содержат атрибутов. По своему значению таги близки к понятию скобок "begin/end" в универсальных языках программирования, которые задают области действия имен локальных переменных и т. п. Таги определяют область действия правил интерпретации текстовых тагов документа.
При использовании вложенных тагов в документе следует соблюдать особую аккуратность. Вложенные таги нужно закрывать, начиная с самого последнего и двигаясь к первому. Некоторые НТМL-таги не имеют конечного компонента, поскольку они являются автономными элементами. Например, таг изображения <IMG>, который служит для вставки в документ графического изображения, конечного компонента не требует. К автономным тагам также относятся разрыв строки (<BR>), горизонтальная линейка (<HR>) и таги, содержащие такую информацию о документе, которая не влияет на его отображаемое содержимое, например таги <META> и <BASE>.
В некоторых случаях конечные таги в документе можно опускать. Большинство броузеров реализованы так, что при обработке текста документа начальный таг воспринимается как конечный таг предыдущего. Самый распространенный таг такого типа - таг абзаца <Р>. Поскольку он используется в документе очень часто, то его обычно ставят только в начале каждого абзаца. Когда один абзац заканчивается, следуюший таг <Р> сигнализирует броузеру о том, что нужно завершить данный абзац и начать следующий. Большинство авторов тагом конца абзаца вообще не пользуются.
Есть и другие конечные таги, без которых броузеры отлично работают, например конечный таг </HTML>. Тем не менее, рекомендуется включать по возможности больше конечных тагов, чтобы избежать путаницы и ошибок при воспроизведении документа.
Общая схема построения контейнера в формате HTML может быть записана в следующем виде:
"контейнер" := <"имя тага" "список атрибутов">
содержание контейнера
</"имя тага">
1.1. Группы тагов НТМL
Все таги НТМL по их назначению и области действия можно разделить на следующие основные группы
определяющие структуру документа;
оформление блоков гипертекста (параграфы, списки, таблицы, картинки);
гипертекстовые ссылки и закладки;
формы для организации диалога;
вызов программ.
Структура гипертекстовой сети задается гипертекстовыми ссылками. Гипертекстовая ссылка - это адрес другого HTML документа или информационного ресурса Internet, который тематически, логически или каким-либо другим способом связан с документом, в котором ссылка определена.
Для записи гипертекстовых ссылок в системе WWW была разработана специальная форма, которая называется Universe Resource Locator. Типичным примером использования этой записи можно считать следующий пример:
Этот текст содержит
<A HREF="http://. kiae. su/altai/index. html">
гипертекстовую ссылку</A>
В приведенном выше примере таг "A", который в HTML называют якорем (anchor), использует атрибут "HREF", который обозначает гипертекстовую ссылку (Hypertext Reference), для записи этой ссылки в форме URL. Данная ссылка указывает на документ с именем "index. html" в директории "altai" на сервере ". kiae. su", доступ к которому осуществляется по протоколу "http".
Гипертекстовые ссылки в HTML делятся на два класса: контекстные гипертекстовые ссылки и общие. Контекстные ссылки вмонтированы в тело документа, как это было продемонстрировано в предыдущем примере, в то время как общие ссылки связаны со всем документом в целом и могут быть использованы при просмотре любого фрагмента документа. Оба класса ссылок присутствуют в стандарте языка с самого его рождения, однако, первоначально наибольшей популярностью пользовались контекстные ссылки. Эта популярность привела к тому, что механизм использования общих ссылок практически полностью "атрофировался". Однако по мере стандартизации интерфейса пользователя и стилей представления информации разработчики языка снова вернулись к общим ссылкам и стремятся приспособить их к задачам управления этим интерфейсом. Справедливости ради, следует отметить, что общие гипертекстовые ссылки в большинстве броузеров не используются и не отображаются.
Структура HTML-документа позволяет использовать вложенные друг в друга контейнеры. Собственно, сам документ - это один большой контейнер который начинается с тага <HTML> и заканчивается тагом </HTML>:
<HTML> Содержание документа </HTML>
Контейнер HTML или гипертекстовый документ состоит из двух других вложенных контейнеров: заголовка документа (HEAD) и тела документа (BODY):
Рассмотрим простейший пример классического документа:
Пример 1.1
<HTML>
<HEAD>
<TITLE>Simple Document</TITLE>
</HEAD>
<BODY text=#0000ff BACKGROUND=#f0f0f0 >
<H1>Пример простого документа</H1>
<HR>
Формы HTML-документов
<UL>
<LI>Классическая
<LI>Фреймовая
</UL>
<HR>
</BODY>
</HTML>
Компания Netscape Communication расширила классическую форму документа возможностью организации фреймов (кадров), позволяющих разделить рабочее окно программы просмотра на несколько независимых фреймов. В каждый фрейм может быть загружена своя страница HTML. Приведем пример документа с фреймами.
Пример 1.2
<HTML>
<HEAD>
<TITLE>Frame Sample</TITLE>
</HEAD>
<FRAMESET COLS="30%,*">
<FRAME SRC=HTML-lecture. html NAME=LEFT>
<FRAME SRC=HTML-lec-1.html NAME=RIGHT>
</FRAMESET>
</HTML>
1.2. Контейнеры HTML-документа
Каждая из составных частей документа имеет свой набор контейнеров, которые можно внутри нее использовать. Контейнеры тела документа не используются в заголовке или в контейнере FRAMSET. Рассмотрим каждую группу контейнеров более подробно.
Контейнеры заголовка документа НТМL - HEAD
Заголовок документа не имеет атрибутов. Основное назначение тагов заголовка - это описание общих для всего документа параметров отображения. К таким параметрам можно отнести стиль отображения документа, общий базовый адрес гипертекстовых ссылок, общие гипертекстовые ссылки, идентификатор и имя документа и т. п. Мы рассмотрим только наиболее часто встречающиеся контейнеры.
ТIТLЕ
Наиболее часто используемым тагом заголовка является имя документа.
ТIТLЕ имеет следующий синтаксис
<ТIТLЕ> Название документа </ТIТLЕ>
Содержание тага ТIТLЕ отображается в поле названия документа.
ВАSE
Таг ВАSЕ связан с формой представления гипертекстовой ссылки в форме URL. Дело в том, что спецификация URL определяет две формы адресации документов: полную и неполную. НТМL разрешает использовать как полную форму адреса URL, так и неполную. Но для того, чтобы использовать вторую форму спецификации, ее надо на чем-то базировать, т. е. задавать базовый адрес, который можно было бы использовать для формирования полной формы URL из неполной. Таг ВАSЕ позволяет определить эту базу. Так, например, если в заголовке будет задано:
<BASE HREF="http://. kiae. su/>,
гипертекстовая ссылка вида:
<A HREF="/altai/index. html">
будет расширена до
<A HREF= http://. kiae. su/altai/index. html
Это же касается и других импортируемых в документ тагов. Графический образ, монтируемый в документ по команде:
<IMG SRC="/gif/te t. gif">
будет найден по адресу:
<IMG SRC=' http://. kiae. su/gif/test. gif'>
Содержание тага ВАSЕ интерфейсом пользователя прямо не отображается.
ISINDEX
Возможность поиска НТМL-документа по ключевым словам определяется тагом ISINDEX заголовка документа. В первоначальной версии языка данный таг не имел дополнительных атрибутов. Если сервер мог выполнить запрос по ключевым словам, то он автоматически вставлял в заголовок таг ISINDEX. Список ключевых слов приписывался клиентом к адресу документа после символа "?". Понятно, что выполнить запрос мог сервер, который при наличии символа "?" превращался в поисковую машину. НТМL-документ мог быть сгенерирован "на лету" программой, тогда ключевые слова после "?" приписываются к адресу этой программы. В новой версии языка появилась возможность указать программу обработки запроса и задать фразу вместо стандартной "SЕАRСН ISINDEX":
<ISINDEX HREF="http://. kiae. su/cgi-bin/search"
PROMPT="Enter Keywords:">
В приведенном примере атрибут НREF определяет адрес программы обработки запроса, а атрибут РRОМРТ - содержание приглашения. Справедливости ради стоит отметить, что полностью новые возможности этого тага выполняет только один - Аrеnа. Такие популярные интерфейсы, как Моsaic и Netscape, данный таг интерпретируют по-старому.
МЕТА
Таг МЕТА предназначен для определения в заголовке документа конструкций, отсутствующих в спецификации НТМL. Имеет три атрибута: NAME, CONTENT, HTTP-EQUIV. Применение данного тага затруднено тем, что для интерпретации конструкций, которые вводятся через этот таг, необходимо, чтобы сервер или интерфейс пользователя могли эти конструкции расшифровать и применить. Для такого сорта работы программа должна иметь интерпретировать конструкции SGML, что практически не реализовано ни в одной интерфейсной программе. Единственным способом применения данного тага на практике является включение в заголовок отклика по протоколу НТТР информации, определенной через атрибут НТТР-ЕQUIV:
<META HTTP-EQUIV="Keywords" CONTENT="Plsma, Nuclear Physics">
При таком использовании в заголовок НТТР-пакета будет включена строка: Keywords: Plasma, Nuclear Physics, что удобно при отправке почты, например.
Наиболее эффектное применение контейнера МЕТА для построения демонстрационных роликов. В этом случае изменение отображаемой страницы строится на параметре Rеfresh (т. е. времени обновления документа). В заголовок документа записывается контейнер МЕТА следующего вида:
<meta http-equiv = "Refresh": content = "0, URL=next. html">
такое предложение равносильно появлению в заголовке сообщения протокола НТТР предложения вида:
Refresh = 0; URL=next. html <LF>
В свою очередь это означает замену документа сразу же после загрузки его браузером. При этом в качестве нового документа используется документ из параметра URL
Контейнеры тела документа НТМL - BODY
Таги тела документа
Таги тела документа предназначены для управления отображением информации в программе интерфейса пользователя. Они описывают гипертекстовую структуру базы данных при помощи встроенных в текст контекстных гипертекстовых ссылок. Тело документа состоит из:
иерархических контейнеров и заставок;
заголовков (от Н1 до Н6);
блоков (параграфы, списки, формы, таблицы, картинки и т. п.);
горизонтальных отчеркиваний и адресов;
текста, разбитого на области действия стилей (подчеркивание, выделение, курсив),
математических описаний, графики и гипертекстовых ссылок.
ВОDY
Описание тагов тела документа следует начать с тага ВОDY. В отличии от тага НEАD, таг ВОDY имеет атрибуты:
ID - идентификатор тага. Используется для именования тагов, а также в качестве точки перехода по гипертекстовой ссылке. Данный атрибут имеется практически во всех тагах тела документа. С точки зрения практического использования идентификатора ВОDY в качестве точки перехода по гипертекстовым ссылкам, использование этого атрибута сомнительно, т. к. отображаемая часть документа собственно и начинается с этого тага.
LANG - определяет язык документа в виде двухсимвольного кода ISO-639, за которым следует через точку необязательный код страны в формате ISO-3166. По замыслу разработчиков стандарта языка данный атрибут должен распознаваться программами интерпретации и управлять отображением многоязычных текстов. Однако даже Аrеnа, специально предназначенная для иллюстрации НТМL 3.0, не реализует этой возможности.
СLASS - иерархически организованное имя типа "ADDITION. FIRST". Предназначено для связывания тага текста с определенным стилем отображения. Реально пока не используется.
Все три вышеперечисленных атрибута являются общими для тагов тела и в даль нейшем мы их обсуждать не будем. Если атрибут не будет разрешен для тага тела текста документа, то это будет указано специально.
ВАСКGROUND - определяет фон, на котором отображается текст документа. В примере НТМL-документа в качестве фона был использован небольшой графический образ "bgr. gif.
<ВОDY ВАСКGROUND="bgr. gif">
Как видно из этого примера, в качестве значения данного атрибута используется адрес в сокращенной форме URL. В данном случае это адрес локального файла.
Следует заметить, что разные интерфейсы пользователя поддерживают различные дополнительные атрибуты для тага ВОDY.
Атрибут | Значение |
ВАСКCOLOR=#FFFFFF | Цвет фона |
ТЕХТ=#0000FF | Цвет текста |
VLINK=#FF0000 | Цвет пройденных гипертекстовых ссылок |
LINK=#00FF00 | Цвет гипертекстовой ссылки |
В данной таблице строка #ХХХХХХ определяет цвет в терминах RGB в шестнадцатеричной нотации. Так, цвет текста определен как синий, фона - белый, пройденные ссылки красные, а новые ссылки зеленые. Если в качестве атрибутов тага ВОDY указать:
<ВОDY ВАСКCOLOR=#FFFFFF ТЕХТ=#0000FF VLINK=#FF0000 LINK=#00FF00>
то цвет фона будет желтым, текст будет синим, ссылки - зеленые, а пройденные ссылки станут красные. Однако пользоваться этими атрибутами следует крайне осторожно, т. к. у пользователя может оказаться другой интерфейс, который эти параметры не интерпретирует
Таги управления разметкой
Заголовки
Заголовки обозначают начала разделов документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тагами <Н1></Н1>, получается большим - это основной заголовок. Если текст окружен тагами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></ Нб>. Некоторые программы, позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 - крайне редко.
Стандарт языка насчитывает 11 атрибутов у тага заглавие. Рассмотрим только АLIGN, т. к. остальные в большинстве программ интерпретаторов не реализованы.
Для разбиения текста на параграфы используется таг <Р> в нем используются те же атрибуты что и заголовках.
В качестве примера рассмотрим создание домашней страницы фирмы по продаже бытовой электроники.
Пример 1.3
<HTML>
<HEAD>
<TITLE> Главная страница</TITLE>
</HEAD>
<BODY>
Компания.
Открытое акционерное общество Компания основанная в 1996 году,
является одним из ведущих продавцов бытовой электроники в России. Ос-новными
направлениями деятельности Компании являются:
реализация бытовой электроники ведущих фирм мира через сеть магази-нов;
создание сервисных центров по обслуживанию бытовой электроники;
Компания ищет агентов по сбыту бытовой электроники.
Контактная информация
Telephone (1
FAX (1
Почтовый адрес 123456 г. Город, ул Лесная, 106
Электронная почта
Общая информация: *****@***su
Продажи: *****@***abc. su
Copyright © 1997 Компания
</BODY>
</HTML>
Броузер покажет нам этот HTML-документ в виде непрерывного текста.
Атрибут АLIGN. Атрибут АLIGN позволяет выровнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам.
Следующая таблица определяет возможные значения атрибута АLIGN:
Значение | Описание применения |
Left | Выравнивание по левому краю |
Right | Выравнивание по правому краю |
Justify | Выравнивание по левому и правому краям |
Сеnter | Центрирование |
Значение Justify реализовано не во всех программах интерпретации.
Выравнивание по левому краю
По умолчанию текст HTML выравнивается по левому краю и не выравнивается по правому, то есть начало строк находится на одном уровне, а концы на разных. Чаще всего, получающийся при этом текст с равными промежутками между словами выглядит лучше. Поскольку выравнивание по левому краю задается автоматически, атрибут АLIGN=LEFT можно опустить.
Выравнивание по правому краю
Текст, выровненный по правому краю и не выровненный по левому - концы строк находятся на одном уровне, а начало на разных, - часто применяется на практике, хотя бы с целью создать оригинальный дизайн. Этот эффект достигается заданием атрибута АLIGN=RIGHT в обычных тагах, например в таге <Р>.
Центрирование текста и графики
Есть несколько способов отцентрировать текст или графику. В спецификациях HTML 3.0 предлагается пользоваться тагом <АLIGN=СЕNТЕR>. Однако этот таг применим не для всех объектов HTML-страницы, поэтому Netscape добавил таг <СЕNТЕR>, который центрирует любые объекты и поддерживается броузерами Netscape Navigator, Microsoft Explorer и некоторыми другими. К тагу <СЕNТЕR> нужно относиться с осторожностью. Какой-нибудь броузер может его вообще проигнорировать, и на странице окажется выровненный по левому краю текст.
Оборачивание
С помощью атрибута ALIGN= вы можете <обернуть> текст вокруг графического объекта. Для этого поместите таг <IMG SRC="/путь/файл. gif"> в том месте, где должен быть графический объект, и добавьте атрибут ALIGN=LEFT, ALIGN=RIGHT или АLIGN=CENTER. Кроме того, с помощью атрибутов НSPAСЕ= и VSPАСЕ= (они описываются ниже ) задается ширина горизонтальных и вертикальных полей, отделяющих изображение от текста. Можно также создать рамку вокруг картинки или обрамление таблицы текстом.
Вообще говоря, СLEAR является общим для всех блочных тагов (заглавия, параграфы и т. п.), однако реализован далеко не для всех из них.. СLEAR может принимать следующие значения:
Значение | Назначение |
left | Пропустить картинку, расположенную у левого края листа |
right | Пропустить картинку или таблицу, расположенную у правого края листа |
аll | Прервать отображение текста перед картинкой или таблицей и продолжить ниже |
В атрибуте СLEAR можно указать и численные значения:
<Р СLEAR="100 рiх">
Данная запись означает пустое горизонтальное поле высотой в 100 пиксельных строк.
Расставим таги заголовков с атрибутами в нашем примере.
Пример 1.4
<HTML>
<HEAD>
<TITLE> Главная страница</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Компания.</H1>
<H3 ALIGN=LEFT>Открытое акционерное общество Компания основан-ная в 1996
году, является одним из ведущих поставщиков бытовой электроники в
России.</H3>
<H4 ALIGN=RIGHT>Основными
направлениями деятельности Компании являются:
реализация бытовой электроники ведущих фирм мира через сеть ма-газинов;
создание сервисных центров по обслуживанию бытовой электроники; </H4>
<H3> Компания ищет агентов по сбыту бытовой электроники.</H3>
<H5 ALIGN=CENTER>Контактная информация
Telephone (1
FAX (1
Почтовый адрес 123456 г. Город, ул Лесная, 106
Электронная почта
Общая информация: *****@***su
Продажи: *****@***abc. su
Copyright © 1997 Компания</H5>
</BODY>
</HTML>
Таг <ВR>
Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает текст в рабочем окне, автоматически разбивая его на строки. В этом режиме существующие в тексте концы строк игнорируются. Иногда для большей выразительности требуется начать печать с новой строки. Для этой цели и используется таг ВR. Атрибут СLЕАR= в таге <ВR> используется для того, чтобы остановить в указанной вами точке обтекание текстом объекта и затем продолжить текст в пустой области за объектом. Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT, RIGHT или АLL атрибута СLЕАR=:
<BR СLЕАR =LЕFТ> | Текст будет продолжен, начиная с ближайшего пустого левого поля |
<BR СLЕАR =RIGHT> | Текст будет продолжен, начиная с ближайшего пустого правого поля |
<BR СLЕАR=АLL> | Текст будет продолжен, как только и левое, и правое поля окажутся пустыми |
Таг <NOВR>
Таг <NОВR> (Nо Вrеаk, без обрыва) дает команду броузеру отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в таги <NОВR>, не поместится на экране, броузер добавит в нижней части окна документа горизонтальную полосу прокрутки. Если вы хотите оборвать строку в определенном месте, поставьте там таг <ВR>.
Таги управления отображением символов
Все эти таги можно разбить на два класса: таги, управляющие формой отображения (font style), и таги, характеризующие тип информации (information type). Часто внешне разные таги при отображении дают одинаковый результат. Это зависит главным образом от настроек интерпретирующей программы и вкусов пользователя.
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 |
