9634

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

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

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

Тема работы: Создание гиперссылок в HTML-документе. Цель работы: Научиться формировать гиперссылки на смежные документы Internet и на метки в текущем документе. Теоретическая часть: Важнейшим свойством языка HTML является возможность размещения на с...

Русский

2013-03-14

42 KB

48 чел.

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

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

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

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

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

Ссылки в пределах одного документа
Такие ссылки требуют наличие двух частей: метки и самой ссылки. Метка определяет точку, к которой происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяются цветом или подчеркиванием, в зависимости от того, как настроен броузер.

Ссылка должна выглядеть примерно так:
<A HREF="#ПН">Понедельник</A> 

Перед именем метки ПН, указывающей куда производится ссылка, ставится символ #. Между символами > и < располагается текст Понедельник, на котором производится щелчок для перехода по ссылке.

Метка должна выглядеть примерно так:
<A NAME="ПН">Понедельник</A> 

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

Ссылка должна выглядеть примерно так:
<A HREF="example.html">Пример</A> 

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

Ход работы: 

Создание ссылок в пределах одного документа. 

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

<TABLE WIDTH=100%>

<TR>

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

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

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

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

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

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

</TR>

</TABLE>

<BR>

  1.  Определите для слова Суббота в расписании метку:

<A NAME="СБ">Суббота</A>

  1.  Определите ссылку для выбранной метки:

...

<TABLE WIDTH=100%>

<TR>

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

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

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

...

<TD><A HREF="#СБ">Суббота</A></TD>

...

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

Создание ссылок на другой 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, schedule_tuesday.html, ... schedule_sunday.html из лабораторной работы N4.
  2.  Определите для слова Понедельник ссылку на внешний документ:

<A HREF="schedule_monday.html">Понедельник</A>

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

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

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

<CENTER>

<A HREF="yoga.html"><IMG SRC="yoga.gif"></A>

</CENTER>

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

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

Элемент 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.  Сохраните графический файл week.jpg в ту же папку, что и файл my_schedule.html.
  2.  В начало файла my_schedule.html вставьте следующий код:

<map name="schedule_map">

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

<area аlt="Пятница" shape="rect" coords="2, 118, 312, 148" href="schedule_friday.html">

</map>

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

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


 

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

76443. Отмена усыновления ребенка 15.27 KB
  Однако могут быть и другие ситуации например не сложились семейные родственные отношения усыновителя и ребенка или тяжелая болезнь усыновителя и т. Во всех случаях суд тщательно изучает все обстоятельства конкретного дела и вправе отменить усыновление ребенка исходя из его интересов и с учетом его мнения п. Порядок отмены усыновления Отмена усыновления ребенка производится в судебном порядке п.
76444. Правовые последствия отмены усыновления 13.52 KB
  При отсутствии родителей а также если передача ребенка родителям противоречит его интересам ребенок передается на попечение органа опеки и попечительства. Изменение имени отчества или фамилии ребенка достигшего возраста десяти лет возможно только с его согласия. Суд исходя из интересов ребенка вправе обязать бывшего усыновителя выплачивать средства на содержание ребенка.
76445. Опека и попечительства как форма семейного воспитания детей 16.24 KB
  Опекун попечитель назначается органом опеки и попечительства №48ФЗ от 24. В соответствии с Семейным и Гражданским кодексами РФ дети находящиеся под опекой попечительством имеют право на: воспитание в семье опекуна попечителя заботу с их стороны; совместное с ним проживание исключения допускаются с разрешения органа опеки и попечительства когда подопечный достиг возраста 16 лет и раздельное проживание не отразится неблагоприятно на его воспитании и защите прав и интересов; обеспечение условий для содержания воспитания...
76446. Права и обязанности опекунов и попечителей 27.96 KB
  Проживание будущего опекуна или попечителя и его потенциального подопечного по разным адресам может породить проблему выбора места установления опеки и попечительства. При этом в отдельных случаях при наличии заслуживающих внимания обстоятельств допускается установление опеки попечительства по месту проживания кандидата в опекуны и попечители например если он уже привез к себе нуждающегося в помощи гражданина либо не имеет возможности долго находиться в доме будущего подопечного. Но потом личное дело подопечного где хранится вся...
76447. Прекращение опеки и попечительства 15.01 KB
  Прекращение опеки и попечительства связаны с несколькими факторами. Не требует особого решения и прекращение попечительства при достижении подопечным 18ти лет п. Так же основаниями для прекращения попечительства над несовершеннолетними гражданами являются: эмансипация приобретение несовершеннолетним полной дееспособности до достижения им восемнадцатилетнего возраста; вступление в брак несовершеннолетним.
76448. Приемная семья (понятие, значение, приемные дети и приемные родители) 16.33 KB
  Приемная семья дает возможность максимально приблизить воспитание детейсирот и детей оставшихся без попечения родителей к реальной жизни. Она формирует у детей навыки преодоления трудных жизненных ситуаций психологическую защиту и правильное поведение при стрессах а также моральноэтическую установку на создание собственной стабильной семьи что важно и для некоторых взрослых граждан прежде всего для тех кто видит в воспитании детей свое призвание кто небезразличен к судьбе обездоленных детей и считает что у него хватит сил умения и...
76449. Договор о приемной семье 14.61 KB
  152 Семейного кодекса РФ приемной семьей признается опека или попечительство над ребенком которые осуществляются по договору о приемной семье заключаемому между органом опеки и попечительства и приемными родителемями. Так как к отношениям возникающим из договора о приемной семье применяются положения Главы 20 Семейного кодекса РФ об опеке ниже под опекуном попечителем подразумевается и приемныйе родительи. Договор о приемной семье заключается в соответствии с Правилами заключения договора об осуществлении опеки или попечительства...
76450. Основания и последствия прекращения договора приемной семье 14.86 KB
  Прекращение договора о приемной семье. При необходимости срок действия договора может быть продлен по соглашению сторон. Основанием прекращения может быть и неисполнение или ненадлежащее исполнение договора одной из сторон.
76451. Патронатная семья 24.61 KB
  Необходимо отметить, что патронатное воспитание существует ТОЛЬКО при наличии службы, профессионально занимающейся патронатным воспитанием и имеющей «качество» уполномоченной организации органа опеки и попечительства, на которую органом опеки и попечительства возложена работа по патронату.