Технология гипермедиа в Internet
УЧЕБНО-Методические МАТЕРИАЛЫ к выполнению лабораторных работ
Лабораторная работа № 3
Технология гипермедиа в Internet
Цель работы
Получить практическое представление о технологии гипермедиа в Internet, о внутренней организации web-документов и технологий их создания. Получить практические навыки создания и редактирования Web-документов в формате HTML.
Задание
1. Изучите принципы, лежащие в основе технологии гипермедиа.
2. Изучите принципы создания и редактирования текстовых документов при помощи языка разметки гипертекста HTML.
3. Исследуйте работу тегов и их атрибутов, используемых для создания и редактирования текстовых документов при помощи языка разметки гипертекста HTML
4. Разработайте и создайте html-документ, учитывающий требования, предъявляемые поисковой системой Internet к регистрируемым Web-сайтам, в соответствии с заданием (вариант задания определяется преподавателем).
5. Оформите отчет о проделанной работе в соответствии с требованиями.
Основные теоретические сведения
Основные возможности гипермедиа систем в Internet
Определяющую роль в решении задач, связанных с поиском информации и рекламированием web-сайтов, играют поисковые серверы. Однако ни один поисковый… Web-документы строятся на базе языка разметки гипертекстов HTML (HyperText… HTML успешно справлялся с проблемой создания относительно простых, но красиво оформленных документов. В итоге…Стандарты HTML
Существуют несколько версий стандарта HTML: RFC 1866 — HTML 2.0, одобренный как стандарт 22 сентября 1995; HTML 3.2 — 14 января 1996;Поисковые системы Internet
Поисковые системы и каталоги предназначены для поиска информации в Internet. Поисковые системы разделяют на несколько классов, предназначенных для решения различных задач.
Поисковые каталоги
Для того, чтобы как-то упростить задачу навигации по существующим ресурсам, были созданы системы, названные поисковыми каталогами или просто каталогами. Яркими представителями поисковых каталогов на Западе являются Yahoo и Open Directory, в России Mavica.net, List.ru, в Украине - Topping, UaPortal и др.
В таких каталогах сайты регистрируются их создателями, после чего проходят проверку модераторами, имеющими право изменять описание и рубрику регистрируемого ресурса по собственному усмотрению так, чтобы максимально приблизить его к тематике самого сайта. Часто модераторами также оценивается полезность ресурса. Каждый ресурс при этом получает экспертную оценку, которая помогает пользователям находить наиболее авторитетные сайты по интересующим их темам.
Полнотекстовые поисковые системы
Каждый поисковый механизм имеет собственный набор правил, определяющих, каким образом cобирать документы. Некоторые следуют за каждой ссылкой на… Важной задачей для робота, который собирает информацию о ресурсах для…Метапоисковые системы
Одним из возможных решений этой проблемы может быть метапоиск. Метапоисковые системы не имеют собственных поисковых баз данных, не содержат никаких… В системах метапоиска запрос, который вводит пользователь, ретранслируется… Несмотря на очевидные преимущества систем метапоиска, и они не лишены существенных недостатков, среди которых очень…Структура и принцип действия поисковых систем Internet
Поисковая система состоит из следующих основных компонентов: Spider, Crawler, Indexer, Database, Search Engine Results Engine. Spider(паук) - браузероподобная программа, которая скачивает Web-страницы. Она… Crawler (краулер, «путешествующий» паук) - программа, которая автоматически проходит по всем ссылкам, найденным на…Особенности подготовки HTML-документов
Для поисковых систем и Web-каталогов
Поисковые системы находят сайт по вводимым в строке запроса ключевым словам, которые соответствуют теме сайта. Одним из основных способов найти… Каждая поисковая машина обладает рядом особенностей. Эти особенности следует… Поисковая системаЯндексна сегодняшний день является самой популярной русскоязычной поисковой…Описание объекта исследования
Структура HTML-документа
Тег – это оформленная единица HTML-кода. Например, <HEAD>, <FONT ...>, <BODY>, <HTML> и так далее. Имя конечного… Элемент – более емкое понятие, обозначающее пару тегов и участок документа… Элементы могут быть пустыми, то есть не содержат никакого текста и других данных (например, тег перевода строки…Заголовок
Заголовок содержит техническую информацию о документе, хотя чаще всего используется только для обозначения его названия (<title> заголовок </title>). К заголовку документа относятся следующие элементы: HEAD, TITLE, BASE, STYLE, LINK, META
Тело документа
Тело документа создается с помощью элемента BODY. В теле документа размещается основное его содержимое: форматированный текст, блоки текста, гиперссылки, списки, таблицы, объекты, заполняемые формы.
Для создания комментариев в любой части документа используется тег <!-- ... -->. Все, что находится внутри <!-- -->, будь то элемент или текст – будет проигнорировано браузером (не будет обрабатываться и выводиться на экран). Исключение составляют комментарии, расположенные внутри элемента TITLE. Как и любые другие теги, в этом случае они трактуются как текст и будут видны в заголовке документа. Иначе говоря, тег <!-- --> внутри элемента TITLE не действует.
Пример.
<HTML>
...
<!-- Начинаем работу с телом документа -->
<BODY>
<!-- Вставляем таблицу с прайс-листом -->
...
</BODY>
<!-- Все. Готово -->
</HTML>
Форматирование текста
Для оформления и смыслового выделения текста – подчеркивания, изменения шрифта, выделения курсивом, цитирования и т.д., используют следующие элементы форматирования текста: BASEFONT, FONT, I, EM, B, STRONG, U, S, STRIKE, BIG, SMALL, SUP, SUB, CODE, SAMP, TT, KBD, VAR, CITE.
Текстовые блоки
Типичными примерами текстовых блоков являются параграфы, абзацы и главы. Для отделения одной части текста от другой также используются разделительные горизонтальные линии и символы возврата каретки. Следующие элементы разбивают текст документа на блоки: H1,H2,...H6, P, DIV, ADDRESS, BLOCKQUOTE, BR, HR, PRE, LISTING, PLAINTEXT, XMP.
Объекты
Объекты – это графические и мультимедийные вставки в HTML-документ, такие как картинки, Flash-анимация, Java-апплеты, звуки, музыка, VRML. Для создания объектов используются следующие элементы: IMG, EMBED, NOEMBED, APPLET, PARAM.
Пример создания web-страницы со вставкой графического объекта изображен на рис. 2.
Рис. 2. Пример создания Web-страницы со вставкой
графического изображения
Гиперссылки
Ссылки на другие документы в HTML создаются либо с помощью элемента A, либо с помощью навигационных карт. Элемент A применяется, если ссылкой планируется сделать часть текста или целое изображение. Навигационные карты имеет смысл применять, если ссылкой будет часть изображения.
Списки
Списки в HTML бывают двух видов: упорядоченные (пронумерованные) и неупорядоченные (непронумерованные). Отличаются они лишь способом оформления. Перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера. Списки создаются с помощью следующих элементов: UL, OL, LI, MENU, DIR, DL, DT, DD.
Формы
Следующие элементы позволяют создавать заполняемые формы – анкеты, опросники и различные поля для ввода текста пользователем с возможностью последующей отправки заполненной формы на ваш сервер: FORM, TEXTAREA, SELECT, OPTION, INPUT.
Таблицы
Таблицы в HTML формируются нетрадиционным способом – построчно. Сначала c помощью элемента TR необходимо создать ряд таблицы, в который затем элементом TD помещаются ячейки. Примеры создания Web-таблиц приведены в табл. 1.
В HTML таблицы используются как по прямому назначению, так в целях дизайна. С помощью таблиц с прозрачными границами можно создавать невидимый «каркас» страницы, помогающий расположить текст и изображения в соответствии со своей фантазией и пристрастиями.
Для создания таблиц используются следующие элементы: TABLE, CAPTION, TR, TD и TH.
Таблица 1.
Примеры создания таблиц
| Пример 1 | Текст HTML:
<TABLE BORDER> <TR> <TD>A1</TD> <TD>B1</TD> <TD>C1</TD> </TR> <TR> <TD>A2</TD> <TD>B2</TD> <TD>C2</TD> </TR> </TABLE>
Внешний вид Web-таблицы:
| ||||||
| Пример 2 | Текст HTML:
<TABLE BORDER> <TR> <TH ROWSPAN=2>HDD</TH> <TD>WD Caviar 3.1Gb</TD><TD ALIGN="right">85$</TD> </TR> <TR> <TD>Quantum FB ST 6.4Gb</TD><TD ALIGN="right">110$</TD> </TR> </TABLE>
Внешний вид Web-таблицы:
|
| Пример 3 | Текст HTML:
<TABLE BORDER> <TR> <TH COLSPAN=2>Video</TH> </TR> <TR> <TD>Matrox G400</TD><TD ALIGN="right">115$</TD> </TR> <TR> <TD>Voodoo III</TD><TD ALIGN="right">129.95$</TD> </TR> </TABLE>
Внешний вид Web-таблицы:
|
Фреймы
Фреймы (frames) используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ (фрейм). Как правило, фреймы используются для облегчения навигации по сайту и создания навигационного меню (рис. 3).
Для создания фреймов и работы с ними используются следующие элементы: FRAMESET, FRAME, NOFRAMES.
Тег <FRAME> разделяет экран браузера на части. В результате, человек, просматривающий страницу, может изучать только одну ее часть, независимо от остального содержимого. Фактически браузер, распознающий фреймы, загружает разные страницы в разные секции экрана. Можно расположить сбоку кнопки навигации, которые не перемещаются, когда читатель щелкает по ним мышкой, так что изменяется только часть экрана, а сама полоска навигации остается неподвижной. Как правило, на странице с фреймовой структурой содержимого фреймов нет. Такая страница обычно невелика — она описывает только кадровую структуру экрана.
Рис. 3. Разбиение окна браузера на фреймы
Фреймовую структуру задает тег <FRAMESET> с атрибутами ROWS (разделение по строкам, по горизонтали) и COLS (по столбцам). Указываются размеры фреймов (<FRAMESET COLS="25%, 75%">) и далее имена фреймов (по их количеству).
Если необходимо, чтобы при щелчке мышью на ссылке соответствующая страница отображалась в определенном фрейме, необходимо указать этот фрейм, чтобы страница «знала», что куда загружать (используется атрибут NAME = main). Фрейм, в котором отображаются страницы, называется целевым (target). Чтобы ссылка открывалась в выбранный фрейм нужно добавить атрибут TARGET (TARGET="main") в тег ссылки.
Атрибут SCROLLING дает возможность пользоваться прокруткой во фрейме. Возможные варианты: SCROLLING=yes\no\auto (полосы прокрутки будут всегда \ полос прокрутки не будет, даже когда это необходимо \ автоматически)..
Замечание. Фреймы к телу документа не относятся, поэтому необходимо следить, чтобы элементы для создания фреймов находились вне элемента BODY.
Скрипты
Скрипты – это включения в HTML не-html кода, дополняющего его возможности. С помощью сприптов можно создавать анимированные кнопки меню, осуществлять автоматическое перенаправление на другие документы и т.д. Большинство скриптов пишется на языке JavaScript.
Для работы со скриптами используются следующие элементы: SCRIPT, NOSCRIPT.
Навигационные карты
Карты, обрабатываемые на клиентской машине браузером, создаются с помощью элементов MAP и AREA и представляют собой гиперссылки, оформленные в виде активных областей на изображении. Применить созданную карту к изображению можно, вызвав ее по имени с помощью атрибута USEMAP элемента IMG.
Пример
<!-- Создаем карту с именем ImageMap: -->
<MAP NAME="ImageMap">
<AREA HREF="something.html" SHAPE="rect" COORDS="0,0,70,140" ALT="Левая половинка">
<AREA HREF="anything.html" SHAPE="rect" COORDS="71,0,140,140" ALT="Правая половинка">
</MAP>
<!—Создали карту. -->
<BODY>
<!—Прикрепляем карту к изображению -->
<IMG src="/img/block.gif" USEMAP="#ImageMap" HEIGHT="140" WIDTH="140" BORDER="0">
...
В данном примере создано квадратное изображение размером 140x140 пикселов, левая часть которого является ссылкой на файл something.html, а правая – на файл anything.html.
Назначение основных тегов, используемых при создании HTML-документов, их атрибуты и параметры приведены в таблице 2.
Таблица 2
Таблица используемых тегов
| тег | атрибут | назначение | примечания |
| <html> </html> | тег, открывающий документ | обязательный тег | |
| <head></head> | голова документа | обязательный тег | |
| <title></title> | название страницы | вкладывается в голову документа | |
| <body></body> | тело документа | обязательный тэг | |
| bgcolor="#fffffff" | цвет фона в теле док-та | ||
| text="#ffffff" | цвет текста в теле док-та | ||
| <p></p> | параграф | автоперенос на строку | |
| align="center" | центрирование текста | ||
| align="right" | выравнивание текста по правому краю | ||
| align="left" | выравнивание текста по левому краю | ||
| <font></font> | color="yellow" | цвет текста | Black, Gray, Silver, White, Red, Fuchsia, Maroon, Purple, Navy, Blue, Aqua, Green, Lime, Teal, Yellow, Olive |
| size="+0" | размер текста | от -2 до +4 | |
| face="Arial" | шрифт текста | ||
| <H1></H1> | заголовок | 1 – величина заголовка | |
| <br></br> | принудительный перенос на строку | ||
| <u> </u> | подчеркнутый текст | ||
| <b> </b> | полужирный текст | ||
| <i> </i> | курсив | ||
| <img src="рис.jpg"> | вставка рисунка | ||
| align="left" | расположение текста по отношению к картинке | ||
| Hspace="30" | расстояние от картинки до текста по горизонтали | ||
| alt="классич" | описание картинки | ||
| <em></em> | выделение текста | ||
| <frameset> </frameset> | структура фреймовой области | ||
| cols=n% | кол-во и ширина столбцов | ||
| rows=n$ | кол-во и ширина строк | ||
| <frame> | описание фрейма | ||
| src=menu.html | определяет фрейм и его свойства внутри frameset | обязателен для фреймовой структуры | |
| name=window-1 | имя фрейма, используется для ссылки на него из других документов (фреймов) | ссылка осуществляется тегом <a>target (target= «имя_фрейма») | |
| scrolling=yes | скроллинг, линейка прокрутки будет всегда | no, auto – никогда, автоматически | |
| src=адрес | содержимое фрейма | ||
| <a> | тег гиперсвязи | ||
| href=адрес | адрес гиперсвязи |
Содержание отчета
Отчет выполняется в электронном виде и сдается на проверку в виде твердой копии, демонстрационный материал представляется в электронном виде.
1) Титульный лист отчета должен содержать следующие сведения: данные об авторе (ФИО, № группы, курс, факультет), наименование лабораторной работы (образец оформления в приложении 1);
2) цель работы (указать на первом листе отчета);
3) задание и номер варианта (указать на первом листе отчета);
4) исходные данные в соответствии с номером варианта задания (указать на первом листе отчета, вариант задания задается преподавателем);
5) пояснительная записка с изложением кратких теоретических сведений и хода выполнения работы (изложить, начиная со второго листа отчета);
6) принцип работы поисковых систем;
7) структуру разработанного HTML-документа с описанием назначения ее компонентов;
8) таблицу с описанием использованных тегов и их атрибутов;
9) сведения о том, какие особенности работы поисковых систем Internet учтены при разработке HTML-документа;
10) листинг разработанного HTML-документа;
11) скрин-шот Web-страницы;
12) выводы по работе;
13) список использованной литературы, включая адреса Интернет.
14) список использованных программных средств.
Методические указания к выполнению работы
Тема документа и тип поисковой системы задается преподавателем. При создании документа необходимо учесть следующие свойства. Требованиям к структуре документа:Контрольные вопросы
1. Какие особенности имеет язык HTML? Для каких целей он может быть использован?
2. Какова структура HTML-документа, какие команды языка HTML ее определяют?
3. Каков общий порядок записи тега и его атрибута?
4. Перечислите основные группы тэгов.
5. Поясните порядок применения изученных тэгов.
6. Назовите наиболее популярные поисковые систем и каталоги Internet. Какие требования они предъявляют к регистрируемым документам?
Рекомендуемая литература
1. Байков В.Д. Интернет: поиск информации и продвижение сайтов. / В.Д. Байков. – СПб.: БХВ-Петербург, 2000. – 288 с.: ил.
2. Соловьева Л.Ф. Сетевые технологии. Учебник-практикум. – СПб.: БХВ-Петербург, 2004. – 416 с.: ил.
3. Соколов С.А. HTML и CSS в примерах, типовых решениях и задачах. Профессиональная работа / С.А. Соколов — М.: «Вильямс», 2007. —416 с.: ил..
4. Рихард Айзенменгер «HTML 3.2/4.0 справочник» - М.: ЗАО Издательство БИНОМ, 1998. – 368 с.: ил.
5. http://www.citforum.ru/internet/.