Waarvoor staat en wat is HTML?
HTML staat voor HyperText Markup Language en is voor alle duidelijkheid geen programmeertaal. Het is een opmaaktaal die door software makkelijk verwerkt kan worden tot een webpagina. Ik ga hier net iets verder gaan dan de meeste tutorials die je op het internet kan vinden. Dit omdat we gebruik gaan maken van XHTML 1.0 (Extensible HyperText Markup Language). Het is praktische hetzelfde als de gewone HTML enkel dat er striktere regels zijn. Deze regels zorgen ervoor dat we een nettere code krijgen.
Een van de dingen die je altijd in je hoofd moet houden is dat tags die we openen ook altijd gesloten dienen te worden. Hiervoor zullen we 2 manieren zien, de éne is soms makkelijker dan de andere. Ook schrijven we de code altijd in kleine letters.
Basis Tags
Om verder in deze cursus alles beter te begrijpen, wil ik eerst vertellen welke basis tags het meest gangbaar zijn. Je kan ook steeds terug scrollen om deze terug te vinden moest je eentje niet meer weten.
B-tag
Hieronder zie je hoe je makkelijk tekst vet gedrukt kan maken. Het principe zoals je misschien al gezien hebt is het zelfde als gebruik maken van UBB tags die je vaker tegen komt op een forum of dergelijke.
HTML-code:
<b>Hier vet gedrukte tekst</b>
Deze zorgt ervoor dat de tekst onderlijnd zal worden. Deze tag zal ook niet zo vaak gebruikt worden.
HTML-code:
<u>Deze lijn zou onderlijnd moeten zijn</u>
Vertelt waar een alinea start en stopt
HTML-code:
<p>Dit zou dus de eerste alinea zijn. Deze kan bestaan uit meerdere zinnen natuurlijk. </p>
Deze tags zijn titelkoppen waarin de H1 de eerste titel is en h2 dus onder H1 staat.
HTML-code:
<h1>Eerste Titel (hoofdtitel)</h1> <h2>Onder titel onder de hoofd titel</h2> <h3>Een titel onder H2</h3> <h4>Nu een titel onder h3</h4> <h5>En vervolgens een titel onder H4</h5> <h6>Nog een titel onder h5</h6>
Deze tag zorgt voor slechts één spatie. Deze tag heeft eveneens iets speciaals omdat deze bestaat uit slechts één deel en XHTML ons zegt dat we elke tag moeten sluiten bestaan er 2 manieren om dit te bekomen.
Zoals vele onder jullie wel zullen denken: simpel. Maar is dit wel de handigste manier?
HTML-code:
Hier een regel tekst<br></br>Hier de tweede regel tekst
HTML-code:
Hier een regel tekst<br />Hier de tweede regel tekst
De li-tag zal niet op zichzelf gebruikt worden en dient in combinatie gebruikt te worden met een andere tag.
ongeordende lijst
Zoals je waarschijnlijk al duidelijk is, bepaalt de eerste tag het soort lijst.
geordende lijst
Natuurlijk als er een ongeordende lijst bestaat, bestaat er ook een geordende lijst. Hier later meer over.
TABLE-tagZoals je waarschijnlijk al duidelijk is, bepaalt de eerste tag het soort lijst.
HTML-code:
<ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ul>
Natuurlijk als er een ongeordende lijst bestaat, bestaat er ook een geordende lijst. Hier later meer over.
HTML-code:
<ol> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ol>
Hiermee kunnen we gegevens weergeven in een tabel zodanig dat ze op een duidelijke manier kunnen worden weergegeven. Vroeger werden deze ook gebruikt om een layout op te bouwen; dit is tegenwoordig totaal uit den boze. Je layout opbouwen met tabellen zorgt voor een hoop extra code en dat willen we niet. In het volgende deel zal je CSS aanleren en zal je div's en spans kunnen gebruiken om een layout te maken.
Hieronder een voorstelling van een simpele tabel code. De tr tag in de table zorgt ervoor dat er een nieuwe rij aangemaakt zal worden. Terwijl de td tag ervoor zorgt dat er een nieuwe cel zal worden toegevoegd.
HTML-code:
<table> <tr> <td>Cel 1 in rij 1</td> <td>Cel 2 in rij 1</td> </tr> <tr> <td>Cel 1 in rij 2</td> <td>Cel 2 in rij 2</td> </tr> </table>
HTML-code:
<table> <tr> <td><b>Product</b></td> <td><b>Omschrijving</b></td> </tr> <tr> <td>Kabel 50m</td> <td>3G VOB 2,5mm²</td> </tr> <tr> <td>Kabel 100m</td> <td>3G VOB 1,5mm²</td> </tr> </table>
IMG-tag
Een vrij belangrijke tag, hiermee kunnen we namelijk afbeeldingen op het scherm toveren. Ook vallen er nog wat dingen bij deze tag op. We vertellen aan de browser d.m.v. de img tag dat het om een afbeelding gaat, maar vervolgens moeten we ook zeggen waar deze zich bevindt. Dat doen we door gebruik te maken van de src="" . Tussen de aanhalingstekens duiden we de locatie van de afbeelding aan.
In dit geval bevindt de afbeelding zich in dezelfde folder als het html document zelf.
Nu is er nog één zeer belangrijke attribute, namelijk de alt="".
Hiermee geven we onze afbeelding een beschrijving. Zoekmachines kunnen namelijk geen afbeeldingen lezen. Zorg er dus voor dat deze zo relevant mogelijk is. Deze alt-attribute zal ook worden weergegeven indien de afbeelding niet gevonden kon worden.
Lange vorm
Korte vorm
HTML-code:
<img src="afbeelding.jpg" alt="Een afbeelding beschrijving"></img>
HTML-code:
<img src="afbeelding.jpg" alt="Een afbeelding beschrijving" />
Zoals jullie waarschijnlijk alweer opvalt is het veel gemakkelijker om hier gebruik te maken van de korte vorm. Deze maakt het ook overzichtelijker
A-tag
Hiermee kunnen we linken leggen naar andere webpagina's of net naar je eigen site maar een andere pagina. Dit voorbeeld hieronder zal verwijzen naar minatica.be
HTML-code:
<a href="https://www.minatica.be/">Minatica.be</a>
HTML-code:
<a href="pagina2.html">Pagina 2</a>
Deze tag omvat een selectie van meerdere tags en kan gebruikt worden om je website op te maken of je layout te vormen. Hier zullen we dieper op in gaan in het volgende deel waarin we ook CSS zullen bespreken.
HTML-code:
<div> <p>Hier hebben we de eerste alinea. Je kan natuurlijk bij de rest ook gewoon tags combineren maar hier zal je makkelijker een stijl aan kunnen toewijzen.</p> <p>Zoals je ziet heb ik hier een 2de alinea om alles toch een beetje duidelijk te maken.</p> <p>Hier misschien nog een 3de alinea?</p> </div>
Een stukje tekst een stijl geven kan makkelijk met deze tag. Eveneens als de vorige tag zullen we deze gaan gebruiken bij het volgende deel waarin we deze 2 tags ook nog eens aanhalen. Nu zouden we de span een stijl kunnen mee geven zodanig dat gele geel zou worden. Maar dit is voor de volgende tutorial. Zo heb je al een idee van deze tag.
HTML-code:
De zon heeft een <span>gele</span> kleur
Een basis webpagina bevat een aantal standaard elementen die toch wel vrij belangrijk zijn. Hieronder zien we een voorbeeld van een basis html pagina.
HTML-code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Webpagina titel</title> </head> <body> Inhoud van je website </body> </html>
Vervolgens openen we de HTML tag nu zien we in deze html tag toch wel iets vreemds. Namelijk de xmlns="" attribute. Deze vertelt aan de browser, die de code natuurlijk ook controleert of het document correct is. We geven hier dus een waarde op waarmee de browser dit kan controleren. Deze waarde kan je gewoon van mij aannemen. Zolang het over XHTML 1.0 gaat is deze gewoon correct.
Note: De xmlns="" vinden we niet terug bij HTML dit is eigen aan XHTML.
Nu openen we de head tag: deze is gemaakt om allerlei scripts, stylesheets (waarop we terug komen in een andere tutorial) en data te omvatten.
De eerste volgende lijn vertelt aan de browser wat voor inhoud dit document zal bevatten en welke karakterset er gebruikt moet worden. Deze regel is in de meeste gevallen zo gewoon goed.
De title tag die we vervolgens tegen komen zal ervoor zorgen dat je browser venster een titel mee krijgt. Deze zal zichtbaar zijn in je venster bovenaan. Deze is immers ook verplicht evenals de html tag.
Enkele voorbeelden hiervan:
Firefox: "Webpagina titel - Mozilla Firefox"
Internet Explorer: "Webpagina titel - Windows Internet Explorer"
Vervolgens kunnen we de head sluiten en kunnen we aan het volgende zeer belangrijke stukje beginnen, namelijk de body, hierin gaat je uiteindelijke website komen. In de body bouwen we de pagina op d.m.v. de tags die hierboven al werden aangehaald.
Nu maken we nog een laatste voorbeeld pagina om nog een paar zaken duidelijk te maken. Hierin zullen we gebruik maken van zoveel mogelijk dingen die we geleerd hebben.
HTML-code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Mijn Eerste webpagina</title> </head> <body> <h1>Mijn Eerste Webpagina</h1> <p>Hier kan ik een tekst neer zetten, ook kan ik zomaar wat dingen <b>vet gedrukt</b> maken. Het is allemaal best simpel te combineren.</p> <h2>Ongeordende lijst</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <h2>Geordende lijst</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <p>We kunnen onze tekst ook nog <u>onderstreept</u> maken weet je nog?<br /> Of beginnen met onze tekst op de volgende regel ;)</p> <img src="jouw-afbeelding.jpg" alt="Jouw Afbeelding" /> <table> <tr> <td><b>Product</b></td> <td><b>Omschrijving</b></td> </tr> <tr> <td>Kabel 50m</td> <td>3G VOB 2,5mm²</td> </tr> <tr> <td>Kabel 100m</td> <td>3G VOB 1,5mm²</td> </tr> </table> <a href="https://www.minatica.be/">Minatica.be</a> </body> </html>
Correct:
HTML-code:
<p><b><u>Een vette tekst die eveneens onderstreept is.</u></b></p>
HTML-code:
<p><b><u>Een vette tekst die eveneens onderstreept is.</p></u></b>
Opdracht
Zo, hiermee hoop ik dat je een basis HTML te pakken hebt. Maar om dit even in te oefenen maken we er even een oefening voor.
De bedoeling is dat je het volgende probeert te maken in HTML met de tags die we geleerd hebben zou dit moeten lukken.
De opdracht.
(De oplossing, eerst zelf proberen he!)
© 2010 Kurt0015 voor minatica.be