HTML

 

HTML (HyperText Markup Language) is de taal waarmee je documenten maakt, die bekeken kunnen worden op het World Wide Web.
Een HTML-document bestaat uit twee delen: de head en de body.
De head wordt gedefinieerd met het HEAD element en bevat informatie, die betrekking heeft op het document, maar die niet in het documentvenster wordt weergegeven. In de head van elk document moet in ieder geval het TITLE-element worden opgenomen. Hiermee wordt een titel vastgelegd, die in de meeste browsers te zien is in de titelbalk van het venster.
De body wordt gedefinieerd met het BODY-element en bevat de feitelijke inhoud van het document.
Het HTML-element markeert het begin en einde van een HTML-document en geeft aan dat het document HTML-code bevat.

Mijn eerste homepage

Met de genoemde elementen heeft het HTML-document de volgende opbouw:

<HTML>
<HEAD>
<TITLE>Dit is mijn eerste homepage</TITLE>
</HEAD>
<BODY>
Hier staat alleen wat nonsens. Dat hier alleen maar nonsens staat. Dit is weinig zinvol. Betekenis heeft dit niet echt, maar er moet toch wat tekst in staan. Waarom moet dit hier nu weer allemaal? Ik ben niet gek, dit tik ik toch zeker niet over.
</BODY>
</HTML>

Tik deze eerste html-pagina in met behulp van je "kladblok", en sla het bestand in je mapje op onder de naam "eerste.htm".
Vervolgens bekijk je het resultaat van je tikwerk in je browserprogramma (Internet Explorer). Open daarvoor de verkenner, en dubbelklik op het kersverse bestand "eerste.htm".

Met de knop Beeld – Bron kan je rechtstreeks vanuit je Internet Explorer het geopende bestand bewerken in je kladblok. Doe dit en voeg een paar alineamarkeringen <P> </P>, markeringen voor vet <B> </B> en cursief <I> </I> toe. Opslaan en bekijken!

<HTML>
<HEAD>
<TITLE>Dit is mijn eerste homepage</TITLE>
</HEAD>
<BODY>
<P>Hier staat alleen wat nonsens.</P> Dat hier alleen maar <B>nonsens</B> staat. Dit is <I>weinig zinvol</I>. Betekenis heeft dit niet echt, maar er moet toch wat tekst in staan. Waarom moet dit hier nu weer allemaal? Ik ben niet gek, dit tik ik toch zeker niet over.
</BODY>
</HTML>

Enkele “gevorderde” HTML-functies

Achtergrondbeeld en -klank

Tik nu de volgende html-pagina’s in, en controleer ze telkens in je browser. Let op, niet aan elke computer hangen er luidsprekertjes… (De nodige bestandjes vind je hier: telefoon.wav - achtergr.gif - downloaden door met je rechter muistoets op het bestand te klikken, en dan "Doel opslaan als..." te kiezen.)

<HTML> 
<HEAD> 
<TITLE>Achtergrondbeeld en -klank</TITLE>
</HEAD>
<BODY BACKGROUND="achtergr.gif">
<BGSOUND SRC="telefoon.wav" LOOP=15>
U hoort nu een .wav-file afspelen.
</BODY>
</HTML>

Opslaan als "agklank.htm"

Bodykenmerken aanpassen

<HTML> 
<HEAD>
<TITLE>De kracht van &lt;body&gt;</TITLE>
</HEAD>
<BODY BGCOLOR="#0066CC" TEXT="#CCFFCC" LINK="#FF8888" VLINK="#888888" ALINK="#FF0000">
<P>
<FONT FACE="Arial" COLOR="#FFFF00" SIZE="+1">
Dit is een speciale font
</FONT>
<P>
Dit is gewone standaard-tekst
<P>
Dit is een hyperlink: <a href="http://link.nu/sgi">Sint-Godelieve-instituut</a>
<P>
Indien u bovenstaande hyperlink reeds bezocht hebt, dan staat deze in het <FONT COLOR="#FF8888">zalm-roze</FONT>,
anders is de kleur van de font <FONT COLOR="#888888">grijs</FONT>.
</BODY>
</HTML>

Opslaan als "body.htm"

Ongesorteerde lijsten

<HTML>
<HEAD>
<TITLE>Ongesorteerde lijsten</TITLE>
</HEAD>
<BODY>

<UL>
<LI>Dit is het eerste onderwerp
<LI>Dit is het tweede onderwerp
<LI>Dit is het derde onderwerp
</UL>


</BODY>
</HTML>

Opslaan als "olijst.htm"

Gesorteerde lijsten

<HTML>
<HEAD>
<TITLE>Gesorteerde lijsten</TITLE>
</HEAD>
<BODY>

<B>Deel 1</B>

<OL TYPE=i>
<LI>Hoofdstuk 1
<LI>Hoofdstuk 2
<LI>Hoofdstuk 3
</OL>

<B>Deel 2</B>

<OL TYPE=i START=4>
<LI>Hoofdstuk 4
<LI>Hoofdstuk 5
</OL>

</BODY>
</HTML>

Opslaan als “slijst.htm”

Menu

<HTML> 
<HEAD> <META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1"> 
<TITLE>Inhoudstafel</TITLE>
</HEAD>
<BODY>

<H3>Werken met MS Word</H3>

<DL>
<DT>Word starten
<DD><OL>
<LI>Druk op Ctrl-Esc
<LI>Ga naar <I>Programma's</I>
<LI>Ga naar het Word-icoon en druk op Enter
</OL>
<DT>Word afsluiten
<DD><OL>
<LI>Open het menu <I>Bestand</I>
<LI>Kies voor de optie <I>Afsluiten</I>
</OL>
</DL>

</BODY>
</HTML>

Opslaan als "inhoud.htm"

Tabel (1)

<HTML> 
<HEAD>

<TITLE>Tabel 1</TITLE>
</HEAD>
<BODY>

<TABLE>
<THEAD ALIGN=TOP>
Verkoopcijfers
</THEAD>
<TR>
<TD> &nbsp; </TD>
<TD>MZ-514</TD>
<TD>MZX-514</TD>
<TR>
<TH>Januari</TH>
<TD>182</TD>
<TD>54</TD>
</TR>
<TR>
<TH>Februari</TH>
<TD>154</TD>
<TD>62</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Opslaan als "tabel1.htm"

Tabel (2)

<HTML>
<HEAD>
<TITLE>Tabel 2</TITLE>
</HEAD>
<BODY>

<CENTER>
<TABLE WIDTH="400" BORDER=1>
<TR>
<TD WIDTH="30%" ROWSPAN=2></TD>
<TD WIDTH="35%" COLSPAN=2 ALIGN=CENTER>
<I>Verkoopcijfers</I>
</TD>
</TR>
<TR>
<TD WIDTH="35%" ALIGN=CENTER>MZ-514</TD>
<TD WIDTH="35%" ALIGN=CENTER>MZX-514</TD>
</TR>
<TR>
<TH WIDTH="30%">Januari</TH>
<TD WIDTH="35%" ALIGN=RIGHT>182</TD>
<TD WIDTH="35%" ALIGN=RIGHT>54</TD>
</TR>
<TR>
<TH WIDTH="30%">Februari</TH>
<TD WIDTH="35%" ALIGN=RIGHT>154</TD>
<TD WIDTH="35%" ALIGN=RIGHT>62</TD>
</TR>
</TABLE>
</CENTER>

</BODY>
</HTML>

Opslaan als "tabel2.htm"

On line krant

<HTML>
<HEAD>
<TITLE>On line krant</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="100%">
<TR>
<TD ROWSPAN=2 WIDTH="20%" VALIGN=TOP ALIGN=RIGHT>
<!-- dit is het menu -->
<P><A href="test.htm">link 1</A> &nbsp; &nbsp;
<P><A href="test.htm">link 2</A> &nbsp; &nbsp;
<P><A href="test.htm">link 3</A> &nbsp; &nbsp;
<P><A href="test.htm">link 4</A> &nbsp; &nbsp;
</TD>
<TD COLSPAN=2 WIDTH="80%" ALIGN=CENTER>
<h1>Online krant</h1>
</TD>
</TR>
<TR>
<TD WIDTH="40%">
Dit is zomaar wat ingetypte tekst.
Dit is zomaar wat ingetypte tekst.
Dit is zomaar wat ingetypte tekst.
Dit is zomaar wat ingetypte tekst.
Dit is zomaar wat ingetypte tekst.
Dit is zomaar wat ingetypte tekst.
Dit is zomaar wat ingetypte tekst.
Dit is zomaar wat ingetypte tekst.
Dit is zomaar wat ingetypte tekst.
Dit is zomaar wat ingetypte tekst.
</TD>
<TD WIDTH="40%">
Dit kan andere ingetypte tekst zijn.
Dit kan andere ingetypte tekst zijn.
Dit kan andere ingetypte tekst zijn.
Dit kan andere ingetypte tekst zijn.
Dit kan andere ingetypte tekst zijn.
Dit kan andere ingetypte tekst zijn.
Dit kan andere ingetypte tekst zijn.
Dit kan andere ingetypte tekst zijn.
Dit kan andere ingetypte tekst zijn.
Dit kan andere ingetypte tekst zijn.
</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Opslaan als "krant.htm"

home