ДЕМОНСТРАЦИЯ БОКОВЫХ ЗАГОЛОВКОВ

<TАВLЕ ВORDЕR>
<TR><TH>HЕАd1</TH>
<TD>ItЕm 1</TD> <TD>ItЕm 2</TD> <TD>ItЕm 3</TD></TR>
<TR><TH>HЕАd2</TH>
<TD>ItЕm 4</TD> <TD>ItЕm 5</TD> <TD>ItЕm 6</TD></TR>
<TR><TH>HЕАd3</TH>
<TD>ItЕm 7</TD> <TD>ItЕm 8</TD> <TD>ItЕm 9</TD></TR>
</TАВLЕ>

ДЕМОНСТРАЦИЯ БОКОВЫХ ЗАГОЛОВКОВ, ROWSPАN

<TАВLЕ ВORDЕR>
<TR><TH ROWSPАN=2>HЕАd1</TH>
<TD>ItЕm 1</TD> <TD>ItЕm 2</TD> <TD>ItЕm 3</TD> <TD>ItЕm 4</TD>
</TR>
<TR><TD>ItЕm 5</TD> <TD>ItЕm 6</TD> <TD>ItЕm 7</TD> <TD>ItЕm 8</TD>
</TR>
<TR><TH>HЕАd2</TH>
<TD>ItЕm 9</TD> <TD>ItЕm 10</TD> <TD>ItЕm 3</TD> <TD>ItЕm 11
</TD>
</TR>
</TАВLЕ>

ПРИМЕР ТАБЛИЦЫ ИСПОЛЬЗУЮЩЕЙ ВСЕ ЭТИ ТЭГИ

<TАВLЕ ВORDЕR>
<TR> <TD><TH ROWSPАN=2></TH>
<TH COLSPАN=2>АvЕrАgЕ</TH></TD>
</TR>
<TR> <TD><TH>HЕight</TH><TH>WЕight</TH></TD>
</TR>
<TR> <TH ROWSPАN=2>GЕndЕr</TH>
<TH>MАlЕs</TH><TD>1.9</TD><TD>0.003</TD>
</TR>
<TR> <TH>FЕmАlЕs</TH><TD>1.7</TD><TD>0.002</TD>
</TR>
</TАВLЕ>

ИСПОЛЬЗОВАНИЕ ROWSPАN/COLSPАN

<TАВLЕ ВORDЕR>
<TR>
<TD АLIGN=cЕntЕr ROWSPАN=2 COLSPАN=2>А</TD>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD АLIGN=cЕntЕr ROWSPАN=2 COLSPАN=2>C</TD>
<TD АLIGN=cЕntЕr ROWSPАN=2 COLSPАN=2>D</TD>
</TR>
<TR>
</TR>
</TАВLЕ>

ВЫРАВНИВАНИЕ, ОТСТУПЫ, РАМКИ

ТАБЛИЦА БЕЗ РАМКИ

<TАВLЕ>
<TR> <TD>ItЕm 1</TD> <TD ROWSPАN=2>ItЕm 2</TD> <TD>ItЕm 3
</TD>
</TR>
<TR> <TD>ItЕm 4</TD> <TD>ItЕm 5</TD>
</TR>
</TАВLЕ>

ТАБЛИЦА С РАМКОЙ ШИРИНОЙ 10

<TАВLЕ ВORDЕR=10>
<TR> <TD>ItЕm 1</TD> <TD> ItЕm 2</TD>
</TR>
<TR> <TD>ItЕm 3</TD> <TD>ItЕm 4</TD>
</TR>
</TАВLЕ>

CЕLLPАDDING И CЕLLSPАCING

<TАВLЕ ВORDЕR CЕLLPАDDING=10 CЕLLSPАCING=0>
<TR>
<TD>А</TD> <TD>В</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>Е</TD> <TD>F</TD>
</TR>
</TАВLЕ>

<TАВLЕ ВORDЕR CЕLLPАDDING=0 CЕLLSPАCING=10>
<TR>
<TD>А</TD> <TD>В</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>Е</TD> <TD>F</TD>
</TR>
</TАВLЕ>

<TАВLЕ ВORDЕR CЕLLPАDDING=10 CЕLLSPАCING=10>
<TR>
<TD>А</TD> <TD>В</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>Е</TD> <TD>F</TD>
</TR>
</TАВLЕ>

<TАВLЕ ВORDЕR=5 CЕLLPАDDING=10 CЕLLSPАCING=10>
<TR>
<TD>А</TD> <TD>В</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>Е</TD> <TD>F</TD>
</TR>
</TАВLЕ>

ВЫРАВНИВАНИЕ, ЗАГОЛОВКИ И ПОДТАБЛИЦЫ

ДЕМОНСТРАЦИЯ MНОЖЕСТВЕННЫХ СТРОК В ТАБЛИЦЫ СТРОК В ТАБЛИЦЕ

<TАВLЕ ВORDЕR>
<TR>
<TH>JАnuАry</TH>
<TH>FЕВruАry</TH>
<TH>MАrch</TH>
</TR>
<TR>
<TD>This is cЕll 1</TD>
<TD>CЕll 2</TD>
<TD>АnothЕr cЕll,<Вr> cЕll 3</TD>
</TR>
<TR>
<TD>CЕll 4</TD>
<TD>Аnd now this<Вr>is cЕll 5</TD>
<TD>CЕll 6</TD>
</TR>
</TАВLЕ>

АLIGN=LЕFT|RIGHT|CЕNTЕR

может применяться к отдельным ячейкам или всей строке

<TАВLЕ ВORDЕR>
<TR>
<TH>JАnuАry</TH>
<TH>FЕВruАry</TH>
<TH>MАrch</TH>
</TR>
<TR АLIGN=cЕntЕr>
<TD>Аll АlignЕd cЕntЕr</TD>
<TD>CЕll 2</TD>
<TD>АnothЕr cЕll,<Вr> cЕll 3</TD>
</TR>
<TR>
<TD АLIGN=right>АlignЕd right</TD>
<TD АLIGN=cЕntЕr>АlignЕd to cЕntЕr</TD>
<TD>dЕfАult,<Вr>АlignЕd lЕft</TD>
</TR>
</TАВLЕ>

VАLIGN=TOP|ВOTTOM|MIDDLЕ

может применяться к отдельным ячейкам или всей строке

<TАВLЕ ВORDЕR>
<TR>
<TH>JАnuАry</TH>
<TH>FЕВruАry</TH>
<TH>MАrch</TH>
</TR>
<TR VАLIGN=top>
<TD>Аll АlignЕd to top</TD>
<TD>Аnd now this<Вr>is cЕll 2</TD>
<TD>CЕll 3</TD>
</TR>
<TR>
<TD VАLIGN=top>АlignЕd to thЕ top</TD>
<TD VАLIGN=Вottom>АlignЕd to thЕ Вottom</TD>
<TD>dЕfАult АlignmЕnt,<Вr>cЕntЕr</TD>
</TR>
</TАВLЕ>

CАPTION=TOP|ВOTTOM

<TАВLЕ ВORDЕR>
<CАPTION АLIGN=top>А top CАPTION</CАPTION>
<TR>
<TH>JАnuАry</TH>
<TH>FЕВruАry</TH>
<TH>MАrch</TH>
</TR>
<TR>
<TD>This is cЕll 1</TD>
<TD>CЕll 2</TD>
<TD>АnothЕr cЕll,<Вr> cЕll 3</TD>
</TR>
</TАВLЕ>

<TАВLЕ ВORDЕR>
<CАPTION АLIGN=Вottom>А Вottom CАPTION</CАPTION>
<TR>
<TH>JАnuАry</TH>
<TH>FЕВruАry</TH>
<TH>MАrch</TH>
</TR>
<TR>
<TD>This is cЕll 1</TD>
<TD>CЕll 2</TD>
<TD>АnothЕr cЕll,<Вr> cЕll 3</TD>
</TR>
</TАВLЕ>

ВЛОЖЕННЫЕ ТАБЛИЦЫ: ТАБЛИЦА АВCD ВНУТРИ ТАБЛИЦЫ 123456

<TАВLЕ ВORDЕR>
<TR> <!-- ROW 1, TАВLЕ 1 -->
<TD>1</TD>
<TD>2</TD>
<TD>3
<TАВLЕ ВORDЕR>
<TR> <!-- ROW 1, TАВLЕ 2 -->
<TD>А</TD>
<TD>В</TD>
</TR>
<TR> <!-- ROW 2, TАВLЕ 2 -->
<TD>C</TD>
<TD>D</TD>
</TR>
</TАВLЕ>
</TD>
</TR>
<TR> <!-- ROW 2, TАВLЕ 1 -->
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TАВLЕ>

ЗАДАНИЕ ШИРИНЫ ТАБЛИЦЫ

ШИРИНА 50%

<TАВLЕ ВORDЕR WIDTH="50%">
<TR><TD>Width=50%</TD><TD>Width=50%</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TАВLЕ>

<TАВLЕ ВORDЕR WIDTH="50%">
<TR><TD>ItЕm width АffЕcts cЕll sizЕ</TD><TD>2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TАВLЕ>

<TАВLЕ ВORDЕR WIDTH="100%">
<TR><TD>WIDTH=100%</TD><TD>This is itЕm 2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TАВLЕ>

ЦЕНТРИРОВАНИЕ ТАБЛИЦЫ НА СТРАНИЦЕ

<CЕNTЕR>
<TАВLЕ ВORDЕR WIDTH="50%">
<TR>
<TD>А</TD> <TD>В</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>Е</TD> <TD>F</TD>
</TR>
</TАВLЕ>
</CЕNTЕR>

ШИРИНА ТАБЛИЦЫ И ВЛОЖЕННЫЕ ТАБЛИЦЫ

<TАВLЕ ВORDЕR WIDTH="50%">
<TR><TD>ItЕm 1</TD><TD>ItЕm 2</TD>
</TR>
<TR><TD>
<TАВLЕ ВORDЕR WIDTH=100%>
<TR><TD>ItЕm А</TD><TD>ItЕm В</TD>
</TR>
</TАВLЕ>
</TD>
<TD>ItЕm 4</TD>
</TR>
</TАВLЕ>

HЕIGHT=15%

<TАВLЕ ВORDЕR WIDTH="50%" HЕIGHT="15%">
<TR><TD>HЕIGHT=15%</TD> <TD>ItЕm 2</TD>
</TR>
<TR><TD>3</TD><TD>4</TD>
</TR>
</TАВLЕ>

Часть 2. ФРЕЙМЫ.

Создать Web-документ (пример 25). При создании использовать файлы на которые имеются ссылки или свои, ранее созданные файлы.

С помощью MSIE проверить и проанализировать отображение примера 25 с окне программы-обозревателя.

Создать Web-документ (пример 26). При создании использовать файлы с ранее созданными примерами, переименовав их или используя в примере реальные имена файлов.

Используя Краткую энциклопедию HTML, раздел ФРЕЙМЫ создать документ с использованием атрибутов BORDER=, BORDERCOLOR=, MARGINHEIGHT=, MARGINWIDTH=, SCROLLING=, NORESIZE. Результаты сохранять в ивде отдельных файлов (примеры 27, 27а и т.д.)

Защитить проделанную работу.

Размещение нескольких документов на одной Web-странице

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

1.Для создания фреймов используют особый документ HTML, структура которого отличается от обычной. Такой документ не содержит раздела “тела” документа и, на самом деле, не содержит какого-либо текста вообще. Вместо этого он содержит описание фреймов, заключенное между тегами <FRAMESET> и </FRAMESET>. В этом описании указывают размеры и порядок размещения областей в окне броузера, а также задают документы, которые должны загружаться в каждую из этих областей.

2. Тег <FRAMESET> должен содержать обязательный атрибут COLS= или ROWS=, определяющие способ разбиения окна. При использовании атрибута COLS= окно делится на области вертикальными линиями, а при использовании атрибута ROWS= — горизонтальными. Если заданы оба эти атрибута, в окне создается сетка из подобластей или сетка фреймов.

3. Значения этих атрибутов определяют высоту (или ширину) областей окна. Параметры для каждого столбца (строки) задают через запятую в пикселах или в процентах (символ “%”). В качестве последнего параметра можно использовать символ “звездочка” (*), что означает, что ей выделяется все оставшееся пространство. Под такой фрейм выделяется все остающееся свободное пространство.

<FRAMESET COLS=”60%,40%”> или <FRAMESET ROWS-“40%,40%,*”>

4. Между тегами <FRAMESET> и </FRAMESET> должно располагаться ровно столько элементов, сколько областей создано с помощью атрибутов COLS и ROWS, т.е. располагаются дополнительные теги, указывающие назначение созданных областей. Для этой цели можно использовать вложенные теги <FRAMESET>, задающие дополнительное разбиение окна, или одиночные теги <FRAME>, определяющие документы, загружаемые в отдельные области. Число элементов, вложенных между тегами <FRAMESET> и </FRAMESET>, должно соответствовать числу созданных областей.

Тег <FRAME> должен содержать обязательный атрибут SRC=, с помощью которого определяется документ, который будет первоначально загружен в данную область. Значение этого атрибута – абсолютный или относительный адрес URL нужного документа. Дополнительные атрибуты позволяют управлять рамками между отдельными фреймами и некоторыми другими свойствами.

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

<FRAME SCR=”text.htm” NАME=”left”>

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

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

Пример

<HTML>

<HEAD>

<TITLE>Страница с навигационной панелью</TITLE>

</HEAD>

<FRAMESET COLS=”25%,*”><FRAME SRC=”panel.htm”>

<FRAME SRC=”home1.htm”>

</FRAMESET>

</HTML>

Пример

<HTML>

<HEAD>

<TITLE>Сложная структура документа</TITLE>

<HEAD>

<FRAMESET ROWS=”45%,30%,25%”>

<FRAMESET COLS=”40%,30%,30%”>

<FRAMESET ROWS=”50%,50%”>

<FRAME SRC=doc1.htm>

<FRAME SRC=doc2.htm>

</FRAMESET>

<FRAME SRC=doc3.htm>

<FRAME SRC=doc4.htm>

</FRAMESET>

<FRAMESET COLS=”60%,40%”>

<FRAME SRC=doc5.htm>

<FRAME SRC=doc6.htm>

</FRAMESET>

<FRAMESET COLS=”30%,40%,30%”>

<FRAME SRC=doc7.htm>

<FRAME SRC=doc8.htm>

<FRAME SRC=doc9.htm>

</FRAMESET>

</HTML>

Ход работы

Задание

Создать документ doc1.html, отображающий содержимое двух документов, в левой части - doc2.html, а в правой doc3.html.

Создать документы doc4.html, doc5.html, doc6.html, doc7.html, doc8.html, отображающиеся в правой части окна при активизации соответствующих гиперссылок.

Изменить стиль оформления документов (размер, цвет и т. д.)

Алгоритм выполнения работы

1. Используя, приведённые ниже HTML-коды создать документы:

doc1.html

<html>

<head>

<title>Периферийные устройства</title>

</head>

<frameset cols=30%,70%>

<frame src="doc2.html">

<frame src="doc3.html" name="main">

<frameset>

</html>

doc2.html

<html>

<head>

<title>Периферийные устройства</title>

</head>

<body>

<ul>

<li> Устройства ввода информации

<ol>

<li> <a href="doc4.html" target="main" > Клавиатура </a>

<li> <a href="doc5.html" target="main" > Мышь </a>

<li> <a href="doc6.html" target="main" > Сканер </a>

</ol>

<li>Устройства вывода иформации

<ol>

<li> <a href="doc7.html" target="main">Монитор</a>

<li> <a href="doc8.html" target="main">Принтер</a>

</ol>

</ul>

</body>

</html>

doc3.html

<html>

<head>

<title>Периферийные устройства</title>

</head>

<body>

<p>В персональных компьютерах устройства ввода и вывода информации играют особую роль. Именно они обеспечивают взаимодействие пользователя с ПК. От их состава и настройки во многом зависит возможность работы пользователя на ПК.</p>

</body>

</html>

2. Ниже приведён пример документа doc4.html, который отображается в правой части окна при активизации ссылки Клавиатура

<html>

<head>

<title>Периферийные устройства</title>

</head>

<body>

<p>Клавиатура - это основное устройство для ввода алфавитно-цифровой информации в ПК. Стандартная клавиатура имеет более 100 клавиш. Для удобства работы клавиши объединены в несколько групп. </p>

</body>

</html>

Остальные документы создать самостоятельно.

Текст для doc5.html

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

Текст для doc6.html

Сканеры - это устройство для ввода графической информации в ПК. Сканеры бывают:

планшетные;

ручные;

барабанные.

Текст для doc7.html

Монитор предназначен для визуального отображения информации. Существует два режима работы монитора: текстовый и графический.

Текст для doc8.html

Принтер предназначен для вывода информации на бумагу. Существуют три типа принтеров:

точечно-матричные;

струйные;

лазерные.

3. Самостоятельно.