ICT Flex
André Dalmolen, Jeroen Heuvelman, Jan Jaap Siewers | Mar 13, 2023

Basis | Webpagina

Voorkennis

  • Je kunt werken met een computer

Dit ga je leren

  • Je gaat aan de hand van een template een nieuwe opdracht maken voor een module
  • Markdown: Je maakt gebruik van markdown om de opdracht vorm te geven
  • Testen: Je test de nieuwe opdracht in een lokale omgeving
  • Indienen van een pull-request

Introductie

Een website wordt geschreven in HyperText Markup Language (HTML) en Cascading Stylesheets (CSS).

Met HTML geeft je de structuur van je pagina aan zoals: de tekst die op de pagina moet staan. In welke volgorde onderdelen van een pagina moeten verschijnen? CSS gebruik je om daarna te opmaak van de pagina op te geven. Welke fonts moeten er voor de tekst gebruikt worden? Welke kleuren worden er getoond?

HTML bestanden herken je vaak aan de .html of .htm extensie. CSS bestanden herken je aan de .css extensie. Let op dit zijn standaarden maar een ontwikkelaar kan daar van afwijken.

In deze opdracht maak je kennis met HTML en CSS en zul jij je eerste webpagina schrijven.

Backlog

  • als web developer moet ik de basis van HTML kennen zodat ik de source van webpagina’s kan lezen en begrijpen;
  • als web developer moet ik de basis van HTML kenen zodat ik webpagina’s kan ontwerpen en schrijven;
  • als web developer moet ik de basis van HTML kennen zodat ik de structuur van een webpagina kan ontwerpen en aanpassen;
  • als web developer moet ik de basis van CSS kennen zodat ik de source van webpagina’s kan lezen en begrijpen;
  • als web developer moet ik de basis van CSS kennen zodat ik webpagina’s kan ontwerpen en schrijven;
  • als web developer moet ik de basis van CSS kennen zodat ik de opmaak van webpagina’s kan ontwerpen of aanpassen;
  • als student moet ik html en css beheersen zodat ik andere studenten kan helpen bij vragen.

Kennismaken met HTML

HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language.
HTML is the standard markup language for creating Web pages.
HTML describes the structure of a Web page.
HTML consists of a series of elements.
HTML elements tell the browser how to display the content.
HTML elements label pieces of content such as ’this is a heading’,
’this is a paragraph’, ’this is a link’, etc.

In onderstaande listing zie je een webpagina geschreven in HTML.

<!-- Mijn eerste HTML -->
<!DOCTYPE html>
<html lang="nl"> 

<head>
    <meta charset=utf8>
</head> 

<body> 
<h1>Hello World</h1> 
<p> 
Hallo wereld. 
</p> 

</body> 
</html>

In de volgende taak schrijf jij jouw eerste html pagina.

Taak : Maak jouw eerste HTML pagina

  • voorbereiding;
    1. maak de folder op jouw computer;
    2. plaats een git repository in deze folder;
    3. gebruik een code editor (zoals VScode of Notepad++) om de code van listing [index01] in het bestand te plaatsen;
    4. commit in Git;
  • bekijk de webpagina;
    1. start een webbrowser zoals Edge, Safari, Opera, Chromium, Chrome of Firefox.
    2. navigeer naar
      http://localhost/helloworld
    3. Navigeer naar
      http://localhost/helloworld/index.html

Je hebt nu een jouw eerste webpagina geschreven. Maar weet je ook wat je in deze pagina geschreven hebt? In de volgende taak doe je onderzoek naar de verschillende onderdelen van de webpagina.

Taak : Leer HTML

  1. zoek op het internet wat html tags zijn; "HTML tags are the hidden keywords within a web page that define how your web browser must format and display the content."

  2. zoek op het internet wat html elements zijn: "HTML bestaat uit een serie elementen die u kunt gebruiken om verschillende onderdelen van uw inhoud te verpakken of te omhullen zodat die er op een bepaalde manier gaat uitzien of zich gedragen."

  3. zoek uit wat de functies van de volgende tags zijn.

    • <DOCTYPE>
    • <html>
    • <head>
    • <meta>
    • <body>
    • <h1>
    • <p>

Taak : Verdiep jouw kennis over HTML

  • een paginatitel toevoegen;

    1. voeg HelloWorld! in de head van toe

    2. refresh de pagina in de browser.

    3. wat is er veranderd?

    4. vervang HelloWorld! in de title tag door een zelf gekozen tekst

    5. refresh de pagina in de browser.

    6. wat is er veranderd?

  • een paragraaf toevoegen;

    1. voeg na de bestaande paragraaf (

      ...

      ) drie nieuwe paragrafen toe. Vul de paragrafen met Lorem Ipsum; "Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, ..."

    2. refresh de pagina in jouw browser.

    3. wat is er veranderd?

    4. voeg nog een aantal paragrafen toe

    5. refresh de pagina in jouw browser

    6. wat is er veranderd?

  • als de wijzigingen bevallen, commit deze dan in Git;

Verdiepen in HTML

Je hebt nu een hele kleine introductie gehad in HTML. De komende weken breidt je jouw kennis over HTML uit. Gebruik de komende weken om HTML te leren op Codecademy.com.

Taak : Leer meer over HTML

In onderstaande lijst staan een aantal links naar meer informatie over HTML.

Kennismaken met CSS

"CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed."

"CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once External stylesheets are stored in CSS files"

De webpagina die je nu gemaakt hebt is nogal saai. Waarschijnlijk bestaat het uit zwarte tekst op een witte achtergrond. Moderne websites zien er echter veel beter uit met gekleurde achtergronden, aangepaste fontstylen, prachtige foto’s, animaties, overgangen, etc. Om een website op te maken heb je een tweede taal nodig, nml. cascading style sheets (CSS).

In onderstaande listing zie je een simpel voorbeeld van een CSS bestand.

h1 {color: orange}
    body {background-color: red}

De CSS in listing [css01] maakt de achtergrond van een webpagina rood en de tekst in een H1 header oranje.

In de volgende taken voeg je CSS toe aan jouw webpagina.

Taak : Voeg CSS toe aan HTML pagina

  1. voorbereiding; a. maak de folder op jouw computer; b. gebruik een code editor (zoals VScode of Notepad++) om de code in listing [css01] in het bestand te plaatsen; c. commit de wijziging in Git;

  2. koppel het css bestand aan jouw html bestand; a. pas aan door in de head-tag de volgende tag op te nemen:

  3. bekijk de webpagina a. start een webbrowser en navigeer naar http://localhost/helloworld b. is de webpagina nu voorzien van kleur? - welke kleuren?

  4. pas de kleuren aan
    a. zoek op internet naar een overzicht van CSS kleuren
    b. wijzig de kleur van het h1-element in achtereenvolgens de volgende kleuren...

    • gray
    • violet
    • slateblue
    • rgb(255,0,0)
    • rgb(0,255,0)
    • rgb(0,0,255)
    • rgb(255,255,255)
    • rgb(0,0,0,0)

    c. test iedere kleur door de CSS aan te passen en de browser te verversen met F5
    d. pas de kleur van de body aan in enkele zelf gevonden cq. bedachte kleuren
    e. test iedere kleur door de browser te verversen met F5
    f. bekijk de pagina ook eens met een andere browser dan jouw standaard browser. Zie je verschillen in de manier waarop de pagina getoond wordt?
    g. commit elke kleur in git, zorg voor een beschrijvende omschrijving

  5. pas de fontgroote aan

    a. voeg de volgende regel toe aan p {font-size: 40pt}
    b. ververs de browser met F5 c. wat is er veranderd? d. commit de wijziging in git, zorg voor een beschrijvende omschrijving

Je hebt nu een begin gemaakt met CSS. Hopelijk zie je nu al dat CSS je helpt om op een makkelijke manier de opmaak van een website te bepalen.

In de volgende taak onderzoek jij een aantal standaard CSS properties.

Taak : Onderzoek CSS

  1. zoek op het internet naar voorbeelden van CSS bestanden.

  2. onderzoek in ieder geval de volgende properties.

    • color
    • background-color
    • background-image
    • font-family
    • font-size
    • text-align
    • borders
    • margin

Verdiepen in CSS

je hebt nu een hele kleine introductie gehad in CSS. De komende weken breid jij jouw kennis over CSS uit. Gebruik de komende weken om CSS te leren op Codecademy.com.

Taak : Leer meer over CSS

In onderstaande lijst staan een aantal links naar meer informatie over CSS.

Eindtaak

Je hebt nu basiskennis van HTML en CSS. Met deze kennis kun jij een eenvoudige websites maken. In de volgende taken willen wij graag zie wat jij allemaal al kunt met HTML en CSS. Laat maar zien wat je kunt en verbaas ons, hou je niet in. :-)

Taak : webpagina CV

  • Maak een webpagina met daarop jouw Curriculum Vitea
  • Gebruik HTML om de pagina in te delen.
  • Gebruik CSS om de pagina op te maken.
  • Plaats een (pas)foto van jezelf op de pagina.
  • Deel de code via GitHub met de docenten.
  • Overleg met de docenten of je op de goede weg bent.
  • Maak een afspraak voor een reviewmoment als beide taken klaar zijn.

Afronding

  • Gebruik de rubric om te bepalen of je een voldoende of goed haalt voor deze opdracht. Overleg met docenten of studenten als je twijfelt.

  • Deel de code van webpagina van je CV met de docenten als dit nog niet gedaan is.

  • Vraag een reviewmoment aan bij een docent.

  • Bereid je voor op het review moment:

    • Weet wat je wilt vertellen.

    • Ken de code van de gemaakt webpagina’s uit je hoofd.

    • Bereidt je voor op vragen om de code (HTML en CSS) aan te passen.

  • Kom op tijd in het reviewmoment.

  • Na goedkeuring door een docent:

    1. Plaats de code (HTML en CSS) van webpagina CV in een word document.

    2. Upload beide documenten in Cumlaude.

  • Plaats je CV pagina op je hosting omgeving.

Planning Webpagina

Je kunt onderstaande sjabloon gebruiken voor jouw eigen planning. Neem onderstaande sjabloon daarvoor over in jouw favoriete planningtool en voeg waar gewenst eigen regels toe. Zet de verschillende acties daarna op de juiste data in jouw agenda.

PS: Je kunt taken niet altijd na elkaar te plannen. Je zult taken ook moeten laten overlappen. Dit geldt ook voor taken in de verschillende opdrachten.

Actie Datumstart Datumklaar Klaar
Maak eerste webpagina
Leer meer over webpagina
Leer CSS
Leer meer over CSS
Maak webpagina CV
Maak webpagina verslag
Reviewmoment

Rubric Webpagina

Opdracht

G=Goed | V=Voldoende | M=Matig | O=Onvoldoende
G V M O
Ik heb de webpagina CV gemaakt
Ik heb de webpagina van een zelf gekozen verslag gemaakt
Ik heb git gebruikt tijdens deze opdracht
Ik heb de code die ik wil bespreken met de docenten gedeeld via GitHub

Kennis

G=Goed | V=Voldoende | M=Matig | O=Onvoldoende
G V M O
Ik kan uitleggen wat Lorem Ipsum is
Ik kan uitleggen waarom Lorem Ipsum gebruikt wordt

HTML

G=Goed | V=Voldoende | M=Matig | O=Onvoldoende
G V M O
Ik kan het DOCTYPE element uitleggen
Ik kan het HTML element uitleggen
Ik kan het HEAD element uitleggen
Ik kan het META element uitleggen
Ik kan het BODY element uitleggen
Ik kan het H1 element uitleggen
Ik kan het H2 element uitleggen
Ik kan het P element uitleggen

CSS

G=Goed | V=Voldoende | M=Matig | O=Onvoldoende
G V M O
Ik kan de rgb functie van CSS uitleggen
Ik kan de color property van CSS uitleggen
Ik kan de background-color property van CSS uitleggen
Ik kan de background-image property van CSS uitleggen
Ik kan de font-family property van CSS uitleggen
Ik kan het verschil tussen family-name en generic-family uitleggen
Ik kan het verschil tussen serif en sans-serif fonts uitleggen
Ik kan het verschil tussen proportional en monospace fonts uitleggen
Ik kan de font-size property van CSS uitleggen
Ik kan het verschil tussen px, pt, pc, em en rem bij font-size uitleggen
Ik kan de text-align property van CSS uitleggen
Ik kan de border property van CSS uitleggen
Ik kan de margin property van CSS uitleggen

CV pagina
HTML en CSS
Ik kan uitleggen hoe mijn webpagina werkt
Goed Voldoende Matig Onvoldoende
Ik heb HTML en CSS plus extra technieken gebruikt Ik heb HTML en CSS gebruikt Ik heb alleen HTML gebruikt maar geen CSS Ik heb geen pagina geschreven of pagina is niet in HTML geschreven
Ik kan werking van pagina foutloos en zonder hapering uitleggen Ik moet soms, niet hinderlijk, nadenken over werking van pagina Ik moet veel nadenken of antwoorden opzoeken bij uitleg over pagina Ik kan HTML en CSS in pagina niet uitleggen
Parate kennis
Ik kan mijn kennis over HTML en CSS direct toepassen
Goed Voldoende Matig Onvoldoende
Ik kan een gevraagde wijziging direct doorvoeren in webpagina Ik kan een gevraagde wijziging na enig, niet hinderlijk, nadenken doorvoeren in webpagina Ik kan een gevraagde wijziging na lang, hinderlijk, nadenken doorvoeren in webpagina Ik kan een gevraagde wijziging niet doorvoeren in webpagina

Verslag webpagina
HTML en CSS
Ik kan uitleggen hoe mijn webpagina werkt
Goed Voldoende Matig Onvoldoende
Ik heb HTML en CSS gebruikt. Alle opmaak heb ik in CSS geplaatst Ik heb HTML en CSS gebruikt. Sommige opmaak is in (deprecated) HTML code geplaatst Ik heb alleen HTML gebruikt maar geen CSS Ik heb geen pagina geschreven of pagina is niet in HTML geschreven
Ik kan werking van pagina foutloos en zonder hapering uitleggen Ik moet soms, niet hinderlijk, nadenken over werking van pagina Ik moet veel nadenken of antwoorden opzoeken bij uitleg over pagina Ik kan HTML en CSS in pagina niet uitleggen
Parate kennis
Ik kan mijn kennis over HTML en CSS direct toepassen
Goed Voldoende Matig Onvoldoende
Ik kan een gevraagde wijziging direct doorvoeren in webpagina Ik kan een gevraagde wijziging na enig, niet hinderlijk, nadenken doorvoeren in webpagina Ik kan een gevraagde wijziging na lang, hinderlijk, nadenken doorvoeren in webpagina Ik kan een gevraagde wijziging niet doorvoeren in webpagina