Ga naar inhoud

Cursus html deel1

Gast zero

Door Gast zero
in Archief Website Hulp & Scripts

 Delen

Aanbevolen berichten

Gast zero

Gast zero

Geplaatst:
Geplaatst:

1.0Inleiding

We beginnen met een eenvoudig voorbeeld. Open een editor of tekstverwerker en typ de volgende tekst in:

<HTML>

<HEAD><TITLE>Welkom!</TITLE></HEAD>

<BODY>

Tekst komt hier.</P>

</BODY>

</HTML>

Bewaar dit bestand als eerste.html en open het met een webbrowser zoals Netscape Navigator of NCSA Mosaic. Let op de titelbalk van het venster die de tekst tussen <TITLE> en </TITLE> geeft (in dit geval "Welkom!"), terwijl de tekst tussen

en </P> in het venster zelf verschijnt.

Voila, dit is je eerste web-pagina, en meteen ook de plattegrond voor heel wat andere paginaÂ’s. Enige verklaring is hier wel op zÂ’n plaats.

De truc van de HTML-taal zit ‘m in de tags. Het zijn de woorden tussen groter- en kleiner-dan tekens die zeggen wat de webbrowser moet doen. De functie van elk woord wordt nog uitvoerig uitgelegd.

Merk ook op dat er steeds een afsluit-tag wordt gebruikt, die gelijk is aan de begin-tag met een ‘\’ ervoor. Dit systeem werkt zoals accolades bij formules. Het is belangrijk dat je de tags in de juiste volgorde afsluit, anders weet de browser niet wat je bedoelt.

Om zo goed mogelijk uit te leggen wat er nu eigenlijk staat, doorlopen we het tekstje in chronologische volgorde.

* <HTML>: De webbrowser ziet dat het om een web-page gaat: ze beginnen namelijk allemaal met <HTML>. Dit is een vaste afspraak zodat de browser weet of hij het bestand domweg moet weergeven of moet gaan interpreteren.

* <HEAD>: Voor we aan het grote werk beginnen, maken we een hoofding aan met wat meer informatie over de web-page.

* <TITLE>Welkom!</TITLE>: Elke fatsoenlijke web-page heeft een titel, zodat de gebruiker in één oogopslag ziet waarover het gaat. Meestal staat hier de naam van een bedrijf, of het onderdeel van de website waarin je je bevindt.

* </HEAD>: De hoofding wordt afgesloten. Er is echter nog veel meer informatie die je in een hoofding kan steken, bv. wat er allemaal te vinden is op je web-page, wie ze gemaakt heeft enz.

* <BODY>: Dan beginnen we aan het hoofdgedeelte, het ‘lijf’ van de web-page. Wat we nu te zien krijgen komt in het venster.

*

tekst</P>: Het stuk tekst hiertussen is een paragraaf. Een browser reageert niet op [ENTER]. Door dit aan het begin en einde van een stuk tekst te zetten weet de browser wanneer hij een blanco lijn moet laten.

* <\BODY><\HTML>: Uiteindelijk duiden we het einde van de pagina aan door alle overblijvende tags gewoonweg af te sluiten.

2. Opmaak van een web-page

Met het vorige voorbeeld kan je al heel wat doen. Je kan er namelijk zelf tekst invoegen, en zo kan je al beginnen met al die informatie in te typen die je aan de wereld kwijt wou. Hoe interessant deze informatie dan ook mag zijn, rauwe tekst wordt snel saai, en al gauw is er nood aan wat opfleuring. Hiervoor zijn een paar simpele commandoÂ’s al genoeg.

2.1 De hoofding

Om het de lezer wat gemakkelijker te maken om een stuk tekst terug te vinden, gebruiken we zowat overal hoofdingen. Ook in web-paginaÂ’s, waar we met de <H1> tot <H6> tags werken. De H staat voor hoofding (of header), het cijfer voor het niveau. H1 titels zijn zeer grote titels, H2 titels zijn daar onderverdelingen van enz. Om ze te gebruiken vervangen we eenvoudigweg de

door <H1>, bv.

<HTML>

<BODY>

<H1>Dit is zeer belangrijk!</H1>

Volgende informatie mag u overslaan.</P>

</BODY>

</HTML>

We voegen gewoon een regel tussen die ipv. de P-tag de H1-tag (of H2, H3...) krijgt.

2.2 Opmaak

Om de belangrijkste informatie op te laten vallen gebruiken we vet, onderstreept en schuin, zoals we dat ook doen bij tekstverwerkers. Dit zijn respectievelijk de tags , <U> en , bv.

<HTML>

<BODY>

Gewone tekst, vette tekst, <U>onderstreepte tekst,</U>

schuine tekst.</P>

</BODY>

</HTML>

Merk ook op dat hoewel de tekst over twee regels is verspreid, hij in de web-browser slechts op één regel zal verschijnen. Zoals gezegd, de web-browser houdt geen rekening met de opmaak van de tekst. Het is dus perfect mogelijk van alles op één lijn te typen, of alles zeer wijd te verspreiden. Er wordt ook geen onderscheidt gemaakt tussen hoofd- en kleine letters, maar om het wat ordelijk te houden raden we aan één van de twee te kiezen.

2.3 Een nieuwe lijn

Als we temidden de paragraaf toch een nieuwe lijn willen beginnen, gebruiken we de

-tag, wat staat voor "break", bv.

<HTML>

<BODY>

Nu wil ik echt wel een nieuwe

lijn.</P>

</BODY>

</HTML>

Dit stelt je dus in staat om maar één keer de

-tag te gebruiken in je heel je document en zelf je paragrafen af te bakenen door de

-tag.

2.4 Horizontale Lijn

Als je een deel tekst wil afsluiten, gebruik je de <HR>-tag voor een lijn na dit deel te zetten, bv.

<HTML>

<BODY>

Dit is het einde van het eerste deel,

<HR>Nu volgt het tweede deel.</P>

</BODY>

</HTML>

Merk op dat er voor de horizontale lijn (horizontal ruler) een

-tag staat, om de lijn wat meer te laten opvallen.

2.5 Kleuren

Afhankelijk van je browser krijg je nu alle tekst in het zwart op een grijze achtergrond, wat na een tijd ook gaat vervelen. Om deze instellingen te veranderen moeten we wat informatie in de <BODY>-tag bijsteken, bv.

<HTML>

<BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#0000FF ALINK=#00FF00

VLINK=#FF0000>

Zwarte tekst op een witte achtegrond.</P>

</BODY>

</HTML>

Als je dit bekijkt zal je inderdaad zien dat de tekst wit op zwart staat. Waarom? Daarvoor moet je weten hoe de kleuren gecodeerd staan.

R G B

# FF FF FF

Heel simpel eigenlijk. De eerste twee letters staan voor rood, dan geel, dan blauw. Ze hebben een bereik van 00 tot FF, wat de hexadecimale voorstelling is van 0 tot 255. Door te combineren kan je groen, paars, bruin enz. maken. Met wat experimenteren krijg je dit systeem al gauw onder de knie.

2.6 De <FONT>-tag

Als je echt wat variatie in je pagina's wil brengen, is de <FONT>-tag handig. Je kunt hierbij drie parameters opgeven, bv.

<HTML>

<BODY>

<FONT FACE="Arial, Helvetica" SIZE=6 COLOR=#FFFF00>

Hier staat dus tekst wat groter.</FONT></P>

</BODY>

</HTML>

De drie parameters in detail:

* FACE: Hiermee kan je het lettertype bepalen. Een lijst van alle lettertypes kan je vinden in je tekstverwerker. Let op: niet iedereen heeft dezelfde lettertypes geïnstalleerd! Meestal kan je alleen vertrouwen op Helvetica, Times en Courier. Door er twee of meer met een komma aan te duiden, geef je een alternatief op als het lettertype niet gevonden is. Als de voorbeeldcomputer dus geen Arial heeft, wordt overgeschakeld op Helvetica. Als dit ook niet bestaat, wordt het standaardlettertype gebruikt.

* SIZE: Hiermee duidt je de grote aan van de tekst. Door te experimenteren weet je ongeveer wat het resultaat zal zijn.

* COLOR: Hiermee kan je een andere kleur geven dan de standaardkleur aan een bepaald stuk tekst. Heel handig om iets op te laten vallen.

2.7 Tekeningen

Naast kleurtjes, onderlijningen en meer van dat fraais is het natuurlijk altijd leuk van je pagina's te illustreren met wat foto's! Hiervoor gebruiken we de <IMG>-tag, bv.

<HTML>

<BODY>

En dit is nu mijn lief:

lief.gif</P>

</BODY>

</HTML>

Het is dus eigenlijk heel simpel om foto's in te voegen. Je kan twee formaten gebruiken: GIF (.gif) of JPEG (.jpg), maar een algemene regel is ze niet door elkaar te gebruiken, dus als je voor .gif hebt gekozen, blijf daar dan ook bij. Als je de foto's wilt gebruiken zoals in het voorbeeld moeten ze in dezelfde folder staan. Wat ook altijd handig is, is de grote van de foto te vermelden zoals in het voorbeeld. De grootte van de foto kan je zien met elk fatsoenlijk foto-pakket zoals Adobe Photoshop. Als je andere afmetingen gebruikt dan de werkelijke, worden de tekeningen vervormd. (Wat soms leuke effecten kan geven.)

Je kan ook een tekening instellen als achtergrond. Hiervoor zet je bij de <BODY>-tag nog een extra parameter, namelijk BACKGROUND="backg.gif", bv.

<HTML>

<BODY BGCOLOR=#000000 TEXT=#FFFFFF LINK=#00FFFF ALINK=#FF00FF VLINK=#FFFF00

BACKGROUND="backg.gif">

Welkom op mij homepage.</P>

</BODY>

</HTML>

Noot: Hoewel de tekening eigenlijk over de achtegrondkleur gaat, is het toch altijd best ook een achtergrondkleur in te stellen voor het geval de surfer zijn tekeningen heeft uitstaan, waardoor je bv. witte tekst op een witte achtergrond zou kunnen krijgen.

3. Links

Als je veel informatie op Internet te zetten hebt, is het overzichterlijker van dit met verschillende paginaÂ’s te doen en een index als beginpagina te maken. Hiervoor gebruiken we links.

<HTML>

<HEAD><TITLE>Index</TITLE></HEAD>

<BODY>

Informatie over voetbal.</P>

Muziek, maestro!</P>

Zend mij een mailtje!</P>

</BODY>

</HTML>

Als je deze pagina bekijkt, zie je dat onder de tekst blauwe lijntjes staan. Dat wil zeggen dat je hier op kan klikken. (Als je dit nu doet, krijg j e een error omdat de pagina's waar naar verwezen wordt nog niet bestaan.) Deze links zijn gemaakt door de en -tags. Alles wat tussen deze tags staat wordt in het blauw weergegeven.

Je ziet ook dat er drie verschillende types HREF worden gebruikt. Het eerste is een link naar een eigen pagina, het tweede is een link naar een andere site en het derde is een link naar een e-mail adres.

Noot: Het is erg belangrijk dat de pagina's waar je naar verwijst bestaan. Zorg dus dat je hele site af is voor je 'm op Internet zet, anders krijg je heel wat gefrusteerde surfers op je dak.

3.1 Tekeningen als links

Je kan alles tussen de <A HREF> en </A> tags zetten, dus ook tekeningen, bv.

<HTML>

<BODY>

<A HREF="tolkien.html">

tolkien.gif</A></P>

</BODY>

</HTML>

Merk op dat er nu een extra parameter bij de tekening wordt opgegeven, namelijk BORDER. Dit duidt de dikte aan van de blauwe (afhankelijk van de ingestelde kleuren) rand rond de foto. (zodat je weet dat je daarop moet klikken) Bij 0 is er dus geen blauwe rand. (Wat een professioneler effect geeft.)

4. Tabellen

4.1 Inleiding

Voor cijfergegevens à la Excell in te voeren of nauwkeurigere opmaak te verkrijgen gebruik je in HTML tabellen. Een heel eenvoudig voorbeeld van een 3x3 matrix:

<HTML>

<BODY>

<TABLE BORDER=1>

<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>

<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>

<TR><TD>7</TD><TD>8</TD><TD>9</TD>>/TR>

</TABLE>

</BODY>

</HTML>

Zoals je ziet moet je niet op voorhand opgeven hoe groot je de matrix wilt. Dit gebeurt omdat je enkel opgeeft wanneer je met een nieuwe rij of cel begint. De tag <TR> zorgt voor een nieuwe rij, de tag <TD> zorgt voor een cel in die rij. Vergeet ook niet alles netjes af te sluiten.

4.2 Uitgebreide mogelijkheden

De verschillende rijen moeten niet hetzelfde aantal cellen bevatten, dit wil zeggen dat je heel wat kunt experimenteren om de juiste opmaak te bekomen. De <TABLE>-tag bevat dan ook heel wat extra opties om nog nauwkeuriger te kunnen werken.

* ALIGN: Dit duidt aan waar de table op de pagina moet komen. De mogelijke opties zijn: left/right/center

* BORDER: Dit geeft de dikte van de randen aan. Bij BORDER=0 (of als je gewoon BORDER) weglaat krijg je geen rand, wat handig is als je tabellen gebruikt voor de lay-out te verzorgen.

* WIDTH: De belangrijkste tag is waarschijnlijk WIDTH. Je kan hem op 2 manieren gebruiken:

o WIDTH="100%": Geeft de breedte aan ten op zichte van de breedte van het scherm. WIDTH="100%" is hiervan het bekendste voorbeeld, omdat je zo een tabel maakt die de volledige breedte van het scherm inneemt.

o WIDTH=50: Geeft de breedte aan in pixels. Dit is voor zeer nauwkeurige opmaak.

* HEIGHT: Hetzelfde als width, maar dan voor de hoogte. Hiermee kan je bv. iets verticaal centreren op je pagina, door alles in een table te zetten met HEIGHT="100%" en <TR VALIGN="MIDDLE"> (waarover zometeen meer).

* CELLSPACING: Duidt de ruimte aan tussen de cellen en de rand van de tabel. (in pixels) Ook weer voor nauwkeurige opmaak.

* CELLPADDING: Duidt de ruimte aan tussen de cellen onderling. (in pixels) Nauwkeurige opmaak.

* BGCOLOR: Om heel de tabel een andere achtergrond te geven dan de achtegrond van de pagina, gebruik je BGCOLOR. Voor de syntax, zie paragraaf 2.5: kleuren.

Dat was alles voor de TABLE-tag. In de tabel hebben we nog rijen en cellen. Hier volgen de belangrijkste parameters:

<TR>

* ALIGN: Dit duidt aan waar de rij in de tabel moet geplaatst worden. (left/right/center)

* VALIGN: Dit duidt ook aan waar de rij in de tabel moet geplaatst worden, maar dan verticaal. Opties zijn (top/middle/bottom/baseline)

* BGCOLOR: Om een hele rij dezelfde kleur te geven gebruik je BGCOLOR. Cfr 2.5: kleuren

<TD>

* ALIGN: zie TR

* COLSPAN: Zorgt ervoor dat je, zoals bij spreadsheet-programma's, kolommen kunt doorverbinden.Als je bijvoorbeeld een titel over drie kolommen data wilt "spannen", gebruik je COLSPAN=3.

* ROWSPAN: Net zoals ROWSPAN kan je hier ook doorverbinden, alleen verbind je nu rijen door. Een voorbeeld van COLSPAN en ROWSPAN volgt hieronder.

* NOWRAP: Als je wilt dat tekst op één lijn blijft, gebruik je NOWRAP om alle tekst bij elkaar te houden. Pas op met het gebruik van deze tag, omdat je heel lange kolommen zou kunnen krijgen.

* WIDTH: zie de TABLE-tag.

* BGCOLOR: Om een cel een achtegrondkleur te geven. Cfr 2.5: kleuren

* VALIGN: Om de tekst in een cel boven, beneden of in het midden te zetten. Denk bijvoorbeeld aan twee cellen naast elkaar, waarbij de ene volstaat met de tekst en de andere maar één lijntje bevat. Met VALIGN kan je de plaats van dit ene lijntje aanduiden. (VALIGN=top/middle/bottom/baseline)

Noot: Tabellen kunnen overal staan, zelfs in andere tabellen. Hierdoor kan je zeer complexe structuren maken.

5. Frames

5.1 Inleiding

Frames zijn een manier om data op het scherm te organiseren. Ze zorgen ervoor dat je je hoofdpagina kan opdelen in verschillende stukken, waarin je elk een apart document kunt zetten met andere opmaak, achtegrond enz. Hiervoor moet je enkel in het hoofddocument definiëren hoe de frames moeten geplaatst worden, en natuurlijk de frames zelf opvullen. Een voorbeeld met twee frames (drie bestanden).

index.htm

<HTML>

<HEAD>

<TITLE>Eenvoudig voorbeeld</TITLE>

</HEAD>

<FRAMESET ROWS="100,*" COLS="100%">

<FRAME SRC="top.htm">

<FRAME SRC="text.htm">

<NOFRAMES>

Sorry, uw browser ondersteund geen frames. Gebruik a.u.b. Netscape Navigator om deze pagina's te bekijken.</P>

</NOFRAMES>

</FRAMESET>

</HTML>

top.htm

<HTML>

<BODY BGCOLOR=#000000>

<P ALIGN=CENTER>titel.gif</P>

</BODY>

</HTML>

text.htm

<HTML>

<BODY BGCOLOR=#FFFFFF TEXT=#000000>

Welkom op mijn homepage!</P>

</BODY>

</HTML>

De pagina's top.htm en text.htm spreken voor zichzelf. Overlopen we index.htm even:

* <FRAMESET ROWS="100,*" COLS="100%">: Dit duidt het begin aan van de frames. Je geeft ook op hoeveel frames er zullen komen in deze frameset door de ROWS- en COLS-parameter. Het opgeven gebeurt zoals de WIDTH-parameter, dus ofwel met pixels ofwel in procenten. Als je meerdere frames onder of naast elkaar wil zetten, scheidt je de waarden met een komma. Omdat je niet weet hoe breed het venster zal zijn waarin de gebruiker je pagina bekijkt, gebruik je de asterisk om "de rest" aan te duiden. Bij de ROWS-parameter betekent dit dus: Maak de eerste frame 100 pixels hoog, en gebruik de rest voor de tweede frame. Als je enkel ROWS opgeeft is de COLS-parameter overbodig.

* <FRAME SRC="top.htm">: In de code definieer je welke bestanden moeten worden gebruikt om de frames op te vullen. De frames komen in dezelfde volgorde als je ze gedifineerd hebt, dus top.htm wordt 100 pixels hoog, en text.htm krijgt de rest.

* <NOFRAMES>: Oude browsers kunnen nog niet met frames werken. Om ervoor te zorgen dat ze geen lege pagina krijgen, gebruik je de NOFRAMES-tag. Hetgeen hierin staat wordt getoont aan de gebruikers met een frame-loze browser. Het is een goede gewoonte om een extra set met pagina's te maken voor deze surfers.

5.2 Uitgebreide mogelijkheden

Als je weet dat je, net zoals bij tabellen, frames in frames kan maken, begrijp je dat de mogelijkheden legio zijn. Hieronder volgt een uitgebreider voorbeeld.

<HTML>

<HEAD><TITLE>De afschuwelijk volle frame-pagina!</TITLE></HEAD>

<FRAMESET COLS="40%,*,*" FRAMEBORDER=0 FRAMESPACING=2>

<FRAME SRC="nav.htm" NORESIZE FRAMEBORDER=1 SCROLLING=AUTO>

<FRAMESET ROWS="200,*" FRAMEBORDER=0 FRAMESPACING=0>

<FRAME SRC="top.htm" NORESIZE SCROLLING=NO>

<FRAME SRC="tekst.htm" SCROLLING=YES NAME="tekst">

</FRAMESET>

<FRAME SRC="knoppen.htm" NORESIZE SCROLLING=NO>

<NOFRAMES>

Welkom op mijn homepage! Deze pagina werkt het beste met frames, maar <A HREF="noframes.htm>hier</A> is een versie zonder.

</NOFRAMES>

</FRAMESET>

</HTML>

Dit voorbeeld gebruikt nested frames, wat zoveel wilt zeggen dat de middelste frame hier terug een frameset is. Hierdoor wordt de middelste frame terug opgedeeld in vakken, wat handig kan zijn als je een titel, knoppenbalk en tekstvak wilt maken.

Uitleg van de code:

* <FRAMESET COLS="40%,*,*" FRAMEBORDER=0 FRAMESPACING=2>: COLS="40%,*,*" verdeeld 40% naar de linkse kolom, en de rest (60%) wordt onderling verdeeld tussen de middenste en de rechtse kolom. (elk dus 60/2 = 30%) FRAMEBORDER=0 geeft aan dat er geen rand tussen de frames moet staan. Er zijn maar twee opties, 0 of 1, dus je kan de dikte niet instellen. FRAMESPACING=2 geeft de afstand in pixels aan tussen twee frames. Dit is vooral handig als je geen rand tussen de frames geeft, anders "plakt" de tekst van de twee frames aan elkaar.

* <FRAME SRC="nav.htm" NORESIZE FRAMEBORDER=1 SCROLLING=AUTO>: NORESIZE geeft aan dat je de breedte van de kolom niet kan verstellen. FRAMEBORDER=1 override de instellingen van de FRAMESET, dwz. voor deze frame wordt er wel een rand getoont. SCROLLING=AUTO duidt aan dat er enkel scrollbalken worden getoond wanneer het nodig is. (mogelijke opties zijn NO: altijd uit, YES: altijd aan, AUTO: enkel indien nodig)

5.3 De TARGET-parameter

In het vorige voorbeeld gebruikten we

<FRAME SRC="tekst.htm" SCROLLING=YES NAME="tekst">

De name-parameter vraagt voor wat extra uitleg. Het wordt gebruikt om ervoor te zorgen dat je die frame kan gebruiken als TARGET. Bijvoorbeeld: ik maak twee frames met links de knoppen en rechts de tekst. Wanneer ik op een knop links klik wil ik de tekst rechts. Mocht ik dit gewoon als <A HREF="tekst2.htm"> schrijven zou de linkse frame worden vervangen met tekst, wat niet de bedoeling is. Gebruik daarom <A HREF="tekst2.htm" TARGET="tekst"> om aan te duiden in welke frame de tekst moet komen.

TARGET heeft nog een aantal extra opties:

* TARGET="_blank": Open de link in een nieuw venster.

* TARGET="_self": Open de link in het huidige frame.

* TARGET="_parent": Wordt gebruikt bij nested frames. Bij het voorbeeld uit 5.2 zou dit willen zeggen dat de middelste frame in z'n geheel wordt vervangen door de link.

* TARGET="_top": Het hele venster wordt gebruikt om de link weer te geven.

5.4 Nuttige tips

Als je de ROWS- en COLS-parameter tesamen gebruikt, krijgt de COLS-parameter voorrang. Voorbeeld:

<HTML>

<FRAMESET ROWS="50%,*" COLS="33%,*,*">

<FRAME SRC="frame1.htm">

<FRAME SRC="frame2.htm">

<FRAME SRC="frame3.htm">

<FRAME SRC="frame4.htm">

<FRAME SRC="frame5.htm">

<FRAME SRC="frame6.htm">

</FRAMESET>

</HTML>

De lay-out zou dan als volgt zijn:

Frame 1 Frame 2 Frame 3

Frame 4 Frame 5 Frame 6

Bij het maken van een frameset is het ook heel belangrijk dat de pagina niets anders bevat dan de <HEAD> en de <FRAMESET> -tags. Als je meer in de pagina invoegt, negeert de browser de <FRAMESET>-tag.

Bij goede reacties komt er nog een cursus javascript!!!

 Delen
Ga naar topic overzicht
Logo

OVER ONS

PC Helpforum helpt GRATIS computergebruikers sinds juli 2006. Ons team geeft via het forum professioneel antwoord op uw vragen en probeert uw pc problemen zo snel mogelijk op te lossen. Word lid vandaag, plaats je vraag online en het PC Helpforum-team helpt u graag verder!

SITEMAP

×
×
  • Nieuwe aanmaken...

Belangrijke informatie

We hebben cookies geplaatst op je toestel om deze website voor jou beter te kunnen maken. Je kunt de cookie instellingen aanpassen, anders gaan we er van uit dat het goed is om verder te gaan.