Автор Анна Евкова
Преподаватель который помогает студентам и школьникам в учёбе.

Фреймы

Содержание:

Введение

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

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

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

Цель курсовой работы рассмотреть особенности синтаксиса языка HTML, определить его назначение и роль при создании web-страниц.

1. WWW и HTML

World Wide Web (Web) — это сеть информационных ресурсов. Языком публикации, используемым в World Wide Web, является HTML (HyperText Markup Language — язык разметки гипертекстов).

HTML дает разработчикам средства для:

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

- загрузки электронной информации с помощью щелчка мыши на гипертекстовой ссылке;

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

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

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

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

2 Синтаксис языка HTML

2.1 Простейший HTML документ

HTML-документ — это текстовый файл с расширением *.html (*.htm) . Рассмотрим самый простой HTML-документ:

<html>

<head>

<title>

Документ 1

</title>

</head>

<body>

Первый HTML документ

</body>

</html>

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

Фрагмент текста заключенных между знаками "<" и ">" (например,<html>) называется тэг (tag).

Большинство HTML-тэгов — парные, то есть на каждую открывающую метку вида<tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".

Тэги можно набирать как большими, так и маленькими буквами. Например, теги <body>, <BODY> и <Body> будут восприняты браузером одинаково.

Рассмотрим структуру любого HTML документа.

Любой документ обязательно должен содержать тэги <html> ... </html>.

Тэг  <html>  должен открывать HTML-документ. Аналогично, тэг </html> должен завершать HTML-документ.

На втором уровне вложенности, каждый документ может содержать две области: область, образуемую тэгами <head> ... </head>, и, область образуемую тэгами <body> ... </body>.

Пара тегов <head> ... </head> указывает на начало и конец заголовка документа. Данный раздел включает наименование документа и служебную информацию.

В этой части документа располагаются теги <title> ... </title>.

Все, что находится между тегами <title> и </title>, является названием документа. 

Пара тегов <body> ... </body> указывает на начало и конец тела HTML-документа. Этот раздел содержит и определяет содержание документа.

Приведем пример еще некоторых простых тегов:

<H1> ... </H1> — <H6> ... </H6>

Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый маленький.

<P> ... </P>

Такая пара меток описывает абзац.

Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN позволяющий задать выравнивание текста:

<H1 ALIGN=CENTER>Заголовок в центре</H1>

или

<P ALIGN=RIGHT>Текст выровнен по правому краю</P>

2.2 Работа с изображениями

В HTML-документ можно вставлять изображения. Изображение должно принадлежать одному из трех графических форматах: GIF (*.gif) , JPEG (*.jpg или *.jpeg) и PNG (*.png).

Для того, что бы добавить в документ изображение, записанное в файл picture.gif, находящееся в одном каталоге с HTML-документом необходимо написать следующий код:

<IMG SRC="picture.gif">

Тэг <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]", например:

<IMG SRC="picture.gif" ALT="Картинка">

Атрибут ALT определяет текст, который будет выведен вместо изображения, если оно по каким-то причинам не доступно.

Язык HTML позволяет так же описывать карты изображений.

Для этого используются тэги <МАР> <AREA> и </map>.

Тэг <МАР> необходим для общего определения карты. Внутри него определяются области карты при помощи этэгов AREA и задается имя карты при помощи атрибута: name="Имя".

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

href :=" Адрес"

Атрибут для задания альтернативного текста, заменяющего изображение карты:

alt= "Текст подсказки"

Этот атрибут так же может быть использован как комментарий.

Третий атрибут, это атрибут, определяющий форму области на карте.

Существует три стандартных вида областей: круг (circle), прямоугольник (rect) и многоугольник произвольной формы (polygon).

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

shape="circle" coords=x,y,r

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

shape="poly" coords=x7, y1, x2,y2, хЗ , уЗ . . .

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

shape="rectM coords=xt, y1, x2,y2

При помощи атрибута nohref (не имеет значения) можно запретить переход по ссылке для определенной области карты.

2.3 Списки

При помощи HTML текст можно организовывать в списки и выводить их на экран в отформатированном виде. Существует три вида списков: нумерованные, ненумерованные и списки определений.

Ненумерованные списки: <UL> ... </UL>

Текст, расположенный между тэгами <UL> и </UL>, воспринимается как ненумерованный список. Каждый новый элемент списка нужно начинать с тэга <LI>. Например, чтобы создать такой список:

  • Пункт 1;
  • Пункт 2;
  • Пункт 3

необходим такой HTML-код:

<UL>

<LI> Пункт 1;

<LI> Пункт 2;

<LI> Пункт 3

</UL>

У тэга <LI> допустимо не указывать закрывающийся тэг.

Нумерованные списки: <OL> ... </OL>

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

<OL>

<LI> Пункт 1;

<LI> Пункт 2;

<LI> Пункт 3

</OL>

получится такой список:

  1. Пункт 1;
  2. Пункт 2;
  3. Пункт 3

Списки определений: <DL> ... </DL>

Список определений отличается от других видов списков. Вместо тэга <LI> в списках определений используются тэги <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition definition — определение определения). Пример такого списка:

<DL>

<DT>Термин 1

<DD>Определение термина 1.

<DT>Термин 2

<DD>Определение термина 2.

</DL>

Этот фрагмент будет выведен на экран следующим образом:

Термин 1

Определение термина 1.

Термин 2

Определение термина 2.

Так же, как тэги <LI>, тэги <DT> и <DD> не имеют парных закрывающих меток.

Элемент любого списка может содержать в себе целый список любого вида.

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

2.4 Ссылки

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

В HTML переход от одного фрагмента текста к другому задается с помощью тэга вида:

<A HREF="[адрес перехода]">выделенный фрагмент текста</A>

В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое — это задать имя другого HTML-документа, к которому нужно перейти. Например:

<A HREF="index.html">Перейти на главную страницу</A>

Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента текста, при нажатии на который в текущее окно будет загружен документ index.html.

Если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.

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

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

<A HREF="http://www.yandex.ru"> Воспользуйтесь поиском</A>

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

Рассмотрим пример: допустим, что необходимо осуществить переход из файла page1.html к словам "Раздел 1" в файле page2.html (файлы находятся в одном каталоге). Прежде всего, необходимо создать анкер в файле 2.html:

<A NAME="AAA">Раздел 1</A>

Текст "Переход закончен" при этом никак не будут выделены в тексте документа.

Затем в файле page1.html можно создать ссылку на этот анкер:

<A HREF=" page2.html#AAA">Переход к анкеру AAA</A>

Переход к этому анкеру можно определить и внутри самого документа page2.html — достаточно только включить в него такой фрагмент текста:

<A HREF="#AAA">Переход к анкеру AAA</A>.

Подобным образом удобно создавать оглавления на странице.

Имена анкеров задаются латинскими буквами.

2.5 Таблицы

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

Рассмотрим пример описания таблицы на HTML:

<HTML>

<HEAD>

<TITLE>Таблица</TITLE>

</HEAD>

<H1>Простейшая таблица </H1>

<TABLE BORDER=1> <!--Это начало таблицы-->

<CAPTION> <!--Это заголовок таблицы-->

Таблица 1

</CAPTION>

<TR> <!--Это начало первой строки-->

<TD> <!--Это начало первой ячейки-->

Первая строка, первая колонка

</TD> <!--Это конец первой ячейки-->

<TD> <!--Это начало второй ячейки-->

Первая строка, вторая колонка

</TD> <!--Это конец второй ячейки-->

</TR> <!--Это конец первой строки-->

<TR> <!--Это начало второй строки-->

<TD> <!--Это начало первой ячейки-->

Вторая строка, первая колонка

</TD> <!--Это конец первой ячейки-->

<TD> <!--Это начало второй ячейки-->

Вторая строка, вторая колонка

</TD> <!--Это конец второй ячейки-->

</TR> <!--Это конец второй строки-->

</TABLE> <!--Это конец таблицы-->

</BODY>

</HTML>

Таблица начинается с тэга <TABLE> и заканчивается тэгом </TABLE>. Тэг <TABLE> может включать несколько атрибутов:

ALIGN -задает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).

WIDTH - ширина таблицы. Ее можно задать в пикселях (например, WIDTH=400) или в процентах от ширины страницы (например, WIDTH=80%).

BORDER - задает ширину внешней рамки таблицы и ячеек в пикселях (например, BORDER=4). Если атрибут не установлен, таблица показывается без рамки.

CELLSPACING - задает расстояние между рамками ячеек таблицы в пикселях (например, CELLSPACING=2).

CELLPADDING - задает расстояние между рамкой ячейки и текстом в пикселях (например, CELLPADDING=10).

Таблица может иметь заголовок (<CAPTION> ... </CAPTION>). Тэг <CAPTION> может включать атрибут ALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).

Каждая строка таблицы начинается с тэга <TR> и заканчивается тэгом </TR>. Метка <TR> может включать следующие атрибуты:

ALIGN - задает выравнивание текста в ячейках строки. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).

VALIGN - задает вертикальное выравнивание текста в ячейках строки. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).

Каждая ячейка таблицы начинается с тэга <TD> и заканчивается тэгом </TD>. Метка <TD> может включать следующие атрибуты:

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

COLSPAN - задает "размах" ячейки по горизонтали. Например, COLSPAN=3 означает, что ячейка простирается на три колонки.

ROWSPAN - задает "размах" ячейки по вертикали. Например, ROWSPAN=2 означает, что ячейка занимает две строки.

ALIGN - задает выравнивание текста в ячейке. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT(выравнивание вправо).

VALIGN - задает вертикальное выравнивание текста в ячейке. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).

WIDTH - задает ширину ячейки в пикселях (например, WIDTH=200).

HEIGHT - задает высоту ячейки в пикселях (например, HEIGHT=40).

Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка необходима, в ячейку можно ввести символьный объект &nbsp; (non-breaking space — неразрывающий пробел). Визуально ячейка останется пустой, а рамка вокруг нее будет показана.

Любая ячейка таблицы может содержать в себе другую таблицу. Такие таблицы называются вложенными.

HTML предоставляет возможность группировки строк таблицы. Для этого предусмотрен тэг блока заголовка THEAD, тэг обычных блоков строк TBODY и тэг нижнего блока строк TFOOT. В каждом блоке может присутствовать произвольное количество строк (элементов TR). Эти три тэга могут использоваться как с конечными тегами, так и без них. В качестве примера можно привести таблицу:

<TABLE border=2>

<THEAD>

<TR> <ТD>Заголовок </ТD> <ТD>Заголовок 2</ТD></TR>

</THEAD>

<TFOOT>

<TR> <ТD>Нижний блок таблицы<ТD>&пЬзр; </ТD></TR>

</TFOOT>

<TBODY>

<TR> <ТD>Строка 1 </ТD> <ТD>Ячейка 1.2</ТD></TR>

<TR> <ТD>Строка 2 </ТD> <ТD>Ячейка 2.2</ТD></TR>

</TBODY>

<TR> <ТD>Строка 3</ТD> <ТD>Ячейка 3.2</ТD></TR>

<TR> <ТD>Строка 4 </ТD> <ТD>Ячейка 4.2</ТD></TR>

<TR> <ТD>Строка 5 </ТD> <ТD>Ячейка 5.2</ТD></TR>

</TBODY>

</table>

При отображении этой таблицы, строка “Нижний блок таблицы” будет выведена в нижней части талицы.

При использовании этих элементов надо придерживаться следующих правил.

- в таблице можно указывать только по одному элементу THEAD и TFOOT, но по нескольку элементов TBODY;

- последовательность задания элементов следующая: THEAD, TFOOT, TBODY. Но в таблице на экране блок TFOOT окажется самым нижним;

- все блоки должны содержать одинаковое количество столбцов.

Элемент COLGROUP позволяет создавать группы столбцов с одинаковыми свойствами. Рассмотрим фрагмент описания:

<COLGROUP span=1 width="30" bgcolor="lime">

<COLGROUP bgcolor="yellow">

<COL span=2 width="30">

<COL width="60">

<COLGROUP bgcolor="aqua">

<COL width="50"'>

Каждый элемент COLGROUP позволяет назначить свойства определенному числу колонок, задаваемому атрибутом span. Все эти колонки будут иметь одинаковые свойства. Можно также использовать элемент COL для указания свойств одной колонки. Тогда часть свойств будет совпадать для всех колонок, относящихся к одному элементу COLGROUP, а часть может отличаться. В таблице могут быть определены свойства для произвольного количества колонок, и если в реальности колонок будет меньше, то некоторые (последние) определения не будут использованы. Такая ситуация не является ошибкой. Для задания свойств могут использоваться такие же атрибуты, как и для других элементов таблицы.

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

2.6 Формы

Форма открывается тегом <FORM> и заканчивается тегом </FORM>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая теги, может размещаться внутри форм без ограничений.

Тег <FORM> может содержать три атрибута:

ACTION определяет путь, по которому находится обработчик формы.

METHOD - определяет, каким образом (иначе говоря, с помощью какого протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.

ENCTYPE - определяет, каким образом данные из формы будут закодированы для передачи обработчику.

Внутри формы располагаются элементы управления. Например:

<INPUT TYPE=submit>

Это кнопка, при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке <FORM>.

Надпись на кнопке можно используя атрибут VALUE="[Надпись]" :

<INPUT TYPE=submit VALUE="Отправить">

Рассмотрим простейшую форму:

<HTML>

<HEAD>

<TITLE>Форма</TITLE>

</HEAD>

<H1>Простейшая форма </H1>

<FORM ACTION="server1.html"> <!--Это начало формы-->

<INPUT TYPE=submit VALUE="Отправить">

</FORM> <!--Это конец формы-->

</BODY>

</HTML>

Любой элемент управления может иметь имя:

<INPUT TYPE=submit NAME=button1 VALUE="Отправить">

Существуют и другие типы элементов <INPUT>. Каждый элемент <INPUT> должен включать атрибут NAME=[имя], определяющий имя элемента. Имя должно задаваться только латинскими буквами. Большинство элементов <INPUT> должны включать атрибут VALUE="[значение]", определяющий значение, которое будет передано обработчику под этим именем. Для элементов <INPUT TYPE=text> и <INPUT TYPE=password>, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры.

Основные типы элементов <INPUT>:

TYPE=text- определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина окна ввода в символах) и MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах). Пример:

<INPUT TYPE=text SIZE=20 NAME=user VALUE="Имя">

TYPE=password определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*). Пример:

<INPUT TYPE=password NAME=pw SIZE=20 MAXLENGTH=10>

TYPE=radio-определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка. Пример:

<INPUT TYPE=radio NAME=modem VALUE="9600" checked> 9600 бит/с
<INPUT TYPE=radio NAME=modem VALUE="14400"> 14400 бит/с
<INPUT TYPE=radio NAME=modem VALUE="28800"> 28800 бит/с

TYPE=checkbox - определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов. Пример:

<INPUT TYPE=checkbox NAME=comp VALUE="PC"> Персональные компьютеры
<INPUT TYPE=checkbox NAME=comp VALUE="WS" checked> Рабочие станции
<INPUT TYPE=checkbox NAME=comp VALUE="LAN"> Серверы локальных сетей
<INPUT TYPE=checkbox NAME=comp VALUE="IS" checked> Серверы Интернет

TYPE=hidden определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Пример:

<INPUT TYPE=hidden NAME=version VALUE="1.1">

TYPE=reset - определяет кнопку, при нажатии на которую форма возвращается в исходное состояние.

<INPUT TYPE=reset VALUE="Очистить">

Помимо элементов <INPUT>, формы могут содержать списки <SELECT> и поля для ввода текста <TEXTAREA>.

Выпадающий список <SELECT> из n элементов выглядит так:

<SELECT NAME="[имя]">

<OPTION VALUE="[значение 1]">[текст 1]

<OPTION VALUE="[значение 2]">[текст 2]

...

<OPTION VALUE="[значение n]">[текст n]

</SELECT>

Список начинается с тэга <SELECT> и заканчивается тэгом </SELECT>. Тэг <SELECT> содержит атрибут NAME.

Тэг <SELECT> может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом SIZE=[число]).

Тэг <OPTION> определяет элемент списка. Атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тэг<OPTION> может включать атрибут checked, показывающий, что данный элемент отмечен по умолчанию.

Пимер:

<SELECT NAME="selection">

<OPTION VALUE="option1" checked>Вариант 1

<OPTION VALUE="option2">Вариант 2

<OPTION VALUE="option3">Вариант 3

</SELECT>

Эемент <TEXTAREA> создает много строчное текстовое поле:

<TEXTAREA NAME=comment COLS=50 ROWS=30>

Введите комментарий

</TEXTAREA>

Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику Атрибут ROWS устанавливает высоту окна в строках. Атрибут COLS устанавливает ширину окна в символах.

Текст, размещенный между метками <TEXTAREA> и </TEXTAREA>, представляет собой содержимое окна по умолчанию.

2.7 Фреймы

<FRAMESET> <FRAME> </frameset>

Фреймы — это области, которые создаются в окне браузера для одновременной демонстрации нескольких документов. В прошлом не все браузеры позволяли разделять область просмотра на части, но эта идея постепенно завоевала большое признание. Новые версии браузеров без исключений поддерживают фрейм. При создании страниц с фреймами создается несколько Web-страниц. При этом HTML-файлы отличаются по типам. Документы раскладки (layout) используются для создания структуры окна, то есть для описания того, как оно должно быть разделено. Документы содержания (content) предназначены для заполнения информацией каждой из областей.

Рассмотрим основные этапы создания Web-страницы с фреймами.

Сначала необходимо определить, какие области потребуются. Деление экрана по горизонтали задается при помощи атрибута rows, а по вертикали — при помощи атрибута cols. Значения атрибутов могут быть заданы в пикселях или процентах. Кроме того, используется символ * для обозначения оставшейся части экрана. Приведем несколько примеров:

- cols=50%, 50% — деление области просмотра по вертикали пополам;

- cols=25%, 75% — левая вертикальная область в три раза уже, чем правая. Такой стиль избрали многие фирмы, имеющие свои сайты в Интернете;

- rows=150, 30%, *—для верхней горизонтальной области отведено 150 пикселей, для средней — тридцать процентов доступного пространства, а для нижней -все, что останется.

В элементе FRAMESET можно использовать и стандартные атрибуты id, class, title, style, onload, onunload.

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

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

В документе раскладки секция FRAMESET используется вместо секции BODY.

Кроме стандартных атрибутов — id, class, t i t le и style — тэг <FRAME> имеет ряд атрибутов, позволяющих усовершенствовать оконную структуру.

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

<FRAME src="Имя файла.htm" name="имя фрейма">

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

Атрибут scrolling управляет прокруткой внутри своей области. Он может принимать значения YES (полосы прокрутки создаются в обязательном порядке), NО (прокрутка запрещена) и AUTO (полосы прокрутки появляются, когда необходимо). Если этот атрибут отсутствует, браузер создает полосы прокрутки для тех документов, которые не умещаются целиком в отведенных им областях. Запретив прокрутку, можно создать так называемый баннер.

Значением атрибута longdesc является ссылка на другой файл (URL). Таким способом для фрейма создается описание любого объема. Это своего рода альтернатива использованию стандартного атрибута title, при помощи которого обычно задается короткий текстовый комментарий.

При помощи атрибута frameborder указывается, нужна или нет рамка вокруг фрейма. Значение 1 создает рамку, значение 0 — отменяет. Если необходимо убрать границу между фреймами, надо учитывать, что она создается рамками двух смежных областей.

Атрибут marginheight задает величину отступа страницы от верхнего и нижнего краев фрейма. Значение указывается в пикселях, например:

marginheight="75"

Другой похожий атрибут, rnarginwidth , создает поля слева и справа, например:

marginwidth="10"

Заключение

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

Список использованной литературы

1. Велихов С. Справочник по HTML 4.0. Серия книг “руководство по работе: Советы, хитрости, трюки и секреты” / С. Велихов. — М. : Бук-Пресс, 2006. — 412 с.

2. Вильямсон Х. Универсальный Dinamic HTML. Библиотека программиста / Х. Вильямсон. — СПб. : Питер, 2001. — 304 с.

3. Гончаров А. Самоучитель HTML / А. Гончаров. — СПб. : Питер, 2002. — 240 с.

4. Калиновский А. Ваша домашняя страничка в Интернете. Homepage, или просто “хомяк” / А. Калиновский. — СПб.: БХВ-Петербург, 2005. — 224 с.

5. Лоусон Б. Изучаем HTML5. Библиотека специалиста / С. Лоусон., Р. Шарп. — СПб. : Питер, 2011. — 272 с.

6. Макдональд М. HTML5. Недостающее руководство / М. Макдональд. — СПб.: БХВ-Петербург, 2012. — 480 с.

7. Моррис Б. HTML в действии / Б. Моррис. — СПб. : Питер, 2008. — 266 с.

8. Полонская Е. Язык HTML. Самоучитель / Е. Полонская. — М. : Издательский дом “Вильямс”, 2003. — 320 с.

9. Рева О. HTML. Просто как дважды два / О. Рева. — М. : Эксмо, 2006. — 256 с.

10. Спека М. Создание Web-сайтов. Самоучитель / М. Спека. — М. : Издательский дом “Вильямс”, 2007. — 288 с.

11. Сухов К. HTML5 – путеводитель по технологии / К. Сухов. — М. : ДМК Пресс, 2013. — 352 с.

12. Хольциер С. HTML5 за 10 минут / С. Хольциер. — М. : ООО “И.Д.Вильямс”, 2011. — 240 с.