Optioneel: Crash cursus HTML / CSS

1 / 54
next
Slide 1: Slide
JavaScriptMBOStudiejaar 2

This lesson contains 54 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 60 min

Items in this lesson

Slide 1 - Slide

This item has no instructions

Doel van deze les
HTML & CSS crash cursus
Om een succesvolle web developer te worden moet je basiskennis van HTML en CSS beheersen. Hiervoor ga jij een web page maken, binnen een uur, waarbij jij HTML gebruikt om elementen toe te voegen aan je pagina, en CSS gebruikt voor het stileren daarvan. Deze vaardigheid hebben jullie nodig om JavaScript te gebruiken in de UI.

Slide 2 - Slide

Feedback lesdoel: Maartje: De student kan aan het einde van de les een web pagina maken met een titel, plaatje en formulier middels het koppelen html en css. Het knopje maken wij bruin.

Ainhoa: De lesdoel is te lang.
HTML
  1. Om te beginnen moeten wij eerst een nieuwe project folder maken ergens op jouw computer.
  2. Binnen deze map, maak je een nieuwe document aan genaamd 'index.html'.

Slide 3 - Slide

This item has no instructions

Waar staat HTML voor?

(Probeer het internet niet te gebruiken 😉)
A
Hyper Text Make-up Language
B
Hydro Text Markeer Language
C
Hyper Text Mark-up Language
D
Mag ik echt niet het internet gebruiken 🤪?

Slide 4 - Quiz

This item has no instructions

HTML
  1. Om te beginnen moeten wij eerst een nieuwe project folder maken ergens op jouw computer.
  2. Binnen deze map, maak je een nieuwe document aan genaamd 'index.html'.

Slide 5 - Slide

This item has no instructions

Vind jij HTML moeilijk?
Ja
Nee
Soms

Slide 6 - Poll

This item has no instructions

Wat vind jij moeilijk aan HTML?
Er is geen structuur
Ik weet niet wat ik allemaal kan gebruiken
Ik weet niet hoe ik het moet implementeren
Het is mij onduidelijk wat voor rol HTML speelt

Slide 7 - Poll

This item has no instructions

De rol van HTML & CSS
  1. Om te beginnen moeten wij eerst een nieuwe project folder maken ergens op jouw computer.
  2. Binnen deze map, maak je een nieuwe document aan genaamd 'index.html'.

Slide 8 - Slide

This item has no instructions

Doel HTML, CSS en JS
HTML:
Dient voor het plaatsen van elementen in jouw pagina zoals tabellen of knoppen oftewel, de inhoud.
CSS:
Hiermee geef jij jouw HTML elementen een specifieke kleur, vorm of achtergrond (stijl).
JS (wordt in deze les niet behandeld):
Hiermee programmeer jij hoe een element zich moet gedragen zoals het indrukken van een knop.

Slide 9 - Slide

This item has no instructions

HTML
  • Een HTML pagina bestaat uit elementen.
  • Deze elementen worden geopend en gedicht met tags.
  • Het hoofd element van alle HTML pagina's is altijd het HTML element:
<html>
</html>

Slide 10 - Slide

This item has no instructions

HTML
  • Binnen deze html tags, heb je altijd een 'head' en 'body'.
  • Head wordt gebruikt om de instellingen van jouw pagina te configureren.
  • Body gebruik je om de inhoud van je pagina te vullen.

Slide 11 - Slide

This item has no instructions

HTML head
  • Binnen deze html tags, heb je altijd een 'head' en 'body'.
  • Head wordt gebruikt om de instellingen van jouw pagina te configureren.
  • Body gebruik je om de inhoud van je pagina te vullen.

Slide 12 - Slide

This item has no instructions

Wat is er veranderd aan de pagina, nu jij de titel hebt toegevoegd?

Slide 13 - Open question

This item has no instructions

HTML body
  • Voeg een h1 element toe aan de body met als tekst 'JavaScript is fun, but so is HTML & CSS!
  • Voeg daar onder een paragraph toe met wat tekst.
  • Voeg daar onder een paragraph toe met wat tekst (tweede keer).
  • Voeg tussen paragraph 1 en 2 een h2 element toe met als titel 'Another heading'.

Slide 14 - Slide

This item has no instructions

HTML skelet maken
  • Voeg een h1 element toe aan de body met als tekst 'JavaScript is fun, but so is HTML & CSS!
  • Voeg daar onder een paragraph toe met wat tekst.
  • Voeg daar onder een paragraph toe met wat tekst (tweede keer).
  • Voeg tussen paragraph 1 en 2 een h2 element toe met als titel 'Another heading'.

Je kan ook een HTML skelet maken door enkel ! -> TAB drukken. Zie docent.

Slide 15 - Slide

This item has no instructions

HTML skelet maken
  • DOCTYPE geeft aan dat het om een HTML5 document gaat.
  • De 'lang' attribute zegt tegen de browser dat wij de Engelse taal gebruiken.
  • De overige attributen vallen buiten de scope en gaan wij niet behandelen in deze les.
  • De head en body zijn child elements van de html element, h1 en p zijn dat van body enz.
  • Zet de elementen die wij hebben gemaakt, over naar het nieuwe skelet.

Slide 16 - Slide

This item has no instructions

Wat denk je dat nog meer toegevoegd kan worden in head?
🤯
A
CSS
B
FATF icons
C
Roterende tekst
D
Ik herinner mij ineens dat ik u een pizza schuldig ben!

Slide 17 - Quiz

This item has no instructions

HTML attributes
  • Sommige elementen in HTML kunnen attributes hebben. Deze beschrijven het element. Laten wij een link maken in het eerste paragraph om dat te zien.
  1. Gebruik het anchor element om een link te maken <a></a>.
  2. Voeg nu de href (hyper text reference) attribute toe aan de anchor element.
  3. Geef de anchor element nu tekst waar jij de link aan gekoppeld wilt hebben.
  4. Gebruik de tekst 'Trollen in de klas is <a href="https://tinyurl.com/javascriptMetTaif">leuk</a>.'

Slide 18 - Slide

This item has no instructions

Wat denk je dat nog meer toegevoegd kan worden in head?
🤯
A
1 is de echte attribute
B
2 is een hyper text reference. Dat is een attribute
C
Nee wacht 3 is een parameter!
D
1 is een html element

Slide 19 - Quiz

This item has no instructions

HTML inline vs block
Voor de oplettende programmeur, de anchor element is een inline element omdat het gelijk staat met de tekst.

De h2 element is een zogenaamde 'block' element omdat het een new line automatisch aanmaakt en niet in lijn is met het voorgaande tekst.

Slide 20 - Slide

This item has no instructions

HTML images
Het is ook mogelijk om afbeeldingen toe te voegen in een HTML pagina.

<img src="adres naar de afbeelding"></img?

Slide 21 - Slide

This item has no instructions

HTML images
Het is ook mogelijk om afbeeldingen toe te voegen in een HTML pagina.

<img src="adres naar de afbeelding" />

Wat valt je op aan de bovenstaande regel?

Slide 22 - Slide

Geen closing tag nodig omdat hij geen content heeft, alleen maar attributes.

Dit doet de IDE automatisch voor ons omdat hij geen closing tag heeft.
HTML classes & id's
In HTML is het normaal om elementen te kenmerken door classes en id's.
Dit doen wij omdat jij straks kan refereren naar deze elementen in jouw css bestand. Classes hoeven niet uniek te zijn, id's daarentegen wel.

Wij hebben altijd camelCase gebruikt tot nu toe, maar de coding convention zegt dat, in HTML, wij dash moeten gebruiken. Dus niet courseImage maar course-image.

Laten wij samen kijken naar een voorbeeld.

Slide 23 - Slide

This item has no instructions

HTML classes & id's
In HTML is het normaal om elementen te kenmerken door classes en id's.

Dit doen wij omdat jij straks kan refereren naar deze elementen in jouw css bestand.

Laten wij samen kijken naar een voorbeeld.

Slide 24 - Slide

This item has no instructions

HTML boxes
Boxes worden veel gebruikt in HTML. Het is een onzichtbare 'doos' waar jij elementen in kan groeperen.

Op internet wordt al gauw het <div> element uitgelegd. Echter soms moet je nadenken over wat de inhoud gaat zijn van jouw box. Als het een formulier is, gebruik dan de <form> element.

Dit noemen wij symantic HTML. De naam beschrijft wat de inhoud is.


Slide 25 - Slide

This item has no instructions

HTML boxes
Hoewel het div en form element exact hetzelfde zijn, heeft form een betekenis. Dat maakt het symantic HTML.

Slide 26 - Slide

This item has no instructions

CSS
  • CSS wordt gebruikt voor het stileren van jouw HTML pagina.

Slide 27 - Slide

This item has no instructions

Waar denk jij dat CSS toegevoegd moet worden in de HTML pagina.
🎨
A
Na de HTML element
B
In de body
C
In de h2
D
In de header

Slide 28 - Quiz

This item has no instructions

CSS aanmaken
  1. Maak een css bestand aan.
  2. Voeg deze toe aan de header.
  3. Gebruik de 'link' element (niet te verwarren met de anchor element), samen met de href (hyper text reference) en verwijs  naar jouw css bestand uit stap 1.

Slide 29 - Slide

This item has no instructions

CSS selectors
  • In CSS spreken wij over selectors. Er zijn veel verschillende selectors, maar wij gaan een paar basic selectors behandelen in deze crash course.
  • Een van de meest gebruikte selector is de body element. Zie hiernaast.

Slide 30 - Slide

This item has no instructions

CSS element selector
  • Binnen de body zijn verschillende properties en de values daarvan te zien hiernaast.
  • Deze properties zijn child elements van de body element.
  • Door body te schrijven hierboven, gebruik je de element selector, oftewel, jij selecteert de body van jouw HTML en past daar stijl op aan.

Slide 31 - Slide

This item has no instructions

CSS selectors
  • Wil je meer weten over selectors? In de volgende dia is een link waar jij op kan klikken.

Slide 32 - Slide

This item has no instructions

Slide 33 - Link

This item has no instructions

CSS element selectors
  • Hieruit kan je dus opmaken dat jij ieder element in jouw HTML kan selecteren om aan te passen.

Slide 34 - Slide

This item has no instructions

CSS element selectors
  • Hieruit kan je dus opmaken dat jij ieder element in jouw HTML kan selecteren om aan te passen.

Slide 35 - Slide

This item has no instructions

Welk ander element
kan je nog meer gebruiken?

Slide 36 - Mind map

  1. Paragraph
  2. Form
  3. Button
  4. Label
  5. etc
Maak de tekst in de button dik gedrukt. Plak hieronder de CSS code daarvan

Slide 37 - Open question

This item has no instructions

CSS id selector
Het is ook mogelijk om, bijvoorbeeld, de form te selecteren door zijn id te gebruiken. Dat doen wij door te beginnen met een #. Dit noemen wij de id selector.

Slide 38 - Slide

This item has no instructions

CSS class selector
Hetzelfde is ook voor een class mogelijk. Een class selector gebruiken doe je door te beginnen met een punt. Zie de afbeelding hiernaast.

Slide 39 - Slide

This item has no instructions

CSS box model
Hetzelfde is ook voor een class mogelijk. Een class selector gebruiken doe je door te beginnen met een punt. Zie de afbeelding hiernaast.

Slide 40 - Slide

This item has no instructions

CSS box model
  1. Content: tekst, afbeeldingen etc.
  2. Padding: transparant gebied rondom de content maar binnen de box.
  3. Border: Is rondom de padding en content.
  4. Margin: De ruimte tussen de boxes. 

Slide 41 - Slide

This item has no instructions

CSS box model
Er is ook de Fill Area. Alles wat jij stileert aan de fill area, zal ook van toepassing zijn op de content, padding en border, maar niet de margin.

Slide 42 - Slide

This item has no instructions

Wat valt je nu op aan jouw web page?

Slide 43 - Slide

This item has no instructions

Alles heeft een standaard padding en margin!

Slide 44 - Slide

This item has no instructions

CSS star selector
Om alle elementen te selecteren gebruik je de star selector.

En om met een schone lei te beginnen zonder dat je browser automatisch margins en paddings toevoegt, zie de foto hiernaast.

Slide 45 - Slide

This item has no instructions

CSS star selector
Nummer 3 is wel even anders, maar heel logisch.
Als je een box hebt met een breedte van 100px en een padding van 25px en margin van 25px. Dit is samen een breedte van 150px. Met border-box zeg jij "Ik wil een max breedte van 100px en de inhoud moet zich maar aanpassen!".

Slide 46 - Slide

This item has no instructions

CSS star selector
Nummer 3 is wel even anders, maar heel logisch.
Als je een box hebt met een breedte van 100px en een padding van 25px en margin van 25px. Dit is samen een breedte van 150px. Met border-box zeg jij "Ik wil een max breedte van 100px en de inhoud moet zich maar aanpassen!".

Slide 47 - Slide

This item has no instructions

Welke HTML selectors
kun jij opnoemen?

Slide 48 - Mind map

This item has no instructions

Opdracht: Geef alles een padding en/of margin

Slide 49 - Slide

This item has no instructions

Op acatec staan de uitgewerkte bestanden die je zojuist hebt moeten maken.

Slide 50 - Slide

This item has no instructions

Slide 51 - Link

This item has no instructions

Wat waren de doelen?
Advanced fundamentals van JS
Om een succesvolle web developer te worden moet je basiskennis van HTML en CSS beheersen. Hiervoor ga jij een web page maken, binnen een uur, waarbij jij HTML gebruikt om elementen toe te voegen aan je pagina, en CSS gebruikt voor het styleren daarvan. Deze vaardigheid hebben jullie nodig om JavaScript te gebruiken in de UI.

Slide 52 - Slide

This item has no instructions

Wat gaan wij de volgende les doen?

In de volgende serie lessen gaan wij het hebben over JavaScript in de browser. Wij gaan onze eerste project starten en dat doen wij om meer te weten te komen over DOM en de fundamenten van events!

Slide 53 - Slide

This item has no instructions

Heeft deze les jouw wat geleerd over HTML & CSS wat jij niet wist?
0 = niets en 100 = heel veel
0100

Slide 54 - Poll

This item has no instructions