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

Практическая работа.

«Разработка гипермедиальных приложений с использованием языка HTML.

Ход работы.

1. Создайте папку WEB.

2. Запустите текстовый редактор Блокнот : Пуск ð Программы ð Стандартные ðБлокнот.

Вставка рисунка.

5.1. Скопируем файл рисунка в папку WEB, возьмем файл с расширением .GIF или .BMP

5.2. Вставим изображение в документ и отображение рамки вокруг рисунка, толщиной в 5 пиксел после заголовка:

5.3. Выровнять рисунок по центру <center></center>.

Создание списка.

6.1. Создадим новую страницу нашего сайта, на которой вставим ненумерованный список. В окне программы Блокнот (Notepad) выберите команду меню Файл ðСоздать (File ð New)

6.2. Создайте структуру Web-документа, напечатав основные теги: пункт 3.1

6.3. В качестве заголовка документа в теге <tltle> </title> введите: Чем мы занимаемся?

6.4. Такой же заголовок для списка введите в теле документа между тегами <body> и </body>, использовав для его отображения теги <h2></h2> с атрибутом align=center, выравнивающим заголовок по центру страницы:

<h2 aling =center> Чем мы занимаемся? </h2>

6.5. Самостоятельно подберите цвет фона страницы и цвет текста, указав соответствующие значения для атрибутов bgcolor и text в открывающемся теге <body>, например, так:

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

6.6. Теперь вставим на страницу ненумерованный список с информацией о жизни и деятельности вашей группы. Ненумерованные списки создаются с помощью пары тегов <ul> </ul> - (Unordered List –неупорядоченный список), которые ограничивают список. Между ними располагается столько элементов,начинающихся с тега <LI> - (List Item – элемент списка), сколько элементов в списке.

<OL></OL>–нумерованный список – (Ordered List упорядоченный)

<DL></DL> - список определений (Difinition List)

Заголовок списка необязательный элемент, формируется с помощью парного тега: <LH></LH>

6.7. Вставьте пустую строку под строкой с кодом

<h2 align»center> Чем мы занимаемся? </h2> и введите в теле документа следующий код:

<ul>

<li> Изучением предметов на занятиях.

< li > Самостоятельное изучение предметов в библиотеке.

< li > Работа в Интернете.

< li > Практика по специальности.

< li > Дружба.

< li > Клуб досуга.

</ul>

Обратите внимание: тег < li > может использоваться как одиночный, т.е. без парного закрывающего тега </ li >.

6.8. Другой вид маркера можно установить с помощью листов стилей, например <LI type=square>–маркер в виде заполненного квадратика, <LI type=circle>- незаполненного кружка. Поэксперементируйте с этим.

6.9. Сохраните документ в папке Web под именемspisok.html.

6.10. Откройте файл spisok.html из папки Web

7. Создание формы:

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

Подобные формы широко используются на Интернет-сайтах для сбора различных сведений, регистрации пользователя, формирования запроса и т.д. Такая форма может содержать поля для ввода данных, поля списков, открывающиеся списки, флажки и переключатели для выбора значений и другие элементы управления. После заполнения формы пользователем специальная программа-обработчик или, как ее еще называют, скрипт, обрабатывает полученные-данные и передает их по назначению. Как вставить в Web-документ простую форму, которая позволит пользователю напечатать свое сообщение прямо на Web-странице и автоматически отправить его вам по электронной почте?. Для этого вставим в HTML-документ spisok.html текст с приглашением заполнить форму, поместив его под списком. Текст приглашения следует выделить в отдельный абзац, ограничив его парой тегов <р> </р> и выровнять по центру с помощью атрибута align=center.

7.1. Вставьте пустую строку между закрывающим тегом </u1> и закрывающим тегом </body> и введите в этой строке следующий код:

7.2. <р align=center >Если у Вас есть вопросы или предложения, напишите нам: </р>

7.3. Каждая форма начинается тегом <form> и заканчивается тегом </form> HTML - документ может содержать в себе несколько форм, однако они не должны находиться одна внутри другой. Текст и теги могут размещаться внутри формы без ограничений. Открывающий тег <form> должен содержать обязательный атрибут action, который определяет, где находится программа-обработчик или адрес сервера, который будет обрабатывать форму. Так как сообщение, написанное посетителем сайта, будет отправляться по электронной почте, то значение этого атрибута должно содержать адрес E-mail владельца сайта, например: action-"mailto: [email protected]".

Еще один атрибут тега <form> - method - определяет, каким образом или с помощью какого протокола данные из формы будут переданы программе-обработчику. Так как будет использована электронная почта, то значение этого атрибута должно быть post: method=post. Таким образом, элемент <form>.. .</form> будет иметь примерно такой вид:

</form>

7.4. Добавьте в документе spisok.html пустую строку перед закрывающим тегом </body> и введите указанный код,

Теперь нам нужно поместить в форме многострочное текстовое поле для ввода сообщения. Для этого служат теги <textarea></textarea>. В качестве атрибутов открывающего тега <textarea> необходимо указать количество строк (rows) и колонок (cols) а также имя (name), под которым содержимое текстового поля ввода будет передано программе-обработчику.

7.5. Вставьте пустую строку перед закрывающим тегом </form> и введите следующий элемент, создающий текстовое поле:

Такой элемент создаст текстовое поле ввода высотой 5 строк и шириной 40 символов. Введенный посетителем сайта текст будет передан обработчику под именем comments (Комментарии)

7.6. Вставьте пустую строку перед закрывающим тегом </form> и введите в ней следующий код, создающий кнопку в новом абзаце и выравнивающий ее по центру страницы:

7.7. Работу формы можно проверить:

7.7.1. Введите в текстовом поле несколько слов.

7.7.2. -Нажмите кнопку Отправить под текстовым полем. На экране появится диалог с предупреждением о том, что форма передаст ваш адрес E-mail получателю, а данные, содержащиеся в форме, будут переданы без шифрования и, если они конфиденциальны - это может быть нежелательно для вас

7.7.3. - Нажмите кнопку ОК, чтобы подтвердить передачу данных. Диалог с предупреждением закроется.

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

Создание таблицы.

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

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

Каждая таблица начинается тегом <table> и заканчивается тегом </tаble>. Строки таблицы образуются парой тегов <tr></tr>, между которыми располагаются пары тегов <td></td>. Каждая пара этих тегов образует один столбец. Между открывающим <td> и закрывающим </td> тегами помещается текст или любое другое содержимое ячейки

9.1. Создадим новую страницу нашего сайта, В окне программы Блокнот (Notepad) выберите команду меню Файл ðСоздать (File ð New)

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

9.3. Вставьте пустую строку между открывающим <body> и закрывающим </body> тегами и, начиная с нее, введите код.

<table>

<tr><td>Главная страница</td></tr>

<tr><td>Чем мы занимаемся? </td></tr>

<tr><td>О нашей группе</td></tr>

<tr><td>Новости</td></tr>

<tr><td>Расписание </td></tr>

<tr><td>Развлечения</td></tr>

<tr><td>Наши партнеры</td></tr>

<tr><td>Клуб досуга</td></tr>

<tr><td>Связь с нами</td></tr>

</table>

9.4. Сохраните документ в папке Web под именем menu.html

9.5. Запустите его.

9.6. Используя атрибут align=center выравняйте таблицу по центру

9.7. Добавьте в тег <tаble> атрибут border=1, чтобы показать рамку и ячейки таблицы толщиной 1 пиксел

9.8. Установите для таблицы ширину 140 пикселов, добавив атрибут width=l40 в открывающий тег <table>

9.9. Выделить данные в ячейках полужирным начертанием и выравнять по центру ячеек, вместо тегов <td></td> используйте теги <th></th>

9.10. В тегах <td> и <th> вы можете использовать следующие атрибуты:

•align - для горизонтального выравнивания содержимого ячеек по центру (center), левому (left) и правому (right) краям ячейки;

• width - для указания ширины ячейки в пикселах;

• height - для определения высоты ячейки;

• valign - для вертикального выравнивания данных в ячейке по верхнему (top) и нижнему (bottom) краям и середине (middle) ячейки; по умолчанию valign=middle.

9.11. Проверьте, как работают эти атрибуты, после чего верните таблицу в прежнее состояние.

9.12. Поэкспериментируйте с цветами и подберите подходящие, с вашей точки зрения, для таблицы, вставив атрибут bgcolor соответственно в тег <th>, <tr> или <table>.

9.13. Создадим ссылки из двух первых пунктов меню на соответствующие страницы нашего сайта. Так как остальные страницы еще не созданы, то ограничимся этими двумя ссылками. Как и прежде, воспользуемся тегами <а></а> с атрибутом href. В качестве значения этого атрибута для первого пункта меню - Главная страница - следует указать файл Km.html, т.е. href=" Km.html”, а для второго - Чем мы занимаемся? -файл spisok.html,т.е.href="spisok.html”

<tr><th><a href="km.html" target="frame">Главная страница</a></th></tr>

<tr><th><a href="spisok.html" target="frame">Чем мы занимаемся?</a></th></tr>

9.14. Проверьте работу. Щелкните мышью на первой ссылке - Главная, страница Если файл был загружен в то же самое окно браузера, то нажмите кнопку Назад (Back) на панели инструментов или просто закройте окно, если файл был загружен в новое окно. На экране снова отобразится файл menu.html.

9.15. Щелкните мышью на второй ссылке - Чем мы занимаемся? В окне браузера появится файл spisok.html. Закройте окно

Структура.

HTML-документ состоит, прежде всего, из тэга: <HTML>... </HTML>. Эта часть, в свою очередь, состоит из головного тэга (<HEAD>... </HEAD>) - раздел заголовков (в частности, раздел заголовков должен содержать общий заголовок документа, ограниченный парным тегом <TITLE>) и тэга содержания (<BODY>... </BODY>).

Общая структура HTML- документа следующая:

<HTML>

<HEAD>

…

</HEAD>

<BODY>

…

</BODY>

</HTML>

Самый важным используемым в HEAD элементом является заголовок страницы: <TITLE>... </TITLE>. В TITLE-элементе указывается заголовок документа. Это имя используется для идентификации этого документа в брaузере.

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

Теперь можно сформулировать правила вложения элементов.

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

• Блочные элементы могут содержать вложенные блочные и текстовые элементы.

• Текстовые элементы могут содержать вложенные текстовые элементы.

• Текстовые элементы не могут содержать вложенные блочные элементы.

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

· TEXT= "... " Специфицирует стандартный текст;

· LINK= "... " Определяется цвет ссылки;

· ALINK= "... " Определяет цвет выбранной ссылки;

· VLINK= "... " Определяет цвет пройденной ссылки;

· BGCOLOR= "... " Определяет цвет фона;

· BACKGROUND= "... " URL с адресом картинки фона;

· BGPROPERTIES=FIXED картину заднего плана с запретом скроллинга.

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

HTML содержит шесть различных заголовков, причем чем меньше уровень заголовка, тем более крупный шрифт используется для его воспроизведения на экране. Оформление заголовков зависимости от используемого броузера. Синтаксическая конструкция выглядит следующим образом: <Hx>...</Hx>, причем x может быть величиной от l до 6:

<H1>...</H1> Заголовок высшего уровня (основной заголовок)

<H6>...</H6> Заголовка низшего уровня

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

Физические элементы

<B>... </B> - жирный текст (Bold);

<I>...</I> - курсив (Italic);

<U>...</U> - подчеркивание;

<TT>... </TT> постоянное символьное расстояние, как у пишущей машинки (Teletype);

Пример:

...

<I>курсив</I> и <B>жирный</B> в предложении.

...

Получаем:

...

курсив ижирный в предложении.

...

Логические элементы.<EM>... </EM> - применяется для акцентирования внимания на текст внутри тэга, в основном отображается курсивом;

<STRONG>...</STRONG> - применяется для создания логического ударения на текст внутри тэга, в основном отображается жирным шрифтом;

<CODE>...</CODE> - пример кода;

<SAMP>...</SAMP> - последовательность символов;

<KBD>...</KBD> - символы введенные с клавиатуры;

<VAR>...</VAR> - имя переменной, в основном курсив;

<CITE>...</CITE> - цитата, в основном курсив.

Списки.Имеются несколько различных типов списков. Все элементы списков (кроме описывающих элементов) представляются и вводятся <LI> - тэгом (List Item). Рассмотрим типов списков по порядку:

1. Упорядоченные списки (Ordered List)

Элементы списка будут автоматически пронумерованы тэгом: <OL>...</OL>.

Параметры:

· TYPE = "..." – определяет символ которым будут маркироваться эементы списка;

· START = "..." – определяет символ начиная с которого будет маркироваться список.

2. Неупорядоченные списки (Unordered List)

Для задания этого списка используется тэг <UL>...</UL>.

Параметры:

· TYPE = "..." – определяет символ которым будут маркироваться эементы списка;

· SRC = "..." – определяем источник из которого берется изображение символа.

3. Описательный список (Definition List)

Для задания этого списка используется тэг <DL>...</DL>. Списки описания требуют попарного представления Term’а и его определения, которые определяются, соответственно, тэгами <DT> и <DD>.

Кроме того используются также тэги <DIR>...</DIR> и <MENU>...</MENU>, которые здесь не описаны, потому что редко используются. Примеры:

1. Упорядоченный список:

<LI> элемент списка l

<Ll> элемент списка 2

<LI> элемент списка 3

</OL>

Получаем:

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

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

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

2. Неупорядоченный список:

<LI> элемент списка l

<LI> элемент списка 2

<LI> элемент списка 3

</UL>

Получаем

· элемент списка l

· элемент списка 2

· элемент списка 3

3. Описательный список:

<DL>

<DT> Term l <DD> Определение l

<DT> Term 2 <DD> Определение 2

</DL>

Получаем:

Term l Определение l

Term 2 Определение 2

Якори.Якори являются начальными и конечными точками связи гипертекста. Для определения якоря используется тэг <A>…</A>. Самыми важными свойствами являются HREF и NAME:

· HREF – определяет ссылку по которой пользователь может перейти к другому документу. Документ-целью может быть не только HTML документ, но и графикой или аудио-файлом, который воспроизводится внешней программой, или ссылкой к Gopher серверу, News серверу и т.п. HREF может иметь вид «HREF=#identifier». В этом случае якорь ссылается на текст в пределах текущего документа, который имеет идентификатор identifier.

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

Таблицы.Таблица определяется тэгом <TABLE>…</TABLE>, а также тэгами <TR>…</TR> и <TD>…</TD>, описывающими строку таблицы и отдельную ячейку, соответственно. Далее описаны некоторые аттрибуты вышеперечисленных тэгов (табл. ).

Таблица . Свойства всей таблицы

№	Атрибут	Значение
1.	BORDER	Толщина рамки (0 = нет рамки)
2.	BGCOLOR	Цвет фона элементов таблицы и, соответственно, всей таблицы
3.	WIDTH	Ширина таблицы, либо в пикселах, либо в процентах от ширины экрана
4.	HEIGHT	Высота таблицы, либо в пикселах, либо в процентах от ширины экрана
5.	CELLSPACING	Расстояние между ячейками (в пикселах)
6.	CELLPADDING	Расстояние между данными в ячейке и её стенками (в пикселах)
7.	BACKGROUND	Определяет изображение, которое будет служить “обоями” для таблицы (фоновым изображением)

Таблица . Свойства отдельной строки

№	Атрибут	Значение
1.	COLSPAN	Количество столбцов, которые будет занимать одна ячейка (по умолчанию равно 1)
2.	ROWSPAN	Количество строк, которые будет занимать одна ячейка (по умолчанию равно 1)
3.	WIDTH	Ширина строки, либо в пикселах, либо в процентах от ширины экрана
4.	HEIGHT	Высота строки, либо в пикселах, либо в процентах от ширины экрана

Таблица . Свойства отдельной ячейки

№	Атрибут	Значение
1.	ALIGN	Горизонтальное выравнивание текста: слева, по центру, справа, JUSTIFY, DECIMAL
2.	VALIGN	Вертикальное выравнивание текста: TOP, MIDDLE, BOTTOM, BASELINE
3.	BGCOLOR	Цвет фона отдельного элемента таблицы
4.	NOWRAP	Без переноса по словам

Примеры:

<TD> произольный текст </TD>

</TR>

<TD COLSPAN=2> произольный текст </TD>

</TR>

</TABLE>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

1.1	1.2	1.3
2.1 – 2.2	2.3 – 3.3
3.1	3.2

В итоге получается следующая таблица:

Графика и изображения.Атрибут IMG позволяет вставить изображение в активный документ. Это обычно графика или иконка. Не разрешена вставка других HTML-документов посредством данного атрибута. Графика должна быть представлена в форматах GIF, JPEG или BITMAP (XBM, XPM). Атрибут IMG имеет следующие свойства:

· SRC – содержит URL документа, который должен всегда указываться. Синтаксис соответствует HREF - свойству <A> элемента.

· ALT – альтернативный текст, который будет выводиться вместо изображения, если браузер не позволяет просматривать изображения или отключена соответствующая опция.

· ALIGN – управляет выравниванием текста в изображениях;

· BORDER – рамка в пикселах;

· WIDTH, HEIGHT – высота и ширина изображения, соответственно;

· LOWSRC – изображение более низкого разрешения, загружающееся перед загрузкой собственно изображения.

Пример

<A HREF="Go"><IMG SRC="Button.gif">Для получения дополнительной информации нажмите здесь</A>

Дает в итоге:

Сначала введите теги, определяющие структуру любого –документа (используйте любой регистр – верхний или нижний). - student2.ru Для получения дополнительной информации нажмите здесь

Вставка видео-файлов в HTML-страницу.Как уже говорилось ранее, для Netscape Navigator существуют разнообразные дополнительные модули (Plug-in), которые значительно расширяют возможности броузера. Для просмотра видео-файлов в формате QuickTime требуется проинсталировать модуль ViewMovie. Для того, чтобы в Вашу гипермедиальную информационную систему вставить видео-файл используйте следующую команду:

< EMBED SRC= "mymovie.mov" WIDTH=xxx HEIGHT=yyy >

Файлы видео должны иметь расширение ".mov". Тэг EMBED имеет следующие параметры по управлению модулем ViewMovie:

· LOOP - TRUE, FALSE или PALINDROME

· AUTOPLAY - TRUE или FALSE, видео-файл будет автоматически запускаться при TRUE.

· VOLUME - от низкой до высокой.

· QUALITY - от HIGH до DRAFT (default)

· PLAYEVERYFRAME - TRUE или FALSE, параметр определяет - проигрывать все фреймы подряд или допускается пропуск фреймов для ускорения процесса воспроизведения.

Image maps.Познакомиться с механизмом передачи параметра можно посредством простого задания: создания, так называемых, Image maps. Image map является прежде всего интегрированным в HTML-документе изображением (в GIF-формате), которое служит якорем для различных гиперссылок. Для этого на сервере создается файл, содержащий карту изображения - map definition file, который описывает связь частей изображения и гиперссылок.

Обработчиком нажатий на изображения является стандартный сценарий CGI, поэтому нет необходимости использовать внешний сценарий. Файл, содержащий карту изображения имеет окончание ".Map" и будет на этом сервере идентифицирован.

WWW-клиент передает серверу через URL координаты точки изображения (X, Y) на которую нажал пользователь. Сервер посредством координат и таблиц map файла определяет какой HTML-документ пользователь потребовал загрузить.

Описание изображения как Image map осуществляется указанием аттрибута USEMAP в тэге <IMG>:

Мap definition file имеет следующий формат:

Тип области URL Координата1, Kooрдината2... Координата n

Можно указать следующие типы области:

· DEFAULT - определяется URL по умолчанию. Используется, если пользователь выбрал не описанную как гиперсвязь область. Координаты не указываются.

· CIRCLE - определяет круг. Координаты описывают центр и координаты описанного вокруг круга прямоугольника.

· POLY - определяет полигон. Координаты являются координатами вершин полигона.

· RECT - определяет прямоугольник. Координаты описывают левый верхний и правый нижний угол.

· POINT - определяет точку. Координата описывают координаты точки.

Для создания map definition file существует ряд вспомогательных программ, которые упрощают ручное редактирование и соответственно экономят время.

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

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

+ Обеспечивают очень наглядную навигацию;

+ Важные сведения остаются видимыми постоянно;

+ Разнообразные возможности оформления;

- Не все броузеры могут воспринимать фреймы, поэтому дополнительные страницы должны быть без фреймов;

- Содержания отдельных фреймов нельзя запомнить как закладку и они не учитываются в списке посещенных страниц;

- Plug-in в комбинации с фреймами часто служат причиной системной ошибки;

- Ощутимо возрастает время загрузки документов в броузер по сравнению со страницами без фреймов (до 3-4 раз);

- Распечатка страницы с фреймами проблематична;

- Искажается статистика доступа.

Создание фреймов.Для создания фреймов в контейнер <BODY></BODY> заменяется на контейнер <FRAMESET></FRAMESET>. Для броузеров не поддерживающих фреймы используется контейнер <NOFRAME></NOFRAME>. Броузеры, поддерживаающие фреймы, игнорируют все, что находится внутри дескрипторной пары <NOFRAME></NOFRAME>. Остальные броузеры (т.е. не поддерживающие фреймы) игнорируют все дескрипторы фреймов (которые они просто не могут распознать) и воспринимают только текст, заключенный в контейнер NOFRAME.

Пример:

< FRAMESET >

Фреймы и другие элементы HTML

<P> Здесь текст, для страниц не поддерживающих фреймы. </P>

</NOFRAMES>

</FRAMESET>

Теперь должно быть установлено разделение с помощью параметров ROWS и COLS. ROWS измеряется в строках, COLS – в столбцах. Ширина может указываться при этом как относительно (в процентах), так и абсолютно (в пикселах). Также возможно комбинация обеих способов (см. пример 3). Вместо значения может использоваться также "*", так как ширина рассчитывается из других данных (см. под 2).

Примеры:

Два фрейма занимаю равное пространство на странице;

< FRAMESET COLS= ``100, *, 50" >

Левый фрейм занимает 100 пикселов, правый - 50 пикселов, среднего занимает оставшееся пространство страницы;

< FRAMESET COLS= "50, 20 %, 80 %, 50" >

Фреймы справа и слева имеют ширину в 50 пикселов, остаток площади разделяется в зависимости от величины процента.

< FRAMESET COLS= "20 %, 80 %" ROWS= "50 %, 50 %" >

дает в итоге 4 фрейма на странице

Вместо COLS в 1-3 можно бы писать также ROWS.

Текст, который будет содержать фрейм определяется с помощью тэга <FRAME>:

< FRAME SRC= "name.HTML" " NAME= " any_name " >

В качестве аттрибута данного тэга указывается, какая HTML-страница должна использоваться для заполнения фреймов. Name.HTML может быть как локальный файл, так и любая WWW-страница. При этом „any_name " – имя данного фрейма, которое будет использоваться для ссылок на него их других документов. Оно может отличаться от „Name.htm".

Дополнительные параметры:

SCROLLING – YES, NO или AUTO - указывается для разрешения скроллинга.

Можно создавать вложенные фреймы добавляя еще один или несколько контейнеров <FRAMESET></FRAMESET>

Пример:

... Фреймы не поддерживаются данным Броузером

</NOFRAMES>

Здесь идут вложенные фреймы

</FRAMESET>

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

<A HREF=”адрес документа" TARGET=”имя окна"> текст ссылки </A>,

где “имя окна” - это имя, которое Вы присвоили окну с помощью атрибута NAME тэга <FRAME>.

Кроме этого существует несколько специальных имен окон, которые Вы можете указать в атрибуте TARGET:

· “_BLANK" – документ всегда загружается в новое окно. Новое окно не имеет имени, поэтому на него нельзя ссылаться из сценария, находяшегося на начальной странице;

· " _PARENT" – документ загружается в текущее родительское окно фрейма;

· " _TOP" – документ загружается в самый верхний фрейм текущего окна броузера.

Каскады

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

<SPAN class=index-inst title="accessibility::and style sheets">Зависимость от устройств</SPAN>

HTML позволяет авторам разрабатывать документы независимо от устройств. Это позволяет пользователям обращаться к Web-страницам с использованием различных устройств, например, графических дисплеев для компьютеров под управлением Windows, Macintosh OS и X11, телевизионных устройств, специальным образом адаптированных телефонов и портативных устройств на базе PDA, речевых браузеров и тактильных устройств на базе азбуки Бройля.

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

Альтернативные стили

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

Вопросы производительности

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

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

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

Как добавить стиль в HTML

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

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

Синтаксис данных стиля зависит от языка таблицы стилей.

<SPAN class=index-inst title="default::style sheet language|style
sheet language::default|HTTP::Content-Style-Type header|Content-Style-Type header">Установка языка таблицы стилей по умолчанию</SPAN>

Авторы должны указывать язык таблицы стилей для информации о стиле, связанной с документом HTML.

Для установки языка таблицы стилей для документа по умолчанию следует использовать элемент META. Например, чтобы установить по умолчанию язык CSS, следует поместить в раздел HEAD следующее объявление:

зык таблиц стилей по умолчанию можно также установить с помощью заголовков HTTP. Показанное выше объявление с использованием тэга META эквивалентно заголовку HTTP:

Content-Style-Type: text/css

Агенты пользователей должны определять язык таблиц стилей по умолчанию для документа в соответствии со следующими шагами (от высшего приоритета к низшему):

Если в объявлении META задается "Content-Style-Type", язык таблиц стилей определяет последнее объявление в потоке символов.

В противном случае, если "Content-Style-Type" задается в заголовках HTTP, язык таблиц стилей определяет последний заголовок в потоке символов.

В противном случае по умолчанию используется язык "text/css".

Документы, включающие элементы, в которых устанавливается атрибут style, но не определяется язык таблиц стилей по умолчанию, являются некорректными. <SPAN class=index-inst title="authoring tool::and default style sheet language">Средства разработки</SPAN> должна генерировать информацию о языке таблиц стилей по умолчанию (обычно с помощью объявлений META), чтобы агенты пользователей не полагались на язык по умолчанию "text/css".

Практическая работа.

«Разработка гипермедиальных приложений с использованием языка HTML.

Ход работы.

1. Создайте папку WEB.

2. Запустите текстовый редактор Блокнот : Пуск ð Программы ð Стандартные ðБлокнот.

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

3.1. Введите с клавиатуры основные теги, поместив каждый из них, кроме закрывающего тега </title>, в новой строке.

<html>

<head>

</head>

<body>

</body>