Главная » Все про HTML » Как сделать ссылку в HTML. Урок-5 (для начинающих)

Как сделать ссылку в HTML. Урок-5 (для начинающих)

2013-06-26 / Вр:22:13 / просмотров: 12380

В этом уроке вы научитесь вставлять ссылку в HTML файл. Но давайте вкратце рассмотрим, для чего нужна ссылка.

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

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

Я думаю, здесь все ясно. Теперь можно перейти к основной части темы «Как сделать ссылку в HTML».

Создать html ссылку - просто. Чтобы создать html ссылку в документе, достаточно использовать простенький элемент с одним атрибутом:

<a href="адрес ссылки"> ссылка</a>

Чтобы было всем все понятно, давайте посмотрим пример:

Ситуация такая, у вас есть два html файла «1. html» и «2.html».
Задание: как сделать ссылку с файла «1. html» на файл «2. html»?

Создайте html файл с именем «1. html» с таким кодом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как вставить ссылку в html</title>
</head>
<body>
Текст документа со
<a href="2.html"> ссылкой на файл - 2 </a>.
</body>
</html>

Обратите внимание на пункт 9. В ссылке прописан адрес другой страницы <a href="2.html">.

Создайте html файла с именем «2. html» с таким кодом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как вставить ссылку в html</title>
</head>
<body>
Текст документа №2 со
<a href="1.html"> ссылкой на файл - 1 </a>.
</body>
</html>

Результат:

При открытии файла «1. html»

Как сделать ссылку в HTML. Урок-5 (для начинающих)

откроется вот такой документ, как на примере снизу:

Если перейти по ссылке, откроется файл «2. html».

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

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

Как сделать ссылку на почту в html?

<a href="mailto:bloggood@rambler.ru">Написать письмо владельцу блога bloggood.ru</a>

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

<a href="https://bloggood.ru"> ссылка </a>

Как сделать html ссылку в новом окне?

<a href="ваша страница.html" target="_blank">ссылка</a>

Благодаря атрибуту target ="_blank", страница будет открываться в новом окне.

Как сделать цвет ссылки в html?

<body link="#000080" alink="#FFA500" vlink="#FF1493">
<a href="2.html">ссылка</a>
</body>

- link - цвет просто ссылки
- alink - цвет нажатой ссылки
- vlink - цвет посещеной ссылки
- #000080; #FFA500; #FF1493; - это кода цвета ссылок

Кодировку цветов вы можете посмотреть тут.

Как сделать подсказку ссылки?

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

<a href="https://bloggood.ru" title="Главная страница блога">
Главная
</a>

title="здесь подсказка ссылки".

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

Допустим, вам нужно скачать файл-архив «fail.zip».

<a href="fail.zip" target="_blank" title="скачать файл основы HTML">
Скачать
</a>

title="скачать файл основы HTML" - подсказка
target="_blank" - ссылка откроется в новом окне.

Закрепим материал, и все сказанное выше в примерах слепим в одно целое.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как вставить ссылку в html</title>
</head>

<body link="#000080" alink="#FFA500" vlink="#FF1493">
Вот <a href="2.html">ссылка</a> на страницу №2.
А это, ссылка на сайт <a href="https://bloggood.ru" target="_blank"> bloggood.ru </a> и она откроется в новом окне. Ну, а если навести курсор мышки на <a href="https://bloggood.ru" target="_blank" title="Привет!!! Как дела?"> эту ссылку </a>, тогда можно увидеть подсказку.
<br>
<a href="fail.zip" title="скачать файл">Скачать файл</a>
<br>
<br>
<a href="mailto:bloggood@rambler.ru">Написать письмо владельцу блога bloggood.ru</a>
</body>

</html>

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

Если что-то было не понятно или у вас возникли вопросы, пишите в комментариях. Отвечу быстро.

Переходим к следующему уроку - Как вставить ссылку-якорь в HTML