Ссылка на сайт html: Тег HTML — ссылка, гиперссылка

Абсолютные и относительные ссылки. Шпаргалка — Блог HTML Academy

Это короткая шпаргалка о том, как правильно ставить ссылки и не теряться в адресах.

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

Абсолютная ссылка — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.

Например:

https://htmlacademy.ru

https://htmlacademy.ru/blog/boost/tools/chrome-devtools-2

Не забывайте — если вы используете абсолютные ссылки на сайте, то при смене структуры папок или перемещении файлов большинство ссылок могут сломаться.

Относительные ссылки

То, куда ведут относительные ссылки, зависит от расположения текущей страницы. Посмотрим на примере:

Предположим, мы загрузили страницу по такому адресу:

https://htmlacademy.ru/blog/frontend/html/index.html

Во всех примерах ниже приведены относительная ссылка и полный путь, в который браузер расшифровывает ссылку.

Ссылка на файл в той же папке

1. html

https://htmlacademy.ru/blog/frontend/html/1.html

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

Ссылка на файл в папке ниже текущей

directory/3.html

https://htmlacademy.ru/blog/frontend/html/directory/3.html

Файл в дочерней папке относительно текущей. Перед именем файла через / пишем название папки.

dir1/dir2/5.html

https://htmlacademy.ru/blog/frontend/html/dir1/dir2/5.html 

Страница находится на две папки ниже текущей.

Ссылка относительно корня сайта

/2.html 

https://htmlacademy.ru/2.html

Файл расположен в корневой папке сайта. Для ссылки относительно корня используется /. Такая ссылка сработает только на веб-сервере — с локальными файлами на компьютере это не сработает.

/dir1/dir2/4.png

https://htmlacademy.ru/dir1/dir2/4.png

Файл на два уровня ниже корня сайта.

Ссылка на папку выше текущей

../6.html

https://htmlacademy.ru/blog/frontend/6.html

На одну папку «вверх» относительно текущей. Для «подъёма» используется синтаксис ../.

../../7.html

https://htmlacademy.ru/blog/7.html

На две папки вверх. Синтаксис ../ может повторяться сколько угодно раз, главное, чтобы все папки «по пути» существовали.

Комбинированная ссылка

../../../dir1/dir2/8.html

https://htmlacademy.ru/dir1/dir2/8.html

На три папки вверх и на две папки вниз относительно текущей — поднялись до корня и последовательно спустились в папки dir1 и dir2.

Все приведённые примеры одной картинкой:

ID-ссылки (якорные ссылки)

Якорные ссылки пригодятся, если нужно сослаться на определенное место документа — например, на заголовок. Для этого заголовку нужно установить определенный атрибут id, а в ссылке через # дописать этот атрибут в конце.

Размечаем заголовок:

<article>Содержание первой главы</article>

Ставим якорную ссылку на той же странице:

<a href="#part1">Глава 1</a>

Ставим якорную ссылку на другую страницу:

<a href="/index.html#part1">Глава 1</a>

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

Что будет, если ошибиться

Файл, на который вы ссылаетесь, не загрузится — появится ошибка 404. Если так случилось, можно посмотреть через Chrome DevTools, что с адресом.

Ещё можно по незнанию поставить ссылку на файл на своём компьютере, а потом удивляться, почему не грузятся картинки. Такое в 1998 произошло на сайте Microsoft Game Studios. Разработчики оставили ссылку на файл на диске H:/.

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

Не делайте плохо, делайте хорошо

Разберитесь в нюансах вёрстки с HTML Academy — знакомство с HTML и CSS бесплатное.

Как создать ссылку в HTML-документе. Тег A — его синтаксис и атрибуты

Ссылки (или гиперссылки) пронизывают Интернет как кровеносные сосуды. Не будь ссылок – не было бы Интернета.

Как создать ссылку в HTML документе и правильно прописать её атрибуты, что такое URL и как Поисковые Системы относятся к ссылкам – в этом очередном уроке для начинающих изучать HTML.

URL или «адрес» страницы в Интернет

Каждый HTML документ в Сети имеет свой «точный адрес». Его называют «УРЛом», от англ. URL — Uniform Resource Locator

Структура URL часто видна в адресной строке браузера. Он включает в себя:

1. Название протокола – http:// или https://
2. Домен сайта,
3. папка или путь к папке, где этот документ находится,
4. Имя файла (может быть не всегда).

Благодаря такому «точному адресу» и стало возможным ссылаться на этот документ из текста другого документа.

Тег <A> и его базовый синтаксис

Надеюсь, слово «синтаксис» вас уже не пугает 🙂

<a href="http://domen-saita.ru/papka-na-servere/dokument.html">текст
 ссылки</a>

Как видите, после начала тега <A>, должен идти обязательный атрибут  href, который задаёт адрес документа, на который следует перейти.

Внутри самого тега-контейнера <A> стоит текст (хотя может быть и картинка), который и является текстом ссылки. Его ещё называют «Анкор» или просто — Якорь.

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

В примерах выше, были использованы абсолютные ссылки. Такие, которые содержат полный URL документа.

Пример: ссылка из документа first.html ведёт на файл second.html, который находится в папке news

Относительная ссылка на каталог, уровнем выше текущего

Код:

<a href="../first.html">это - относительная ссылка на файл
 в каталоге, уровнем выше</a>

Эта ссылка ведёт на файл first.html в «родительском» каталоге, т.е. на один уровень выше.

Сочетание ../ указывает на папку, расположенную на один уровень выше от данной позиции файла, с которого делается ссылка.

Атрибуты тега <A>. Как открыть документ по ссылке в новом окне

Для того, что бы документ по ссылке открывался в новой вкладке браузера, нужно использовать атрибут target=»_blank»

Не злоупотребляйте им. Не нужно делать внутренние ссылки сайта с этим атрибутом. Пользователя будут раздражать «плодящиеся окна».

Вообще, с этим атрибутом target – целая история. Есть ещё целый ряд его значений, но все они используются сегодня крайне редко.

Это потому, что они предназначены для работы с сайтом на фреймах, ныне не популярных и, с приходом HTML5, уходящими в прошлое.

Заголовок ссылки. Атрибут title для тега <A>

Ещё один полезный атрибут — title=»Текст, поясняющий куда ведёт эта ссылка»

Синтаксис:

<a href="http://domen-saita.ru/papka-na-servere/dokument.html"
 title="всплывающая подсказка">это - ссылка с подсказкой</a>

Как видите, браузер выводит его как всплывающую подсказку. А ещё, его учитывают и поисковые системы.

Атрибут гиперссылки nofollow. Запрет передачи «траста» сайта по ссылке

Он говорит Поисковым Системам, что документ по ссылке, возможно, не заслуживает доверия. При этом показатели доверия («траста») с сайта Источника, не передаются на сайт по ссылке.

Тема о «трасте» и ссылочном ранжировании ещё впереди, но если коротко, то «участь» сайтов в ВЫДАЧЕ Поисковых Систем зависит также и от количества ссылок, ведущих на этот сайт. Чем их больше, чем более авторитетные сайты ссылаются – тем больше доверие к сайту по ссылке.

В некоторых случаях, стоит «экранировать» ссылки этим атрибутом. Например, если вы пишите отрицательный отзыв о каком-либо сервисе.

<a href="http://bad-sait.ru/dokument.html" rel="nofollow">плохой сайт</a>

Внутренняя ссылка или якорь внутри документа

В больших по объёму текстах, часто требуется установка так называемых «якорей» в логических частях документа. Потом, именно на это место, можно сослаться.

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

При создании такого якоря вместо атрибута href используют атрибут name

Синтаксис при создании якоря:

<a name="top"></a>

При создании ссылки, в конце URL добавляют через знак # – имя «якоря»:

<p><a href="#top">Наверх</a></p>

Переход будет точно к этому месту, т. е. браузер поместит это место в своей верхней видимой части.

Часто, в длинных документах, в самом низу ставят такую ссылку «Наверх».

… совершив путешествие по миру ароматных зерен, нашли самые высококачественные из тех, которыми славятся Африка, Азия, Центральная и Южная Америка . Поэтому сегодня в кофейнях  вы встретите лучшие кофейные сорта от признанных мировых производителей.

? Наверх ?

Из другого документа можно также выйти к этому месту, если добавить в конце URL через знак #имя_якоря

<a href="http://domen-saita.ru/dokument.html#top">текст ссылки ведёт
 к якорю "top" в этом документе</a>

Якорь ссылки – картинка

Ссылкой может быть и любая картинка.

Код:

<a href="http://sait.ru/dokument.html"><img src=kartinka.jpg"
width="100" /></a>

По умолчанию, ссылки подчёркиваются браузером сплошной синей чертой, а ссылки-картинки приобретают синюю рамку.

Что бы избавится от неё – в файл CSS для сайта добавляют простое правило:

a {border: 0px;}

Это указание сделать нулевую толщину бордюра у всех ссылок-картинок.

Продолжение

В следующем посте, я расскажу о почтовых ссылках, их атрибутах и методах «предохранения» от злобных спамеров 🙂

НОУ ИНТУИТ | Лекция | Ссылки в HTML

Аннотация: В лекции описываются основные способы работы со ссылками. Кратко рассматриваются некоторые способы реализации навигации по сайту.

Хотя HTML содержит большое количество средств для форматирования текста и структурирования документов, его основной особенностью является возможность создания гипертекстовых документов. Гипертекстовыми являются документы, которые содержат гиперссылки на другие ресурсы сети Интернет. Особенность гиперссылки заключается в том, что она может указывать не только на другой HTML-документ или любой другой ресурс (текстовые файлы, файлы PDF, изображения, звуковые файлы и т.д.), но и на определенный раздел текущего HTML-документа.

Текст гиперссылки, как правило, помечается подчеркиванием и цветом, чтобы его было легко визуально отличить от обычного текста.

Любая ссылка на веб-странице может находиться в одном из следующих пяти состояний:

• непосещенная ссылка (link). Такое состояние характерно для ссылок, которые еще не открывали. По умолчанию, непосещенные ссылки имеют синий цвет и отображаются шрифтом с подчеркиванием;
• активная ссылка (active). Ссылка помечается как активная в момент ее открытия, т.е. в тот короткий промежуток времени между нажатием на ссылку и началом загрузки нового документа. В некоторых браузерах этот стиль применяется, когда ссылка открыта в другом окне или вкладке. Цвет такой ссылки по умолчанию красный;
• посещенная ссылка (visited). Как только пользователь открывает документ, на который указывает ссылка, она помечается как посещенная и меняет свой цвет на фиолетовый, установленный по умолчанию;
• intuit.ru/2010/edi»>фокус (focus). Ссылка находится «в фокусе», когда, например, она выделена с помощью клавиатуры пользователя. Браузер Internet Explorer не поддерживает в настоящее время состояние focus, и использует вместо него состояние active;
• под указателем (hover). Состояние применяется, когда пользователь удерживает над ссылкой указатель мыши.

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

Создание гиперссылок

Любой строковый элемент или изображение можно превратить в гиперссылку. Для этого необходимо сообщить браузеру, какой элемент является ссылкой, а также указать адрес ресурса, на который следует сделать ссылку. Оба эти действия выполняются с помощью элемента A.

Элемент A имеет несколько атрибутов, главным из которых являются href, задающий адрес ресурса, на который указывает ссылка. Адрес ссылки может быть абсолютным и относительным. Как правило, абсолютные адреса применяются для перехода на другой ресурс, а внутри текущего сервера применяются относительные адреса. Ниже представлены некоторые примеры создания ссылок:

<A href="../images/image.jpg">Изображение</A>
<A href="http://www.microsoft.ru">сайт Microsoft</A>
<A href="mailto:[email protected]" title="Пишите письма">
[email protected]</A>

Иногда оказывается полезным организовать ссылки не на другие HTML-документы, а на определенные места того же самого документа. Подобные ссылки еще называют закладками. Вначале следует задать в соответствующем месте HTML-документа закладку и установить ее имя с помощью атрибута name элемента A. Имя ссылки на закладку начинается с символа #, после чего идет название закладки. Можно также делать ссылку на закладку, находящуюся на другой веб-странице и даже другом сайте. Для этого в адресе ссылки надо указать ее адрес и в конце добавить символ решетки # и имя закладки. Между тегами <A name=..> и </A> текст писать необязательно, т.к. требуется лишь указать местоположение перехода по ссылке.

Приведенный фрагмент кода создает закладку и ссылку на нее:

<A name="top"></A>
  ...  
  <A href="#top">Вверх!</A>

Ссылкой может быть не только строковый элемент, но и изображение. Изображение в этом случае надо поместить между тегами <A href=…> и </A>, как показано в примере:

<A href="sample.html"><img src="sample.gif" alt="Изображение-ссылка"></A>

Атрибут href элемента A задает путь к документу, на который указывает ссылка, а атрибут src элемента IMG — путь к графическому файлу, который используется в качестве ссылки.

Вокруг изображения-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом текстовых ссылок. Можно воспользоваться CSS, чтобы убрать рамку для всех изображений, которые являются ссылками. Для этого применяется свойство border cо значением none. На рисунке 8.1 представлены текстовая и графическая ссылки.

Как и большинство элементов HTML, элемент A может иметь атрибут title, который представляет некоторую дополнительную информацию. Браузеры показывают так называемую всплывающую подсказку, когда посетители проводят курсором своей мыши над ссылкой. Эта всплывающая подсказка сообщает информацию о ссылке. Например, можно дать небольшое введение в содержание и расположение присоединенного по ссылке документа.

Соз

Добавляем ссылку HTML — Как создать сайт

Добавляем ссылку на HTML-страницу

В этом уроке, мы рассмотрим способ добавления ссылки на HTML-страницу.

Ссылка — важнейшая часть сайта и всемирной паутины, именно благодаря ссылкам мы можем путешествовать по интернету.

Так как ссылки обычно ссылаются на другие страницы, то нам нужно создать еще одну HTML-страницу и сослаться на неё.

У нас уже есть одна страница Страница о снежном барсе (файл index.html), давайте создадим еще одну HTML-страницу, она будет посвящена полярному волку.

Страница о полярном волке

Создайте на Рабочем столе HTML-файл:
polayrnyi-volk.html

Название страницы <title> </title>, сделайте:
Страница о полярном волке

Внедрите в неё, следующий CSS-код:

<style>
 h2 {
  color: green;
  font-family: Arial;
 }
 p {
  color: blue;
  font-size: 19px;
  width: 60%;
 }
</style>

Заголовок статьи <h2> </h2>:
Полярный волк

Фотография <img>:

Cтатья состоящая из двух абзацев <p> </p>:

Полярный арктический волк - подвид волка.  Обитает в Арктике и тундре, на
обширных пространствах северных регионов, которые пять месяцев в году,
погружены в темноту. Чтобы выжить, волк приспособился есть практически
любой корм, который только попадается ему на пути.

Полярные волки хорошо усвоились к жизни в Арктике: они могут годами
жить при минусовой температуре, месяцами не видеть солнечного света и
неделями оставаться без пищи. Длина волка составляет 100-150 см, высота
в холке может достигать 100 см, а масса у самцов переваливает за 100 кг.
Продолжительность жизни полярного волка около 7 лет. В его рацион входят:
леминги, зайцы, овцебыки, олени и птицы.

В итоге вы должны получить следующую страницу.

Подный код HTML-документа, страницы о полярном волке, приведён в конце этого урока.

Добавляем ссылку в HTML-документ

Добавим ссылку которая будет ссылаться на страницу о полярном волке, саму ссылку разместим на странице о снежном барсе.

Ссылка в HTML-документ добавляется с помощью тегов <a> </a>, между которыми помещают текст ссылки. У тега <a> есть свойство href=" ", значением которого выступает адрес страницы, на которую нужно сослаться (кликнув по ссылке мы перейдем на страницу, на которую ссылается ссылка):

<a href="адрес страницы">Текст</a>

<a> — открывающий тег ссылки, который указывает на то что здесь будет ссылка,
href=" " — свойство тега <a>, которое указывает на адрес страницы,
адрес страницы — значение свойства href=" ", адрес страницы,
Текст — любой текст,
</a> — закрывающий тег ссылки.

Добавьте в HTML-документ файла index.html (Страница о снежном барсе), перед закрывающим тегом </body>, следующий код:

<a href="polyarnyi-volk. html">Полярный волк</a>

Так как файлы index.html и polyarnyi-volk.html находятся в одной папке Рабочий стол, то адресом страницы о полярном волке, будет просто имя его файла polyarnyi-volk.html

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

В итоге, HTML-документ файла index.html будет выглядеть следующим образом:

<html>
 <head>
  <title>Страница о снежном барсе</title>
  <style>
   h2 {
    color: green;
    font-family: Arial;
   }
   p {
    color: blue;
    font-size: 19px;
    width: 60%;
   }
  </style>
 </head>
 <body>
  <h2>Снежный барс</h2>
  <img src="irbis.jpg">
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих.  Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
  <a href="polyarnyi-volk.html">Полярный волк</a>
 </body>
</html>

Открыв файл index. html с помощью браузера, вы должны увидеть следующее.

Внизу страницы находится ссылка, нажав на которую вы попадёте на страницу о полярном волке. Как вы можете заметить, на странице о полярном волке, нету ссылки. Давайте добавим туда ссылку, которая будет ссылаться на страницу о снежном барсе.

Добавьте в HTML-документ файла polyarnyi-volk.html, перед закрывающим тегом </body>, следующий код:

<a href="index.html">Снежный барс</a>

В итоге, HTML-документ файла polyarnyi-volk.html будет выглядеть следующим образом:

<html>
 <head>
  <title>Страница о полярном волке</title>
  <style>
   h2 {
    color: green;
    font-family: Arial;
   }
   p {
    color: blue;
    font-size: 19px;
    width: 60%;
   }
  </style>
 </head>
 <body>
  <h2>Полярный волк</h2>
  <img src="polyarnyi-volk. jpg">
  <p>
   Полярный арктический волк - подвид волка. Обитает в Арктике и тундре, на
   обширных пространствах северных регионов, которые пять месяцев в году,
   погружены в темноту. Чтобы выжить, волк приспособился есть практически
   любой корм, который только попадается ему на пути.</p>
  <p>
   Полярные волки хорошо усвоились к жизни в Арктике: они могут годами
   жить при минусовой температуре, месяцами не видеть солнечного света и
   неделями оставаться без пищи. Длина волка составляет 100-150 см, высота
   в холке может достигать 100 см, а масса у самцов переваливает за 100 кг.
   Продолжительность жизни полярного волка около 7 лет. В его рацион входят:
   леминги, зайцы, овцебыки, олени и птицы.</p>
  <a href="index.html">Снежный барс</a>
 </body>
</html>

Открыв файл polyarnyi-volk.html с помощью браузера, вы должны увидеть следующее.

Внизу страницы находится ссылка, нажав на которую вы попадёте на страницу о снежном барсе.

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

Читать далее: Создаём сайт из трёх страниц

Дата публикации поста: 7 февраля 2016

Дата обновления поста: 15 октября 2014

Навигация по записям

Как вставить (сделать) ссылку на web (html) странице — первый урок

Гипертекстовая ссылка

Аббревиатура HTML значит «Язык разметки гипертекста». Что все-таки такое гипертекст?

В отличие от обычного текста, который можно читать только от начала к концу, гипертекст позволяет производить моментальный переход от 1-го куска текста к другому. Справочные системы многих программных товаров построены конкретно по принципу гипертекста. При щелчке левой кнопкой мыши на неком выделенном цветом и подчеркнутом куске текущего документа — гипертекстовой ссылке — происходит переход к заблаговременно назначенному документу либо куску документа. На WEB страничках гипертекстовые ссылки обширно употребляются для перехода к определенному куску текущей странички, к последующей либо хоть какой страничке WEB сайта либо к документу другого WEB сайта.

Для задания перехода по ссылке в языке HTML употребляются теги <a></a> с атрибутом href, значением которого является адресок перехода. В качестве адреса может употребляться название файла другого документа либо url адресок.

Каждый компьютер, присоединенный к Веб, имеет собственный уникальный адресок, который может быть представлен либо в числовом виде, к примеру, 204.146.46.133, либо определенным сочетанием знаков, к примеру, www.microsoft.com. Так как каждый компьютер имеет свою уникальную структуру каталогов и файлов, то и любая WEB страничка также имеет уникальный адресок, именуемый URL (Uniform Resource Locator — Унифицированный указатель ресурсов). Как видно из наименования, URL может указывать не только лишь на странички WEB, но также и на другие ресурсы Интернет, к примеру, FTP (File Transfer Protocol — Протокол передачи файлов) — хранилища файлов. В самом общем виде URL содержит в себе указатель на протокол, который применяется для доступа к ресурсу — http, FTP и другое — и символьный адресок компьютера в купе с именованием определенного файла в структуре каталогов этого компьютера. К примеру, url адресок www.chat.ru/user/faq.html состоит из указателя на протокол http, который применяется для доступа к WEB, имени компьютера chat.ru и имени файла-документа faq.html, который находится в каталоге user.

Ссылка в HTML файле

Из произнесенного следует, что каждой WEB страничке соответствует собственный HTML файл. Но вы сможете увидеть, что в почти всех url адресах отсутствует название файла, к примеру, microsoft.com. Все же, в окне браузера все таки возникает определенная страничка. Дело в том, что админы WEB серверов могут указать на собственных узлах некие HTML файлы, которые выводятся по умолчанию, если название файла в URL очевидно не задано. Обычно эти файлы имеют имена index.html либо index.htm.

Поглядим, как сделать переход по ссылке с конца текущего документа list. html на первую страничку нашего WEB сайта, другими словами к файлу other.html. Чтоб сказать гостю WEB сайта о способности возвратиться к первой страничке, нужно предугадать меж открывающим <а> и закрывающим </а> тегами соответственный текст, к примеру:

<а href=»other.html»>На первую страничку</а>

Направьте внимание, что адресок ссылки должен быть заключен в кавычки, потому что некие браузеры могут не осознать его без кавычек.

Чтоб ссылка На первую страничку была центрирована, следует ограничить элемент <а>…</а> тегами <center> и </center>.

Воткните в файле list.html пустую строчку перед закрывающим тегом </body> и введите в ней последующий код:

<a href=»other.html»>Ha первую страничку</a>

Ссылка «На первую страничку» будет подчеркнута и выделена другим цветом — таким, который предусмотрен в вашем браузере для не просмотренных ссылок.

Установите указатель мыши в окне браузера на ссылке «На первую страничку».

Щелкните мышью на этом месте. В окне браузера появится первая WEB страничка из файла other.html.

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

Сейчас сделаем ссылку для перехода с первой странички — other.html — на вторую — list.html. Для ссылки логичней всего будет использовать текстовый кусок о нашей деятельности, потому что перечень на второй страничке открывает содержание конкретно этого куска текста. Потому нам необходимо в файле other.html поместить открывающий тег <а> с атрибутом href=»list.html» перед куском текста о нашей деятельности, а закрывающий тег </а> — после него.

Откройте файл other.html. Отредактируйте этот файл, вставив тег <а href=»list.html»> перед текстом о нашей деятельности, а закрывающий тег </а> — после него.

Как раскрасить ссылки

Вероятнее всего, что когда вы просмотрите итог в браузере, вы обнаружите, что ссылка о нашей деятельности видна очень плохо либо в общем не видна. Это связано с тем, что цвет, которым браузер показывает не просмотренные ссылки, совпадает с цветом фона вашего документа. В таком случае цвет ссылок следует поменять, воспользовавшись атрибутами link и vlink тега <body>. Атрибут link определяет цвет не просмотренной ссылки, a vlink — просмотренной. Очередной атрибут — alink определяет цвет ссылки в момент, когда на ней установлен указатель мыши и нажата левая кнопка.

Установим для не просмотренной ссылки белоснежный цвет (white), для просмотренной — зеленый (lime), а для ссылки в момент щелчка мышью — красноватый (red).

Если вы устанавливаете какой-нибудь из атрибутов: bgcolor, text, link, vlink, alink — то устанавливайте их все. По другому, к примеру, установленный вами фоновый цвет может совпасть с цветом текста, установленным пользовательом в браузере.

Отредактируйте файл other.html, добавив в тег <body> атрибуты link=»white», vlink=»lime», alink=»red» так, чтоб этот тег имел последующий вид:

<body bgcolor=»blue» text=»yellow» link=»white», vlink=»lime», alink=»red»>

Сейчас в программке просмотра ссылка верно видна.

Внимание! Теги bgcolor, text, link, vlink, alink являются устаревшими и потому безотступно рекомендуется использовать стили

Щелкните мышью на ссылке о нашей деятельности. В окно браузера будет загружен файл list.html.

Перейдите в конец этой странички, чтоб показать на дисплее ссылку На первую страничку.

Если ссылка плохо видна, вы сможете воткнуть для текущей странички в теге <body> атрибуты link, vlink и alink с подходящими значениями цветов.

Щелкните мышью на ссылке На первую страничку. В окне браузера снова появится документ other.html.

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

Для сотворения таковой ссылки довольно в файле other.html воткнуть открывающий тег <а href=»list.html»> перед тегом <img src=»image. gif»> и закрывающий тег </а> после него.

Отредактируйте файл other.html.

В окне браузера вокруг рисунка вы увидите узкую рамку.

Установите указатель мыши на рисунке. В строке состояния браузера возникает адресок, на который ссылается набросок.

Щелкните мышью на рисунке. В окне браузера раскроется документ list.html.

Перейдите к ссылке На первую страничку и щелкните на ней мышью. В браузер опять будет загружена страничка other.html.

Создавая в этом опыте ссылки на странички нашего WEB сайта, мы использовали в качестве адреса название файла. При таком указании адреса браузер всегда отыскивает файл в текущем каталоге. Если б подходящий файл — list.html — находился, представим, в подкаталоге Doc текущего каталога, то в адресе нужно было бы указать путь к нему от текущего каталога: <а href=»doc_list.html»>. Такая ссылка, в какой адресок указывается относительно текущего каталога на том же компьютере, именуется относительной.

Варианты ссылок

Вы сможете также использовать в ссылках полный url адресок, указывающий на файл, находящийся в определенном каталоге определенного компьютера в сети, к примеру: intel. com. Такая ссылка именуется абсолютной. В то время как относительные ссылки указывают на файлы, расположенные на том же самом компьютере, абсолютные ссылки служат для представления адресов документов на других компьютерах в Интернет.

Представим, файл с именованием price.xls находится на WEB сайте sd-company.su в каталоге uploads/price. Тогда абсолютная ссылка на этот файл будет таковой: http://sd-company.su/uploads/price/price.xls

<а href=»http://sd-company.su/uploads/price/price.xls»>

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

УЧЕБНИК HTML для новичков — Ссылки

Ссылки

Итак, у вас должно быть, как минимум, два документа (странички), которые нам нужно будет соединить ссылками. У меня это будет два документа: один — index.html, где я все в том же пиджаке, а другой, пусть будет new.html, где я красуюсь в новом костюме на берегу Черного моря. Причем второй документ находится в папке sea. Итак, вот они, эти два документика:

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

Что такое ссылки? Хороший вопрос. И на него я дам хороший ответ — это то место при нажатии по которому тебя пошлют в другое место. Ссылки могут быть в виде текста, картинки или даже рекламного баннера.

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

Аха… ссылки. Так вот, вы будете смеяться, но ссылки отличаются от нессылок буквой «A». Круто правда? Склерозники и то запомнят! Пусть вы русский, нерусский или даже простой инопланетный парень. Потому как <A> — начальная буква Адреса (если по-русски), либо Address (если не по-русски). Это такой тег. И он имеет, как все порядочные теги закрывающуюся пару </A>.

Поэтому, если я напишу в своем первом документе ссылку на фотоальбом:

<A>Я на море!</A>

Мы с вами поймем, что это уже ссылка. Жаль, этого не поймет браузер. Мы же не указали адрес, по которому нас перекинуть! Просто тегом тут не отделаешься. Для этого у тега <А> есть атрибут href, которому и нужно указать адрес фотоальбома new.html, который находится у меня в другой папке sea. Поэтому теперь мы напишем правильно:

<A href = «sea/new. html»>Я на море!</A>

Вот и все!!!

А еще мы можем вставить ссылку на наш электронный адрес. И сделать это тоже очень легко. Только нужно добавить перед нашим электронным адресом, например [email protected] слово mailto:

<A href = «mailto:[email protected]«>Напишите мне письмо!</A>

А если вы захотите дать ссылку на мой сайт www.dikarka.ru, то можете написать так:

<A href = «http://www.dikarka.ru«>Дикая правда</A>

А если на сайт для детей и родителей, то адрес такой:

<A href = «http://www.friendship.com.ru»>Корабль Друзей</A>

А если на поисковую систему yandex, то, естественно

<A href = «http://www. yandex.com»>Поисковая система Яндекс</A>

Вот и все премудрости!

Единственно, хочу заметить, если вы хотите, чтобы открытый по ссылке документ не вытеснял собой предыдущий, можете дать указание открыть его в новом окне, добавив в конце ссылки атрибут target=_blank, например:

<A href = «http://www.dikarka.ru» target=_blank>www.dikarka.ru</A>

В этом случае, ваша страничка останется на месте, а в новом окне откроется новая страничка с сайтом www.dikarka.ru. Итак, напишем все изменения в нашем документе index.html:

Листинг 15. Полный код

<HTML>
  <HEAD>
    <TITLE>Моя Домашняя Страничка</TITLE>
  </HEAD>
  <BODY bgcolor=white background=»foto/fon_kirpich.jpg»>
    <h2>Моя домашняя страничка</h2>
    <IMG src=»foto/myfoto01. jpg» align = left hspace=40>
    <A href=»sea/new.html»>Я на море!</A> <br>
    <A href=»http://www.dikarka.ru» target=blank>Дикая правда</A><br>
    <A href=»http://www.friendship.com.ru»>Корабль Друзей</A><br>
    <A href=»http://www.yandex.com» target=blank>Поисковая система Яндекс</A>; <br>
    <A href=»mailto:[email protected]»>Напишите мне письмо!</A>
  </BODY>
</HTML>

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

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

Кроме того, по умолчанию они получились синего цвета, а вот использованные ссылки окрасились в фиолетовый цвет. Посмотрев на мои ссылки, можно догадаться, что я уже проверила первые четыре ссылки, осталось проверить последнюю, пятую, где есть ссылка на несуществующий почтовый адрес. Так проверю же его! Вот что получится, если я на него нажму:

Видите? Открылась почтовая программа, с готовым к отправке письмом. И в строчке адресата уже вписан адрес, который я указала в ссылке. Пользователю достаточно просто вписать свое сообщение и отправить.

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

Причем, вторая и четвертая ссылка открылись в новом окне, а первая и третья — заменила собой первоначальный документ. То есть страничка sea.html заменила собой существующий документ index. html. Мы, конечно, можем вернуться на страничку index.html, просто нажав Back (Назад) на верхней панели браузера, но есть способ и получше! Я думаю, вы сразу догадались какой — дать ссылку на документ. Единственно, что я хочу указать, что если ссылка будет немного другая.

Добавим в страничку sea.html следующую запись:

<A href=»../index.html»>Возврат на Домашнюю страничку</A>

Видите, впереди index.html косую черту с предстоящими двумя точками? Дело в том, что файл с кошками у меня находится в директории, расположенной в дочернем файле нашей первой странички index.html.

Надеюсь, я не очень вас запутала своими объяснениями? Короче, если у вас файл index.html и файл sea.html лежат в одной папочке, то проблем не будет. В этом случае вы напишете просто в двух документах: В документе index.html:

<A href=»sea. html»>Я на море!</A>

А в документе sea.html:

<A href=»index.html»>Возврат на Домашнюю страничку</A>

Ну, а если ваши странички лежат в разных папочках, то смотрите не запутайтесь. У меня, как я уже сотый раз талдычу, они находятся в разных папках, поэтому, чтобы создать правильную ссылку в документе sea.html, я открою блокнот и внесу следующие изменения:

Листинг 16.

<HTML>
  <HEAD>
    <TITLE>Моя домашняя страничка</TITLE>
  </HEAD>
  <BODY>
    <CENTER>ДОБРО ПОЖАЛОВАТЬ!</CENTER>
    <img src=»foto/sea.jpg» width=380 height=340 alt=»это я в новом пиджаке» align=right hspace=20 vspace=20>
    <P>
  Текст…
    <p>
    <A href=»../index.html»>Возврат на Домашнюю страничку</A>
  </BODY>
</HTML>

И вот результат моего часового объяснения:

Пойдем теперь дальше. Вместо словесной ссылки можно дать картинку и она будет ссылкой. Я вот возьму и заменю слова Возврат на домашнюю страничку рисунком домика, который я нарисую в Adobe Photoshop и не забуду его оптимизировать для web. А рисунок назову home.jpg и расположу я его в папке foto, где хранятся у меня все рисунки и фотографии.

Кроме того, можно еще использовать атрибут title, который предназначен для текста всплывающей подсказки, и который называется «заголовком ссылки». И если вы подведете к ссылке указатель, вы увидите это всплывающее окно. Итак, вот это, о чем я тут расскзаываю:

Вот что у меня было:

<A href=»../index.html»>Возврат на Домашнюю страничку</A>

А вот что будет:

<A href=»../index.html» title=»возврат на Домашнюю страничку»><img src=»foto/home.gif»></A>

Вот моя улучшенная работа:

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

Ну вот и все на сегодняшний день.

Я упустила некоторые моменты, например на создание ссылок внутри документа. Но не хочется утомлять вас этими ссылками. Пока они вам не понадобятся. В будущем, я конечно к ним вернусь. А пока разберитесь с тем, что я написала выше.

Сказать по правде, я очень удовлетворена этим уроком. И писала его с огромным удовольствием. Надеюсь он понравился и вам? Но, может вы думаете по-другому? Может я слишком подробно все разжевываю? Или, наоборот, стоит еще раз объяснить некоторые моменты? Пишите, задавайте разные вопросы. Ведь и от вас зависит какими будут мои будущие уроки. Потому как я делаю их не для себя. Я это и так знаю. Я пишу для вас. И очень хочу, чтобы у вас получилось все как надо.

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



Как создавать ссылки на другие веб-страницы

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

Ссылки, иначе известные как гиперссылки , определяются с помощью тега , также известного как элемент привязки .

Чтобы создать гиперссылку, используйте тег в сочетании с атрибутом href .Значение атрибута href — это URL или местоположение, на которое указывает ссылка.

Пример:

Вот несколько HTML-кодов , с которыми можно поиграть.

Попробуй

Гипертекстовые ссылки могут использовать абсолютных URL, относительных URL или корневых относительных URL.

абсолютное

Это относится к URL-адресу, в котором указан полный путь. Например:

Учебное пособие по HTML

родственник

Это относится к URL-адресу, где указан путь относительно текущего местоположения .

Например, если мы хотим сослаться на https://www.quackit.com/html/tutorial/ URL, а наше текущее местоположение — https://www.quackit.com/html/ , мы бы используйте это:

Учебное пособие по HTML

коренной родственник

Это относится к URL-адресу, в котором указан путь относительно корня домена .

Например, если мы хотим сослаться на https://www. quackit.com/html/tutorial/ URL, а текущее местоположение — https://www.quackit.com/html/ , мы могли бы используйте это:

Учебное пособие по HTML

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

Цели связи

Вы можете указать, следует ли открывать URL-адрес в новом окне или в текущем окне. Это делается с помощью атрибута target . Например, target = "_ blank" открывает URL-адрес в новом окне.

Целевой атрибут может иметь следующие возможные значения:

_blank	Открывает URL-адрес в новом окне браузера .
_self	Загружает URL-адрес в текущее окно браузера .
_parent	Загружает URL-адрес в родительский фрейм (все еще в текущем окне браузера). Это применимо только при использовании фреймов.
_top	Загружает URL-адрес в текущее окно браузера , но отменяет все фреймы. Следовательно, если кадры использовались, то их больше нет.

Пример:

   Определение URI и URL 
  

  
  
  Консорциум World Wide Web

  

  <раздел>
   
 Концепция 
 
  ... содержание, примеры и т.д. ...

  

   Вернуться в раздел «Концепция» 
  

  
 
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 год
22
23
24
25
26
27
28
29
30
31 год
32
33
34
35 год
36
37
38
39
40
41 год
42
43
44
45
46
47
48
49
 
 


  
  


  <заголовок>
      Lorem ipsum...
  
   
 Ссылки на разделы одной страницы 
 
  <раздел>
    

      
      
  # section1  
      
  # section2  
      
  # section3  
      
  # section4  
      
  # section5  
    
  

  <раздел>
     
 (# section1) Раздел 1 
 
    
 Lorem ipsum... 
  

  <раздел>
     
 (# section2) Раздел 2 
 
    
 Lorem ipsum ... 
  
  <раздел>
     
 (# section3) Раздел 3 
 
    
 Lorem ipsum ... 
  
  <раздел>
     
 (# section4) Раздел 4 
 
    
 Lorem ipsum ... 
  
  <раздел>
     
 (# section5) Раздел 5 
 
    
 Lorem ipsum ... 
    

       Вернуться к заголовку страницы  или
       Вернуться к началу страницы