Een beetje kennis hebben over html-code is noodzakelijk om een website tot een goed einde te brengen
We gaan een website maken via kladblok
Start kladblok op door start/programma's(programs)(xp:all programs)/bureau-accessoires(accessoires)/kladblok(notepad)
Dan typen we de volgende code in:
<html>
</html>
Dit noemt men tags meer bepaald html-tags.Hiertussen gaat alles gebeuren.
Klik nu op opslaan en neem alle bestanden bij bestandstype en geef als naam op index.html bewaar het ergens in een map of op het bureaublad.
Open het bestand is: geloof het of niet je hebt juist een webpagina gemaakt!!!
Laten we nu is een titel toevoegen:
We gaan terug naar kladblok en we veranderen de code naar:
<html>
<head>
<title>Mijn eerste website</title>
</head>
</html>
(Het rode hebben we reeds ingetypd)
Sla nog is op en bekijk het resultaat
<html>
<head>
<title>Mijn eerste website</title>
</head>
<body>
<h1>Welkom op mijn website</h1>
Hallo wereld!
</body>
</html>
Een pak nieuw:
Wat tussen de body tags komt (<body> </body>) wordt op de site
gepubliceerts en je kunt daar dus overal tekst zetten
<h1> betekent kop1 en dus alles wat tussen die tags staat word groot
gezet
Sla op en bekijk het resultaat
Om een nieuwe paragraaf te maken gebruik je <p> en sluit af met </p> voor gewoon een nieuwe regel hoef je gewoon <br> in te typen.
<html>
<head>
<title>Mijn eerste website</title>
</head>
<body>
<h1>Welkom op mijn website</h1>
<p> Beste mensen allemaal.</p>
<p>Welkom op deze website<br>
Deze site heeft nog meer te bieden</p>
<p align="right">Rechts uitgelijnde tekst</p>
<p align="center">Gecentreerde tekst</p>
<p align="left">Links uitgelijnde tekst</p>
<p align="Justify">Uitgevulde tekst::<br>
dit is een voorbeeld van<br>
Uitgevulde tekst</p>
</body>
</html>
Sla op en bekijk het resultaat
Als je align tussen de p-tags zet kun je die llinea een bepaalde opmaak geven zoals in het voorbeeld
<font> en </font> dienen om het lettertype te bepalen
Enzo kun je zoals align in de p tags hier ook color bijzetten,laten we
volgende regel ook is tussen de body-tags zetten na de uitgevulde tekst
en test het nog is uit.
<font color="#FFFF00">Geel</font><br>
om een kleur te bekomen moet je weten dat elke kleur begint met een # gevolgd door 3 paren van 2 hexadecimale tekens(0-F) die RGB-waarden voor stellen (Rood Groen Blauw)
#000000 #00003B
#00006A #000084
#0000A5 #0000B7
#0000CA #0000DC
#0000EC #0000FA
#0000FF
#000000 #003B00
#006A00 #008400
#00A500 #00B700
#00CA00 #00DC00
#00EC00 #00FA00
#00FF00
#000000 #3B0000
#6A0000 #840000
#A50000 #B70000
#CA0000 #DC0000
#EC0000
#FA0000 #FF0000
#000000 #3B3B3B
#6A6A6A #848484
#A5A5A5 #B7B7B7
#CACACA #DCDCDC
#ECECEC #FAFAFA
#FFFFFF
Er zijn nog veel meer mogelijkheden:
#FFFF00 #FF00FF #00FFFF #FF9900
Dan kun je er ook nog size bijzetten:
1234567Voorbeeld van size.
Voeg dit nog tussen de body-tags onderaan en test uit:
<font size="6">Grote Letter</font><br>
<font size="7" color="#0000FF">Grote Smurf</font><br>
Eerder hebben we <h1></h1> gezien.
het gebruik van koppen voor de titels is meer aangewezn omdat je hiermee
een opmaakprofiel kunt wijzigen bv als je de titels blauw en cursief wilt
maar daar bestaan ook aparte tags voor
<h1>h1-kop</h1>
<h2>h2-kop</h2>
<h3>h3-kop</h3>
<h4>h4-kop</h4>
<h5>h5-kop</h5>
<h6>h6-kop</h6>
<i>cursief</i> <b>vet</b> <u>onderstreept</u>
<s>doorgestreept</s> <tt>teletype</tt>
Linken:
<a href="http://www.jvdboom.com">Het startportaal op het internet</a>
voeg deze regel toe aan de body tags en test uit.
Commentaar in de code zetten wordt niet weergegeven in de pagina maar wel zichtbaar voor iemand die jouw broncode bezoekt
Alles wat tussen <!-- is onzichtbaar op de pagina -->
<html>
<head>
<title>Mijn eerste website</title>
</head>
<body>
<h1>Welkom op mijn website</h1>
<p> Beste mensen allemaal.</p>
<p>Welkom op deze website<br>
Deze site heeft nog meer te bieden</p>
<p align="right">Rechts uitgelijnde tekst</p>
<p align="center">Gecentreerde tekst</p>
<p align="left">Links uitgelijnde tekst</p>
<p align="Justify">Uitgevulde tekst::<br>
dit is een voorbeeld van<br>
Uitgevulde tekst</p>
<font color="#FFFF00">Geel</font><br>
<font size="6">Grote Letter</font><br>
<font size="7" color="#0000FF">Grote Smurf</font><br>
<a href="http://www.jvdboom.com">Het
startportaal op het internet</a>
<!--commentaar regel :U bekijkt de broncode van (vul hier uw naam in) gemaakt door de cursus van Jan van den Boom -->
</body>
</html>
Maak volgende veranderingen en test uit
Gefeliciteerd! Je hebt deel 1 van de cursus html voor beginners met succes voltooid!