‹Terug naar zoeken

Optioneel: Crash cursus HTML / CSS

1 / 54
volgende
Slide 1: Tekstslide
JavaScriptMBOStudiejaar 2

In deze les zitten 54 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 60 min

Onderdelen in deze les

Slide 1 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

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 - Tekstslide

Deze slide heeft geen instructies

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 - Quizvraag

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

Vind jij HTML moeilijk?
Ja
Nee
Soms

Slide 6 - Poll

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 13 - Open vraag

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Quizvraag

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Quizvraag

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

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

Slide 21 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 26 - Tekstslide

Deze slide heeft geen instructies

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

Slide 27 - Tekstslide

Deze slide heeft geen instructies

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 - Quizvraag

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 32 - Tekstslide

Deze slide heeft geen instructies

developer.mozilla.org

Slide 33 - Link

Deze slide heeft geen instructies

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

Slide 34 - Tekstslide

Deze slide heeft geen instructies

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

Slide 35 - Tekstslide

Deze slide heeft geen instructies

Welk ander element
kan je nog meer gebruiken?

Slide 36 - Woordweb

  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 vraag

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

Wat valt je nu op aan jouw web page?

Slide 43 - Tekstslide

Deze slide heeft geen instructies

Alles heeft een standaard padding en margin!

Slide 44 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

Welke HTML selectors
kun jij opnoemen?

Slide 48 - Woordweb

Deze slide heeft geen instructies

Opdracht: Geef alles een padding en/of margin

Slide 49 - Tekstslide

Deze slide heeft geen instructies

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

Slide 50 - Tekstslide

Deze slide heeft geen instructies

acatec.nl

Slide 51 - Link

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 54 - Poll

Deze slide heeft geen instructies

Meer lessen zoals deze

HTML & CSS 06 - 5.1 tmt 5.7 - (Standaard)blokken, nesten elementen, margin padding afmetingen blok

- Les met 24 slides
InformaticaWOStudiejaar 4,5

HTML + CSS les 4: selectors + margins + ontwerp + flexbox

- Les met 41 slides
InformaticaWOStudiejaar 4

BBL Week 4

- Les met 12 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 2

03 - CSS Toevoegen: de integratie met HTML

- Les met 11 slides
ICTMBOStudiejaar 1,2

03 - CSS - css toevoegen

- Les met 11 slides
ICTMBOStudiejaar 1,2

HWUD04-sj2122-L2-CSS

- Les met 22 slides
Communication & multimedia designHBOStudiejaar 2

CSS review - HWUD04 20:21

- Les met 26 slides
Communication & multimedia designHBOStudiejaar 2

INF_CHR21_VWO_LES-03

- Les met 13 slides
InformaticaMiddelbare schoolvwoLeerjaar 4