HOME OVER HTML & CSS EDITOR KLEURKIEZER LES 1 LES 2 LES 3 LES 4 LES 5 LES 6 CONTACT

Simpel en snel HTML

Iedereen kan een website bouwen

boy

Over


De website 'Simpel en snel HTML' is bedoeld voor een ieder die de basis van HTML en CSS wil leren.

Je hebt GEEN programma nodig om in ieder geval de absolute basis te leren. Bij de meer gevorderde lessen heb je aan een simpele tekstverwerker zoals 'kladblok' in Windows genoeg. Voor OSX kun je o.a. 'CotEditor' gebruiken.
Je kunt het coderen met HTML & CSS gewoon oefenen en leren op de website zelf.

Op de website zie je drie aparte vakken. In het vak waar HTML bovenstaat typ je de HTML-code en waar CSS boven staat typ je de CSS-code. Het resultaat van jouw code zie je dan gelijk in het onderste vak waar RESULTAAT boven staat verschijnen.

De code wordt NIET automatisch opgeslagen. Als je de browser sluit verdwijnt dus ook jouw code!

De lessen, opdrachten en voorbeelden vind je allemaal in het hoofdmenu.

Let er wel op dat je de HTML code en CSS code in dezelfde map opslaat. De HTML code bijvoorbeeld als index.html en de CSS code als style.css.

Veel plezier en succes!

Focus op 21e eeuwse vaardigheden


Zelfregulering

Kritisch denken

Creativiteit

Informatievaardigheden

ICT basisvaardigheden

HTML & CSS


Wat is HTML?

HTML is een taal waarmee je een website kunt opmaken:

HTML staat voor Hyper Text Mark-up Language.

HTML wordt gebruikt om websites te maken. HTML kun je heel makkelijk leren. Als je de lessen en opdrachten in het menu van Simpel en snel HTML een voor een doorloopt kan ook jij heel snel een simpele website maken.

We willen jouw de basis leren om een website te bouwen. Dit zal niet gelijk een hele mooie website zijn, maar onthoud dan dat zelfs de mooiste website niet werkt zonder HTML.


Wat is CSS?

CSS is een taal waarmee je aan de HTML-tags kunt vertellen hoe ze er uit moeten zien en wat ze wel en niet mogen doen:

CSS staat voor Cascading Style Sheets.

Met CSS kun je de manier waarop jij wil dat de website eruitziet in een document zetten. Dat betekent dat je maar een document hoeft te veranderen om alle pagina's van je website te veranderen. Ook ziet je webpagina er minder rommelig uit.


Wat zijn tags?

Met een tag kun je de computer vertellen wat hij moet doen:

Als je de computer een commando wilt geven dan zet je deze tussen <> en </> Dit heet een tag.

  • <> = begin-tag
  • </> = eind-tag

Als je de computer wilt vertellen dat jij een webpagina gaat maken dan gebruik je de volgende tags:

  • <html> = Begin webpagina
  • </html> = Einde webpagina

VOORBEELD:


Wat zijn atributen?

Alle HTML-tags kunnnen atributen bevatten.

Atributen geven extra informatie over een tag.

  • Een atribuut wordt altijd in de begin-tag geplaatst.
  • Atributen komen normaal gesproken voor als een naam/waarde paar zoals: naam="waarde".

HTML links worden aangegeven met een <a> tag. De link naar het adres wordt aangegeven in het href atribuut:

VOORBEELD:

<a href="https://www.simpel_en_snel_html.nl">Dit is een link</a>

Editor


  • HTML
  • CSS

Resultaat

Kleurkiezer


Hieronder staat een kleurenkiezer en een lijst met 216 kleuren.

Je kunt de lijst met kleuren gebruiken als beginpunt bij het zoeken naar de code van een kleur die je wilt gebruiken op jouw website.

Kun je de juiste kleur niet vinden, gebruik dan de kleurenkiezer. Klik op het pijltje, kies de exacte kleur en kopieer de kleurcode uit het onderste vakje.

 
#000000
 
 
#000033
 
 
#000066
 
 
#000099
 
 
#0000CC
 
 
#0000FF
 
 
#003300
 
 
#003333
 
 
#003366
 
 
#003399
 
 
#0033CC
 
 
#0033FF
 
 
#006600
 
 
#006633
 
 
#006666
 
 
#006699
 
 
#0066CC
 
 
#0066FF
 
 
#009900
 
 
#009933
 
 
#009966
 
 
#009999
 
 
#0099CC
 
 
#0099FF
 
 
#00CC00
 
 
#00CC33
 
 
#00CC66
 
 
#00CC99
 
 
#00CCCC
 
 
#00CCFF
 
 
#00FF00
 
 
#00FF33
 
 
#00FF66
 
 
#00FF99
 
 
#00FFCC
 
 
#00FFFF
 
 
#990000
 
 
#990033
 
 
#990066
 
 
#990099
 
 
#9900CC
 
 
#9900FF
 
 
#993300
 
 
#993333
 
 
#993366
 
 
#993399
 
 
#9933CC
 
 
#9933FF
 
 
#996600
 
 
#996633
 
 
#996666
 
 
#996699
 
 
#9966CC
 
 
#9966FF
 
 
#999900
 
 
#999933
 
 
#999966
 
 
#999999
 
 
#9999CC
 
 
#9999FF
 
 
#99CC00
 
 
#99CC33
 
 
#99CC66
 
 
#99CC99
 
 
#99CCCC
 
 
#99CCFF
 
 
#99FF00
 
 
#99FF33
 
 
#99FF66
 
 
#99FF99
 
 
#99FFCC
 
 
#99FFFF
 
 
#330000
 
 
#330033
 
 
#330066
 
 
#330099
 
 
#3300CC
 
 
#3300FF
 
 
#333300
 
 
#333333
 
 
#333366
 
 
#333399
 
 
#3333CC
 
 
#3333FF
 
 
#336600
 
 
#336633
 
 
#336666
 
 
#336699
 
 
#3366CC
 
 
#3366FF
 
 
#339900
 
 
#339933
 
 
#339966
 
 
#339999
 
 
#3399CC
 
 
#3399FF
 
 
#33CC00
 
 
#33CC33
 
 
#33CC66
 
 
#33CC99
 
 
#33CCCC
 
 
#33CCFF
 
 
#33FF00
 
 
#33FF33
 
 
#33FF66
 
 
#33FF99
 
 
#33FFCC
 
 
#33FFFF
 
 
#CC0000
 
 
#CC0033
 
 
#CC0066
 
 
#CC0099
 
 
#CC00CC
 
 
#CC00FF
 
 
#CC3300
 
 
#CC3333
 
 
#CC3366
 
 
#CC3399
 
 
#CC33CC
 
 
#CC33FF
 
 
#CC6600
 
 
#CC6633
 
 
#CC6666
 
 
#CC6699
 
 
#CC66CC
 
 
#CC66FF
 
 
#CC9900
 
 
#CC9933
 
 
#CC9966
 
 
#CC9999
 
 
#CC99CC
 
 
#CC99FF
 
 
#CCCC00
 
 
#CCCC33
 
 
#CCCC66
 
 
#CCCC99
 
 
#CCCCCC
 
 
#CCCCFF
 
 
#CCFF00
 
 
#CCFF33
 
 
#CCFF66
 
 
#CCFF99
 
 
#CCFFCC
 
 
#CCFFFF
 
 
#660000
 
 
#660033
 
 
#660066
 
 
#660099
 
 
#6600CC
 
 
#6600FF
 
 
#663300
 
 
#663333
 
 
#663366
 
 
#663399
 
 
#6633CC
 
 
#6633FF
 
 
#666600
 
 
#666633
 
 
#666666
 
 
#666699
 
 
#6666CC
 
 
#6666FF
 
 
#669900
 
 
#669933
 
 
#669966
 
 
#669999
 
 
#6699CC
 
 
#6699FF
 
 
#66CC00
 
 
#66CC33
 
 
#66CC66
 
 
#66CC99
 
 
#66CCCC
 
 
#66CCFF
 
 
#66FF00
 
 
#66FF33
 
 
#66FF66
 
 
#66FF99
 
 
#66FFCC
 
 
#66FFFF
 
 
#FF0000
 
 
#FF0033
 
 
#FF0066
 
 
#FF0099
 
 
#FF00CC
 
 
#FF00FF
 
 
#FF3300
 
 
#FF3333
 
 
#FF3366
 
 
#FF3399
 
 
#FF33CC
 
 
#FF33FF
 
 
#FF6600
 
 
#FF6633
 
 
#FF6666
 
 
#FF6699
 
 
#FF66CC
 
 
#FF66FF
 
 
#FF9900
 
 
#FF9933
 
 
#FF9966
 
 
#FF9999
 
 
#FF99CC
 
 
#FF99FF
 
 
#FFCC00
 
 
#FFCC33
 
 
#FFCC66
 
 
#FFCC99
 
 
#FFCCCC
 
 
#FFCCFF
 
 
#FFFF00
 
 
#FFFF33
 
 
#FFFF66
 
 
#FFFF99
 
 
#FFFFCC
 
 
#FFFFFF
 

Les 1


Een website maken is niet heel moeilijk, maar er zijn wel regels een afspraken waar je rekening mee moet houden. Er zijn wereldwijd afspraken gemaakte over de regels waar aan elke website moet voldoen. Als jij je niet aan deze regels houdt kan het gebeuren dat jouw website niet goed werkt.

De tags hieronder moeten altijd gebruikt worden zodat de computer weet wat de bedoeling is.

  • The <!DOCTYPE html> Dit is een HTML5 document
  • The <html> Hier begint het HTML document
  • The <head> Bevat informatie over dit document
  • The <title> Bevat de titel van het document
  • The <body> Bevat de inhoud van het document die de bezoekers zien

Dit ziet er dan zoals in het onderstaande voorbeeld uit.

Hieronder zie je hoe de structuur van een HTML-pagina er dan uitziet.

Het witte vlak is het gedeelte wat de bezoekers van een website zien.

<html>
<head>
<title>Pagina titel</title>
</head>
<body>
<header>Hier komt de titel en een korte omschrijving</header>
<h1>Dit is een koptekst</h1>
<p>Dit is een paragraaf.</p>
<p>Dit is nog een paragraaf.</p>
</body>
</html>

Opdracht 1


  • Ga naar de editor en tik de HTML-code in het tekstvak waar HTML boven staat.
  • Maak het HTML voorbeeld uit les 1 na
  • Voeg de tags <header></header> toe
  • Vul de titel 'Mijn eerste website' in tussen <title></title>
  • Vul je eigen naam en leeftijd in tussen <header></header>
  • Bekijk het resultaat

Je ziet in het onderste vak waar RESULTAAT boven staat hoe dit er uit ziet op een webpagina.

Les 2


Je hebt in opdracht 1 je eerste stukje HTML-code geschreven!

De titel ziet er nu meer uit als een zin. Dat gaan we veranderen met behulp van de tag <h1> </h1>!

Met de tag <h1> t/m <h6> kun je bepalen hoe groot de titel wordt.

H1

H2

H3

H4

H5
H6

Met de tag <p></p> kunnen we aangeven dat de naam en leeftijd in een paragraaf onder de titel moet komen.

Om het einde van de titel aan te geven zetten we er een streep onder. Hiervoor gebruiken we de tag <hr>

Bij een paar tags -dit zijn maar enkele uitzonderingen- is het niet verplicht een eind-tag te gebruiken. Voorbeelden hiervan zijn <hr> en <br>.

VOORBEELD:

Opdracht 2


In opdracht 1 heb je de titel van jouw webpagina neergezet.

  • Kijk naar het voorbeeld in les 2 en zorg dat jouw titel er hetzelfde uit komt te zien.
  • Kijk ook eens wat er gebeurd als je niet <h1> </h1>, maar <h6> </h6> gebruikt.
  • Schrijf onder de lijn een kort verhaaltje over jezelf. Dit moet schuin gedrukt zijn, gebruik hiervoor de tag <i> </i>.

Wil je dat een zin op een nieuwe regel begint? Zet dan de tag <br> aan het einde van een zin.

Les 3


In opdracht 2 heb je de titel aangepast, een lijn en schuingedrukt verhaaltje over jezelf onder de titel geplaatst.

Dit is allemaal nog zwart-wit. Met behulp van CSS gaan we kleuren gebruiken. De code voor CSS tik je in het vak naast de HTML-code.

We willen de achtergrondkleur van de webpagina een andere kleur geven. Je moet de computer dus vertellen welk onderdeel van de pagina je een kleur wilt geven en ook welke kleur.

CSS-code
WAAR? hele webpagina html
WAT? achtergrondkleur background-color
KLEUR? geel yellow

VOORBEELD:

Opdracht 3


De webpagina is nu nog zwart-wit. Kleuren maken het natuurlijk veel leuker!

  • Kijk naar het voorbeeld in les 3 en maak de achtergrondkleur geel.
  • Kijk ook eens wat er gebeurd als je niet yellow, maar red of een andere Engelse naam van een kleur invult.

Extra

In plaats van de naam van een kleur in te vullen kun je ook de kleurcode gebruiken. De kleurcode voor bijvoorbeeld geel is #ffff00

Dit heet de hexadecimale kleurcode.

Je kunt de kleurzoeker van deze website gebruiken om deze kleurcodes op te zoeken.

Het gaat om de kleurcode met een # ervoor.

Les 4


In opdracht 3 heb je de de achtergrondkleur van de webpagina een andere kleur geven.
We willen graag dat de titel opvalt, dus geven we die ook een andere kleur.

CSS-code
WAAR? titel header
WAT? tekstkleur color
KLEUR? rood red

VOORBEELD:

Opdracht 4


We kunnen nu ook de kleur van titel veranderen.

Met behulp van de tags <header></header> hebben we aangegeven welke tekst bij de titel hoort.

We gaan de computer nu vertellen dat alles wat tussen de tags <header></header> staat rood moet zijn.

  • Kijk naar het voorbeeld in les 4 en maak de titel rood.

Extra

Het is jouw website! Pas de kleur van de achtergrond en titel aan naar kleuren die jij leuk vindt!

Les 5


In opdracht 5 moet je een afbeelding op de website zetten. Dat is veel makkelijker dan je denkt!

Het belangrijkste is dat je de computer vertelt waar hij de afbeelding kan vinden. Dit doen we m.b.v. een link.

In principe kun je elk plaatje van het internet gebruiken. Wij gebruiken een plaatje van Doutze Kroes.

De tag die je gebruikt is: <img />

De atributen die je gebruikt zijn: src, alt en height.

Let er bij het gebruik van atributen op dat deze altijd gevolgd worden door een = teken en dat de gegeven waarde tussen " " staat!


FUNCTIE
SRC staat na IMG vertelt de computer waar de afbeelding staat
ALT staat na IMG laat tekst zien bij mouse-over
HEIGHT staat na IMG vertelt de computer hoe hoog de afbeelding moet zijn

VOORBEELD:

Les 6


Om de website af te maken sla je de HTML-code op als index.html en de CSS-code als style.css.

Dit kun je doen door de code op te op te slaan met de knop onder het HTML of CSS venster.

  • Een webpagina wordt opgeslagen als index.html of default.html.
  • Een stijldocument wordt opgeslagen als style.css of default.css
  • De webpagina index.html moet nog wel verteld worden dat hij gebruik moet maken van style.css. Dit doen we door een stukje code tussen <head> en </head> te zetten.

    <link rel="stylesheet" media="screen" type="text/css" href="style.css" />

    Deze code vertelt de computer dat hij gebruik moet maken van deze link, dat het een stijldocument is en waar hij dit document kan vinden.

    Dit ziet er dan uit zoals in het onderstaande voorbeeld.

    VOORBEELD:

Neem contact op


Email: javalk@comenius.nl