✅ Ссылка на изображение в HTML - Различные типы тегов HTML с кодом и синтаксисом

Введение в ссылку на изображение в HTML

Введение в ссылку на изображение в HTML

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

HTML Anchor Tag

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

Кликните сюда!!

В приведенном выше примере атрибут «href» указывает URL-адрес веб-страницы, на которую мы хотели бы перенаправить пользователя, нажимая на текст «Click here !!».

Давайте посмотрим полный код ниже:

Выход

С помощью приведенного выше примера вы сможете сделать следующие наблюдения

Непосещенная ссылка будет подчеркнута и выделена синим цветом. Например, Это не посещенная ссылка
Посещенная ссылка будет подчеркнута и выделена фиолетовым цветом. Например, Это уже посещенная ссылка
Активная ссылка выделяется красным цветом. Например, Это активная ссылка

HTML-тег изображения

Просматривая Интернет, я уверен, что вы наверняка сталкивались с несколькими веб-страницами, на которых присутствуют различные виды мультимедиа. Особенно изображения являются популярной формой мультимедиа, которую сегодня можно найти практически на всех интерактивных веб-страницах и веб-сайтах. Давайте разберемся с тегом image и его реализацией в HTML на примере ниже:

Синтаксис

Давайте теперь поймем, как работает каждый из атрибутов в теге img:

src: Атрибут src определяет путь к файлу изображения, который мы пытаемся загрузить с помощью этого тега. Это может быть ссылка на изображение, размещенное в Интернете, в формате, например example.com/images/dummy.png.webp, или файл изображения, локально размещенный на том же сервере, что и веб-страница.
alt: Атрибут alt определяет текст и описание изображения, которое мы хотели бы отобразить в случае, если изображения не загружаются из-за подключения к сети или по любой другой причине.
Ширина и высота: ширина и высота обоих атрибутов определяют ширину и высоту изображения, которое мы хотели бы отобразить на веб-странице. В противном случае изображение будет работать по умолчанию со 100% высотой и шириной.

Теперь давайте посмотрим полный HTML-код, необходимый для загрузки изображения на веб-странице. Сохраните следующее изображение с именем sunset.png.webp в папке «image_test» на вашем локальном диске.

Теперь в той же папке давайте создадим HTML-файл с именем sunset.html со следующим HTML-кодом:

Теперь перейдите в браузер на вашем компьютере и введите путь к файлу .html. Мои файлы хранятся на диске D, поэтому путь для меня будет

D: /image_test/sunset.html

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

тег, мы также можем отображать текст в соответствии с нашим требованием вокруг изображения. Теги anchor и img совместимы со всеми браузерами, такими как Google Chrome, Safari, Microsoft Edge, Firefox и Internet Explorer.

Связанные изображения в HTML

Теперь, когда мы с примерами поняли, как тег привязки и тег изображения работают по отдельности, давайте теперь поймем, как мы можем объединить две функции для достижения сценария, в котором мы хотим, чтобы пользователи перенаправлялись на новую веб-страницу одним нажатием на изображение., Чтобы сделать изображение кликабельным и перенаправить пользователя на другую веб-страницу, нам просто нужно поместить изображение в тег привязки. В приведенном ниже примере мы попытаемся включить в топ-3 поисковых систем, используемых по всему миру. В нашем списке мы покажем логотипы 3 поисковых систем и, нажав на любой из логотипов, пользователь будет перенаправлен на соответствующую страницу поисковой системы. Давайте создадим папку с именем «тест перенаправления» и в той же папке сохраним изображения ниже

1. Google

2. Yahoo

3. Бинг

Теперь мы создадим .html с именем imageredirection.html в том же файле. Imageredirection.html будет содержать следующий код

Теперь нам нужно получить доступ к HTML-странице из браузера, для чего я наберу свой локальный путь «D: / redirectiontest / imageredirection.html». Затем браузер отобразит HTML-файл, чтобы получить следующий результат:

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

Ссылка на изображение в HTML - Различные типы тегов HTML с кодом и синтаксисом