Linking billede i HTML: Sådan opretter du links fra billeder
Vi vil tage et begyndervenligt kig på, hvordan du opretter billedlinks på dit websiteebsted.
Vi vil se på hvilke HTML-tags du skal bruge i koden.
Hvis du aldrig har gjort dette før, don ” t bekymre dig! Jeg vil guide dig gennem hele processen.
i slutningen af denne artikel opretter du billedlinks over hele din imageebside og internettet.,
Vi vil også se på nogle mere avancerede teknikker mod slutningen af artiklen, hvis du føler dig modig.
Snup en kop kaffe, lad”s dykke i!
Hvordan opretter du et Hyperlink?
for at få links på din startside skal du oprette et hyperlink. For at gøre dette i HTML skal du bruge et <a> tag. Hver <a> tag har to dele åbning og lukning tag.,
Her er et eksempel:
<a href="..."> ...</a>I ovenstående, kan du se, at det åbne tag:
<a href="...">
Skaber starten af hyperlink. Derefter lukker vi tagget med:
</a>
enhver tekst, som vi skriver mellem det åbne og lukke tag, er din linktekst. For Eksempel:
<a href="..."> My Great Link</a>for At gøre dette til et link, skal vi tilføje en URL. For at gøre dette tilføjer vi URL ‘ en til href-attributten., URL ‘ en kan pege på hvor som helst på internettet. I dette eksempel vil vi bruge PageDart hjemmeside:
<a href="https://pagedart.com"> My Great Link</a>sørg for at medtage den fulde URL med HTTPS foran.
det er alt, hvad der er at oprette en tekst-only link i HTML. Næste, lad ” s se på, hvordan vi kan tilføje et billede til en pageebside ved hjælp af HTML.
Hvordan opretter du et billede i HTML?
for at tilføje et billede til din webebside skal du bruge et img tag.,
dette tag er lidt anderledes end et a tag, idet det ikke har et åbnings-og lukkemærke.
for at oprette et img tag skal du give tagget en kildefil. Brug src – attributten for at gøre dette:
<img src="https://pagedart.com/favicon-32x32.png">Dette vil føje et billede til skærmen som denne:
Nu har vi et billede, som vi er nødt til at gøre det til et link., For at gøre det skal vi tilføje et <img> tag inde i<a> tags, der skaber et linkbillede i HTML.
Lad”s se på et eksempel næste.
Billede som et link
for At vende et billede til et link, skal du tilføje <img> tag inde i <a> tag., Så tager vores tidligere eksempel kildekoden ville se ud som dette:
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"></a>Der ville producere denne HTML:
Ved at tilføje <img> tag inde i en <a> tag browseren kan se, at billedet skal være klikbart. Du har forvandlet billedet til et link!
Hvis du bruger .ordpress, kan du tilføje denne HTML-kode til din side ved hjælp af tekstvisningen i sideditoren.
Du kan også tilføje tekst og billeder inde i linket, lad”s se på dette.,
billede og tekst som Link
eksemplet ovenfor viste, hvordan man kun tilføjer et billede som link.
Hvad hvis vi ønskede at tilføje både et billede og tekst til et link.
Tja, i dette tilfælde, er vi nødt til at sørge for, at vi tilføje tekst, inden vi lukker <a> tag:
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"> PageDart Home </a>I ovenstående, vi har tilføjet “PageDart Hjem” inde i <a> tag sammen med <img> tag., Når det vises i en browebbro .ser på siden, vil det se sådan ud:
Der er endnu en attribut på <img> tag, som vi ikke har diskuteret, og du skal bruge.
det eralt attributten.
Billede, Links og Alt-Attributten
Billeder på internettet skal have en alt attribut. Dette er en tekstbeskrivelse af billedet.
skærmlæsere bruger alt-teksten til at hjælpe synshandicappede brugere. Skærmlæserne læser tekstbeskrivelsen, når den finder et billede.,
for At gøre dette må vi tilføje en alt attribut til img tag som dette:
<a href="https://pagedart.com"> <img alt="PageDart.com" src="https://pagedart.com/favicon-32x32.png"></a>Nu når de læser, der læser dette billede, det vil sige “PageDart.com” ud højt.
det er vigtigt at følge bedste praksis, når du skriver billede alt tekst.
sørg for at tænke på den person, der bruger skærmlæseren. Skriv din alt-tekstbeskrivelse for dem, og beskriv billedet så godt du kan.
Dette er alt hvad du behøver for at oprette linkende billeder i HTML., Endnu, der er et par mere avancerede teknikker, som du kan bruge. Hvis du føler dig modig, vil vi se på disse næste.
avanceret teknik: billede som et Link ved hjælp af CSS
en mere avanceret teknik er at bruge CSS. CSS står for Cascading Style Sheet, og det giver dig mulighed for at ændre, hvordan en HTML-side ser ud.
med CSS kan du indstille et baggrundsbillede på et element som vores <a> tag.,
Her ville vi have HTML-kode, som ser ud 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 gang, der er noget inde i <a> tag, men det billede, der er indstillet ved hjælp af CSS style. Dette ville vise følgende i browseren:
Vi kan bruge en lignende teknik med en <button> tag.
Avanceret Teknik: ved Hjælp af en Knap
I dette eksempel, vi kommer til at bruge <button> tag i stedet for <a> tag.,
Vi kan skabe den samme effekt som ovenstående eksempel bruger denne HTML:
Der skaber dette output:
Her bruger vi JavaScript til at åbne en ny fane i browser. Sende brugeren til PageDart hjemmeside.
jeg aner ikke, hvorfor du nogensinde ville gøre dette! Men, jeg ønskede at vise dig, hvad der er muligt, og hvor fleksibel HTML, CSS og JavaScript kan være.
det sidste eksempel, Jeg vil vise, bruger et billedkort.
avanceret teknik: billedkort
billedkort er enkeltbilleder med klikbare områder., De har mistet popularitet gennem årene, men de er stadig en del af HTML5-specifikationen. Dette betyder, at bro .sere som Internet e .plorer, Chrome og Safari understøtter dem.
Diagrammer er gode eksempler på, at Image-Kort såsom organisationsdiagrammer, som dette:
Så til at gøre hver enkelt pink område til et klikbart link, vi ville skabe en map som denne:
Vi har tilføjet attributten usemap til img tag.,
derefter inden for map tag har vi en area tag. Hvert af disse områder skaber et klikbart område, der fungerer som en knap.
ved Hjælp af en Sammenkædning Billede i HTML
Vi har set på fem forskellige måder at tilføje et billede som et link på din hjemmeside:
- et billede som link
- Billede og tekst som link
- at Bruge CSS til at indstille et billede som link
- ved Hjælp af en knap, som et link
- Brug billede kort
Alle disse kan slå billeder til links. Du skal nu have tillid til at prøve dette selv.,
Vi har også kigget på tilgængelighed og hvordan man indstiller Alt-tekst til at hjælpe synshandicappede.