Websites met stijl
Naslag: attributen
Op dit naslagblad:
Wat zijn attributen
Globale en niet globale attributen
De volgende attributen zijn globaal, dat wil zeggen dat ze bij elk html-element kunnen worden gebruikt:
class, hidden, id, lang, style, title
De andere attributen kunnen maar bij één of bij enkele elementen worden gebruikt.
Hieronder vind je de meest gebruikte attributen. Ze staan alfabetisch gerangschikt.
Bij elk attribuut staat aangegeven bij welke elementen het kan worden gebruikt.
Voor een overzicht van alle attributen zie de (engelstalige) website van w3schools.com
alt
Kan gebruikt worden bij:
Het element img (verplicht)
Vorm:
alt="alternatieve tekst"
Effect:
Voorbeeld:
src="kasteel.jpg" ="Kasteel Loevesteijn">
autoplay
Kan gebruikt worden bij:
De elementen audio, video
Vorm:
autoplay
Het attribuut autoplay heeft geen waarde.
Effect:
Als het attribuut autoplay aanwezig is, start de audio/video meteen na het laden van de webpagina.
Voorbeeld:
<audio autoplay>...</audio>
charset
Kan gebruikt worden bij:
Het element meta
Vorm:
charset = "utf-8"
Effect:
Geeft aan welke karakterset gebruikt moet worden.
Voorbeeld:
<meta charset="utf-8">
class
Kan gebruikt worden bij:
Alle elementen
Vorm:
class="class-naam"
Effect:
Een class-naam geeft de mogelijkheid om bepaalde eigenschappen aan een element te koppelen
Voorbeeld:
html:
<p class="achtergrond">Een stukje tekst.</p>
css:
.achtergrond {background-color: hsl(120, 50%, 80%); padding: 10px;}
Resultaat:
Een stukje tekst.
Voor meer informatie, ook over het verschil tussen class en id, zie de naslag over class en id.
colspan
Kan gebruikt worden bij:
De elementen hd, td
Vorm:
colspan="aantal"
Effect:
De betreffende tabel-cel neemt in de breedte het genoemde aantal kolommen in.
Voorbeeld:
<td colspan="3">tag>>...</colspan>
De betreffende cel is 3 kolommen breed (is even breed als 3 'gewone' cellen).
Voor meer informatie, zie de naslag over tabellen.
content
Kan gebruikt worden bij:
Het element meta
Vorm:
content="de inhoud"
Het attribuut content wordt altijd gebruikt tesamen met het attribuut name.
Effect:
Afhankelijk van de waarde van name:
Voorbeelden:
Met name="viewport"
<meta name="viewport" content="width=device-width, initial-scale=1.0"
Nodig om een website ook goed te tonen op een mobieltje. Het maakt de breedte gelijk aan de breedte van het venster van het apparaat
en zet de zoomfactor bij openen op 1.
Met name="description"
<meta name="description" content="Korte omschrijving van de website"
Geeft een korte omschrijving van de webpagina, die wordt getoond door de zoekmachine..
Met name="keywords"
<meta name="keywords" content="trefwoord1, trefwoord2, trefwoord3, trefwoord4"
Trefwoorden waarmee je de website kunt vinden
Met name="robots"
<meta name="robots" content="noindex, nofollow"
Vraagt of een zoekmachine wil indexeren (index) of juist niet indexeren (noindex)
en of de links op deze pagina wel (follow) of niet (nofollow) mogen geindexeed.
Zie ook het iets uitgebreidere artikel in de naslag over het element meta.
controls
Kan gebruikt worden bij:
De elementen audio, video
Vorm:
controls
Het attribuut controls heeft geen waarde.
Effect:
Als het attribuut controls aanwezig is worden de bedieningsknoppen (start/stop, pauze, volume e.d.) getoond.
Voorbeeld:
<audio controls>...</audio>
height
Kan gebruikt worden bij:
De elementen img, video
Vorm:
height="aantal pixels"
Effect:
Zet de hoogte van het element.
Voorbeeld:
<img href="img/mijnafbeelding.jpg" width="300" height="200" >
De afbeelding wordt 300px breed en 200px hoog gemaakt.
Opmerkingen:
- Bij height (en width) wordt alleen een getal opgegeven. Dat getal is de waarde in pixels.
- Als alleen de hoogte wordt opgegeven, berekent de browser de breedte.
- Als breedte en hoogte niet in de juiste verhouding woden opgegeven, wordt de afbeelding 'uitgerekt' of ingedrukt' getoond.
- Breedte en hoogte kunnen ook worden ingesteld met de css-eigenschappen
width en
height.
hidden
Kan gebruikt worden bij:
Alle elementen
Vorm:
hidden
Het attribuut heeft geen waarde
Effect:
Het element wordt niet getooond (verborgen)
Voorbeeld:
<nav hidden>...</nav>
Het element nav wordt niet getoond.
Opmerking
Een element kan ook worden verborgen met de css eigenschap display: none;
href
Kan gebruikt worden bij:
De elementen a, link
Vorm:
href="bestemming"
Met bestemming wordt hier een van de volgende mogelijkheden bedoeld:
- Het pad naar een bestand, bv. vakanties/oostenrijk.html
Bestemming is het bestand oostenrijk.html in de map vakanties.
- Een pad naar een bladwijzer (een id-naam), bv. #wenen.
Bestemming is de bladwijzer #wenen (de id wenen) in het bronbestand.
(Met bronbestand wordt hier bedoeld het bestand waarin het element staat met het attribuut href.)
- Een combinatie van 1 en 2, bv. vakanties/oostenrijk.html#wenen
Bestemming is de bladwijzer #wenen in het bestand oostenrijk.html dat zich in de map vakanties bevindt.
- Een volledig internet adres, zoals http://www.buienradar.nl
Bestemming is hier het internetadres www.buienradar.nl. (http:// mag niet weggelaten worden in een internetadres in de href)
- Een bladwijzer op een internetadres, bv. http://websitesmetstijl.nl/cursus01.html#browser
- De mogelijkheden 1-3 worden gebruikt als het doelbestand (het bestand waar bij klikken wordt heen gesprongen) zich op dezelfde website bevindt als het bestand van waaruit wordt geklikt.
- De mogelijkheden 4-5 worden gebruikt als het doelbestand zich op een andere website bevindt.
Effect:
- Bij a: bij klikken op de link wordt gesprongen naar het opgegeven bestand.
- Bij link: Er wordt verwezen naar het opgegeven hulpbestand.
Voorbeeld:
<a href="https://www.buienradar.nl/"buienradar</a>
id
Kan gebruikt worden bij:
Alle elementen
Vorm:
id="id-naam"
De id-naam moet uniek zijn binnen het document.
Effect:
Een id-naam geeft de mogelijkheid om bepaalde eigenschappen aan een element te koppelen.
Tevens kan een id-naam gebruikt worden als een bladwijzer waarheen d.m.v. een link kan worden gesprongen.
Voorbeeld:
html:
<p id="inleiding">Tekst van de inleiding.</p>
css:
#inleiding {background-color: hsl(120, 50%, 80%); padding: 10px;}
Resultaat:
Tekst van de inleiding.
Voor meer informatie, ook over het verschil tussen class en id, zie de naslag over class en id.
lang
Kan gebruikt worden bij:
Alle elementen
Vorm:
lang="taalcode"
Enkele taalcodes:
- de - duits
- en - engels
- fr - frans
- nl - Nederlands
Zie de volledige lijst met taalcodes (Engelstalig - op de webste van W3 schools.)
Effect:
Specificeert in welke taal het element is geschreven.
Voorbeeld:
<html lang="nl">
Opmerkingen:
- Het attribuut lang mag in elk element staan. Het is echter bijna alleen zinvol dit attribuut op te nemen in het element html.
Daar wordt de taal voor de hele website gespecificeerd.
- Als op internet gezocht wordt naar websites in het Nederlands, vindt de zoekmachine alle websites met in het element html het attribuut lang="nl".
loop
Kan gebruikt worden bij:
De elementen audio,video
Vorm:
loop
Het attribuut loop heeft geen waarde.
Effect:
Als het attribuut aanwezig is blijft het fimpje/geluid zich steeds herhalen.
(Zonder het attribuut loop stopt het geluid/fimpje aan het eind.)
Voorbeeld:
<video loop>...</video>
name
Kan gebruikt worden bij:
Het element meta
Vorm:
name="waarde"
De waarde kan zijn: viewport, description, keywords, robots.
Het attribuut name wordt altijd gebruikt tesamen met het attribuut content.
Effect:
Zie de naslag over het element meta.
Voorbeeld:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Deze regel moet in de head van elk html element woden opgenomen om de webpagina correct te tonen op mobieltjes.
rowspan
Kan gebruikt worden bij:
De elementen hd, td
Vorm:
rowspan="aantal"
Effect:
De betreffende tabel-cel neemt in de hoogte het genoemde aantal rijen in.
Voorbeeld:
<td colspan="2">...</colspan>
De betreffende cel is 2 rijen hoog.
Voor meer informatie, zie de naslag over tabellen.
src
Kan gebruikt worden bij:
De elementen audio, img, video
Vorm:
src="plaats van de afbeelding, audio, video"
Effect:
De afbeelding op de betreffende plaats wordt getoond, dan wel de audio/video op die plaats wordt afgespeeld.
Voorbeeld:
<img src="img/mijnafbeelding.jpg">
start
Kan gebruikt worden bij:
Het element ol
Vorm:
start="getal"
Effect:
De nummering start bij het opgegeven getal
Voorbeeld:
<ol start="12">
De genummerde lijst begint te tellen bij 12.
style
Kan gebruikt worden bij:
Alle elementen
Vorm:
style="stijlregels"
Effect:
De stijlregels gelden uitsluitend voor het element waarin het attribuut style staat.
Voorbeeld:
Html:
<span style="color: white; background-color: red;">Deze opmaak geldt alleen voor dit span-element.</span>
Resultaat:
Deze opmaak geldt alleen voor dit span-element.
target
Kan gebruikt worden bij:
Het element a
Vorm:
target="bestemming"
Effect:
target="_blank": Opent het gelinkte document in een nieuw venster.
target="_self":: opent het gelinkte document in hetzelfde venster als waar werd geklikt. (standaard waarde)
Voorbeeld:
<a href="http://www.buienradar.nl" target="_blank">buienradar</a>
Opent buienradar in een nieuw venster.
title
Kan gebruikt worden bij:
Alle elementen
Vorm:
title="toelichting"
Effect:
Zet bij aanwijzen met de muis de toelichting ('tooltip') in beeld.
Voorbeeld:
<a href="#" title="Klik om naar de bovenkant van de pagina te gaan">Voorbeeldlink met title</a>
Voorbeeldlink met title
Gebruik
- Wordt vaak gebruikt voor aanwijzingen bij een link (bv. dat deze opent in een nieuw venster)
- Ook vaak gebruikt bij afbeeldingen - om bij aanwijzen met de muis de titel/omschrijving te tonen.
width
Kan gebruikt worden bij:
De elementen img, video
Vorm:
width="aantal pixels"
Effect:
Zet de breedte van het element.
Voorbeeld:
<img href="img/mijnafbeelding.jpg" width="300" height="200">
De afbeelding wordt 300px breed en 200px hoog gemaakt.
Opmerkingen:
- Bij width (en height) wordt alleen een getal opgegeven. Dat getal is de waarde in pixels.
- Als alleen de breedte wordt opgegeven, berekent de browser de hoogte.
- Als breedte en hoogte niet in de juiste verhouding woden opgegeven, wordt de afbeelding 'uitgerekt' of ingedrukt' getoond.
- Breedte en hoogte kunnen ook worden ingesteld met de css-eigenschappen
width en
height.