Inleiding tot afbeeldingslink in HTML
Image Link In HTML is te vinden op bijna alle pagina's omdat ze ons helpen om van de ene pagina naar de andere op een website te navigeren. Een populaire combinatie is om de HTML-ankertag te gebruiken met de img-tag van HTML . Met deze combinatie kunnen we de verplaatsing van gebruikers van de ene pagina naar de andere toestaan door op een afbeelding te klikken. Voordat we verder op dit onderwerp ingaan, laten we eerst de werking en weergave van anker- en afbeeldingselementen afzonderlijk begrijpen en deze vervolgens combineren om een gekoppeld beeld te bereiken.
HTML-ankertag
De HTML-ankertag wordt gebruikt om HTML-hyperlinks te maken naar andere webpagina's of multimedia-inhoud die op internet wordt gehost. Laten we de onderstaande syntaxis raadplegen om te begrijpen hoe ankertags werken en hun basiskenmerken
Klik hier!!
In het bovenstaande voorbeeld geeft het kenmerk "href" de URL aan van de webpagina waarnaar we de gebruiker willen omleiden terwijl u op de tekst "Klik hier !!" klikt.
Laten we de volledige code hieronder bekijken:
uitgang
->
Met het bovenstaande voorbeeld kunt u de volgende opmerkingen maken
- Een niet-bezochte link wordt onderstreept en in blauwe kleur weergegeven. Voor bijv. Dit is een niet-bezochte link
- Een bezochte link verschijnt onderstreept en in paarse kleur. Voor bijv. Dit is een reeds bezochte link
- Een actieve link wordt onderstreept en in rode kleur weergegeven. Voor bijv. Dit is een actieve link
HTML-afbeeldingstag
Tijdens het surfen op internet ben ik er zeker van dat u verschillende webpagina's bent tegengekomen die verschillende vormen van multimedia bevatten. Vooral afbeeldingen zijn een populaire vorm van multimedia die tegenwoordig op bijna alle interactieve webpagina's en websites te vinden is. Laten we de afbeeldingstag en de implementatie ervan in HTML begrijpen met het onderstaande voorbeeld:
Syntaxis
Laten we nu begrijpen hoe elk van de attributen in de img-tag werkt:
- src: het kenmerk src definieert het pad van het afbeeldingsbestand dat we met deze tag proberen te laden. Het kan een link zijn naar een afbeelding die op het web wordt gehost met het formaat zoals example.com/images/dummy.png.webp of het kan een afbeeldingsbestand zijn dat lokaal wordt gehost op dezelfde server als de webpagina.
- alt: het alt-attribuut definieert de tekst en beschrijving van de afbeelding die we willen weergeven als de afbeeldingen niet kunnen worden geladen vanwege netwerkverbinding of een ander probleem.
- Breedte en hoogte: de breedte en hoogte van beide kenmerken bepalen de breedte en hoogte van de afbeelding die we op de webpagina willen weergeven. Anders zou de afbeelding standaard werken met 100% hoogte en breedte.
Laten we nu de volledige HTML-code bekijken die nodig is om een afbeelding op een webpagina te laden. Sla de volgende afbeelding op met de naam "sunset.png.webp" in een map met de naam "image_test" op uw lokale schijf.
Laten we nu in dezelfde map een HTML-bestand met de naam sunset.html maken met de volgende HTML-code:
Ga nu naar een browser op uw computer en typ het pad van het .html-bestand. Mijn bestanden worden opgeslagen in D-schijf, dus het pad voor mij zou zijn
D: /image_test/sunset.html
En nu kunnen we zien dat de gerenderde HTML-pagina de zonsondergangafbeelding in onze browser heeft geladen. Met behulp van CSS en
tag, kunnen we ook tekst weergeven volgens onze eis rond de afbeelding. Zowel de anker- als img-tags zijn compatibel met alle browsers zoals Google Chrome, Safari, Microsoft Edge, Firefox en Internet Explorer.
Gelinkte afbeeldingen in HTML
Nu we met voorbeelden hebben begrepen, laten we hoe ankertag en afbeeldingstag individueel werken ons nu begrijpen hoe we de twee functionaliteiten kunnen combineren om een scenario te bereiken waarbij we willen dat de gebruikers doorgestuurd worden naar een nieuwe webpagina met een klik op een afbeelding . Om een afbeelding klikbaar te maken en de gebruiker om te leiden naar een andere webpagina, moeten we de afbeelding gewoon in een ankertag nesten. In het onderstaande voorbeeld proberen we de top 3 van zoekmachines over de hele wereld in te schakelen. In onze lijst tonen we de logo's van de 3 zoekmachines en door op een van de logo's te klikken, wordt de gebruiker omgeleid naar de respectieve zoekmachinepagina. Laten we een map met de naam "omleidingstest" maken en in dezelfde map de onderstaande afbeeldingen opslaan
1. Google
2. Yahoo
3. Bing
Nu maken we een .html met de naam imageredirection.html in hetzelfde bestand. De imageredirection.html bevat de volgende code
Nu moeten we de HTML-pagina openen vanuit de browser, waarvoor ik mijn lokale pad "D: / redirectiontest / imageredirection.html" zal typen. de browser zal dan het HTML-bestand weergeven om het volgende resultaat te genereren:
->
De gebruikers kunnen naar de betreffende zoekmachine navigeren door op hun logo te klikken. Uit het bovenstaande voorbeeld kunnen we vaststellen dat HTML een eenvoudige en flexibele taal is waarmee we meerdere tags kunnen combineren en een complexe functionaliteit als deze kunnen bereiken. De combinatie van het gebruik van img en ankertag is een populaire combinatie. Met extra HTML-codering kunnen we ook verschillende HTML-elementen toevoegen, zoals het weergeven van gekoppelde afbeeldingen in een geordende of ongeordende lijst met
- of
- HTML-kenmerken
- HTML-indeling Tags
- Voordelen van HTML
- HTML-afbeeldingstags
- HTML-frames
- HTML-blokken
- Stel een achtergrondkleur in HTML in met Voorbeeld
- HTML geordende lijst | Typen attributen met syntaxis
- . De extreme flexibiliteit en eenvoud die HTML biedt bij elke uitgebrachte versie, helpt UI- en UX-ontwerpers bij het ontwerpen van interactieve en intuïtieve webpagina's die we zien tijdens het surfen op het internet voor dagelijkse activiteiten.