✅ Посилання на зображення в HTML - Різні типи тегів HTML із кодом та синтаксисом

Введення в посилання на зображення в HTML

Введення в посилання на зображення в HTML

Посилання на зображення У HTML є майже на всіх сторінках, оскільки вони допомагають нам переходити з однієї сторінки на іншу на веб-сайті. Популярна комбінація - використовувати тег HTML якоря з тегом img HTML . За допомогою цієї комбінації ми можемо дозволити переміщення користувачів від однієї сторінки до іншої, натискаючи на зображення. Перш ніж ми поглибимось далі в цю тему, давайте спочатку розберемось у роботі та зображенні елементів якоря та зображення окремо, а потім поєднаємо їх для досягнення зв'язаного зображення.

Тег HTML-прив’язки

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

Натисніть тут!!

У наведеному вище прикладі атрибут "href" вказує URL-адресу веб-сторінки, на яку ми хотіли б перенаправити користувача, натискаючи текст "Натисніть тут !!".

Давайте подивимось повний код нижче:

Вихід

З вищенаведеним прикладом ви зможете зробити наступні спостереження

Невідоме посилання з’явиться підкресленим та синім кольором. Наприклад, наприклад. Це незавідане Посилання
Відвідане посилання з’явиться підкресленим та фіолетовим кольором. Наприклад, наприклад. Це вже відвідане Посилання
Активне посилання видається підкресленим і червоним кольором. Наприклад, наприклад. Це активне Посилання

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

Під час перегляду Інтернету я впевнений, що ви, напевно, натрапили на кілька веб-сторінок, які містять різні форми мультимедіа. Особливо зображення - популярна форма мультимедіа, яку сьогодні можна знайти майже на всіх інтерактивних веб-сторінках та веб-сайтах. Давайте розберемося з тегом зображення та його реалізацією в 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 і

Тег, ми також можемо відображати текст відповідно до наших вимог навколо зображення. І теги якоря, і img сумісні з усіма браузерами, такими як Google Chrome, Safari, Microsoft Edge, Firefox та Internet Explorer.

Зв'язані зображення в HTML

Тепер, коли ми зрозуміли на прикладах, як тег прив’язки та тег зображень працюють індивідуально, давайте тепер зрозуміємо, як ми можемо поєднати дві функції для досягнення сценарію, коли ми хотіли б, щоб користувачі перенаправляли на нову веб-сторінку при натисканні зображення . Щоб зробити зображення, яке можна натискати і перенаправити користувача на іншу веб-сторінку, нам просто потрібно вкласти зображення в тег прив’язки. У наведеному нижче прикладі ми спробуємо зарахувати топ-3 веб-пошукових систем, які використовуються по всьому світу. У нашому списку ми покажемо логотипи трьох пошукових систем і, натиснувши будь-який із логотипів, користувач буде перенаправлений на відповідну сторінку пошукової системи. Створимо папку з назвою "тест на перенаправлення", і в цій же папці збережемо зображення нижче

1. Google

2. Yahoo

3. Бінг

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

Тепер нам потрібно перейти до сторінки HTML із браузера, для чого я введу свій локальний шлях "D: / redirectiontest / imageredirection.html". Потім браузер візуалізує HTML-файл, щоб створити такий результат:

Користувачі зможуть перейти до відповідної пошукової системи, натиснувши їх логотип. З наведеного вище прикладу ми можемо помітити, що HTML - це проста і гнучка мова, яка дозволяє нам поєднувати кілька тегів разом і досягати такої складної функціональності. Комбінація використання тегів img та anchor є популярною комбінацією. За допомогою додаткового кодування HTML ми також можемо додавати різні елементи HTML, наприклад відображення пов'язаних зображень у впорядкованому чи не упорядкованому списку за допомогою

Посилання на зображення в HTML - Різні типи тегів HTML із кодом та синтаксисом