kép összekapcsolása HTML-ben: Hogyan hozzunk létre linkeket a képekből

kezdõbarát pillantást fogunk venni a képhivatkozások létrehozására a webhelyén.

megnézzük, hogy mely HTML címkéket kell használni a kódban.

Ha még soha nem tette ezt, ne aggódj! Végigvezetem az egész folyamaton.

A cikk végére képhivatkozásokat hoz létre az egész weboldalon és az Interneten.,

a cikk vége felé néhány fejlettebb technikát is megvizsgálunk, ha bátornak érzi magát.

Fogj egy kávét, merülj be!

hogyan hozhat létre hiperhivatkozást?

a Kezdőlap linkjeinek létrehozásához hiperhivatkozást kell létrehoznia. Ehhez a HTML-ben egy <a> címkét kell használni. Minden <a> tag két részből áll a nyitó-és záró tag.,

itt van egy példa:

<a href="..."> ...</a>

a fentiekből látható, hogy a nyitott címke:

<a href="...">

létrehozza a start a hiperhivatkozás. Ezután bezárjuk a címkét:

</a>

minden olyan szöveg, amelyet a nyitott és bezárás címke között írunk, a link szövege. Például:

<a href="..."> My Great Link</a>

ahhoz, hogy ezt hivatkozássá alakítsuk, URL-t kell hozzáadnunk. Ehhez hozzáadjuk az URL-t a href attribútumhoz., Az URL az internet bármely pontjára mutathat. Ebben a példában a PageDart honlapját fogjuk használni:

<a href="https://pagedart.com"> My Great Link</a>

győződjön meg róla, hogy a teljes URL-t elöl HTTPS-vel tartalmazza.

Ez minden, ami csak egy szöveges linket hoz létre a HTML-ben. Ezután nézzük meg, hogyan tudunk hozzáadni egy képet egy weboldal HTML segítségével.

hogyan hozhat létre képet HTML-ben?

Ha képet szeretne hozzáadni a weboldalához, használjon img címkét.,

Ez a címke egy kicsit különbözik a a címkétől, mivel nincs nyitó-és záró címkéje.

img címke létrehozásához forrásfájlt kell adnia a címkének. Ehhez használja a src attribútumot:

<img src="https://pagedart.com/favicon-32x32.png">

ez hozzáad egy képet a képernyőhöz, mint ez:

most van egy képünk, amelyet hivatkozássá kell alakítanunk., Ehhez hozzá kell adnunk egy<img> címkét a<a> címkékben, amely összekötő képet hoz létre HTML-ben.

nézzük meg a következő példát.

kép mint link

a kép hivatkozássá alakításához hozzá kell adnia a <img> címkét a <a> címkéhez., Így figyelembe a korábbi példa a forrás kód így néz ki:

<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"></a>

Ami ezt elő HTML:

hozzáadásával a <img> tag-be egy <a> tag a böngésző látom, hogy a kép legyen kattintható. Ön fordult a kép egy linket!

Ha WordPress-t használ, akkor ezt a HTML-kódot hozzáadhatja az oldalához az oldalszerkesztőben található szövegnézet segítségével.

szöveget és képeket is hozzáadhat a linken belül, nézzük meg ezt.,

kép és szöveg mint hivatkozás

a fenti példa azt mutatta, hogyan lehet csak egy képet hozzáadni hivatkozásként.

mi lenne, ha mind képet, mind szöveget szeretnénk hozzáadni egy linkhez.

Nos, ebben az esetben meg kell győződnünk arról, hogy hozzáadjuk a szöveget, mielőtt bezárnánk a <a> címkét:

<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"> PageDart Home </a>

a fentiekhez hozzáadtuk a “PageDart kezdőlap” a<a>címkén belül a<img> címkével együtt., Ha megjelenik egy webböngészőben az oldalon, akkor így fog kinézni:

van még egy attribútum a <img> címkén, amelyet még nem tárgyaltunk, és amelyet használnia kell.

Ez a alt attribútum.

Képhivatkozások és az Alt attribútum

képek az Interneten kell egy alt attribútum. Ez a kép szöveges leírása.

a képernyőolvasók az alt szöveget használják a látássérültek számára. A képernyőolvasók felolvasják a szöveges leírást, amikor képet talál.,

ehhez hozzáadunk egy alt attribútumot a img ilyen címkéhez:

<a href="https://pagedart.com"> <img alt="PageDart.com" src="https://pagedart.com/favicon-32x32.png"></a>

p > most, amikor a Képernyőolvasó elolvassa ezt a képet, azt fogja mondani: “PageDart.com” hangosan.

fontos, hogy kövesse a legjobb gyakorlatokat a kép alt szöveg írásakor.

ügyeljen arra, hogy gondoljon arra a személyre, aki a képernyőolvasót használja. Írja meg nekik az alt szöveges leírását, és írja le a képet a lehető legjobban.

Ez minden, amire szüksége van a képek összekapcsolásához HTML-ben., Még, van néhány fejlettebb technikákat, hogy lehet használni. Ha úgy érzi, bátor nézzük ezeket a következő.

Advanced Technique: kép, mint egy Link segítségével CSS

egy fejlettebb technika használata CSS. A CSS a lépcsőzetes stíluslapot jelenti, amely lehetővé teszi a HTML oldal megjelenésének megváltoztatását.

a CSS segítségével beállíthat egy háttérképet egy olyan elemre, mint például a <a> címke.,

itt lenne olyan HTML, amely így néz ki:

<style> a { background-image: url("https://pagedart.com/favicon-32x32.png"); display: block; height:32px; width:32px; }</style><a href="https://pagedart.com"></a>

tehát ezúttal nincs semmi a <a> címkén belül, de a kép a CSS stílus használatával van beállítva. Ez a következőket jeleníti meg a böngészőben:

hasonló technikát használhatunk a <button> címkével.

speciális technika: ebben a példában a<button>címkét fogjuk használni a <a> címke helyett.,

ugyanazt a kimenetet hozhatjuk létre, mint a fenti példa a HTML használatával:

, amely létrehozza ezt a kimenetet:

itt Javascriptet használunk egy új böngésző lap megnyitásához. A felhasználó elküldése az Oldalraart Kezdőlap.

fogalmam sincs, miért tenné ezt valaha! De meg akartam mutatni, hogy mi lehetséges és milyen rugalmas lehet A HTML, a CSS és a JavaScript.

az utolsó példa, amelyet meg fogok mutatni, egy képtérkép használata.

Advanced Technique: Image Map

Image maps are single images with clickable areas., Az évek során elvesztették népszerűségüket, de még mindig a HTML5 specifikáció részét képezik. Ez azt jelenti, hogy az olyan böngészők, mint az Internet Explorer, a Chrome és a Safari támogatni fogják őket.

Térképek vannak jó példák a Kép Térképek, például a szervezeti diagramok, így:

Majd, hogy minden rózsaszín terület egy kattintható link szeretnénk létrehozni egy map, mint ez: van hozzá az attribútum usemap, hogy a img tag.,

ezután a map címkén belül van egy area címke. Ezen területek mindegyike létrehoz egy kattintható területet, amely gombként működik.

a Összekapcsolása a Kép HTML

van nézett öt különböző módon hozzá egy képet, mint egy linket a web oldal:

1. Egy kép, egy link
2. Kép, illetve szöveg, mint egy linket
3. a CSS beállítani egy képet, mint egy linket
4. egy gomb Használatával, mint egy linket
5. A kép térképek

ezek viszont képek, linkek. Most már magabiztosnak kell lennie, hogy kipróbálja ezt.,

megvizsgáltuk a hozzáférhetőséget és azt is, hogyan állítsuk be az Alt szöveget a látássérültek segítésére.