html basic - de cursus voor beginners


~HTML basic
   ~Wat is html ?
   ~Over tags
   ~Stijl tags
   ~Plaatsings tags
   ~Letter tags
   ~Kleuren tags
   ~Links
   ~Plaatjes
   ~Tabellen
   ~En verder

~Forum
~Downloads
~Links
~Referenties
~Disclaimer
~Feedback

 

 


Les 8 : Plaatjes

Om je wat meer over het gebruiken van plaatjes in je pagina te vertellen, wil ik je eerst even vragen het onderstaande plaatje op je computer op te slaan. Dat gaat als volgt :

  • Klik met je rechtermuisknop op het plaatje
  • Kies : figuur opslaan als.
  • Sla de figuur op op je C:\ schijf.
  • Het pad voor het plaatje is nu dus C:\PLAATJE.JPG

Om het plaatje vervolgens zichtbaar te maken, dien je gebruik te maken van de volgende tag :

<IMG SRC="lokatie">

Op de plaats van "lokatie" moet je de lokatie aangeven waar het plaatje zich bevind. Als het plaatje op C:\ staat, dat is de lokatie : file:///C|/PLAATJE.JPG. Wil je bijvoorbeeld het logo van AltaVista op je site hebben, dan kun je de lokatie ook als volgt aangeven :

<HTML>

<HEAD>

<TITLE>Mijn eerste pagina</TITLE>

</HEAD>

<BODY BGCOLOR="#OOOOOO">

<P><IMG SRC="http://www.altavista.nl/i/logo_s.gif"></P>

<P><IMG SRC="http://icons.ilse.nl/nli/logodefp.gif"></P>

<P><IMG SRC="file:///C|/PLAATJE.JPG"></P>

</BODY>

</HTML>

Let op ! Indien het te linken plaatje / .htm bestand in dezelfde directory staat als het huidige bestand, dan is het voor MSIE voldoende PLAATJE.JPG als lokatie op te geven. NSN was hier vroeger echter niet al te blij mee en weigert in vroegere browsers dus naar zo'n tag te luisteren. Snapt ie dus niet. Omdat er aardig wat mensen NSN gebruiken is het wel zo handig je site zo browsercompatible mogelijk te maken. Vul dus overal de volledige lokatie in !

In mijn verdere verhaal over plaatjes toevoegen aan je website, zal ik alleen PLAATJE.JPG gebruiken als voorbeeld.

Een plaatje kun je zelf maken, net zoals ik heb gedaan met PLAATJE.JPG, maar je kunt hem ook van een andere pagina afhalen. Dit doe je door met je rechtermuisknop op het plaatje te klikken en vervolgens naar "Figuur opslaan als..." te gaan.

Als je het plaatje zelf hebt gemaakt, zul je wel weten wat de afmetingen zijn. Weet je dat niet meer, of gebruik je een plaatje van iemand anders, dan kun je de afmetingen vinden door in Windows met je rechtermuisknop op het bestand te klikken, en naar "Eigenschappen" te gaan. Daar staat de afmetingen van het plaatje in pixels.

Deze afmetingen gaan we ook in de <IMG SRC> tag zetten, zodat de browser jouw plaatje qua formaat met rust laat. PLAATJE.JPG is 80 pixels breed en 70 pixels hoog. Daarom passen we de <IMG SRC> tag als volgt aan :

<IMG SRC="file:///C|/PLAATJE.JPG" WIDTH=80 HEIGHT=70>

Simpel toch ?

Verder staat het altijd wel leuk, dat als je je muis stilhoud op je plaatje, dat er een tekst verschijnt. Dit kun je waarmaken door de ALT opdracht in de <IMG SRC> tag op te nemen. Bijvoorbeeld :

<IMG SRC="file:///C|/PLAATJE.JPG" WIDTH=80 HEIGHT=70 ALT="Mijn plaatje !!">

Het effect van de 2 bovenstaande opdrachten kun je zien door het onderstaande te kopieren naar test.htm.

<HTML>

<HEAD>

<TITLE>Mijn eerste pagina</TITLE>

</HEAD>

<BODY BGCOLOR="#OOOOOO">

<P><IMG SRC="http://www.altavista.nl/i/logo_s.gif" WIDTH=290 HEIGHT=50 ALT="AltaVista: Search"></P>

<P><IMG SRC="http://icons.ilse.nl/nli/logodefp.gif" HEIGHT=70 WIDTH=120 ALT="Ilse homepage"></P>

<P><IMG SRC="file:///C|/PLAATJE.JPG" WIDTH=80 HEIGHT=70 ALT="Mijn plaatje !!"></P>

<IMG SRC="file:///C|/PLAATJE.JPG" WIDTH=400 HEIGHT=10 ALT="En zo is ie net wat te groot....">

</BODY>

</HTML>

Dat was nou het hele plaatjes verhaal.

Dan zal ik tot slot nog even vertellen hoe je van een plaatje een link kunt maken. Dat kan eigenlijk héél simpel, door het plaatje als omschijving bij de link in te vullen. Dat gaat als volgt :

<A HREF="http://www.altavista.nl"><IMG SRC="file:///C|/PLAATJE.JPG" WIDTH=80 HEIGHT=70 ALT="Mijn plaatje !!"></A>

Indien je een plaatje gebruikt als link, zal er meestal een dikke lijn om het plaatje te zien zijn. Dit kun je verhelpen door de opdracht BORDER="0" in de IMG tag op te nemen.

<A HREF="http://www.altavista.nl"><IMG SRC="file:///C|/PLAATJE.JPG" WIDTH=80 HEIGHT=70 ALT="Mijn plaatje !!" BORDER=0></A>

<HTML>

<HEAD>

<TITLE>Mijn eerste pagina</TITLE>

</HEAD>

<BODY BGCOLOR="#OOOOOO">

<P><A HREF="http://www.altavista.nl"><IMG SRC="file:///C|/PLAATJE.JPG" WIDTH=80 HEIGHT=70 ALT="Mijn plaatje !!"></A></P>

<P><A HREF="http://www.altavista.nl"><IMG SRC="file:///C|/PLAATJE.JPG" WIDTH=80 HEIGHT=70 ALT="Mijn plaatje !!" BORDER=0></A></P>

</BODY>

</HTML>

 

Naar les 9


plaatjes
images, graphics, foto's, etc....

directory
Een directory is een bepaalde plaats/map op je computer. Op je computer staan namelijk een aantal mappen waarbinnen bestanden staan. Als de bestanden in dezelfde map staan, staan ze binnen dezelfde directory.

MSIE
Microsoft Internet Explorer. Kijk op de downloadpagina om deze browser gratis te downloaden.

NSN
Netscape Navigator. Kijk op de downloadpagina om deze browser gratis te downloaden.

browsercompatible
een site is browsercompatible als hij er in alle browsers gelikt uit ziet... Meer hierover in de extra les.

webles © 2000-2002 kopalis