BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

В этом уроке вы научитесь вставлять ссылку в 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"
"http://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"
"http://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 (для начинающих)

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

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

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

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

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

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

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

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

<a href="http://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="http://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"
"http://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="http://bloggood.ru" target="_blank"> bloggood.ru </a> и она откроется в новом окне. Ну, а если навести курсор мышки на <a href="http://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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Вячеслав

    Доброго времени суток Степан. Когда уже будут уроки по php а то я в нем чайник полный :lol:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Вячеслав. Я думаю, после Нового Года я по любому выложу парочку простых уроков PHP. А HTML Вы уже знаете?

    Ответить

    Вячеслав отвечает:

    Иногда забываю кое что. Но сайтостроение без php – сами понимаете, не куда не пойдет.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    После праздников, обязательно сделаю пару уроков.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Вячеслав! Уроки по основам PHP Вы сможете здесь.

    Ответить

  2. Рамиль

    Здравствуйте, а как сделать ссылку на файл, если его имя не постоянно, например имя файла меняется, в зависимости от даты.
    т.е.

    http://имя-сайта/имя-раздела/имя-файла******.doc

    где ****** – изо дня в день меняющаяся дата.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте! Такую ссылку можно сделать с помощи PHP date( ).

    <a href="http://имя-сайта/имя-раздела/имя-файла<?php echo date('d'); ?>.doc"> ссылка</a>

    или так:

    <a href="http://имя-сайта/имя-раздела/имя-файла<?php echo date('j'); ?>.doc"> ссылка</a>

    Форматы дат можно посмотреть здесь http://bloggood.ru/php-i-mysql-osnovi-primer-podskazki/funkcii-list-isset-unset-date-count-i-exit.html/

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    здесь код

    Ответить

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

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

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

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

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 669
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3663