Без ссылок интернет просто бы не смог существовать. Поэтому, что такое ссылки html и как они создаются знать необходимо. Если сайт построен на основе движка WordPress или Goomla, то для создания ссылки особо напрягаться не приходится. Выделил кусочек текста, который необходимо сделать ссылкой, щелкнул по значку "Вставить/изменить ссылку", и в открывшемся окне вставил адрес на ресурс, куда ведет ссылка, и поставил или не поставил галочку  "Открыть в новом окне". Все остальное сделает CMS. Но, как показывает опыт, ссылки приходится редактировать. Поэтому код написания ссылок необходимо знать.

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

Ссылка html начинается и заканчивается тегом <a></a>. Этот тег парный, поэтому у него обязательно должен быть закрывающий тег </a>. А теперь посмотрим что находится внутри этой парочки. код ссылки   Тег <a> имеет несколько атрибутов. Рассмотрим главные из них:   href --  этот атрибут показывает браузеру адрес документа, на который необходимо перейти. target -- с помощью этого атрибута браузеру сообщается куда необходимо загружать документ. Если этот  атрибут не будет написан, то документ (по умолчанию) будет открыт в этом же окне.

Для того чтобы документ был открыт в новом окне необходимо прописать этому атрибуту значение _blank. Что, кстати, всегда советую делать. title -- этим атрибутом добавляется всплывающая подсказка к тексту ссылки. Слово Яндекс,  перед закрывающим тегом, и будет ссылкой в тексте документа, которое (по умолчанию) будет подкрашено синим цветом с подчеркиванием синей линией.

Если на него нажать, то браузер сразу перекинет нас на главную страницу Яндекса.  Это, так называемая, внешняя ссылка, которая откроет любой ресурс по указанному URL адресу на любом сервере и в любой стране.

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

Если документы лежат в одной папке, то в атрибут href  вместо URL нужно вписать название этого документа. Ссылка html примет следующий вид: Атрибут targetздесь оставлен поэтому новый документ будет открыт в новом окне. Согласитесь, если работать с двумя документами сразу то переключаться между окнами намного удобнее чем открывать документ каждый раз заново.

Оглавление. Ссылка html

Ссылки так же, для удобства навигации, делают и в пределах одной страницы. Если документ большой и имеет несколько разделов и подразделов, то есть смысл составить оглавление и каждый пункт в этом оглавлении сделать ссылкой. Для этого в  каждом заголовке или в нужном месте страницы ставят определенные метки. Эти метки ставятся с помощью атрибута  id . Двух одинаковых меток на странице быть не должно. А теперь пишем на эти метки ссылки:   В атрибут href  метка вставляется с символом #.  Ели нужно установить метку на какой то отрывок в тексте, то атрибут id ставят в теге параграфа <p id=" метка">.

 

Ссылка html на E-mail

Для того чтобы отправить сообщение прямо с web-страницы можно сделать ссылку на электронную почту. Сделать это можно используя протокол эл. почты  mailto. После клика по тексту ссылки откроется установленная по умолчанию почтовая программа, в которой можно написать и отправить письмо.

 

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

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

В консоли выбираем пункт "Записи" -- "Все записи".  В окне "Редактировать запись" кликаем по вставленной картинке левой кнопкой мыши (т.е. выделяем ее), дальше в меню редактора кликаем по кнопке "Вставить/Изменить ссылку" и в открывшемся окне в поле ввода вставляем адрес ресурса на который ссылаемся, и ставим галочку "Открыть в новом окне", далее кликае по кнопке "Добавить ссылку".

Все ссылка html добавлена. WordPress заключит картинку в теги <a></a> и добавит необходимые атрибуты.

Теперь картинка превратилась в ссылку, и при клике по ней, в новом окне откроется ресурс, на который мы ссылались. В нашем случае это Yandex.ru. Если зайти в html редактор то код нашей картинки будет выглядеть следующим образом:

Желтым выделены открывающий и закрывающий тег ссылки. Все это можно прописать и руками.

Карта ссылок html

Кроме того, можно сделать так, чтобы разные участки одной картинки вели на разные ресурсы. Если взять туже картинку и верхнего голубя сделать ссылкой на Yandex, нижнего на Google а воробья на Rambler, то для этого необходимо воспользоваться тегами <map></map>. Код будет выглядеть примерно так:

  Как видите сам тег map имеет атрибут name и  идентификатор id которому можно присвоить любое название, единственное условие, оно должно быть уникальным для данной страницы. Этот идентификатор мы должны через решетку прописать в атрибут картинки usemap="# map_bird".

Другими словами, этот код нужно дописать в тег <img> через пробел в конце, для того чтобы браузер понял, какой картой пользоваться. Далее между тегами <map> находятся, в нашем случае, три области, теги <area>. Верхняя область (верхний голубь) ведет на Yandex.

Она прямоугольная shape="rect" и будет иметь четыре координаты левого верхнего и правого нижнего углов области. Координаты измеряются от левого и верхнего края картинки. Их нужно прописывать в атрибут code=" " между кавычками через запятую.

Точно так же прописывается и область нижнего голубя только вести она будет на Goole и координаты будут другие. Третья область (воробей) будет вести на Rambler и она представляет из себя круг shape="circle". Эта область имеет две координаты центра круга  и радиус.  Как видите это довольно трудоемкое дело.

Нужно определить области, замерить все координаты, прописать код. Но это все можно автоматизировать. В интернете есть много сайтов, как платных так и бесплатных, которые создают карту ссылок html в несколько кликов. На мой взгляд, самый простой и удобный, и к тому же бесплатный, это Online Image Map Editor. И так размещаем нашу картинку на странице еще раз. Заходим на сайт Online Image Map Editor.

Сервис предоставляет возможность выбрать картинку на компьютере, в сети интернет или потренироваться на  образце. Выбираем компьютер,  кликаем по кнопке "Выберите файл", выбираем картинку, кликаем по кнопке "Upload" (загрузить), затем кликаем по кнопке "accept" (принимать).

После этого выбранная картинка появится на сайте.

В первом слева открывающемся списке выбираем область выделения: прямоугольник(rectangle), круг (circle) и многоугольник (polygon). Наводим курсор на картинку, он превращается в крестик, и выделяем область. Поле "Coords" автоматически заполняется координатами.

В поле "href"  копируем и вставляем нашу ссылку html. По необходимости заполняем поле "Alt" (альтернативный текст). В поле "Target" выбираем new windows(в новом окне), рекомендуется. То же самое для всех последующих областей.

В нашем случае выбрано три области, две прямоугольных и одна круглая. После того как все области выбраны, слева внизу кликаем по кнопке "Code"

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

Теперь нам осталось  сообщить браузеру, как поступать с картинкой. Для этого, в код картинки, после высоты и ширины, необходимо добавить, через пробел, еще один атрибут usemap и через решетку присвоить ему значение id.

В коде выделено желтым. В нашем случае это будет выглядеть так: usemap="#imgmap201291134936" После всего этого, каждая птичка на картинке будет открывать в новом окне свой поисковик. Картинка рабочая, можно попробовать

P.S.  C помощью сервиса Online Image Mape editor можно из любой картинки cделать сколь угодно ссылок html как внутри сайта, так и на сторонние ресурсы всего за несколько кликов и бесплатно. Что такое ссылка html и как сделать ссылку? мы с вами разобрались.  Включайте фантазию и удачи вам.

рассказать друзьям и получить подарок