Реферат Курсовая Конспект
Технология гипермедиа в Internet - Лабораторная Работа, раздел Высокие технологии, Учебно-Методические Материа...
|
УЧЕБНО-Методические МАТЕРИАЛЫ к выполнению лабораторных работ
Лабораторная работа № 3
Технология гипермедиа в Internet
Цель работы
Получить практическое представление о технологии гипермедиа в Internet, о внутренней организации web-документов и технологий их создания. Получить практические навыки создания и редактирования Web-документов в формате HTML.
Задание
1. Изучите принципы, лежащие в основе технологии гипермедиа.
2. Изучите принципы создания и редактирования текстовых документов при помощи языка разметки гипертекста HTML.
3. Исследуйте работу тегов и их атрибутов, используемых для создания и редактирования текстовых документов при помощи языка разметки гипертекста HTML
4. Разработайте и создайте html-документ, учитывающий требования, предъявляемые поисковой системой Internet к регистрируемым Web-сайтам, в соответствии с заданием (вариант задания определяется преподавателем).
5. Оформите отчет о проделанной работе в соответствии с требованиями.
Основные теоретические сведения
Поисковые системы Internet
Поисковые системы и каталоги предназначены для поиска информации в Internet. Поисковые системы разделяют на несколько классов, предназначенных для решения различных задач.
Поисковые каталоги
Для того, чтобы как-то упростить задачу навигации по существующим ресурсам, были созданы системы, названные поисковыми каталогами или просто каталогами. Яркими представителями поисковых каталогов на Западе являются Yahoo и Open Directory, в России Mavica.net, List.ru, в Украине - Topping, UaPortal и др.
В таких каталогах сайты регистрируются их создателями, после чего проходят проверку модераторами, имеющими право изменять описание и рубрику регистрируемого ресурса по собственному усмотрению так, чтобы максимально приблизить его к тематике самого сайта. Часто модераторами также оценивается полезность ресурса. Каждый ресурс при этом получает экспертную оценку, которая помогает пользователям находить наиболее авторитетные сайты по интересующим их темам.
Особенности подготовки 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/.
– Конец работы –
Используемые теги: Технология, гипермедиа, INTERNET0.055
Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Технология гипермедиа в Internet
Если этот материал оказался полезным для Вас, Вы можете сохранить его на свою страничку в социальных сетях:
Твитнуть |
Новости и инфо для студентов