Ссылки
Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Особенность их состоит в том, что сама ссылка может вести не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте. Главное, чтобы к документу, на который делается ссылка, был доступ. Иными словами, если путь к файлу можно указать в адресной строке браузера, и файл при этом будет открыт, то на него можно сделать ссылку.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега . Общий синтаксис создания ссылок следующий.
Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти, а содержимое контейнера является ссылкой. Текст, расположенный между тегами и , по умолчанию становится синего цвета и подчеркивается. В примере 8.1 показано создание нескольких ссылок на разные веб-страницы.
Пример 8.1. Добавление ссылок
Ссылки на странице Собаки
Кошки
В данном примере создаются две ссылки с разными текстами. При щелчке по тексту «Собаки» в окне браузера откроется документ dog.html, а при щелчке на «Кошки» — файл cat.html.
Результат примера показан на рис. 8.1. Обратите внимание, что при наведении курсора мыши на ссылку, в строке состояния браузера отображается полный путь к ссылаемому файлу.
Рис. 8.1. Вид ссылок на странице
Если указана ссылка на файл, которого не существует, например, его имя в атрибуте href набрано с ошибкой, то такая ссылка называется битая . Битых ссылок следует категорически избегать, поскольку они вводят посетителей сайта в заблуждение. Так, при щелчке по ссылке из примера 8.1 в браузере Safari откроется не сам документ, а окно с предупреждением (рис. 8.2).
Рис. 8.2. Результат при открытии битой ссылки
Естественно, подобное сообщение будет различаться в браузерах, но смысл остается один — документ, на который ведет ссылка, не может быть открыт. Чтобы не возникало подобных ошибок, тестируйте все ссылки на их работоспособность и сразу же устраняйте имеющиеся погрешности.
Файл по ссылке открывается в окне браузера только в тех случаях, когда браузер знает тип документа. Но поскольку ссылку можно сделать на файл любого типа, то браузер не всегда может отобразить документ. При этом выводится сообщение, как следует обработать файл — открыть его или сохранить в указанную папку. Например, в браузере Firefox выводится следующее окно (рис. 8.3).
Рис. 8.3. Окно для выбора действия с файлом в Firefox
HTML ссылки — гиперссылки, ссылка на сайт
В этом уроке мы подробно рассмотрим, как связать между собой отдельные страницы.
- HTML ссылки связывают между собой миллиарды web-страниц и миллионы сайтов.
- HTML ссылки определяются тегами .
- HTML ссылки могут быть любого размера и цвета – свойства определяются с помощью CSS.
- HTML ссылка может быть текстовой или изображением.
Навигация по странице
- HTML ссылка на другую страницу сайта
- HTML ссылка на сайт
- HTML ссылки внутри страницы сайта
- HTML изображение-ссылка
HTML ссылка на другую страницу сайта
- Используя полученные знания, сделайте в Блокноте наброски будущей страницы ⇒ сохраните ее под произвольным именем, например, как page2.html в папке D\My_first_site .
- В другом документе, опять же в Блокноте, пропишите:
- Сохраните его как index.html . В итоге, папка D\My_first_site содержит файлы: index.html и page2.html .
- Откройте в браузере файл index.html ⇒ нажмите на ссылку.
HTML ссылка на сайт
Атрибуты и значения
- href=»» – обязательный атрибут тега , указывает адрес ссылки.
- target=»_blank» – откроет ссылку в новом окне браузера:
- target=»_self» – откроет ссылку в том же окне. Значение _self определено по умолчанию, поэтому его можно не указывать.
- title=»комментарий» – всплывающий комментарий – заголовок ссылки:
HTML ссылка может быть окрашена в любой цвет, что подробно рассматривается в курсе по CSS.
HTML ссылки внутри документа
Буквы-ссылки в главе HTML теги осуществляют переход в пределах одной интернет-страницы.
Как это реализовано:
Имеем 2-е буквы D. Первая выступает в роле HTML ссылки, а вторая – в роли элемента на который ссылаемся. Второй присваиваем идентификатор со значением:
D |
Код ссылки на букву с идентификатором:
HTML изображение-ссылка
Следующее изображение является ссылкой наверх страницы:
border=»0″ – отменяет границу у изображения-ссылки.
Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
HTML верстка сайта 
HTML ссылка на сайт 
HTML изображение-карта
© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Создание ссылки в HTML? – Не вопрос!
Работа со ссылками в HTML
Сейчас мы будем разбираться со . Ссылки являются теми элементами, которые делают из интернета интернет. Нажимая на ссылки, мы можем переходить с одной страницы сайта на другую. Если бы их не было — интернет был бы просто набором страниц, никак не связанных друг с другом.
Давайте для примера сделаем ссылку на гугл. Для этого нужно открыть этот сайт в браузере, скопировать адрес страницы из адресной строки и вставить в атрибут href ссылки:
Сделайте на вашей странице ссылку на сайт code.mu, ссылку на яндекс и ссылку на ютуб.
Как сделать ссылку
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега , который имеет единственный обязательный атрибут href . В качестве значения используется адрес документа (URL).
Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные ссылки начинаются с ключевого слова http:// (пример 1).
Пример 1. Использование абсолютных ссылок
Абсолютная ссылка Поисковая система Яндекс
Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса.
Примеры относительных адресов
/
/demo/ Эти две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге.
/images/pic.gif Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.
../help/me.html Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта.
manual/info.html Если перед именем папки нет никаких дополнительных символов, вроде точек, то она размещена внутри текущего каталога (пример 2).
Пример 2. Использование относительных ссылок
Относительная ссылка Посмотрите на мою фотографию!
Как сделать такое же фото?
Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html . Точка со слэшем (символ /) означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html .