Maak je eigen Homepage!

Maak je eigen Homepage!
Les 3

Een nieuwe regel?

Laten we beginnen met vast te stellen hoe een browser met tekst omgaat.
Eerst een voorbeeld ....

He!Watis hieraande hand??

<BODY>
He!
Wat
is hier
aan
de hand??
</BODY>

He!
Wat
is hier
aan
de hand??

De browser herkent geen tekstopmaak. Tenzij je hem anders vertelt, wordt tekst als een constante stroom tekens weergegeven. Als je op een nieuwe regel wilt beginnen moet je een harde return (BREAK) gebruiken.
<BODY>
He! 
Wat 
is hier 
aan 
de hand??
</BODY>
 wil simpelweg zeggen: begin op een nieuwe regel.

He!

Wat

is hier

aan

de hand??

Ongeveer hetzelfde als is . Het doet hetzelfde alleen wordt na de break een lege regel over geslagen.
<BODY>
He!
Wat
is hier
aan
de hand??
</BODY>

Dit zijn voorbeelden van standalone tags. Er is geen eindtag bij nodig. Er is nog iets eigenaardigs aan deze tags... je kunt ze niet meer dan één keer gebruiken. Met andere woorden, geeft je geen drie lege regels, je krijgt er maar één. Hoe kun je dan wel meerdere lege regels krijgen? Even geduld, ik zal het zo uitleggen.

Extra spaties?

Dit is heel grappig

Bekijk eerst dit even...
<BODY>
Dit is heel grappig
</BODY>
De browser vertikt het om meer dan één spatie in te voegen. Je zult het in eerste instantie wel raar vinden dat het zo is maar geloof me, het is beter zo. Het geeft je absolute heerschappij over het uiterlijk van je document.

Dit is heel grappig

Er is een handige kleine code waaraan de browser een spatie herkent:   (non breaking space) Probeer dit maar eens...
<BODY>
Dit is       
heel       
grappig
</BODY>

Speciale tekens

Bij   betekent de & dat hier een speciaal teken begint, de ; betekent het einde van een speciaal teken en de letters daar tussen in zijn een soort afkorting van waar het teken voor staat. Er zijn zes van die speciale tekens (eigenlijk veel meer maar dat zijn dan niet tevens HTML code tekens). Deze codes moeten altijd in kleine letters geschreven worden.

  (non braking space - spatie)
< (< lighter - kleiner-dan)
> (> greater - groter-dan)
& (& ampersand)
" (" quotation - aanhalingsteken)
 (- soft hyphen - afbreekstreepje)
Je hoeft ze niet altijd te gebruiken. Gebruik ze alleen wanneer het typen van het echte teken de browser in verwarring brengt. Hoe weet je wanneer dat is? Ik kan zo geen vaste regel bedenken maar je komt er wel achter met een beetje oefenen en een paar miskleunen.
Over fouten en miskleunen gesproken. Er zijn altijd lieden die denken dat het maken van fouten een zonde is. Die lieden zijn bang om iets nieuws te beginnen uit angst voor fouten. Telkens dezelfde fout maken is misschien een beetje dom maar, zeker als je aan het leren bent, moet je niet bang zijn om van je werk een puinhoop te maken.
Als je er geen puinhoop van maakt ben je niets aan het leren; waarschijnlijk ben je zelfs helemaal niets aan het doen. Vergeet niet, miskleunen is een volkomen acceptabel bijprodukt van het leren!
OK, genoeg gefilosofeerd.
Er zijn ook nog andere speciale tekens. Je zult ze waarschijnlijk bijna nooit gebruiken; ik wil alleen dat je weet dat ze er zijn.
Laten we de voorgaande punten nog eens kort samenvatten want als je ook maar een klein beetje op mij lijkt zie je nu door de bomen het bos niet meer. De browser geeft tekst weer als een constante stroom tekens tenzij je hem vertelt dat hij het anders moet doen. Lege ruimten worden gereduceerd tot één spatie. Als je meerdere spaties wilt zul je de spatie-code ( ) moeten gebruiken. Er is nog een kleinigheidje dat we niet onvermeld mogen laten: Als je tijdens het typen op de Return of Enter toets drukt interpreteert de browser dat als een spatie, tenzij er al een spatie is. In dat geval wordt de return genegeerd.

Centreren

Dit is heel grappig

Nu hebben we nog een heel nuttige tag. Verdere uitleg lijkt me overbodig.
<BODY>
<CENTER>Dit is heel grappig</CENTER>
</BODY>
Je kunt één woord of zelfs een hele pagina met tekst centreren. Alles tussen de <CENTER> tags wordt gecentreerd.

Meer regels overslaan

Dit is

heel grappig

Ik zou het bijna vergeten, ik had beloofd te vertellen hoe je meerdere lege regels kunt maken. Dat is heel simpel. Typ een spatiecode ( ) gevolgd door een break voor elke lege regel die je wilt hebben.
<BODY>
Dit is 
  
  
  
  
heel grappig
</BODY>

Plaatjes op je webpagina

copper

We gaan je webpagina eens opfleuren met een plaatje.We gebruiken het plaatje dat hienaast staat.
Je kunt een afbeelding specificeren met de <IMG> (image) tag.
We moeten binnen de tag ook de bron (source) opgeven. De bron bestaat uit de naam van het plaatje (copper.gif) en de plaats waar de browser het plaatje kan vinden (C:/HTML-cursus/cursus/afb/).

<BODY>
<IMG SRC="C:/HTML-cursus/cursus/afb/copper.gif" WIDTH=82 HEIGHT=68>
</BODY>
De bron vertelt de browser niet alleen welke afbeelding hij moet gebruiken maar ook waar deze staat. Zo'n lang 'pad' (C:/HTML-cursus/cursus/afb) vraagt natuurlijk om typfouten.
Maar je kent al een gemakkelijkere manier: klik met de rechter muisknop op het plaatje en kies uit het snelmenu de optie Afbeelding opslaan als.... Sla het plaatje op in de map 'Webpages' bij je HTML-pagina. Je kunt dan het plaatje op je pagina zetten met behulp van de volgende regels:
<BODY>
<IMG SRC="copper.gif" WIDTH=82 HEIGHT=68>
</BODY>
De bovenstaande bron, SRC="copper.gif", betekent dat de browser de afbeelding zoekt in dezelfde map als waar het HTML-document staat.
Op dezelfde manier kun je plaatjes van webpagina's van anderen 'plukken' en in je eigen pagina gebruiken!
Vaak zie je dat webontwerpers alle afbeeldingen op de pagina's in een aparte map zetten. Als je wilt kun jij dat ook doen. Maak dan een map afbeeldingen aan in je map webpages en zet daar de afbeelding copper.gif in. In dat geval gebruik je de volgende regels om het plaatje op je pagina te zetten:
<BODY>
<IMG SRC="afbeeldingen/copper.gif" WIDTH=82 HEIGHT=68>
</BODY>

Er zijn nog wat leuke dingen te vertellen over afbeeldingen en hun formaat.. Probeer dit maar eens...
<BODY>
<IMG SRC=copper.gif" HEIGHT=20 WIDTH=160>
</BODY>

Je kunt natuurlijk ook alle maten weglaten. Het plaatje wordt nu weergegeven op zijn 'werkelijke pixelformaat'.
<BODY>
<IMG SRC="copper.gif">
</BODY>
Zoals je ziet kan de browser helemaal zelf uitmaken hoe groot de afbeelding is. Waarom zouden we ons dan druk maken over afmetingen? Zonder in details te treden: het opgeven van afmetingen zorgt ervoor dat je pagina sneller geladen wordt omdat het eenvoudiger is voor de browser.

Je kunt elke afmeting specificeren die je wilt. Het originele formaat zal dan genegeerd worden. Je kunt hier grappige dingen mee doen Kijk bijvoorbeel naar dit kleine rode puntje-> <-. Het is echt een plaatje; een vierkantje van 4 x 4 pixels en het bestandje heet red_dot.gif. Klik met je rechter muisknop op het plaatje en sla het op. Hieronder vind je voorbeelden wat je allemaal met dat plaatje kunt doen:

<BODY>
<IMG SRC="red_dot.gif" WIDTH=300 HEIGHT=2>
<IMG SRC="red_dot.gif" WIDTH=150 HEIGHT=10>
<IMG SRC="red_dot.gif" WIDTH=30 HEIGHT=30>
<IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=40>
</BODY>
Grappig hè?

Einde les 3

Intro Les 1 Les 2 Les 3 Les 4 Les 5 Les 6 Index