Embedded Files
Inhoud
Inhoud
Inleiding
Inleiding
Websites worden in een speciale opmaaktaal, HTML, geschreven. HTML staat voor HyperText Markup Language. In feite betekent dit: een opmaaktaal voor hypertekst. Hypertekst is een naam voor tekst met hyperlinks, de woorden waar je op klikt om naar een andere pagina te gaan, in.
Hoe zit het systeem van HTML nu precies in elkaar? Om je tekst te kunnen opmaken heb je bepaalde codes nodig. Dit gaat van heel eenvoudige dingen, bijvoorbeeld om tekst vet te maken, tot ingewikkeldere dingen zoals bijvoorbeeld tabellen. Alle codes in HTML staan tussen een kleiner dan teken (<) en een groter dan teken (>). De code om je tekst vet te maken ziet er bijvoorbeeld zo uit:
<b>Dit is vette tekst</b>
De code met je groter en kleiner dan tekens (bv. <b>) wordt een tag genoemd. Hierop gaan we nu verder in.
Tags
Tags
Bij normale codes bestaat je code uit 2 tags, zoals je in het voorbeeld hierboven met de vette tekst ziet: een begintag en een eindtag. De begintag kan er zo uit zien:
<blablabla>
en de eindtag zo:
</blablabla>
Let op het schuine streepje in de eindtag dat aangeeft dat het om een eindtag gaat. De tekst tussen het < en > teken omschrijft wat er met de tekst tussen die twee tags moet gebeuren.
Soms kan je aan je tag één of meerdere parameters toevoegen. Zo’n parameters worden containers genoemd. Containers zien er zo uit:
<blabla blabla="blabla">
De parameters mag je weglaten als ze niet nodig zijn, dan worden gewoon de standaardinstellingen gebruikt. Dit zal later duidelijk worden. Nu moet je nog op één ding letten bij tags met parameters: de eindtag van een tag met parameter bevat die parameters nooit. Je eindtag ziet er dan zo uit:
</blabla> en niet </blabla blabla="blabla">
Hieronder een voorbeeld van een gewone tag en een container:
Gewone tag: <u>Dit is onderlijnde tekst</u>
Container: <font face="Arial">Dit is Arial tekst</font>
Naast al deze tags bestaan er nog enkele speciale tags en containers die géén eindtag nodig hebben, maar dit zijn uitzonderingen en die zullen we in de cursus zelf bespreken wanneer we ze nodig hebben.
Basis van een pagina
Basis van een pagina
Basisstructuur HTML.mp4Nu je weet wat tags en containers zijn, kunnen we van start gaan met het bouwen van een eenvoudige website.
Elk HTML-document heeft altijd de volgende code nodig:
<html>
<head>
<title>Hier komt de titel van je pagina</title>
</head>
<body>
Hier komt de tekst van je pagina
</body>
</html>
Deze code zullen we stap voor stap bespreken, van buiten naar binnen:
<html> en </html>
<html> en </html>
Deze tag vertelt je browser, het programma waarmee je op internet surft, dat het om een pagina gaat die in HTML geschreven wordt. Er bestaan nog enkele oudere (bvb. SGML) en nieuwere (bvb. XML) talen waarmee op het web gewerkt wordt, dus je browser moet weten met welke jij werkt.
<head> en </head>
<head> en </head>
Tussen deze twee tags komt alle informatie die de bezoeker van je site niet in zijn browservenster te zien krijgt. Dit zijn bvb. de beschrijving van je site (zodat zoekmachines die gemakkelijker kunnen indexeren), de maker van de site, de titel van de site,... Op al deze tags gaan we later in.
<title> en </title>
<title> en </title>
Deze tags moeten tussen de <head> en </head> tags staan. Tussen de title-tags staat de titel van je site. Deze wordt gebruikt door de zoekmachines, en is dus heel belangrijk, maar deze titel komt ook helemaal bovenaan in de titelbalk van je browser-programma te staan. Als er tussen mijn title-tags bijvoorbeeld HTML Emergency staat, en ik bekijk de site met Google Chrome, staat er bovenaan in de titelbalk: HTML Emergency.
<body> en </body>
<body> en </body>
Deze tag is zo ongeveer de belangrijkste tag van alle tags. Tussen deze twee tags komt het lichaam van je pagina, dus alles wat de bezoeker op zijn scherm te zien krijgt. Het gaat hier eigenlijk om een container, maar zoals reeds vermeld, kan je de parameters weglaten. Dan gebruikt de browser gewoon zijn standaardinstellingen. De body-tag kan bijvoorbeeld onderstaande parameters bevatten:
text="#000000"
Bovenstaande parameter definieert de kleur van de tekst binnen de body van de pagina. De code #000000 is een hexadecimale code om de kleur aan te duiden. De code bestaat altijd uit een hekje (#) gevolgd door zes cijfers en letters.
link="#4466DD"
Definieert de kleur van de links binnen de body van de pagina.
bgcolor="#FFFFFF"
Definieert de achtergrondkleur van de pagina.
background="achtergrond.gif"
Definieert de achtergrondafbeelding. Wanneer je een achtergrondafbeelding hebt, wordt die als het ware op de achtergrondkleur gelegd. Dus wanneer de achtergrondafbeelding nog niet is ingeladen wordt de achtergrondkleur getoond. Je kiest dus best een achtergrondkleur waarbij de tekst al leesbaar is (dus geen zwarte tekst met een zwarte achtergrondkleur).
Het is niet omdat je in je BODY-tag zegt dat je tekst bijvoorbeeld blauw moet zijn, dat daarom alle tekst in de document alleen maar blauw kan zijn. Deze parameters zeggen gewoon dat als je tekst niet opmaakt, ze standaard bijvoorbeeld blauw gekleurd zal zijn. Je kan stukken tekst met speciale tags een andere kleur geven, daar gaan we later op in. Onthoud ook dat je in de eindtag geen parameters mag zetten, de eindtag blijft dus altijd </body>.
Nu we de basis van je pagina's hebben kunnen we je site beginnen bouwen.
Belangrijke opmerking
Belangrijke opmerking
index.html
index.html
De hoofdpagina van je site geef je altijd de naam index.html. Wanneer je bezoeker dan je site bezoekt, moet hij het als adres bijvoorbeeld alleen maar http://www.mijnsite.be intypen. De browser opent dan automatisch de pagina index.html. Wanneer je je hoofdpagina een andere naam geeft wordt het adres moeilijker om te onthouden, bijvoorbeeld http://www.mijnsite.be/start.html.
Merk op! de naam van het bestand moet echt index.html zijn en niet bijvoorbeeld Index.html, dan werkt het ook niet!
Page updated
Report abuse