Untitled Quiz

Tim Berners-Lee en de WWW

Tim Berners-Lee is de uitvinder van het World Wide Web (WWW) en de eerste versie van HTML.
Hij creëerde ook de eerste webbrowser en webserver.
De eerste website ging online op 6 augustus 1991.
HTML is een taal die de structuur van een webpagina beschrijft via tags.
HTML5 is de huidige versie van HTML.

HTML

HTML is de standaardtaal voor het maken van webpagina's.
Tags worden gebruikt om de structuur van de content te beschrijven.
HTML bepaalt wat er op de webpagina staat.

CSS

CSS (Cascading Style Sheets) is een stijltaal die bepaalt hoe HTML-elementen op een pagina worden weergegeven.
Aspecten zoals kleur, lettertypes, afstanden en lay-out worden met CSS gedefinieerd.
CSS maakt een website visueel aantrekkelijker.
Het scheidt inhoud van opmaak, waardoor pagina's responsiever worden.

Javascript

Javascript is een programmeertaal die gebruikt wordt om interactiviteit aan webpagina's toe te voegen.
Dynamiciteit en gebruiksvriendelijkheid worden dankzij Javascript bevorderd.
Websites worden interactiever en levendiger door het gebruik van Javascript.
Javascript is één van de populairste programmeertalen.

De HTML-structuur

De structuur van een webpagina wordt beschreven via tags, ook wel markup genoemd.
Bijna elk element heeft een openings- en sluittag, waarbij / belangrijk is, als het om de sluittag gaat.
De basisstructuur van een HTML-pagina bestaat uit:
- <html>: Het hoofd-element, de basis van de HTML-code.
- <head>: Bevat informatie voor de browser, zoals de titel van de webpagina, links naar stijlen en scripts.
  - Character encoding
  - Verplicht
  - Wordt bovenaan de webpagina geplaatst.
- <body>: Hier staat alle zichtbare inhoud van de webpagina, zoals tekst, afbeeldingen en links.

HTML-basiselementen

Koppen:
- HTML beschikt over zes niveaus van koppen (<h1> tot <h6>).
- Ze worden gebruikt om titels en secties te definiëren in een webpagina.
Paragraaf:
- De <p> tag wordt gebruikt om blokken tekst weer te geven.
- Elke paragraaf begint op een nieuwe regel met wat witruimte eromheen.
Belangrijkste elementen:
- <h1…6>: Dit zijn de kopjes (titels)
- <p> : paragrafen
- <div> : een block container element (divisie of sectie).
  - Voegt geen semantische waarde toe.
  - Wordt gebruikt voor lay-out doeleinden.
- <ol>: geordende lijsten (ordered list).
  - type: Default (1, 2, 3, 4, …), a (kleine letters a, b, c, d, …), A (hoofdletters A, B, C, D, …), i (kleine Romeinse cijfers i, ii, iii, iv, …), I (hoofdletters Romeinse cijfers I, II, III, IV, …)
  - start: Bepaal bij welk nummer de lijst moet beginnen (bv. start="5").
- <ul>: Ongeordende lijsten (unordered list).
- <header>: Eén hoofdelement.
  - Titel
  - Navigatiemenu
  - Zoekbalk of logo
- <main>: Hoofdinhoud
  - Teksten, video's en afbeeldingen
- <footer>: Eén voeterelement
  - Contactinformatie
  - Navigatiemenu
  - Sociale media links
- <nav> : Navigatieblok.
- <a>: Ankerelement (hyperlink).

Inline elementen

Inline elementen nemen enkel de ruimte in die nodig is voor hun inhoud.
Belangrijkste inline elementen:
- <img>: Afbeeldingen (images).
  - src: Het pad naar de afbeelding (URL of bestandsnaam).
  - alt: Een beschrijving van de afbeelding voor toegankelijkheid.
  - width & height: Voor het bepalen van de breedte en hoogte van de afbeelding.
  - title: Voor eventuele aanvullende tekst die verschijnt als je de muis over de afbeelding beweegt.
- <a>: Ankerelement (hyperlink).
  - href: Bepaalt waar de hyperlink naartoe moet verwijzen.
  - target="_blank": Opens de URL in een nieuw tabblad.
- <span>: Inline container element.
  - Wordt gebruikt om inhoud samen te groeperen.
  - Heeft geen semantische waarde.
- <em>: emphasized (italic)
  - Tekst schuin of italic weergeven.
- <strong>: bold (vetgedrukt)
  - Tekst vetgedrukt weergeven.
- <br>: break (regeleinde)
  - Maakt een enter in de tekst.

CSS

Hakon Wium Lie introduceerde CSS in 1994.
Het werd ontwikkeld om de opmaak los te koppelen van de inhoud.
CSS is sinds 1996 onderdeel van het World Wide Web.
CSS heeft doorheen de jaren verschillende evoluties doorgemaakt, waardoor features zoals animaties en transitie mogelijk zijn geworden.

Inline CSS

Inline CSS wordt direct toegevoegd aan een HTML-element via de style attribuut.
Voorbeeld: <p style="color:blue;"> Dit is blauwe tekst. </p>
Belangrijke CSS-eigenschappen:
- background-color: Bepaalt de achtergrondkleur van het element.
- font-size: De grootte van de tekst.
- font-family: Het lettertype.
- font-weight: De dikte van het lettertype (bold, normaal).
- text-align: De uitlijning van de tekst.
- text-decoration: Tekstdecoraties toevoegen, zoals onderstrepen.
- margin: Buitenruimte rond een element instellen (Box model).
- padding: Binnenruimte tussen de inhoud van een element en de rand ervan (Box model).
- border: Een rand toevoegen aan een element.
- border-radius: Ronde hoeken aan een element toevoegen
- width: De breedte van het element.
- height: De hoogte van het element.

CSS-meeteenheden

Absoluut:
- Deze meeteenheden blijven constant, ongeacht context.
- Voorbeelden: px, pt, mm, cm.
  - Pixels: voor exacte controle over de grootte.
  - Punten (pt): Vooral voor printtoepassingen, één punt is 1/72 inch.
Relatief:
- Deze meeteenheden passen zich aan de schermgrootte aan.
- Voorbeelden: rem, vw/vh, %, em.
  - REM: Gebaseerd op de font-size van het hoofd-element.
  - VW & VH: 'Viewport height' en 'Viewport width'.
    - vw: 1% van de breedte van de viewport.
    - vh: 1% van de hoogte van de viewport.
  - Percentage (%): Relatief aan de grootte van het bovenliggende element.

Display

Display: block; : Vaste maat die niet verandert, ongeacht context.
Display: inline;: Weergave op dezelfde regel als andere elementen.
- Neemt alleen de ruimte in die nodig is.
Display: inline-block;: Combineert inline eigenschappen met width en height.
Display: none;: Vervolgt het element volledig uit het Document Object Model (DOM).
- Neemt geen plaats meer in.
- Visibility: hidden; : Heeft eenzelfde effect, maar behoudt de ruimte.

Shadows

Box shadow: Wordt gebruikt om schaduwen toe te voegen aan elementen.
Waarden:
- Horizontale offset: Bepaalt de horizontale verschuiving van de schaduw.
- Verticale offset: Bepaalt de verticale verschuiving van de schaduw.
- Blur afstand: Bepaalt de vervaging van de schaduw.
Meerdere schaduwen kunnen per element worden toegepast met een komma.

Grid

Grid is een krachtige lay-outmethode voor het maken van complexe webpagina-indelingen.
Het creëert een 2D-raster systeem.
Voordelen van Grid: Flexibiliteit, efficiëntie, responsiviteit.
In HTML wordt een container gecreëerd met een element rondom de items.
In CSS wordt de display eigenschap ingesteld: display: grid;
- grid-container: Definieert de container met grid items.
Kolommen:
- grid-template-columns: Definieert het aantal kolommen en de breedte.
- Meerdere breedtes kunnen worden opgegeven met spaties.
- Flexibele eenheden kunnen ook worden gebruikt.
Rijen:
- grid-template-rows: Définit het aantal rijen.
- Als geen rijen worden gedefinieerd, worden ze automatisch gegenereerd.
- De hoogte is standaard ingesteld op auto.
repeat():
- Heeft het voordeel om het eenvoudig te maken om kolommen of rijen met een specifieke breedte te definiëren.
- repeat(aantal, breedte): Bepaal het aantal kolommen/rijen en de breedte.
gap:
- Stel de ruimte tussen grid-items in.
- row-gap en column-gap kunnen gebruikt worden om speciale ruimtes te definiëren.
Complexere lay-outs:
- Met slash-notatie (/) kan je aangeven waar een grid-item moet beginnen en eindigen.
- voorbeeld: grid-column: 2 / 4
- grid-row: start/end
grid-area:
- Een alternatieve methode om grid-items te positioneren.
- Geef grid-items een naam met de grid-area eigenschap.
- Gebruik letters om de naam te representeren.
- grid-template-areas: Voeg grid-items toe aan de grid container.
  - Gebruik letters om cellen in de grid aan te duiden.

Flexbox & Media Queries

Flex

Flexbox is een lay-outmethode die in één dimensie (rijen of kolommen) werkt.
Het maakt het mogelijk om de volgorde van items dynamisch aan te passen, waardoor inhoud dynamisch kan worden aangepast, onafhankelijk van de inhoud.
Flexbox is een lay-outmodel dat werkt met één dimensie (rijen of kolommen).

CSS Flex Structuur

Er zijn twee niveaus om eigenschappen in flexbox te bepalen: container en items.

CSS Flex Container Properties

display: flex; : Definieert een container als flex container element.
flex-direction: Bepaalt de hoofd-as van de container.
- row: Links naar rechts (horizontaal)
- row-reverse: Rechts naar links (horizontaal)
- column: Boven naar onder (verticaal)
- column-reverse: Onder naar boven (verticaal)
flex-wrap: Bepaalt of de inhoud op één lijn wordt gepresenteerd of verdeeld over meerdere lijnen.
- nowrap: Alle items op één lijn.
- wrap: Items worden op nieuwe lijnen geplaatst als er niet genoeg ruimte is.
- wrap-reverse: Items worden op nieuwe lijnen geplaatst, maar in omgekeerde volgorde.
justify-content: Bepaalt de opvulling van de container met items.
- flex-start: Items links uitlijnen (horizontaal) of boven (verticaal).
- flex-end: Items rechts uitlijnen (horizontaal) of onder (verticaal).
- center: Items centreren in de container.
- space-between: Ruimte gelijkmatig verdelen tussen items, met items aan de randen van de container.
- space-around: Ruimte gelijkmatig verdelen tussen items en met ruimte rondom elk item.
- space-evenly: Ruimte gelijkmatig verdelen, inclusief ruimte aan de randen van de container.
align-content: Lijnt de lijnen met items in de container uit, enkel bij multi-line containers.
- flex-start: Lijnen boven uitlijnen (verticaal)
- flex-end: Lijnen onder uitlijnen (verticaal)
- center: Lijnen centreren
- space-between: Spatie gelijk verdelen tussen lijnen, met lijnen aan de randen van de container.
- space-around: Spatie gelijk verdelen tussen lijnen, met ruimte rondom elke lijn.
- space-evenly: Spatie gelijk verdelen, inclusief ruimte aan de randen van de container.
align-items: Lijnt items uit op de kruis-as.
- flex-start: Items boven uitlijnen (verticaal)
- flex-end: Items onder uitlijnen (verticaal)
- center: Items centreren
- stretch: Items uitrekken tot de volledige hoogte van de container.
- baseline: Items uitlijnen op de baseline van de tekst.
- auto: Items uitlijnen volgens hun eigen afmetingen.
gap: Bepaalt de ruimte tussen items van de container.
- row-gap en column-gap kunnen gebruikt worden om speciale ruimtes te definiëren.
- gap: Definieert de ruimte tussen items, specificeer de waarde voor beide richtingen (bv. gap: 10px 20px).
overflow: Bepalen wat gebeurt als items buiten de container vallen.
- visible: Items worden zichtbaar weergegeven, zelfs als ze buiten de container vallen.
- hidden: Items die buiten de container vallen worden verborgen.
- scroll: Scrollbars worden toegevoegd aan de container zodat de gebruiker items kan bekijken die zich buiten het zichtbare gebied bevindgen.
- auto: Scrollbars worden toegevoegd alleen als items buiten de container vallen.

CSS Flex Item Properties

flex-grow: Bepaalt hoe een item meegroeit om extra beschikbare ruimte op te vullen.
- Elk element met flex-grow groter dan 0 krijgt extra ruimte.
flex-shrink: Zelfde concept als felx-grow, alleen met kleiner worden.
flex-basis: De basisgrootte van het item voordat extra ruimte wordt verdeeld.
- flex-direction: row: Bepalend voor de basisbreedte.
- flex-direction: column: Bepalend voor de basishoogte.
- Bepaalt de grootte vóór het verdelen van de extra space.
- Heeft prioriteit boven width en height.
align-self: Bepaalt de plaatsing van een item, de uitzondering op align-items.
- auto: Items uitlijnen volgens de instellingen van de container.
- flex-start: Items boven uitlijnen.
- flex-end: Items onder uitlijnen.
- center: Items centreren.
- baseline: Items uitlijnen op de baseline van de tekst.
- stretch: Items uitrekken tot de volledige hoogte van de container.
order: Bepaalt de volgorde van een item zonder de HTML-code te wijzigen.
- Kan verwarrend zijn als niet zorgvuldig gebruikt.
flex: Snel drie flexbox-eigenschappen definiëren.
- flex: 1 0 150px;

Flexbox Advanced

Flexbox heeft verschillende opties, waaronder overlapping door negatieve marges.

Flex of Grid?

Flex:*
Inhoud staat centraal.
Eén dimensie is nodig (horizontaal of verticaal uitlijnen).
Kleinschalige lay-outs.
Grid:*
Horizontaal én verticaal uitlijnen.
Vaste breedtes kunnen worden meegegeven.
Precies werken met lay-outs.
Grootschalige lay-outs.
Flexbox en Grid kunnen samen worden gebruikt.

CSS Mediaqueries

Worden gebruikt om lay-outs aan te passen op basis van schermgrootte en kenmerken van het apparaat.
Creëren responsieve webpagina's.
Zorgen voor een betere gebruikservaring en toegankelijkheid.
Mogelijkheden:
- Stile aanpassen per type schermgrootte/media.
- Delen van de pagina weglateren.
- Inhoud toevoegen.

Syntax

@media (media-feature) { CSS regels }

Media Features

orientation: landscape: Toepassen wanneer de viewport op landscape-oriëntatie staat.
orientation: portrait: Toepassen wanneer de viewport op portrait-oriëntatie staat.
max-height: Een stijl toepassen wanneer de viewport maximum een bepaalde hoogte heeft.
min-height: Een stijl toepassen wanneer de viewport minimum een bepaalde hoogte heeft.
max-width: Een stijl toepassen wanneer de viewport maximum een bepaalde breedte heeft.
min-width: Een stijl toepassen wanneer de viewport minimum een bepaalde breedte heeft.
width: Exact! de breedte van de viewport (inclusief scrollbar).
height: Exact! de hoogte van de viewport (inclusief scrollbar).

### Logische Operatoren

And (&)
Or (or)
Not (not)

Best Practices

"Mobile first" approach: Start met een ontwerp geoptimaliseerd voor mobiele schermen.
Pas aan voor desktops.
Gebruik relatieve units (zoals rem, vw/vh, %, em) voor responsiviteit.

Untitled Quiz

Choose a study mode

Podcast

Questions and Answers

Wat is de functie van HTML in webontwikkeling?

Welke van de volgende beschrijvingen past het best bij CSS?

Wat is een belangrijk kenmerk van Javascript?

Wat is het doel van de HTML5-doctype declaratie?

Wat beschrijft de term 'responsive' in de context van webontwikkeling?

Wat is een belangrijk kenmerk van Flex in vergelijking met Grid?

Wat doet een mediaquery in CSS?

Welke van de volgende media features past een stijl toe op basis van de grootte van het venster?

Wat is een van de best practices voor het ontwerpen van responsieve webpagina's?

Welke logische operator in CSS media queries wordt gebruikt om twee voorwaarden samen te voegen?

Wat is een voordeel van het gebruik van grid-area in CSS?

Welke eigenschap bepaalt de hoofd-as in een flex-container?

Wat gebeurt er als flex-grow groter is dan 0?

Wat is het effect van de eigenschap Flex-wrap in een flex-container?

Welke van de volgende eigenschappen is specifiek voor alle flex-items?

Wat bepaalt de Align-items eigenschap in een flex-container?

Wat is de functie van de Order eigenschap in flex?

Wat is niet een functie van gap in een flex-container?

Wat is de belangrijkste functie van het coplement ?

Welke van de volgende elementen is een voorbeeld van een block element?

Hoe wordt de breedte en hoogte van een afbeelding ingesteld in HTML?

Welke van de volgende functie is niet correct over inline elementen?

Wat is het doel van CSS zoals geïntroduceerd in 1994?

Welke van de volgende is geen correct gebruik van een ordered list?

Wat is de juiste manier om een hyperlink te definiëren die opent in een nieuw tabblad?

Welke van de volgende beweringen over paragrafen is juist?

Wat is een belangrijk kenmerk van het element?

Wat bepaalt de eigenschap 'font-weight' in CSS?

Welk attribuut is essentieel voor het element om een hyperlink te functioneren?

Welke van de volgende eenheden is absoluut?

Wat doet de 'display:none' eigenschap?

Welke CSS-eigenschap definieert het aantal kolommen in een grid?

Wat is het doel van de 'gap' eigenschap in CSS Grid?

Wat gebeurt er als je de eigenschap 'text-align' op 'center' instelt?

Wat doet de 'border-radius' eigenschap?

Welk van de volgende is een voorbeeld van een relatieve eenheid?

Wat is de functie van 'display:inline-block' in CSS?

Wat doet de eigenschap 'padding' in CSS?

Study Notes

Tim Berners-Lee en de WWW

HTML

CSS

Javascript

De HTML-structuur

HTML-basiselementen

Inline elementen

CSS

Inline CSS

CSS-meeteenheden

Display

Shadows

Grid

Flexbox & Media Queries

Flex

CSS Flex Structuur

CSS Flex Container Properties

CSS Flex Item Properties

Flexbox Advanced

Flex of Grid?

CSS Mediaqueries

Syntax

Media Features

Best Practices

Studying That Suits You

Related Documents

More Like This

Untitled Quiz

Untitled Quiz

Untitled Quiz

Untitled Quiz