Лабораторная работа Создание ссылок в HTML Цель:
реклама
Лабораторная работа Создание ссылок в HTML Цель: изучить принципы создания ссылок в HTML-документах. Теоретические сведения HTML ссылка – это один из ключевых элементов практически любой интернет-страницы. HTML ссылки составляют основу Интернета, т.к. именно они связывают все веб-страницы в единую сеть. По сути, ссылка является указателем на фактическое местонахождение объекта. HTML-ссылка или гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки представляет собой фрагмент текста или изображение, который визуально выделяется в документе (по умолчанию, синим цветом и подчеркиванием). Адресная часть ссылки для пользователя не видна, она представляет собой URL-адрес объекта, к которому необходимо перейти. Ссылки бывают четырех видов: 1. внешние (исходящие) – ссылки, ведущие на другие сайты; 2. внутренние – ссылки, ведущие на страницы этого же сайта; 3. якорь – закладка внутри страницы, которую можно указать в качестве цели ссылки; 4. обратные (входящие) – это ссылки с других сайтов, которые ссылаются на ваш сайт. Для того, чтобы создать внешнюю ссылку или якорь, необходимо использовать контейнер <a>, который имеет следующий синтаксис: Ссылка: <a href="URL">...</a> Якорь: <a name="идентификатор">...</a> Листинг 1. Примеры использования контейнера <a> <html> <html> <head> <head> <title>Ссылка</title> <title>Якорь</title> </head> </head> <body> <body> <p> <p> <a href="vk.com">Вконтакте</a> <a name="top"></a> </p> </p> </body> <p>...</p> </html> <p> <a href="#top">Наверх</a> </p> </body> </html> Между тегами <a name="top"> и </a> текст не обязателен, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на якорь начинается с символа #, после чего идет имя якоря, которое может быть произвольным, главное, чтобы значения атрибутов name и href совпадали (символ решетки не учитывается). Якорь можно также сделать на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в атрибуте href тега <a> надо указать адрес документа и в конце добавить символ решетки # и имя закладки: <html> <head> <title>Якорь в другом документе</title> </head> <body> <p> <a href="text.html#bottom">Перейти к нижней части текста</a> </p> </body> </html> При создании внутренних ссылок также используется тег <a>, но указывать протокол «http» в атрибуте href не обязательно. Достаточно указать адрес страницы с «/»: <a href="/page.html">Страница моего сайта</a> Контейнер <a> можно использовать не только для создания ссылок на web-страницы, но и для ссылок на почту: <a href="mailto:адрес">Моя почта</a> где адрес – это e-mail, на который будет отправлено письмо после нажатия ссылки и запуска почтовой программы. Кроме обязательного атрибута href или name тег <a> имеет ряд необязательных атрибутов: 1. accesskey – активация ссылки с помощью комбинации клавиш; 2. coords – устанавливает координаты активной области; 3. download – предлагает скачать указанный по ссылке файл; 1 4. hreflang – идентифицирует язык текста по ссылке; 5. rel – отношения между ссылаемым и текущим документами; 6. rev – отношения между текущим и ссылаемым документами; 7. shape – задает форму активной области ссылки для изображений; 8. tabindex – определяет последовательность перехода между ссылками при нажатии на кнопку Tab; 9. target – имя окна или фрейма, куда браузер будет загружать документ; 10. title – добавляет всплывающую подсказку к тексту ссылки; 11. type – указывает MIME-тип документа, на который ведёт ссылка; 12. hidden – скрывает содержимое элемента от просмотра; 13. style – применяется для определения стиля элемента с помощью правил CSS. Примеры использования атрибутов: HTML-код <a href="http://site.com" target = "_blank">Сайт</a> <a href="http://site.com" rel="nofollow">Сайт</a> <a href="http://site.com" style="color:red;">Сайт</a> <a href="http://site.com" style="textdecoration:none;">Сайт</a> Пояснение Новая страница откроется в новой вкладке браузера Поисковые системы не будут учитывать данную ссылку Ссылка будет отображаться красным цветов Ссылка не будет подчеркиваться Ссылки используются не только для того, чтобы ссылаться на внешние сайты или внутренние страницы того же сайта. Их можно использовать и для файлов, которые расположены на вашем сервере. Это может понадобиться, если вы предоставляете пользователям возможность скачивать файлы различного формата: mp3, rar, zip, docx, xls и т.д. При этом использование ссылок в данном случае совершенно стандартно и практически аналогично тому, как если бы вы ссылались на внутреннюю страницу вашего сайта. Разница лишь в расширении файла, на который указывает ссылка: <a href="/files/myfile.xls">xls</a> Эта ссылка ведет на xls-документ, который расположен в папке сайта «files». При нажатии на эту ссылку откроется окно для скачивания. Практическая часть Задание 1. Добавьте на свою web-страницу внешнюю ссылку, якорь и ссылку на почту. Задание 2. Измените внешний вид созданных ссылок. Содержание отчета Изучить теоретическую часть. Выполнить задания практической части. Ответить на контрольные вопросы. Контрольные вопросы 1. 2. 3. 4. Внешняя ссылка. Внутренняя ссылка. Якорь. Синтаксис тега <a>. 2
