49053

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

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

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

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

Русский

2017-10-17

65.5 KB

5 чел.

ЛАБОРАТОРНАЯ РАБОТА №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-документов, сведенные в таблицу:

Замечание

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


 

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

9730. Договор в пользу третьего лица 23.5 KB
  Договор в пользу третьего лица. Договором в пользу третьего лица признается договор, в котором стороны установили, что должник обязан произвести исполнение не кредитору, а указанному или не указанному в договоре третьему лицу, имеющему право требова...
9731. Договор комиссии 32 KB
  Договор комиссии. По договору комиссии одна сторона (комиссионер) обязуется по поручению другой стороны (комитента) за вознаграждение совершить одну или несколько сделок от своего имени, но за счет комитента. По сделке, совершенной комиссионером с т...
9732. Договор контрактации. Доклад 31.5 KB
  Договор контрактации. По договору контрактации производитель сельскохозяйственной продукции обязуется передать выращенную (произведенную) им сельскохозяйственную продукцию заготовителю - лицу, осуществляющему закупки такой продукции для переработки ...
9733. Договор купли-продажи: понятие, элементы, содержание 29.5 KB
  Договор купли-продажи: понятие, элементы, содержание. По договору купли-продажи одна сторона (продавец) обязуется передать вещь (товар) в собственность другой стороне (покупателю), а покупатель обязуется принять этот товар и уплатить за него определ...
9734. Договор мены. Доклад 28.5 KB
  Договор мены. По договору мены каждая из сторон обязуется передать в собственность другой стороны один товар в обмен на другой. К договору мены применяются соответственно правила о купле-продаже, если это не противоречит существу мены. При этом кажд...
9735. Договор поставки товаров 35.5 KB
  Договор поставки товаров. По договору поставки поставщик-продавец, осуществляющий предпринимательскую деятельность, обязуется передать в обусловленный срок или сроки производимые или закупаемые им товары покупателю для использования в предпринимател...
9736. Договор присоединения 24.5 KB
  Договор присоединения. Договором присоединения признается договор, условия которого определены одной из сторон в формулярах или иных стандартных формах и могли быть приняты другой стороной не иначе как путем присоединения к предложенному договору в ...
9737. Договор розничной купли-продажи. Доклад 34.5 KB
  Договор розничной купли-продажи. По договору розничной купли-продажи продавец, осуществляющий предпринимательскую деятельность по продаже товаров в розницу, обязуется передать покупателю товар, предназначенный для личного, семейного, домашнего или и...
9738. Значение подписи и печати в договоре 39.5 KB
  Значение подписи и печати в договоре. Для придания юридической силы любому документу, в частности договору, необходима подпись лица, которое составило данный документ. Подпись - это реквизит документа (в том числе договора), представляющий собой соб...