Как вставить ссылку в текст и картинку. Виды ссылок

Можно выделить 2 вида ссылок: внешние и внутренние.

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

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

Внешние ссылки

С помощью этого кода можно вставить ссылку в текст:

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

Вместо «ссылка» вставляете свою ссылку, а вместо «текст» вставляете слово или любой текст:
Пример: Я вставил ссылку в слово «Блог». Кликнув на него, Вы перейдёте по ссылке http://zheki.net/. Вот какой код получился:

<a href="http://zheki.net/">Блог</a>

А теперь, если вы хотите разобраться что к чему, распишу подробнее:

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

<a> и <a/> — это теги, между которыми располагается текст ссылки.

Адрес документа для перехода записывается в элементе a в качестве значения атрибута href. После href ставится знак =.

<a href="http://zheki.net/">Блог</a>

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

Внутренние ссылки

Чтоб создать внутреннюю ссылку, нужно с помощью атрибута name элемента a определить место, к которому ссылка приведёт. Необходимый кусок текста заключается в элемент a. Но не обязательно помещать туда текст, можно просто установить теги этого элемента в месте, к которому браузер перейдёт при клике на ссылку.

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

Теперь нужно создать ссылку на эту метку. Она создаётся как и ссылка на внешний документ, но вместо url-адреса надо ввести адрес метки в виде #met1 (это имя вашей метки).

При клике на ссылке браузер автоматически перейдёт к месту, указанному меткой.

Вот такой код для примера:

<a name="met1">Это метка для перехода 1</a>
<a href="#met2">Кликните для перехода к метке 2</a>
<a href="#met1">Кликните для перехода к метке 1</a>
<a name="met2">Это метка для перехода 2</a>

Вот что вышло:
Это метка для перехода 1
Кликните для перехода к метке 2
Кликните для перехода к метке 1
Это метка для перехода 2

 Общие моменты

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

У элемента a есть вспомогательные атрибуты: target, title, rel.

Чтобы ссылка открывалась в новом окне, используем атрибут target и его значение _blanc.

<a href="ссылка" target="_blank">текст</a>

Чтобы создать всплывающую подсказку для ссылки, используем атрибут title.

<a href="ссылка" title="текст всплывающей подсказки">текст</a>

Например:

<a href="http://zheki.net/obo-mne/" title="Кликнув по ссылке, Вы сможете узнать обо мне">Обо мне</a>

Обо мне

В данном случае ссылка откроется в текущем окне.

А чтобы ссылка со всплывающей подсказкой открылась в новом окне, код будет такой:

<a href="ссылка" target="_blank" title="текст всплывающей подсказки">текст</a>

 Пример:

<a href="http://zheki.net/obo-mne/" target="_blank" title="Кликнув по ссылке, Вы сможете узнать обо мне">Обо мне</a>
Обо мне

Чтобы не передавать вес/авторитет (Тиц, PR) другому сайту, используем атрибут rel и его значение nofollow.

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

<a href="ссылка" rel="nofollow">текст</a>

Так мы указываем поисковым системам, что вес страницы не нужно передавать другому внешнему сайту или внутренней странице нашего сайта.

Пример кода с атрибутами target, title, rel и их значениями, о которых шла речь выше:

<a href="http://zheki.net/obo-mne/" rel="nofollow" target="_blank" title="Кликнув по ссылке, Вы сможете узнать обо мне">Обо мне</a>
Обо мне

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

<a href="ссылка" target="_blank" title="текст всплывающего окна"><img src="ссылка на картинку"/></a>

Пример:

<a href="http://zheki.net/" target="_blank" title="Кликнув на изображение, вы попадёте на главную страницу этого блога"><img src="http://zheki.net/wp-content/uploads/2013/10/Kotik.jpg" /></a>

Не забываем про rel=«nofollow», если нужно.

Как вставлять ссылки в WordPress

WordPress нам всё упростил.

Чтоб вставить ссылку в текст, нужно выделить текст, в который хотим вставить ссылку, затем, в верхнем меню редактироания записи, нажать на кнопку . В появившемся окне вводите адресс, заголовок и, если хотите чтобы ссылка открылась в новом окне, ставите галочку напротив «открыть в новом окне/вкладке». Если хотите чтобы ссылка вела на внутреннюю страницу вашего сайта, то в строке «Поиск» начните вводить название и потом выберите нужную страницу.

Однако rel=«nofollow» в код приписывать нужно самостоятельно, переключившись в режим «Текст».

Чтобы удалить ссылку из текста — выделяете этот текст и жмёте на кнопку .

Как вставить ссылку в картинку в WordPress? При загрузке картинки в WordPress, ссылка на неё автоматически создаётся WordPress-ом. В окне загрузки медиафайла вы увидите эту ссылку справа снизу. Поэтому объяснять тут в принципе нечего. Скажу лишь что для того, чтобы вставить картинку в WordPress, нужно в меню редактирования записи нажать на кнопку , или нажав на кнопку «Медиафайлы» в админ. панеле слева. Дальше всё интуитивно понятно.

Однако когда Вы вставите картинку в запись, у Вас может возникнуть вопрос «Как убрать ссылку из картинки?» Для этого нужно нажать на эту картинку, а затем нажать на кнопку . Откроется окно редактирования этого изображения. Там увдитие строку «Ссылка», а ниже кнопку «Нет». Именно это кнопка и уберёт ссылку из картинки. Но это не значит что у картинки вообще не будет ссылки. Ссылка есть у каждой картинки, хранящейся в интернете, просто теперь картинка не будет кликабельной.

Не за что :)

Эта статья была опубликована в категории Уроки автором Zheka. Bookmark the permalink.

12 ответа на “Как вставить ссылку в текст и картинку. Виды ссылок

  1. Еще для внешних ссылок нужно обязательно прописывать атрибут rel=«nofollow» — иначе вес страницы будет передаваться другим сайтам. Более того, если ссылка ведет на ненадежный ресурс, то гугл может твой сайт покарать.
    Ко внутренним ссылкам тоже стоит применять, когда указываешь ссылку на страницу, которую не собираешься продвигать. Чтобы не терять вес важной страницы.

    • Cпасибо! В моём учебнике по HTML и CSS нету этого. Дополню урок

  2. нда…… слов нет
    «Более того, если ссылка ведет на ненадежный ресурс, то гугл может твой сайт покарать……» — а это вообще заставило плакать.

  3. СПАСИБО ОГРОМНОЕ от чайника!!!:-) на других сайтах было очень непонятное объяснение — а у Вас — на пальцах!

    • Не за что. Я ж писал и для себя тоже, поэтому наверно так понятно :)

  4. А еще можно поставить плагин чтобы каждый раз не прописывать rel=»nofollow»
    Я поставил себе Platinum Seo Pack и уже три года как проблем не знаю :)

  5. Внутренние ссылки (ссылки на метки) — это ссылки внутри данного сайта, или внутри одной страницы сайта?

  6. Добрый день. zheka, спасибо большое за доступное пояснение. Может ещё подскажете, как сделать чтоб одна картинка при наведении курсора менялась другой картинкой и при нажатии переходила по ссылке? Самое главное, как это сделать в Вордпресс?

    вот этот код тупо слетает и блокирует страницу для дальнейшего редактирования.

    a.rollover {
    background: url(images/sun1.png); /* Путь к файлу с исходным рисунком */
    display: block; /* Рисунок как блочный элемент */
    width: 196px; /* Ширина рисунка */
    height: 183px; /* Высота рисунка */
    }
    a.rollover:hover {
    background: url(images/sun2.png); /* Путь к файлу с заменяемым рисунком */
    }

    может есть другие варианты?

    Спасибо заранее.

    • Здравствуйте, Александр! К сожалению тут ничем помочь не могу. Сам такой эффект не делал. Могу лишь посоветовать получше пошерудить интернет.
      Как сделать в вордпресс? Да наверно самым простым будет код html эффекта вставить прямо в страницу в режиме «текст». И главное объект заключить в нужные теги, которые соответствуют этому коду. Код отображаться в записи не будет, а эффект работать будет.

Добавить комментарий для Artem Ritter Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *