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

Замечание

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


 

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

51581. Властивості степеня з натуральним показником 48.5 KB
  Тип уроку: урок засвоєння нових знань формування вмінь і навичок інтерактивний урок Інтерактивні технології: вирішення проблеми займи позицію оцінювальна дискусія Обладнання: підручники збірники задач таблиці інтерактивна дошка диференційовані завдання роздатковий матеріал завдання на картках контрольні запитання Зміст урок Організаційний момент. Перевірка домашнього...
51583. Сценарій до дня учителя 119.5 KB
  Ведучий 2: Ми сьогодні від імені юності ношею щасливою. Від імені нашого дитинства дзвінкого Всі разом говоримо вам спасибі Спасибі Спасибі Ведучий 1: Добрий день Ведучий 2: Здравствуйте Ведучий 1: Сьогодні ми зібралися щоб привітати наших вчителів з їх професійним святом Днем Вчителя Ведучий 2: Свято Дня вчителя у нашій країні відзначається у першу неділю жовтня. Ведучий 1: Строгим і ласкавим Мудрим і чуйним Тим у кого сивина на скронях Тим хто недавно зі стін інститутських Тим хто повідав нам таємниці відкриттів Вчить в...
51584. Импульсные регуляторы напряжения 2.31 MB
  Такие регуляторы используют для питания нагрузок постоянным напряжением, величина которого отличается от напряжения источника питания. Как нагрузки могут использоваться обмотки возбуждения электрических машин, электромагнитные механизмы, двигатели постоянного тока. Кроме того, импульсные регуляторы (стабилизаторы) широко применяются в источниках вторичного электропитания.
51585. Матеріально технічне забезпечення сервісно-виробничого процесу 90 KB
  У залах обладнання розміщають відповідно до напрямків руху потоків відвідувачів і обслуговуючого персоналу, а також потоків чистого й використаного посуду. Ширина проходів у залах визначається відстанню між спинками стільців, вільними сторонами столів або між спинками стільців і вільними сторонами (кутами) столів
51587. Рідна мова 24.5 KB
  Перше речення було просте але присудок у нього є не дієслово а іменник виражений в значенні дієслова. А ось друге речення стало для дітей важким. Тому що речення було із зверненням . Мабуть ми вчителі мало уваги звертаємо на такі речення.
51588. Розвивальні ігри. Принцип розвязання протиріччя 55 KB
  Пригадайте чим ми займалися на минулому занятті Що ми збудували Чарівну країну А хто є господаркою цієї країни Королева Пригадайте її імя Фантазія А яке завдання загадала вам Королева Фантазія Діти розповідають що вони подарують своєму другові або показують свої малюнки створених за допомогою геометричних фігур. Було в неї багато помічників: це і діти які вміють фантазувати і казкові герої які люблять творити чудеса. Відгадайте хто завжди говорить: Діти давайте жити дружноâ Кіт Леопольд І завітав герой...