Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы HTML » Как вставить ссылку в HTML. Основы HTML для начинающих. Урок №6

03.07.2015


11:11


8543


10


Основы HTML для начинающих. Как вставить ссылку в HTML. Урок №6

Как вставить ссылку в 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».

Разобрались? :coffe:
Попробуйте все сделать сами. Добавьте еще пару страниц и привяжите страницы ссылками.

Как сделать ссылку на другой сайт

Как вставить ссылку на другую страницу, вы уже знаете. Чтобы сделать ссылку на другой сайт, достаточно в параметре «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; - это кода цветов ссылок

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

Вот пример того, что у вас может получиться, если правильно используете пройденный материал:

[посмотреть пример]

Подписывайтесь на обновление моего блога и не пропустите новых уроков по основам HTML. Удачи!



Случайные записи:

  1. Контейнер. Основы bootstrap 3 для начинающих. Урок №3
  2. Создание дополнительных классов. Основы bootstrap 3 для начинающих. Урок №23
  3. Оформление текста в CSS. Основы CSS для начинающих. Урок №5
  4. Рамка в CSS. Основы CSS для начинающих. Урок №12
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

Последние записи рубрики:

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Как прописать мета теги. Основы HTML для начинающих. Урок №21

10 ответа(ов) на статью: “Как вставить ссылку в HTML. Основы HTML для начинающих. Урок №6”

  1. Борис says:

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

    <a href="mailto:xxx@mail.ru" rel="nofollow"> Написать письмо</a>

    При переходе по этой ссылке почему-то попадаю в Outlook, который предлагает мне добавить учетную запись.
    Что не так?
    :|

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Здравствуйте, Борис! Все нормально Вы сделали, так и должно быть.
    Вообще, сейчас мало кто использует на сайте ссылку на электронный адрес.
    Рекомендую использовать HTML формы.
    PS: Борис, хотел спросить, если у Вас замечания или пожелания к моим курсам? Спасибо!

    Ответить

    Борис ответил(а) на комментарий:

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

    А что используют сейчас?
    Куда и как надо делать ссылку, чтобы посетитель написал мне ?

    Степка
    Степка ответил(а) на комментарий:

    Форму обратной связи. Посмотрите как создать форму в HTML (Урок 18).
    Но к форме уже нужно написать PHP код для обработки данных переданых с формы

  2. Борис says:

    Спасибо, разобрался сам со ссылкой на электронный адрес.
    появились другие вопросы:
    1. Куда скачиваются файлы по ссылке?
    Атрибут <> указывает куда помещается скачанный файл? (C:\users\user\downloads)?
    2. Можно ли в ссылках на скачивание файлов указывать путь к файлу и путь к месту его нового размещения? :???:

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    1. Куда скачиваются файлы по ссылке?
    На ваш компьютер. Как именно будет идти сохранение, все зависит от настроек браузера. То есть, в настройках браузера можно указать, чтобы файлы сохранялись автоматически (C:\users\user\downloads) или же, чтобы место для скачивания выбирал пользователь.
    2. Можно ли в ссылках на скачивание файлов указывать путь к файлу и путь к месту его нового размещения?
    Не совсем понял вопрос. Посмотрите вот эту статью, если я вас правильно понял (Как прописать путь к файлу)

    Ответить

  3. Евгений Логинов says:

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

    Ответить

    Степка
    Степка ответил(а) на комментарий:

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

    Ответить

  4. Максим Бойко says:

    Было интересно почитать. Зашел на ваш блог, прочел несколько статей и решил хоть где-нибудь оставить комментарий :smile:
    Вы, случаем, ошибки на блогах вордпресс на заказ не исправляете?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Спасибо за комментарий!
    Смотря какие ошибки. Напишите форме адрес сайта и какие ошибки нужно исправить.

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 231

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?