StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
03.07.2015
11:11
24337
13
Как вставить ссылку в HTML. Основы HTML для начинающих. Урок №6
Всем привет!
Продолжаем изучать основы HTML для начинающих. В этом уроке я расскажу, что такое ссылка, как вставить в html документ ссылку на другую страницу, как сделать ссылку картинкой. Покажу, как сделать ссылку на другой сайт, на почту и на файл.
Итак, давайте вкратце выясним, что такое ссылка в HTML.
Ссылка в HTML – это слово или фраза в документе, указывающие на другую часть этого документа или на другой документ, при нажатии на который, произойдет переход.
С помощью ссылки владелец сайта может направить пользователя на другую страницу или на адрес другого сайта, а также дать возможность пользователю скачать файл или архив прямо на сайте.
Если вы не поняли, как выглядит ссылка, тогда сморите – вот так выглядит ссылка. Можете нажать на слово «ссылка» и вы попадете на другую страницу.
Теория закончилась, переходим к практике.
○ Как вставить ссылку в документ на другую страницу
Чтобы вставить ссылку в HTML-документ, используют тег <a> с параметром «href», которое определяет путь или адрес к другому объекту, странице, адресу сайта.
<a href="адрес ссылки или название страницы"> ссылка</a>
Для тега <a> закрывающий тег </a> обязателен.
Внимание: адрес ссылки или название страницы должны быть прописаны на латинице.
Неправильно:
<a href="карта.html"> ссылка</a>
Правильно:
<a href="karta.html"> ссылка</a>
Теперь пример.
Создайте HTML-документ под названием «1.html» и вставьте вот такой код:
<html> <head> <title> Моя первая HTML-страничка на StepkinBlog.ru</title> </head> <body> <a href="2.html">Ссылка</a> Страница №1 Здравствуйте, это моя первая страница на StepkinBlog.ru. </body> </html>
Теперь создайте второй HTML-документ под названием «2.html» и вставьте вот такой код:
<html> <head> <title> Моя первая HTML-страничка на StepkinBlog.ru</title> </head> <body> <a href="1.html">Ссылка</a> Страница №2 </body> </html>
Внимание, HTML-документы «1.html» и «2.html» должны находиться в одной папке.
Обратите внимание на страничку «1.html». Там мы сделали ссылку на страницу «2.html», а со страницы «2.html» сделали ссылку на «1.html».
Разобрались? 
Попробуйте все сделать сами. Добавьте еще пару страниц и привяжите страницы ссылками.
○ Как сделать ссылку на другой сайт
Как вставить ссылку на другую страницу, вы уже знаете. Чтобы сделать ссылку на другой сайт, достаточно в параметре «href» указать адрес сайта (http://адрес сайта):
<a href="http://stepkinblog.ru"> ссылка на мой блог</a>
Вот пример:
○ Как сделать ссылку на почту в html
Ссылка на почтовый ящик делается так же, как и обычные ссылки, только вместо адреса сайта или страницы указываете mailto:адрес электронной почты
<a href="mailto:admin@stepkinblog.ru">Написать письмо</a>
При нажатии по ссылке «Написать письмо», откроется почтовая программа, где вы сможете отправить письмо.
○ Как сделать html ссылку, чтобы она открывалась в новом окне
Добавьте к тегу <a> атрибут «target» с параметром «_blank» и страница будет открываться в новом окне при нажатии по ссылке.
<a href="http://bloggood.ru" target="_blank">ссылка</a>
○ Как сделать ссылку на скачивание файла
Укажите в параметре «href» путь к файлу или к архиву.
- Для скачивания архива
<a href="fail.zip">Скачать zip</a>
fail.zip – это название и расширение архива.
- Для скачивания обычных файлов
Если в ссылке прописать название файла (txt), то при нажатии на ссылку «Скачать» в браузере откроется текстовый файл. Но вам же хочется ее скачать? Для этого добавьте к тегу <a> атрибут «download».
<a href="fail.txt" download>Скачать txt</a>
- Для скачивания картинок
Если в ссылке прописать название картинки, то при нажатии на ссылку «Скачать» в браузере откроется картинка. Но вам же хочется ее скачать? Для этого добавьте к тегу <a> атрибут «download».
<a href="stepkinblog-ru.png" download>Скачать картинку</a>
○ Как сделать картинку ссылкой в html
Как в HTML-документ вставлять картинку, я думаю, писать не нужно, так как недавно вы этот урок изучали. Если подзабыли, читайте тут.
Итак, чтобы сделать картинку ссылкой, достаточно в html-документе прописать тег картинки <img> между тегами ссылки <a>…</a>
<a href="http://stepkinblog.ru"><img src="kartinka.jpg"></a>
○ Как сделать подсказку для ссылки
При наведении курсора мышки на ссылку, появится подсказка. Чтобы это реализовать, добавьте к тегу <a> атрибут «title» с текстом:
<a href="http://stepkinblog.ru" title="Главная страница блога"> Главная страница блога </a>
○ Как сделать цвет ссылки в html
Чтобы простая ссылка после нажатия или посещения имела нестандартный цвет, добавьте к тегу <body> три атрибута: «link», «alink», «vlink» с кодом цвета (цвет можно задать и на английском, например «red»)
<body link="#00FF00" alink="#FFFF00" vlink="#EEE9E9"> <a href="1.html">ссылка</a> </body>
- link - цвет просто ссылки
- alink - цвет нажатой ссылки
- vlink - цвет посещенной ссылки
- #00FF00; | #FFFF00; | #EEE9E9; - это кода цветов ссылок
На этом - все, кажется, ничего не забыл вам рассказать.
А теперь задание вам: все, что вы узнали в этом уроке, попробуйте сделать сами на одной страничке. 
Вот пример того, что у вас может получиться, если правильно используете пройденный материал:
Подписывайтесь на обновление моего блога и не пропустите новых уроков по основам HTML. Удачи!
Степан, прохожу ваш обучающий курс по HTML.
Споткнулся на ссылке на электронный адрес. У мня прописано:
При переходе по этой ссылке почему-то попадаю в Outlook, который предлагает мне добавить учетную запись.
Что не так?
Ответить
17 февраля, 2017 at 20:34
Здравствуйте, Борис! Все нормально Вы сделали, так и должно быть.
Вообще, сейчас мало кто использует на сайте ссылку на электронный адрес.
Рекомендую использовать HTML формы.
PS: Борис, хотел спросить, если у Вас замечания или пожелания к моим курсам? Спасибо!
Ответить
24 февраля, 2017 at 10:33
Степан, я победил эту непонятку, правда сейчас не помню как, наверное сделал то, что предлагалось.
А что используют сейчас?
Куда и как надо делать ссылку, чтобы посетитель написал мне ?
24 февраля, 2017 at 11:13
Форму обратной связи. Посмотрите как создать форму в HTML (Урок 18).
Но к форме уже нужно написать PHP код для обработки данных переданых с формы
Спасибо, разобрался сам со ссылкой на электронный адрес.
появились другие вопросы:
1. Куда скачиваются файлы по ссылке?
Атрибут <> указывает куда помещается скачанный файл? (C:\users\user\downloads)?
2. Можно ли в ссылках на скачивание файлов указывать путь к файлу и путь к месту его нового размещения?
Ответить
17 февраля, 2017 at 21:05
1. Куда скачиваются файлы по ссылке?
На ваш компьютер. Как именно будет идти сохранение, все зависит от настроек браузера. То есть, в настройках браузера можно указать, чтобы файлы сохранялись автоматически (C:\users\user\downloads) или же, чтобы место для скачивания выбирал пользователь.
2. Можно ли в ссылках на скачивание файлов указывать путь к файлу и путь к месту его нового размещения?
Не совсем понял вопрос. Посмотрите вот эту статью, если я вас правильно понял (Как прописать путь к файлу)
Ответить
Спасибо, очень полезная информация для новичков и главное доступным языком.
Ответить
18 мая, 2017 at 12:34
Пожалуйста, Евгений!
Приятно слышать, что материал написан доступным языком.
Спасибо Вам за отзыв!
Ответить
Было интересно почитать. Зашел на ваш блог, прочел несколько статей и решил хоть где-нибудь оставить комментарий
Вы, случаем, ошибки на блогах вордпресс на заказ не исправляете?
Ответить
22 августа, 2017 at 15:14
Спасибо за комментарий!
Смотря какие ошибки. Напишите форме адрес сайта и какие ошибки нужно исправить.
Ответить
Спасибо Вам от души!
Очень помог материал. Удачи Вам в развитии сайта и вообще - счастья в жизни! С наступающим Новым годом! 
Ответить
20 декабря, 2018 at 11:06
Спасибо, Екатерина!
И Вас с наступающим Новым годом!
Ответить
Хорошая инструкция! Я раньше тоже всему этому училась, на сегодняшний день уже намного проще подобные вопросы решать. Кому интересна эта тема, советую прочесть эту статью ещё: [ссылка удалена], мне она очень помогла!
Ответить