49053

Размещение графики на Web-странице и создание гиперссылок в HTML-документе

Лабораторная работа

Информатика, кибернетика и программирование

Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством браузеров.

Русский

2017-10-17

65.5 KB

4 чел.

ЛАБОРАТОРНАЯ РАБОТА №2

Тема работы: Размещение графики на Web-странице и создание гиперссылок в HTML-документе.

Цель работы: Научиться внедрять в html-документ графические изображения и формировать гиперссылки на смежные документы Internet.

Теоретическая часть: Одна из наиболее привлекательных черт Web — возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тега <IMG>. Использование этого тега позволяет значительно улучшить внешний вид и функциональность документов.

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

Синтаксис тега:

<IMG SRC="URL"

Элементы синтаксиса тега:

URL

Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством браузеров.

Важнейшим свойством языка HTML является возможность размещения на странице ссылок на другие документы. Возможны ссылки:

  • на удаленный HTML файл,
  • на некоторую точку в текущем HTML-документе,
  • на любой файл, не являющийся HTML-документом.

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

Ссылки на другой HTML-документСсылки позволяют щелчком по выделенному слову или фразе перейти к другому файлу.

<A HREF="example.html">Пример</A>

После имени файлаexample.html, указывается между символами > и < текстПример, по которому производится щелчок для перехода к этому файлу.

Ход работы:

Размещение графики на Web-странице.

Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG. Перед выполнением упражнения проверьте наличие файлаschedule.jpg в той же папке, которая будет использована для хранения создаваемой Web-страницы.

  1. Создайте  с помощью текстового редактора "Блокнот" (Notepad++) файлschedule.html:

<HTML>

<HEAD>

<TITLE>Учебныйфайл HTML </TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#330066">

<P ALIGN=CENTER>

<FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR>

<FONT SIZE="6"><I>занятийнавторник</I></FONT><BR><BR>

<IMG SRC="schedule.jpg">

</P>

</BODY>

</HTML>

  1. Самостоятельно внесите изменения в файлschedule.html, опробовав использование таких атрибутов графики как ALT, BORDER, HEIGHT, WIDTH. Пример использования атрибутов приведен в таблице ниже:

Атрибут

Формат

Описание

ALT

<IMG SRC="schedule.jpg" ALT="картина">

Надпись "картинка" выводится на экран при подведении указателя мыши к изображению.

BORDER

<IMG SRC="schedule.jpg" BORDER="3">

Задает рамку вокруг изображения толщиной 3 пикселя.

ALIGN

<IMG SRC="schedule.jpg" ALIGN=TOP">

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

HEIGHT

<IMG SRC="schedule.jpg" HEIGHT=111>

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

WIDTH

<IMG SRC="schedule.jpg" WIDTH=220>

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

VSPACE

<IMG SRC="schedule.jpg" VSPACE="8">

Атрибут добавляет верхнее и нижнее пустые поля высотой 8 пикселей.

HSPACE

<IMG SRC="schedule.jpg" HSPACE="8">

Добавляет левое и правое пустые поля шириной 8 пикселей.

Фоновое отображение графики на Web-странице

  1. Перед выполнением упражнения проверьте наличие файлаback.jpg в той же папке, которая будет использована для хранения создаваемой Web-страницы.
  2. Внесите изменения в файлschedule.html:

<HTML>

<HEAD>

<TITLE> Учебный файлHTML </TITLE>

</HEAD>

<BODYBACKGROUND="back.jpg"TEXT="#330066">

<P ALIGN=CENTER>

<FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR>

<FONT SIZE="6"> <I>занятийнавторник</I></FONT><BR><BR>

</P>

</BODY>

</HTML>

Создание ссылок на другой HTML-документ.

  1. Создайте с помощью текстового редактора "Блокнот" (Notepad++) файлmy_schedule.html и поместите в начало страницы следующий код:

<TABLE WIDTH=100%>

<TR>

<TD>Понедельник</TD>

<TD>Вторник</TD>

<TD>Среда</TD>

<TD>Четверг</TD>

<TD>Пятница</TD>

<TD>Суббота</TD>

</TR>

</TABLE>

<BR>

  1. Сохраните созданный файл в ту же папку, что и файлыschedule_monday.html.
  2. Определите для словаПонедельник ссылку на внешний документ:
  3. <A HREF="schedule_monday.html">Понедельник</A>
  4. Сохраните файл.
  5. Для просмотра Web-страницы используйте браузер Microsoft Internet Explorer.
  6. Убедитесь, что после щелчка указателем мыши на ссылкуПонедельник в окне браузера загружается страницаschedule_monday.html.

Создание графической ссылки.

  1. Проверьте, что  графический файлweek.jpg находится в той же папке, что и файлmy_schedule.html.
  2. Внесите изменения в файлmy_schedule.html так, чтобы в конце страницы была ссылка на страницуschedule_monday.html. В качестве ссылки используется графический файлweek.jpg:

<CENTER>

<A HREF=" schedule_monday.html"><IMG SRC="week.jpg"></A>

</CENTER>

  1. Сохраните файл.
  2. Для просмотра созданной Web-страницы используйте браузер Microsoft Internet Explorer.
  3. Продемонстрируйте полученный документ преподавателю.

Задание карты ссылок.

ЭлементIMG позволяет использовать изображения, отдельные части которых связаны со ссылками и позволяют выполнять переходы. Такие изображения называются картами (mар). Для определения полей карты используется атрибут

usemap="#Имя"

Это имя ставится в соответствие со значением соответствующих атрибутов элементовAREA иMAP (см. ниже), которые определяют конфигурацию карты. Задание атрибутов usemap придает элементу IMG свойства, характерные для элемента А, то есть возможность осуществления перехода.

Для определения карты необходимо обязательное совместное использование сразу трёх элементов: AREA, IMG и MAP.

ЭлементMAP необходим для общего определения карты. Внутри него определяются области карты при помощи элементов AREA и задается имя карты при помощи атрибута:

name="Имя"

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

href="http://Адрес"

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

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

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

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

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

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

shape="poly" coords=x1, у1, х2, у2, х3, у3 ...

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

shape="rect" coords=x1, y1, x2, y2

  1. В начало файлаmy_schedule.html вставьте следующий код:

<map name="schedule_map">

<areaаlt="Понедельник" shape="rect" coords="2, 0, 312, 31" href="schedule_monday.html">

</map>

<img src="week.jpg" usemap="#schedule_map" alt="Расписаниенанеделю">

  1. Сохраните файл.
  2. Для просмотра созданной Web-страницы используйте браузер Microsoft Internet Explorer.
  3. Вы должны увидеть Web-страницу с определенным в ее начале графическим изображением дней недели. При щелчке указателем мыши на деньПонедельник браузер загружает страницы с соответствующим расписанием.

Работа в локальной сети

Внимание! В компьютерном классе для работы в локальной сети установлен полный доступ для диска С:.

1. С помощью "FreeCommander","7ZiP"или "Проводника" просмотреть состав локальной сети компьютерного класса. Определить, сколько и  какого типа элементы входят вВашу локальнуюсеть (сколько серверов и групп рабочих станций – доменов).

(Например если в ответ на Ваш запрос системавыдает следующий список:

C-850-10

C-850-22

C-850-23

C-850-25

C-850-09,

тосостав вашей подсети состоит из машин  под №10,22,23,25,09).

2. Убедиться, что Ваш компьютер "виден" в сети.Определить, какие ресурсы Вашей рабочей станции доступны для работы.

3. Подготовить 2html документа.

3.1. 1 -ыйhtml документдолжен содержать Ваши данные, например:

Рабочая станция (номер Вашего компьютера).

Иванов Петр Сергеевич

студент ИРТ

группа ...

Дать документу имя Vizit_№.html, где № – номер Вашей рабочей станции. Для создания документа использовать редактор Notepad++.

3.2. 2 -ойhtml документдолжен содержать список - столбец ваших фамилий из вашей подсети.

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

<A HREF="//C-850-№/C-850-№/2-kurs/Основы сет.техн/РТ-1ХХ/ Vizit_№.html ">Фамилия студента, работающего на рабочей станции под  №</A>

3.3. Разместить их на свой рабочий клиентский терминал в папку по адресу

С:/2-kurs/Основы сет.техн/РТ-1хх/, где хх номер  вашей группы.

4. Проверить работу гиперссылки – выполнить по ней переход. Убедитесь, что после щелчка указателем мыши на очередную ссылкуФамилияследующего студента в списке в окне браузера загружались визитка студента, размещенного на другом компьютере из вашей локальной подсети.

Отчет должен содержать:

синтаксис тегов, изученных на лабораторной работе,

структуру и топологию вашей сети, а также

полученные по сети данные изhtml-документов, сведенные в таблицу:

Замечание

Редактирование выполнять в многооконном режиме методом копирования. Имена файлов не писать вручную, а копировать из окна проводника в режиме "переименования" файла.


 

А также другие работы, которые могут Вас заинтересовать

67977. Microsoft Excel 2007. Работа с формулами. Знакомство с элементами окна EXCEL 70.5 KB
  Выделение различных диапазонов: прямоугольного диапазона: выделить первую ячейку перетаскивание мышью или выделить первую ячейку на последней ячейке SHIFT щелчок. несмежных диапазонов: выделить первый диапазон выделить следующий при нажатой CTRL. Для установки ширины столбцов равной...
67978. Excel 2007. Работа с диаграммами. Вставка столбцов 161.5 KB
  Создание диаграммы на рабочем листе Выделить несмежные диапазоны например содержащие фамилии данные за четверти и за год включая строку шапку таблицы для выделения несмежных диапазонов использовать клавишу CTRL. Редактирование диаграммы Выполнить следующие изменения в диаграмме.
67979. Excel 2007. Работа со списками 41.5 KB
  Работа со списками В Excel имеются средства для обработки данных организованных по принципу баз данных функции списка основные операции которых сортировка данных и поиск определенной информации. Если будет обнаружен текст первые символы которого совпадают...
67980. Microsoft Excel 2007. Графические объекты, макросы. Создание графических объектов с помощью вспомогательных приложений 216 KB
  Создание объектов при этом производится с помощью последовательности действий: Вставка Иллюстрации Выбор необходимого приложения. Рисование в Excel С помощью команды Вставка Иллюстрации Фигуры в Excel можно создавать свободно позиционируемые объекты не привязанные к структуре рабочего листа.
67981. Изучение особенностей протокола RIP сетевого уровня OSI 129.5 KB
  Задача маршрутизации подбора оптимального маршрута решается на основе анализа таблиц маршрутизации размещенных во всех маршрутизаторах и конечных узлах сети. Для автоматического построения таблиц маршрутизации маршрутизаторы обмениваются информацией о топологии составной сети в соответствии со специальным служебным протоколом.
67982. Регуляция водно-солевого гомеостаза 593 KB
  Действительно ион натрия удерживая молекулы воды определяет объем и осмолярность жидкостей внутренней среды и обеспечивает целый ряд жизненноважных функций. Он усиливает в почечных канальцах реабсорбцию натрия что приводит к задержке этого иона в организме.
67984. ФОРМИРОВАНИЕ ЧУВСТВА СОТРУДНИЧЕСТВА У ДЕТЕЙ ДОШКОЛЬНОГО ВОЗРАСТА 133 KB
  Определить сущность понятий «сотрудничество» и «взаимодействие», ознакомиться с процессом развития взаимодействия и общения детей со сверстниками в современной педагогике и психологии; рассмотреть сотрудничество детей дошкольного возраста со сверстниками во время игровой деятельности...