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

Ссылка HTML

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

 

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

 

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

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

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

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

<a href="URL"> Отображаемый текст </a>

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

<a href="https://promotiger.ru"> SEO блог </a>

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

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

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

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

 

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

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

<img src="URL изображения" alt="Описание изображения">

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

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

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

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

<a href="URL"> <img src="URL изображения" alt="Описание изображения"> </a>

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

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

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

<a href="URL" target="_blank"> Текст вашей ссылки </a>

 

<a href="URL" target="_blank"> <img src="URL изображения"> </a>

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

Оцените статью
( Пока оценок нет )
Поделиться с друзьями
Блог [SEO Jedi]
Добавить комментарий

  1. Катя

    Хорошая инструкция! Я раньше тоже всему этому училась, на сегодняшний день уже намного проще подобные вопросы решать. Кому интересна эта тема, советую прочесть эту статью ещё: [CENSURED], мне она очень помогла!

  2. SEOjedi автор

    Добрый день, Алекс! Это понятно, все для пользователей делается. Но на мой взгляд, чувствуешь себя спокойнее, когда понимаешь, как это работает …

  3. Polaris

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

  4. SEOjedi автор

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

  5. palmira

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

  6. алекс

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