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

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

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

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

Что такое HTML

HTML расшифровывается как Hyper Text Mark-Up Language. В переводе с английского это означает «язык гипертекстовой разметки».

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

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

Под парными подразумевается то, что они должны быть использованы в паре в обязательном порядке. Например, открывающий тег указывает на то, в каком месте веб-страницы он начинает действовать, а закрывающий указывает на то, где его действие прекращается. Последний отличается от первого наличием символа «слэш» после открывающей угловой скобки. Например, <b> - открывающий тег, </b> - закрывающий.

Непарные теги в «напарнике» не нуждаются.

Многие теги могут иметь атрибуты - дополнительные элементы, которые придают ему какое-либо более конкретное значение. Например, тег <body>.

веб дизайн

Где используется HTML

Классическое понимание того, где нужен HTML, - создание сайтов.

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

Однако есть другие языки, которые позволяют добавить более интересные и нередко необходимые элементы веб-страницы:

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

Также HTML применяется в создании электронных писем для рассылки.

интернет рассылка

Что такое ссылка

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

Ссылки HTML обычно используются:

  • Для перехода на внешний веб-ресурс.
  • Для передвижения по страницам внутри сайта.
  • Для перехода на google-формы.

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

Виды ссылок

В классическом понимании ссылка - это адрес веб-ресурса, на который можно перейти, кликнув по нему.

виды ссылок

Кроме этого, существуют гиперссылки: текстовые и изображения. В этих случаях ссылка HTML «прячется» под каким-либо предложением (словом) или картинкой, и, чтобы перейти по ней, нужно кликнуть на текст или изображение.

Другие виды ссылок:

  • Непосещенная - ссылка, по которой еще не был совершен переход во время конкретной сессии. Например, если вы переходили по этой ссылке вчера, затем выключили компьютер, а сегодня вновь его включили, то сейчас ссылка вновь непосещенная, так как началась новая сессия.
  • Активная - в этом состоянии ссылка сохраняется в течение очень короткого времени: промежуток между кликом по ссылке и переходом по ней.
  • Посещенная - ссылка, по которой уже переходили как минимум один раз в течение одной сессии.

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

Изображение-гиперссылка внешний вид не меняет вне зависимости от того, посещенная она или нет.

Как вставить обычную ссылку

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

В случае с созданием сайта самостоятельно с помощью HTML необходимо вставить ссылку с помощью специального тега. Это будет выглядеть так: <a href=“адрес сайта”>адрес сайта</a>. Текст ссылки в HTML нужно указывать полностью, с протоколом.

Как вставить текстовую гиперссылку

Ранее говорилось, что текстовая гиперссылка выполняет ту же функцию, что и обычная ссылка, но выглядит более эстетично: вместо адреса сайта, который часто бывает излишне длинным, указывается какое-либо слово или фраза. Например, в предложении «Ищите информацию здесь» можно спрятать ссылку в слове «здесь». Оно будет выделено цветом и при клике на него пользователь перейдет на нужный сайт.

вставка гиперссылки

О том, как сделать ссылку HTML, уже говорилось ранее. Вставить текстовую гиперссылку можно с использованием того же тега. Разница только в том, что нужно указать между тегами текст, под которым ссылка будет спрятана: <a href=“адрес сайта”>видимый текст</a>.

Как вставить гиперссылку-изображение

Здесь немного сложнее. Мы используем тот же тег, но вместо текста нужно указать путь к изображению.

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

<a href=“адрес сайта”><img src=“путь к изображению/ссылка на изображение”></a>

К тегу <img> помимо src применимы и другие атрибуты, позволяющие регулировать высоту, ширину и месторасположение картинки и многое другое. Некоторые из них:

  • Src - определяет путь к изображению.
  • Lowsrc - идентичный предыдущему атрибуту, но указывается для низкокачественных изображений.
  • Height - высота картинки.
  • Width - ее ширина.
  • Alt - описание изображения. При наведении на фотографию или картинку, всплывет текст, указанный в этом атрибуте.
  • Border - определяет толщину рамки, находящейся вокруг изображения.

Атрибуты указываются после тега и входят в его состав. После атрибута нужно указать его значение. Например, для атрибутов «высота» или «ширина» (height, width) указывается высота изображения на веб-странице. Единица измерения - пиксели, если не задано другое.

Это будет выглядеть так: <a href=“адрес веб-страницы”<img src=“путь к изображению/ссылка на изображение” heigh=“высота изображения в пикселях” width=“ширина изображения в пикселях”></a>. Эти атрибуты помогут установить подходящий размер для картинки. Border помогает создать невидимую рамку вокруг изображения.

переход по ссылке

Вышеперечисленные атрибуты применимы и отдельно для тега вставки изображения. Например: <img=“путь к изображению/ссылка на изображение” alt=“описание”>.

Что такое ссылки-якори

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

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

ссылка якорь

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

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

Советы

Размещение различных блоков информации на веб-странице

Помощь от бывалых программистов:

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

Заключение

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

Статья закончилась. Вопросы остались?
Подписаться
Я хочу получать
Правила публикации
Следят за новыми комментариями — 6
Редактирование комментария возможно в течении пяти минут после его создания, либо до момента появления ответа на данный комментарий.