In les 2 maak je kennis met een aantal andere HTML-tags en leer je wat semantische HTML is. Daarnaast maak je kennis met CSS.
Het nut van juist tag-gebruik
Al in les 1 leerde je over het grote aantal te gebruiken tags binnen HTML. Deze tags hebben standaard allemaal een bepaalde opmaak, die je later kunt aanpassen met CSS. Het is belangrijk je te realiseren dat je met HTML de informatie op je pagina beschrijft en dat je het met CSS vormgeeft. HTML is zoals eerder al genoemd een “beschrijvingstaal” of “structureringstaal”. Wanneer je de informatie op een webpagina zo goed mogelijk beschrijft, wordt dat bijvoorbeeld door zoekmachines gewaardeerd met een hogere ranking in de zoekresultaten.
b en i versus strong en em
Of je een of meerdere woorden nu tussen een <b> tag zet of tussen een <strong> tag, beide keren worden ze dikgedrukt getoond. Wanneer je een of meerdere woorden tussen een <i> tag zet of tussen een <em> tag, worden ze beide keren cursief getoond.
Waarom zou je beter een strong- en em-tag kunnen gebruiken in plaats van een b- en een i-tag? Dat heeft er mee te maken dat volgens het W3C (de vaststellingscommisie voor ondere andere HTML tags) b- en i-tags alleen aangegeven dat iets dikgedrukt of cursief is. Het zijn zogenaamde “formatting-“tags maar ze hebben geen semantische waarde, ze beschrijven niet wat voor informatie ze bevatten. Wanneer je een strong- of em-tag gebruikt voor een of meerdere woorden, benadruk je ze op semantische wijze; je geeft aan dat de bezoeker van je website extra aandacht moet vestigen op de woorden binnen de strong- of em-tag.
Samenvattend: HTML is ontwikkeld voor het beschrijven van inhoud. Op Wikipedia staat een uitgebreid artikel (engelstalig) over semantische HTML.
Een afbeelding plaatsen
Wanneer je een afbeelding op je webpagina wilt plaatsen, kan dat met behulp van de <img> tag. Met de <img> geef je aan dat een bepaald gebied een afbeelding bevat. Een <img> tag is een self-closing inline element. Dat betekent dat je deze tag niet hoeft af te sluiten met een </img> en dat deze midden in tekst (bijvoorbeeld binnen een p-tag) kan worden gebruikt; de tekst zal er in dat geval omheen vloeien. Middels een attribuut (src) geef je aan wat de locatie van de afbeelding is. Hieronder zie je een voorbeeld van een webpagina met een afbeelding:
<!doctype html> <html lang="nl"> <head> <meta charset=utf-8> <title></title> </head> <body> <p><img src="img/pasfoto.jpg" title="Jaap van der Veen" alt="pasfoto van Jaap van der Veen">Hallo, ik ben Jaap van der Veen en ik heb deze cursus opgezet.</p> </body> </html>
Vanuit gebruiskvriendelijkheidspunt is het belangrijk nog een aantal attributen aan je afbeelding toe te voegen. Met title geef je en titel aan je afbeelding. De titel ziet men wanneer er met de muis over de afbeelding wordt gezweefd. Met alt geef je een tekst op die wordt getoond wanneer de afbeelding om wat voor reden dan ook niet kan worden geladen. het alt-attribuut moet de afbeelding zo goed mogeijk beschrijven.
Een tabel definiëren
Met de <table> tag geef je een tabelgebied aan. De table-tag of het table-gebied, moet altijd weer worden afgesloten met een </table> closing tag. Binnen je tabel-gebied kun je koppen, rijen en cellen aangeven. Zie onderstaand voorbeeld van een tabel inclusief commentaar:
<!doctype html> <html lang="nl"> <head> <meta charset=utf-8> <title></title> </head> <body> <table> <!-- met een <table> tag geef je het begin van je tabelgebied aan --> <thead> <!-- het <thead> element is optioneel en bevat de koppen van je tabel --> <tr> <!-- met <tr> geef je een rij in je tabel aan --> <th>Naam</th> <!-- met <th> geef je een kolomkop aan --> <th>Woonplaats</th> <th>Kinderen</th> </tr> </thead> <tbody> <!-- het <tbody> element bevat rijen en cellen met gegevens. het <tbody> element is verplicht. --> <tr> <!-- met <tr> geef je een rij in je tabel aan --> <td>Jaap</td> <!-- met <td> geef je een cel aan binnen een rij --> <td>Opende (Gr.)</td> <td>0</td> </tr> <tr> <!-- voor elke rij maak je een nieuwe <tr> aan --> <td>Bart</td> <!-- met <td> geef je een cel aan binnen een rij --> <td>Opeinde (Sm.)</td> <td>2</td> </tr> </tbody> <tfoot> <!-- het <tfoot> element is optioneel en bevat bijvoorbeeld het totaalbedrag van een bepaalde kolom --> <tr> <td colspan="2">Totaal kinderen</td><!-- dit element bevat een attribuut "colspan". In dit geval geeft colspan aan dat de betreffende cel 2 cellen breed is. --> <td>2</td> </tr> </tfoot> </table> <!-- met een </table> tag sluit je het tabelgebied weer--> </body> </html>
Een hyperlink plaatsen
Internet bestaat uit ontelbaar veel websites. Deze website worden aan elkaar gelinkt met behulp van zogenaamde hyperlinks. Een hyperlink, ook wel verwijzing genoemd, definieer je met een <a> tag. Een <a> tag moet altijd weer worden afgesloten met een </a>. De tekst die je graag “klikbaar” wilt maken omsluit je met een a-tag. Vervolgens kun je met een aantal attributen de eigenschappen van de verwijzing definiëren. Met het href attribuut geef je aan waar de tekst naar moet verwijzen. Dit is meestal een andere website. Met het title-attribuut geef je een titel aan voor de verwijzing. Deze krijgen bezoekers van je website te zien wanneer ze met de muis over de link zweven. Zie hieronder voor een klein voorbeeld:
<!doctype html> <html lang="nl"> <head> <meta charset=utf-8> <title></title> </head> <body> <p>Voor informatie over het volgen van deze cursus verwijs ik u graag naar de website van het <a href="http://www.learningcentre.nl" title="NHL | Learning Centre">Learning Centre</a></p> </body> </html>
Structuur(html) versus opmaak(css)
Waar staat CSS voor?
CSS staat voor “Cascading Style Sheet”. “Style” staat voor de opmaak die je met behulp van CSS aan html pagina’s kunt geven. Je kunt opmaak voor een hele pagina, voor een element of voor een bepaalde groep elementen definiëren middels bepaalde “regels”, officieel “selectors” genoemd. “Cascading” staat voor de mogelijkheid van het oververven van opmaak-eigenschappen en het overschrijven daarvan.
CSS is een taal waarmee je de opmaak van elementen op een pagina regelt. Het beschrijft niet de structuur of inhoud van je pagina. Zoals je ziet vullen HTML en CSS elkaar prima aan. Laat jezelf nooit verleiden tot het doen van iets in HTML waarvoor CSS eigenlijk bedoeld is en andersom. Tijdens de les laat de docent hiervan een voorbeeld zien.
Default CSS
Zoals je tijdens de eerste les en het maken van de opdracht voor les 2 hebt gemerkt, gingen kopjes er op een andere manier uitzien dan bijvoorbeeld een opsommingslijstje. En dat terwijl je nog geen regel css had geschreven! Dat heeft er mee te maken dat browsers standaard al een opmaak toekennen aan verschillende html-elementen. Dat gebeurt met behulp van CSS-regels die bij elke browser een beetje kunnen verschillen. Zo zal een H1 element in Internet Explorer soms een iets kleinere lettergrootte hebben dat bijvoorbeeld in Firefox of Safari.
Nu je weet dat browsers standaard al een bepaalde opmaak toekennen aan html-elementen, snap je misschien ook waar het “cascading” gedeelte in CSS voor staat. Door zelf CSS te schrijven, definieer je bepaalde opmaak opnieuw maar ben je wellicht ook tevreden met bepaalde opmaak en laat je die gewoon voor wat het is.
Aan de slag met CSS
Waar plaats ik de CSS in mijn website?
Er zijn drie mogelijkheden voor het plaatsen van CSS in je website:
Inline CSS
Vrijwel elk HTML-element heeft ook de mogelijkheid om een attribuut genaamd “style” te definiëren. In het style-attribuut van een HTML-element definieer je vervolgens de opmaak. Dit is niet de meest efficiënte methode voor het definiëren van CSS, omdat je in het geval van 4 H1 koppen op een pagina 4x dezelfde CSS moet toekennen. Mocht je iets willen veranderen in de opmaak, dan moet je dat op 4 plekken doen.
<h1 style="border-bottom:solid 1px red;color:green">Welkom op mijn website</h1>
In bovenstaand voorbeeld geven we aan een H1 een lijn aan de onderkant van het element van 1pixel dik en een rode lijnkleur. De tekstkleur wordt aangepast naar groen.
Internal CSS
Een betere manier om CSS te schrijven, is om alle CSS te concentreren in een style-element. Het style-element neem je op binnen het head-element van je pagina. Zie hieronder voor een voorbeeld.
<!doctype html>
<html lang="nl">
<head>
<meta charset=utf-8>
<title></title>
<style>
body{
color:#222;
}
p{
font-family:arial;
}
a{
color:orange;
}
</style>
</head>
<body>
<h1>Welkom op mijn website</h1>
<p>Hartstikke fijn dat je op mijn website kijkt!</p>
<h2>Contactgegevens</h2>
<p>mocht je vragen hebben, neem dan <a href="mailto:j.a.van.der.veen@nhl.nl">per mail</a> contact op</p>
</body>
</html>
Je ziet in bovenstaand voorbeeld dat er op een of andere manier voor 4 elementen opmaak wordt gedefinieerd, waarvan 1 element (te weten de p-tag) meerdere keren voorkomt op de pagina. Alle p-elementen krijgen volgens CSS in bovenstaand voorbeeld als lettertype “Arial” toegewezen.
External CSS
De meest elegante oplossing voor het koppelen van CSS aan je webpagina is om de CSS in een los css-bestand te plaatsen. Dit css bestand sla je op met extensie *css. Vanuit het html bestand link je vervolgens naar de locatie van het css bestand. Zie hieronder voor een voorbeeld.
<!doctype html> <html lang="nl"> <head> <meta charset=utf-8> <title></title> <link rel="stylesheet" href="assets/general.css"> </head> <body> <h1>Welkom op mijn website</h1> </body> </html>
CSS Syntax (=schrijfwijze)
Bekijk onderstaande afbeelding.
Een CSS bestand bevat meestal 1 of meerdere “rules”, waarvan je hierboven eentje ziet. Grofweg bestaat een rule uit twee gedeeltes, te weten een selector, waarmee je het betreffende element aanspreekt, en een of meerdere declaraties, gegroepeerd in accolades ({ en }).
Met een Selector geef je aan voor welk element de opmaak bedoeld is. In bovenstaand voorbeeld gaan we opmaak maken voor alle h1-elementen in de HTML pagina.
Een Declaration bestaat uit een property en uit een value. De property is de eigenschap van het element dat je wilt aanpassen. Elke property heeft een value. Een declaratie wordt altijd afgesloten met een puntkomma (;).
Samenvattend moet een CSS regel aan het volgende voldoen:
- Een groep declaraties voor een selector moet altijd omgeven worden door curly brackets (accolades): {}
- Elke declaratie wordt afgesloten door een puntkomma.
Om de leesbaarheid van je CSS te vergroten, kun je er voor kiezen om elke declaratie op een nieuwe regel te plaatsen en te werken met inspringen. Zie hieronder voor een voorbeeld:
p{
font-family:arial;
color:#222222;
line-height:1.5;
}
Een groep elementen dezelfde opmaak geven met div
Nu je experimenteert met het definieren van css voor alle koppen (h#), alinea’s (p), lijsten (ul of ol) en lijst-items (li), vraag je je mischien af hoe je een groep elementen ergens op de pagina kunt plaatsen. Wellicht ben je op zoek naar een soort van “container” waar je alle elementen in kunt stoppen en dat je die container vervolgens ergens op je pagina neerzet.
In HTML5 zijn er diverse container-elementen die je kunt gebruiken voor het groeperen van elementen. Degene die we het meest tijdens deze cursus zullen gebruiken is de <div> container. De <div> tag heeft in principe geen “semantische” waarde voor zoekmachines. De <div> tag is echter zeer handig voor het groeperen van elementen die je een gezamenlijke opmaak wilt geven.
Hieronder zie je een eenvoudig voorbeeld van een HTML document met daaraan gekoppeld een externe stylesheet waarin wordt geëxperimenteerd met het <div> element.
Het HTML bestand ziet er als volgt uit:
<!doctype html> <html lang="nl"> <head> <meta charset=utf-8> <title>Eerste CSS website</title> <link rel="stylesheet" href="opmaak.css"> </head> <body> <div> <h1>Welkom op mijn website</h1> <p>Leuk dat je op mijn website komt!</p> <p>Uitspraak van de dag:</p> <h3>A fool with a tool is still a fool</h3> </div> </body> </html>
Je ziet hierboven dat een kop, twee alinea’s en een kleinere kop zijn gegroepeerd in een <div>. We willen graag dat alles in de div een lichtgrijze achtergrond krijgt met een donkergrijze lijn. Daarnaast moeten alle elementen in de div hetzelfde lettertype hebben. Dat regelen we in de stylesheet:
div{
background-color:#ddd; /* de achtergrond kleur */
border-style:solid; /* de stijl van de omlijning */
border-width:1px; /* de dikte van de omlijning */
border-color:#999; /* de kleur van de omlijning */
font-family:Arial; /* het lettertype van alle tekst binnen de div */
}
Opmaak voor specifieke situaties: pseudo-selectors
Het zal je vast opvallen dat wanneer je met je muis over een van de links op deze website zweeft, de link een andere opmaak krijgt; de kleur wordt iets anders en er verschijnt een lijn onder de link. De opmaak voor deze situaties (“gewoon”, “muisover” en wellicht “geklikt” en”actief”) regel je met behulp van pseudo-selectors. Zie hieronder voor een voorbeeld waarin ik de opmaak voor 3 situaties van een link instel (2 situaties zijn gecombineerd):
a, a:visited{ /* deze opmaak geldt voor links en links waar op is geklikt */
color:#333; /* de tekstkleur */
text-decoration:none; /* met text-decoration:none; wordt het standaard lijntje verwijderd */
}
a:hover{ /* deze opmaak geldt voor links waar iemand met de muis op staat */
color:#222; /* de tekstkleur */
font-weight:bold; /* maak de tekst vet */
text-decoration:underline; /* toon een streepje onder de link */
}
Zie het commentaar in bovenstaand voorbeeld voor uitleg. Wil je meer informatie over pseudo-selectors, kijk dan op W3Schools.
Voorbereidingen om succesvol te kunnen starten met les 3
Voor les 3 moet je experimenteren met de volgende HTML tags:
- img » informatie op W3Schools
- table » informatie op W3Schools
- a » informatie op W3Schools
- div » informatie op W3Schools
Onderzoek doen naar de genoemde begrippen
Voor les 3 moet je je hebben verdiept in de volgende begrippen:
- CSS Pseudo-selectors » informatie op W3Schools
- Semantische HTML, het hoe en waarom » informatie op About.com
Opdracht voor les 3
Na les 2 krijg je van de docent een kleine praktische opdracht die je voor les 3 moet doen. De uitwerking van deze praktische opdracht stuur je een dag voor les 3 terug naar de docent.