In deze eerste les tref je voorbereidingen om HTML/CSS pagina’s te kunnen maken en inspecteren. Daarnaast Leer je de basis van een HTML document te begrijpen en maak je kennis met een aantal HTML-tags.
Voorbereidingen voor het ontwikkelen van HTML/CSS pagina’s.
Voor het bouwen, testen en inspecteren van webpagina’s is er ontzettend veel software verkrijgbaar. In deze cursus wordt gekozen voor Sublime Text als code-editor en Firefox als browser. Bij Firefox wordt daarnaast nog gebruik gemaakt van de add-on “Firebug”.
Sublime Text
Sublime Text is een lichtgewicht, no-nonsense code-editor met geweldige uitbreidingsmogelijkheden. Out-of-the-box is het echter snel, portable en met syntax-highlighting. Sublime Text is gratis te gebruiken, maar mocht je er veel mee werken, overweeg dan de aanschaf van een licentie.
Sublime Text werkt zowel op Windows als op Mac en ook Linux 🙂
Op YouTag staat een quick-start met informatie over hoe je Sublime Text 2 zo optimaal mogelijk kunt gebruiken.
Mozilla Firefox
Er wordt aangeraden om Firefox te gebruiken omdat deze samen met Chrome het meest standards-compliant is. Tijdens de cursus is Firefox de enige browser die telt voor het bouwen van webpagina’s die er uit zien zoals het bedoeld is in de code.
Firebug
Mocht je ooit “rare dingen” zien wanneer je je webpagina in Firefox bekijkt, dan kun je met deze add-on snel de oorzaak achterhalen. Zelf gebruik ik FireFox bijvoorbeeld om te kijken waarom een bepaalde opmaak niet wordt getoond terwijl ik die wel in CSS heb aangegeven. Ook voor het inspecteren van Javascript (waar we in deze cursus gelukkig niets mee doen) is Firebug zeer geschikt.
Welke extensie heeft een webpagina?
Word-documenten worden tegenwoordig opgeslagen als .docx. Excel documenten worden tegenwoordig opgeslagen als .xslx.
Wanneer je de code die je hebt geschreven wilt opslaan als een webpagina, dan moet je de bestandsnaam laten eindigen op .html . CSS bestanden hebben als extensie .css
Minimale HTML Basisstructuur
Elke webpagina waar je in de cursus maar ook daarna aan gaat werken heeft een minimaal vereiste basisstructuur nodig. Deze ziet er als volgt uit:
<!doctype html> <html lang="nl"> <head> <meta charset=utf-8> <title></title> </head> <body> </body> </html>
Wat zie je in bovenstaand voorbeeld?
Om te begrijpen wat er in bovenstaand voorbeeld staat, is het handig te weten waar HTML eigenlijk voor staat: HyperText Markup Language. Kortgezegd is HTML een taal waarmee je informatie “beschrijft” of “structureert”. Dat doe je met behulp van zogenaamde “tags”.
Tags (ook wel elementen genoemd)
Een tag begint altijd met een <-teken en eindigt altijd met een -> teken. Voor HTML5 (de taal waarin je html-pagina’s gaat leren maken) zijn er een groot aantal voorgedefinieerde tags. De meeste tags kennen een zogenaamde openende tag en een zogenaamde sluitende tag. Voorbeelden van dit soort tags zijn de body-tag en de title-tag. Sommige tags hebben geen sluitende tag nodig. Voorbeelden van dit soort tags zijn de doctype-tag en de meta-tag.
(Proper) Nesting
Zoals je in bovenstaand voorbeeld ziet kun je binnen tags andere tags plaatsen. In bovenstaand voorbeeld zie je dat het head-element een zelfsluitende meta-tag bevat en een title-tag. Als je een tag of element binnen een andere tag of element plaatst, moet je deze binnen deze tag of element ook weer sluiten. Dat noem je met een deftig woord “proper nesting”.
Belangrijk detail: de meta-tag en de title-tag moeten, wanneer je ze gebruikt, altijd binnen de head-tag worden geplaatst en niet ergens anders in het document. Dit zijn namelijk tags die de pagina als geheel omschrijven en “pagina beschrijvende tags” plaats je altijd binnen de head-tag.
HTML-attributen
Sommige elementen kun je bepaalde eigenschappen meegeven. In bovenstaand voorbeeld zie je dat bij de HTML-tag en bij de meta-tag. Eigenschappen definieer je altijd in de openende tag van een element en nooit in de sluitende tag van het element. Met “lang” geef je aan van wat voor taal de teksten op je webpagina zijn. Dit is bijvoorbeeld handig voor zoekmachines en vertaalmachines. Met charset geef je aan welke karakterset de computer nodig heeft om speciale karakters op je webpagina te tonen (bijvoorbeeld ë of ©). Voor westerse talen wordt meestal utf-8 gebruikt.
Eenvoudige basispagina
Hieronder zie je een eenvoudig voorbeeld van een HTML pagina die is gebaseerd op de minimale HTML basisstructuur.
<!doctype html> <html lang="nl"> <head> <meta charset=utf-8> <title>Eerste webpagina</title> </head> <body> <h1>Mijn eerste webpagina</h1> <p>Welkom op mijn eerste webpagina.</p> <p>Ik ben <strong>Jaap van der Veen</strong>, docent aan <em>NHL Hogeschool</em></p> </body> </html>
Je ziet dat je met html-tags op een pagina aan kunt geven hoe bepaalde informatie moet worden geïnterpreteerd. Is het een kop, een alinea met gewone tekst of tekst die extra moet worden benadrukt. In les 2 wordt het belang van juiste tags voor de juiste informatie uitgelegd.
Block en inline elementen
In bovenstaand voorbeeld zie je vier nieuwe tags voorbij komen:
- Een kop-1 tag (h1), dit is een block-element
- Een paragraaf tag (p), dit is een tag waarmee je een alinea beschrijft. Ook een block-element
- Een strong-tag (strong). Dit is een inline tag waarmee je een of meerdere woorden kunt benadrukken.
- Een emphasize-tag (em). Dit is een inline tag waarmee je een of meerdere woorden kunt benadrukken.
Het h1 element en p element zijn voorbeelden van block-elementen. Dit betekent dat ze de volledige breedte van de pagina in proberen te nemen. Mocht je bovenstaande code in een HTML document plakken en opslaan als *.html pagina, dan zie je dat de kop netjes boven de twee alinea’s met tekst staat. Het “gedrag” van deze elementen kun je aanpassen met CSS zodat ze niet meer de hele breedte van de pagina proberen in te nemen.
De strong-tag en de em-tag zijn elementen waarmee je informatie op je pagina kunt benadrukken. Standaard wordt tekst tussen strong-tags dikgedrukt weergeven en wordt tekst tussen em-tags cursief weergeven. Met CSS is het mogelijk om de opmaak van strong-tags of em-tags aan te passen, zodat de tekst binnen strong-tags bijvoorbeeld een andere kleur krijgt of een onderstreping.
Inspringen
Zoals je in de code voorbeelden op deze website ziet, wordt er gewerkt met inspringen. Door in te springen kan code vaak beter worden gelezen door bijvoorbeeld mede-programmeurs en is bijvoorbeeld snel zichtbaar welke child-elementen een bepaald parent-element bevat.
Het inspringen van code heeft geen voordelen qua snelheid of zoekmachinevriendelijkheid.
Je code documenteren
Onder programmeurs en webbouwers is het gebruikelijk om (gedeelten van) code te documenteren. Soms wordt bijvoorbeeld de datum opgenomen waarop de programmeur voor het laatst aan de code heeft gewerkt. Je kunt ook commentaar opnemen om je code uit te leggen. Dit is tijdens de cursus bijvoorbeeld erg belangrijk omdat je “aantekeningen” tussen je code kunt schrijven zodat je later eenvoudig kunt zien waar een bepaalde tag voor is. Commentaar plaats je tussen <!– en –> . Tekst die tussen <!– –> staat wordt niet getoond wanneer mensen je webpagina bekijken in een browser, maar wanneer de code achter de webpagina wordt bekeken, is commentaar wel zichtbaar. Zie onderstaand voorbeeld voor de minimale vereiste bassistructuur voorzien van commentaar.
<!doctype html> <!-- Dit (ook wel doctype declaratie) geeft aan dat het een HTML5 pagina betreft --> <html lang="nl"> <!-- In deze tag geef je aan wat de taal van de HTML pagina zal zijn --> <head> <!-- Binnen de head-tag plaats je allemaal "informatie" over de pagina --> <meta charset=utf-8> <!-- De karakterset die moet worden gebruikt. Voor westerse talen is utf-8 nodig. --> <title></title> <!-- De titel van de webpagina. --> </head><!-- De meeste tags in HTML moeten weer worden afgesloten met een sluitende tag. --> <body><!-- Alles wat men op je website ziet plaats je binnen de body-tag --> </body><!-- Ook de body tag moet worden afgesloten --> </html><!-- Hiermee geef je het einde van je HTML-pagina aan -->
Voorbereidingen om succesvol te kunnen starten met les 2
Voor les 2 moet je experimenteren met de volgende HTML tags:
- h1, h2, h3, h4, h5, h6 » meer informatie over deze tags vind je op W3Schools
- p, br » meer informatie vind je op W3Schools
- em, strong » meer informatie vind je op W3Schools
- ul, ol, li » meer informatie vind je op W3Schools
Onderzoek doen naar de genoemde begrippen
Voor les 2 moet je je hebben verdiept hebben in de volgende begrippen:
- Block- en inline elementen » meer informatie vind je op W3Schools
- Nesting » experimenteermateriaal vind je op W3Schools
- HTML-attributen » meer informatie vind je op W3Schools
Opdracht voor les 2
Na les 1 krijg je van de docent een kleine praktische opdracht die je voor les 2 moet doen. De uitwerking van deze praktische opdracht stuur je een dag voor les 2 terug naar de docent.
De link voor nesting werkt niet.
Hoi Amanda,
Bedankt voor je alertheid! Ik heb de link aangepast.
De link voor: “HTML-attributen » meer informatie vind je op W3Schools” werkt niet meer.