49053

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

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

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

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

Русский

2017-10-17

65.5 KB

11 чел.

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

Замечание

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


 

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

25679. центральный орган лимфо. 45.5 KB
  Из костномозговых предшественников Тлимфоцитов в нем происходит антигеннезависимая дифференцировка их в Тлимфоциты разновидности которых осуществляют реакции клеточного иммунитета и регулируют реакции гуморального иммунитета. Удаление тимуса тимэктомия у новорожденных животных вызывает резкое угнетение пролиферации лимфоцитов во всех лимфатических узелках кроветворных органов исчезновение малых лимфоцитов из крови резкое уменьшение количества лейкоцитов и другие характерные признаки атрофия органов кровоизлияния и пр. На 1112...
25680. Ткань 34 KB
  Эпителиальная ткань образует кожные покровы и выстилает изнутри полые внутренние органы выполняя защитную функцию функцию обмена веществ между организмом и внешней средой. Соединительная ткань состоит из клеток и неклеточного вещества с преобладанием последнего. В эту группу входят: собственно соединительная ткань костная жировая а также хрящ сухожилия связки кровь и лимфа. Хрящ состоит из разнообразных плотных волокон и клеток вместе с костной тканью придает прочность позвоночнику и другим частям скелета.
25681. Толстая кишка 38.5 KB
  Одной из функций толстой кишки является выделительная. Через слизистую оболочку этой кишки выделяется ряд веществ например кальций магний фосфаты соли тяжелых металлов и т. Эпителий ободочной кишки и тазовой части прямой кишки развивается из энтодермы. В кожной и промежуточной зонах анальной части прямой кишки эпителий имеет эктодермальное происхождение.
25682. Тонкая кишка 57.5 KB
  Клетки кишечного эпителия у 4недельного эмбриона не дифференцированы и характеризуются высокой пролиферативной активностью. В это время среди эндокриноцитов преобладают переходные клетки с недифференцированными гранулами выявляются ЕСклетки Gклетки и Sклетки. В плодном периоде преобладают ЕСклетки большинство из которых не сообщается с просветом крипт закрытый тип; в более позднем плодном периоде появляется открытый тип клеток. Крипты содержат камбиальные элементы эпителия и дифференцирующиеся из них клетки.
25683. солевом обмене веществ. 44.5 KB
  Кроме того эти ткани принимают участие в водносолевом обмене веществ. Хрящевые ткани входят в состав органов дыхательной системы суставов межпозвоночных дисков и др. В свежей хрящевой ткани содержится около 7080 воды 1015 органических веществ и 47 солей.
25684. Эмбриогенез 239.5 KB
  Вместе с тем появляются особенности отличающие развитие человека от развития других представителей позвоночных. Процесс внутриутробного развития зародыша человека продолжается в среднем 280сут 10 лунных месяцев. Эмбриональное развитие человека принято делить на 3 периода: начальный 1я неделя зародышевый 2 8я неделя плодный с 9й недели развития до рождения ребенка.
25685. Эпителиальные ткани. Поверхностные эпителии 36 KB
  Питание эпителиоцитов осуществляется диффузно через базальную мембрану со стороны подлежащей соединительной ткани с которой эпителий находится в тесном взаимодействии. В соответствии с формой клеток составляющих однослойный эпителий последние подразделяются на плоские сквамозные кубические и призматические столбчатые. 1Однослойный эпителий может быть однорядным и многорядным. Такой эпителий называют еще изоморфным.
25686. Яички 60 KB
  В постнатальном периоде в семенных канальцах гоноциты размножаются а эпителий половых шнуров сохраняется в качестве поддерживающих клеток. Базальный слой внутренний волокнистый слой расположенный между двумя базальными мембранами сперматогенного эпителия и миоидных клеток состоит из сети коллагеновых волокон. Непосредственно к миоидному слою примыкает неклеточный слой образованный базальной мембраной миоидных клеток и коллагеновыми волокнами. За ними расположен слой состоящий из фибробластоподобных клеток прилежащий к базальной...
25687. Яичники 58.5 KB
  Около половины овогоний с 3го месяца развития начинает дифференцироваться в овоцит первого порядка период малого роста находящийся в профазе мейоза. К моменту рождения число овогоний прогрессивно уменьшается и составляет около 45 большая часть клеток подвергается атрезии основные клетки представляют собой вступившие в период роста овоциты 1го порядка. 2 стадия период роста протекает в функционирующем яичнике и состоит в превращении овоцита 1го порядка первичного фолликула в овоцит 1го порядка в зрелом фолликуле. 3 стадия ...