Plaatjes

Algemeen

Ha leuk, plaatjes. Je kunt er saaie lappen tekst mee opfleuren, dingen mee verduidelijken etcetera. Digitale camera's zijn inmiddels dermate betaalbaar dat u zo'n ding best wel eens zou kunnen hebben. Gaat uw gang, voor de prijs van een geheugenkaart hoeft u het niet te laten om een paar honderd foto's op uw site te zetten. Misschien wel een tip: maak de foto's niet te groot, want het kost wel een berg laadtijd, en wellicht heeft uw provider ook grenzen gesteld aan de omvang van uw site. Als uw foto gewoon bedoeld is als illustratie van uw betoog, zonder dat het echt een kunstwerk is, is 300 of 400 pixels breed (of hoog) vermoedelijk groot genoeg. En als u geen eigen foto kunt leveren -hoe vaak komt een mens op Antarctica, tenslotte- kunt u altijd een plaatje van internet plukken. (Ik sla het hele auteursrechtengedoe nu even gemakshalve over... Zie verderop voor dit netelige probleem.)

Zie bij het stukje "Meent" hieronder voor een redelijk unieke bron.

En als u over een electronische camera beschikt (en die worden met de dag populairder) hebt u al helemaal geen problemen. Gewoon de foto's op de pc overzetten, en zoveel bewerken als u nodig acht.

Waar u wel attent op moet zijn: er zijn een hele boel bestandsformaten voor plaatjes in omloop, maar browsers kunnen alleen met .JPG en .GIF uit de voeten. Wellicht zult u dus een plaatje in een ander formaat moeten omzetten (als uw plaatje de extensie .BMP of .WMF heeft, of zo). Daarvoor hebt u dus een programma nodig dat dat kan converteren. Voorbeelden: Microsoft Photo Editor, Paint Shop Pro of LView Pro.

Of het nodig is om geld uit te geven aan beeldbewerkingsprogramma's hangt, denk ik, vooral af van uw mate van kunstzinnigheid. Als het alleen gaat om uitsnijden, formaat wijzigen, en wat schuiven met kleuren en mate van contrast, denk ik dat u met de bij Windows XP meegeleverde combinatie van Paint en Photo Editor een heel eind komt. (Niet dat ik hiermee reclame voor Microsoft-producten wil maken, maar de kans dat u XP op uw pc hebt is nu eenmaal niet verwaarloosbaar.)

Ook uploaden!

Ik heb al ergens gezegd dat u uw website op uw eigen pc maakt, en in een later stadium gaat "uploaden" naar de computer van uw provider. Dat uploaden moet dan ook de plaatjes omvatten. Die staan in dezelfde directory als uw HTML-bestanden. (Eventueel kunnen ze ook in een subdirectory daarvan staan, maar dat is het dan ook. Als ze ergens anders staan, kan uw HTML-pagina ze niet vinden.)

Plaatjes gewoon invoegen...

Ik zal proberen het eenvoudig te houden, maar het wordt aan het eind best wel wat lastig. Dus neemt u hier vooral de tijd voor. (En misschien is uw site ook helemaal niet zo afhankelijk van plaatjes.)

Simpelweg plaatjes toevoegen is niet zo moeilijk, maar het is wat geknutsel om de preciese positionering van tekst en plaatjes zo te krijgen als u dat wilt. Ik heb een plaatje van een Kever gegapt van Encarta, en ga daar hier wat mee stoeien. Eerst het plaatje "gewoon". De tag hiervoor luidt: <IMG SRC="naamvanplaatje.jpg">. (IMG is een afkorting van "image", SRC van "source". Let op de aanhalingstekens om de bestandsnaam.)

...en precies neerzetten waar u dat wilt

Zoals u al verwacht zult hebben, wordt het plaatje links uitgelijnd. Nu gaan we wat tekst eromheen draperen. (Kijkt u vooral in de code van deze pagina!)

De Sleutelclub Double Clutch houdt zich bezig met het op de weg houden van auto's van tien jaar en ouder. De gemiddelde leeftijd ligt zo rond de 15 jaar, met uitschieters tot meer dan 40 jaar. U moet dan niet direct denken aan Rolls Royces of zo, er zijn diverse leden met Kevers. Het gaat ons niet om de exclusieve auto's, maar we vinden het gewoon leuk om rond te rijden in auto's die werden ontworpen op een tekenbord in plaats van in een windtunnel. Dat we om de zoveel tijd met gedoe zitten bij de verkrijgbaarheid van onderdelen nemen we graag voor lief.

Hier wilden we de tekst laten beginnen naast het plaatje, maar uitgelijnd met de bovenkant ervan. De truc die hier vereist was hield in dat we bij de tag van het plaatje opgaven dat hij moest worden uitgelijnd. U zou verwacht hebben dat dat iets zou zijn van "ALIGN="top", maar nee: "ALIGN="left". De volledige tag luidt: <IMG SRC="kever.jpg" ALIGN="left">. Het effect is zoals beoogd. Vervolgens wilde ik de volgende alinea ("Hier wilden we...") niet laten beginnen "naast het plaatje" maar eronder. Dit gaat met de tag <BR CLEAR="left">. In het Nederlands: zet een regelomhaal, maar ga pas verder als je op de linkerkantlijn kunt beginnen.

Nu het plaatje aan de andere kant.

De Sleutelclub Double Clutch houdt zich bezig met het op de weg houden van auto's van tien jaar en ouder. De gemiddelde leeftijd ligt zo rond de 15 jaar, met uitschieters tot meer dan 40 jaar. U moet dan niet direct denken aan Rolls Royces of zo, er zijn diverse leden met Kevers. Het gaat ons niet om de exclusieve auto's, maar we vinden het gewoon leuk om rond te rijden in auto's die werden ontworpen op een tekenbord in plaats van in een windtunnel. Dat we om de zoveel tijd met gedoe zitten bij de verkrijgbaarheid van onderdelen nemen we graag voor lief.

Hier hebben we de tag <IMG SRC="kever.jpg" ALIGN="right"> gebruikt. Let op: we hebben eerst de tag met het plaatje opgenomen, en daarna pas de tekst ingevoerd. Blijkbaar is de browser zo intelligent dat hij dan eerst dat plaatje op de gewenste plaats neerzet en daarna pas de tekst eromheen drapeert. Ik heb hier de <BR> achterwege gelaten om te laten zien dat dat "eromheen draperen" inderdaad werkt. In de meeste gevallen zal dat ook de bedoeling zijn: u hebt een min-of-meer doorlopende tekst, die "doorspekt" is met plaatjes. (Als u hier dezelfde verdeling zou willen hebben als bij het vorige plaatje, zou u <BR CLEAR="right"> gebruiken. Als u pas verder wilt als zowel de linker- als de rechterkantlijn vrij is: CLEAR="all".) (Dank aan Merien U., die me op een fout in de vorige versie van deze tekst wees.)

De grootte van een plaatje opgeven

In veel gevallen zult u het formaat van een plaatje wat willen wijzigen. U kunt dan met een beeldbewerkingsprogramma (meestal met de opdracht "resize" of zo) de gewenste grootte bereiken. Een simpeler manier is dat u in de code opgeeft hoe hoog en/of hoe groot het moet worden. Hieronder heb ik eerst de gewenste breedte opgegeven als 50 pixels. (Code: <IMG SRC="htmlcursus_kever.jpg" WIDTH="50">.) Daaronder heb ik zowel de breedte als de hoogte opgegeven. (Code: <IMG SRC="htmlcursus_kever.jpg" WIDTH="50" HEIGHT="30">.)

U ziet direct welke valkuil er ontstaat: de verhoudingen zijn zoek geraakt. Een tweede bezwaar van deze methode: ik heb de indruk dat oudere browsers deze attributen niet kennen, en gewoon het complete plaatje neerzetten, met de oorspronkelijke afmetingen. Derde bezwaar: stel, u hebt een joekel van een afbeelding, zeg 500 Kb, maar u hebt hem slechts in sterk verkleinde vorm nodig, zeg 50 x 80 pixels. Als u deze methode gebruikt wordt wel die 500 Kb overgehaald voordat die ene postzegel wordt vertoond. Niet erg efficiënt, en bezoekers die op de telefoonkosten letten zullen het niet op prijs stellen.

Tabellen gebruiken bij neerzetten plaatjes

Als u het bovenstaande hetbt uitgeprobeerd, zult u het met me eens zijn dat dit een lastig gepruts is. Wat u heel goed kunt doen, is een tabel gebruiken om een plaatje neer te zetten waar u dat wilt. Stel, u wilt links een plaatje en rechts een toelichtende tekst, dan maakt u een tabel van 1 rij en 2 cellen aan, en u hanteert dan (bijvoorbeeld) de volgende code:

<TABLE BORDER="0"><TR><TD>< IMG SRC="16m2.jpg"></TD><TD VALIGN="top">De 16-kwadraat is in mijn ogen de mooiste zeilboot die ooit op de Nederlandse wateren verschenen is.</TD> </TR></TABLE>

De breedte van de linkerkolom wordt automatisch aangepast aan de breedte van het plaatje. De tekst komt er netjes naast. Als u vindt dat er wat witruimte tussen het plaatje en de tekst moet komen, geeft u aan de TABLE-tag het attribuut CELLSPACING="5" mee (of een ander aantal pixels).

Het verschil met de methode van het vorige kopje is dat als de toelichtende tekst meer hoogte in beslag neemt dan het plaatje, die cel "naar beneden wordt doorgetrokken". En het plaatje wordt dan qua hoogte midden in de linker cel neergezet. U kunt dat dan weer ondervangen door dat VALIGN="top" aan de cel met het plaatje mee te geven.

Plaatjes als koppeling

U bent dit al tegengekomen bovenaan elke pagina van dit cursusje: drie knoppen, die u naar de vorige pagina leiden, de inhoudsopgave en de volgende pagina.

U combineert hier de tags voor een link en voor een plaatje met elkaar. Stel, u wilt bereiken dat uw gebruiker door op dat Kever-plaatje te klikken naar de site van Volkswagen komt (www.volkswagen.nl), dan luidt de totale code:
<A HREF="http://www.volkswagen.nl" TARGET="_blank"><IMG SRC="htmlcursus_kever.jpg"></A>
U hangt de code voor de link dus om de code van het plaatje heen. Het effect is dat de gebruiker een randje om het plaatje ziet, waarmee hij dit als link kan herkennen. (Natuurlijk ziet hij ook het handje verschijnen.) Als u dat randje niet mooi vindt (ik vond het bij deze knoppenbalk niet mooi) dan breidt u de IMG-tag uit tot <IMG SRC="kever.jpg" BORDER="0">.

(Bovenstaande code bevatte tot voor kort een foutje. Mijn dank aan Carla van V. die me erop wees.)

Met dat attribuut TARGET="_blank" bereikt u dus dat die nieuwe pagina in een apart venster wordt geladen, en uw eigen site gewoon op het scherm blijft staan. Wel zo handig als u uw bezoeker na dat uitstapje weer op uw eigen site terugverwacht.

Het spreekt vanzelf dat alle mogelijkheden van links hier van toepassing zijn: het enige verschil is dat de link niet aan een stukje tekst is opgehangen, maar aan een plaatje.

Misschien een ideetje: als u handig bent met tekenpakketten (kan dus al met Paint beginnen) kunt u uw eigen plaatjes maken, en die vervolgens als koppeling gebruiken. (Bij Paint zult u dus nog met een ander programma de conversieslag moeten maken naar JPG of GIF, aangezien Paint alleen als BMP kan opslaan. Wellicht hebt u bij uw pc Microsoft Picture Publisher meegeleverd gekregen; daar kunt u die conversie wel mee doen.)

Grafieken

Wellicht voor u interessant: u kunt in Excel 97 (en ongetwijfeld ook in latere versies) grafieken direct als HTML-bestand opslaan. Excel geeft er dan een of andere naam aan, met de extensie .GIF; vanaf daar kunt u het ding verder in uw eigen pagina verwerken.

Plaatjes als achtergrond

Kan ook. Advies: gebruik het met mate. Als u een omvangrijk plaatje hebt, duurt het een behoorlijke tijd voordat het geladen is. Als u een klein plaatje hebt, zal de browser gewoon het plaatje horizontaal en verticaal herhalen tot de hele pagina dichtgeplakt is. U breidt hiertoe de BODY-tag uit tot <BODY BACKGROUND="naamvanhetplaatje.jpg">.

Omdat er boven op dat plaatje tekst gezet wordt, loopt u gauw de kans dat het resultaat moeilijk leesbaar wordt. Het verdient al gauw aanbeveling om het plaatje wat fletser te maken met een beeldbewerkingsprogramma.

Wat u nog wel eens tegen komt in het echt: een gekleurd randje aan de linkerrand, een friemeltje, dat soort dingen. (Ik kwam eens een ding tegen dat er als een ringband-pagina uitzag.) Dat pleegt gemaakt te worden door een breed doch smal plaatje te gebruiken, van bijvoorbeeld 20 pixels hoog en 1000 pixels breed. Daarvan is dan alleen het uiterste linker stuk gekleurd, en de rest gewoon wit. Is even knutselen (in Paint, en dan met een ander programma converteren naar JPG of GIF) maar het kan leuke effecten opleveren.

Let u er wel op dat in zo'n geval de reep met de afbeelding een hoeveelheid ruimte in beslag neemt, en de tekst dus een zekere marge moet hebben, wil die niet over het plaatje heen geprojecteerd worden. U kunt dat op twee manieren bereiken. U kunt de hele pagina in een tabel vatten bestaande uit één rij met twee cellen, waarvan de eerste een door u opgegeven breedte heeft. Die eerste cel is dan "leeg", in die zin dat u wel een spatie opgeeft (ampersand -&-, nbsp, puntkomma). Alle tekst komt in de tweede cel terecht. De andere methode is dat u met Cascading Style Sheets een "margin-left" opgeeft voor alle alinea's op uw pagina. Is wat lastiger, maar werkt goed. Zie voor deze truc de pagina over CSS.

Thumbnails

Als u grotere afbeeldingen hebt, duurt het nogal een tijd voor ze geladen zijn. Het is dan een idee om de bezoeker een postzegel-groot voorbeeld te geven, dan kan hij/zij zelf bedenken of hij/zij er de laadtijd voor over heeft. Die kleine versie staat bekend als "thumbnail".
U hebt dan dus twee plaatjes nodig, het "gewone" (grote) exemplaar en de thumbnail. Daar hebt u een beeldbewerkingsprogramma voor nodig; de meeste kennen de opdracht "resize". Meestal zult u met een breedte c.q. hoogte van 50 tot 60 pixels toekunnen.

Op de eerste pagina zet u dan die thumbnail, met een link er omheen naar de grote versie. Als u het netjes wilt doen zet u er bij hoe groot de grote versie is. De totale code wordt dan iets van <A HREF="locomotief.jpg"><IMG SRC="locomotief_klein.jpg"></A>.

Let op: deze code leidt ertoe dat de grote afbeelding "zonder meer" vertoond wordt. De bezoeker moet dan met de Back-knop van de browser terug naar waar hij vandaan kwam. Als u verdere tekst bij die grote afbeelding kwijt wilt (meer bijzonderheden over die locomotief, bijvoorbeeld) zult u een aparte pagina over die locomotief moeten maken. Daar neemt u dan het bewuste (grote) plaatje in op, zoals hierboven beschreven. En als u toch bezig bent, uiteraard ook een link naar de vorige pagina.

Plaatjes van anderen

U kunt ook rechtstreeks naar plaatjes van anderen verwijzen. U neemt daartoe een verwijzing naar die URL in de IMG-tag op: <IMG SRC="www.museum.com/gallery/picasso.jpg">. Bedenk wel dat dit betekent dat uw pagina daarmee verkeer op die andere server genereert, en dat u een probleem kunt krijgen met het auteursrecht dat die ander op die afbeelding heeft. Maar ach, wie weet vindt dat museum het wel leuk als u wat reclame voor ze maakt... ik zou ze gewoon vragen of het mag. Uiteraard hebt u een probleem als die andere server uit de lucht is, of die webmaster het plaatje verwijdert of verhuist.

Meent, ofwel Commons

Een bron van plaatjes die u meestal zonder problemen qua auteursrecht kunt gebruiken, en waar elke dag meer op te vinden is: Wikimedia Commons, te vinden op commons.wikimedia.org. Dit is een onderdeel van het Wikimedia-gebeuren. waarvan de elders (bij Bespiegelingen) besproken encyclopedie Wikipedia de bekendste loot aan de stam is.

Stel, een Nederlandse Wikipedia-auteur heeft een leuk plaatje van iets Amsterdams, en zet dat op de Commons neer. Dan kunnen zijn collega's die de Engelstalige (grootse) t/m Manx Gaelic-talige (kleinste) versies bijhouden datzelfde plaatje gebruiken, zonder dat het in zoveelvoud bewaard wordt. Wel zo efficiënt. Maar u kunt er ook rechtstreeks bij. En meestal vindt de auteur het prima als u het gebruikt. Klikken op het plaatje leidt tot een vermelding van de auteursrechtelijke situatie. In de meeste gevallen is het "Public Domain", met andere woorden, de oorspronkelijke auteur heeft zijn rechten aan de gemeenschap geschonken. Soms staat er GFDL (of voluit GNU Free Document Licence) wat volgens mij vrijwel hetzelfde neemkomt. Soms staat er iets van "some rights reserved", en meestal betekent dat dan dat u het voor niet-commercieel gebruik mag gebruiken, maar dat u wel de naam van de auteut moet vermelden.

De ontsluiting van de collectie is nog een tikkie problematisch. Het idee is dat als iemand een foto er op de Commons zet, hij/zij er gelijk een pagina bijmaakt waarop de auteursrechtelijke situatie wordt uitgelegd plus wat het voorstelt. Bij voorkeur in het Engels, wat de working language van de Commons is, dus "market square of of the town of Juinen, the Netherlands, showing the statue of wethouder (alderman) Hekking in the foreground; picture taken by Martin van Dalen on xx-xx-xxxx and hereby released under CC-by-SA 2.5 NL licence".

Maar verder is het de bedoeling dat het plaatje ergens onder gecategoriseerd wordt. Bij voorkeur op een zodanige wijze dat een geïnteresseerd iemand het op zo'n zoeksleutel zou gaan opzoeken. Ik denk dat de beste methode nog is, dat u een term die vermoedelijk één niveau "hoger" ligt bedenkt, en die op de Main Page intikt bij "search". Hier dus: netherlands. Dat leidt tot de mededeling "The Netherlands is/are a country in Europe. See Category:Netherlands. U klikt op dat laatste, en vanaf daar gaat u verder graven. Misschien is er in Category:Cities in the Netherlands wel een link naar Juinen...

Als u van het vasthoudende type bent: met enig graven komt u op een lijst met alle categorieën, en dan maar "next 500". Er zijn er duizenden, maar soms vraag je je ook af hoe iemand op de gedachte gekomen is om dáárvan een categorie te maken...

Succes ermee. In elk geval: ik vind dat er fraaie foto's te vinden zijn, vooral van landschappen en steden. Kennelijk zijn er een boel mensen die het gewoon leuk vinden om hun fraaiste foto van de Grand Canyon (of zo) om niet aan de rest van de wereld ter beschikking te stellen. (En ik moet erbij zeggen dat het nut van sommige plaatjes me ontgaat, maar hoe zat het ook alweer met dat gegeven paard?)

O ja, ze hebben ook een "latest files"-link. Dan ziet u hetgeen men er laatstelijk op gezet heeft. Lichtelijk verslavend, tijdig extra harde schijven bijplaatsen...

FreeFoto

Problemen met auteursrecht krijgt u in elk geval niet als u een foto van FreeFoto gebruikt, te vinden op www.freefoto.com. Ze stellen er een paar eisen bij: u moet een Alt-tag met de tekst "(c) FreeFoto.com" opnemen, en u moet op de pagina met de foto onderstaande plaatje (freefoto.gif) opnemen, met de volgende code: <A HREF="http://www.freefoto.com/" TARGET="_blank"><IMG SRC="freefoto.gif" WIDTH="100" height="30" BORDER="0" ALIGN="bottom" ALT="FreeFoto.com"></A>. Er zitten best fraaie foto's bij. Voor de volledigheid: het is alleen voor persoonlijk, niet-commercieel gebruik.

Suggesties voor het gebruik van plaatjes

In der Beschränkung zeigt sich der Meister. Plaatjes zijn betrekkelijk omvangrijk, en al die nullen en enen moeten wel door een telefoondraadje geduwd worden voordat de gebruiker het ding ziet. Dat leidt tot wachttijden. Tenzij u een hele geduldige gebruiker hebt, loopt u de kans dat hij halverwege op "Stop" klikt en ergens anders naar toe surft. Een paar suggesties om dat soort dingen te voorkomen of te beperken:

En toch nog even een waarschuwing

Leuk, je eigen foto's op Internet zetten. Alleen: als iedereen ze kan bekijken, kan iedereen ze ook opslaan en verder verspreiden. Het is, tenzij u bijzondere trucs uithaalt, niet mogelijk om foto's tot een bepaalde kring van gerechtigden te beperken, of de mogelijkheid van opslaan uit te sluiten. (Er zijn wel scripts waarmee de rechtermuisknop wordt uitgezet, maar er wordt nog steeds een kopie van het plaatjesbestand op de harde schijf van uw bezoeker neergezet, en met enig graven is het daar terug te vinden, en apart op te slaan.) Ergo, zet niet iets op het net waarvan u later spijt mocht krijgen. Een herinnering aan een gezellige vrijpartij kan nog jaren circuleren. Om het maar even plastisch te zeggen.

U kunt nu naar Frames.