Wat zijn HTML-afbeeldingslabels?
Het volgende artikel geeft een overzicht van HTML-afbeeldingstags. Ik ken de cliché, maar laat me beginnen met te zeggen dat een foto meer zegt dan duizend woorden. In het geval van webpagina's is dit met name het geval. Een afbeelding kan de bezoeker verkopen met uw idee, iemand imponeren om uw product te kopen en het kan een webpagina helpen er zoveel beter uit te zien. In deze gids zullen we bekijken hoe we IMG aan de webpagina's kunnen toevoegen en deze correct kunnen uitlijnen, samen met het toevoegen van links ernaar.
Afbeeldingen toevoegen aan webpagina's
U kunt IMG toevoegen aan een HTML-pagina met behulp van de tag in het HTML-document, hier is de syntaxis:
Hier vertelt de IMG de browser dat de tag gaat over het toevoegen van een IMG aan het document en geeft "src =" aan waar de afbeelding moet worden gedownload.
Voorbeeld van een pagina met een afbeelding
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Hier is de uitvoer van de code:
Een interessant feit over deze HTML-pagina's is dat wanneer u de IMG-tag gebruikt, de afbeelding niet in de genoemde webpagina wordt ingevoegd, maar in plaats daarvan een opslagruimte wordt gecreëerd waar de afbeelding wordt geplaatst zodra deze is gedownload.
Browserondersteuning en compatibiliteit met attributen
Zoals je kunt verwachten, ondersteunen alle moderne browsers afbeeldingen en het gebruik van IMG-tags. Soms zullen mobiele browsers het formaat van de afbeelding aanpassen zodat deze op het scherm past als de afbeelding niet als responsief is ingesteld.
Als het gaat om de compatibiliteit van attributen met HTML 4.01 en nieuwere HTML5, zullen de meeste tags werken, behalve uitlijnen, randen, hspace en vspace die eenvoudigweg niet worden ondersteund in de laatste.
Afbeeldingen als een link:
Er zullen momenten zijn waarop je een afbeelding wilt laten werken als een link naar een andere pagina. Je kunt het voor elkaar krijgen door de IMG-tag in de tag toe te voegen.
Een afbeelding instellen als achtergrond van een webpagina
U kunt een afbeelding als achtergrondafbeelding van een webpagina toewijzen met behulp van de CSS-eigenschap background-image in het hoofdgedeelte van de pagina.
Achtergrond afbeelding
Een afbeelding instellen om in de browser te laten zweven
We kunnen de CSS-eigenschap "float" gebruiken om een afbeelding in te stellen om overal in het browservenster te zweven. Laten we een voorbeeld bekijken dat u helpt bij het begrijpen.
Hier zweeft de afbeelding van de auto naar de rechterkant van de tekst.
Hier zweeft de afbeelding van de auto naar de linkerkant van de tekst.
Attributen van afbeeldingstag
Hierna volgen de kenmerken van een afbeeldingstag.
1) uitlijnen
Mogelijke waarden: boven, onder, midden, links of rechts.
Het attribuut alight wordt gebruikt om de uitlijning van een afbeelding op de webpagina aan te geven.
2) Alt
Waardetype: tekst
Alt wordt gebruikt om de alternatieve tekst van een afbeelding van een webpagina op te geven. In gevallen waarin het weergeven van een IMG niet mogelijk is, geeft de browser deze tekst aan de gebruiker weer. Zoekmachines zoals Google en Bing gebruiken deze alt-tekst om resultaten weer te geven in Afbeeldingen zoeken.
3) Border
Waardetype: pixels
Het wordt gebruikt om een rand met door de gebruiker gedefinieerde dikte rond de foto te maken. Het werkt niet in HTML5.
4) Cross-Origin
Waardetype: anoniem gebruik - Inloggegevens
Dit kenmerk wordt gebruikt wanneer we willen specificeren hoe foto's van andere oorsprong moeten worden behandeld. Dit wordt meestal gebruikt in gevallen waarin canvas-elementen van JavaScript-webapps worden gebruikt.
5) Hoogte
Waardetype: percentages of pixels
Uiteraard wordt deze gebruikt om de hoogte van de afbeelding op de HTML-webpagina aan te geven.
6) hspace
Waardetype: pixels
Niet ondersteund in HTML5, wordt het hspace-kenmerk gebruikt om in pixels op te geven hoeveel witruimte links en rechts van de ingevoegde afbeelding moet worden toegevoegd.
7) ismap
Waardetype: URL van een pagina
ismap die we gebruikten om de genoemde afbeelding te definiëren als een server-side image map. Wanneer de gebruiker in de afbeelding klikt (of tikt), sturen de browsers de coördinaten van de klik (of tik) als een URL naar de webserver.
8) Longdesc
Waardetype: URL
Longdesc wordt gebruikt om een gedetailleerde beschrijving van een afbeelding te geven met behulp van een URL. De URL die in het kenmerk wordt gebruikt, wordt gebruikt als beschrijving van de afbeelding.
9) src
Waardetype: URL
src staat voor bron en het wordt gebruikt om het adres op te geven van waaruit de browser de afbeelding ophaalt. Deze URL kan worden toegepast op een afbeelding in een map op dezelfde server en het kan ook een afbeelding opslaan in een externe server met een andere domeinnaam.
10) usemap
Waardetype: #mapnaam
Het kenmerk usemap wordt gebruikt om de afbeelding te definiëren voor een afbeelding van een client-side afbeelding. Een usemap wordt altijd gebruikt met HTML-tags voor kaarten en gebieden.
11) vspace
Waardetype: pixels
Niet ondersteund in HTML5, wordt het kenmerk Vspace gebruikt om het aantal pixels in te stellen dat als witruimte boven en onder aan de afbeelding op de webpagina moet worden gebruikt.
12) Breedte
Waardetype: pixels
Zoals de naam al doet vermoeden, wordt het attribuut width gebruikt om de breedte van een afbeelding op de HTML-webpagina op te geven.
Conclusie - HTML-afbeeldingstags
Nu we hebben gekeken hoe afbeeldingen worden toegevoegd in HTML-pagina's en hoe ze hun attributen kunnen instellen, kunnen we aantrekkelijk ogende webpagina's maken in een webproject.
Naast het toevoegen van visuele flair aan een webpagina, zijn afbeeldingen waardevol omdat ze ook helpen bij de optimalisatie van zoekmachines. Door de juiste alt-tags en beschrijvingen aan afbeeldingen toe te voegen, kunnen zoekmachines de inhoud van een webpagina beter begrijpen en in veel gevallen de rangorde van een webpagina verbeteren.
Aanbevolen artikelen
Dit is een gids voor HTML-afbeeldingstags. Hier bespreken we de attributen van afbeeldingstag samen met browserondersteuning en compatibiliteit met attributen. U kunt ook de volgende artikelen bekijken voor meer informatie -
- Een eenvoudige gids voor HTML-opdrachten
- Inleiding tot wat is XHTML?
- Zelfstudies over HTML-kenmerken
- Toepassingen en topgebruik van HTML
- Verschillende lijststijlen in HTML
- HTML-frames
- HTML-blokken