Въведение в изображението в HTML

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

HTML котва за маркиране

Маркерът HTML Anchor се използва за създаване на HTML хипервръзки към други уеб страници или мултимедийно съдържание, хоствано в мрежата. Нека да препратим синтаксиса по-долу, за да разберем как работят кодовете на котва и техните основни атрибути

Натисни тук!!

В горния пример атрибутът „href“ указва URL адреса на уеб страницата, към която бихме искали да пренасочим потребителя, докато кликнете върху текста „Щракнете тук !!“.

Нека видим пълния код по-долу:

продукция

->

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

  1. Невижданата връзка ще изглежда подчертана и в син цвят. За напр. Това е невиждана връзка
  2. Посетената връзка ще се подчертае и в лилав цвят. За напр. Това е вече посетена връзка
  3. Активната връзка изглежда подчертана и в червен цвят. За напр. Това е активна връзка

HTML етикет за изображение

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

Синтаксис

Нека сега разберем как работи всеки от атрибутите в img тага:

  1. src: атрибутът src определя пътя на файла с изображения, който се опитваме да заредим с този маркер. Тя може да бъде връзка към изображение, хоствано в мрежата с формат като example.com/images/dummy.png.webp, или файл с изображения, локално хостван на същия сървър като уеб страницата.
  2. alt: Атрибутът alt определя текста и описанието на изображението, което бихме искали да покажем, в случай че изображенията не се зареждат поради мрежова свързаност или друг проблем.
  3. Ширина и височина: Ширината и височината на двата атрибута определят ширината и височината на изображението, което бихме искали да покажем на уеб страницата. Освен това изображението би работило със 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 в уеб търсачките, използвани по целия свят. В нашия списък ще покажем логата на 3-те търсачки и като щракнете върху някой от потребителите на лога, ще бъдете пренасочени към съответната страница на търсачката. Нека създадем папка с име „тест за пренасочване“ и в същата папка нека запишем по-долу изображенията

1. Google

2. Yahoo

3. Bing

Сега ще създадем .html от името imageredirection.html в същия файл. Imageredirection.html ще съдържа следния код

Сега трябва да имаме достъп до HTML страницата от браузъра, за която ще напиша локалния си път „D: / redirectiontest / imageredirection.html“. след това браузърът ще визуализира HTML файла, за да генерира следния резултат:

->

Потребителите ще могат да се ориентират до съответната търсачка, като щракнат върху логото им. От горния пример можем да видим, че HTML е прост и гъвкав език, който ни позволява да комбинираме няколко тагове заедно и да постигнем сложна функционалност като тази. Комбинацията от използване на img и anchor tag е популярна комбинация. С допълнително HTML кодиране можем да добавим и различни HTML елементи като показване на свързани изображения в подреден или неподреден списък, като се използва

    или
      , Изключителната гъвкавост и простота, които HTML предоставя с всяка издадена версия, помага на дизайнерите на потребителски интерфейс и UX да проектират интерактивни и интуитивни уеб страници, които виждаме, докато сърфират в Интернет за ежедневни дейности.

      Препоръчителен член

      Това е ръководство за връзката към изображение в HTML. Тук обсъждаме различните видове HTML тагове, заедно със синтаксиса. Можете да разгледате и другите ни предложени статии, за да научите повече -
      1. HTML атрибути
      2. Тагове за HTML формат
      3. Предимства на HTML
      4. HTML маркери за изображения
      5. HTML рамки
      6. HTML блокове
      7. Задайте цвят на фона в HTML с пример
      8. Списък с подредени HTML | Видове атрибути със синтаксис

Категория:

Инструменти за уеб разработка