De attributen -alt- & -title-

uit de cursus Basiskennis HTML5 (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Basiskennis HTML5 (2019)

perm_identity Belinda | video_library 55 video's | query_builder 3:02:53

Webpagina’s maken met HTML

Om webpagina’s correct te kunnen voorvertonen door browsers is het essentieel dat je de juiste HTML-tags verbindt aan de content. In webdesign is namelijk de content gescheiden met de opmaak. Zoekmachines gebruiken de HTML-structurering om betekenis en waarde aan de content te verbinden. Maak je niet gebruik van de juiste structurering dan zul je dit terugzien in de zoekresultaten. Slecht gestructureerde webpagina’s worden minder goed geïndexeerd

Doelgroep van deze cursus

Iedereen die wil leren hoe je statische websites maakt of haar/zijn kennis wil uitbreiden van webdesign-technieken in het algemeen. Heb je bijvoorbeeld al ervaring met het maken van websites met een CMS als WordPress. Dan nog is het bijna onmisbaar om voldoende begrip te hebben van de broncode.

Wat ga je leren

In de cursus basiskennis HTML5 leer je hoe je webpagina’s structureert met de juiste HTML-tags. Je krijgt uitgebreid uitleg en inzicht in de juiste wijze waarop je de html-tags toepast.

Je leert hoe de juiste mappenstructuur voor webproducties in de zogeheten Local Root Folder. je krijgt uitleg over de semantische betekenis van de html-tags en leert hoe je pagina’s structureert conform de regels van het W3C.

Eventuele vervolgcursus

Een logische vervolgcursus is de cursus Basiskennis CSS. Hierin leer je de vormgeving van webpagina’s onder de knie te krijgen met CSS. Dit is de werkwijze voor het creëren van prachtige webpagina’s. Eerst zorgen dat de HTML op orde is en vervolgens de vormgeving bepalen met CSS.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je geen specifieke voorkennis nodig. Algemene kennis van de computer is wel belangrijk.

De alt-tekst die je hebt opgegeven wordt niet alleen voor spraakmachines gebruikt.

Maar ook al alternatieve tekst als de browser de afbeelding niet kan vinden.

Kijk maar. Als ik expres de naam van het bestand wijzig.

In een niet bestaande afbeelding.

Kan de browser de afbeelding niet meer vinden.

Chrome toont dan een plaatje van een missende afbeelding en de alt-tekst wordt ernaast gezet.

Er is nog een attribuut dat je kunt gebruiken maar het is niet verplicht.

En dat is de title, title=" ".

De title verschijnt als een pop-up zodra de bezoeker met zijn muis boven een afbeelding blijft hangen.

In het alt-attribuut omschrijf je zo kort en duidelijk mogelijk de betekenis, de functie of de inhoud van de afbeelding.

Maar in het title attribuut kun je andere informatie kwijt.

Als bijvoorbeeld de naam van de fotograaf, de datum of de locatie van de opname.

Dus ik zou hier kunnen zeggen bijvoorbeeld: "fotografie: B.Kampf, Portugal ".

Loop dan met de muis naar de afbeelding in de browser.

En een tooltip verschijnt met de tekst die je bij de -title- hebt ingevoerd.

Dan plaats ik nu nogmaals een afbeelding.

Maar ditmaal met een ander idee erachter. Ik begin weer met -img-.

srce=" " ik geef aan dat in de map img een bestand staat.

En deze heet, en ik kan hem opzoeken in de lijst, versiering.gif.

Ik plaats het verplichte attribuut alt=" ".

En de attributen width=" " en height=" "

Om de breedte en de hoogte op te zoeken kan ik op de naam klikken.

Daar wordt mij de maten aangegeven. Dus de breedte is px en de hoogte is px.

Deze afbeelding is puur bedoeld als versiering.

Het heeft verder geen enkele toelichtende functie op de inhoud van de teksten.

Dat is het enige geval waarin het gebruikelijk is dat je het 'alt' attribuut leeg laat.

Je plaatst altijd wel het -alt- attribuut in de broncode.

Maar als deze leeg is dan weet de browser dat deze afbeelding puur ter versiering geldt.