HTML

HTML is voor een website hetzelfde als de muren zijn voor een huis: het essentiële fundament.

We kunnen een huis bouwen zonder decoratie en functionaliteit als we maar muren en een dak hebben. HTML is de structuur, het fundament en de inhoud van de website.

Willen we ook mooi behang en versiering dan voegen we lay-out toe, voor de website is dit CSS.

CSS is de layout, de stijl, het uiterlijk of de vormgeving van de website.

Als we ook functionaliteit toevoegen, zoals stromend water door een kraan open te draaien en elektriciteit vanuit een stopcontact, dan hebben we een nog aangenamer huis om in te wonen.

In de website zijn de functionaliteiten voornamelijk bij Javascript te vinden. Bijvoorbeeld: een knop die een volgende afbeelding in een slider laat verschijnen.

De aangenaamste websites combineren alle drie de aspecten.

Enkele goede bronnen om HTML, CSS en Javascript te leren kennen zijn:

W3schools en Sololearn

HTML (Hypertext Markup Language) is de taal die gebruikt wordt om webpagina’s weer te geven. HTML vormt de bouwstenen van het internet.

Soms wordt HTML een programmeertaal genoemd, maar eigenlijk is dit fout. HTML heeft geen logica en is dus een opmaaktaal. Opmaak betekent dat je met HTML verklaart wat aan een bezoeker wordt gepresenteerd, bijvoorbeeld “een afbeelding” (niet hoe het wordt gepresenteerd).

HTML-tags bieden semantische betekenis (H1-H6, section, article…) en machinale leesbaarheid voor de inhoud op de pagina. De browser interpreteert de inhoud aan de hand van de tags.

HTML is onstaan in 1991. Er zijn verschillende versies van geweest en nu zitten we aan de versie die we HTML5 noemen (sedert 2014).

Hoe ziet HTML er op een pagina uit?

Welke structuur zit er in HTML?

Tags:

  • vb: <html> (openingstag)
  • vb: </html> (sluitingstag)

Content:

  • Inhoud tussen de openingstag en de sluitingstag

Elementen: de tags (en de content erin) tussen de html tags

  • <html>………tags en content …..</html>

HTML elementen zijn de bouwstenen van een webpagina. Ze zijn zichtbaar voor de browser door middel van hun eigen tags. Tags labelen inhoud zoals “paragraaf”, “koptekst”, “tabel”, “afbeelding” enz…

Browsers gebruiken de tags om de inhoud van de webpagina correct weer te geven (de tags zelf zien we niet op het scherm, wel in de onderliggende code).

De meeste tags zijn tags die moeten gesloten worden na het invullen van de content van de tag. vb. <p>Dit is een paragraaf</p>. Maar er bestaan ook enkele zelfsluitende tags (zonder sluitingstag) zoals <br> (br= linebreak).

Attributen horen bij tags. Een (openings)tag kan attributen hebben. Dit is bijkomende informatie voor de browser over het element. Je kan het vergelijken met “settings” bij een televisie bijvoorbeeld.

Attributen zijn naam/waarde-paren (key/value pairs).

<tagnaam attribuutnaam=”attribuutwaarde”> inhoud </tagnaam>

Bijvoorbeeld: een link naar een website: <a href=”https://w3schools.com”>W3Schools</a> waarvan href de attribuutnaam is en https://w3schools.com de attribuutwaarde is.

Je hebt nog verschillende andere attributen zoals: alt, disabled, src, style, id, title enz…

Doctype is het versie nummer van onze HTML. (HTML5)

De <HTML> tag omvat alles in het document.

De <head> tag geeft extra informatie aan de browser en de zoekmachines zoals paginatitel, beschrijving, auteur, kernwoorden… Alles wat in de <head> tag staat heeft geen visueel effect in de browser.

<body> tag: alles hierin bevat de eigenlijke inhoud van de zichtbare pagina.

Als je wil kan je de basisstructuur van de webpagina’s in de browser zien via webontwikkelaarshulpmiddelen.

Firefox: control + shift + i

Chrome: control + shift + i

Opdracht: ga naar wikipedia en bekijk de broncode.

Opdracht: zoek een HTML cheat sheet voor jezelf op het internet en bestudeer die even. (10 min)

Installatie Visual Studio Code

Je mag Visual Studio Code installeren. Add to path is niet nodig.

Surf naar https://code.visualstudio.com/

Klik op ‘Download for windows’

Installeer het ‘exe’-bestand.

Visual studio code is een code editor, er bestaan er vele, voor web development in West-Europa is dit de populairste optie. Het is zoals “word” bij het Office pakket maar met extra functionaliteiten die interessant zijn voor programmeurs. Andere opties zijn Sublime Text, Pycharm, Atom, Brackets, …

Het tweede dat we gaan doen is een pakket installeren om je pagina’s die je maakt te kunnen bekijken in de browser.

Ga in Visual studio code naar de linkerbalk en druk op het vijfde icoontje (extensions).
Vul in de zoekbalk ‘open in browser’ in.
Druk op ‘open in browser’ in de lijst en op ‘install’.
Na het toevoegen is de optie ‘Open in Default browser’ erbij gekomen zodat je je pagina kan bekijken in je favoriete browser.

Opdracht: Laten we een projectje starten.

Eerst plaatsen we een map op het bureaublad: ICT.

Dan gaan we naar Visual Studio Code en navigeren we naar File > Open Folder, waar we de map ICT selecteren. Hierin maken we vervolgens een nieuw bestand index.html. Je mag alvast deze code in je html document zetten.

Probeer dit uit en en sla op. Experimenteer met aanpassingen (sla aanpassingen op en ververs pagina).

Index is de naam gegeven voor de root of homepage van onze website. Andere pagina’s kunnen we bijvoorbeeld contact.html noemen.

Ben je niet meer mee of loop je ver vooruit, dan geef je me een seintje.

Tip: je kan de HTML-structuur ook via W3Schools kopiëren.

Opdracht: Zoek de shortcode om een HTML-template te gebruiken in Visual Studio Code en probeer die uit.

Traditionele website lay-out (semantic tags) = structuur

<header></header>

<nav></nav>

<main></main>

<section></section>

<article></article>

<aside></aside>

<details></details>

<footer></footer>

Een <div> element

Een div gebruik je om een bepaald stuk in je HTML te ‘omvatten’. Dit is vanaf dan 1 blok.

Soms spreken we van een “container” aangezien een div inhoud groepeert alsof je deze in een container (doosje) steekt.

Lorem Ipsum Weten jullie wat dit is? Waarvoor wordt het gebruikt? En hoe voeg je het gemakkelijk toe in Visual Studio Code.

Afbeeldingen: Er zijn twee manieren om afbeeldingen toe te voegen. Ofwel lokaal in dezelfde folder als je project ofwel via een URL online opvragen. Zoek uit hoe je een afbeelding toevoegt aan je webpagina en doe dit op beide manieren.

Oefening: (15 min)

1.Maak een nieuwe HTML-pagina: lorem.html

2.Met de juiste basisstructuur

3.Voeg enkele titels toe

4.Voeg enkele paragrafen toe met “Lorem Ipsum”

5.Voeg een link toe naar Google en zorg dat die opengaat in een nieuw tabblad.

6.Voeg een afbeelding toe van Google

7.Zorg ervoor dat als je op de foto van Google klikt, dat je naar ‘https://www.google.be’ gaat (in een nieuw tabblad)

Oefening: (20 min)

In webdevelopment ga je vaak de code van een ander bekijken en uitzoeken hoe het werkt. Voor de pokedex oefening ga je dat ook doen en moet je de evolutielijn van charmander eens vervangen met de evolutielijn van pikachu. Ben je sneller klaar dan mag je daar ook de starterpokemon van Gold en Silver toevoegen (Chikorita / Cyndaquil / Totodile).