Основы HTML (часть 3)

Fima Korolev

Ссылка HTML

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

 

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

 

Этот пост будет охватывать:

  • Текстовые ссылки HTML – добавление текста, который связан с определенным URL
  • Добавление изображения с помощью HTML
  • Ссылка изображения HTML – добавление изображения, которое связано с конкретным URL

Создание ссылок с использованием HTML

Для того, чтобы размещать ссылки на другие страницы сайта (внутренняя перелинковка) или на внешние ресурсы, а так же создавать ссылки изображения HTML, вам нужно знать код HTML. Вот так выглядит простая текстовая ссылка:

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

Ну а вот так (SEO блог) она будет выглядеть в записи блога, комментарии, форума и т.д.

Как это работает?

Рассмотрим ссылку <a href=”URL”>, она может быть разбита на три части:

  1. <A HREF = это для ссылки. Не имеет значения, текст это или изображение, это всегда код для ссылки. Следующим важным моментом является указание “URL” для ссылки, другими словами, куда браузер будет направлять нас, когда мы нажимаем на элемент (текст или картинка). При указании адреса ссылки вам следует всегда использовать абсолютный адрес – это означает, что URL начинается с http:// иначе вы увидите сообщение об ошибке. Не забывайте закрывать эту часть с помощью >.
  2. Второй раздел представляет собой отображаемый текст. Он будет виден в вашем блоге сайте или комментарии в виде ссылки, как только HTML преобразует его.
  3. И, наконец, третий раздел. В HTML, если вы открываете тег, такой как <a href=”URL”> необходимо закрыть его, поэтому мы добавляем </a> в самом конце.
Рекомендую к прочтению:  Чек-лист по созданию интернет-магазина

 

Добавление изображения с помощью HTML

Теперь давайте посмотрим, как правильно добавить изображение в блоге или комментария. Опять же, это делается при помощи простого кода:

 Как это работает?

  1. Первая часть уточняет, что этот код является изображением <IMG .
  2. Вторая часть является источником изображения SRC = “URL изображения”, другими словами, где находится изображение. Это может быть адрес на вашем сайте/блоге или на внешнем ресурсе, таким как Dropbox, Flickr, Photobucket и т.д. Главное, использовать правильный URL,  чтобы изображение отображалось. Здесь не используется URL страницы, а используется URL адрес изображения. Как правило, этот URL заканчивается в типом файла изображения, таким как PNG, JPEG и т.п.
  3. В третей части добавим, alt = “Описание изображения” , чтобы указать браузеру, что изображено на картинке. alt очень важен для SEO. А потом закрытие > .

Создание ссылки изображения HTML

Теперь, после того, как вы узнали, как создать ссылку HTML и как добавить изображение, очень просто объединить их. Создать изображение, которое будет вести на определенный URL при нажатии. Вот код ссылки изображения HTML, но на этот раз вместо текста мы добавляем код для изображения.

Как это работает?

  1. Мы открываем ссылку <A HREF = и говорим браузеру, куда хотим перейти по ссылке “URL” и закрыть первую часть > .
  2. Вместо текстовой ссылки мы сообщаем браузеру, что хотим использовать изображение <IMG , которое можно найти в определенном месте SRC = “URL изображения” и добавить описание ссылки изображения HTML alt = “Описание изображения” перед закрывающим тегом изображения > .
  3. Ну и как обычно, не забываем закрывать ссылку с </a> , вот и все.
Рекомендую к прочтению:  Как защитить wordpress

Иногда мы хотим, чтобы связанная со ссылкой страница открывалась в новой вкладке браузера. Для этого нужно добавить такой код в первой части: target = "_blank"  перед > . Это можно сделать и для ссылки изображения HTML и для текстовой ссылки.

 

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

VN:F [1.9.22_1171]
Рейтинг статьи:
Rating: 6.5/7 (2 votes cast)
Основы HTML (часть 3), 6.5 out of 7 based on 2 ratings

5 комментариев »

  1. Polaris:

    Толково изложенная информация, с хорошим оформление. Спасибо, познавательно)

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  2. palmira:

    Я еще прописываю title и в текстовой ссылке и в изображении.

    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
    • Я тоже это делаю (по моей ссылке в начале поста видно), но на продвижение это не влияет, поэтому решил не акцентировать внимание на этом..

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)
  3. алекс:

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

    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
    • Добрый день, Алекс! Это понятно, все для пользователей делается. Но на мой взгляд, чувствуешь себя спокойнее, когда понимаешь, как это работает …

      VN:F [1.9.22_1171]
      Rating: 0 (from 0 votes)

Оставить комментарий

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

Что-то типа КАПЧИ :) *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">