Index  HTML  CSS  ASP  PHP  VBScript
 Javascript  SQL  Links  Contact  Gastboek  

  HTML cursus
  Vervolg inleiding
  Tekst werk.
  Lettertype
  Tekst Uitlijnen
  Koppen
  Horizontale lijnen
  Afbeeldingen
  Uitlijnen afbeelding
  Tabellen
  Col/Rowspan
  Nesten Tabel
  Anchor
  Frames
  FTP
  Formulier

  Ovz standaard tags
  Ovz Afbeelding
  Ovz Tables
  Ovz Lijsten
  Ovz Frames
  Ovz Speciaal
  Anchor
  Address
  Area


Afbeeldingen

Op een mooie pagina behoren natuurlijk veel plaatjes. Er zijn dan ook veel mogelijkheden om met plaatjes en afbeeldingen te werken. Je kunt met een transparante afbeelding zeer veel doen, zonder dat de bezoeker dit zal merken. Maar veel belangrijker zijn de afbeeldingen die de bezoeker wel zal zien. Het is tenslotte de basis van de lay-out van jouw pagina.

Er zijn zeer veel programma's om plaatjes mee te bewerken. In het begin zul je hier veel tijd aan kwijt zijn om te leren omgaan met zo'n programma. Want hoe moet je bijvoorbeeld een plaatje met een transparante achtergrond kleur krijgen? Maar welk programma is nu het beste?
Daar valt over te twisten. Veel gebruikt is Paint Shop Pro. Een zeer goed te betalen programma, met ontzettend veel mogelijkheden. En gebruikersvriendelijk. Daarnaast is er Fireworks van Macro Media. Een professioneel tekenprogramma met veel bewerkingsmogelijkheden. En natuurlijk heb je nog de programma's van Adobe. Zeer moeilijk in het gebruik, maar als je het kunt, dan heb je ook wat.

Welk programma je ook hebt, leer er eerst mee omgaan en ga niet gelijk de meest mooie dingen proberen te maken. Dit lukt je toch niet. Maar heb je dan eenmaal een afbeelding, dan zal je deze in je pagina moeten verwerken. En dan zit je weer op bekend terrein. De afbeelding moet je plaatsen met de <img> tag. Img staat voor image. De extensies voor het internet zijn .gif of .jpeg of .png voor een afbeelding. Dit zijn kleine bestanden van formaat en zijn snel geladen.

<img src="...">
Zo ziet de tag eruit. Bij src zet je de bestandsnaam van de afbeelding. Dit kan op verschillende manieren. Je kunt de afbeelding in dezelfde directory plaatsen als de pagina. Alleen de bestandsnaam voldoet dan bij src="...".

Staat de afbeelding in een andere directory, dan zul je met een ander soort adressering moeten komen. Dit kan direct of indirect gebeuren. Het makkelijkst is gewoon direct. Je geeft de preciese naam op van de directory.

Een voorbeeld:
<img src="~/www/afbeelding/button.gif>

Je pagina staat dan bijvoorbeeld in de directory ~/www/pagina/index.html. De browser kan dan via de src="..." de afbeelding vinden. Bij zeer grote pagina's is het overzichtelijk om te werken met aparte directory's voor afbeeldingen, pagina's en dergelijke. Maar voor een kleine pagina voldoet het prima om alles in een dircetory te houden. Om het onder de knie te krijgen moet je gewoon proberen de afbeeldingen in een aparte map te zetten en dan vanuit de pagina de afbeelding aan te roepen. Je merkt dan al snel of het goed is of niet. Klopt het niet dan moet je aan het knutselen met bestanden.

<img src="../afbeelding/button.gif>
Dit is de indirecte manier van het aangeven van de directory. Een vrij lastige methode voor de beginner. Ik laat het zien maar ga er niet op in verder. Dit krijg je later vanzelf onder de knie als je wilt. Het enige wat je moet weten is dat je uitgaat van de directory van je pagina en zo terug redeneert.