HTML/Basiscursus/Printversie

Deel II: Basiscursus

Nu we de inleiding hebben gezien waar we vooral spraken over de geschiedenis en achtergrond van HTML, gaan we nu aan het echte werk beginnen. In dit deel zullen we de basis van HTML bespreken. Sommige zaken zullen we niet bespreken omdat het overbodig, veel te moeilijk of te gedetailleerd is. Meestal zul je die zaken wel terug vinden in de delen geavanceerd of appendices. Regelmatig komen de nieuwe regels van XHTML aan bod, je mag die regels negeren maar het wordt sterk aangeraden om ze toch te volgen zodat je geen "slechte" gewoontes aanleert.

De inhoud van dit deel bewerken

4. Opmaak

Via bepaalde elementen en attributen kun je de inhoud van jouw pagina mooi opmaken. Tegenwoordig zijn veel van deze elementen of attributen verouderd in HTML en worden ze zelfs niet meer ondersteund in XHTML. In plaats van die te gebruiken wordt er aangeraden om CSS te gebruiken. In dit hoofdstuk zullen we enkele van deze elementen en attributen bekijken en tonen hoe je CSS kunt toepassen. We geven telkens ook de waarschuwing welke je wel mag gebruiken en welke niet.

Lettertype, grootte en kleur bewerken

Er zijn 2 manieren om het lettertype, grootte en kleur aan te passen. Dit kan via de attributen van een bepaald element of via CSS. Ook kun je via elementen bepalen welke teksten welke opmaak krijgen. Zo kun je dankzij body al de inhoud van een webpagina dezelfde opmaak geven of kun je bij hele kleine stukjes specifieke opmaak geven dankzij span.

font en span bewerken

zie ook font en span voor meer informatie.

Vroeger wanneer er aan hele kleine stukjes tekst (maar ook aan hele grote) opmaak moest veranderd worden werd er font gebruikt. Dit kon makkelijk worden gedaan dankzij zijn attributen

HTML-code: Tekst opmaken met font.

<span style="font-size: large; color: red; font-family: times new roman;">
Dit is grote rode tekst in times new roman.
</span>

Dit is grote rode tekst in times new roman.

Dankzij de attributen size, color en face kon je respectievelijk de grootte, kleur en lettertype van je tekst aanpassen. Bij het attribuut size moet je een getal van 1 tot 7 geven, bij color de naam of code van een kleur en bij face een lettertype. Dit element is ondertussen verouderd en wordt het nietmeer ondersteund door XHTML. Vrijwel alle browsers ondersteunen nog dit element maar het is echter aangeraden om het niet meer te gebruiken en alle opmaak in de stylesheet te definiëren. Nu kun je als je kleine stukjes tekst andere opmaak wilt geven het element span gebruiken. Deze heeft echter die attributen niet en moet je de tekst opmaken op een andere manier. Dit gebeurt via CSS of het style attribuut.

CSS & HTML-code: Tekst opmaken met span.

Dit is de CSS-code.

span {
     font-size: 19px;
     color: red;
     font-family: times new roman;
}

Dit is de HTML-code.

<span>
Dit is grote rode tekst in times new roman.
</span>

Dit is grote rode tekst in times new roman.

Met span kun je dus evenveel bereiken als font let wel op dat bij font-size andere regels gelden dan bij de size van font. Bij font-size wordt de grootte van de tekst opgegeven in pixels of punten. Als je nog niet vertrouwd bent met CSS kun je ook de CSS code plaatsen bij een attribuut van span namelijk het attribuut style.

HTML-code: Tekst opmaken met span.

<span style="font-size: 18px; color: red; font-family: times new roman;">
Dit is grote rode tekst in times new roman.
</span>

Dit geeft exact hetzelfde resultaat.

Nadruk leggen bewerken

Als we op tekst nadruk willen leggen moet deze tekst in het oog springen. Tegenwoordig worden daarvoor de elementen em en strong gebruikt. Naast deze elementen zijn er nog i, b en u. Deze zijn echter verouderd en het is af te raden om deze nog te gebruiken.

em bewerken

De em staat voor het engelse emphasis wat staat voor het woord nadruk. Met dit element kun je dus nadruk leggen op stukjes tekst.

HTML-code: Nadruk leggen op tekst via em

<em>Ik wil nadruk leggen op deze tekst</em>

Ik wil nadruk leggen op deze tekst

Meestal wordt de tekst dan schuin afgedrukt, maar dat is zeker niet altijd zo. Er kunnen browsers zijn die iets anders met de tekst doen of het element em kan via CSS zijn aangepast.

HTML-code: em aagepast via CSS

em { font-weight: bold; }

Via CSS kan er bijvoorbeeld gekozen zijn om alle stukjes tekst die ingesloten zijn door het element em vet te laten tonen. em wordt gezien als de beste vervanging voor het element i. Dus als je i gebruikt hebt, kun je die beter vervangen door em.

strong bewerken

De strong staat eigenlijk voor strong emphasis oftewel in het Nederlands sterke nadruk. Dit betekent dus dat de tekst die wordt omringd door het element strong dat die nog meer in het oog moeten springen dan de tekst met het element em.

HTML-code: Nadruk leggen op tekst via strong

<strong>Ik wil sterker nadruk leggen op deze tekst</strong>

Ik wil sterker nadruk leggen op deze tekst

Meestal wordt deze tekst dan vet gezet. Dit geldt niet altijd zoals bij het element em. Doordat de tekst vet wordt afgedrukt wordt het gezien als de beste vervanging voor het element b. Je kunt ook strong aanpassen dankzij CSS, zoals bijvoorbeeld de lettergrootte te veranderen.

HTML-code: strong aagepast via CSS

strong { font-size: 20px; }

italic(i), bold(b), underline(u) bewerken

De elementen i(italic), b(bold) en u(underline) staan respectivelijk voor cursief, vet en onderstreept. De elementen i en b zijn nog niet verouderd en zullen nog worden ondersteund door de verschillende webbrowsers. Er wordt echter sterk afgeraden om ze nog te gebruiken. Voor het element i wordt aangeraden om em te gebruiken en voor b wordt strong aangeraden.

Het element u is echter wel verouderd en mag dus niet echt meer gebruikt worden bij HTML pagina's. Het wordt wel nog ondersteund. Er wordt sowieso afgeraden om tekst te onderstrepen, dit is om te voorkomen dat gebruikers onderstreepte tekst zullen aanzien als links. Wil je toch tekst onderstrepen gebruik hiervoor dan liever CSS zoals in het volgende voorbeeld.

HTML-code: Tekst onderstrepen via CSS.

em { text-decoration: underline; }

CSS(Cascading Style Sheets) bewerken

5. Afbeeldingen en objecten

Dit hoofdstuk gaat over het gebruik van afbeeldingen en objecten.

Afbeeldingen bewerken

Zie ook het img element voor meer informatie.

Om een afbeelding te tonen op een webpagina is er niet veel nodig. Je hebt gewoon het element img en zijne attributen src en alt nodig en een URL naar een afbeelding. Het alt attribuut is bedoeld als tekst die screenreaders kunnen weergeven voor personen met slecht zicht. Verder dient het ook als alternatieve tekst die wordt getoond wanneer de afbeelding niet kan worden geladen.

HTML-code: Afbeeldingen

<img src="afbeelding.jpg" alt="Alternatieve tekst voor de afbeelding.">

Bij het attribuut src gelden dezelfde regels als bij het attribuut href van het a element(zie ). Je kunt via de attributen height en width respectievelijk de hoogte en de breedte van een afbeelding bepalen. Dit kan op twee manieren: m.b.v. een waarde in pixels of een waarde in percenten. Als je pixels gebruikt geef je precies aan hoe breed en hoe hoog de afbeelding mag zijn. De browser weet dan ook hoeveel ruimte er moet worden vrijgehouden en zal later, bij het effectief tonen van de afbeelding, de pagina niet moeten herschikken. Wanneer je een procentuele waarde geeft, bepaalt hij de grootte op basis van de werkelijke grootte van de afbeelding x jouw percent. Wanneer een afbeelding 200 pixels breed was en je een waarde van "50%" geeft zal hij half zo breed zijn, geef je 200% zal hij dubbel zo breed zijn.

HTML-code: Afbeeldingen

<img src="afbeelding.jpg" height="100px" width="100px" alt="Alternatieve tekst voor de afbeelding.">
<img src="afbeelding.jpg" height="50%" width="200%" alt="Alternatieve tekst voor de afbeelding.">

Afbeelding als link gebruiken bewerken

Om een afbeelding als link te gebruiken moet je het simpel weg in een a element verwerken.

HTML-code: Afbeeldingen

<a href="eenpagina.html"><img src="afbeelding.jpg" alt="Alternatieve tekst voor de afbeelding."></a>

Het gebruiken van maps bewerken

Zie ook het map element voor meer informatie.

Het aanmaken van maps bewerken

Het toepassen van maps bewerken

Overige attributen bewerken

XHTML bewerken

Let er op dat je bij XHTML de tag moet afsluiten.

HTML-code: Afbeeldingen

<img src="afbeelding.jpg" alt="Alternatieve tekst voor de afbeelding." />

De tag afsluiten doe je door achteraan een schuine streep toe te voegen("/").

Objecten bewerken

8. Citeren

HTML bevat enkele elementen die dienen voor stukjes tekst te citeren. In dit hoofdstuk worden deze elementen uitgelegd

Korte citaten bewerken

Korte citaten, citaten die in een zin of tekst zijn verwerkt, worden aangeduid met het element q.

HTML-code: Een korte citaat.

Descartes zei ooit <q>cogito, ergo sum</q>.

Vaak wordt zo'n citaat schuin afgedrukt. Normaal zou een browser automatisch aanhalingstekens moeten plaatsen bij deze korte citaat. Firefox doet dit maar Internet Explorer niet. Je kunt ook een verwijzing maken naar een webpagina vanwaar je de citaat vandaan hebt gehaald of een webpagina met extra informatie. Dit gebeurt met het attribuut cite

HTML-code: Een korte citaat.

<q cite="https://nl.wikiquote.org/wiki/Ren%C3%A9_Descartes">cogito, ergo sum</q>

Je moet dus als waarde een URL opgeven.

Lange citaten bewerken

Voor lange citaten bestaat er blockquote. Meestal springt de tekst in als je het in een blockquote zet.

HTML-code: Een lange citaat.

<blockquote cite="https://nl.wikiquote.org/wiki/Karl_Marx">
Religieus lijden is tegelijkertijd de uitdrukking van een echt lijden 
en een protest tegen een echt lijden. Religie is de verzuchting van 
het onderdrukte wezen, het hart van een harteloze wereld, en de ziel 
van zielloze omstandigheden. Het is de opium van het volk.
</blockquote>

Net zoals q kun je dus ook cite gebruiken. Cite gebruikt hier dezelfde regels. In XHTML is het verplicht om de inhoud van blockquote nog eens te zetten in een p element.

HTML-code: Een lange citaat.

<blockquote cite="https://nl.wikiquote.org/wiki/Karl_Marx">
<p>Religieus lijden is tegelijkertijd de uitdrukking van een echt lijden 
en een protest tegen een echt lijden.Religie is de verzuchting van 
het onderdrukte wezen, het hart van een harteloze wereld, en de ziel 
van zielloze omstandigheden. Het is de opium van het volk.</p>
</blockquote>

Het element cite bewerken

Het element cite is een alternatief voor het attribuut cite en dient om de bron van de citaat aan te geven of van wie die citaat komt. In tegenstelling tot de attribuut wordt de inhoud van het element cite wel getoond op het scherm.

HTML-code: Het element cite.

<p>
<cite>Karl Marx zei ooit:</cite>
</p>

<blockquote>
<p>Religieus lijden is tegelijkertijd de uitdrukking van een echt lijden 
en een protest tegen een echt lijden.Religie is de verzuchting van 
het onderdrukte wezen, het hart van een harteloze wereld, en de ziel 
van zielloze omstandigheden. Het is de opium van het volk.</p>
</blockquote>

<p>
bron: <cite><a href="https://nl.wikiquote.org/wiki/Karl_Marx">Wikiquote</a></cite>
</p>