Ontdek alles over HTML en CSS
De opmaaktalen HTML en CSS
Simpel gezegd zijn HTML en CSS opmaaktalen voor websites. HTML. Maar al gauw loop je tegen tal van onbekende begrippen en uitleggen aan. Het programmeren van websites is een vak apart, maar je kunt je er wel in verdiepen! De basis is niet zo heel moeilijk, alleen moet je weten wat het inhoud, wat het doet en wat je ermee kunt. In deze blog komen de basisbeginselen van HTML en CSS aan bod, een goede en snelle start is zo gemaakt!
Wat is HTML en wat doe je ermee?
Om te beginnen is het handig om te weten waar HTML voor staat. HTML betekent HyperText Markup Language dat als een opmaaktaal voor documenten wordt gebruikt. HTML-codes worden voornamelijk op webpagina’s gebruikt. De HTML code zorgt ervoor dat een webbrowser kan lezen hoe een bepaalde webpagina voor gebruikers weergegeven moet worden. Het is een platte tekst die dus als opmaaktaal wordt gebruikt. De gebruiker ziet alleen de uitwerking van het HTML tekstbestand.
Veel voorkomende HTML elementen en attributen
Een HTML bestand bestaat uit elementen en attributen. Een element bestaat meestal uit twee delen: het eerste deel opent de tag, terwijl het andere element hem weer sluit. De tag heeft een begintag (<) en een end-tag (>), waartussen de naam van het element staat vermeld. De tag wordt in de meeste gevallen beëindigd met het slash (/) teken.
<p> Hier komt je tekst te staan </p>
Attributen geven een specificatie van een element aan. De attributen worden opgenomen in de begintag van het element. Let wel op bij het invoeren van een attribuut dat het hoofdlettergevoelig is! Het attribuut wordt vervolgd met een waarde, die tussen aanhalingstekens wordt geplaatst. Nog allemaal vrij onduidelijk? In onderstaand voorbeeld is <p de openingstag (het element). Dit wordt door een spatie en align vervolgd: hier is align het attribuut. Vervolgens wordt er een waarde toegekend aan het attribuut, namelijk =”center”. Het > teken geeft aan dat de begintag hier sluit.
<p align=”center”>Deze tekst wordt gecentreerd</p>
Voorbeelden van een HTML-document
Om je een duidelijker en helder beeld te schetsen van hoe er een HTML document uitziet, is hieronder een voorbeeld uitgewerkt met veelvoorkomende tags. Dit is een hele simpele HTML-code voorbeeld, maar het geeft wel duidelijk de belangrijkste opmaak weer. Zo zie je dat je een HTML bestand altijd opent met een <head> tag, waar onder andere je titel in vermeld staan en andere belangrijke zaken van je website. Dit wordt gesloten door de </head> end-tag. Vervolgens opent zich het body gedeelte van de website zich met de <body> tag. Hier komt alle andere informatie van je website te staan, zoals paragrafen, headings, secties, etc. Deze worden, logischerwijs, gesloten met de </body> end-tag. Uiteraard mag de </html> end-tag niet vergeten worden! Vrijwel alles dat geopend wordt moet ook weer afgesloten worden, uitzonderingen daargelaten.
Wat is CSS en wat doe je ermee?
CSS is een afkorting van Cascading style Sheets, ook wel stijlbladen, en geeft de opmaak van een website weer. CSS is een aanvulling op het HTML document: CSS is een programmeertaal dat de stijl van het HTML document beschrijft. Het geeft aan hoe de HTML elementen aan de websitebezoeker moeten worden weergegeven. De CSS wordt aan de HTML-code toegevoegd. Om een duidelijker beeld te scheppen van wat CSS inhoud, zijn dit een aantal voorbeelden.
Veel voorkomende CSS elementen
CSS bestaat uit een aantal aspecten zoals paginakleur, lettertype, positie, etc. Het handige hieraan is dat elk volgend document dezelfde stijl erft, zodat niet elk element op elke pagina hoeft te worden geïmplementeerd. Zo hoeft er alleen een aanpassing worden gedaan op het afwijkend aspect. Het CSS is een apart document dat in een HTML document wordt geplaatst. Met onderstaand voorbeeld zal dit snel duidelijk worden.
Voorbeeld van een CSS-document
In het CSS maak je een bepaalde stijl aan die je vervolgens zelf een naam geeft. In het CSS bestand staat deze stijl helemaal uitgewerkt. Vervolgens gebruik je de naam die je aan deze stijl hebt gegeven in het HTML bestand. Het kan er als volgt uit komen te zien:
Oefenen, oefenen, oefenen
Het is allemaal vrij ingewikkeld en ook best lastig om te begrijpen als je hier nooit mee werkt of hebt gewerkt. Door te oefenen en proberen kom je hier vanzelf achter en dan wordt het pas echt leuk! Daag jezelf uit en ga op onderzoek uit op het internet. Volg cursussen, start je eigen online website en probeer maar uit! Wat heb je te verliezen? Alle kennis die je opdoet is mooi meegenomen.
