HTML ссылка. Создание ссылок в HTML. Как сделать ссылку на сайт на html


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

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

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

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

Как сделать ссылку в HTML, примеры

Чтобы создать ссылку используется тег <a>. Данный тег имеет определенные атрибуты:

1. HREF — отвечает за то, куда должна вести ссылка. Стандартная ссылка задается следующим образом: <a href="адрес ссылки">Текст ссылки</a>.

2. TARGET — отвечает за то, в каком окне будет открываться документ. По умолчанию новый документ открывается в текущем окне браузера. Атрибут «target» позволяет открывать ссылку в новом окне браузера. Данный атрибут имеет следующие параметры:

  • _blank — загружает страницу в новом окне;
  • _self — загружает страницу в текущем окне;
  • _parent — загружает страницу во фрейм-родитель;
  • _top — отменяет все фреймы и загружает страницу в новом окне.

3. NAME — используется для перехода к конкретной области внутри страницы. После символа «решетка» указывается в кавычках ключевое слово (закладка или метка). Для перехода к этой метке используется ссылка, в которой данная метка прописывается.

Рассмотрим, как сделать ссылку в HTML на примерах:

Пример 1. Внешняя ссылка.

<html> <head> <title>Пример внешней ссылки</title> </head> <body> <p><a href="//siteblogger.ru">Перейти на сайт</a></p> </body> </html>

В данном примере ссылка называется «Перейти на сайт», она ведет на мой сайт.

Пример 2. Внешняя ссылка, открывающаяся в новом окне.

<a href="//siteblogger.ru" target="_blank" title="Текст подсказки для ссылки">Перейти на сайт</a>

В данном примере ссылка будет открываться в новом окне. При наведении на ссылку будет появляться текст подсказки, прописанный в «title».

Пример 3. Внутренняя ссылка.

<a href="/uroki-wordpress/wordpress-lessons.html">Бесплатные уроки по WordPress</a>

Пример 4. Изображения в качестве ссылок.

<html> <head> <title>Пример изображения в качестве ссылки</title> </head> <body> <p><a href="kak-sozdat-sait.html"><img src="Рисунок.jpg"></a></p> </body> </html>

Пример 5. Ссылка на определенную область внутри страницы.

<html> <head> <title>Пример ссылки на определенное место на странице</title> </head> <body> <p><a href="list">Перейти к тексту</a></p> <p>Текст страницы...</p> <a name="#list"></a> </body> </html>

В данном примере на странице ставится метка «list» с помощью атрибута «name». Ссылка на эту метку обеспечит переход в определенную область страницы.

Пример 6. Ссылка на скачивание файла.

<a href="distr.rar" target="_blank">Скачать файл</a>

Пример 7. Ссылка на электронную почту.

<a href="mailto:[email protected]">Написать письмо</a>

Можно задавать цвет ссылок с помощью атрибутов, которые указываются в теге «body» в качестве параметров. Рассмотрим эти атрибуты:

  • link — не посещенная ссылка, по умолчанию она отображается синим цветом;
  • alink — активная ссылка, по умолчанию имеет красный цвет;
  • vlink — посещенная ссылка, имеет по умолчанию фиолетовый цвет.

Пример 8. Задание цвета ссылкам.

<html> <head> <title>Пример задания цвета у ссылок</title> </head> <body link="blue" vlink="black" alink="red"> ... </body> </html>

Таким образом, мы разобрались по какому принципу создаются ссылки в HTML. Ссылкам можно придавать определенные стили оформления. Про стили ссылок в CSS можно посмотреть в уроке, перейдя по ссылке.

siteblogger.ru

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

Перед тем, как в HTML сделать ссылку, нужно разобраться, что это такое и какие их виды бывают. Любая ссылка начинается с тега <а> и закрывается тегом </a>. Пользователю отображается только то, что заключено между этими тегами. Саму ссылку браузер не показывает. Ее можно увидеть при наведении в строке состояния.

Все ссылки можно разделять по разным критериям и видам. Например, ссылки делить можно по назначению:

  • внутри документа;
  • на другую веб-страницу;
  • на различные файлы;
  • на почтовые адреса.

Кроме этого, 2-й и 3-й пункт можно разделять на абсолютные и относительные адреса. Об этом немного позже. Сейчас рассмотрим самый простой случай.

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

Как в HTML сделать ссылку? Для этого можно открыть блокнот или любой другой редактор и переписать приведеный выше код.

Результатом будет следующее.

как сделать ссылку на страницу в html

Из чего состоит ссылка?

Запомните, что у любой ссылки обязательными являются:

  • открывающий и закрывающий тег;
  • текст ссылки;
  • атрибут href, в котором указывается адрес, куда будет направлен пользователь.

как в html сделать ссылку на файлОстальные атрибуты являются не обязательными. Их использую на свое усмотрение.

Как видите, на первом рисунке указана ссылка pages/about.html. Это относительная ссылка. На рисунке выше ссылка начинается с http://. В этом случае используется абсолютная ссылка.

Если вы не укажете закрывающийся тег, то всё последующее тоже будет являться продолжением этой ссылки. Будьте внимательны. Когда пишете код, сразу ставьте открывающий и закрывающий тег. Так безопаснее.

Как сделать картинку ссылкой в HTML?

Вместо текста в тегах <а>...</a> можно указывать изображения. То есть если пользователь нажмет на картинку, то перейдет по вашей ссылке.

Данный способ используется очень часто. Особенно в меню на красивых сайтах. Верстальщики перед созданием дизайна каркаса сайта всегда думают, как сделать ссылку на страницу в HTML. Точнее, в каком виде всё это сделать. В ход идут все способы, которыми владеет веб-мастер. Оформление рассмотрим немного дальше.

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

В атрибуте href можно указывать ссылки на файлы. Так обычно происходит, когда указывают ссылку на скачивание файла (архив, фильм, музыка, книга, текстовый файл и так далее).

Другими словами, вы можете указать в адресе что угодно. Если это не будет веб-страница, то браузер попытается ее скачать.

Ссылки внутри страницы

Наверняка вы посещали хотя бы один раз "Википедию". Там есть содержание статьи. И при нажатии на какой-нибудь пункт вы переноситесь к соответствующему подзаголовку. Такие ссылки называют ссылками внутри документа или закладками.

Как в HTML сделать ссылку внутри страницы?

как сделать картинку ссылкой в html

Всё очень просто. Указываем ссылки в тексте атрибутом <а>, но не указываем href. Нужно писать атрибут name и задать уникальное имя внутри документа. А в том месте, где вы указываете ссылки на эти заметки внутри документа, в атрибуте href пишем сначала решетку, а потом то уникальное имя.

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

Ссылки на электронную почту

Иногда нужно указать ссылку на электронную почту. Это можно сделать так.

Ссылки на электронную почту

После нажатия на эту ссылку у пользователя откроется приложение для управления почтой. Обычно это стандартный Outlook. Но эта программа обычно ни у кого не настроена. Поэтому обычно адрес электронной почты просто указывают в виде текста.

Атрибуты

Если вы разобрались, как в HTML сделать ссылку, то рекомендуется изучить остальные атрибуты тега <а>. Это очень важная информация. Рассмотрим самые основные:

  • Атрибут title - создает всплывающую подсказку при наведении на ссылку. Это весьма удобно. Благодаря этому можно предоставить дополнительную информацию пользователю.
  • Атрибут target - место, где будет загружен новый документ (веб-страница). Здесь могут быть следующие значения:
    • _blank - откроется новое окно браузера;
    • _self - открытие в текущем окне, это значение по умолчанию, его указывать не обязательно;
    • _parent - загрузка во фрейм-родитель, если их нет, то атрибут принимает значение_self;
    • _top - отмена всех фреймов и загрузка страницы в полный размер браузера. Если фреймы отсутствуют, то происходит аналогия с _self.
  • Атрибут download. Благодаря нему можно насильно заставить скачать файл, который указан в атрибуте href. У этого параметра нет значения. Указываем просто <a download href="img/photo.jpg">Ссылка на файл</a>. Если не указать download, то браузер просто откроет фотографию. В данном случае начнется ее закачка на компьютер.

Оформление ссылок

Если вы поняли, как сделать картинку ссылкой в HTML, то желательно позаботиться еще о том, чтобы она выглядела нормально. По умолчанию вокруг картинки, которая является ссылкой, появляется рамочка. Она смотрится грубо и некрасиво. Так как ее толщина 3 пикселя.

Чтобы этого не было, нужно указать border="0". То есть граница будет равной нулю. Вот такая ссылка из картинки будет выглядеть красиво и приемлемо. Иначе вы испугаете всех посетителей сайта.

Заключение

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

Помните, ссылки являются основой Всемирной сети. Без них она бы не существовала.

fb.ru

Как сделать ссылку | htmlbook.ru

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега <a>, который имеет единственный обязательный атрибут href. В качестве значения используется адрес документа (URL).

Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные ссылки начинаются с ключевого слова http:// (пример 1).

Пример 1. Использование абсолютных ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Абсолютная ссылка</title> </head> <body> <p><a href="http://www.yandex.ru">Поисковая система Яндекс</a></p> </body> </html>

Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса.

Примеры относительных адресов

//demo/ Эти две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге.

/images/pic.gif Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.

../help/me.html Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта.

manual/info.html Если перед именем папки нет никаких дополнительных символов, вроде точек, то она размещена внутри текущего каталога (пример 2).

Пример 2. Использование относительных ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Относительная ссылка</title> </head> <body> <p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p> <p><a href="tip.html">Как сделать такое же фото?</a></p> </body> </html>

Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html. Точка со слэшем (символ /) означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html.

htmlbook.ru

Делаем ссылку с помощью HTML

Обязательные атрибуты тега

К обязательным атрибутам стоит отнести href (адрес ссылки). Адрес ссылки может быть как абсолютным (например, “http://nubex.ru”), так и относительным (к, примеру, “/we/”). Относительный путь указывается относительно главной страницы (чтобы сослаться на главную страницу сайта, используйте “/”).

Между открывающим тегом <a> и закрывающим </a> пишется текст, который будет выводиться в виде гиперссылки (такой текст еще называют анкором или якорем). В качестве анкора может выступать не только текст, но и картинка.

Таким образом, самая простая ссылка в тексте HTML Nubex будет выглядеть так:

<a href="http://nubex.ru">Nubex</a>

Необязательные атрибуты тега

К основным необязательным атрибутам гиперссылок относятся:

  • title - служит для добавления всплывающей подсказки к ссылке;
  • name - используется для определения якоря внутри страницы;
  • target - указывает браузеру, куда загружать документ;
  • accesskey - дает возможность активации ссылки с помощью определенных горячих клавиш.

Рассмотрим более актуальный способ, как сделать ссылку на страницу в HTML с использованием основных атрибутов:

<a title="Конструктор сайтов Нубекс" accesskey="n" name="nubex" href="http://nubex.ru" target="_blank"> Нубекс</a>

Теперь посмотрим на нашу ссылку: Нубекс

Текст, указанный в атрибуте title будет всплывать при наведении курсора на ссылку. Атрибут target="_blank" означает, что ссылка будет открываться в новом окне. accesskey="n" позволяет активировать ссылку комбинацией клавиш (для Google Chrome – это Alt+N), где n - это указанная в теге клавиша. Чтобы определить, как работает тег name, рассмотрим его более подробно.

Атрибут name

Атрибут name используется для определения якоря внутри страницы. Это означает, что можно ссылаться на определенные области внутри одной страницы. Рассмотрим на примере:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Как сделать ссылку на сайт в HTML</title> </head> <body> <p><a name="nubex"></a></p> <p>Большое-большое полотно текста. Прокрути вниз и нажми «Вверх».</p> <p><a href="#nubex">Вверх</a></p> </body> </html>

В конструкторе сайтов «Нубекс» есть удобный механизм для вставки ссылок при редактировании ссылки. Для более подробной информации читайте статью Как сделать ссылку.

nubex.ru

Как вставить ссылку в HTML и оформить ее в CSS?

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

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

Навигация по статье:

Как вставить ссылку в HTML?

Итак, для создания простейшей ссылки нам необходимо воспользоваться атрибутом <a> и указать адрес, куда будет осуществляться переход при нажатии на ссылку.

HTML-код ссылки:

<a href="//impuls-web.ru" >Как сделать ссылку на сайт?</a>

<a href="//impuls-web.ru" >Как сделать ссылку на сайт?</a>

Кроме атрибута href, который задает адрес перехода, тегу <a> можно задавать следующие атрибуты:

  • download – указывает на файл для скачивания.
  • name – якорь.
  • title — всплывающая подсказка при наведении.
  • accesskey — активация ссылки с помощью комбинации клавиш.
  • coords – задает координаты расположение активной области.
  • hreflang – определяет язык текста по ссылке.
  • rel — отношения между ссылаемым и текущим документами.
  • rev — отношения между текущим и ссылаемым документами.
  • shape — указывает форму области ссылки для изображений.
  • tabindex — последовательность переключения между ссылками при нажатии на клавишу Tab.
  • target — имя окна или фрейма, куда браузер будет загружать документ.
  • type — тип документа, на который осуществляется переход.

Большинство из данных атрибутов используются достаточно редко. Наиболее часто используемыми атрибутами являются href, download, target и name.

Как открыть ссылку в новой вкладке HTML?

Для открытия новой вкладке мы можем использовать атрибут target с атрибутом _blank.

HTML-код ссылки:

<a href="//impuls-web.ru" target="_blank">Как сделать ссылку на сайт?</a>

<a href="//impuls-web.ru"  target="_blank">Как сделать ссылку на сайт?</a>

Как делается картинка-ссылка HTML?

Если вам нужно сделать картинку-ссылку в HTML, то для этого вам нужно просто поместить тег <img> с адресом картинки в тег <a>.

HTML-код ссылки:

<a href="//impuls-web.ru/ " target="_blank"><img src=" //impuls-web.ru/s2.jpg" alt="Текст" "/></a>

<a href="//impuls-web.ru/ " target="_blank"><img src=" //impuls-web.ru/s2.jpg" alt="Текст" "/></a>

При наведении на картинку, указатель мыши будет менять свою форму, а при клике по ней страница или документ будут открываться в новом окне.

Как сделать ссылку на скачивание файла HTML?

Если вы хотите сделать на своем сайте ссылку для скачивания какого либо файла, то можете использовать HTML-код ссылки:

<a href=" //impuls-web.ru/wp-content/uploads/Примеры текстов для политики конфиденциальности.rar" target="_blank" download="">Скачать </a>

<a href=" //impuls-web.ru/wp-content/uploads/Примеры текстов для политики конфиденциальности.rar" target="_blank" download="">Скачать </a>

При клике по такой ссылке будет появляться всплывающее окошко с предложением сохранить файл на компьютере:

Скачать файл

Как сделать якорь на странице html?

Не редко бывают случаи когда нужно сделать прокрутку на какое-то место на странице. Особенно часто такая задача встречается при создании посадочных страниц (Lending Page). Для этого мы можем использовать атрибут name.

Давайте рассмотрим как сделать якорь на странице html на примере создания кнопки для быстрого перехода наверх сайта.

В начале страницы, после открытия тега <body> делаем ссылку с атрибутом name, которая будет являться якорем, а в конце документа поставим ссылку с переходом на этот якорь.

HTML-код ссылки:

<body> <div><a name="to-top"></a></div> <p>...</p> <div><a href="# to-top">К началу страницы</a></div> </body>

<body>

<div><a name="to-top"></a></div>

  <p>...</p>

  <div><a href="# to-top">К началу страницы</a></div>

</body>

Как изменить цвет ссылки в html?

Как правило, ссылки выделены синим цветом и подчеркиванием. Для того, что бы это изменить цвет ссылки в html вам нужно в файле стилей CSS задать для ссылки следующие свойства:

.link a{ color:#444; /* Задаем цвет. Можно задать шестнадцатеричным значением, в RGB и.т.д.*/ text-decoration: none; /* отменяем подчеркивание*/ }

.link a{

color:#444; /* Задаем цвет. Можно задать шестнадцатеричным значением, в RGB и.т.д.*/

text-decoration: none; /* отменяем подчеркивание*/

}

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

.link a:hover{ color:#444; /* Задаем цвет при наведении указателя мышки */ text-decoration: none; /*Добавляем подчеркивание при наведении указателя мышки*/ }

.link a:hover{

color:#444; /* Задаем цвет при наведении указателя мышки */

text-decoration: none; /*Добавляем подчеркивание при наведении указателя мышки*/

}

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

Одним из наиболее привлекательных вариантов оформления ссылки является ее стилизация под кнопку. Оформить ссылку в виде кнопки можно двумя простыми способами.

  1. 1.Вы можете стилизовать ссылку под кнопку при помощи CSS-стилей. Для примера я оформила для вас кнопку «Подпобнее»:

    HTML-код ссылки:

    <div> <a href=" //impuls-web.ru " target="_blank" >Подробнее </a> </div>

    <div>

    <a href=" //impuls-web.ru " target="_blank" >Подробнее </a>

    </div>

    CSS-код ссылки:

    .link a { display:block; width:100px; margin:auto; padding:10px 20px; background:#58B159; color:#fff!important; text-decoration:none; font-size:18px; } .link a:hover { color:#fff!important; text-decoration:none!important; }

    .link a {

    display:block;

    width:100px;

    margin:auto;

    padding:10px 20px;

    background:#58B159;

    color:#fff!important;

    text-decoration:none;

    font-size:18px;

    }

     

    .link a:hover {

    color:#fff!important;

    text-decoration:none!important;

    }

    Вот что у нас получится в результате:

    Данный способ позволяет сделать очень привлекательную кнопку, и довить для нее различные эффекты при наведении и нажатии, благодаря использованию обширного количества css-свойств.

  2. 2.Так же вы можете пойти другим путем и сделать кнопку-картинку, то есть в качестве кнопки у вас будет картинка в виде кнопки. Большое количество готовых кнопок картинок вы можете найти в Яндексе по запросу «кнопка».

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

    Этот способ на много проще первого, но учтите, что вы не сможете добавить для такой кнопки различные эффекты при нажатии.

В данной статье я попыталась рассказать вам об основных вариантах использования тега <a> для создания ссылок и стилизации их под различные задачи. Надеюсь, данный материал будет для полезен для вас при создании ваших будущих проектов.

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

С уважением Юлия Гусарь

impuls-web.ru

HTML ссылка. Создание ссылок в HTML.

HTML ссылка — это один из ключевых элементов практически любой интернет-страницы. Сложно представить, если бы сайты создавались без ссылок. Это были бы одностраничные сайты с длиннющим текстом, в который бы авторы пытались вместить все, что обычно распределяется по нескольким страницам. Новостной сайт в этом случае был бы просто немыслим.

HTML код ссылки

HTML код ссылки на внешний сайт выглядит так:

1 <a href="http://somesite.com">somesite.com</a>

Если вы ссылаетесь на внутреннюю страницу вашего сайта, то указывать протокол «http» не обязательно. Достаточно указать адрес страницы с «/»:

1 <a href="/page.html">Страница моего сайта</a>

Виды ссылок в HTML

Ссылки бывают внешними (исходящими), внутренними и обратными (входящими). Внешние ссылки — это ссылки, которые ведут на внешние сайты. Внутренние ссылки ведут на страницы этого же сайта. Обратные ссылки — это ссылки с других сайтов, которые ссылаются на ваш сайт.

Стоит отметить, что поисковые системы не приветствуют сайты, которые имеют очень большое количество внешних ссылок, поэтому нужно стараться закрывать их от индексации (мы рассмотрим это ниже). Внутренние ссылки играют немаловажную роль в поисковой оптимизации сайта и используются во внутренней перелинковке.

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

Картинка-ссылка в HTML

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

Сделать изображение ссылкой в HTML можно следующим образом:

1 <a href="/page.html"><img src="picture.jpg"></a>

Как видно из примера, вместо текста мы размещаем html код картинки.

Ссылка в новом окне HTML

По умолчанию при нажатии на ссылку новая страница или сайт открываются в том же окне, что и текущая страница. Если вам нужно, чтобы новая страница открылась в новой вкладке браузера, то используйте атрибут target = ‘_blank’

1 <a href="http://site.com" target = "_blank">Новый сайт</a>

Ссылка на почту HTML

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

1 <a href="mailto:[email protected]">Моя почта</a>

Если пользователь кликнет по такой ссылке, то на его ПК запустится почтовая программа, где ему останется лишь ввести текст письма. Мы можем поступить еще лучше — сделаем автоматическое заполнение поле subject (тема письма). Делается это так:

1 <a href="mailto:[email protected]?subject=Вопрос с сайта">Моя почта</a>

Атрибут ссылки rel = nofollow

Если вы ссылаетесь на кого-то и не хотели бы, чтобы поисковики учитывали эту ссылку (передавали вес со страницы), то используйте атрибут rel =»nofollow».

1 <a href="http://site.com" target = "_blank" rel="nofollow">Новый сайт</a>

Этот атрибут понимает и Google, и Яндекс. Не забывайте про него, если вы ставите достаточно много ссылок на другие сайты.

Как изменить изменить цвет ссылки в HTML

Цвет ссылок мы можем менять с помощью css-стилей. Например, сделаем ссылку красного цвета:

1 <a href="http://site.com" rel="nofollow">Новый сайт</a>

Здесь мы прописали цвет ссылки непосредственно в атрибуте style, однако, более правильно было бы вынести это во внешний css-файл. Но если css для вас еще закрытая тема, то используйте способ, указанный здесь.

Как убрать подчеркивание ссылки

По умолчанию все ссылки на страницах сайта отображаются с нижним подчеркиванием. Это позволяет пользователю лучше ориентироваться в текстовом содержании и легко выделять ссылки. Но иногда подчеркивание может быть излишним для кнопок меню. В этом случае подчеркивание ссылки можно убрать опять же с помощью css-стилей — text-decoration:none;

1 <a href="http://site.com" rel="nofollow">сайт</a>

HTML ссылка на файл

Ссылки используются не только для того, чтобы ссылаться на внешние сайты или внутренние страницы того же сайта. Их можно использовать и для файлов, которые расположены на вашем сервере. Это может понадобиться, если вы предоставляете пользователям возможность скачивать файлы различного формата: mp3, rar, zip, docx, xls и т.д.

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

Рассмотрим пример:

1 <a href="/files/myfile.xls">xls</a>

Эта ссылка ведет на xls-документ, который расположен в папке нашего сайта «files». Если мы вставим такую ссылку на страницы нашего сайта, то при нажатии на нее откроется окно для скачивания. В Google Chrome закачка может начаться автоматически (настройки по умолчанию).

Другие посты

poleshuk.ru

Ссылки | htmlbook.ru

Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Особенность их состоит в том, что сама ссылка может вести не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте. Главное, чтобы к документу, на который делается ссылка, был доступ. Иными словами, если путь к файлу можно указать в адресной строке браузера, и файл при этом будет открыт, то на него можно сделать ссылку.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега <a>. Общий синтаксис создания ссылок следующий.

<a href="URL">текст ссылки</a>

Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти, а содержимое контейнера <a> является ссылкой. Текст, расположенный между тегами <a> и </a>, по умолчанию становится синего цвета и подчеркивается. В примере 8.1 показано создание нескольких ссылок на разные веб-страницы.

Пример 8.1. Добавление ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Ссылки на странице</title> </head> <body> <p><a href="dog.html">Собаки</a></p> <p><a href="cat.html">Кошки</a></p> </body> </html>

В данном примере создаются две ссылки с разными текстами. При щелчке по тексту «Собаки» в окне браузера откроется документ dog.html, а при щелчке на «Кошки» — файл cat.html.

Результат примера показан на рис. 8.1. Обратите внимание, что при наведении курсора мыши на ссылку, в строке состояния браузера отображается полный путь к ссылаемому файлу.

Рис. 8.1

Рис. 8.1. Вид ссылок на странице

Если указана ссылка на файл, которого не существует, например, его имя в атрибуте href набрано с ошибкой, то такая ссылка называется битая. Битых ссылок следует категорически избегать, поскольку они вводят посетителей сайта в заблуждение. Так, при щелчке по ссылке из примера 8.1 в браузере Safari откроется не сам документ, а окно с предупреждением (рис. 8.2).

Рис. 8.2

Рис. 8.2. Результат при открытии битой ссылки

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

Файл по ссылке открывается в окне браузера только в тех случаях, когда браузер знает тип документа. Но поскольку ссылку можно сделать на файл любого типа, то браузер не всегда может отобразить документ. При этом выводится сообщение, как следует обработать файл — открыть его или сохранить в указанную папку. Например, в браузере Firefox выводится следующее окно (рис. 8.3).

Рис. 8.3

Рис. 8.3. Окно для выбора действия с файлом в Firefox

htmlbook.ru