Of hoe je met enkele hele kleine gifjes de gekste dingen kan uithalen. Op mijn space zagen jullie al enkele voorbeelden. Zoals ik in de log Plaatjes Plaatsen al heb uitgelegd kun je door de width en height aan te passen een plaatje in verschillende formaten laten zien. Ook daar zag je al hoe ik van een enkel gifje dit maakte:
Dit is het gifje dat ik gebruikt heb (ik heb er even een randje om gezet anders is het bijna niet te zien. Sla dit gifje op*(zie onderaan deze log) en zet de URL telkens achter src= in de volgende code:
In het midden kun je bijvoorbeeld een tekst of een plaatje plaatsen en je kunt de width en height natuurlijk naar eigen dunken aanpassen maar dat laat ik aan jullie eigen creativiteit over. Nog een voorbeeld:
Ja leuk maar we willen meer! Want door telkens de paragraphcode <P></P> te gebruiken krijgen we steeds dezelfde afstand, en natuurlijk wil je die zelf ook kunnen bepalen. Je zou natuurlijk met de breakcode <BR> kunnen werken maar dan krijg je de gifjes weer direct onder elkaar, ook niet helemaal wat we willen. Dus nemen we een zogenaamd transparant gifje. Ik kan het julie niet laten zien (omdat het transparant en dus onzichtbaar is) maar het is gewoon een heel simpel klein transparant gifje waarvan je dus weer de height kan bepalen en dus kunt bepalen hoeveel ruimte er tussen de lijnen komt. We moeten nu dus wel met de breakcode <BR> werken
!Let wel goed op dat je geen spaties of enter tussen de tags plaatst, als dat gebeurt krijg je een scheef figuurtje!
Oke, nog niet uitgepuzzeld? Dan gaan we nog even door. Ik plak de tegengestelde gifjes om en om aan elkaar met de breakcode <BR>, maar zonder de transparantgif er tussen te zetten. Pas de width en height naar eigen smaak aan.
Oh en dan gaan we de horizontale en verticale gifjes vast en zeker ook weer met elkaar combineren?! Nou en of...maar... pak dan alvast je rekenmachine erbij! Dit voorbeeld zagen jullie eerder op deze space:
Het is als volgt op gebouwd: Gif1 horizontaal|BR>Gif 2 horizontaal|BR|Gif 3 verticaal|Gif 4 verticaal|Plaatje|Gif 5 verticaal|Gif 6 verticaal|BR|Gif 7 horinzotaal|BR|Gif 8 horizontaal Om nu de juiste maten te krijgen neem je de som van de breedte van de verticale gifjes plus de breedte van je plaatje, dit wordt de breedte van je horizontale gifjes. De hoogte van je verticale gifjes is de hoogte van je plaatje (mag ook iets meer zijn maar beslist niet minder). Je kunt dus beslist niet je eigen plaatje even tussen de code plakken zonder de maten aan te passen! Let ook weer goed op dat je geen spaties of enter tussen de tags plaatst, zelfs niet voor de afsluitende paragraph tag</P>
Voorlopig mogen jullie hiermee puzzelen maar natuurlijk zijn er nog veel meer mogelijkheden. Ik ben op dit moment nog bezig de codes daarvan uit te testen (de editor van MSN is nog al eens eigenwijs). Zeer binnenkort vind je ze hier op de space!
* Om het alvast gemakkelijk te maken heb ik een "zipje" gemaakt van alle gifjes, inclusief het transparant gifje. Dat mag je hier (klik) downloaden. Maak gerust gebruik van de gifjes en de codes, maar zet de gifjes even op je eigen opslag want ik wil veel met jullie delen maar toch liever niet mijn bandbreedte!
Een plaatje als illustratie plaatsen in je log is heel simpel. Je gebruikt de code <img src="http://mijnplaatje.jpg"> en hup daar is je plaatje. Zet hem daar waar jij hem hebben wilt en klaar.
Standaard komt een plaatje dan aan de linker kant te staan en wordt de onderkant van de afbeelding op één lijn geplaatst met de onderkant van de tekst er naast. Door de code weer aanvullen met align=right|center|left voor de horizontale uitlijning en align=top|middle|bottom voor de verticale uitlijning kun je dit aan je eigen wensen aanpassen. Wil je bijvoorbeeld je tekst links en je plaatje rechts ervan dan wordt de code dus <img src="http://mijnplaatje.jpg" align=right> en ga daarna verder met je tekst.
Het ligt aan het formaat van het plaatje (en je kolom of tabel) hoe het verder uitgelijnd wordt. Ben je niet helemaal tevreden dan kun je het formaat aanpassen met width en height. Als je die niet in je html opneemt zal de editor dit zelf doen en automatisch het werkelijke formaat kiezen, door zelf de width en height aan te geven kun je het formaat dus veranderen. Let wel even op dat je de verhoudingen gelijk houdt, ander kon je weleens een heel vreemd plaatje krijgen (ook soms wel leuk). Stel dus dat je een plaatje hebt dat in werkelijk 400 bij 400 pixels is, dan kun je het gemakkelijk verkleinen naar bijvoorbeeld 300 bij 300. Oke maar even weer een paar voorbeelden:
Horizon taal uit lijnen
Het plaatje staat links en de tekst komt er rechts van te staan. Het ligt natuurlijk aan het formaat van het plaatje en de lengte van je tekst maar uiteindelijk gaat de tekst onder het plaatje verder.
Het plaatje staat nu rechts en de tekst komt aan de linker kant ernaast. Totdat de ruimte gevuld is, daarna gaat de tekst weer verder onder het plaatje.
Code
<img border="0" src="http://mijnplaatje.jpg" align="left" width="87" height="106">Hier je tekst
<img border="0" src="http://mijnplaatje.jpg" align="right" width="123" height="153">Hier je tekst
Verti caal uit lijnen
align=top
align=middle
Code
<img border="1" src="http://mijnplaatje.jpg" align="top" width="151" height="181">Hier je tekst
<img border="1" src="http://mijnplaatje.jpg" align="middle" width="160" height="194">Hier je tekst
De oplettende lezer heeft al gezien dat ik vier keer hetzelfde plaatje heb gebruikt en steeds de width en de height heb aangepast. En misschien is je ook opgevallen dat je ook je plaatje een randje kan geven door een waarde achter border= in te vullen. Als je van je plaatje een hyperlink maakt zul je ontdekken dat er automatisch een randje om je plaatje komt, misschien wil je dat juist niet, dan zet je de waarde achter border= terug op nul.
Tooltip: Je hebt vast wel eens opgemerkt dat er een tekst verschijnt als je met je muis op het plaatje blijft staan. Dit wordt de tooltip genoemd. Je kan zelf de tekst bepalen door de code Alt="Je tekst" binnen de imagetag te plaatsen. Leuk als je bijvoorbeeld een raadseltje plaatst, je kunt de oplossing dan in je tooltip geven.
Tenslotte zagen de trouwe bezoekers gisteren dit probeerseltje op mijn space dat gemaakt is van 1 enkel gifje waarvan ik telkens de width en height heb aangepast.
Dit is het gifje waarmee het gemaakt is
Er zijn nog veel meer mogelijkheden! Binnenkort staan ze op deze space
Door telkens een tabel in een tabel te zetten, het nesten van tabellen, kun je allerlei leuke effecten creëren. Zoals in dit voorbeeld, je geeft elke tabel een ander leuk achtergrondje. Speel nog wat met randjes en je krijgt een leuk kunstwerkje. Door verder de celspacing code te gebruiken gaat iedere tabel mooi in het midden staan en worden alle randjes even dik, zowel onder en boven als aan de zijkanten. Pas eventueel het cijfer achter celspacing aan om een dikkere of dunnere rand te maken. Eventueel kun je op Mix-N-Match Backgrounds leuke achtergrondjes bij elkaar zoeken. De code die je daar krijgt zal echter niet werken in je space. Gebruik onderstaande code en plak de url van je achtergronden op de plekken van plaatje 1, 2 en 3.
Natuurlijk wil je ook de baas zijn over waar je tekst verschijnt in je tabel. Dat is mogelijk met codes zowel in de Paragraph-tag (<P>) als in de Tabeldata-tag (<TD>). De codes die je daarvoor nodig hebt zijn:
align=left | center | right
om de horizontale plaats aan te geven
te gebruiken in <P> en in <TD>
valign=top | center | bottom
om de verticale plaats aan te geven
alleen te gebruiken in <TD>
In het volgende voorbeeld heb ik de align= in de <p> geplaatst zo kun je dus in een cel je tekst steeds ergens anders laten verschijnen. Je moet daarvoor wel telkens een nieuwe Paragraph (<P>) aanmaken waardoor deze steeds een stukje lager komt te staan.
Natuurlijk kun je ook varieren met de codes in zowel de Paragraph <p>als de Tabeldata tag<TD> Stel dat je je tekst mooi in het midden uitgelijnd wilt hebben, maar je onderschrift rechtsonder. Zoals in dit voorbeeld:
Keenderveske 'nen Doezendpoot oet Bookel en 'ne Bromvleeg oet de Lut', dee gung'n te hoop' hen daansen meer ze hà'n stiewe but'. De bromvleeg was an 't nöster'n: i-j trapt mi-j op de veut', 'n doezendpoot zèè: 't zal wa want ik heb zovöl peut'.
Hennik van'n Scheenken
De code wordt dan: <table border="1" width="545" heigth="400"><tr> <td width="100%" align="center" valign="top">Tekst<BR>Tekst<BR>Tekst<BR>Enzovoort<BR><BR><BR><p align=right>Onderschrift</P><td></tr></table>
Nou dit is het voorlopig weer eventjes. Probeer zelf een beetje met de codes te experimenteren, je ziet vanzelf welk effect het heeft. Kijk altijd wel goed hoe de code opgestelt is, een spatie per ongeluk verwijderen kan tot gevolg hebben dat je alles kwijt bent! Zet daarom je code ook altijd eerst even op je kladblok.
Je tekst begint met <P> (Paragraph) en je sluit het af met</P> Daar tussen in kun je nog aardig wat codes kwijt om je tekst er zo uit te laten zien zoals jij dat wilt.
<FONT> Hiermee bepaal je je Lettertype (face), de grootte (size) en de kleur (color).
Dit zijn Lettertypes die meest ook in de editor staan of op de meeste computers, want om een lettertype te kunnen zien moet het wel op de computer staan. Je kunt in je browser instellen of je automatisch lettertypes wilt downloaden Kies Extra's en opties, tabblad beveiliging, aanpassen, vink het hokje lettertypes automatisch downloaden aan. Heb je dit niet dan zou het kunnen dat je onderstaande lettertypes niet kunt zien, je pc zoekt een soortgelijk lettertype op. Hier een paar aparte lettertypes:
<P><FONT face="Old English text MT"size="4" color="#FFFFFF">Old English Text MT</Font></P>
Old English Text MT
Je kunt ook eens zelf op zoek gaan in je word programma naar lettertypen of op het internet.
Maar er is meer mogelijk! Hier volgen nog een aantal codes die je tussen de FONT-tags kan zetten:
Code
Resultaat
<h1>
Heading 1
<h2>
Heading 2
<b>
Bold Text
<big>
Large Text Style
<I>
Italic Text
<strike>
Strike trough Text
<strong>
Strong Emphasis
<u>
underline
<tt>
Typewriter Text
<sup>
Superscript
<sub>
Subscript
<pre>
Preformatted Text
<em>
Emphasis
Gebruik de code na de font-tag en sluit hem weer af voordat de font-tag wordt afgesloten. Voorbeeld: <P><FONT face="" size="" color=""><big>Hier je tekst</big></FONT></P>
Nog een paar tips: Wil je gewoon met een nieuwe zin beginnen maar de Paragraph niet afsluiten </P> gebruik dan <BR> Wanneer je de Paragraph afsluit moet je namelijk ook weer opnieuw je fontcode invoeren. Wanneer je in je tekst met een ander lettertype verder wilt sluit je eerst je vorige lettertype af met</FONT> en maakt dan een nieuwe fontcode aan.
Hoogte en breedte De grootte van een tabel wordt bepaald door width en height. De breedte en hoogte van een tabel kunnen zowel in pixels als in percentages worden opgegeven. Dit kan voor de gehele tabel, een rij of een enkele cel opgegeven worden.
Gebruik je heigth niet dan past de hoogte zich automatisch aan de inhoud aan. Wanneer je dit anders wilt zul je het aantal pixels aan moeten geven.
Gebruik je 1 cel, dan kun je het beste de width="100%" gebruiken, wil je een bepaalde breedte van een plaatje, Kijk dan hoe breed het plaatje is in pixels en gebruik bijvoorbeeldwidth="350"
Gebruik je meerdere cellen naast elkaar, zorg dan dat je de cellen verdeeld, samen moet het 100% zijn.
Bij het laatste voorbeeld moet je wel colspan gebruiken voor de cellen die breder zijn. Het cijfer achter de colspan is afhankelijk van het aantal cellen die de cel beslaat.
We kunnen al een plaatje als achtergrond in de tabel zetten. Dat plaatje herhaalt zich dan in de hele tabel. Soms is dat juist niet mooi! Dan zijn er ook andere mogelijkheden. Daarvoor moet de code in de <table> aangevuld worden met style= Achter deze code bepaal je hoe de achtergrond van je tabel eruit gaat zien. Je hebt de volgende mogelijkheden :
repeat: het plaatje wordt horizontaal en verticaal herhaald.
repeat-x: het plaatje wordt alleen horizontaal herhaald.
repeat-y: het plaatje wordt alleen verticaal herhaald.
no-repeat : het plaatje wordt niet herhaald.
background-position : [ top | center | bottom] left | center | right]
[ top | center | bottom] : bepaal of het plaatje bovenaan, in het midden of onderaan moet komen.
[ left | center | right] : bepaal of het plaatje links, in het midden of recht moet komen.
je kunt zowel horizontaal als verticaal aangeven bijvoorbeeld top center (het plaatje komt bovenaan in het midden)
background-color : hexcode van je achtergrondkleur
De style wordt afgesloten met " en vervolg daarna met background=url van je plaatje. Sluit uiteindelijk de tabletag met > Tijd voor de voorbeelden met de codes
Plaatje zonder herhaling, rechts onderaan
<table border="1" width="100%" height="200" style="background-repeat: no-repeat; background-color: #003366; background-position: right bottom" background=hier de url van je plaatje> <tr> <td>hier je tekst </td> </tr> </table>
Plaatje zonder herhaling, links onderaan
<table border="1" width="100%" height="200" style="background-repeat: no-repeat; background-color: #003366; border: background-position: left bottom" background=hier de url van je plaatje> <tr> <td>hier je tekst </td> </tr> </table>
Plaatje zonder herhaling, rechts boven
<table border="1" width="100%" height="200" style="background-repeat: no-repeat; background-color: #003366; background-position: right top" background=hier de url van je plaatje> <tr> <td>hier je tekst </td> </tr> </table>
Plaatje zonder herhaling, links boven
<table border="1" width="100%" height="200" style="background-repeat: no-repeat; background-color: #003366; background-position: left top" background=hier de url van je plaatje> <tr> <td>hier je tekst </td> </tr> </table>
Plaatje herhaalt horizontaal boven
<table border="1" width="100%" height="200" style="background-repeat: repeat-x; background-color: #003366; background-position: right top" background=hier de url van je plaatje> <tr> <td>hier je tekst </td> </tr> </table>
Plaatje herhaalt verticaal links
<table border="1" width="100%" height="200" style="background-repeat: repeat-y; background-color: #003366; background-position: left top" background=hier de url van je plaatje> <tr> <td>hier je tekst </td> </tr> </table>
En zo zou ik door kunnen gaan. Maar daar mag je verder zelf mee knutselen. Gebruik bijvoorbeeld maar eens center in plaats van right of left en het achtergrondplaatje staat in het midden.
Wanneer je de width op 100% laat staan past de tabel zich altijd automatisch aan de breedte van de kolom waarin het bekenen wordt. Er is bijvoorbeeld verschil tussen de breedte van de kolom op de hoofdpagina van je space en de weblogpagina. Waneer je dan een cijfer voor het aantal pixels invult komt de tabel niet mooi in het midden op een van beide pagina's. Deze log is dan ook beter te bekijken op de weblogpagina, op de hoofdpagina is de kolom veel smaller. Probeer het maar eens. Je kunt het ook oplossen door de div-tags te gebruiken op deze manier: <div align="center"><center>hier je tabelcode</center></div>. Nou dit is wel even weer genoeg. Ik hoop dat jullie er iets aan hebben.
"100%" width="100%" background=URL VAN JE ACHTERGRONDPLAATJE border=0>
<TBODY><TR>
<TD width=
"100%"><P>PLAATS HIER JE TEKST</P></TD></TR></TBODY></TABLE>
Tip: Pas de width en height naar believen aan, de width kun je het beste op 100% laten, de height kan je weg laten, dan past de hoogte zich automatisch aan. Tip: Wil je de tekst niet helemaal bovenaan werk dan met de <BR> tag (zie ook hieronder)
Wil je er een randje om hebben?
De code:
<TABLE height=
"100%" width="100%" background=URL VAN JE ACHTERGRONDPLAATJE border=5 bordercolor="#FFFFFF">
<TBODY><TR>
<TD width=
"100%"><P>PLAATS HIER JE TEKST</P>
</TD></TR></TBODY></TABLE>
De dikte van de rand kun je aanpassen door het cijfer achter border te veranderen, de kleur van de rand kun je aanpassen door de HEX achter bordercolor te veranderen. Verder kun je in de tekst je lettertype en tekengrootte en kleur aanpassen door de tags: <FONT face=naam van lettertype color= #hex van de kleur size=cijfer>TEKST</FONT>
Voor onmogelijk veel achtergrondjes en een kleuren generator met hex codes en nog veel meer tips truucs en tools surf je even naar Leejoo"s Webhebbies
Strumenti 
(ik heb er even een randje om gezet anders is het bijna niet te zien. Sla dit gifje op*(zie onderaan deze log) en zet de URL telkens achter 
xxx Marijke
Het plaatje staat links en de tekst komt er rechts van te staan. Het ligt natuurlijk aan het formaat van het plaatje en de lengte van je tekst maar uiteindelijk gaat de tekst onder het plaatje verder. 
