Что такое ссылка? Как создать ссылку в HTML?

Скачать материалы

Скачать 10-ый видеоурок по HTML Размер: 18.93 MB, скачали: 467 раз.
Скачать исходники к 10 видеоуроку по HTML Размер: 30.15 kB, скачали: 294 раз.

Как запустить видеоурок:

Разархивировать скачанный файл.
Открыть папку index.
Запустить файл index.html в браузере.

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

Что такое ссылка?

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

Например, у нас есть html-документ под названием «Главная». Это наша html-страничка, которая имеет свой текст, свое изображение и какие-нибудь кнопочки. Допустим, в первой строке нашего текста некоторые слова выделены ссылкой. Эта ссылка ведет на документ «О нас». Изображение тоже является ссылкой. Оно ведет на документ «Обратная связь». И кнопочка ведет еще на какой-нибудь один документ. В этих документах: «О нас», «Обратная связь,… — в них тоже могут быть ссылки. Они тоже будут вести на какие-нибудь странички. С тех страничек будут идти ссылки на еще одни странички и т.д. Именно ссылки задают структурирование нашему сайту – так называемую, иерархическую систему, во главе которой стоит «Главная страница».

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

Давайте разберемся на практическом примере, что же такое ссылки. Переходим в код документа. Найдем слово, которое хотим сделать ссылкой. Например, слово «истории». Чтобы сделать слово ссылкой, мы добавляем теги <a></a>. Тегу <a> нужно задать атрибут href. Это обязательный атрибут. В кавычках указывается путь до нашего документа. Давайте перейдем в папку сайта и создадим в ней еще один документ и папку. Папка будет называться, например history (истории). Теперь перейдем обратно в код и нажмем кнопку «новый». Выбираем файл->сохранить как, выбираем папку history и вводим название документа history.html. Документ создан.

Давайте создадим каркас нашего документа. Его можно скопировать из index.html, но вам желательно ввести его самостоятельно, так как таким образом вы закрепите пройденный материал. Между тегами <body> </body>вводим какой-нибудь текст, чтобы нам хоть что-то было видно на странице. Вы можете ввести свой текст.

 <html>
 <head>
 <title>Главная страница</title>
 <meta http-equiv="Content-Language" content="ru">
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 </head>
 <body text="#660000" bgcolor="#FFFCC" background="img/bg.png">
 <h1>Истории</h1>
 Здесь располагаются все мои истории, которые произошли со мной в жизни.
 </body>
 </html>

Сохраняем (Ctrl+S). Теперь давайте сделаем ссылку в слове «истории» на этот документ. Прописываем к нему путь. Проделываем то же самое, что и с изображениями.

 <p align="left"><i>Данная страничка посвящена одной <a href="history/history.html">истории</a>. Истории о том, зачем я создал сайт <b>info-line.net</b></i></p>

Сохраняем. Переходим в браузер и проверяем страничку. Как мы видим, слово «истории» стало ссылкой. Давайте на него нажмем. Мы попали на страницу «Истории».

Какие атрибуты есть у ссылок?

Перейдем в код и поэкспериментируем с атрибутами нашей ссылки. Давайте зададим title (подсказка).

 <p align="left"><i>Данная страничка посвящена одной <a href="history/history.html" title="Мои истории из жизни">истории</a>. Истории о том, зачем я создал сайт <b>info-line.net</b></i></p>

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

 <br>И тут возникла идея создать уже свой собственный <a href="http://info-line.net">сайт</a>.

Сайт прописан. Если нам нужно, чтобы наша ссылка отображалась в новом окне, то мы в атрибуте target прописываем значение _blank. По умолчанию стоит атрибут _self (открыть в текущем окне).

 <br>И тут возникла идея создать уже свой собственный <a href="http://info-line.net" target="_blank">сайт</a>.

Теперь наша ссылка откроется в новом окне.

На этом интересные свойства тега ссылки заканчиваются. Давайте сохраним документ и проверим его в браузере. Ссылка «сайт» стала отправлять нас на другой сайт. Теперь давайте наведем на слово «истории», и, как мы видим, у нас выскочила всплывающая подсказка «Мои истории из жизни». Прошу заметить, что ссылка сайта открылась в новом окне.

Как задать стили всем ссылкам с помощью HTML?

Как вы заметили, после нажатия на ссылки, они стали посещенными и изменили свой цвет. Давайте зададим стили нашим ссылкам. Это не каскадные таблицы стилей, но эти стили будут задаваться всем ссылкам в документе. Прописываются они в теге <body>. Прописываем цвета: link - “#0000FF”, alink (активная ссылка, то есть цвет ссылки во время нажатия) – “#00FFFF”, vlink (посещенная ссылка) – “#FFFFFF”.

 <body text="#660000" bgcolor="#FFFCC" background="img/bg.png" link="#0000FF" alink="#00FFFF" vlink="#FFFFFF">

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

 <body text="#660000" bgcolor="#FFFCC" background="img/bg.png" link="#0000FF" alink="#00FFFF" vlink="#FF00FF">

Сохраняем, проверим еще раз. Теперь стало более-менее. При нажатии, цвет ссылки меняется на голубой. Если бы ссылка была не посещенной, то она была бы синего цвета. После посещения она становится розового.

Сделаем слово «изучать» ссылкой. Наш документ теперь будет лежать не в папке history, а в корневой папке нашего сайта site. Жмем кнопку «новый». Сохраняем под именем about.html. Копируем структуру. Изменим подписи.

 <html>
 <head>
 <title>Главная страница</title>
 <meta http-equiv="Content-Language" content="ru">
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 </head>
 <body text="#660000" bgcolor="#FFFCC" background="img/bg.png">
 <h1>О нас</h1>
 Здесь вы можете узнать про нас подробнее.
 </body>
 </html>

Сохраним. Перейдем в файл index.html. Пропишем здесь ссылку.

 <br>Ближе к <b>PHP</b>... И <a href="about.html" target="_blank" title="О нас">изучать</a> эти многостраничные книги мне было так лениво, что каждый раз, когда я их снова видел, я сохранял адрес страницы и переключался на что-нибудь другое.

Сохраним документ (Ctrl+S). Обновляем. Как мы видим, ссылка стала синей. Если мы на нее нажмем, то она станет голубой, и мы попадем на страничку «О нас». После посещения ссылка стала розовой.

Перейдем обратно в код и зададим ссылке цвет, не зависящий от цвета, прописанного в теге <body>. Для этого используется тег , который мы уже прошли. Например, сделаем ссылку черной. Стоит отметить, что тег  следует прописывать в ссылке, потому что значение цвета (color) берется максимально близкое к слову. Так как тегу <a> задан цвет из тега <body>, то он находится в самом теге <a>. Если мы пропишем  до тега <a>, то цвет, прописанный в теге , не повлияет на слово «изучать» — цвет останется таким, каким и был. По этой причине тег  прописывается как можно ближе к слову.

 <br>Ближе к <b>PHP</b>... И <a href="about.html" target="_blank" title="О нас"><font color="#000000">изучать</font></a> эти многостраничные книги мне было так лениво, что каждый раз, когда я их снова видел, я сохранял адрес страницы и переключался на что-нибудь другое.

Сохраним документ. Проверим в браузере. Все получилось: ссылка стала черной и не зависит от того, посетили мы ее или нет.

Какие сделать ссылку на e-mail (электронную почту)?

Если у вас есть e-mail, то давайте пропишем на него ссылку. Это делается так: пишется mailto:ваша_почта.

 C Уважением, <a href="mailto:test@test.com">Олег Зубцов</a>

Сохраняем. Проверяем. Слово «Олег Зубцов» стало ссылкой. При нажатии на нее выскочит окно сообщения, где вы сможете написать письмо владельцу e-mail’а.

Какие сделать изображение ссылкой?

Давайте сделаем наше изображение ссылкой. Делается это всё по тому же принципу. Перейдем снова в код. Тег изображения прописывается внутри тега ссылки <a>.

 <a href="about.html"><img src="img/info-line.png" align="left" alt="Info-line" width="150" height="150" border="0" hspace="5" vspace="5"></a>

Сохраняем. Проверим. Как вы видите, рамка у нас светится посещенным цветом, при нажатии она становится голубой, а мы попадаем на страницу «О нас».

В принципе, на этом все.

Могу лишь посоветовать: чтобы избежать изменения цвета рамки изображения — не добавлять рамку изображению, т.е. border установить равный нулю. Обычно так выглядит красивее.

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

Задание будет такое: создать пять страниц, в которых будет по пять ссылок; из этих ссылок будут ссылки на почту (если у вас нет почты, то вы можете просто использовать какой-нибудь тестовый e-mail адрес), а также из всех этих ссылок должна присутствовать хотя бы одна ссылка на другой сайт (в нашем случае такая ссылка вела на мой сайт про то, как создать сайт).

Cпаcибо за внимание. До встречи в следующем видеоуроке, в котором затронем очень интересную тему про создание навигационных карт!

Подпишись на info-line:

Получать новые уроки на e-mail:

← Как вставить изображение? Как сделать изображение фоном?

Что такое навигационная карта и как ее сделать? →

16 комментариев на “Что такое ссылка? Как создать ссылку в HTML?”

Дмитрий 14 апреля 2012 в 9:02 #

у меня атрибут link="#FFFFCC" не работает((

Ответить
- Олег Зубцов 14 апреля 2012 в 10:36 #
  
  Вы уверены?) У меня ведь работает) Проверьте свой код. Или вставьте его сюда — я проверю 🙂
  
  Ответить
Дмитрий 15 апреля 2012 в 7:58 #

скажите вот так будет работать: ...............................link="#FFFFFCC"............................................

Ответить
- Олег Зубцов 15 апреля 2012 в 11:03 #
  
  нет) потому что у вас 7 символов = 5 F и 2 C. Уберите один символ. Нужно 6.
  
  Ответить
Дмитрий 15 апреля 2012 в 11:28 #

скажите какой тег переносит текст вниз страницы? 😉

Ответить
- Олег Зубцов 15 апреля 2012 в 23:20 #
  
  Для этого используется атрибут valign или коды CSS
  
  Ответить
Дмитрий 15 апреля 2012 в 16:21 #

кстати атрибут target="_blank" может работать и без нижнего подчеркивания 🙂

Ответить
- Олег Зубцов 15 апреля 2012 в 23:18 #
  
  Хорошо! *THUMBS UP*
  
  Ответить
Дмитрий 17 апреля 2012 в 13:01 #

скажите в каком уроке рассказывается про атрибут valign =)

Ответить
- Олег Зубцов 17 апреля 2012 в 20:40 #
  
  Пользуйтесь поиском 🙂 — info-line.net/?s=valign&s...0%B8%D1%81%D0%BA
  В 12-ом уроке по HTML есть пару слов про него.
  
  Ответить
Алекс 18 декабря 2012 в 23:05 #

У меня не получается не знаю почему пишет так:
Веб-страница не найдена
Не найдена страница для веб-адреса file:///C:/Users/1/Desktop/%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D0%B8%D0%BC%20%D1%81%D0%B0%D0%B9%D1%82/Join%20Us/Us
Ошибка 6 (net::ERR_FILE_NOT_FOUND): Не удалось найти файл или каталог.

Ответить
- Олег Зубцов 10 января 2013 в 5:42 #
  
  Скорее всего, вы не правильно указали ссылку, или у вас нету такого файла. Проверьте путь, а также правильно ли указано расширение файла в ссылке.
  Если не получится найти ошибку самостоятельно — напишите мне свой html код, и скажите, где находится у вас файл, на который ссылаетесь. Я помогу 🙂
  
  Ответить
Константин 12 января 2013 в 19:14 #

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

Ответить
- Олег Зубцов 13 января 2013 в 0:28 #
  
  Точно все правильно сделал? Если да, то можешь попробовать с другого браузера зайти и повторить операцию. Если все тоже самое, то можешь попробовать установить почтовый клиент и опять повторить операцию. Так станет яснее, в чем может быть проблема 🙂
  
  Ответить
  - Костян 13 января 2013 в 11:11 #
    
    Вот посмотри пожалуйста, что у меня получилось (все так же не попадаю на почту, как ты и говорил) file:///C:/Users/admin/Desktop/Site/index.html
    
    Ответить
    - Олег Зубцов 14 января 2013 в 14:55 #
      
      ничего не вижу) Видимо обрезался код 🙂
      Введи свой код, пожалуйста, обрамив его тегами code
      
      Ответить