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!

PreviousHTML-CSS-0NextLes 2: HTML, meer over body, plaatjes en links

Last updated