Ik wil ook een site: XHTML (vervolg)
Thursday 02 September 2004
Note: this article was published over 4 years ago. Techniques, tools or technologies described in this article could be outdated. Please help me by notifying me of any broken links you might encounter.
Welkom bij het vervolg van deel 2 in de reeks “Ik wil ook een site”. Vandaag gaan we je pagina voorzien van koppen, tekst, links en een afbeelding. Ook maken we ruimte voor een logo.
Artikelen in de series “Ik wil ook een site”
In deze series leer je de beginselen van het opzetten van een semantisch correcte site, met gebruik van XHTML en CSS.
- Introductie
- Xhtml
- Xhtml (vervolg)
- Css
Html kent vele tags om verschillende soorten inhoud in onder te brengen. Een paar van de meest gebruikte tags gaan we vandaag gebruiken om onze inhoud mee te structureren. Aan het eind van deze les krijgen we een simpele pagina, zie voorbeeld 1. De pagina ziet er nog wat saai en kaal uit, maar omdat hij correct opgezet is wordt het makkelijk vorm te geven:
We gaan voorbeeld 1 uit deel 2 van deze reeks nu verder uitwerken. Open je favoriete teksteditor en plak de html in een nieuw bestand. Sla dit op als en we kunnen aan de slag.
Let op: Laat html-editors voorlopig achterwege, meestal doen ze dingen met je code zonder dat je daarom vraagt. Voor het vervaardigen van correct opgestelde sites kan ik je aanraden altijd de code met de hand te schrijven. Een html editor kan in dit geval helpen door de code voor je te kleuren en shortcuts te bieden voor veel gebruikte tags.
De pagina elementen
De structuur van de informatie in onze pagina is als volgt:
- logo
- kop
- tekst
- subkop
- meertekst
- voetnoot
Aangezien ik de elementen in de <head> in deel 2 al heb uitgelicht gaan we in dit artikel de elementen in de <body> toelichten. Het is verstandig eerst de code van voorbeeld 1 door te nemen (rechtermuisknop > View Page Source in FireFox, rechtermuisknop > Bron Weergeven in IE).
Koppen
Koppen worden aangegeven door de tags <h1> tot en met <h6>, waarbij <h1> het belangrijkst is en <h6> het minst belangrijkst. Het is goed koppen hiërarchisch te gebruiken. Zorg ervoor dat een <h2> na een <h1> komt, een <h3> na een <h2> etc.
<h1>Kop 1</h1>
(tekst)
<h2>Subkop 1</h2>
(tekst)
<h2>Subkop 2</h2>
(tekst)
<h3>Sub-subkop 1</h3>
(tekst)
Bovenstaande code produceert in de meeste browsers een aantal koppen van verschillende grootte:
Koppen zijn belangrijk voor het scannen van een document, zowel op een scherm als bij het oplezen door een screenreader. Voorkom lange lappen tekst door deze op te delen in paragrafen en stukken tekst te voorzien van een (sub)kop. Groepeer tekst zo dat aan de kop te zien is of de bijbehorende paragrafen wel of niet relevant zijn voor de lezer, op het web wordt tekst meer gescand dan echt gelezen. Zorg dus voor pakkende, duidelijke koppen.
Tekst
Het gebruik van paragrafen zorgt er voor dat documenten makkelijk te lezen zijn, de ruimte tussen paragrafen fungeert als rustpunt voor de ogen. Zorg er wel voor dat paragrafen niet te lang worden, probeer relevante informatie in een paragraaf onder te brengen. Op het moment dat een nieuw onderwerp wordt aangesneden start je een nieuwe paragraaf.
In html wordt de <p> tag gebruikt om paragrafen van elkaar te scheiden:
<p>
...tekst in de paragraaf...
</p>
<p>
...nog een paragraaf...
</p>
Tekst benadrukken
Om er voor te zorgen dat tekst makkelijk te lezen is, is het goed belangrijke woorden in de tekst te benadrukken. Html kent daar 2 tags voor. <em> legt nadruk op een tekst, <strong> benadrukt de tekst sterker. Bij de meeste browsers wordt tekst binnen een <em> element cursief weergegeven. Tekst die als <strong> is aangegeven wordt meestal als vette tekst op het scherm getoond.
Op de volgende tekst <em>wordt <strong>sterke</strong> nadruk</em> gelegd.
Bovenstaande code produceert:
Op de volgende tekst wordt sterke nadruk gelegd.
Links
Zoals je begrijpt zijn links een belangrijk onderdeel van een website. Links verbinden pagina’s met elkaar, pagina’s binnen een site zelf, maar ook pagina’s op andere sites. In html maak je een link met de <a> (anchor) tag:
<a href="http://www.google.com">google</a>
Met het href attribuut geven we aan naar welke url we linken. Links naar andere sites moeten altijd voorafgegaan worden door het gebruikte protocol (voor websites is dit http:// - Hyper Text Transfer Protocol). De tekst tussen de > en de </a> wordt weergegeven in de browser. Bovenstaande code geeft het volgende resultaat:
Links naar een pagina binnen je eigen site maak je zonder een protocol aan te geven. Stel je wilt linken naar pagina2.html in dezelfde directory als de pagina van waar je linkt:
<a href="pagina2.html">Ga naar pagina2</a>
Meer informatie over links is te vinden bij w3schools.
Afbeeldingen
Afbeeldingen vervullen een grote rol in het hedendaags webdesign. Voor logo’s, ornamenten en figuren worden vaak afbeeldingen gebruikt. Hoe je afbeeldingen maakt laat ik in dit artikel buiten beschouwing, maar onze vriend google weet daar meer vanaf.
In html kan je met de <img> tag afbeeldingen op je pagina plaatsen:
<img src="plaatje.jpg" alt="Een plaatje" />
Om aan te geven welke afbeelding we weer willen geven gebruiken we het attribuut src (source). We geven hier aan dat we de afbeelding plaatje.jpg willen weergeven. Dit bestand moet in dezelfde directory staan als de . Het is ook mogelijk plaatjes in een andere directory weer te geven, geef hierbij dan de directorynaam gevolgd door een forwardslash: src=”mapnaam/plaatje.jpg”. Het attribuut alt geeft de alternatieve tekst aan voor het geval de afbeelding niet wordt weergegeven (het is mogelijk afbeeldingen uit te schakelen in je browserinstellingen, ook mensen die je site met een screenreader bezoeken ‘zien’ geen afbeeldingen) vergeet dit attribuut niet wanneer de afbeelding belangrijke informatie bevat!
Meer informatie over de <img> tag vind je bij w3schools.
Class & id
De class en id attributen worden gebruikt om elementen te kunnen identificeren (vanuit een stylesheet bijvoorbeeld). Gebruik class wanneer er meerdere elementen hetzelfde uiterlijk moeten krijgen. id gebruik je om een element uniek te kunnen identificeren. Er mogen nooit 2 elementen met dezelfde id zijn, gebruik hiervoor classes. Meer informatie.
Div & span
<div> en <span> zijn zogenaamde ‘container-elementen’; op zichzelf hebben ze geen effect op het uiterlijk van de pagina. In combinatie met de id en class elementen kunnen ze worden gebruikt om elementen te groeperen en vorm te geven met css. Een <div> of <span> element zonder id of class heeft geen effec op het uiterlijk van de pagina. De <div> tag wordt vaak gebruikt om een groep elementen vorm te geven, de <span> tag wordt gebruikt om inline elementen (een stukje tekst in een paragraaf bijvoorbeeld) vorm te geven.
<div id="logo">
<img src="logo.gif" alt="My Logo" />
</div>
Met bovenstaande code geven we de div een unieke id: logo, we kunnen later vanuit onze stylesheet deze div vorm gaan geven, maar daarover meer in het volgende deel van deze reeks.
In de praktijk
Alle hierboven beschreven tags worden gebruikt in ons voorbeeld, in onze volgende les laat ik zien hoe we het document door middel van stylesheets vormgeven (voorbeeld 1 met stylesheet).
Zoals je begrijpt heb ik hier lang niet alle tags beschreven, ik raad je aan de tags door te nemen bij de w3schools site.