HTML is de programmeertaal van Internet. Kennis hier van is echt nodig
wanneer je echt goed een homepage wilt maken. Het is het begin van Javascript,
DHTML, .... HTML maakt gebruik van tags. Tags zijn de codes die je gebruikt
om je homepage te schrijven. Een "code" maakt bijna altijd gebruik van 2 tags.
Om te openen <...>; om te sluiten </...>
voorbeeld: <title>www.websitehulp.f2s.com: voor een
complete homepage</title>
Maar die tags kan je ook uitbreiden:
voorbeeld: <body color="#000000">hier komt
iets</body>
De tags horen ingebed te worden, anders werken ze niet.
voorbeeld: <head>
<title>www.websitehulp.f2s.com: voor een complete
homepage</title> </head>
Je begint iedere homepage met het definiėren van HTML. Dit doen we door
gebruik te maken met de tag <html> en </html>. Deze komen bovenaan
en onderaan iedere pagina die je maakt. Vervolgens deel je die pagina in 2
blokken. Zogenoemd head (<head> en </head>) en body (<body> en
</body>) In de head komt de titel en wat gegevens die niet zichtbaar zijn
in je homepage en in de body komt je pagina te staan. Tussen <title> en
</title> komt de titel van je homepage. Deze verschijnt helemaal boven in.
Alles wat je ziet komt dus tussen <body> en </body>.
voorbeeld: <html> <head>
<title>www.websitehulp.f2s.com: voor een complete
homepage</title> </head> <body> Hier komt je
pagina </body> </html>
Je Browser zoekt, wanneer je een adres (url) ingetijpt, automatisch naar
index.html. De pagina waarmee je begint heet daarom altijd index.html. Je typ
dus bv. www.websitehulp.f2s.com in. Hierna gaat je browser zoeken naar
www.www.websitehulp.f2s.com/index.html. Overigens kom je ook nog wel eens htm
(bv.index.htm) tegen. Dit heeft te maken met oude besturingssystemen. Deze
kunnen maar een extentie van 3 letters aan. (3 letters achter de punt,
index.htm)
Hoofdstuk 02: Tekst
Voor we verder gaan wil ik eerst even uitleggen hoe je de dingen die ik
vertel zelf kunt oefenen. De voorbeelden kan je overnemen in notepad. Tenzij
anders vermeld werk je nu dus tussen <body> en </body>. Dit gaat als
volgt:
Open Notepad (kladblok) Deze staat bij bureauaccessoires, onder start.
Copieėr het onderstaande voorbeeld.
Tenzij anders vermeld kan je nu oefenen tussen de body-tags. Probeer daar
dus de dingen uit die ik vertel.
Sla het hele zooitje op al bv. test.html
Je laat nu kladblok open staan, maar je opent ook test.html in je browser.
(gewoon klikken op test.html op de plaats waar je hem hebt opgeslagen)
Nu zie je dus wat je gedaan hebt.
Wanneer je weer wat probeert is het handig: Wanneer je klaar bent met de
verandering sla je hem op en klik je in je browser op vernieuwen. Als het goed
is zie je nu dus wat je veranders hebt
voorbeeld: <html> <head> <title>titel
van je homepage</title> </head> <body> hier kan je
dus oefenen </body> </html>
Als het goed is snap je nu hoe HTML werkt. Met deze kennis kunnen we nu
verder om onze homepage te maken. In principe is de rest nu alleen nog kennis
van de verschillende tags. Er zijn nogal wat verschillende tags. Je hoeft ze
niet allemaal te kennen. De meeste gebruik je namelijk niet. In de komende
hoofdstukken komen de mogelijkheden, soorten tags en gebruik ervan uitgebreid
aan de orde. Tekst is het makkelijkste van HTML. Alles wat je tussen
<body> en </body> zet zal letterlijk verschijnen zolang het maar
geen bijzondere tekens zijn of op de tags lijken. Bekijk maar eens het
bovenstaande voorbeeld. Dit levert een wit scherm op met de tekst "hier kan je
dus oefenen" Hoe ik het dan klaar krijg om bijzondere tekens te gebuiken? In
plaats van < in te drukken gebruik ik een bepaalde code voor dat teken. Zo is
het ook mogenlijk om Ė, ä, ģ enz., maar ook ½, µ, ®, enz. te gebruiken.
Ieder bijzonder teken begint met &, dan wat tekens, en wordt afgesloten
door een ;. (& + ... + ;). Zo levert & (& + amp +;) &,
< levert <, > levert >, ½ levert ½, ¾
levert ¾ enz. Een bijzondere letter als č wordt gemaakt door een & + e +
grave + ; een é wordt gemaakt door een & + e + acute + ; een ź wordt gemaakt
door een & + e + circ + ; een ė wordt gemaakt door een & + euml + ;
Vervang de "e" door een andere letter en je kan ook andere letters een teken
geven. Dan iets anders nl. opmaak van tekst Er bestaat ook nog de
mogenlijkheid om tekst vet, schuin af te drukken of door te
halen, anders wel zomaar ergens schrijfmachineschrift aan te brengen
. Hoe?? Met <b> en </b> maak je tekst vet; met <i> en
</i> typ je schuin; tekst doorhalen kan met <s> en </s> en
schrijfmachineschrift is mogenlijk door <tt> en </tt>
voorbeeld: De mogenlijkheid bestaat om tekst
<b>vet</b>, <i>schuin</i> af te drukken of <s>door
te halen</s>, anders wel <tt> zomaar ergens schrijfmachineschrift
aan te brengen </tt>
Lettergrootte kan op 2 manieren. Door de fonttag en door <H?> Daarin
heb je 6 lettergrootte: 1 t/m 6. 1 is groot en 6 is klein. Let op dat dit een
koptekst is. Automatisch kost dit extra ruimte en begint automatisch op een
nieuwe regel.
voorbeeld: <h1>h1: erg groot</h1> <h2>h2:
groot</h2> <h3>h3: normaal, alleen wat vetter</h3>
<h4>h4: iets kleiner</h4> <h5>h5: klein</h5>
<h6>h6: erg klein</h6>
Wat betreft de fonttag daar kom ik op terug in een volgend hoofdstuk. Tot
slot van dit hoofdstuk nog <br> en <p> <br> levert je een
nieuwe regel op. Zeg maar "enter" wanneer je in Word werkt. En <p> levert
je een blanke regel op. Probeer maar uit!
Voorbeeld: De volgende zin begint op een nieuwe regel.
<br>neem maar eens over dan zie je het resultaat. <p>Nu
staat er een blanke regel tussen.
Wanneer je op enter drukt voor een nieuwe regel zal deze gewoon aansluiten
aan de volgende regel. De regel verspringt wanneer je regel vol is. Net als in
Word!
Hoofdstuk 03: De fonttag en lijsten
naast <H?> kan je ook de lettergrootte bepalen met de fonttag.
(<font> en </font>) Maar met de fonttag kan je nog meer. Hiermee kan
je over de hele pagina, je lettergrootte, type of kleur bepalen. Je kunt zeggen
<H?> alleen een koptekst is, en met de fonttag bepaal je hoe de letters op
je homepage zet. Om het resultaat over de hele homepage te hebben zet je de
fonttag tussen de bodytag.
Voorbeeld: <body> <font face="technical" size="4"
color="red"> Hier je homepage </font> </body>
Wil je nu alleen een klein stukje tekst veranderen dan plaats je de fonttag
tussen je tekst. Net voor de plaats waar je wilt beginnen en net achter de
plaats waar je wilt stoppen.
Voorbeeld: Met de fonttag is het mogenlijk alleen <font
color="red">dit stukje</font> rood te kleuren. Probeer maar eens!
In het eerste voorbeeld van dit hoofdstuk zie je de termen size, color en
face. Ze zullen wel duidelijk zijn. Size is de grootte. Net als bij <h?>,
alleen nu 1 t/m 7. Color is de kleur en face het lettertype. Nu kan je
natuurlijk een mooi lettertype uitzoeken, maar dit lettertype moet ook aanwezig
zijn de bezoeker van je homepage. Wanneer dit niet het geval is kiest je browser
het standaard lettertype van je computer. Dit is ook het geval wanneer je geen
lettertype aangeeft. Tot slot gaan we het nog hebben over lijsten. Wanneer
we dit doorgewerkt hebben gaan we het leuk maken. Je hebt 3 soorten lijsten:
De geordende lijst, de ongeordende lijst en de commentaarlijst. Ze zijn niet
echt moeilijk te maken. en ze werken eigenlijk het zelfde.
De ongeordende lijst
Jan
Piet
Sjaak
De geordende lijst
Jan
Piet
Sjaak
Deze werken zowat het zelfde. Bekijk de voorbeelden maar
eens hoe ik dat deed.
Dan heb je nog de commentaarlijsten. Ik kon ze zelden tegen op internet, maar
goed: Misschien komt het ooit van pas. Je opent hem met <dl> en sluit hem
met </dl>. Een item invoegen gebeurt door <dt>; Je beschrijving maak
je met <dd>
Dit is een Commentaallijst.
Item 1
Omschrijving 1
Item 2
Omschrijving 2
Voorbeeld: Dit is een Commentaallijst. <dl>
<dt>Item 1 <dd>Omschrijving 1 <dt>Item 2
<dd>Omschrijving 2 </dl>
Je hebt nu alles wat je nodig hebt gehad tekst in een homepage te plaatsen en
op te maken. Je kan nu eigenlijk al een homepage maken, maar zonder links,
plaatjes of wat kleur is het een beetje saai. Daarom gaan we het nu leuk maken!
Het volgende hoofdstuk gaan we spelen met kleuren, en de hoofdstukken daarna
gaan we zorgen dat je homepage interactief wordt en hoe je plaatjes op je
homepage kan zetten. Tegen het einde van deze cursus gaan we je vertellen hoe je
een echte homepage maakt. We gaan het dan hebben over frames en tabellen.
Hoofdstuk 04: De body-tag
De bodytag is de belangrijkste regel van je homepage. Hierin bepaal je
eigenlijk het hele uiterlijk van je homepage. Daar worden alle kleuren bepaald.
Een kleur wordt opgebouwd uit 3 standaard kleuren: rood, groen en blauw. De
hoeveelheid kleur geef je aan met 2 hexadecimale getallen. Hexadecimaal telt van
0 t/m 9 en van a t/m f. Tel maar na: hexadecimaal betekent 16-tallig, en met 0
t/m 9 en a t/m f heb je 16 getallen. Zo gezegd bestaat een kleur uit 3
"subkleuren" en geven we iedere "subkleur" aan met 2 hexadecimale getallen. Je
hebt dus 6 getallen voor een kleur te definiėren. (bv. CCFF00: geel/groen)
De grootte van het getal geeft aan de hoeveelheid kleur. Zo is 00 dus geen
rood, groen of blauw en FF dus veel rood, groen of blauw. (Tip: ffffff is wit,
000000 is zwart) Je kan dus kiezen uit 256 tinten rood, groen of blauw. (16 ×
16) Een kleur bestaat uit 3 subkleuren, dus heb je keuze uit een slordige 16
miljoen kleuren! (256×256×256) De hoeveelheid rood in de kleur ACACAC (licht
grijs) zal net zoveel lijken als in de kleur ADACAC. daarom werken we meestal
met 6 tinten rood, groen of blauw. te weten 00, 33, 66, 99, CC en FF. Je hebt
dan keuze uit 6×6×6=216 kleuren, en dat zijn er genoeg. En op de ene pc komt die
kleur (uit het 216 kleurenpallet) nog anders over dan op de andere pc. Nog
even dit: een hexadecimale kleur geef je aan met # en dan het "nummer". Dus
#FFFFFF of #000066 Nu je dit weet gaan we verder met de bodytag. Met behulp
van het onderstaande voorbeeld leg ik uit wat je kan.
Voorbeeld: <body bgcolor="#000066" text="#FFFFCC"
link="#CCCCCC" vlink="#66CCFF" alink="#FF0000"> Hier je homepage
</body>
Je bepaald de achergrond kleur met: bgcolor (<body bgcolor="#000066">)
Wil je een plaatje als achergrond kan dit ook. I.p.v. bgcolor gebruik je dan
background + plaats en naam van het plaatje. De plaats is alleen van belang als
je in je homepage gebruik maakt van directory's (mappen). (<body
background="achergrond01.jpg"> <body
background="plaatjes/achergrond01.jpg">) text spreekt voor zich zelf. Dit
is natuurlijk de textkleur, en link is de kleur van de link. (<body
text="#FFFFCC" link="#CCCCCC">) Dan heb je vlink. Visited Link ofwel een link
die je al eens eerder hebt gehad, en je hebt alink, Acive Link: De link waar je
opstaat. Vul je geen bgcolor, textcolor enz. in dan gebruikt je brouwser de
standaard kleuren. Wit als achtergrond, zwart als tekstkleur, blauw als
linkkleur, alink is rood en vlink is paars. In plaats van de kleur
hexadecimaal aan te geven kan je hem ook typen. (<body bgcolor="blue">)
Waarom ik dan dat ingewikkelde verhaal toch vertel? Na, als je de kleur (in het
engels) gewoon intypt heb je nog minder keuze dan wanneer je bij de HEMA een
kleurdoos van een knaak koopt. En klant is koning! Wanneer de kleuren te fel
zijn, of ze vloeken zijn je bezoekers zo weer weg (en komen ze niet meer terug
waarschijnlijk).
Nog een stukje bodytag: Geluid op je homepage: <body
bgsound="geluid.mid"> That's all. Makkelijk he? In plaats van een midi-file,
kan je ook andere geluidsbestanden gebruiken. Maar pas op!! Persoonlijk heb ik
een hekel aan homepages die een irritant getinkel op hun homepage hebben. (en ik
ben echt niet de enige) Ik heb ook ooit geluid op m'n homepage gehad. Erg leuk,
maar dan voor even. 't Is eigenlijk zo: Liever niet dan wel. En als je het wel
doet: zorg dan dat je de muziek kan uitzetten (met een scriptje of zo)
Voorbeeld: <body bgsound="muziekje.mid"> Hier je
homepage </body>
Links: Dit is een link Hoe we dat doen? Eerst de makkelijkste: Een
link naar een andere pagina op je homepage. De code:<a
href="html05.html">Dit is een link</a>. Tussen <a
href="????.html> en </a> komt de titel of de tekst waar op je moet
klikken. (natuurlijk kan dit ook weer ergens midden in een tekst)
Voorbeeld: <a href="html05.html">Klik hier</a> voor
hoofdstuk 5
Dan een link naar een andere homepage. Das precies het zelfde, alleen de naam
veranderd. In plaats van html05.html krijg je nu bv. http://beam.to/mathie. Let
op de http://, anders werkt het niet.
Voorbeeld: <a href="http://beam.to/mathie">Klik
hier</a> Mathie's Nieuwe Homepage
Je kunt je pagina ook in een nieuw venster laten openen. (targetten) Dit
gebeurt met target. (zie voorbeeld onder)
Voorbeeld: <a href="http://www.websitehulp.f2s.com"
target="self">Klik hier</a> Mathie's Nieuwe Homepage
Target zal je ook nodig hebben bij frames, daar komen we nog op terug. Niet
echt moeilijk, wel? Email is ook weer bijna het zelfde. Kijk maar!
Natuurlijk is targetten niet nodig.
Voorbeeld: <a
href="mailto:jemailadres.nl">Email</a> kan ook
Als voorlaatste mogenlijk, een download. Das niets anders dan een link naar
een voor internet onbekend bestand. (wat moeilijk uitgelegd, kijk maar naar het
voorbeeld, dan zie je hoe handig het is)
Voorbeeld: <a href="bestand.zip">downloadje</a> is
handig.
Iets moeilijker is een link naar een stukje tekst. Eerst "gooi" je ergens een
anker neer. Das een groep woordjes die je een naam geeft. Dit gebeurt met <a
name="appels">. Het einde van dat stukje moet je weer aangeven met
</a>. Je kan naar dat stukje tekst door achter de link een # te zetten met
de naam naar dat stukje. <a
href="html05.html#woord">naam/omschrijving</a> klik hier
en je gaat hele maal naar boven
Voorbeeld: <a name="anker">Eerst ergens een anker
neergooien</a>
<a href="pagina.html#anker">hier de link naar het anker</a>
Klik nu op de link en je gaat naar het stukje geselecteerde tekst dat tussen
<a name="anker"> en </a>
Let op: Vergeet de spaties niet wanneer je een link zet. dusnietzo!!
Zelf ff proberen! Straks in dit hoofdstuk gaan we voor de eerste keer
"toveren" met HTML. Eerst nog de plaatjes. Een plaatje geef je aan met img
src. (<img src="plaatje.gif">) Meestal gebruiken we een gif-file.
Achtergronden zijn meestal *.jpg. (*.bmp wordt weinig gebruikt omdat deze vrij
groot zijn) Natuurlijk kan je hier alle plaatjesbestanden gebruiken die we
willen. Net als een achtergrondplaatje in de body tag geld hier dat wanneer deze
in een map staat je dit aan moet geven, anders niet. (<body
background="plaatjes/plaatje.gif.jpg">) Met het volgende voorbeeld gaan we
kijken wat we kunnen:
Img src="plaatje.gif" is nu wel duidelijk. Daar geven we het plaatje aan. Met
align="right" geven we de positie van het plaatje aan. Nu zou het plaatje aan de
rechter kant staan. Als je in plaats van right, left invult komt hij aan de
linker kant. Met middle komt hij naar het midden. Dan alt="mooi plaatje" Hiermee
geven we een tekst aan die je bij het plaatje wilt. Wanneer je op het plaatje
gaat staan verschijnt die tekst. Tot slot nog width="120" en height="120". Dit
is natuurlijk de breedte en de hoogte van het plaatje. Deze geven we op 2
manieren aan. De eerste manier, net als hier in pixels. De 2e manier in in
procenten. Dit gaat als volgd: width="50%". je plaatst alleen een % achter het
getal. Als we dit kennen gaan we toveren. Een aanklikbaar plaatje dat naar
een subpagina gaat. Als je dit snapt snap je het hele eieren eten. 't is
eigenlijk niet moeilijk. Kijk maar gewoon naar het voorbeeld, dan is het
duidelijk.
Niet echt moeilijk, wel? Maar nu zal je last krijgen van een blauwe rand.
Immers het is een link. Dit lossen we op door de border te verkleinen. (border
is die gekleurde rand) Een border geven we weer aan in pixels. Hoe groot gaan we
die border maken? Juist, 0 pixels. Bekijk maar eens het voorbeeld.
Ik ga nu niet meer uitleggen dat de extra optie's (als alt-tekts, grootte,
targetten, enz) je hierbij ook kan gebruiken. Alleen een ding nog: behalve met
align="middle" kan je ook de centertags gebruiken. <center> en
</center> Dit geld niet alleen voor plaatjes, maar ook voor tekst,
tekstlinks, enz. <
Voorbeeld: <center>Deze tekst wordt nu naar het midden
geplaatst.</center> Net als het plaatje. <center><img
src="plaatje.gif"></center>
Heb je hoofdstuk 01 t/m 05 begrepen dan kan je verder met hoofdstuk 06. Vanaf
daar gaan we het wat moeilijker maken. Eerst formulieren, dan tabellen en als
klap op de vuurpijl nog frames. Wanneer we dit hebben doorgewerkt ben je zover
dat je een eigen homepage kan maken. Is alles nog niet (echt) duidelijk,
begin je gewoon weer vooraan. Je kan ook alles wat verteld is zelf gaan
proberen. Das misschien nog wel beter!
Hoofdstuk 06: Formulieren
Goed, en dan gaan we het nu wat lastiger maken. Formulieren gebruik je om
informatie te verzamelen, om die weer ergens anders te gebruiken. Bijvoorbeeld:
Je laat wat mensen wat vragen invullen en die antwoorden ga je weer gebruiken om
de kleur van je homepage in te stellen. Zoiets zou kunnen, samen met gebruik van
Javascript. Hier maken we gebruik van formulieren als feedback. (we gaan ze
emailen) Verder komen hier de opties die je hebt aan de orde. Allereerst
gaan we een formulier aanmaken. Dit gebeurt met <form> en afsluiten met
</form> In de formtag geven we meteen aan dat we het hebben over een
emailform. Wat moet er gebeuren. Het moet per email verzonden worden naar jouw
emailadres. Het moet verzonden worden per email: <form method="post" naar
jouw emailades: action="mailto:webmaster@websitehulp.f2s.com". Om te zorgen dat
je het emailtje leesbaar is voegen we ectype="text/plain" in.
Zo, das het eerste stukje. We gaan nu de mogenlijkheden die je hebt bekijken.
De onderstaande mogenlijkheden werken ook zonder de formtag, alleen je hebt er
dan niet echt veel aan. (immers de gegevens worden niet verwerkt) Daarom zetten
we alle voorbeelden tussen <form> en </form> (en natuurlijk staan
die gewoon in de body) Je naam:
Hoe we dat doen? Kijk naar het voorbeeld.
met type="text" om aan te geven dat het een tekstveld is. name="naam" hier
komt de naam dat je het veld geeft te staan. Het is de naam die verschijnt
wanneer iemand jouw een mailtje stuurt met je mailform. Dan size="20", die is
voor de grootte (20 tekens) en maxlength="30". Das de maximale grootte van een
tekstveld (maximaal 30 tekens). Tot slot value="tekst" tovert natuurlijk tekst
in je vakje. Keuzerondjes. Je kan maar kiezen uit 1 antwoord. Het is ochtend Het is middag Het is
avond Het is nacht
Voorbeeld: <br><input type="radio" name="antw"
value="a">Het is ochtend <br><input type="radio" name="antw"
value="b">Het is middag <br><input type="radio" name="antw"
value="c">Het is avond <br><input type="radio" name="antw"
value="d">Het is nacht
Een keuzerondje geven we aan met radio. (input type="radio") En value is voor
jezelf, net als name verschijnt dit in je emailtje. Merk op dat name overal het
zelfde is. Dit om aan te geven dat het om maar een vraag gaat. Hierdoor komt het
dat je maar een rondje per keer kan aangeven. Een checkbox werkt het zelfde,
alleen nu kan je wel meerdere mogenlijkheden kiezen: Ik lust graag
Friet Bier Fruit
Een checkbox geef je aan met: input type="checkbox". Zoals al gezegd dit is
het zelfde als een radio button. Hier bijgevoegd heb ik checked. Hiermee geef je
aan welke van te voren gemarkeerd is. (dit kan ook bij de radio button) De
laatse input type die we hier gaan behandelen zijn de knoppen. Je hebt er
standaard eentje nodig om te verzenden en eentje om je formuliertje te resetten
(leegmaken om opnieuw gegevens te kunnen invoeren) is ook niet echt mis.
Input type="reset" voor de resetbutton, input type="submit" voor de
verzendbutton. En met value geven we de titel van de knop aan. Goed, wat
meer speelgoed. Een Keuzelijst maken.
Zoals je merkt geven we een keuzelijst aan met <select> en
</select> Tussen <option> en </option> plaatsen we dus de
mogenlijkheden die je geeft. Dit zijn er zo veel als je zelf wilt.
Dit werkt het zelfde. Het enige wat er is bijgekomen is de tag multiple
size="3" (size is in aantal regels) Kijk maar eens bij het voorbeeld!
Name staat voor de naam wat je het beestje geeft. Rows staat voor het aantal
rijen en cols voor aantal kolommen. Hoe je er tekst ik krijgt? Alles wat je
tussen <textarea> en </textarea> gooit komt letterlijk in je
tekstvak te staan. Tot slot voor de duidelijkheid nog een voorbeeld van een
formulier. Kijk maar eens of je snapt hoe hij in elkaar zit. Hij werkt echt!
Formulier
Voorbeeld: <p>Formulier <form method="post"
action="mailto:webmaster@websitehulp.f2s.com" enctype="text/plain">
<br>Je naam: <br><input type="text" name="naam" size="56"
maxlength="168"> <br>Je emailadres: <br><input
type="text" name="email" size="56" maxlength="168"> <br>Je
homepage-adres: <br><input type="text" name="url" size="56"
maxlength="168" value="http://"> <p>De kwaliteit van de homepage
is: <br><input type="radio" name="kwaliteit" value="goed"
checked> goed <br><input type="radio" name="kwaliteit"
value="redelijk"> redelijk <br><input type="radio"
name="kwaliteit" value="matig"> matig <br><input type="radio"
name="kwaliteit" value="slecht"> slecht <p>De cursus is:
<br><input type="radio" name="moeilijkheid" value="makkelijk"
checked> makkelijk te volgen <br><input type="radio"
name="moeilijkheid" value="redelijk"> goed te volgen <br><input
type="radio" name="moeilijkheid" value="moeilijk"> niet te volgen
<p>Hoe kwam je op deze homepage: <br><input
type="checkbox" name="target" value="gelezen"> gelezen in een ezine
<br><input type="checkbox" name="target" value="vrienden"> tip
van vrienden <br><input type="checkbox" name="target"
value="banner"> via een banner <br><input type="checkbox"
name="target" value="zoekmachine"> door een zoekmachine
<br><input type="checkbox" name="target" value="naam"> door een
tekstlink/vernoeming op een andere site <p>Wat mis je op deze site of
wat kan er beter: <br><<textarea name="correctie" rows="6"
cols="84"> </textarea> <p>Opmerkingen:
<br><textarea name="correctie" rows="6" cols="56">
</textarea> <p><input type="submit" value="Verzenden">
<input type="reset" value="Herstellen">
Hoofdstuk 07: Tabellen
Na formulieren nog tabellen. Dit zou de eerste manier kunnen zijn om een
homepage op te zetten. Je zet dan in zo'n tabel wat informatie en plaatjes; al
wat je kwijt wil. Ergens in een ander vakje van de tabel een menu, of iets
waarmee we door je homepage kunnen crossen, en klaar is kees. (wat handig
gezegd) Een voorbeeld is Startpagina: zij gebruiken waarschijnlijk ook tabellen. Een
andere vorm om een homepage op te zetten is frames. Mijn homepage werkt met
frames. (dit heet frame-georiėnteerd) de meeste homepage maken hier gebruik van.
Maar daar gaan we het over hebben in hoofdstuk 8. Nu eerst tabellen zelf. We
gaan het hebben over hoe je ze opzet en hoe je ze kan opmaken. Iedereen die
weet wel hoe een tabel is opgebouwd. Het zijn een hoop vakjes langs elkaar en
onder elkaar. Eén zo'n vakje heet een veld. Een aantal velden onder elkaar heet
een kolom en een aantal velden langs elkaar heer een rij. Een tabel geven we
aan met de tag <table> en het einde van een tabel met </table> en
net als bij plaatjes kunnen we de rand (border) aanpassen met border="??".
De tabellen die we maken worden opgebouwd van boven naar beneden, dus ze
werken met rijen. Een rij geven we aan met <tr> en </tr>. Een veld
geven de aan met <td> </td> (table row en table data, ofwel een rij
en een veld). Een voorbeeld van een eenvoudige tabel met hoe we dat deden staat
hier onder. Hiermee kennen we al het principe van een tabel.
We gaan een klein beetje vaart maken. Aan de hand van het bovenstaande
voorbeeld gaan we de mogenlijkheden van de vorm van een tabel bekijken.
<th> en </th>(table header) Ofwel de titels die je de tabel
meegeeft. In plaats van <b> gebruiken we hier dus <th>. <b>
werkt natuurlijk ook. Dan width en height. Deze hebben we al eens gezien en
werken hier dus ook. Je kan ze op de hele tabel gebruiken, alleen op een veld of
op een hele rij of hele kolom. Dan nog rowspan. Hiermee maak je die cel met
abc1, en met colspan cel a2. Dit moet je zelf even proberen, dan weet je precies
wat ze doen. Het getal achter colspan of rowspan staat voor het aantal cellen.
(?? cellen horizontaal of ?? cellen verticaal) Tot slot nog cellspacing en
cellpadding. Als eerste cellspacing. Dit levert een grote(re) tussenruimte.
Een andere methode voor het maken van een homepage is met frames. Dit is de
meest gebruikte methode. Het grote voordeel bij gebruik van frames is dat je je
homepage overzichtelijk houd. "Hier een menu, daar de banners en ergens anders
de tekst." Wat je doet is je werkruimte verdelen in vakken, en in die vakken
komt dan alles wat je kwijt wilt. Hoe doen we dat? In plaats van het
welkomstwoord vertellen we in de index (index.html) dat we de homepage in vakken
gaan verdelen. Elk vak geven we een naam. Vervolgens laden we in elk vak de je
pagina. Een frame geven we aan met frameset. (<frameset> en
</frameset>) Deze komt in de plaats van de bodytag.
Dit klopt ook want alles wat we tussen de bodytags zetten zie je op je
pagina. Nu maken we alleen een masker. We werken met frames altijd van groot
naar klein. Eerst heb je maar een venster. Dat venster verdelen we in 2 frames.
Die 2 frames kunnen we weer verdelen in 2 frames (4 in totaal dus). En ga zo
maar door. Verder werken we steeds alleen in rijen (rows) of kolommen (cols).
Aan de hand van het onderstaande voorbeeld wordt het wel duidelijk.
Ieder frame geven we aan met frame (<frame) We geven het beestje een
naampje (name="frameA") en zeggen wat we er als eerste in laden
(src="a.html">) Hoe komt het nu dat ze langs elkaar staan? Dit komt door het
commando cols achter frameset. (<frameset cols="200,* border="0">) De
grootte van de kolommen geven we aan achter cols (cols="200,*) 200,* wil zeggen:
de eerste kolom is 200 pixels breed en de tweede kolom de rest. Staat er dus
200,500 dan is de tweede colom dus 500 pixels. Ook hier kunnen we in procenten
werken. (ja, en heb je 3 kokommen zal er natuurlijk een derde getal achter
komen). Nu gaan we de eerste kolom verdelen in 2 rijen.
Scrolling="no" betekent dat je de pagina niet kan scrollen. (die schuifbalk
links en/of onder wanneer een pagina niet past). Vul je "yes" in krijg je wel
een schuifbalk. Ook wanneer de pagina past, maar dan is hij dus niet bruikbaar.
En "auto" krijg je hem automatisch wanneer dat nodig is. (maar dat gebeurt
wanneer je scrolling helemaal weg laat ook vanzelf) Met noresize krijg je
het voor elkaar dat mensen niet een frame kunnen vergroten of verkleinen. Er
is al verteld dat targetten belangrijk is bij frames. Wanneer we met frames
werken is het eigenlijk (9 van de 10 keer) de bedoeling dat we (bij bv 2 frames
langs elkaar) Links een menu hebben en rechts iets anders. We maken dus een
pagina inhoud.html en die plaatsen we in het linker frame (wat we inhoud gaan
noemen). De rechterkant is dan gemaakt voor de informatie, en dat frame noemen
we main. Als we de pagina opkomen zien we dus links het menu en rechts een
welkomstwoord of iets anders. (bv. main.html). Nu klikken we op een link (bv een
pagina genaamd links.html) uit de "inhoud" en deze moet geladen worden in het
venster "main", waar je nu main.html ziet. In de index ziet dit er als volgd
uit:
De link die we maken in de inhoud (inhoud.html) naar de links (links.html)
moet verwijzen naar main. Dit werkt het zelfde als wanneer we de pagina in een
nieuw venster willen laten zien. In inhoud.html krijgen we dus een link naar
links.html. Dit ziet er dan zo uit:
Als laatste van dit hoofdstuk nog "noframes". Het is (bijna) niet voor te
stellen dat er nog mensen zijn die een browser hebben die geen frames
ondersteunen. Maar zelfs voor die mensen hebben ze iets bedacht. Net voordat je
je hele framegebeuren afsluit plaats je de tag <noframes> en
</noframes>. Tussen die tags plaats je een vriendelijk stukje tekst waarin
je verteld dat je browser achterloopt.
Voorbeeld: .......... <noframes> Je browser loopt
wat achter, daarom is het niet mogenlijk deze prachtige pagina te bekijken
</noframes> </frameset>
Hoofdstuk 09: Meta-tags en opmerkingen
Metatags zijn nodig wanneer je je aanmeld bij zoekmachine's. Wanneer je je
aanmeld bij een of meer zoekmachine's zoekt zo'n zoekmachine naar de metatags.
Ik de metatags komt een kort verhaaltje van wat je te bieden hebt en wat
kernwoorden die met je homepage te maken hebben. De kernwoorden bedoel ik de
woorden mee die je intijpt wanneer je iets zoekt. Je tijpt een woordje in. Een
zoekmachine zoekt door al die kernwoorden van al die pagina's heen. Wanneer hij
op jouw pagina terecht komt zal hij jouw omschrijving tonen. De meta tags komen
in de head te staan.
Voorbeeld: <head> <meta name="description"
content="Omschrijving van je homepage"> <meta name="Keywords"
content="kernwoorden"> </head>
Om je pagina duidelijk te houden voor je zelf is het mogenlijk om overal op
je homepage opmerkingen te plaatsen. Dit gebeurt tussen <!-- en -->. Alles
daartussen zal niet op je homepage verschijnen, maar het is voor jouw handiger
zoeken naar een stukje van je homepage.
Dat was hij dan. Als het goed is kan je, na wat oefening, een fatsoenlijke
homepage maken. Als je de offline versie uitprint heb je een bijna onmisbaar
stukje naslagwerk. De volgende hoofdtukken zijn extra hoofdstukken die misschien
handig of leuk zijn, maar niet noodzakelijk. Kijk maar eens! Tot slot de
gouden regel: Als je je daar aan houd, kan het niet mis gaan met je homepage!!
Doe NOOIT iets op je homepage wat jij irritant vind!
Hoofdstuk 10: Extra: Marquee
Totaal niet moeilijk, maar wel leuk! Een scrollende tekst over je
beeldscherm. Dit heet Marquee en dat doen we met de tags <marquee> en
</marquee>. Alles tussen die twee tags zal van rechts naar links over je
beeldscherm rollen.
voorbeeld: <marquee>Mathie's Nieuwe Homepage: Alles voor
je homepage</marquee>
We kunnen natuurlijk de opmaak beļnvloeden. Kleur, grootte, richting en
snelheid zijn aan te passen.
voorbeeld: <marquee behavior="scroll">Mathie's Nieuwe
Homepage: Alles voor je homepage</marquee>
Behavior kennen we drie waarden.
scroll: Tekst scrolt doorlopend van links naar rechts
slide: Tekst scrollt van links naar rechts en blijft stil staan
alternate: Tekst scrolt van links naar rechts en weer terug
voorbeeld: <marquee bgcolor="red">Mathie's Nieuwe
Homepage: Alles voor je homepage</marquee>
Levert, in dit geval, een rode balk op met de scrollende tekst. De kleur kan
je aangeven zoals hier is gegeven, maar ook door de RGB-waarden.
(bgcolor="#003366")
voorbeeld: <marquee direction="right">Mathie's Nieuwe
Homepage: Alles voor je homepage</marquee>
Laat de tekst scrollen van links naar rechts of van rechts naar links.
left: Tekst scrolt van rechts naar links
right: Tekst scrollt van links naar rechts
voorbeeld: <marquee height="100">Mathie's Nieuwe
Homepage: Alles voor je homepage</marquee>
... bepaalt de hoogte in pixels (hier gedaan) of in % (heigt="25%")
voorbeeld: <marquee width="80%">Mathie's Nieuwe Homepage:
Alles voor je homepage</marquee>
Dit bepaalt de breedte van de lichtkrant.
voorbeeld: <marquee hspace="100">Mathie's Nieuwe
Homepage: Alles voor je homepage</marquee>
... geeft aan wat de open ruimte moet zijn tussen de linker kant en de
rechter kant van het document.
voorbeeld: <marquee vspace="100">Mathie's Nieuwe
Homepage: Alles voor je homepage</marquee>
... Bepaalt hoeveel ruimte er over blijft tussen de boven en onderkant van de
lichtkrant.
voorbeeld: <marquee loop="2">Mathie's Nieuwe Homepage:
Alles voor je homepage</marquee>
Hiermee kan je bepalen hoevaak de tekst voorbij komt.
voorbeeld: <marquee scrollamount="10">Mathie's Nieuwe
Homepage: Alles voor je homepage</marquee>
Is voor de snelheid. Dit wordt aangegeven in hoeveel pixels de tekst iedere
keer verschuift.
