1 of 7

HTML-CSS-0

Welkom in de HTML-CSS-0 module! Werk hieronder de lesbrieven af volgens je planner.

Les 1: HTML, de basis

Elke HTML-pagina begint met <!DOCTYPE html> Daarmee zeg je tegen je browser: Let op! Je krijgt nu HTML-code voor je kiezen. Daarna zie je een <html>-tag dat helemaal onderaan wordt afgesloten met</html>. Binnen de <html>-tag heb je een <head> en een <body> tag. In de <head>-tag kun je de titel van de pagina zetten in het de <body>-tag zet je eigenlijk alles wat je op de pagina wilt zien.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
  
  </body>
</html>

Wil je tekst op je webpagina zetten, dan zet je dat dus in de body van je code. Dat betekent dus tussen <body> en de </body>

<body>
  Dit is een stukje tekst.
</body>

Je kunt ook de titel van je webpagina aanpassen. De titel is het stukje tekst dat je bovenaan je webbrowser te zien krijgt.

<head>
  <title>Welkom op mijn eerste pagina!</title>
</head>

Je kunt de inhoud van je body verder uitbreiden met allerlei leuke dingen. Laten we beginnen met het maken van een kopje. Hiervoor kunnen we de <h1>-tag gebruiken.

<body>
  <h1>Dit is een hoofdstuk</h1>
  Dit is een stukje tekst.
</body>

Naast de <h1> -tag heb je ook de <h2>, <h3>, <h4>, <h5> en <h6> tag. Hoe groter het getal, hoe kleiner de letter zullen zijn. Denk er wel om dat je de tags weer netjes aflsluit.

<body>
  <h3>Dit is een groot</h3>  
  <h2>Dit is nog groter</h2>
  <h1>Dit is het grootst</h1>
</body>

Je kunt ook alinea's aanmaken. Dat doe je met de <p>-tag.

<body>
  <h1>Hoofdstuk 1</h1>
  <p>Dit is een alinea</p>
</body>

Opdrachten

[1] Installeer Atom, maak een map en daarin je eerste webpagina. Noem het bestand index.html. Zie hier de installatie video

[2] Verander de titel van je website naar "Een pagina over mijzelf". Denk erom dat je deze tekst tussen <title> en </title> dus gaat aanpassen.

[3] Maak nu drie <H1>-tags aan op je pagina. Noem de eerste "Over mijzelf", de tweede "Hobbies" en de derde "Contact". Dit moet er zo uit komen te zien:

Over mijzelf Hobbies Contact

[4] Zet onder elke <h1>-tags een paragraaf waarin je iets zinnigs verteld over jezelf. Je hobbies en over je contactgegevens. Je hoeft niet zoveel te schrijven hoor. Een regel per kopje is meer dan genoeg. Zie hieronder een voorbeeld:

Over mijzelf
Ik ben jan en ben 12 jaar oud. Ik woon in Amsterdam

Hobbies
Ik zit op voetbal en houd van minecraf

CONTACT
Je kunt mij bereiken op jan@jan.nl

Belangrijk! Gebruik altijd je school e-mail adres of iets dergelijk. Zet niet je telefoonnummer of adres op internet.

Heb je het af? Cool! Je bent dan klaar met deze leskaart. Je kunt met de volgende leskaart aan de slag kan gaan. We gaan de pagina met de komende leskaarten opleuken met foto's, linkjes en nog veel meer!

Les 2: HTML, meer over body, plaatjes en links

Sommige woorden zijn belangrijker dan anderen in een tekst. Om dit aan te geven kun je ervoor kiezen om je tekst dikgedrukt te laten zien. Dit doe je met de <Strong>-tag rondom het woord of de woorden die je dikgedrukt wilt. Hiernaast zie je hier een voorbeeld van. Als je wilt dat je tekst op een nieuwe regel verder gaat, gebruik je de <br>-tag. Deze is een beetje raar omdat hij alleen maar een close-tag is.

<html>
    <h1>Over mij:</h1>
    <p>Hallo mijn naam is <strong>Laura.</strong><br>
     Ik hou heel erg van <strong>programmeren en gamen.</strong><br>
     Deze website is een voorbeeld voor de coderdojo. Hoe        
     cool is het om je eigen website te kunnen programmeren!    
     :)
    </p>
</html>

Tot nu toe zijn we eigenlijk alleen maar bezig geweest met de tekst op onze website. Maar er zijn nog genoeg andere leuke dingen om op je website te zetten, bijvoorbeeld plaatjes! Voor plaatjes gebruik je de <img> -tag, maar je moet deze tag nog wat extra informatie meegeven over het plaatje wat je wilt gebruiken.

Voor een plaatje vanaf je eigen computer gebruik je <img src="LOCATIE PLAATJE">
Bijvoorbeeld <img src="Laura/Afbeeldingen/laura.jpg">

Je kunt ook een  plaatje van het internet gebruiken. Achter src=” zet je dan de website link naar het plaatje.
Bijv.: <img src="http://www.gscdn.org/library/cms/11/12611.JPG">

Het is ook leuk om op je website naar andere pagina’s of websites te kunnen verwijzen. Hiervoor heb je link’s nodig, dit doe je met de <a>-tag. Net als bij plaatjes heeft de <a>-tag meer informatie nodig. Net zoals je bij een plaatje een link moet zetten moet je dat hier ook doen. In plaats van src gebruik je href en daarachter zet je de link van de pagina waarnaar je wilt verwijzen. Zoals hiernaast te zien is. Bij de -tag hadden we niets tussen de open- en sluit-tag in gezet. Bij de <img>-link doen we dat wel. De tekst waarop je kunt klikken om naar de link te gaan zet je tussen deze tags.

<a href="http://www.google.nl">Klik hier om naar Google te gaan.</a>

Opdrachten

[1] Kijk eens terug naar de teksten die je hebt geschreven bij de vorige leskaart. Zijn daar woorden tussen die je belangrijker vindt dan de rest van de woorden? Maak deze dan dik gedrukt zodat ze goed opvallen. Probeer tenminste 3 dikgedrukte woorden op je pagina te hebben.

[2] Het is leuk om onder het kopje “over mij” een foto van jezelf toe te voegen. Als je die niet hebt kun je ook een leuk plaatje van iets anders zoeken op internet. Extra: Misschien vind je je plaatje wel wat te groot of te klein. Het formaat van het plaatje kun je aanpassen binnen de tag. Om te weten hoe je dit kunt doen kun je eens een kijkje nemen op de volgende website: https://www.w3schools.com/tags/tag_img.asp als je er niet uitkomt, vraag het dan gerust aan de begeleiders!

[3] Maak een kopje aan met “leuke linkjes” en daaronder een korte paragraaf met linkjes die je leuk vindt. Kijk terug op wat je bij leskaart 1 hebt geleerd als je niet meer zo goed weet hoe kopjes en paragrafen werken. Extra: Met de <a>-tag kun je nog meer dan alleen maar een link openen in het bestaande scherm. Je kunt bijvoorbeeld ook een nieuw tabblad openen waarin de pagina uit het linkje komt te staan. Om te weten hoe je dit moet doen kun je kijken naar de volgende website: https://www.w3schools.com/tags/att_a_target.asp

Ben je klaar? Tof! Je site ziet er nu al een stuk leuker uit dan eerst. Laat aan een van de begeleiders zien hoe je site eruit ziet.

Les 3: HTML, lijsten

Soms maken we gebruik van korte opsommingen of lijstjes. Bijvoorbeeld de volgende lijstjes: Dingen die ik leuk vind:

Gamen
Programmeren
Lego

Maar ook het volgende lijstje:

Top 3 favoriete films:

The Lion King
Toy Story
Bambi

Dit kunnen we ook in HTML doen! Hiernaast zie je de hele code, geen paniek als je hem nog niet helemaal begrijpt. We leggen hem hierna helemaal uit.

Dingen die ik leuk vind: <br>
<ul>
   <li>Gamen</li>
   <li>Programmeren</li>
   <li>Lego</li>
</ul>
<br>
Top 3 favoriete films: <br>
<ol>
   <li>The Lion King</li>
   <li>Toy Story</li>
   <li>Bambi</li>
</ol>

Het is belangrijk om het verschil te zien tussen de beide lijstjes. Het ene lijstje heeft puntjes, dit noemen we een ongesorteerde lijst. Om een ongesorteerde lijst te maken gebruiken we de <ul>-tag. Vervolgens moet je voor elk item op de lijst aangeven dat het een lijst item is. Dit doe je met de <li>-tag.

<ul>
   <li>Een punt op de lijst</li>
   <li>Een punt op de lijst</li>
   <li>Een punt op de lijst</li>
</ul>

Daarnaast zijn er lijsten die nummertjes vooraan hebben staan. Dit zijn gesorteerde lijsten, bijvoorbeeld om een top 3 aan te geven. Om een gesorteerde lijst te maken gebruiken we de <ol>-tag. Vervolgens moet je ook hierbij voor elk item op de lijst aangeven dat het een lijst item is. Dit doe je met de <li>-tag.

<ol>
   <li>Nummer 1</li>
   <li>Nummer 2</li>
   <li>Nummer 3</li>
</ol>

Opdrachten

[1] In de website die je net hebt gemaakt vertel je al een paar dingen over jezelf. Je gaat hier nu ook een lijstje aan toevoegen. Kies een van kopjes die je eerder hebt gemaakt en voeg hier een ongesorteerd lijstje aan toe met minimaal 3 items. Je mag zelf kiezen bij welk kopje je dit lijstje zet.

[2] Nu ga je op je site ook een top 5 van je favoriete films, games of artiesten maken. Hiervoor maakt je eerst een nieuwe kopje aan zoals je hebt geleerd bij leskaart 1. Schrijf ook een korte introductieparagraaf over je top 5. Gebruik nu een gesorteerde lijst om je top 5 op je site te zetten. Een voorbeeldje zie je hiernaast: Je mag iets anders doen, als je maar gebruik maakt van een gesorteerde lijst.

[3] Vond je dit eigenlijk wel makkelijk en wil je wat ingewikkelds proberen? Dan hebben wij een uitdaging voor je! Kun je een lijst in een lijst maken? Tip: je hebt nu tags in tags nodig. Probeer maar eens wat en als je er niet uitkomt vraag het dan aan de begeleiders.

Les 4: HTML, tabellen

Je kunt ook tabellen maken met HTML. Zoals je weet bestaat een tabel uit rijen en kolommen. Een tabel maak je met de <table>-tag. Voor elke rij die je in de tabel wil, zet je een <tr>-tag tussen de <table>-tag. En per kolom zet je een <td>-tag in de . Vergeet de <tr> en <td>-tags niet af te sluiten.

<h1>Topscorers Nederlands elftal</h1>
  <table>
    <tr>
      <td>Naam</td>
      <td>Aantal doelpunten</td>    
    </tr>
  </table>

We gaan de tabel uitbreiden met nog een rij. Denk erom dat de nieuwe rij ook weer twee kolommen moet hebben.

 <table>
    <tr>
      <td>Naam</td>
      <td>Aantal doelpunten</td>    
    </tr>
    <tr>
      <td>Van Persie</td>
      <td>96</td>    
    </tr>
  </table>

Cool hé? Je mag natuurlijk meer rijen en kolommen maken, maar er is één belangrijke voorwaarde: Het aantal kolommen per rij moet voor iedere rij gelijk zijn!

Als we een tabel willen hebben met lijntjes, dan kunnen we in de table-tag een border opgeven van bijvoorbeeld 1 pixel.

table border="1px">
  ..
</table>

Probeer het uit in je 'eigen' site...

Meestal zet je in de eerste rij van je tabel de titel van een kolom. Die wil je dan ook dikgedrukt maken. Dat gaat automatisch als je in de eerste rij de <th>-tag gebruikt, i.p.v. de <td> -tag.

<table>
    <tr>
      <th>Naam</th>
      <th>Aantal doelpunten</th>    
    </tr>
</table>

Je mag naast tekst ook plaatjes of linkjes in een tabel zetten. Dat doe je door ze in de <td>-tag te plaatsen.

<tr>
  <td><a href="http://www.google.com">Google</a></td>    
  <td><img src="plaatje.jpg"></td>
</tr>

Opdrachten

[1] Maak een nieuwe alinea onderaan je webpagina. Zet er een kopje boven met de tekst Top 5 beste sporters.

[2] Maak nu een tabel met zes rijen en drie kolommen. Zet daarin jouw top 5 van de beste sporters.

[3] Pas de tabel nu zo aan, dat je kan klikken op de naam van de sporter. Als je er op klikt, dan kom je op een Wikipedia-pagina waar je wat meer informatie kan vinden over de desbetreffende speler.

[4] Maak nu een vierde kolom per rij. In deze vierde kolom zet je een kleine foto van de speler in de tabel. Je kunt met Google zoeken naar kleine foto's door de Zoekhulpmiddelen te gebruiken. Kies bij de grootte voor Gemiddeld (zie pijltje hieronder).

Je zou ook het formaat van een grote foto kunnen verkleinen. Daarvoor stel je of de breedte of de hoogte van een <img>-tag in. Dat ziet er dan bijvoorbeeld zo uit:

<img width="200px" src="jouwplaatje.jpg">

Les 5: CSS, background-color, color

Je hebt nu een HTML-pagina gemaakt. Deze ziet er alleen nog best wel kaal en saai uit. Daar gaan we verandering in brengen met CSS! Dat staat voor Cascading Style Sheets. Met CSS kun je het uiterlijk van je webpagina bepalen. Je kunt dus zeggen dat je 's een rode achtergrond moet hebben met groene tekst. Je kunt bijvoorbeeld je plaatjes een randje geven. Je kunt je tabellen inkleuren en nog veel en veel mee

We gaan nu de CSS style direct in een pagina verwerken om mee te oefenen.

Als je meerdere pagina's gaat maken in je website is het beter om de CSS in een apart bestand te zetten. Dit staat aan het einde van de lesbrief uitgelegd.

In je pagina zet je de CSS style tussen de <style> en <style> tags in de header van je html bestand:

Zullen we eerst een achtergrondkleurtje instellen voor de pagina? Dan moeten we body selecteren. Tussen de { en de } komen alle stijlkenmerken van de body. Alles wat je voor de body wilt instellen zet je tussen die accolades. We gaan de achtergrondkleur instellen met background-color.

En voor de kleur van de tekst gebruiken we color. Zet hem er maar bij! (Wel weer in de body en tussen de accolades zetten!)

Kun je ook iets anders dan de body opmaken? Ja natuurlijk! Je kunt elke tag opmaken die je in je HTML hebt gezet! Dus <p>, <table>, <td>, <tr>, <img> . Denk er wel om dat ze dan OOK in je HTML moeten staan!

In totaal ziet het er dus zo uit:

Maak je meerdere pagina's? Gebruik dan een extern stylesheet.

Maak een bestand in dezelfde map als index.html
Noem het: style.css
Zet daar alles wat tussen de <style>-tags staat in
Zet er een link naartoe in je HTML-pagina: <html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
Sla beide bestand op en test het.

Opdrachten

[1] Bepaal een mooie kleur, achtergrondkleur en lettertype voor alle <h1>-tags op je pagina.

[2] Doe hetzelfde voor de body

[3] Kleur je tabel nu in door de <td> en de <tr>-tags een andere achtergrondkleur te geven.

Les 6: HTML, iframes, Youtube of maps invoegen

Vaak wil je een deel van een andere pagina in jouw eigen pagina opnemen. Denk bijvoorbeeld aan een Youtube filmpje, of een interactieve Google maps kaart. Dit heet 'insluiten' of 'embedding'. Veel pagina's hebben hiervoor functies ingebouwd.

Zie de voorbeelden van youtube.

Je klikt eerst op 'Share' of 'Delen'. Daarna kies je 'Embed' of 'Insluiten'.

Je krijgt nu een schermpje waarin een stuk html-code staat die begint met:

<iframe … Zorg dat je de hele regel kopieert. Dus helemaal tot en met de afsluitende </iframe>-tag.

Dus bijvoorbeeld: <iframe width="560" height="315" src="https://www.youtube.com/embed/rYFjIx0OBAI" frameborder="0" allowfullscreen></iframe>

Zet de regel code in je pagina en je bent klaar!

Bij Google maps gaat het op soortgelijke manier.

Je zoekt een plek op waarvan je de interactieve kaart wilt hebben.

Dan klik je op 'Delen'. Kies vervolgens 'Kaart insluiten' en neem de regel code over die begint met <iframe …

De grootte kun je weer aanpassen door width en height te veranderen in de regel code.

Je kunt met het <iframe> element ook andere webpagina's invoegen. Let wel op want sommige pagina's laten dit niet toe.

Opdrachten

[1] Voeg een favoriete video in in je pagina met behulp van een iframe

[2] Voeg een interactieve kaart in in je pagina van de plek waar je school staat

Les 5: CSS, background-color, color

We gaan nu de CSS style direct in een pagina verwerken om mee te oefenen.

Als je meerdere pagina's gaat maken in je website is het beter om de CSS in een apart bestand te zetten. Dit staat aan het einde van de lesbrief uitgelegd.

In je pagina zet je de CSS style tussen de <style> en <style> tags in de header van je html bestand:

En voor de kleur van de tekst gebruiken we color. Zet hem er maar bij! (Wel weer in de body en tussen de accolades zetten!)

body {
  background-color: red;
  color: green; /* Tekstkleur is groen*/
}

p {
  color: blue;
  background-color: yellow;
}

In totaal ziet het er dus zo uit:

<style>
  body {
    background-color: red;
    color: green; /* Tekstkleur is groen*/
  }

  p {
    color: blue;
    background-color: yellow;
  }
</style>

Maak je meerdere pagina's? Gebruik dan een extern stylesheet.

Maak een bestand in dezelfde map als index.html
Noem het: style.css
Zet daar alles wat tussen de <style>-tags staat in
Zet er een link naartoe in je HTML-pagina: <html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
Sla beide bestand op en test het.

Opdrachten

[1] Bepaal een mooie kleur, achtergrondkleur en lettertype voor alle <h1>-tags op je pagina.

[2] Doe hetzelfde voor de body

[3] Kleur je tabel nu in door de <td> en de <tr>-tags een andere achtergrondkleur te geven.

[4] Je kunt je tabel ook een veel mooiere rand geven. Dat doe je natuurlijk ook in CSS. Lees op de volgende internetpagina hoe dat moet: . Verras ons dan met een mooie rand voor je tabel.

[5] De CSS-code die we je in deze leskaart hebben geleerd is maar een kleine fractie van alle mogelijkheden die er zijn. Ga naar de w3schools-pagina waar je nog veel meer mogelijkheden kunt ontdekken om je pagina mee op te leuken. Klik op de volgende link: