Propojení Obrazu v HTML: Jak vytvořit odkazy z obrázky
vezmeme začátečník přátelský podívat na to, jak vytvořit obraz odkazy na vaše webové stránky.
podíváme se, které značky HTML musíte v kódu použít.
Pokud jste to nikdy předtím neudělali, nebojte se! Provedu vás celým procesem.
na konci tohoto článku budete vytvářet odkazy na obrázky po celé své webové stránce a na internetu.,
také se podíváme na některé pokročilejší techniky ke konci článku, pokud se cítíte stateční.
Popadněte kávu, nechte se ponořit!
jak vytvoříte hypertextový odkaz?
Chcete-li získat odkazy na domovské stránce, musíte vytvořit hypertextový odkaz. Chcete-li to provést v HTML, musíte použít značku <a>. Každá značka <a> má dvě části značky otevírání a zavírání.,
Zde je příklad:
<a href="..."> ...</a>Ve výše, můžete vidět, že open tag:
<a href="...">
Vytváří začátek hypertextového odkazu. Poté značku uzavřeme:
</a>
jakýkoli text, který píšeme mezi značkou open a close, je text odkazu. Například:
<a href="..."> My Great Link</a>otočit to do link musíme přidat adresu URL. K tomu přidáme adresu URL k atributu href., Adresa URL může ukazovat na libovolné místo na internetu. Pro tento příklad budeme používat PageDart homepage:
<a href="https://pagedart.com"> My Great Link</a>ujistěte Se, že zahrnout úplnou adresu URL s HTTPS na přední straně.
to je vše, co je k vytvoření odkazu pouze pro text v HTML. Dále se podívejme, jak můžeme přidat obrázek na webovou stránku pomocí HTML.
jak vytvoříte obrázek v HTML?
Chcete-li přidat obrázek na webovou stránku, použijte značku img.,
tato značka se trochu liší od značky a v tom, že nemá značku pro otevírání a zavírání.
Chcete-li vytvořit značkuimg, musíte značce dát zdrojový soubor. Pomocí src atribut, jak to udělat:
<img src="https://pagedart.com/favicon-32x32.png">přidat obrázek na obrazovce, jako je tento:
Nyní máme obrázek, musíme proměnit odkaz., K tomu musíme přidat značku <img> uvnitř značky <a> vytvářející propojovací obrázek v HTML.
podívejme se na další příklad.
Obrázek jako odkaz
otočit obrázek do odkazu, je třeba přidat <img> tag uvnitř <a> tag., Takže s naší předchozí příklad zdrojový kód by měl vypadat takhle:
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"></a>Což by produkovat HTML:
přidáním <img> tag uvnitř <a> tag browser můžete vidět, že obraz by měl být klikací. Změnili jste obrázek na odkaz!
Pokud používáte WordPress, můžete tento HTML kód přidat na svou stránku pomocí textového zobrazení v editoru stránek.
do odkazu můžete také přidat text a obrázky, podívejme se na to.,
obrázek a Text jako odkaz
výše uvedený příklad ukázal, jak přidat pouze obrázek jako odkaz.
Co kdybychom chtěli přidat obrázek i text na odkaz.
No, v tomto případě, musíme se ujistit, že jsme přidat text předtím, než jsme blízko. <a> značka:
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"> PageDart Home </a>Ve výše uvedeném, přidali jsme „PageDart Domů“ uvnitř <a> tag společně s <img> tag., Při zobrazení ve webovém prohlížeči na stránku, bude to vypadat takhle:
Zde je další atribut na <img> tag, který jsme diskutovali, a měli byste být pomocí.
jedná se o atribut alt.
obrazové odkazy a atribut Alt
obrázky na internetu by měly mít atribut alt. Toto je textový popis obrázku.
čtečky obrazovky používají text alt k pomoci zrakově postiženým uživatelům. Čtenáři obrazovky přečtou textový popis, když najdou obrázek.,
K tomu přidáme alt atribut img tag jako tento:
<a href="https://pagedart.com"> <img alt="PageDart.com" src="https://pagedart.com/favicon-32x32.png"></a>Nyní, když screen reader čte tento obrázek bude říkat „PageDart.com“ nahlas.
při psaní textu obrázku alt je důležité dodržovat osvědčené postupy.
ujistěte se, že přemýšlíte o osobě, která používá čtečku obrazovky. Napište pro ně svůj alt textový popis a popište obrázek co nejlépe.
to je vše, co potřebujete k vytvoření propojovacích obrázků v HTML., Přesto existuje několik pokročilejších technik, které můžete použít. Pokud se cítíte stateční, podíváme se na tyto další.
pokročilá technika: obrázek jako odkaz pomocí CSS
pokročilejší technikou je použití CSS. CSS je zkratka pro kaskádové stylu listu a to vám umožní změnit, jak HTML stránka vypadá.
pomocí CSS můžete nastavit obrázek na pozadí na prvku ,jako je náš<a> tag.,
Tady budeme mít HTML, který vypadá takto:
<style> a { background-image: url("https://pagedart.com/favicon-32x32.png"); display: block; height:32px; width:32px; }</style><a href="https://pagedart.com"></a>Takže tentokrát není nic uvnitř <a> tag, ale obraz je nastavit pomocí CSS stylu. Tohle by se ukázat následující do prohlížeče:
můžeme použít podobnou techniku s <button> tag.
Pokročilé Technika: Pomocí Tlačítka
V tomto příkladu budeme používat <button> tag místo <a> tag.,
můžeme vytvořit stejný výstup jako v příkladu výše pomocí HTML:
, Která vytvoří tento výstup:
Zde jsme pomocí Javascriptu otevřete novou kartu prohlížeče. Odeslání uživatele na domovskou stránku PageDart.
nemám tušení, proč byste to někdy udělali! Chtěl jsem vám však ukázat, co je možné a jak flexibilní mohou být HTML, CSS a JavaScript.
poslední příklad, který se chystám zobrazit, je použití mapy obrázků.
pokročilá technika: mapa obrázků
obrazové mapy jsou jednotlivé obrázky s klikatelnými oblastmi., V průběhu let ztratili popularitu, ale stále jsou součástí specifikace HTML5. To znamená, že prohlížeče jako Internet Explorer, Chrome a Safari je budou podporovat.
Grafy jsou dobré příklady Obrazové Mapy, jako jsou organizační schémata, jako je tento:
Tak, aby se každý pink oblast a klikací odkaz bychom vytvořit map jako je tento:
přidali Jsme atribut usemap img tag.,
pak v tagu map máme značku area. Každá z těchto oblastí vytváří klikací oblast, která funguje jako tlačítko.
Pomocí Propojení Obrazu v HTML
podívali Jsme se na pět různých způsobů, jak přidat obrázek jako odkaz na své webové stránky:
- obrázek jako odkaz
- Obrázek a text jako odkaz
- Pomocí CSS nastavit obrázek jako odkaz
- Pomocí tlačítka jako odkaz
- Pomocí obrazové mapy
to Vše může otočit obrázky do vazby. Nyní byste měli mít důvěru, abyste to vyzkoušeli sami.,
také jsme se podívali na dostupnost a na to, jak nastavit Alt text, který pomůže zrakově postiženým.