Закрыть текущее окно

Пример 2.18. Закрыть текущее окно

<HTML> <HEAD> <title>Window simple example</title> </HEAD> <BODY> <center> <h1>Close window methods</h1> <hr> </center> Если выбрать гипертекстовую ссылку <a href="javascript:window.close();void(0);"> Закрыть окно</a>, то данное окно будет закрыто. </BODY> </HTML>

В данном примере в качестве гипертекстовой ссылки используется ссылка на метод widow.close(), который закрывает текущее окно. На применении методов open и close построен принцип построения help. По методу open открывается окно подсказки. В него загружают текст документа-подсказки с заранее заготовленной ссылкой на закрытие окна. При выборе этой ссылки окно подсказки закрывается, и пользователь продолжает работать с основным окном навигатора.

Рассмотрим еще один метод, связанный с окном - метод scroll. Данный метод позволяет организовать прокрутку текста в окне.

Прокрутка текста в окне навигатора

Пример 2.19. Прокрутка текста в окне навигатора

<HTML> <HEAD> <title>Scroll text</title> </HEAD> <BODY> <center> <h1>Прокрутка текста в окне навигатора</h1> <hr> [<a href="javascript:for(i=0;i<80;i++) {window.scroll(0,i*10)};void(0);">Прокрутить текст</a>] <hr> </center> Вообще говоря, проверить тип программы просмотра можно на сервере протокола HTTP и передать программе просмотра уже готовую страницу без условной генерации ее ... <hr> <center>[<a href=#top>Вернуться в начало</a>]</center> </BODY> </HTML>

От метода прокрутки мы перейдем теперь к методу, который позволит нам прокручивать документ более равномерно - это метод setTimeout. Большинству пользователей Web он знаком по бегущим строкам в поле статуса программы-навигатора. Метод setTimeout позволяет отложить выполнение функции, которая указывается в качестве аргумента на определенное количество миллисекунд. Системы прокрутки в этом случае рекурсивно вызывают свое выполнение через этот метод и тем самым порождают бесконечный цикл прокрутки.

Прокрутка текста по таймеру

Пример 2.20. Прокрутка текста по таймеру

<HTML> <HEAD> <title>Scroll text</title> <script language=JavaScript>  </script> </HEAD> <BODY onLoad=my_scroll()> <center> <h1>Прокрутка текста в окне навигатора</h1> <hr> [<a href="javascript:kuku();void(0);">Запустить/Остановить</a>] <hr> </center> Вообще говоря, проверить тип программы просмотра можно на сервере протокола HTTP и передать программе просмотра уже готовую страницу без условной генерации ее ... <hr> <center>[<a href=#top>Вернуться в начало</a>]</center> </BODY> </HTML>

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

Следует подробно остановиться на особенностях исполнения метода setTimeout. Особенно в части запуска и останова процедуры прокрутки. Рассматривать алгоритм ее исполнения лучше всего в контексте многопоточных или многозадачных систем. Функция my_scroll - это отдельный процесс (поток), который исполняется программой-навигатором. В момент, когда интерпретатор навигатора встречает метод setTimeout, он создает новый процесс (поток), эквивалентный функции my_scroll, и откладывает его исполнение на 500 миллисекунд. После этого он продолжает выполнять текущий процесс (поток). В нашем случае вызов метода setTimeout - это последняя команда функции my_scroll, поэтому после нее ничего не выполняется, а сам процесс или поток, связанный с текущей функцией my_scroll после обработки setTimeout уничтожается. Однако, новый процесс (поток) уже создан в памяти и ждет начала своего исполнения.

В нашем примере новый процесс поток порождается всякий раз, как интерпретатор достигает метода setTimeout, а уничтожается, когда интерпретатор доходит до последнего оператора этого потока. Такой алгоритм выполнения заставляет расположить вызов setTimeout за пределами блока проверки условий скроллинга. Если мы расположим его внутри, то при останове скроллинга новый процесс не будет порожден, а это значит, что и кода, который будет реагировать на флаг скроллинга после останова, не будет существовать, т.е. запустить скроллинг не будет никакой возможности. Именно по этой причине функция my_scroll начинает исполняться сразу после загрузки документа по событию onLoad, но т.к. флаг скроллинга 0, то прокрутки текста не происходит. Процесс порождается все время, пока страница загружена в текущее окно навигатора.

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

Изменение картинки через гипертекстовую ссылку

Пример 2.21. Изменение картинки через гипертекстовую ссылку

<HTML> <HEAD> <TITLE>HTTPD\HTDOCS\JAVASCR\EXAMPLE1</TITLE> <SCRIPT>  </SCRIPT> </HEAD> <BODY TEXT="#000000" BGCOLOR="#FFFFCC" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000"> <H1> <FONT COLOR="#000099">Просмотр фотографий образцов</FONT> </H1> <center> <TABLE COLS=2 WIDTH="100%" > <CAPTION> <FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT> </CAPTION> <TR> <TD> <UL> <LI><A HREF="javascript:l_image('freeze.gif')">Холодильник</A> </LI> <LI><A HREF="javascript:l_image('dust.gif')">Пылесосы</LI> <LI><A HREF="javascript:l_image('toster.gif')">Тостер</LI> <LI><A HREF="javascript:l_image('cook.gif')">Варочный стол</LI> <LI><A HREF="javascript:l_image('oven.gif')">Духовка</LI> <LI><A HREF="javascript:l_image('wash.gif')">Стиральная машина</LI> <LI><A HREF="javascript:l_image('dishwash.gif')">Посудомоечная машина</LI> </UL> </TD> <TD ALIGN=CENTER VALIGN=CENTER><IMG SRC="dust.gif" NAME="tool" > </TD> </TR> </TABLE> </center> </BODY> </HTML>

В данном примере при выборе гипертекстовой ссылки происходит вызов функции l_image(), которая изменяет значение атрибута SRC в контейнере IMG. Таким образом, можно организовать просмотр различных товаров в одном единственном графическом окне.

Выбор картинки из списка

Пример 2.22. Выбор картинки из списка

 ... <SCRIPT>  </SCRIPT> [ На начало страницы ] Фрагмент HTML-разметки с вызовом функции изменения картинки: <center> <TABLE COLS=2 WIDTH="100%" > <CAPTION> <FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT> </CAPTION> <TR> <th> <form name=form1> <select name=item onChange=l_image()> <option>Холодильник <option selected>Пылесос <option>Тостер <option>Варочный стол <option>Духовка <option>Cтиральная машина <option>Посудомоечная машина </select> </form> </th> </tr> <tr> <th ALIGN=CENTER VALIGN=CENTER><IMG SRC="dust.gif" NAME="tool" > </th> </TR> </TABLE> [ <a href=#top>На начало страницы</a> ] <HR> </center>

В данном примере картинка выбирается как элемент списка. При этом происходит событие onChange, и по нему определяют, какой именно элемент был отобран.

Листание и прокрутка картинок

Пример 2.23. Листание и прокрутка картинок

<SCRIPT>  </SCRIPT> [ На начало страницы ] <TABLE COLS=2 WIDTH="100%" > <CAPTION> <FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT> </CAPTION> <TR> <th> <form name=form1> <input name=f type=button value=Вперед onClick=next_image()> <input name=ss type=button value="Старт/Стоп" onClick=start_stop()> <input name=b type=button value=Назад onClick=back_image()> </form> </th> </tr> <tr> <th ALIGN=CENTER VALIGN=CENTER><IMG SRC="dust.gif" NAME="tool" > </th> </TR> </TABLE>

В этом примере мы используем те же средства, что использовали и для организации скроллинга. Алгоритм останова и запуска прокрутки тот же, что и при скроллинге окна.

Динамический imagemap

Пример 2.24. Динамический imagemap

<SCRIPT>  </SCRIPT> [ На начало страницы ] <MAP name=kitchen_map> <area name=freeze shape=rect coords="14,11,88,171" href="javascript:void(0)"> <area name=aero shape=rect coords="179,12,238,58" href="javascript:void(0)"> <area name=oven shape=rect coords="179,95,237,172" href="javascript:void(0)"> <area name=dry shape=rect coords="239,95,297,173" href="javascript:void(0)"> <area name=wash shape=rect coords="297,96,370,173" href="javascript:void(0)"> <area name=kran shape=rect coords="90,95,138,172" href="javascript:void(0)"> </map> <table> <CAPTION> <FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT> </CAPTION> <TR> <TH> <a href="javascript:set_image('bosh')">Bosh</a> </th> <th> <a href="javascript:set_image('idezit')">Indesit</a> </th> <th> <a href="javascript:set_image('candy')">Candy</a> </th> </TR> <TR> <th colspan=3><IMG SRC="Bosh.gif" NAME="tool" USEMAP=#kitchen_map></th> </TR> <tr><th colspan=3><form name=form1><input name=kuku size=40 value=Выбери набор техники.></form></th></tr> </TABLE>

В данном примере меняются не только картинки, но и стеки гипертекстовых ссылок под ними. Для каждой новой картинки определяются свои собственные гипертекстовые ссылки.

Пример использования client-site imagemap

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

Просмотр фотографий образцов через...

Просмотр фотографий образцов через список гипертекстовых ссылок

Вся страница размечается как таблица, состоящая из одной строки в две ячейки. В первой ячейке размещается список выбора альтернатив, во второй ячейке размещаются картинки, выбранные при помощи списка альтернатив. Все элементы списка помечены как гипертекстовые ссылки. У каждой ссылки определено событие onSelect. Для того, чтобы не происходил переход к другой странице, а выполнялась только обработка события, в поле href необходимо определить вызов JavaScript. Ниже приведен пример реализации такой компоновки и пример кода самой страницы.

Пустые ячейки

Если ячейка не содержит данных, она не будет иметь границ. Если вы хотите, чтобы у ячейки были границы, но не было содержимого, вы должны поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой < ;ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселях или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении текста и графики на странице.

Разберем теперь описатели стилей...

Контейнер STYLE(<style type="...">......</style>) служит для определения таблицы описания стилей. Хотя в спецификации CSS прямо не говорится, в каком контейнере документа следует применять STYLE, тем не менее, в приме рах чаще всего приводится этот контейнер внутри контейнера HEAD.

Контейнер LINK в контексте описателей стилей применяется для определения внешнего файла с описаниями стилей для данного документа. Например, внешний файл может содержать следующее описание стилей:

/* contents of the external style sheets file css.htm*/ p {color:blue; font-family: times; font-size:10pt;} h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;} /* the end of style sheets definition */

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

Пример простого документа

Рис. 1.1. Пример простого документа

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

Пример документа с фреймами

Рис. 1.2. Пример документа с фреймами

Пример текста без разметки

Рис. 1.3. Пример текста без разметки

Броузер покажет нам этот HTML-документ в виде непрерывного текста.

Текст с использованием тагов заголовков

Рис. 1.4. Текст с использованием тагов заголовков

Результат мы можем видеть на экране.

Таги отображения стилей текста

Рис. 1.5. Таги отображения стилей текста

Рис. 1.6.

Гипертекстовые ссылки

Рис. 1.7. Гипертекстовые ссылки

Новый документ

Рис. 1.8. Новый документ

Другой формой использования тага А является определение точек внутри текста, на которые можно сослаться: Такой метод используется в случае когда документ нельзя поделить на части и необходимо быстро передвигаться из оглавления по тексту. <А NАМЕ= роint"> Для ссылки на такую точку используют следующую форму URL: <А НREF=" http://роlyn.net.kiae.su/index.html #роint"> Ссылка на точку "роint" в документе "index.html"</А>

На описании простых гипертекстовых ссылок можно закончить обзор средств языка НТМL, ориентированных на текстовое представление информации и организацию гипертекстовых баз данных.

Вставленное в текст изображение

Рис. 1.9. Вставленное в текст изображение

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

Изображения на странице Web могут быть использованы и в качестве гипертекстовых ссылок, как и обычный текст. Читатель страницы щелкает на изображении и отправляется на другую страницу или изображение. Для обозначения изображения как гипертекстовой метки используется тот же таг <А>, что и для текста, но между <А> и </А> вставляется таг изображения <IMG>: <А НREF="адрес файла или изображения"><IMG SRC="picture.gif"></А>

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

Пример активного изображения

Рис. 1.10. Пример активного изображения

Имейте в виду, что если опустить атрибут SНАРЕ=, будет задано SНАРЕ="RЕСТ". Атрибут СООRDS= описывает координаты формы, используя пиксели в качестве единиц измерения. Атрибут USЕМАР= в таге <IMG> действует как ссылка <переход на>. Если перед именем файла карты помещен символ #, то атрибут USЕМАР= считает, что активное изображение находится в файле, описанном в таге <IMG>. Не пугайтесь координат. Точкой отсчета является левый верхний угол.

Пример разноцветной таблицы

Рис. 1.22. Пример разноцветной таблицы

Выполнение скрипта при...

Рис. 2.1. Выполнение скрипта при выборе гипертекстовой ссылки

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

При загрузке был определен...

Рис.2.2. При загрузке был определен Netscape Navigator в качестве программы-браузера HTML-страниц

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

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

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

Вернемся теперь снова к примеру 2.13, но только разместим теперь код JavaScript не в тексте документа, а в отдельном файле:

Создание простой страницы с фреймами

Создадим, для лучшего понимания, пару простых страничек с фреймами, чтобы стало понятно, каково строение НТМL страницы с фреймами и для чего нужны основные таги и атрибуты.

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

Создание разноцветных таблиц Ведущие...

Цветные границы в Netscape Navigator

Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в таге <ВOD Y> как фон страницы. Затем задайте цвет фона страницы. В результате ваш таг <ВОDY> будет выглядеть примерно так: <BODY ВАСКGROUND="сооlbg.gif" ВGCOLOR=" # FF0000">

Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ли ваш фоновый GIF серым или нет, цветные линии и границ ы таблиц будут заметно выделяться. Если фоновый GIF не слишком сложно устроен, время загрузки страницы лишь немного возрастет. На приведенном ниже примере показано какие, широкие возможности дает использование цвета в HTML и в частности в таблицах.

Списки

Списки являются важным средством структурирования текста и применяются во всех языках разметки. В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный), нумерованный список (упорядоченный) и список определений. Таги для ненумерованных (Unordered Lists <UL>) и нумерованных списков (Ordered Lists <OL>) - это основа HTML. HTML 3.0 добавляет несколько атрибутов к тагам списков для выбора разных типов маркеров в ненумерованных списках и разных схем нумерации в нумерованных. Можно включать такие атрибуты в сами таги <LI> (List Item), чтобы сменить тип маркера в середине списка. После появления нового атрибута все последующие маркеры в списке будут иметь такой же вид.

Табуляция

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

Самый простой - записать таг <ТАВ IDENT=n>, где n определяет число еn-пробелов перед новым абзацем. Еn-пробел - это типографская единица измерения, приблизительно равная ширине буквы n в том шрифте, который вы используете. Таким образом, таг <ТАВ IDENT=4> задает символ табуляции шириной в четыре еn-пробела.

Если вы хотите в нескольких местах применить символ табуляции заданной величины, то в том месте, где вы задаете его размер, поместите таг <ТАВ> с атрибутом ID=, например, таким образом: <ТАВ ID="tabone" >

Теперь в любом месте страницы достаточно написать <ТАВ ТО="ТАВОNЕ">, и символы табуляции станут равными ТАВОNЕ. Соответственно можно аналогичным образом создать ТАВТWО, ТАВТНRЕЕ, ТАВFОUR и т. д.

Чтобы создать более сложный дизайн, можно применить с тагом <ТАВ> атрибут ALIGN=. При задании АLIGN=LЕFТ или текст, следующий за тагом <ТАВ> (вплоть до ближайшего обрыва строки или тага), будет выровнен по левому или правому краю соответственно. При задании АLIGN=СЕNTER текст центрируется относительно табулятора на задаваемое тагом <ТАВ> число еn-пробелов.

Таг <ТАВ> можно применять для размещения и текста, и графики.

Таг <BLINK>

Таг <BLINK> вызывает мерцание текста заключенного в него.

Таг <DL>

Использование тага списка (Definition List: <DL>) напоминает применение отступов в обычных текстовых редакторах. Таг <DL> был создан для форматирования текста, определяющего какой-то термин. Определяемый термин записывается на одной строке, а его определение на следующей, с небольшим отступом вправо. Таг <DL> позволяет создавать отдельные абзацы с отступом без нумерации или маркеров. Отступ делается от левого края. Если у вас на странице несколько тагов <DL>, то текст постепенно сдвигается все больше вправо. В конце определения поместите закрывающий таг </DL>. Помните, что таг <DL> сдвигает только левую границу абзаца.

Таг <NOВR>

Таг <NОВR> (Nо Вrеаk, без обрыва) дает команду броузеру отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в таги <NОВR>, не поместится на экране, броузер добавит в нижней части окна документа горизонтальную полосу прокрутки. Если вы хотите оборвать строку в определенном месте, поставьте там таг <ВR>.

Таг <НR>

Горизонтальное отчеркивание (horizontal rule) применяется для разделения документа на части. С помощью одного лишь тага <НR> можно придать странице совершенно необычный вид. Попробуйте поэкспериментировать с тагом <НR>и вы получите линии, совсем не похожие на те, которыми вы обычно пользуетесь.

Таг <OL>

Нумерованные списки. Таг <OL> вместе с атрибутом ТYРЕ= в HTML 3.0 позволяет создать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке.
<ОL ТYРЕ=1> Таг создает список с нумерацией в формате 1., 2., 3., 4. и т. д.
<ОL ТYРЕ=A> Таг создает список с нумерацией в формате А., В., С., В. и т. д.
<ОL ТYРЕ=a> Таг создает список с нумерацией в формате а., b., с., d. и т. д.
<ОL ТYРЕ=I> Таг создает список с нумерацией в формате I., II., III., IV. и т. д.

Таг <РRЕ>

Отображение текста без форматирования.

Таг <САРТIОN> <CAPTION>...

Пример 1.13

<HTML> <BODY> <TABLE BORDER> <CAPTION ALIGN=TOP>Заголовок над таблицей</CAPTION> <TR> <TD>Текст или данные</TD> <TD>Текст или данные</TD> <TD>Текст или данные</TD> <TD>Текст или данные</TD> </TR> </TABLE> <TABLE BORDER> <CAPTION ALIGN=BOTTOM>Заголовок под таблицей</CAPTION> <TR> <TD>Текст или данные</TD> <TD>Текст или данные</TD> <TD>Текст или данные</TD> <TD>Текст или данные</TD> </TR> </TABLE> </BODY> </HTML>

Таг <ТАВLЕ>.

Для описания таблиц служит таг <ТАВLЕ>. Таг <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.

Таг <ТD> Внутри строки таблицы...

Пример 1.11

<HTML> <BODY> <TABLE BORDER> <TR> <TD>В</TD> <TD>этой</TD> <TD>строке</TD> <TD>пять</TD> <TD>столбцов</TD> </TR> <TR> <TD>а в этой</TD> <TD>только</TD> <TD>три.</TD> </TR> </TABLE> </BODY> </HTML>

Таг <ТН> При задании заголовков...

Пример 1.12

<HTML> <BODY> <TABLE BORDER> <TR> <TH>Заголовок центрирован по умолчанию</TH> <TH COLSPAN=2>Заголовок может объединять столбцы</TH> </TR> <TR> <TH>Заголовок может быть расположен перед столбцами</TH> <TD>Текст или данные</TD> <TD>Текст или данные</TD> </TR> <TR> <TH ROWSPAN=3> Заголовок может объединять строки</TH> <TD>Текст или данные</TD> <TD>Текст или данные</TD> </TR> <TR> <TD>Текст или данные</TD> <TD>Текст или данные</TD> </TR> <TR> <TD>Текст или данные</TD> <TD>Текст или данные</TD> </TR> </TABLE> </BODY> </HTML>

Таг <ТR>

Таг <ТR> (сокращение от Таble Row - строка таблицы) создает строку таблицы. Если в таблице содержится два набора тагов <ТR></ТR>, в ней будут две строки. Весь текст, другие таги и атрибуты, которые вы хотите поместить в одну строку, должны быть помещены между тагами <ТR></ТR>.

Таг <UL>

Ненумерованный список. Ненумерованный список предназначен для создания текста типа: первый элемент списка второй элемент списка третий элемент списка

Записывается данный список в виде следующей последовательности: <UL> <LI> первый элемент списка <LI> второй элемент списка <LI> третий элемент списка </UL>

Таги <UL> и </UL> - это таги начала и конца ненумерованного списка, таг <LI> (List Item) задает таг элемента списка. В дополнение к этим тагам существует таг, позволяющий именовать списки - LН (List Header). Приведем пример отображения ненумерованного списка следующего вида:

Таг <ВLОСKQUOTE>

Таг добавляет поля слева и справа от текста. Это полезный таг, поскольку он позволяет расположить текст компактно в центре страницы. При использовании < ВLОСKQUOTE > несколько раз текст все больше сжимается к центру.

Microsoft Internet Explorer и Netscape Navigator допускают применение атрибутов LEFTMARGIN=n и ТОРМАRGIN =n в таге <ВОDY>. Атрибут LEFTMARGIN = задает левое поле для всей страницы. ТОРМАRGIN= определяет верхнее поле. Число n показывает ширину поля в пикселях. Например, таг < ВОDY LEFTMARGIN ="40"> создаст на всей странице левое поле шириной 40 пикселей. При n, равном 0, левое поле отсутствует.

Таг <ВR>

Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает текст в рабочем окне, автоматически разбивая его на строки. В этом режиме существующие в тексте концы строк игнорируются. Иногда для большей выразительности требуется начать печать с новой строки. Для этой цели и используется таг ВR. Атрибут СLЕАR= в таге <ВR> используется для того, чтобы остановить в указанной вами точке обтекание текстом объекта и затем продолжить текст в пустой области за объектом. Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT, RIGHT или АLL атрибута СLЕАR=:

<BR СLЕАR =LЕFТ>	Текст будет продолжен, начиная с ближайшего пустого левого поля
<BR СLЕАR =RIGHT>	Текст будет продолжен, начиная с ближайшего пустого правого поля
<BR СLЕАR=АLL>	Текст будет продолжен, как только и левое, и правое поля окажутся пустыми

Таги, характеризующие тип информации

ТагЗначение

<ЕМ>... </ЕМ>	Типографское усиление
<СIТЕ>...</СIТЕ>	Цитирование
< STRONG >.</ STRONG >	Усиление
<СODE>... </СОDE>	Отображает примеры кода (например, коды программ)
<SАМР>... </SАМР>	Последовательность литералов
<КВD>... </КВD>	Пример ввода символов с клавиатуры -
<VAR>...</VAR>	Переменная
<DFN>... </DFN>	Определение
<Q>- </Q>	Текст, заключенный в скобки

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

Таги управления отображением символов

Все эти таги можно разбить на два класса: таги, управляющие формой отображения (font style), и таги, характеризующие тип информации (information type). Часто внешне разные таги при отображении дают одинаковый результат. Это зависит главным образом от настроек интерпретирующей программы и вкусов пользователя.

Таги, управляющие формой отображения

Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации - все это делает страницы интереснее и функциональнее. Microsoft Internet Explorer и Netscape Navigator позволяют определить шрифт с помощью атрибута FАСЕ=. Теперь можно объединять на одной странице несколько видов шрифтов, вне зависимости от того, какой из них задан по умолчанию в броузере пользователя.

Верхние и нижние индексы [НТМL 3.0]

С помощью тагов <SUР> и <SUВ> можно задавать верхние и нижние индексы, необходимые для записи торговых знаков, символов копирайта, ссылок и сносок. Рассматриваемые таги позволяют создать внутри текстовой области верхние или нижние индексы любого размера. Чтобы они казались меньше окружающего текста, можно использовать таги <SUР> и <SUВ> с атрибутом FONT SIZE=.

Атрибут SIZE=

Атрибут SIZЕ= тага <FОNТ> позволяет задавать размер текста в данной области. Если вы не пользуетесь тагом <ВАSЕFОNТ SIZЕ=n> для задания определенного размера шрифта на всей странице, то по умолчанию принимается 3.
Некоторые броузеры не поддерживают таг <FONТ>, поэтому желательно употреблять его только внутри текстовой области. В других случаях лучше использовать таги <Н1>, <Н2>, <НЗ> и т. д. Главное преимущество тага <FONТ> состоит в том, что он после окончания своего действия не разбивает строку, как таги <Нn>. Поэтому таг <FONТ> бывает очень полезен для изменения размера шрифта в середине строки.

Таги <ВIG> и <SMALL>

Текст, расположенный между тагами <ВIG></ВIG> или <SMALL></SMALL>, будет соответственно больше
Атрибут СОLОR=хх
Если вы хотите сделать свою страницу более красочной, то можете воспользоваться атрибутом СОLОR= в таге FONТ, и тогда единственным ограничением будет цветовая палитра на компьютере пользователя. Пока только самые популярные броузеры отображают цвет шрифта.

Пользоваться тагом <FONТ СОLОR=> для смены цвета шрифта, так же как и большинством тагов НТМL, очень просто. Заключите текст в таги <FONТ СОLОR= RED></FONТ>.

Таги, управляющие формой отображения

Таг Значение

<I>.....</I>	Курсив (Italic)
<B>...</B>	Усиление ВОLD)
<ТТ>... </TТ>	Телетайп
<U>. </U>	Подчеркивание
<S>...</S>	Перечеркнутый текст
< BIG >... </ BIG >	Увеличенный фонт
< SMALL >...</ SMALL >	Уменьшенный фонт
< SUB >...</ SUB >	Подстрочные символы
< SUЗ >... </ SUР >	Надстрочные символы

Назад | Содержание | Вперед

Таги управления разметкой

Таги управления разметкой

Заголовки

Заголовки обозначают начала разделов документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тагами <Н1></Н1>, получается большим - это основной заголовок. Если текст окружен тагами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></ Нб>. Некоторые программы, позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 - крайне редко.

Стандарт языка насчитывает 11 атрибутов у тага заглавие. Рассмотрим только АLIGN, т.к. остальные в большинстве программ интерпретаторов не реализованы.

Для разбиения текста на параграфы используется таг <Р> в нем используются те же атрибуты что и заголовках.

В качестве примера рассмотрим создание домашней страницы фирмы по продаже бытовой электроники.

ТIТLЕ

Наиболее часто используемым тагом заголовка является имя документа.

ТIТLЕ имеет следующий синтаксис <ТIТLЕ> Название документа </ТIТLЕ>

Содержание тага ТIТLЕ отображается в поле названия документа.

ВАSE

Таг ВАSЕ связан с формой представления гипертекстовой ссылки в форме URL. Дело в том, что спецификация URL определяет две формы адресации документов: полную и неполную. НТМL разрешает использовать как полную форму адреса URL, так и непо лную. Но для того, чтобы использовать вторую форму спецификации, ее надо на чем-то базировать, т.е. задавать базовый адрес, который можно было бы использовать для формирования полной формы URL из неполной. Таг ВАSЕ позволяет определить эту базу. Так, напр имер, если в заголовке будет задано: <BASE HREF="http://polyn.net.kiae.su/>, гипертекстовая ссылка вида: <A HREF="/altai/index.html"> будет расширена до <A HREF= http://polyn.net.kiae.su/altai/index.html Это же касается и других импортируемых в документ тагов. Графический образ, монтируемый в документ по команде: <IMG SRC="/gif/te t.gif"> будет найден по адресу: <IMG SRC=' http://polyn.net.kiae.su/gif/test.gif'>

Содержание тага ВАSЕ интерфейсом пользователя прямо не отображается.

Вложенные и множественные кадровые структуры

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

В основном вложенные фреймы действуют так же, как вложенные таблицы. Задайте кадровую структуру, а внутри какого-нибудь фрейма в ней еще одну структуру. Помните, что таг <FRАМЕ> не имеет закрывающего тага. Вы, наверное, заметили, что при работе с фреймами не используются таги <СОLSРАN> и <ROWSРАN>. Их роль играют множественные, или вложенные, фреймы. Задав внутри одной объемлющей фреймовой структуры две независимых подструктуры, можно поместить в левой части экрана сто лбец из двух, а в правой - из трех фреймов.

"Волшебные" целевые фреймы

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

Имена <волшебных> целевых фреймов всегда начинаются с символа подчеркивания (_); никакие другие фреймы не могут так называться. < Волшебные> фреймы необязательно указывать в фреймовой структуре. Если не проявить должной акку ратности, то это - еще один повод вашему броузеру открыть кучу окон.

Вот и весь код, необходимый для...

Пример 1.23

<HTML> <HEAD> <TITLE> Меню</TITLE> </HEAD> <BODY> <H3 ALIGN=CENTER>Компания.</H3> <HR> <UL><font color="#400040" size="4"> <LI><a href="html-pr2-4.html" ТАRGЕТ="main">Главная</a> <LI><a href="news.html" ТАRGЕТ="main">Новости</a> <LI><a href="products.html" ТАRGЕТ="main">Товары</a> <LI><a href="servis.html" ТАRGЕТ="main">Услуги</a> <LI><a href="contact.html" ТАRGЕТ="main">Контакты</a> <LI><a href="search.htm" ТАRGЕТ="main">Поиск</a> </UL> </font> </BODY> </HTML>

HyperText Markup Language) был предложен

Введение

Язык гипертекстовой разметки 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-документов.

Задание фреймовой структуры

Для начала мы должны представить себе общий вид страницы - где и какого размера будут фреймы. Затем можно подумать об их содержании. Ниже приводится код простой фреймовой структуры с использованием тага <FRAMESET>. Обратите вниман ие: страница с фреймовой структурой не содержит тага <ВОDY>.

Заметим, что здесь ничего не говорится...

Пример 1.24

<HTML> <HEAD> <TITLE> Главная страница</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Компания.</H1> <HR> <H3 ALIGN=LEFT><I>Открытое акционерное общество Компания основанная в 1996 году, является одним из ведущих поставщиков бытовой электроники в России.</I></H3> <HR> <H3>Основными направлениями деятельности Компании являются: <OL> <LI>реализация бытовой электроники ведущих фирм мира через сеть магазинов; <LI>создание сервисных центров по обслуживанию бытовой электроники.</H3> </OL> <HR> <H3><U><FONT COLOR=RED> Компания ищет агентов по сбыту бытовой электроники.</FONT></U></H3> <H5 ALIGN=CENTER>Контактная информация</H5> <UL> <LI>Telephone (123) 12-34-56 <LI>FAX (123) 12-34-56 <LI>Почтовый адрес 123456 г. Город, ул Лесная, 106 <UL TIPE=CIRCLE>Электронная почта<BR> <LI>Общая информация: abc@abc.su <LI>Продажи: abc@abc.abc.su </UL> </UL> <BR><BLINK>Copyright</BLINK> © 1997 Компания </BODY> </HTML>