Лабораторная работа №6
Тема: «Оформление html-документа.
Фреймы. Таблицы. Списки».
Цель работы: изучить основные тэги для создания фреймов в html-документе; закрепить навыки работы с таблицами и списками.
Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.
Теоретический материал:
Нумерованный список находится в контейнере <OL>...</OL>
Нумерованный список с параметрами, подразумевающийся по умолчанию:
<OL>
<LI> текст </LI>
<LI> текст </LI>
<LI> текст </LI>
</OL>
Список с арабскими цифрами (начинается с 1):
<OL TYPE = 1>
<LI> текст </LI>
<LI> текст </LI>
<LI> текст </LI>
</OL>
<FRAMESET>...</FRAMESET> - используется вместо тэга BODY <FRAME> - определяет фрейм
ROWS и COLS. ROWS="список определений горизонтальных подокон" – определяет количество подокон
Value – определяет фиксированную высоту подокна в пикселях
Value% - определяет значение величины подокна в процентах
Value* - все оставшееся место будет принадлежать данному фрэйму
COLS="список определений горизонтальных подокон" – делит окно по горизонтали
ROWS="список определений вертикальных подокон" – делит окно по вертикали
SRC="url" - описывает URL документа, который будет отображен внутри данного фрэйма
NAME="frame_name" - описывает имя фрэйма
MARGINWIDTH="value" – используется, если автор документа хочет указать величину разделительных полос между фрэймами сбоку
MARGINHEIGHT="value" - для верхних и нижних величин разделительных полос
SCROLLING="yes | no | auto" - позволяет задавать наличие полос прокрутки у фрэйма
Ход работы:
Создать страницу ссылок на ресурсы сети, обязательно с использованием фреймов. Имена файлов должны иметь маленькие латинские буквы! В левом фрейме создать рубрики, оформить созданные ссылки в виде нумерованного списка: 1. поисковые системы; 2. каталоги; 3. литература; в правом фрейме соответственно создать ссылки с названием и кратким описанием ресурсов; - для поисковых систем, ссылки оформить в виде таблицы из двух колонок и нескольких строк. В левой колонке поместить рисунки-логотипы поисковых систем, в правой - гиперссылки на эти системы. (ссылки www.yandex.ru, www.rambler.ru, www.aport.ru, www.google.com, www.filesearch.ru).
Пример таблицы
- для каталогов, оформить созданные ссылки в виде нумерованного списка, (ссылки www.list.ru, www.rambler.ru.) - для литературы, оформить созданные ссылки в виде нумерованного списка, ссылки разложить по рубрикам, например: библиотеки, техническая литература, стандарты. (ссылки www.citforum.ru, www.lib.ru, www.w3.org, http://pyramidin.narod.ru/html401/index.htm.)
Сделать ссылку на эту страницу с главной страницы.
Разместить файлы на сервере и просмотреть в браузере, проверить работоспособность всех ссылок.
В исходном виде страницы укажите, в виде комментариев, для чего предназначена каждая группа тегов (каждый открывавший тег) и их свойства (атрибуты).
Листинг html-программы:
Главная страница:
<html>
<head>
<title> Ресурсы сети </title>
</head>
<body bgcolor='orange'>
<h1> <p align> <font face='Monotype Corsiva' color='blue' size=7> <b> Ресурсы сети </b> </p> </font> </h1>
<font face='Calibri' color='yellow' size=5>
<p> Сеть Интернет растет очень быстрыми темпами, и найти нужную инфорацию среди миллиардов web-страниц и файлов становится все сложнее. Для поиска информации используются специальные поисковые серверы, которые содержат более или менее полную и постоянно обновляемую информацию о web-страницах, файлах и других документа, хранящихся на десятках миллионов серверов Интернета.</p>
<p> Различные поисковые системы могут использовать различные механизмы поиска, хранения и предоставления пользователю информации. Поисковые системы Интернета можно разделить на две группы:
<UL TYPE = CIRCLE>
<LI> Поисковые системы общего назначения </LI>
<LI> Специализированные поисковые системы</LI>
</UL>
</p>
<p> Современные поисковые системы часто являются информационными порталами, которые предоставляют пользователям не только возможности поиска документов в Интернете, но и доступ к другим информационным ресурсам (новостям, информации о погоде, о валютном курсе, интерактивным географическим картам и так далее).</p> </font>
<p>
<A HREF = 'C:\Documents and Settings\User\Рабочий стол\фрейм\главная.html'>
<Img src='C:\Documents and Settings\User\Рабочий стол\фрейм\yandex.jpg'>
</A>
</p>
</body>
</html>
Вторая страница:
1 фрейм (заголовок)
<html>
<head>
<title> Фрэймы </title>
</head>
<body bgcolor='orange'>
<h1> <p align='center'><font face='Comic Sans MS' color='yellow' size=7> <b> Работаем с фрэймами... </b> </p></font> </h1>
</body>
</html>
2 левый фрэйм:
<html>
<head>
<title> Фрэймы </title>
</head>
<body bgcolor='orange'>
<h1> <p align='center'><font face='Comic Sans MS' color='yellow' size=7> <b> Работаем с фрэймами... </b> </p></font> </h1>
</body>
</html>
3 правый фрэйм:
3.1. Поисковые системы;
<html>
<head>
<title> Поисковые системы </title>
</head>
<body bgcolor='pink'>
<h1>
<p align='center'>
<font face='Comic Sans MS' color='blue'> <b> Поисковые системы </b> </font> </p> </h1>
<table border>
<tr> <th colspan='5'> Поиск информации с помощью автоматических индексов </th> </tr>
<tr> <th> <img src='C:\Documents and Settings\User\Рабочий стол\фрейм\yandex.jpg'> </th>
<th> <A HREF = 'http://www.Yandex.ru' www.Yandex.ru> Yandex </A> </th> </tr>
<tr> <th> <img src='C:\Documents and Settings\User\Рабочий стол\фрейм\1 задание для 7.jpg'> </th>
<th> <A HREF = 'http://www.Rambler.ru' www.Rambler.ru> Rambler </A> </th> </tr>
<tr> <th> <img src='C:\Documents and Settings\User\Рабочий стол\фрейм\aport.jpg'> </th>
<th> <A HREF = 'http://www.Aport.ru' www.Aport.ru> Aport </A> </tr>
<tr> <th> <img src='C:\Documents and Settings\User\Рабочий стол\фрейм\google.jpg'> </th>
<th> <A HREF = 'http://www.Google.com' www.Google.com> Google </A> </tr>
<tr> <th> <img src='C:\Documents and Settings\User\Рабочий стол\фрейм\filesearch.jpg'> </th>
<th> <A HREF = 'http://www.Filesearch.ru' www.Filesearch.ru> Filesearch </A> </tr>
</table>
<br>
</html>
3.2. Каталоги;
<html>
<head>
<title> Каталоги </title>
</head>
<body bgcolor='yellow'>
<h1> <p align='center'> <font face='Comic Sans MS' color='red'> <b> Каталоги </b> </p> </font> </h1>
<font face='Calibri' color='green' size=5>
<OL>
<LI> <A HREF = 'http://www.Yandex.ru' www.Yandex.ru> Yandex </A></LI>
<LI> <A HREF = 'http://www.Rambler.ru' www.Rambler.ru> Rambler </A> </LI>
<LI> <A HREF = 'http://www.List.ru' www.List.ru> List </A> </LI>
<LI> <A HREF = 'http://www.Google.com' www.Google.com> Google </A></LI>
<LI> <A HREF = 'http://www.Aport.ru' www.Aport.ru> Aport </A> </LI>
</OL>
</font>
</body>
</html>
3.3. Литература;
<html>
<head>
<title> Литература </title>
</head>
<body bgcolor='aqua'>
<h1> <p align='center'><font face='Comic Sans MS' color='Lime'> <b> Литература </b></p></font> </h1>
<font face='Calibri' color='orange' size=7>
<OL>
<LI> <A HREF = 'http://www.citforum.ru' www.citforum.ru> Библиотека </A></LI>
<LI> <A HREF = 'http://www.lib.ru' www.lib.ru> Техническая литература </A> </LI>
<LI> <A HREF = 'http://pyramidin.narod.ru/html401/index.htm'> Стандарты </A> </LI>
</OL>
</font>
</body>
</html