Как сделать ссылку на html файл
Перейти к содержимому

Как сделать ссылку на html файл

  • автор:

Как сделать ссылку

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега , который имеет единственный обязательный атрибут 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 .

Ссылки в HTML

Ссылки имеют важное значение в HTML, так как веб изначально задумывался как информационная сеть документов, связанных друг с другом.

Такая часть HTML как «Гипертекст» определяет, какой вид ссылок мы используем: гипертекстовые ссылки (или гиперссылки).

В HTML ссылки — это строчные элементы, написанные с помощью тега .

Атрибут href (hypertext reference) используется для определения цели ссылки (куда вы переходите при щелчке по ней).

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

Есть три вида цели, которые вы можете определить:

  • ссылки с якорем для навигации в пределах одной страницы;
  • относительные адреса, как правило, для навигации в пределах одного сайта;
  • абсолютные адреса, как правило, для перехода на другой сайт.

Ссылки с якорем

Ссылки с якорем предназначены для навигации в пределах одной страницы. Предваряя значение атрибута href с #, вы можете настроить переход к элементу HTML с определённым атрибутом id .

Например, будет переходить к в том же HTML-документе. Такой тип href часто используется, чтобы вернуться обратно к верхней части страницы.

Относительные адреса

Если вы хотите определить ссылку на другую страницу того же сайта, вы можете использовать относительные адреса.

Но по отношению к чему? Ну, относительно текущей страницы.

Давайте используем простой пример, в котором папка my-first-website содержит два файла HTML.

В home.html вы хотите определить ссылку на contact.html. Поскольку эти два файла находятся в одной папке, вы можете просто написать в home.html:

На реальном сайте процесс аналогичен.

Скажем, у вас есть сайт с именем http://ireallylovecats.com, на котором у вас есть две веб-страницы: index.html и gallery.html:

В index.html вы могли бы написать следующую ссылку:

Помните: веб-сайты размещаются на компьютерах, таких же, что вы сейчас используете. Они просто называются «серверы», потому что их единственная цель состоит в том, чтобы хранить сайты. Но у них ещё есть файлы и папки, как на «обычных» компьютерах.

Абсолютные адреса

Если вы хотите поделиться с другом своей галереей кошек, то не можете просто отправить gallery.html, так как этот относительный адрес работает только для HTML-документов, которые находятся на том же компьютере или домене.

Вам нужен полный адрес вашего HTML-документа: http://ireallylovecats.com/gallery.html.

Этот URL может быть разбит на три части:

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

Вы обычно используете абсолютные адреса для определения ссылки со своего сайта на другой сайт.

В файле http://ireallylovecats.com/gallery.html, вы могли бы написать:

Относительные или абсолютные ссылки?

Поскольку эти два файла находятся в той же папке, вы можете использовать относительный адрес с помощью . Это полезно, если вы решите переместить папку: ваши ссылки не будут нарушены, так как цели ссылок относительны друг к другу, до тех пор, как вы перемещаете оба файла одновременно и держите их в одной папке. Этот относительный подход особенно полезен при переключении доменов.

Ссылки в HTML

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Ссылки это то, что делает Всемирную паутину такой, какой мы её знаем. Они позволяют путешествовать с одного сайта на другой, т.е. сёрфить. Ссылки, как ягодка за ягодкой при сборе земляники, манят нас, влекут за собой. и не дают уснуть вовремя ��

Ссылки бывают разные, но чаще всего встречаются такие:

  • с одного сайта на другой
  • с одной страницы на другую в рамках того же сайта
  • в пределах одной страницы — с одной её части на другую
  • ссылки, которые запускают почтовую программу и позволяют отправить письмо на определенный адрес.

как работают ссылки

Ссылка создаётся с помощью тега (от англ. Anchor, якорь). Чтобы указать адрес, куда перенаправляется пользователь, используется атрибут href . Сам адрес пишется в кавычках. Между тегами указывается текст ссылки. Желательно, чтобы он объяснял пользователю куда он перейдет, а не просто гласил типа «Жми сюда».

При клике на любое из слов, помещенных внутри элемента пользователь переходит по указанной ссылке.
По умолчанию, когда вы наводите на ссылку, указатель мыши превращается в руку с тычущим пальчиком, а цвет ссылки меняется.

Абсолютные и относительные ссылки

Давайте представим, что к вашему соседу пришел курьер и спрашивает, где найти вашу квартиру. Сосед может начать издалека: «планета Земля, материк Евразия, страна Украина, город Киев, улица Мечникова, дом 16, квартира 41». А может просто сказать «да вот его квартира, слева от меня». В первом случае сосед дал курьеру (браузеру) абсолютную ссылку, а во втором — относительную.

Абсолютные ссылки используются для перехода на другой сайт. Они соответствуют требованиям обозначения URL-адреса , т.е. содержат протокол передачи данных (например http:// ), доменное имя сайта и путь к конкретной странице сайта. Если путь не указан, то по умолчанию откроется главная страница. В примере выше указана абсолютная ссылка, ведущая на главную страницу сайта.

Относительные ссылки используются для перехода в рамках одного сайта (со страницы на страницу или с одного места в другое). Особенно это удобно, если вы только создаёте свой сайт и еще не опубликовали его. Если вы создавали свою первую веб-страницу вместе с нами, самое время создать вторую и посмотреть как работают относительные ссылки ��

Ссылка на документ в той же папке

vertex-ссылки между соседними файлами

Итак, давайте создадим в той же папке HTML_Start (это наша корневая папка) еще один html документ с любым названием, например about.html

Поскольку они соседи, то ссылка со страницы index.html может быть очень короткой и содержать просто название страницы : about.html

Стандартные ссылки

Ссылки — вот что заставляет Web двигаться!
Ссылки создаются в HTML с помощью тега . Кроме того, следует включить атрибут ссылки — href и закрывающий тег .

текст_ссылки 

Броузер не выводит на экран саму ссылку, а показывает только текст, заключенный между угловыми скобками > и (текст_ссылки).

Можно создавать ссылки не только на другие документы, но и на определенные точки внутри одной и той же страницы HTML.
Для определения места ссылки в HTML-документе необходимо создать метку (иначе — закладку или якорь).
Метка (закладка, якорь) также создается при помощи тега , но уже с другим атрибутом — name (или id).

 текст_на_экране 

Обратите внимание на атрибут id!
В последених двух стандартах XHTML и XML (которые со временем могут вытеснить HTML) — Консорциумом W3C предусмотрен новый атрибут тега — атрибут id, который должен заменить атрибут name.

Для того, чтобы не пришлось редактировать ваши Web-страницы после введения нового стандарта, уже сейчас можно использовать оба этих атрибута.

Например: The Third Rule can be found here.
Это ссылка на определенное место в документе.

А вот как это должно быть написано в вашем HTML-документе:

Здесь #Anchor — метка, на которую указывает атрибут ссылки. Символ # обязателен перед меткой. Он необходим для того, чтобы отличить метку от имени файла.

Конечно, если ваш документ помещается в окне броузера и не требует прокрутки, использовать такие ссылки бесполезно. Но если вы создали длинный (а может быть и нудный документ) — то ссылки необходимы. Хотя бы развлечете своего читателя.
А вот в случае, когда вы создаете большой (длинный) документ, который вы предваряете его содержанием, желательно использовать в таблице содержания ссылки на заголовки вашего документа.

По умолчанию, текст ссылки в HTML-документе подчеркнут и окрашен в синий цвет.
НО! Как только вы воспользуетесь этой ссылкой (прочитаете ее), «щелкнув» по ней, она изменит свой цвет на бордовый. Это подскаывает пользователю, что в этом уголке страны Интернет его «уже видели».
Разумеется, вы можете изменить эти цвета и удалить подчеркивание текста ссылки, воспользовавшись таблицами стилей.
Этот результат можно получить при помощи тега , используя атрибут для непрочитанной ссылки и — для прочитанной ссылки. Например:

Подумайте хорошенько, следует ли вам изменять стандартные значения цветов для ссылок. Пользователь — консерватор, не старайтесь запутать его!

А это в HTML-документе записано так:

  Don't be worry! 

Можно сделать ссылки на другие Web-страницы вашего собственного Web-сайта или на отдельные файлы, которые расположены на жестком диске вашего компьютера. Для этого необходимо указать путь поиска файла.

Путь поиска может быть абсолютным или относительным.
Абсолютный путь описывает местоположение файла, начиная с самого высокого уровня, и включает имена всех каталогов, ведущих к файлу.
Формат абсолютного пути для файла на жестком диске выглядит так:

Относительный путь описывает местоположение файла относительно места расположения текущего HTML-документа.
Таким образом, если вы указываете просто имя файла (например, content.htm), это означает, что вы указываете его относительный адрес. Если перед именем файла поставить (например, ..\content.htm, то броузер будет искать файл в каталоге, находящимся на один уровень выше ,чем тот, в котором находится текущий документ.

Попробуйте открыть документ, щелкнув на моей гиперссылкe .
Попробовали? Отлично! В HTML-документе это записано так:

Здесь указан относительный адрес. А теперь попробуем открыть документ, находящийся в другой папке Галерея Клода Моне.
В HTML-документе это записано так:

Здесь тоже указан относительный адрес. Чтобы создать ссылку на другую страницу, необходимо убедиться, что эта ссылка действительно создает связь с этой страницей.Для этого есть несколько методов.

Надеюсь, вы заметили, что в одном случае употрбляются «прямые » косые черты /, а в другом обратные \?

Это связано с тем, что прямые косые черты используются для разделения имен папок файлового сервера в World Wide Web.
Обратные косые черты предназначены для разделения имен папок в файловых системах ОС Windows и DOS.

Предположим, вы создаете длинный документ и разбиваете его на разделы. Каждый раздел начинается с заголовка. В этом случае вы можете вставить метку в заголовок. Например, пусть имеется заголовок:

Стандартные ссылки

Стандартные ссылки

Теперь вы можете использовать эту метку, например как это сделано на странице «Содержание».

Обратите внимание — в качестве метки используется имя файла страницы «Содержание» ref.htm, которое предваряет метку #метка_1

Не забывайте о символе # перед именем метки!

Если необходимо создать ссылку на конкретное место Web-документа, опубликованного во «всемирной паутине», в качестве метки указывается Web-адрес документа + символ # + метка конкретного места в документе. Например, если адрес документа «http://www.bath.co.uk/», то ссылка на этот документ будет выглядеть так:

В качестве ссылки может быть указан только Web-адрес документа. В этом случае ссылка делается на весь документ.
Зайдем в галерею Клода Моне во всемирной паутине?
В HTML-документе это выглядит так:

Обратите внимание на новый атрибут ссылки target !
Он используется для того, чтобы HTML-документ (в данном случае страница gallery2.htm) загрузился в тот же фрейм, из которого он вызывался. Подробно понятие фреймов и работа с ними описаны в документе Фреймы.

Можно сделать ссылку на любой электронный адрес. Для этого в код ссылки необходимо включить префикс mailto:.
Например, Напишите мне, пожалуйста, была ли понятна и полезна вам эта статья.
В HTML-документе эта ссылка выглядит так:

Таким образом, чтобы отправить сообщение по электронной почте, пользователю нет необходимости самому открывать программу электронной почты. Эта программа будет запущена автоматически, как только пользователь щелкнет по ссылке.

Графические ссылки

Структура графической ссылки имеет вид:

Например, полюбуемся цветами!

В HTML-коде это записано так:

К графической ссылке можно добавить поясняющий текст и всплывающую надпись:

А вот результат:

Разумеется графическая ссылка может быть применена для ссылки на любой HTML-документ. Например,

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

Существует возможность создания графической карты ссылок для Web-сайта (группы Web-страниц). Для этого необходимо сопоставить одному изображению сопоставить несколько ссылок, сопоставив каждую из них к какой-либо области этого изображения.
Эти области могут быть различной формы: прямоугольной, многоугольной, в виде окружности. Это очень удобный прием оформления группы ссылок.

При выборе изображения, служащего основой карты ссылок, необходимо стремиться к тому, чтобы границы областей были хорошо очерченными и не пересекались.
Используйте пояснительные тексты, для того, чтобы пользователь понял, что это карта ссылок, а не просто красивая картинка.

При наведении на область ссылки курсор мыши изменяет свою форму, как и при использовании обычных ссылок. При щелчке мыши на этой области ее границы становятся видимыми.
Графическая карта создается с помощью нескольких тегов.
Первым является тег с атрибутом name для указания имени карты. Имя карты выбирается как имя переменной. В контейнере внешних тегов и содержатся теги (область) для задания областей ссылок.
Тег имеет атрибуты, определяющие ссылку, форму и положение области ссылки.

  • href — строка, определяющая адрес ссылки
  • shape — определяет форму области; возможны значения
    • rect — прямоугольник
    • polygone — мноугольник
    • circle — круг

    После закрывающего тега следует указать тег, вставляющий графическое изображение и реализующий привязку карты к нему — тег ,подробно описанный в документе «добавление изображений»

    Кроме атрибутов, описанных раннее в этом случае в теге добавляется атрибут связи с картой:

    В качестве имени карты указывается аргумент атрибута name тега
    Рассмотрим пример:

    карта сайта

    Перед вами усеченный вариант карты ссылок этого сайта. Попробуйте подвести курсор мыши к прямоугольной или круглой области и вы увидете «всплывающее» название страницы. Щелкнув мышкой по любому из выбранных объектов вы можете перейти на интересующую вас страницу. В HTML-код это записано так:

    Здесь атрибут src тега img определяет графический элемент «map.jpg».
    Атрибут usemap ссылается на элемент карты как на Web-адрес, следовательно указывается символ #. В качестве атрибута границы border указан «0».
    В теге map указывается какие области графического элемента (карты) «работают» как гиперссылки. Атрибут name соответствует атрибуту usemap тега img и «работает» как атрибут name в теге якоря .

    Желательно, чтобы все элементы карты находились в том же файле, что и гоафический элемент, определяемый в теге img.

    Теги area используется для определения областей на карте графических ссылок, которые будут связаны с Web-адрессами. Атрибуты shape определяют типы областей, в данном случае «rect» и «circle». В этом же теге area определяются координаты объектов (различные для каждого типа объекта) с помощью атрибута coords.

    Если две или более областей на карте перекрывают друг друга, то преимущество имеет та область, описание которой появилось в HTML-документе раньше (т.е. пользователю будет предоставлена возможность использовать описание и ссылку первой появившейся в документе области.

    В некоторых случаях удобно созавать перекрывающиеся области, делая одну из них неактивной исползуя атрибут nohref, например:

    В этом случае первая окружность создает неактивную область, находящуюся в пределах большой окружности — созданной вторым тегом area. Чтобы получить ожидаемый эффект, необходимо, чтобы неактивная область была описана первой (иначе она будет скрыта активной формой).
    Посмотрим, что получится?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *