Лабораторная работа №3
Тема: Гиперссылки на Web-странице
Имеются много структурных элементов в HTML типа таблиц, списков и условий для графических изображений и других ресурсов, но наиболее важным и специфичным является Гиперссылка (Hyperlink) или связь.
Примечание: Гиперссылка или Связь - ссылка в Web-cтранице, которая относит к другой Web-странице или некоторому другому вида ресурса. Когда Вы щелкаете на связь, Вы переходите к тому, что описывает связь.
1. В общем виде связь в формате HTML выглядит следующим образом:
2. <A href = "адресат" > интересуемое место </A>
3. Браузер покажет эту связь как интересуемое место и если Вы щелкните по этому словосочетанию (в окне браузера), окно браузера разместит и загрузит информацию, описанную "адресатом". В созданной связи впечатанный текст между тэгами <A> и </A> сообщают устройству считывания, чем является связь, а часть связи href = "адресат" сообщает браузеру, где искать ресурс.
4. Связи - путь, которым осуществляется навигация в Internet сети. Связь может содержать ссылку на другую из ваших собственных страниц:
- В вашу папку, где находится файл WEB.htm поместите файлы COMMENT.htm и up.gif ;
- откройте браузером Internet Explorer ( IE ) ваш файл WEB.htm;
- щелкните мышкой в браузере по меню Вид и затем по опции В виде HTML;
- ваш файл должен отобразиться редактором Блокнот в формате HTML;
- в новой строке вставьте тэг
<A href = "COMMENT.htm" > Щелкните здесь, чтобы прочитать новую страницу </A>
- сохраните введенные изменения в файле (в меню редактора Файл Сохранить);
- перейдите в поле браузера IE и щелкните по кнопке Обновить;
- в появившейся Web-странице щелкните мышкой по ссылке
Щелкните здесь, чтобы прочитать новую страницу
Откроется WEB страничка, описанная в файле COMMENT.htm
5. Откройте файл COMMENT.htm редактором Блокнот и продолжите работу по созданию гиперссылок внутри Web-страницы. При этом связь может указывать на другую закладку, расположенную на той же самой Web-странице.
6. Между первой и второй таблицами вставьте тэги и текст как показано ниже
<A href ="#2h1"> Щелкните здесь, чтобы перейти на пункт 2 </A>
<A href ="#3h1"> Щелкните здесь, чтобы перейти на пункт 3</A>
<A href ="#4h1"> Щелкните здесь, чтобы перейти на пункт 4 </A>
В другом месте на этой странице должно быть имя, к которому эта закладка обращается, и к которому переместился бы браузер.
Это будут номера пунктовИх нужно разместить внутри нижеприведенного тэга соответственно, а именно:
- <A name= "2h1" > 2) </A>
- <A name= "3h1" > 3) </A>
- <A name= "4h1" > 4) </A>
7. Сохраните изменения в файле, просмотрите браузером результат. Для наглядности просмотра сделайте картинку WEB странице в 1/3 ширины экрана. Щелкните мышкой по тексту Щелкните здесь, чтобы перейти на пункт 4 Поле экрана должно отобразить часть текста под номером 4.
8. Вы можете обратиться со страницы к внешним Web ресурсам:
- вставьте в конце тела документа тэг
<A Href ="http://10.242.48.45/divt/"> Щелкните здесь, чтобы посетить СЕРВЕР </A>
Сохраните изменения в файле, просмотрите браузером результат.
8. Вы можете даже использовать графическое изображение как область для гипертекстовой ссылки:
- вставьте уже знакомые тэги
<A name="5h1">1</A><br>
в начало документа после тэга <BODY>
- после каждого набора тэгов в виде
<dd><P ALIGN="JUSTIFY"> начиная со второго абзаца вставьте набор тэгов
<A href="#5h1"><IMG SRC="up. GIF"></A>
В этом примере, видимая часть отметки гиперссылки является изображением стрелочки вместо текста. Когда пользователь щелкает по изображению стрелочки, представленной графическим файлом ="up.GIF", просмотрщик переходит к расположению Web, идентифицированному как <A name="5h1">1</A> , т. е. в начало страницы на символ 1.
Сохраните изменения в файле, просмотрите браузером результат.
Предъявите результат преподавателю!
Проекты по теме:
Основные порталы (построено редакторами)