Yhdistää Kuva HTML: Miten luoda linkkejä kuvia
otamme aloittelija ystävällinen tarkastella, miten luoda kuva linkkejä sivustoosi.
katsomme, mitä HTML-tageja koodissa pitää käyttää.
Jos et ole koskaan aiemmin tehnyt tätä, älä ” huoli! Opastan sinua koko prosessin ajan.
tämän artikkelin loppuun mennessä luot kuvalinkkejä ympäri verkkosivuasi ja Internetiä.,
aiomme myös tarkastella joitakin kehittyneempiä tekniikoita artikkelin loppupuolella, jos tunnet olevasi rohkea.
Grab a coffee, let ” s dive in!
Miten luodaan hyperlinkki?
saadaksesi linkkejä kotisivullesi sinun täytyy luoda hyperlinkki. Voit tehdä tämän HTML: ssä käyttämällä <a> tag. Jokainen <a> – tunnisteessa on kaksi osaa avaus-ja päätösmerkki.,
Tässä on esimerkki:
<a href="..."> ...</a>edellä, voit nähdä, että avoin tag:
<a href="...">
Luo käynnistä-hyperlinkin. Sitten me sulkea tag:
</a>
mikä Tahansa teksti, joka kirjoitetaan välillä avata ja sulkea tag on oman linkin teksti. Esimerkiksi:
<a href="..."> My Great Link</a>tästä linkki meidän täytyy lisätä URL-osoitteen. Voit tehdä tämän lisäämme URL-osoitteen href-attribuuttiin., URL voi osoittaa mihin tahansa Internetissä. Tässä esimerkissä aiomme käyttää PageDart kotisivu:
<a href="https://pagedart.com"> My Great Link</a>varmista, että myös täydellinen URL-osoite HTTPS edessä.
muuta HTML-kielessä ei ole kuin tekstinkäyttöisen linkin luominen. Seuraava, Anna ” s tarkastella, miten voimme lisätä kuvan web-sivulle HTML.
Miten luodaan kuva HTML: ään?
jos Haluat lisätä kuvan web-sivu käyttää img – tagin.,
Tämä tagi eroaa hieman a tagista siinä, että siinä ei ole avaus-ja päätösmerkkiä.
img tag sinun täytyy antaa tagille lähdetiedosto. Käyttää src määrite voit tehdä tämän:
<img src="https://pagedart.com/favicon-32x32.png">Tämä lisää kuvan näytön, kuten tämä:
Nyt meillä on kuva, meidän täytyy muuttaa sen linkin., Voit tehdä, että meidän täytyy lisätä <img> – tagin sisälle <a> tagien luominen yhdistää kuvan HTML-muodossa.
Let”s look at an example next.
Kuvan linkki
kääntää kuvan linkin, sinun täytyy lisätä <img> – tagin sisälle <a> – tagin., Joten kun meidän aiemmin esimerkiksi lähde-koodi näyttää tältä:
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"></a>Joka tuottaisi tämän HTML:
lisäämällä <img> – tagin sisälle <a> tag selain voi nähdä, että kuva pitäisi olla klikattava. Olet muuttanut kuvan linkiksi!
Jos käytät WordPress, voit lisätä tämä HTML-koodi sivullesi käyttämällä teksti-näkymä page editor.
voit myös lisätä tekstiä ja kuvia linkin sisään, let”s look at this.,
kuva ja teksti linkkinä
yllä oleva esimerkki näytti, miten linkiksi voi lisätä vain kuvan.
Mitä jos halusimme lisätä Linkille sekä kuvan että tekstin.
No, tässä tapauksessa, meidän täytyy varmistaa, että voimme lisätä tekstiä ennen kuin suljemme <a> – tagin:
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"> PageDart Home </a>edellä, olemme lisänneet ”PageDart Kotiin” sisälle <a> tag yhdessä <img> – tagin., Kun näkyy web-selaimen sivulla, se näyttää tältä:
Siellä on yksi määrite <img> – tagin, että emme ole keskustelleet, ja sinun pitäisi olla käyttäen.
alt attribuutti.
Kuvan Linkkejä ja Alt-Määrite
Kuvia internetissä pitäisi olla alt attribuutti. Tämä on kuvan tekstikuvaus.
näytönlukijat käyttävät alt-tekstiä näkövammaisten käyttäjien auttamiseen. Näytön lukijat lukevat tekstikuvauksen, kun se löytää kuvan.,
Voit tehdä tämän meidän lisätä alt määrite img – tagin, kuten tämä:
<a href="https://pagedart.com"> <img alt="PageDart.com" src="https://pagedart.com/favicon-32x32.png"></a>Nyt kun ruudunlukija lukee tämän kuvan, se tulee sanoa ”PageDart.com” ääneen.
Image alt-tekstiä kirjoitettaessa on tärkeää noudattaa parhaita käytäntöjä.
varmista, että ajattelet ruutulukijaa käyttävää henkilöä. Kirjoita alt-tekstikuvaus heille ja kuvaile kuva parhaaksesi.
Tämä on kaikki mitä sinun tarvitsee luoda linkittäviä kuvia HTML: ssä., Silti on olemassa muutamia kehittyneempiä tekniikoita, joita voit käyttää. Jos olet rohkea, katsomme näitä seuraavaksi.
Edistyneet Tekniikka: Kuvan Linkki CSS
kehittyneempi tekniikka on käyttää CSS. CSS tarkoittaa Cascading Tyyli arkki ja sen avulla voit muuttaa, miten HTML-sivu näyttää.
CSS voit asettaa taustakuvan elementti, kuten <a> – tagin.,
Tässä meillä olisi HTML-koodia, joka näyttää tältä:
<style> a { background-image: url("https://pagedart.com/favicon-32x32.png"); display: block; height:32px; width:32px; }</style><a href="https://pagedart.com"></a>Joten tällä kertaa ei ole mitään sisälle <a> – tagin mutta kuva on asetettu CSS-tyylillä. Tämä osoittaisi seuraavat selaimen:
Voimme käyttää samanlaista tekniikkaa, jossa <button> – tagin.
Edistyneet Tekniikka: Käyttämällä Painiketta
tässä esimerkissä aiomme käyttää <button> – tagin sijaan <a> – tagin.,
Me voimme itse luoda sama tuotos kuin esimerkiksi edellä käyttämällä tätä HTML:
Joka luo tämä lähtö:
– Täällä meillä on käytössä JavaScript avaa uuden selaimen välilehti. Käyttäjän lähettäminen Pagedartin kotisivulle.
minulla ei ole aavistustakaan, miksi ikinä tekisit näin! Mutta, halusin näyttää, mikä on mahdollista ja kuinka joustava HTML, CSS ja JavaScript voi olla.
viimeinen esimerkki, jonka aion näyttää, on kuvakartan käyttäminen.
Advanced Technique: Image Map
Image maps are single images with clickable areas., Ne ovat menettäneet suosiotaan vuosien varrella, mutta ne ovat edelleen osa HTML5-spesifikaatiota. Tämä tarkoittaa, että selaimet kuten Internet Explorer, Chrome ja Safari tukevat niitä.
Kartat ovat hyviä esimerkkejä Kuva Karttoja, kuten organisaatiokaavioita, kuten tämä:
Sitten, jotta jokainen vaaleanpunainen alue on klikattava linkki haluamme luoda map kuten tämä:
– Meillä on lisätty määrite usemap ja img – tagin.,
Sitten sisällä map – tagin meillä on area – tagin. Jokainen näistä alueista luo klikattavan alueen, joka toimii nappina.
Käyttäen Yhdistää Kuvan HTML
Olemme tutkineet viiden eri tapoja lisätä kuvan, linkin web-sivulla:
- kuvan linkki
- Kuvan ja tekstin linkki
- CSS asettaa kuvan linkki
- Käyttämällä a-painiketta linkki
- Käyttämällä kuvan kartat
Kaikki nämä voi kääntää kuvia osaksi linkkejä. Sinun pitäisi nyt luottaa kokeilla tätä itse.,
olemme myös tarkastelleet saavutettavuutta ja sitä, miten Alt-teksti asetetaan näkövammaisten auttamiseksi.