We gaan je webpagina eens opfleuren met een plaatje. We gebruiken het plaatje dat hienaast staat.
Klik met je rechter muisknop op het plaatje en sla de afbeelding op als mannetje.gif in de map waar ook je HTML-pagina's staan.
Je kunt de browser laten weten dat er een afbeelding op een pagina moet komen met behulp van de image-tag <img>
We moeten binnen de tag ook de bron (src = source) opgeven. De bron bestaat uit de naam van het plaatje (mannetje.gif) en eventueel de plaats waar de browser het plaatje kan vinden. Staat het plaatje in dezelfde map als de HTML-pagina, dan hoef je alleen de naam van het plaatje op te geven.
Maak een nieuwe webpagina en typ tussen de bodytags het volgende:
![]() |
Sla de pagia op en zie .... het plaatje verschijnt op de pagina!
Op dezelfde manier kun je plaatjes van webpagina's van anderen 'plukken' en in je eigen pagina gebruiken.
De bovenstaande bron, src="mannetje.gif", betekent dat de browser de afbeelding zoekt in dezelfde map als waar het HTML-document staat.
Vaak zie je dat webontwerpers alle afbeeldingen op de pagina's in een aparte map zetten. Wij gaan dat nu ook doen. Ga naar Mijn documenten en open de map Webpages. Klik met de rechter muisknop ergens in de map Webpages en maak dan een map afb aan in je map Webpages. Kopieer de afbeelding mannetje.gif naar de nieuwe map afb en verwijder het bestand mannetje.gif uit de map Webpages.
![]() |
...en daar is het plaatje weer.
"afb/mannetje.gif" betekent: zoek in de map afb naar de afbeelding met de naam mannetje.gif.
Er zijn nog wat leuke dingen te vertellen over afbeeldingen en hun formaat.. Probeer dit maar eens...
![]() |
Gebruik je alleen de height-optie, dan blijven de verhoudingen bewaard en wordt alleen de grootte van van het plaatje aangepast. Hetzelfde gebeurt als je alleen de width-optie gebruikt. Bijvoorbeeld:
![]() |
Met behulp van deze optie kunnen we met behulp van een hele simpele afbeelding speciale resultaten bereiken.
Als je goed kijkt zie je hiernaast een rood puntje.
Het is een afbeelding van 4 bij 4 pixels met als naam rodepunt.gif. Klii met de rechter muisknop op het puntje en sla de afbeelding op als rodepunt.gif in de map afb.
Hieronder vind je voorbeelden wat je met deze rode punt kunt doen:
|
Grappig hè?
Een homepage is natuurlijk niet compleet zonder 'links' (verbindingen) naar andere Internetpagina's. Sterker nog: surfen
op het Internet is niets anders dan van link naar link springen.
Het maken van een link is zo simpel als wat. We gaan een link maken naar Yahoo.
Maak een webpagina en zet tussen de body-tags ....
Ga naar Google! |
Zet het woord dat naar de link moet verwijzen tussen een paar anchor-tags: <a> en </a>.
Ga naar Google! |
Voeg de optie href = "URL" toe en klaar is Kees! URL staat voor de Universal Resource Locator en dat is de naam van de website waar je heen wilt. Als je naar een website op het Internet wilt moet je als voorvoegsel http:// (HyperText Transport Protocol) gebruiken. Aan dat vootvoegsel kan de browser zien dat het om een Internetadres gaat. Voor een link naag Google moet er dus komen te staan:
Ga naar Google! |
Een e-mail link werkt op dezelfde manier. We gebruiken nu het voorvoegsel mailto: gevolgd door het e-mail adres waar de mail heen moet. Bijvoorbeeld:
Stuur me mail! |
Als je deze code in je pagina opneemt en je klikt op de link, dan opent de browser het e-mailprogramma op de computer van de gebruiker en wordt er een e-mail aangemaakt met verzendadres sjeng@huygenwaard.nl.
Het is je waarschijnlijk opgevallen dat een link altijd blauw en onderstreept is. Een link die al bezocht is, is paars en onderstreept. Deze kleuren kun je veranderen. Daarvoor zet je in de body-tag het volgende:
De links worden nu groen en de bezochte links goudkleurig!
We kunnen ook van een afbeelding een link maken. Gebruik het Ga naar Google! voorbeeld dat we hierboven gemaakt hebben. We gaan het woord Google vervangen door de afbeelding hiernaast. Sla de afbeelding weer eerst op in de map afb op je computer. Vervolgens vervang je het woord Google! door <img src = "afb/google.gif">:
Ga naar ![]() |
Een veelgestelde vraag is hoe ik dat irritante blauwe (of paarse) kader dat om het plaatje staat weg kan halen. Simpel! We voegen aan de image-tag de optie border = "0" toe:
Ga naar ![]() |
... en de rand is verdwenen!
Vergeet niet dat afbeeldingen, vooral foto's, veel data bevatten en daardoor kan het wel even duren voor dat ze helemaal geladen zijn. Eén manier om de bestandsgrootte te verkleinen is het reduceren van de afbeeldingsgrootte. Door de hoogte en breedte te halveren wordt je de grootte van het bestand één vierde deel van de grootte van het oorspronkelijke bestand. Je kunt ook het aantal kleuren verminderen.
Hieronder vind je een aantal afbeeldingen van een auto: de Abarth Momotypo Stola. De originele afbeelding heb ik van het Internet gehaald. Als je op de de link Stola klikt zie je de originele foto. De originele foto is 1865 pixels breed en 2300 pixels hoog. Dat is te groot om op de meeste beeldschermen helemaal weer te geven. De grootte van het bijbehorende bestand is 1.4MB, dus 1400000 bytes. Bedenk daarbij dat de foto een jpg-afbeelding is. Dat wil zeggen dat hij al gecomprimeerd is. De ongecomprimeerde foto (ook wel het 'raw' genoemd) is ruim 12 MB groot, dus meer dan 12000000 bytes!
De foto hieronder is een kleinere uitvoering van dezelfde foto. Hij is 649 pixels breed en 800 pixels hoog. We hadden voor deze afbeelding de originele foto kunnen gebruiken door de optie height = "800" te gebruiken. De foto is verkleind met behulp van een fotoprogramma. De bestandsgrootte van de verkleinde foto is 124 KB, dat is 124000 bytes. Dat is een elfde deel van de grootte het originele bestand! Ofwel: in plaats van één foto van de originele grootte kan de browser in dezelfde tijd elf foto's van deze grootte laden.
Het plaatje rechtsboven is weer de helft van he linkerplaatje: 325 pixels bij 400 pixels. De bestandsgrootte van dit plaatje is 56 KB (56000 bytes). Het plaatje rechtsonder is even groot als het plaatje rechtsboven. Het bestand van dit plaatje is wat meer gecomprimeerd met behulp van het fotoprogramma. Het bestand is nu 40 KB groot. Dat betekent dat de browser in de tijd dat de originele foto wordt geladen 35 van deze foto's kan laden.
Maar als je de originele foto toch wilt laten zien, dan kun je ook gebruik maken van een sterk verkleinde afbeelding, een zogenaamde thumbnail, die een link is naar de grote afbeelding. Daarvoor gabruiken we de originele afbeelding. Klik nog eens op de link Stola en sla de afbeelding als abarth.jpg op in de map afb. Met het fotoprogramma verkleinen we de foto tot de grootte van een postzegel. Je kunt daarvoor de afbeelding gebruiken die hiernaast staat. Sla deze afbeelding op als abarthklein.jpg.
Neem de volgende code op in de body van je webpagina:
![]() hiernaast om de grote foto te zien |
Sla de pagina op en kijk of de link werkt.
De optie align="left" zorgt ervoor dat de afbeelding links op de pagina wordt geplaats en dat de tekst nast de foto komt te staan.
Nog een voorbeeld met de optie align:
![]() |
Met align="right" kun je een foto aan de rechterkant van de pagina zetten. De tekste komt dan links van de foto te staan.
Een andere manier om te linken is het linken naar een specifieke plaats in een document, in plaats van naar een ander document. Klik hier om op miraculeuze wijze verplaatst te worden naar de regel waarin we voor het eerst over URL's gepraat hebben. Ik zal het aan de hand van een voorbeeld uitleggen.
Maak eerst een nieuwe webpagina:
Klik hier en op miraculeuze wijze... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... kom je hier terecht! ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... |
Eerst zetten om de plaats waar we heen willen springen een paar anchor-tags. Vervolgens gebruiken we de optie name om die plaats een naam te geven:
Wat je nu hebt gedaan is het punt markeren waar je heen kunt springen. We gaan nu de link maken waarmee we naar dat punt toe kunnen springen.
Zet daarvoor om Klik hier een paar ankertags en geef met behulp van de optie href="#hierheen" naar welk gemarkeerd punt er gesprongen moet worden. Het hekje (#) betekent: let op hier volgt de naam van een gemarkeerd punt.
Sla deze pagina op als link.html
Maak nu een tweede pagina met daarop de volgende twee links:
Sla vervolgens de pagina op als link2.html en controleer of de links werken!
Je kunt hier natuurlijk ook plaatjes gebruiken als gemarkeerd punt en plaatjes als link.