Лабораторная работа №2 Тема: Создание гипертекстовых ссылок
Цель работы: Освоение навыков создания гипертекстовых ссылок с помощью тега A, который имеет единственный параметр href. Изучение абсолютных и относительных ссылок.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега A, который имеет единственный параметр href. В качестве значения используется адрес документа (URL).
Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка.
Пример 1. Использование абсолютных ссылок
<html>
<body>
<a href=www.yandex.ru>Поисковая система Яндекс</a>
</body>
</html>
1. Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса. Примеры таких адресов:
/
/demo/
/images/pic.gif
4. ../help/me.html
5. manual/info.html
2. Первые две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html) находящемуся в корне сайта (пример 1) или папке demo (пример 2). Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Слэш перед адресом говорит о том, что адресация начинается от корня сайта, двоеточие - перейти на уровень выше в списке каталогов сайта.
Пример 2. Использование относительных ссылок
<html>
<body>
<a href=images/xxx.jpg>Посмотрите на мою фотографию !</a><br> <a href=tip.html>Как сделать такое же фото?</a> </body> </html>
3. Ссылки внутри страницы
Большие документы читаются лучше, если они имеют оглавление со ссылками на соответствующие разделы. Для создания ссылки следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи параметра name тега А.
Пример 3. Создание внутренней ссылки
<html>
<body>
<a name=top></a> Друг уронил утюг в унитаз. И разбил его. Причем так разбил, что по назначению унитаз и использовать никак нельзя. Мгновением назад только что вот все было хорошо и вот уже дыра, да такая, что можно забыть, что есть такой предмет в доме. Махнул рукой нечаянно, а потом мучайся...
<a href=#top>Наверх</a>
</body>
</html>
4. Между тегами <a name=top> и </a> отсутствует текст, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на закладку начинается символом # , после чего идет название закладки. Название выбирается любое, соответствующее тематике.
5. Можно, также, делать ссылку на закладку, находящуюся в другой вебстранице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки.
Пример 4. Ссылка на закладку из другой веб-страницы
<html>
<body>
<a href=text.html#bottom>Перейти к нижней части текста</а>
</body>
</html>
- Лабораторная работа №1 Тема: Текстовое оформление страниц
- Лабораторная работа №2 Тема: Создание гипертекстовых ссылок
- 5. Ссылка на новое окно
- Лабораторная работа №3 Тема: Создание списков. Нумерованные списки
- Лабораторная работа № 4 Тема: Создание таблиц
- Лабораторная работа №5 Тема: Создание фреймов
- Лабораторная работа № 6 Тема: Создание Web-сайтов средствами ms Office.
- Разработка Web-сайта средствами ms Word.
- Разработка Web-сайта средствами ms Excel
- Создание Web-страниц средствами PowerPoint
- Лабораторная работа № 7 Тема: Создание web-страницы
- Лабораторная работа №8 Тема: Использование Microsoft FrontPage для редактирования web-узла
- Лабораторная работа № 9 Тема: Регистрация web-сайта, его публикация в сети Интернет, регистрация в поисковых системах