Home
  Sitemap
  stap 1
  stap 2
  Stap 3
  stap 4
  stap 5
  Stap 6
  Stap 7
  Print Pagina
  Nieuw
  Gastenboek
  Contacteer ons
Welkom bij Geneapage Factory
   

Stap 3 : HTML Puur !
Mag het een beetje ingewikkeld zijn ?

Wat is HTLM ?
HTML is zeker geen tovenarij. HTML staat voor "Hypertext Markup Language" en het gaat hierbij gelukkig niet over een programmeertaal, maar wel over een opmaaktaal. Een HTML-bestand is niets anders dan een eenvoudig tekstbestand, waarin zowel de weer te geven tekst als de instructies voor de opmaak van de tekst zijn opgenomen. HTML-bestanden kun je dus met een eenvoudige teksteditor als Kladblok of Wordpad (die je al op je computer hebt) lezen en wijzigen. Je hebt er geen duur en ingewikkeld computerprogramma voor nodig. Tot zover het goede nieuws.
Het slechte nieuws is dat je om een HTML-bestand te schrijven gebruik moet maken van een aantal voorafbepaalde Engelstalige instructies, waartegen je geen fouten mag maken. De basisinstructies zijn echter zo eenvoudig en beperkt in aantal dat je ze al vlug zult beheersen. Laten we het eens proberen.

Indexpagina in vijf minuten
Gebruik voor je eerste probeersel Kladblok dat je vindt onder Start/ Programma's/ Bureau-accessoires/ Kladblok en tik de tekst in de linkerkolom in. In de rechterkolom vind je telkens als dat nodig is een woordje uitleg.

<HTML> Ja, daar beginnen we tenslotte mee, niet ?
<HEAD> We gaan een header maken met de paginatitel.
<TITLE>Genealogische Homepage</TITLE> Met </TITLE> geven we aan dat we al klaar zijn met de titel...
</HEAD> en we zijn ook al klaar met de header : </HEAD> dus. Volgt nu de eigenlijke inhoud.
<BODY BGCOLOR="Midnightblue" TEXT="Arial" ALINK="Red" ALINK="DarkOrange" VLINK="Yellowgreen"> Even aangeven welke kleurtjes we willen voor de hele pagina  : blauwe achtergrond (BGCOLOR), tekst in Arial, links in oranje en bezochte links in geel...
<H1> Eerst een kop van het eerste (grootste) niveau...
<CENTER> gecentreerd graag...
<FONT COLOR="Aquamarine"> en in een ander opvallend kleurtje...
Johnie's Genealogische Webstek met deze inhoud.
</FONT> En afsluiten maar weer...
</CENTER>
</H1> De titel is hiermee klaar
<HR> We zetten er een mooie streep (horizontal rule) onder
<P> en beginnen een nieuwe alinea (paragraph).
<CENTER>
<FONT SIZE=+3 COLOR="Yellow"> Een wat groter lettertype (+3) en in het geel, graag...
<B> Waaw ! Ik ben klaar voor de digitale snelweg ! </B> en ook nog vetjes (Bold)
</FONT>
</CENTER>
<BR> <BR> <BR> Koud hier zeg ! Dus maar drie extra regels wit (line break).
<TABLE BORDER=0 CELLPADDING=10> We gaan een tabel maken, zonder zichtbare randjes (border) en met tien beeldpunten tussen de cellen (cellpadding).
<TR> Begin een nieuwe horizontale rij (table row)
<TD WIDTH=20%> en plaats daarin een cell met gegevens (data) en gebruik 20% van de breedte (width).
<TABLE BORDER=0 CELLPADDING=5>
<TR>
<TD BGCOLOR="Darkred" ALIGN="center"> Achtergrondkleur wordt rood en het geheel wordt gecentreerd. We krijgen zo een aanklikknop...
<B> <A HREF="mijninfo.htm">Hallo !</A> </B> We maken een link naar een ander HTML-bestand (Mijninfo.htm) en maken een verwijzing via het woordje "Hallo!" dat aanklikbaar zal zijn.
</TD>
<TR>
<TD BGCOLOR="Darkred" ALIGN="center"> We maken nog zo'n link...
<B> <A HREF="links.htm">Links</A> </B>
</TD>
</TR>
</TABLE>
</TD>
<TD> We gaan naar het rechterdeel van de tabel voor een welkomstekst.
<FONT COLOR="aquamarine">
<B> Welkom op mijn homepage ! </B>
<P>
Voor meer info over mezelf, klik op de infoknop aan de linkerkant van de pagina. Via de knop met links kom je bij mijn verzameling genealogische bestanden terecht. Wil je meer gegevens, stuur me dan maar een mailtje.
</FONT>
</TD>
</TR>
</TABLE> Waarmee het hele tabellendeel aggesloten wordt.
<BR> <BR> <BR> Juist ! Weer drie blanco regels...
<HR> en een leuke streep.
<FONT SIZE=-1> Dan... in kleinere lettertjes...
&copy; 1.5.2002 by Johnie Productions. E-mail : copyrightaanduiding en e-mailadres...
<I> <A HREF="mailto:Johnie@ genealogy.com"> en dat laatste cursief (italics)
Johnie@genealogie.com </A> </I>
</FONT>
</BODY>
</HTML>

Zo. Job done. Nu nog dit bestandje opslaan en het eens uittesten via de browser. Toch niet zo'n titanenwerk, of wel? Indien je wil, kun je de broncode van dit proefbestand downloaden.

Nog niet bevredigd ? Dan gaan we nog even door met nog meer HTML...