Cursus HTML

 

Les 1

Zonder dat er enige basiskennis van HTML nodig is kan er tegenwoordig in Frontpage of een andere willekeurige HTML-editor heel makkelijk een webpagina in elkaar worden gezet. Toch zou ik iedereen willen aanraden om tenminste de basisprincipes van de HTML-code te leren. Hierbij wil ik iedereen die hier voor open staat een stapje op weg helpen met een simpele cursus. Ik zal stapje voor stapje uitleggen hoe dit programmeren in zijn werk gaat.

De HTML-code kan worden geschreven in een standaard text-editor als kladblok of wordpad, maar ik geef de voorkeur aan het programma Textpad. Dit programma biedt de mogelijkheid om, als het document als *.html is opgeslagen tussendoor steeds het resultaat te kunnen zien, en is geschikt voor meerdere programmeertalen.

Je kan deze cursus downloaden voor Windows of Unix.

De codes die ik vanaf nu tags ga noemen staan altijd tussen een kleiner-dan teken en een groter-dan teken. Met deze tags vertel je de browser (bijv. Explorer of Netscape) wat er moet gebeuren. In deze cursus ga ik uit van Explorer, maar de meeste toepassingen zullen ook in Netscape werken.

In de eerste en de laatste tag geef je aan in welke taal je de pagina schrijft. In dit geval dus HTML. Daarna komen de <HEAD> tags met daartussen de <TITLE> tags.

Hiermee geef je de pagina een naam, die in de blauwe balk helemaal boven in je browser komt te staan .

<HTML>
<HEAD>
<TITLE> Mijn eerste homepage </TITLE>
</HEAD>
</HTML>

Het grootse deel van de pagina komt tussen de <BODY> tags.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Sommige tags waaronder de <BODY> tag kunnen ook variabelen bevatten waarin je bijvoorbeeld een achtergrondkleur kunt aangeven of zelfs een achtergrond muziekje.

<BODY BGCOLOR="red" BGSOUND SRC="C:\Mijn documenten\liedje.mp3">

Als je andere kleuren wil gebruiken dan de standaardkleuren zijn daar bepaalde codes voor die je simpelweg uit je hoofd zal moeten leren. Voor standaard rood is dit de code.

<BODY BGCOLOR="#FFOOOO">

Kijk hier voor een kleurenschema.

Nu hebben we alleen nog maar een lege pagina die nu een leuk kleurtje heeft maar waar we natuurlijk nog wel wat op willen hebben. Laten we dus eerst eens beginnen een tekst neer te zetten. Dit doen we met de <FONT> tag. Deze komt tussen de <BODY> tags. Vanaf nu laat ik alleen hetgeen tussen de <BODY> tags zien. We beginnen met een simpel tekstje.

<FONT>> Hier een simpel tekstje </FONT>

Als je nu zou kijken hoe dit eruit ziet in de browser, zou je zien dat de browser een standaard lettertype gebruikt en een standaard grootte en kleur. Ook hier kunnen we weer met variabelen werken.

Eerst kiezen we een lettertype. Laten we als voorbeeld 'Helvetica' nemen.

<FONT FACE=Helvetica> Hier een simpel tekstje </FONT>

Nu bepalen we de grootte: de browser kent 7 groottes.
In dit voorbeeld nemen we grootte 6.

<FONT FACE=Helvetica SIZE=6> Hier een simpel tekstje </FONT>

Nu de kleur nog:

<FONT FACE=Helvetica SIZE=6 COLOR="YELLOW"> Hier een simpel tekstje </FONT>

We kunnen de tekst nog vet maken.

<B> <FONT> Hier een simpel tekstje </FONT> </B>

Of cursief.

<I> <FONT> Hier een simpel tekstje </FONT> </I>

We kunnen de tekst onderstrepen.

<U> <FONT> Hier een simpel tekstje </FONT> </U>

Of alles tegelijk.

<B> <I> <U> <FONT> Hier een simpel tekstje </FONT> </U> </I> </B>