HTML staat voor HyperText Markup Language. Het is een opmaaktaal die wordt gebruikt om
webpagina’s te creëren.
We gaan kort over de taal die in de HTML wordt gebruikt met enkel voorbeelden. Je moet nog niet verstaan hoe ze werken, wel wat de vakjargon (Tags, elementen, attributen) betekent.
Tags
HTML is opgebouwd uit elementen. Ze hebben opening- en closingtags om de verschillende onderdelen van een webpagina aan te maken.
Openingstag (<>)
Closingtag (</>)
<p>Hallo dit is een paragraaf</p>
Elementen
Een element is een onderdeel van de opbouw van onze HTML, zoals een paragraaf of header
<h1> Dit is een koptekst </h1><p> Dit is een paragraaf </p>
Attributen
Een element kan ook attributen hebben. Dit zijn eigenschappen van dat specifieke element.
In dit voorbeeld gaan we de tekstkleur oranje maken, dit is het attribuut.
<p style="color:orange;"> Dit is een paragraaf </p>
Basisstructuur HTML
Wanneer we een HTML pagina maken zit er een bepaalde basisstructuur in. We moeten de browser laten weten wat ze moet tonen en hoe.
We gaan stukje per stukje gaan uitleggen wat, hoe en waarom we deze onderdelen gebruiken
<!DOCTYPE html>
<html>
<head>
<title> Mijn website </title>
</head>
<body>
<h1> Dit is een koptekst. </h1>
<p> Dit is een paragraaf</p>
</body>
</html>
Documenttype
Om ervoor te zorgen dat elke browser, hoe oud of nieuw dan ook, je document ze weet te lezen, specificeren we dat het over een specifieke versie van HTML gaat. Als we gewoon ‘HTML’ zetten dan gaat het over HTML 5, de nieuwste versie. Anders kan je dit anders specificeren.
Om een voorbeeld te geven nemen we een oudere versie van HTML, HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Info
Het is niet noodzakelijk, maar wel een goede praktijk om het element toe te voegen.
HTML
Specificeert het begin en einde van het document.
<html>. . .</html>
Info
Je kan hierin ook attributen toevoegen, bv. de taal waarin de webpagina zich voordoet
<html lang="nl"></html>
Head
In de <head> van een pagina zetten we belangrijke elementen voor opmaak, metadata en functionaliteit van de webpagina.
Titel
Met het ‘title’-element geef je de titel weer die aan het tabblad wordt toegekend.
Als je naar google.com browst krijg je van boven geen google.com maar gewoon ‘Google’, zo doen ze dit.
<title>Mijn website</title>
Geen titel
Wel titel
Metadata
Metadata is data die niet zichtbaar is voor de gebruiker maar wel in de achtergrond meer info heeft over het (html) document, hoe ze moet getoond worden en
Met metadata kan je veel, bv. de auteur van de pagina kenbaar maken, trefwoorden invoeren voor SEO, je pagina om de zoveel tijd laten vernieuwen, hem laten aanpassen aan het type apparaat, …
We nemen het voorbeeld van een beschrijving aan de pagina toe te voegen.
In de head kan men ook verwijzen naar de CSS stijl die men wil toepassen op de pagina.
<style></style>
Links
A.d.h.v. links kan men een relatie tussen onze html pagina en een externe bron leggen.
Dit wordt gebruikt om bv. een algemeen stijlblad te hebben voor al je pagina’s of om een nieuw lettertype, …
<link>
Body
In de body zetten we alles dat we op de pagina zelf willen laten komen. Zoals tekst, koppen, links, … we zien later hoe we dit doen.
<body> <h1> Dit is een koptekst. </h1> <p> Dit is een paragraaf</p></body>
HTML als opmaaktaal
Nu gaan we er voor het écht over hoe we nu een HTML document gaan opmaken, welke onderdelen er bestaan, hoe je ze toepast en waar je voor moet uitkijken.
We gaan niet over elk element dus bekijk zeker onze bron ‘https://www.w3schools.com’ voor meer elementen en al hun attributen
Tekst
Commentaar
We beginnen met commentaar, in html doen we dit zo.
<!-- Commentaar komt hier -->
Een paragraaf
Het meest basic stukje tekst. Het makkelijkste maar krachtigste element van onze HTML. Ze wordt gedefinieerd met ‘p’.
<p>Mijn eerste paragraaf</p>
Tekst benadrukken
Tekst zetten we in het vet door het ‘strong’ element
<p>Mijn <strong>eerste</strong> paragraaf</p>
Tekst schuin benadrukken
Tekst zetten we schuin door het ‘em’ element
<p>Mijn <em>eerste</em> paragraaf</p>
Een kop of titel
Een kop of titel maken we door het ‘h1’, ‘h2’, ‘h3’ element.
<h1>Ik ben een titel</h1><h2>Ik een kop van h1</h2><h3>Ik een kop van h2</h3><p>Mijn eerste paragraaf</p>
Een nieuwe lijn
Wanneer je op een volgende lijn wilt verder doen dan gebruiken we het ‘br’ element
<p>Hier is</p><br><p>Een spatie</p>
Verwijzingen
Een link
Als je een link wilt toevoegen doen we dit met het ‘a’ element.
<a href="https://www.google.com">Google</a>
Een afbeelding
Als je een afbeelding wilt toevoegen doen we dit met het ‘img’ element.
Hierin kan je ook alt-tekst schrijven voor mensen met visuele handicap
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ef/Youtube_logo.png" alt=”Logo van YouTube”>
Lijsten
Een lijst met opsommingstekens
Een lijst met opsommingstekens starten we met ‘ul’ en elk onderdeel met ‘li’
‘ul’ staat voor ‘unordered list’ of ongeordende lijst
CSS staat voor Cascading Style Sheets. Het is de manier om HTML te stijlen.
We gaan kort over de taal die in de CSS wordt gebruikt met enkel voorbeelden.
Selectors
Met selectors selecteren we letterlijk welk html element we willen stijlen. Het is de naam zonder syntaxis van een html-element.
In het geval van het HTML element <p></p> is de selector ‘p’
<p></p>
p {}
Eigenschappen en waarden
Eigenschappen zijn letterlijk wat je denkt. Je neemt de eigenschap van een stuk HTML en past die aan. We nemen het voorbeeld van de kleur van een paragraaf.
De eigenschap in dit geval is ‘color’.
De waarde van de eigenschap ‘color’ is nu ‘orange’ ofwel oranje in het Nederlands.
<p>Ik ben oranje</p>
p { color: orange;}
Types CSS
We hebben drie verschillende mogelijkheden om CSS toe te passen op een HTML bestand. We overlopen wat ze zijn en hoe we ze toepassen.
Inline CSS
Bij inline CSS gaan we de stijl info letterlijk in de HTML elementen zetten.
We starten met de ‘stijl’ attribuut zodat onze browser weet dat er nu CSS komt om de paragraaf te stijlen.
Nu gaan we de eigenschap ‘color’ of kleur aanpassen.
We geven de waarde waarmee we de ‘color’ eigenschap willen aanpassen, in dit geval ‘orange’ ofwel oranje.
<p style=’color: orange;'>Ik ben oranje</p>
Meerdere eigenschappen
We zetten op het einde van de eigenschap een puntkomma (;). Dit zorgt ervoor dat we erna nog een attribuut kunnen toekennen, bv. het font!
<p style=’color: orange; font-family: Arial;'>Ik ben oranje</p>
Interne CSS
Bij interne CSS zetten we onze styling niet meer in de elementen maar wel nog steeds in ons HTML document.
We doen dit a.d.h.v. het html element ‘style’.
Daarna gebruiken we de selector, in dit geval ‘p’ voor paragraaf, gevolgd door ‘{}’ haakjes.
Ten slotte gevolgd door de eigenschap en waarde.
Opnieuw eindigen we elke eigenschap met ‘;’ zodat we meerdere kunnen
<style> p { color: orange; }</style><p>Ik ben oranje</p><p>Ik ben ook oranje</p>
Externe CSS
Externe CSS is een andere vorm om CSS toe te passen. We gebruiken een extra bestand met de ‘.css’-extensie om een stijl toe te passen.
Je maakt een html bestand aan met wat inhoud en kijkt wat je wilt veranderen.
<p>Ik ben oranje</p><p>Ik ben ook oranje</p>
En daarna maak je een .css bestand aan en pas je het element aan met een selector.
p { color: orange;}
Linken van bestanden
Om je HTML aan te passen a.d.h.v. een extern CSS bestand moet je die eerst linken. We doen dit letterlijk a.d.h.v. het ‘link’. Dit zetten we in de ‘head’-sectie van het HTML bestand.
We starten natuurlijk met ‘link’ om een extern bestand (internet of opgeslagen op pc) te linken.
Daarna zetten we het type van het bestand dat we willen linken, in ons is dit een CSS bestand ofwel een ‘stylesheet’.
Ten slotte zetten we de bestandsnaam van het css bestand, in ons geval is dit ‘styles.css’.
<head> <link rel=”stylesheet” href=”styles.css”><head><body> <p>Ik ben oranje</p></body>
p { color: orange;}
Verschillen
Om te illustreren wanneer we welk type CSS gebruiken zet ik hier een tabel neer met hun eigenschappen.
Inline CSS
Interne CSS
Externe CSS
In HTML bestand
In HTML bestand
Buiten HTML bestand (in .css bestand)
Per element stijlen
Meerdere elementen stijlen
Meerdere HTML pagina’s stijlen
Inline CSS is niet handig als je meer dan eenzelfde element moet stylen. Je gebruikt het enkel als je iets wilt testen, voorbeelden, debuggen of in tijdelijke aanpassingen.
Interne CSS is de middenweg. Je gebruikt ze als je vlug een document wilt opmaken en uittesten, een voorbeeld te tonen of in tijdelijke toepassingen bij grote documenten.
We kunnen dus concluderen dat externe CSS het handigste is in gebruik en de beste praktijk is om toe te passen.
Warning
Inline en interne CSS zijn uitzonderingen op de wet, je gebruikt ze zo min mogelijk en nooit in productieomgevingen.
Wanneer je een professionele website maakt voor een project of opdracht in de klas gaat men dus externe CSS gebruiken.
CSS en styling
Stylen met classes
Naast specifieke HTML elementen aanpassen kunnen we ook een klasse aanmaken om dezelfde stijl op verschillende elementen repetitief toe te passen.
Structuur
Om een klasse te definiëren en linken ga je:
In CSS een willekeurige (logische) naam typen die je aan je klasse wilt geven met een punt ervoor.
In HTML link je hem door bij je element het attribuut ‘class’ te gebruiken gevolgd door de naam van je klasse.
<p class=’mijnklasse’></p>
.mijnklasse {}
Stylen met ids
Nadat je je elementen gestyled hebt met klassen of selecteren kan je unieke elementen nog eens apart aanpassen.
Stel je hebt een paragraaf die je een in het vet wilt zetten, dan kan je dit doen met IDs
<p id=”uniekparagraaf”></p>
#uniekparagraaf {}
Boxmodel
Een layout van een webpagina bestaat uit html-objecten en hun positie tegenover elkaar. Eén manier om deze positie aan te passen is margins en padding.
Ze lijken gelijkaardig in functie, witruimte toevoegen tussen bepaalde elementen, maar hebben andere eigenschappen.
We starten met de paragraaf ‘Dit is een paragraaf’. Hier rond zetten we een zwarte border om straks duidelijk te maken wat margins en padding doen.
Warning
De rand (border) is niet de padding of margins. We hebben het over de witruimte die wordt gecreëerd. Ze is enkel demonstratief.
<p>Dit is een paragraaf</p>
p { border: 1px solid black;}
Padding
Met padding gaan we de rand rond de content witruimte toevoegen.
Dit kunnen we in het algemeen rond het element doen, maar ook individueel boven, onder, rechts of links doen.
Voorbeeld 1: Tekst
In dit geval gaan we aan ons paragraaf witruimte toevoegen.
p { border: 1px solid black; padding: 4px;}
Voor styling
Na styling
Voorbeeld 2: Afbeelding
Nu gebruiken we het voorbeeld van een foto om te tonen hoe padding daar werkt.
p { border: 1px solid black; padding: 4px;}
Voor styling
Na styling
Margins
Met margins gaan we de rand tussen dit element en de rondliggende elementen veranderen.
Alweer kunnen we dit algemeen rond het element doen, maar ook individueel boven, onder, rechts of links.
<div> <p>Ik wou dat ik margins had.(</p> <p class="margins">Ik heb margins!</p></div>
