Skuffer Bilde i HTML: Hvordan lage linker fra bilder
Vi er kommer til å ta en nybegynner vennlig titt på hvordan å lage bilde lenker på ditt nettsted.
Vi vil se på hvilke HTML-kodene du trenger for å bruke i koden.
Hvis du har aldri gjort dette før, don t bekymre deg! Jeg vil guide deg gjennom hele prosessen.
Ved slutten av denne artikkelen, vil du være å skape image internettlenker alle over din web-side og Internett.,
Vi også kommer til å se på noen mer avanserte teknikker mot slutten av artikkelen hvis du føler deg modig.
Ta en kaffe, let ‘ s dykke ned i!
Hvordan du Oppretter en Hyperkobling?
for Å få linker på hjemmesiden din, må du opprette en hyperkobling. For å gjøre dette i HTML-du trenger å bruke en <a> – tag-en. Hver <a> – tag-en har to deler åpning og lukking tag.,
Her er et eksempel:
<a href="..."> ...</a>I det ovenfor, kan du se at den åpner tag:
<a href="...">
Oppretter den starten av hyperkobling. Da er vi i nærheten tag med:
</a>
All tekst som vi skriver mellom åpne og lukke-koden er din link tekst. For Eksempel:
<a href="..."> My Great Link</a>for Å gjøre dette til en link vi trenger for å legge til en URL. For å gjøre dette, må vi legge til URL-adressen href-attributtet., URL-en kan peke på hvor som helst på internett. For dette eksempelet er vi kommer til å bruke PageDart hjemmeside:
<a href="https://pagedart.com"> My Great Link</a>sørg for å inkludere den fullstendige URL-adressen med HTTPS i front.
Det er alt det er til å opprette en tekst-bare link i HTML. Neste, la»s se på hvordan vi kan legge et bilde til en web-side ved hjelp av HTML.
Hvordan Lager du et bilde i HTML?
for Å legge til et bilde i din web-side bruker en img – tag-en.,
Denne taggen er litt forskjellig fra en a – merke i at det ikke har en innledende og en avsluttende kode.
for Å lage en img – koden du trenger for å gi tag-en kilde filen. Bruk src – attributtet til å gjøre dette:
<img src="https://pagedart.com/favicon-32x32.png">Dette vil legge til et bilde på skjermen som dette:
Nå har vi et bilde vi trenger å slå den inn i en kobling., For å gjøre det trenger vi å legge til en <img> tag inni <a> – kodene for å opprette en kobling bilde i HTML.
La»s se på et eksempel på neste.
Bilde som en lenke
for Å slå et bilde til en link som du må legge til en <img> tag inni <a> – tag-en., Så tar vårt tidligere eksempel kildekoden ville se ut som dette:
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"></a>Som ville lage denne HTML:
Ved å legge til en <img> tag inni en <a> – tag-leseren kan se at bildet skal være klikkbar. Du har slått på bildet inn en link!
Hvis du bruker WordPress så kan du legge inn denne HTML-koden til siden din ved hjelp av teksten du vil vise i siden editor.
Du kan også legge til tekst og bilder inne på linken, let ‘ s titt på dette.,
Bilde og Tekst som en Link
eksemplet ovenfor viste hvordan legger du bare et bilde som link.
Hva om vi ønsket å legge til både et bilde og tekst til en link.
Vel, i dette tilfellet, må vi sørge for at vi vil legge til tekst før vi stenger <a> – taggen:
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"> PageDart Home </a>I den ovenfor, vi har lagt til «PageDart Hjem» inni <a> – koden sammen med <img> – tag-en., Når den vises i en nettleser på side vil det se ut som dette:
Det er en mer attributtet i <img> – tag-en som vi ikke har diskutert, og du bør bruke.
Det er alt attributtet.
Bilde Lenker og Alt-Attributt
Bilder på internett bør ha en alt attributtet. Dette er en tekst-beskrivelse av bildet.
skjermlesere bruker alt-teksten for å hjelpe brukere med svekket syn. Skjermen leserne vil lese opp teksten beskrivelse når den finner et bilde.,
for Å gjøre dette vil vi legge til en alt – attributtet i img – koden som dette:
<a href="https://pagedart.com"> <img alt="PageDart.com" src="https://pagedart.com/favicon-32x32.png"></a>Nå når skjermen leser dette bildet, det vil si «PageDart.com» høyt.
Det er viktig å følge beste praksis når du skriver bilde som alt-tekst.
sørg for at du tenker på personen som bruker skjermleser. Skriv din alt-tekst beskrivelse for dem og beskrive bildet som best du kan.
Dette er alt du trenger for å lage kobling av bilder i HTML., Likevel, det er et par mer avanserte teknikker som du kan bruke. Hvis du føler deg modig vi vil se på disse neste.
Avansert Teknikk: Bildet som en Kobling ved hjelp av CSS
En mer avansert teknikk er å bruke CSS. CSS står for Cascading Style Sheet og det tillater deg å endre hvordan en HTML-siden ser ut.
Med CSS kan du angi et bakgrunnsbilde på et element, for eksempel vår <a> – tag-en.,
Her har vi ville ha HTML-det ser ut som dette:
<style> a { background-image: url("https://pagedart.com/favicon-32x32.png"); display: block; height:32px; width:32px; }</style><a href="https://pagedart.com"></a>Så denne gangen er det ingenting inni <a> – koden, men biletet er sett ved hjelp av CSS stil. Dette ville vise følgende i nettleseren:
Vi kan bruke en lignende teknikk med en <button> – tag-en.
Avansert Teknikk: ved Hjelp av en Knapp
I dette eksemplet, vi kommer til å bruke <button> – koden i stedet for <a> – tag-en.,
Vi kan lage den samme effekt som eksemplet ovenfor bruker denne HTML:
Som skaper dette utgang:
Her er vi ved hjelp av JavaScript for å åpne en ny nettleser-fanen. Å sende brukeren til PageDart hjemmesiden.
jeg har ingen anelse om hvorfor du noensinne ville gjøre dette! Men, jeg lyst til å vise deg hva som er mulig og hvordan fleksibel HTML, CSS og JavaScript kan være.
Det siste eksemplet jeg skal vise deg er å bruke et bilde kartet.
Avansert Teknikk: Image Map
Bilde kartene er enkelt bilder med klikkbare områder., De har mistet popularitet de siste årene, men de er fortsatt en del av HTML5-spesifikasjonen. Dette betyr at nettlesere som Internet Explorer, Chrome og Safari vil støtte dem.
Kart er gode eksempler på Bildet Kart som for eksempel organisasjonskart, som dette:
Så for å gjøre hver rosa området en klikkbar link-vi ville lage en map som dette:
Vi har lagt attributt usemap til img – tag-en.,
Deretter innenfor map – tag-vi har en area – tag-en. Hvert av disse områdene skaper et klikkbart område som fungerer som en knapp.
ved Hjelp av en Kobling Bilde i HTML
Vi har sett på fem forskjellige måter å legge til et bilde som en lenke på din web-side:
- Et bilde som en lenke
- Bilde og tekst som en link
- ved Hjelp av CSS hvis du vil angi et bilde som en lenke
- ved Hjelp av a-knappen som en link
- ved Hjelp av image maps
Alle disse kan slå bilder til lenker. Du skal nå ha selvtillit til å prøve dette selv.,
Vi har også sett på tilgjengelighet og hvordan du skal sette Alt-tekst for å hjelpe synshemmede.