HTML-cursus

Een eenvoudige pagina maken
  1. Zelf aan de slag
  2. De opbouw van een HTML-pagina
  3. Achtergrond
  4. Opsommingen
  5. Afbeeldingen
  6. Hypertext
  7. Hypergraphics

Zelf aan de slag

Een Internet-pagina kan je niet alleen van Internet maar ook van de harde schijf of een floppy opvragen. En op die manier zullen we nu een pagina maken.

Als het goed is lees je deze tekst nu in je browser. Open nu een tweede exemplaar van je browser via Bestand: Nieuw: Venster. Open nu ook het Windows-kladblok Het kladblok vind je in het Start-menu onder Programma's: Bureau-Accessoires. Met het kladblok ga je een html-pagina maken, die je met je tweede browservenster steeds zal bekijken. Via de Taakbalk of met Alt+Tab kan je nu tussen de drie applicaties wisselen.
Als het goed is kan je nu schakelen tussen deze tekst, het kladblok en je tweede browservenster. Het vereist misschien wat proberen, maar je zult zien dat dit een handige methode is om gelijktijdig te leren en proberen.

Opdracht 1:

  1. Open een nieuw venster van je browser.
  2. Open ook het kladblok.
  3. Wissel tussen de drie programma's via de taakbalk of via de knoppen Alt+Tab

In het kladblok kan je nu de voorbeelden overnemen en opslaan op een floppy. Met je tweede browservenster kan je via Bestand: Openen.. het opgeslagen bestand opvragen. Als je hierna het bestand nu in het kladblok wijzigt en opslaat, hoef je in de browser alleen nog maar op Vernieuwen te drukken.

Voordat je nu verder gaat maak je op je floppy of op de harde schijf een speciale map aan waar je html-pagina's en bijbehorende plaatjes opgeslagen worden. Vanaf nu worden daarin alle bestanden van je webpagina opgeslagen.

Naar menu

De opbouw van een HTML-pagina

Een pagina bestaat uit twee delen: een inleiding (de kop) en een inhoud (het lichaam). In de inhoud staat de titel van de pagina, en eventueel informatie over de maker van de pagina. Die titel komt bij de meeste browsers boven in de titelbalk te staan, de overige informatie niet en is alleen te zien met Beeld: Bron. De inhoud is de eigenlijke inhoud van de pagina.

Laten we maar in het diepe springen en beginnen.
 
<HTML>
<HEAD>
<TITLE>Mijn eerste welkomstpagina</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

In het voorbeeld zie je een aantal Engelse instructies. Deze instructies staan tussen punthaken, zodat ze onderscheiden kunnen worden van de tekst. Instructies hoeven niet met hoofdletters te worden geschreven, maar het is overzichtelijker om dat wel te doen. In dit voorbeeld worden alle instructies aan- en afgekondigd. Dus eerst <TITLE> en later </TITLE>. Dat maakt alles erg overzichtelijk. Sommige instructies hebben deze insluiting niet nodig, maar dat blijkt later.
Deze instructies worden tags genoemd.
 

De pagina is geschreven in HTML, van begin tot eind. Dan volgt de inleiding (head) met daarin de titel gevolgd door een nu nog blanco inhoud (body). Wat tussen de BODY-tags komt te staan wordt zichtbaar op je Internetpagina. Het maakt niet uit of instructies op een aparte regel staan. Houd daarbij aan wat het meest overzichtelijk is.

In de inleiding (head) staat nu een titel. Hier kan je nog meer informatie over de pagina plaatsen. Maar voorlopig laten we het bij een titel.

Nu zullen we wat tekst op de pagina gaan zetten. Het resultaat zien we hieronder. Er staan twee alinea's tekst. De alinea's worden van elkaar gescheiden met de P (van paragraph) instructie. De browser gaat pas naar een nieuwe regel bij een nieuwe paragraaf, niet als de tekst op een nieuwe regel begint. Om dat de tweede zin op een nieuwe regel begon zonder nieuwe alinea komt deze gewoon achter de eerste zin. Nu valt op dat er eigenlijk een extra spatie bij had gemoeten.
Voor kleinere ruimtes tussen de nieuwe regels kan je de <BR>-tag gebruiken (heeft geen afsluitende tag).
 
<HTML>
<HEAD> 
<TITLE>Mijn eerste welkomstpagina</TITLE> 
</HEAD> 
<BODY> 
<P>Deze tekst komt eerst.
Deze regel komt er gewoon achter...</P>
<P>En dit begint op een nieuwe regel.</P>
Om kleinere ruimtes tussen de regels te krijgen doen we het nu anders.<BR>
Kijk maar wat het effect hiervan is.
</BODY>
</HTML>

Opdracht 2:

  1. Ga naar het Kladblok en voer bovenstaande tekst in.
  2. Sla dit document op op je floppy onder de naam welkom.html. Pas op! Opslaan als type: Alle bestanden
  3. Ga nu naar je tweede browservenster en open hierin je html-document via Bestand: Openen..
  4. Vergelijk je resultaat met wat hieronder staat.
Deze tekst komt eerst.Deze regel komt er gewoon achter...

En dit begint op een nieuwe regel.

Om kleinere ruimtes tussen de regels te krijgen doen we het nu anders.
Kijk maar wat het effect hiervan is.

Om de tekst te verfraaien kan je woorden en zinnen vet, cursief en onderstreept laten zien. De uitwerking is te zien in het voorbeeld hieronder. Merk op dat dit voorbeeld slechts een fragment is; het zou in een complete pagina staan tussen de BODY-tags
 
<P>Het kan <B>vetgedrukt</B>,
of liever <I>cursief</I>.</P>
<P>Maar ook <U>onderstreept</U> is mogelijk.</P>
<CENTER>Of in het midden!</CENTER></P>

Opdracht 3:

  1. Ga weer naar je document in het Kladblok en haal de oude tekst tussen de BODY-tags weg.
  2. Neem nu tussen de BODY-tags bovenstaande tekst over.
  3. Sla je document onder dezelfde naam ( welkom.html ) op op je floppy.
  4. Ga naar je tweede browservenster en bekijk het resultaat via de optie Vernieuwen.
  5. Vergelijk dit met wat hieronder staat.
Het kan vetgedrukt,of liever cursief.

Maar ook onderstreept is mogelijk.

Of in het midden! 

Om kopjes boven een paragraaf te maken verdient het de voorkeur om een echt kopje te gebruiken in plaats van normale gecentreerde tekst. Dat komt op andere browsers dan Netscape wat mooier uit; niet alle browsers ondersteunen het centreren. Kopjes kunnen overigens ook op dezelfde manier gecentreerd worden en zijn leverbaar in verschillende groottes: van formaat 1 tot 6. Een kopje staat tussen <H1> en </H1> en het cijfer verschilt naargelang de grootte van het kopje; 1 is het grootst, 6 het kleinst.
 
 
<H1>kopgrootte 1</H1>
<H2>kopgrootte 2</H2>
<H3>kopgrootte 3</H3>
<H4>kopgrootte 4</H4>
<H5>kopgrootte 5</H5>
<H6>kopgrootte 6</H6>

Opdracht 4:

  1. Ga weer naar je document in Kladblok en haal de oude tekst weer weg.
  2. Neem bovenstaande tekst over.
  3. Sla het document op en bekijk het resultaat in je tweede browservenster via Vernieuwen.
  4. Vergelijk dit met wat hieronder staat.

kopgrootte 1

kopgrootte 2

kopgrootte 3

kopgrootte 4

kopgrootte 5
kopgrootte 6

Naar menu

Achtergrond

Om de web-pagina's een beetje op te fleuren zijn er diverse mogelijkheden: het gebruik van een achtergrond, het trekken van lijnen, het weergeven van opsomtekens en het invoegen van afbeeldingen.
Gebruik een achtergrond alleen voor de versiering en niet voor essentiële informatie. Houdt er ook rekening mee dat de achtergrond subtiel blijft, anders is de tekst niet meer leesbaar zonder hoofdpijn te krijgen.

Een egaal gekleurde achtergrond maak je door de <BODY> instructie aan te vullen tot <BODY BGCOLOR="#FFFFFF">. De code "#FFFFFF" is een hexadecimale kleurwaarde. Het hekje geeft aan dat er een kleurwaarde komt, en de eerste, tweede en derde twee cijfers staan voor respectievelijke de rode, groene en blauwe component van de kleur (dus van 00 t/m FF ofwel van 0 t/m 255. Zie boek hoofdstuk 2). Deze basiskleuren zijn samen te mengen tot allerlei andere kleuren. Natuurlijk hoeft deze kleurwaarde niet berekend te worden. Hiervoor zijn allerlei handige programma's zoals de ColorWizard. Je kunt je het best beperken tot de volgende 16 basiskleuren:
 
kleurcode kleur engels voorbeeld
FF0000 Rood Red ABCDEabcde12345
800000 Donkerrood Maroon ABCDEabcde12345
FFFF00 Geel Yellow ABCDEabcde12345
808000 OlijfGroen Olive ABCDEabcde12345
00FF00 Lichtgroen Lime ABCDEabcde12345
008000 Groen  Green ABCDEabcde12345
00FFFF Lichtblauw Aqua ABCDEabcde12345
008080 Blauwgroen Teal ABCDEabcde12345
0000FF Blauw  Blue ABCDEabcde12345
000080 Donkerblauw Navy ABCDEabcde12345
FF00FF Lichtpaars Fuchsia ABCDEabcde12345
800080 Paars Purple ABCDEabcde12345
FFFFFF Wit White ABCDEabcde12345
C0C0C0 Lichtgrijs  Silver ABCDEabcde12345
808080 Grijs Gray  ABCDEabcde12345
000000 Zwart  Black  ABCDEabcde12345

Behangen van de achtergrond doe je met <BODY BACKGROUND="backgrnd.gif">, waarbij backgrnd.gif een plaatje is. Dat plaatje moet er dus wel al zijn. Als het plaatje kleiner is dan het scherm wordt het automatisch net zo vaak herhaald tot het scherm vol is, vandaar het 'behangen'.

Opdracht 5:

  1. Ga naar je document in Kladblok en laat de tekst hierin gewoon staan.
  2. Geef je html-document een gele achtergrond.
  3. Sla het document op en bekijk het resultaat in je tweede browservenster via Vernieuwen.
  4. Ga terug naar deze pagina en klik op je rechtermuisknop.
  5. Kies voor Achtergrond opslaan als... en sla het gif-plaatje op op je floppy bij je document.
  6. Ga nu naar je document in Kladblok, verwijder de achtergrondkleur in de BODY-tag en behang de achtergrond van je document nu met het opgeslagen gif-plaatje.
  7. Sla je document op en bekijk het resultaat in je tweede browservenster via Vernieuwen.
Naar menu

Opsommingen

Wanneer je een lijstje van dingen wilt opnoemen, kan je in de tekst gebruik maken van lijsten. Een voorbeeld:
 
Eerst met rondjes:
<UL>
<LI> Eerste onderwerp</LI>
<LI> Tweede onderwerp</LI>
</UL> 
En nu met nummers:
<OL>
<LI>En dat is 1</LI>
<LI>En dat is 2</LI>
</OL>

Opdracht 6:

  1. Ga naar je document in Kladblok en haal de oude tekst tussen de BODY-tags weg.
  2. Neem bovenstaande tekst over, sla het document op en bekijk het resultaat in je tweede browservenster via Vernieuwen
  3. Vergelijk met onderstaande tekst.
Eerst met rondjes:
  • Eerste onderwerp 
  • Tweede onderwerp
En nu met nummers:
  1. En dat is 1
  2. En dat is 2

De tekst wordt nu vanzelf ingesprongen en voorafgegaan door een rondje. Nummers in plaats van rondjes krijg je met OL in plaats van UL.

Naar menu

Afbeeldingen

Het invoegen van een afbeelding is bijzonder simpel. Je hoeft alleen de volgende instructie in de tekst te zetten:
 
Dit is een plaatje: <IMG SRC="netnow3.gif"> 
Dit is een plaatje: 

Alles na de bestandsnaam is niet verplicht om op te geven (wel het laatste haakje natuurlijk). IMG staat voor image, SRC voor source, de bron van het plaatje, BORDER voor de breedte van het kader (hier dus geen kader), HEIGHT en WIDTH voor hoogte en breedte van het plaatje in pixels (schermpunten) en ALIGN voor de uitlijning.
 
En dit ook: <IMG SRC="ienow3.gif" ALT="De Microsoft Internet Explorer" ALIGN="middle" WIDTH="88" HEIGHT="31"> 
En dit ook: 

Het opgeven van het formaat van het plaatje heeft een aantal voordelen: als de browser weet hoeveel ruimte er op het scherm voor het plaatje vrij moet blijven kan vast de rest van de tekst worden geladen. Een ander voordeel is dat je de oorspronkelijke afmeting van het plaatje kunt veranderen (oppassen: hierdoor kan het plaatje vervormd op de pagina verschijnen).

Opdracht 7:

  1. Ga in deze tekst op het Netscape-plaatje staan en klik hierop met de rechtermuisknop.
  2. Kies voor Figuur opslaan als... en sla het plaatje op als netnow3.gif op je floppy.
  3. Doe hetzelfde voor het InternetExplorer-plaatje (ienow3.gif).
  4. Ga nu naar je document in Kladblok en voer voor beide plaatjes bovenstaande regels in om ze op je html-document te krijgen.
  5. Opslaan en via Vernieuwen in je tweede browservenster bekijken.

N.B.: Gebruik voor je pagina's alleen maar gif, jpg en png plaatjes en nooit bmp!

Naar menu

Hypertext

Eigenlijk is het mooiste van HTML de hypertext. Hypertext is tekst waarachter nieuwe tekst, zoals uitleg, verborgen zit. Die nieuwe tekst kan worden opgeroepen door de hypertext aan te klikken met de muis. In het geval van HTML staat de nieuwe tekst ergens op dezelfde pagina of op een andere pagina. Het kan zelfs verwijzen naar een pagina die op een webserver aan de andere kant van de wereld staat, zonder dat dit iets uitmaakt. Zo'n hypertext verwijzing heet een hyperlink of kortweg link.

Een link naar een andere pagina of site maak je met de code:
 
Dit is een link naar mijn <A HREF="http://www.google.nl">favoriete zoekmachine</A> op het Internet. 

Opdracht 8:

  1. Ga naar je document in Kladblok en haal eventueel de oude tekst weg.
  2. Neem bovenstaande regel over; i.p.v. www.google.nl mag je ook schrijven www.ilse.nl of  het adres van een andere zoekmachine.
  3. Opslaan en bekijken via Vernieuwen in je tweede browservenster.
  4. Klik op de tekst favoriete zoekmachine en kijk wat er gebeurt.
  5. Ga tenslotte weer terug naar je html-document in je browservenster via Vorige.
Dit is een link naar mijn favoriete zoekmachine op het Internet. 

In dit tekstfragment kan je met een browser favoriete zoekmachine aanklikken, en dan wordt automatisch de vermelde pagina opgevraagd. Omdat hier alleen een server is vermeld, zal de server zelf zijn opstartpagina laten zien. In de browser zal de hypertext als blauw verschijnen in een verder zwarte tekst.

Behalve naar een andere site kan je ook naar een fragment in een pagina linken:
 
Een <A HREF="#hypergraphics">plaatje als link</A> gebruiken: hypergraphics. 
Een plaatje als link gebruiken: hypergraphics.

Deze hyperlink wijst naar het fragment hypergraphics op deze pagina. Op die plaats staat dan
 
<A NAME="hypergraphics"></A> 

En op die plek, het anchor of anker, kom u dan uit.

Opdracht 9:

  1. Bekijk de codes op deze pagina via Beeld: Bron en zoek een aantal links naar fragmenten op deze pagina en de bijbehorende ankers.
  2. Sluit het venster met de broncode en controleer door op een aantal links te klikken of ze naar de goede fragmenten verwijzen.

Handig is ook een link om te mailen. Heb je een standaard mailprogramma op je computer, dan wordt deze automatisch opgestart door
 
stuur eens <A HREF="mailto:rvdwdn@xs4all.nl">post</A> naar me! 
stuur eens post naar me! 

Als je nu op post klikt wordt dat mailprogramma opgestart en automatisch het e-mail adres rvdwdn@xs4all.nl ingevuld.

Naar menu

Hypergraphics

Een link kan behalve een woord ook een plaatje zijn, en zo maak je buttons, oftewel knoppen.
 
Druk op de knop om een e-mailtje te sturen: <A HREF="mailto:rvdwdn@xs4all.nl"><IMG SRC="mailbutt.gif" ALT="[e-mail]" ALIGN="middle" BORDER="0" WIDTH="95" HEIGHT="55"></A>
Druk op de knop om een e-mailtje te sturen: [e-mail]

Je ziet dat dit gewoon een combinatie is van een link en een afbeelding. De knop is het plaatje mailbutt.gif die verwijst naar de pagina mailto:rvdwdn@xs4all.nl. Nieuw is de instructie ALT, die u overigens ook bij gewone afbeeldingen kunt gebruiken. Dit is een alternatief, voor het geval iemand een browser gebruik die geen plaatjes kan weergeven. Dan verschijnt er de tekst [e-mail], zodat iemand tenminste weet waar hij moet klikken. Die blokhaken ( [ en]) in die alternatieve tekst zijn niet verplicht, maar laten zien dat het een knop is.

Dit waren in het kort de belangrijkste basismogelijkheden voor het maken van een webpagina. Er zijn nog veel meer mogelijkheden, zoals het maken van tabellen, van frames, invulformulieren enz. Voor deze verdere mogelijkheden verwijs ik naar de link die helemaal onderaan deze pagina staat.

Opdracht 10:

  1. Open een nieuw document in Kladblok.
  2. Maak nu een html-pagina bijv. over jezelf met zoveel mogelijk onderdelen erin, die hier ter sprake zijn gekomen. N.B. Zet er niet te grote plaatjes in. Dat past nl. niet op je floppy.
Naar menu

De hier behandelde basiscodes zijn op een aparte pagina nog eens samengevat.


Copyright René van der Weijden; Update van 05-12-2004