Een webpagina bestaat in de HTML opbouw uit elementen die vervolgens weer opgebouwd zijn in tags, atributen en inhoud. Een Atribuut is bedoeld om specifieke informatie mee te geven aan een Tag. Hierbij kan je denken aan de locatie van een afbeelding of video maar ook het formaat van deze afbeelding of video. Onderstaand voorbeeld geeft dit al goed weer.

<!DOCTYPE html>
<html>f;
<head>
<title>Pagina titel</title>
</head>
<body>

<h1>Je eerste heading.</h1>
<p>Je eerste alinea.</p>
<img src="afbeelding.jpg" alt="alternatieve titel" height="60" width="80">

</body>
</html>

Bovenstaand voorbeeld bestaat uit verschillende elementen. Zo valt de gehele inhoud in het HTML element tussen <html>f; en </html>f;. Op dezelfde manier kan je ook het head element en het titel element vinden. Een element wordt aangegeven door middel van tags. Deze hebben een openende tag zoals <html>f; en een afsluitende tag zoals de bijbehorende </html>f; in de meeste gevallen. Uitzonderingen op deze regel zijn er natuurlijk ook de <img>-tag die een afbeelding weergeeft heeft bijvoorbeeld geen sluitende tag. Wel heeft deze tag een aantal atributen zoals de afbeeldinglocatie, alternatieve titel, hoogte en breedte van de afbeelding. Deze tag verteld de webbrowser dat er een afbeelding geopend moet worden waarna het atribuut src="..." de locatie weg geeft. In dit geval de afbeelding "afbeelding.jpg" welke zich in dezelfde map bevind als waar je eigen html voorbeeld opgeslagen is. Het kan natuurlijk ook zijn dat je de verschillende afbeeldingen netjes samen in 1 map hebt opgeruimd. Lekker overzichtelijk maar dan moet je de webbrowser natuurlijk wel vertellen waar dit is.


<img src="afbeeldingen-map/afbeelding.jpg" alt="alternatieve titel" height="60" width="80">

Je ziet dat er tussen de woorden afbeeldingen en map een middenstreepje heb gezet in plaats van een spatie. Probeer bestandsnamen en namen van mappen zoveel als mogelijk zonder spaties online te zetten. Online worden spaties in de URL geschreven als %20. Dit betekend dat in een URL een afbeelding met de naam Mijn Afbeelding.jpg gezocht zal worden als Mijn%20Afbeelding.jpg wat uiteraard een andere bestandsnaam is en deze wordt waarschijnlijk niet gevonden waardoor de afbeelding niet geopend wordt zoals bedoeld. Dotzelfde geldt natuurlijk ook voor bestandsmappen:


<img src="afbeeldingen map/afbeelding.jpg" alt="alternatieve titel" height="60" width="80">

Je webbrowser zal dit proberen te openen door naar afbeeldingen%20map/afbeelding.jpg te gaan welke dan niet bestaat. Hierdoor zal de afbeelding niet worden weer gegeven. Ditzelfde kan ook gebeuren met namen van bijvoorbeeld html bestanden, video's en zo meer.

Na de locatie van de afbeelding vinden we het Alt-atribuut wat hier een alternatieve tekst weer kan geven voor als de afbeelding niet goed geladen kan worden. Toch is dit niet de enige functie van dit atribuut. Zoals wel begrijpelijk is kunnen zoekmachines nog geen afbeeldingen zien en herkennen zoals wij dat doen. Dit stukje alternatieve tekst is een goede hulp als een zoekmachine wil weten wat er op de afbeelding staat. Door afbeeldingen te optimaliseren voor zoekmachines kan je een kleine winst behalen.

Als laatste in bovenstaand voorbeeld zie je de atributen height en width welke de hoogte en breedte bepalen van een afbeelding. Als hier verder geen extra informatie bij staat dan gaan deze formaten gemeten worden in pixels. Hiermee kan je voorstellen dat de uiteindelijke grootte van de afbeelding op verschillende apparaten ook nog wel kan verschillen.


<img src="afbeeldingen-map/afbeelding.jpg" alt="alternatieve titel" height="20%" width="30%">

Ook het gebruik van percentages om de grootte van een afbeelding te bepalen is een mogelijkheid die al beter werkt dan pixels maar optimaal is het nog niet. Dit is de reden dat er voor de meeste websites een zogenaamd CSS betand gebruikt wordt.

Meer voorbeelden

Atributten

<!DOCTYPE html>
<html>
<head>
<title>Pagina titel</title>
</head>
<body>

H1: <h1>Je eerste heading.</h1>
Alinea: <p style="color:black"> Je eerste alinea maar wel in zwart."</p>
Hyperlink: <a href="link-naar-andere-pagina.html"> Een Eigen website </a>
Afbeelding: <img src="afbeelding.jpg" alt="alternatieve titel" height="60" width="80">
<!--Extra info die niet zichtbaar zal zijn op de webpagina voor de gebruiker-->

</body>
</html>

Dat waren gewoon een paar simpele voorbeelden. Maar met bijvoorbeeld het gebruik van kleurcodes in plaats van het woord "black" te gebruiken kan je de woorden natuurlijk ook allerlei andere kleuren geven.

<!DOCTYPE html>
<html>
<head>
<title>Pagina titel</title>
</head>
<body>
Alinea: <p style="color:black"> Je eerste alinea maar wel in zwart."</p>
Alinea: <p style="color:#FF0080"> Je eerste alinea maar wel in roze."</p>
Alinea: <p style="color:#C8FE2E"> Je eerste alinea maar wel in groen? geel?."</p>
Hyperlink: <a href="https://html-color-codes.info/" target="_blank"> Hier vind je kleurcodes </a>


</body>
</html>

Je ziet hier dat de hyperlink (klikbare tekst naar een andere pagina) ook een nieuw atribuut gekregen heeft. Het atribute _blank verteld de webbrowser de pagina te openen in een nieuw tabblad.

Een eigen website