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-документов, сведенные в таблицу:

Замечание

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


 

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

50703. Определение коэффициента теплопроводности воздуха 68.5 KB
  Цель работы: Изучение явления теплопроводности в газах и определение коэффициента теплопроводности воздуха. Приборы и принадлежности: установка для измерения теплопроводности воздуха.09 Теория даёт следующую связь между напряжением на проводнике и силой тока в цепи: 1 АВ постоянные определяемые параметрами установки коэффициент теплопроводности воздуха Введя переменные ...
50704. Определение коэффициента вязкости жидкости 101 KB
  Цель работы: Определить коэффициент вязкости жидкости по истечению его через капилляр. Приборы и принадлежности: установка для измерения коэффициента вязкости жидкости. Ход работы: № Qмл мм с 1 200 160 52 2 200 180 81 3 200 240 355 4 200 150 542 5 200 188 442 Найдём значения и : Находим коэффициент вязкости: Определяем среднюю скорость: Проверка Определим число Рейнольда: Определим...
50706. Определение фокусных расстояний собирающей и рассеивающей линз и основных характеристик оптических систем, составленных из этих линз 70 KB
  Цель работы: Определение фокусных расстояний собирающей и рассеивающей линз и основных характеристик оптических систем составленных из этих линз. Приборы и принадлежности: источник света со щелью в виде стрелки; экран; рейтер и масштабная линейка; набор линз две собирающих и одна рассеивающая; два штатива для установки линз. Ход работы: С помощью метода Бесселя рассчитать фокусные расстояния и оптические силы двух собирающих линз и одной рассеивающей.После этого измеряем расстояние от источника до линзыd1 и...
50707. Изучение распределения случайных величин Гаусса и двумерного распределения Максвелла на механической модели 113 KB
  Цель работы: изучение законов нормального распределения случайных величин и двумерного распределения Максвелла. Вывод: в данной работе мы получили экспериментальные и теоретические графики распределения случайных величин которые качественным образом показывают распределение скоростей молекул идеального газа.
50708. Определение коэффициента поверхностного натяжения по высоте подъёма жидкости в капиллярных трубках 25 KB
  Тема: Определение коэффициента поверхностного натяжения по высоте подъёма жидкости в капиллярных трубках. Цель работы: определить коэффициента поверхностного натяжения. Вывод: В этой работе мы с помощью четырёх капиллярных трубок нашли два значения коэффициента поверхностного натяжения 1 = 745  178103 Н м и 2 = 644  218103 Н м.
50709. Исследование напряженного состояния тонкостенной цилиндрической оболочки 282 KB
  В таких оболочках действуют кольцевые в первом главном сечении и меридиональные напряжения во втором главном сечении которые могут определиться через внутренние силы и моменты: ; 1 где S меридиональные силы; Т кольцевые силы; толщина стенки; Z координата точки в которой определяем напряжение; Z изменяется от до . Из формулы 1 следует что напряжения распределены по толщине стенки по линейному закону достигая наибольших значений на внутренней или нагруженной поверхностях опор ; 2 В этих формулах если...
50710. ПОКУДОВА ДОБОВИХ ГРАФІКІВ НАВАНТАЖЕННЯ ЗА ДАНИМИ ОБСТЕЖЕННЯ ГРУПИ КОМУНАЛЬНО-ПОБУТОВИХ ЕЛЕКТРОПРИЙМАЧІВ ТА ВИЗНАЧЕННЯ РОЗРАХУНКОВОГО МАКСИМАЛЬНОГО НАВАНТАЖЕННЯ І ОСНОВНИХ ХАРАКТЕРИСТИК ГРАФІКА 191 KB
  Натурний експеримент Мета роботи. Побудова добового графіку навантаження комунально-побутового споживача житлового будинку квартири тощо на основі обстеження його електроприймачів та обчислення розрахункового максимального навантаження і основних числових характеристик графіка. ТЕОРЕТИЧНІ ВІДОМОСТІ Електричне навантаження є основним...