Programmeren in HTML
Programmeren in HTML
Doel van de les
Je leert wat HTML is
Je ontwikkelt enkele basisvaardigheden in het schrijven in HTML
HTML
De taal van een webpagina is HTML
Hyper Text Markup Language
Een webbrowser leest de HTML taal en geeft deze weer als leesbare website
Wat is de begintag en wat is de eindtag?
Wat is het geneste gedeelte?
Jouw website
Je gaat een website schrijven met HTML
Kies één van de hoofdstukken van afgelopen jaar van scheikunde als onderwerp. Jouw website gaat daar een samenvatting van zijn.
Aan de slag!
Maak een account aan op https://scrimba.com/
Gebruik het emailadres van school
Verzin een wachtwoord dat je ZEKER niet vergeet
Klik vervolgens linksonder op het blauwe icoontje.
Kies voor: 'new scrim'
Selecteer daarna HTML
Als het goed is krijg je nu dit te zien. Dit is de HTML code.
Wanneer je rechts op preview drukt, zie je hoe jouw website er tot dan toe uit ziet.
Is het veranderd, druk dan eerst op 'run' om het door te voeren
Klik op untitled scrim links boven in en daar kun je de naam van dit project veranderen.
Geef je project een duidelijke naam.
Voeg op de allereerste regel
<!Doctype html> toe.
Hiermee geef je voor de webbrowser aan dat je HTML 5 gebruikt
Onder de eerste regel nog een regel toe. Zet hier de code <html lang="nl">. Dit vertelt de zoekmachine dat alles in het Nederlands gaat.
Let op dit zijn dubbele aanhalingstekens
Voeg ruimte tussen de head tags toe voor de title tag
<title> jouw titel </title>
Wat tussen de head tags staat komt niet op je website, maar is voor de zoekmachine enz.
Onder de title tag gaan we er nog één toevoegen.
<meta charset="utf-8" >
Deze zorgt ervoor dat je site alle cijfers en letters aan kan.
Tussen de tags van body komt de inhoud van je website.
Zet eens de tekst 'dit is een test' tussen de twee body tags en bekijk je website.
Zie je dat deze tekst zichtbaar wordt?
Ga aan de slag om tekst te verzamelen voor je website
Tags
Ga aan de slag om je tekst op te maken:
<h1> grote titel </h1>
<h2> kleinere titel </h2>
h gaat t/m h6!
<p> paragraaf </p>
<br> is een enter
<b> dikgedrukt </b>
Tip
Download na iedere les jouw HTML: soms verdwijnt ineens je opdracht...