Les 1: HTML

September 23, 2019

In software ontwikkelingsteams wordt vaak de Agile ↗ filosofie toegepast, wat in de praktijk betekent dat er met Scrum ↗ gewerkt word. Scrum betekent dat je in korte, intensieve sprints werkt, waarin je gefocust een aantal doelen probeert waar te maken. Deze cursus bestaat uit 5 sprints die elk 2 tot 5 weken duren. Deze eerste sprint duurt twee weken.

Deze sprint bestaat daarom uit 5 uur klassikaal les (2x2x1.25). Per lesuur wordt verwacht dat je zelfstandig nog eens 3 uur thuis werkt (of 1 uur full focus)

In de les krijg je achtergrondinformatie, gelegenheid om vragen te stellen of om hulp te vragen en gaan we aan het werk.

HTML

1. HTML-tags moet je openen en sluiten

Bekijk onderstaande Powerpoint van les 1 ↗. Die begint met een dictee. Het punt is dat HTML net zo werkt als aanhalingstekens (“”) en tussen haakjes (…). En de meeste mensen hebben geen probleem om die te gebruiken. HTML- tags hebben namelijk een opening-tag (<…>) en je moet ze afsluiten (</…>). Er zijn een aantal HTML-tags die op zichzelf staan, en dus niet nog eens hoeven worden afgesloten. Deze tags kunnen nooit inhoud bevatten, vandaar dat ze niet afgesloten hoeven worden. In het Engels heten ze self-closing tags. Deze hebben de vorm <… />

2. HTML bestaat uit objecten met een naam, attributen en kinderen

Kijk maar naar (1) op onderstaande cheatsheet. In de linker kolom zie de syntax van normale tags en self-closing-tags. Een tag heeft een naam, eventueel ook attributen die elk een waarde hebben, en eventuele kinderen die tussen de HTML-tags in staan (in de innerHTML). HTML tags kunnen oneindig genest worden. Je kunt ze dus oneindig in elkaar plaatsen. De browser ziet alle html-elementen als objecten die in een boomstructuur aan elkaar gerelateerd zijn. Deze boom-structuur noemen we de DOM: de Document Object Model.

» Meer informatie over DOM op W3schools ↗

MAAR: Sommige HTML-tags mogen alleen op bepaalde plaatsen voorkomen, of mogens zelfs maar 1x voorkomen. Dit geldt met name voor een paar top-level tags die de HTML-pagina maken (zie punt 4). Kijk naar kolom (2) in bovenstaande cheatsheet. Merk op dat:

3. Elke HTML-pagina begint met een DTD: een Doctype Declaration

<!DOCTYPE html>

De DTD vertelt de computer en de browser dat water volgt een HTML-document is. De browser verwacht daarom HTML-tags en een document die voldoet aan hoe een HTML-pagina eruit hoort te zien. Er zijn veel verschillende DTD’s voor verschillende bestanden. HTML is namelijk een speciaal soort XML en al die XML-achtige bestanden hebben een DTD. Bijvoorbeeld: KML, e-mail, excel-documenten (als je ze unzipped). Merk op dat de DTD geen tag is en dus niet afgesloten wordt.

» Meer informatie over DTD op W3schools ↗

4. Elke HTML pagina bestaat uit 4 tags die MOETEN voorkomen, en die niet meer dan 1x mogen voorkomen:

de <html> -tag omsluit alle HTML in het document. Het is daarom de meest buitenste tag van het document.
<html> bevat altijd als eerste een <head> die meta-informatie over het document bevat. Dit is informatie die niet perse zichtbaar is op de pagina, maar die wel beschikbaar is voor zoekmachines, de browser of andere software.
De <head> bevat op zijn beurt altijd 1 <title>, die de pagina-titel bevat welke in de tab van je browser wordt getoond. De <head> bevat ook links naar externe scripts (o.a. css en javascript) die geladen moeten worden alvorens de pagina geladen kan worden. Indien stijl in het document zelf is opgeslagen, dan staat dit ook als 1 <style>-tag in de head.
De head wordt gevolgd door de <body> – het zichtbare deel van de site. In de body kunnen tags oneindig genest worden.

<!DOCTYPE html>
<html>
      <head>
            <title>Titel in de tab</title>
            <style></style>
      </head>
      <body>
            <h1>Zichtbaar deel</h1>
            <p>paragrafen en h1 kunnen oneindig vaak voorkomen. Alle andere tags in dit voorbeeld mogen maar 1x voorkomen.</p>
      </body>
</html>

5. Meestgebruikte HTML tags

Er zijn ongeveer 120 HTML tags en er worden nog steeds nieuwe ontwikkeld. Dat lijkt misschien veel, maar besef dat als je een taal leert, je al gauw 500 woorden moet kennen om het een beetje te spreken, en 10 000 om vloeiend te spreken.

Maar net als bij talen hoef je niet meteen alle woorden te kennen voor je de taal kunt gebruiken. Je kan eerst een beperkte set leren en daarna steeds een paar nieuwe tags als je ze nodig hebt. Wij adviseren om er in eerste instantie 40 te leren. Maar daarmee ben je er nog niet, want HTML-tags hebben ook attributen en speciale karakters hebben ook hun eigen code. Maar al met al kom je dan nog op 50 termen, waarvan je er 7 al kent!

In kolom (3) van bovenstaande cheatsheet zie je een paar van de meestgebruikte HTML-tags. Een uitgebreidere lijst met meestgebruikte tags gaan we in de opdrachten gebruiken en vind je hier: meestgebruikte HTML-tags.

IMPLEMENTATIE: VAN HTML-PAGINA TOT ONLINE WEBSITE

Bovenstaande cheatsheet geeft genoeg informatie om je eerste HTML-document te maken, welke direct in je browser bekeken kan worden.

Om HTML te schrijven, heb je wel nog een programma nodig. Niks ingewikkelds, je kunt hier elke tekst-editor voor gebruiken, zoals het kladblok/notepad wat standaard bij windows zit. Bij het extra materiaal vind je een paar alternatieve tekst-editors. In deze cursus gaan we een editor gebruiken die speciaal ontwikkeld is voor web-ontwikkelaars. Ideaal dus voor wat wij aan het doen zijn.

Opdr 1. Je eerste webpagina

Je leert Brackets te installeren en een bestaande html-pagina als template gebruiken. Je kunt natuurlijk ook met een lege pagina beginnen, maar in de praktijk is een template gebruiken vaak handiger.
In Opdracht 1 moet je vervolgens alle veelgebruikte HTML-tags aan je document toevoegen. Zoek ze stuk voor stuk op op W3schools ↗ en voeg ze toe aan het document. Kijk wat er gebeurt. Als je klaar bent heb je een document waar je altijd in kunt afkijken: een cheatsheet.
Gebruik ook de HTML cheatsheets uit het extra materiaal

Ga naar Opdr 1. Je eerste webpagina