Editie 159 - HTML-cursus

Artikel geplaatst door OWN 7 november 2009

715 bezichtigingen

https://gtagames.nl/blogs/entry/4077-editie-159-html-cursus/

Volgers 0

Hoeveel procent heb je GTA Vice City uitgespeelt?
91 leden hebben gestemd

1. Hoeveel procent heb je GTA Vice City uitgespeelt?
- 10%
  
  5
- 20%
  
  6
- 30%
  
  1
- 40%
  
  2
- 50%
  
  11
- 60%
  
  6
- 70%
  
  4
- 80%
  
  7
- 90%
  
  40
- 100%
  
  0

This poll is closed to new votes

Deze rubriek is geschreven door Kloep en VWO-er!

Hallo, en welkom bij de HTML-cursus van OWN. In deze rubriek gaan wij (VWO-er en Kloep) zaken vertellen die handig zijn om te weten als je met HTML aan de slag gaat. Later zullen we HTML verder gaan uitwerken, dit ook onder andere met behulp van CSS. Als we dit allemaal hebben gehad, gaan we over naar PHP in combinatie met MySQL. Later zullen we ook steeds meer Javascript bereiken. In het begin zullen we dus met de basis beginnen, maar zonder deze basis kun je niet verder komen. In deze cursus zul niet alleen lappen tekst te zien krijgen, maar alles zal worden uitgelegd door middel van afbeeldingen. Hierdoor zullen het geen saaie lange verhalen worden, maar zal alles in kleine stappen worden uitgelegd.

In deze rubriek maken we gebruik van het programma Notepad++ en Firefox. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Firefox de codes anders weer als bijvoorbeeld Internet Explorer of Netscape. Veel plezier met deze nieuwe rubriek!

In deze les gaan we beginnen met het schrijven van onze eerste code!

Basiscodes

Laten we beginnen met een lekkere simpele tekst. In deze tekst komen alle basiscodes aan bod. Bekijk onderstaande tekst even op de linkerafbeelding, en kijk vervolgens naar het resultaat in de rechterafbeelding.

Op de linkerafbeelding is de gehele HTML-tekst te zien. Op de rechterafbeelding is te zien hoe het in je browser word weergegeven.

Met de bovenste regels (DOCTYPE) word aangegeven welke HTML je gebruikt.

Met HTML wordt aangegeven dat hier het HTML-gedeelte begint.

Met HEAD wordt aangegeven dat hier het HEAD-gedeelte begint. Hierin wordt onder andere een titel aan je pagina gegeven (TITLE-tag) en de META-regel. In de META-regel declareer je de codering. 'UTF-8' is hierin de lettertekencodering waarmee je pagina is opgeslagen.

Met BODY wordt aangegeven dat hier het BODY-gedeelte begint. Hierin komt je gehele pagina te staan. Hierin kun je onder andere alinea's neerzetten (hierover later meer in deze les), maar ook bijvoorbeeld tabellen en lijsten (hierover later meer in volgende lessen).

In het voorbeeld wordt dus HTML 4.01 Transitional gebruikt. Het is dus nog wel een saaie tekst, maar op deze manier word het wel duidelijk hoe een HTML-tekst in elkaar hoort te zitten. Natuurlijk kunnen we nog wat andere dingen toevoegen, maar dit komt allemaal later. Voor vandaag houden we het op nog één toepassing. We gaan nog even een achtergrondkleur toevoegen, en daarna gaan we door naar de twee laatste onderdelen van deze les.

Een achtergrondkleur toevoegen is erg gemakkelijk. In de BODY-tag voeg je BGCOLOR toe. Dit komt er dus als volgt uit te zien:

<BODY BGCOLOR="red">

Als je dit toevoegt, krijg je een rode achtergrond. Natuurlijk kun je 'RED' voor allerlei andere kleuren vervangen. Ook kun je een kleurcode gebruiken, alleen moet je dan wel een '#' ervoor zetten. Voor vele kleurcodes kun je hier eens een kijkje nemen.

Identatie

In HTML werk je met verschillende tags, bijvoorbeeld de HTML-tag. Tags hebben vaak een open- en een sluit-tag, maar er zijn een aantal uitzonderingen waar we later nog wel op ingaan. Open-tags zijn gewoon gelijk aan de naam, bij de sluit-tag zal er een slash ( / ) voor staan.

Om het overzicht over je code te behouden en om (vaak onnodige) fouten te voorkomen, is het slim om je code uit te lijnen, ook wel indentatie genoemd. Er wordt niet op gecontroleerd zoals bij andere talen (Pawno, bijvoorbeeld), maar we raden het je zeker aan. Na iedere open-tag dien je een tab in te springen, bij een sluit-tag ga je weer een stukje terug.

Kopteksten en Alinea's

Nu je weet hoe de BODY-tag in elkaar steekt, kun je de pagina zelf gaan maken. We zullen eerst de beginselen van een pagina gaan bespreken, namelijk de kopteksten, alinea's en de BR-tag (een zachte enter in een normale tekstverwerker).

In HTML kun je een kop markeren met de H-tags. Er zijn al 6 koppen voorgeprogrammeerd, dus je hebt H1 tot en met H6. Zoals gezegd zijn ze voorgeprogrammeerd en hebben ze dus standaard groottes en eigenschappen (op het font na, dat verschilt per browser). Je kunt de tags nog wel aanpassen, maar dat komt nu nog niet aan de orde.

Nadat je een kop hebt geplaatst, is het uiteraard de bedoeling dat je ook een alinea plaatst. Alinea's kun je aangeven door middel van de P-tag. Als je meerdere alinea's onder elkaar hebt staan, zullen ze automatisch door een harde enter of witregel worden gescheiden.

Enters tussen of binnen P-tags (of binnen of tussen andere tags, uiteraard) zullen geen effect hebben, je zult ze echter wel zien in de broncode van je webpagina. Om een zachte enter (een enter waarbij de alinea gewoon doorloopt) te plaatsen, kun je de BR-tag gebruiken. De BR-tag is zo'n tag waar we het al eerder over hadden in dit artikel, een tag zonder een echte open- of sluit-tag (het is eigenlijk beide in één). Je schrijft hem daarom als <BR />.

Dit was het dan voor deze week. Volgende keer houden we ons bezig met nog meer opmaakcodes, en gaan we wat meer boeiende websites schrijven. Tot de volgende keer!