Essays

Een handige tool voor HTML, het één-pixel-bestand

Home - Columns - Politiek en maatschappij - Filosofie en psychologie - Wetenschap - Cursussen - Computer - Diversen | Printversie

(nautische historie zeiltijd - historie stoomtijd - zeilcursus - motorbootcursus - evolutieleer - evolutie mens - groepsgedrag)



(Grandjean Stenotype ©Schrijf.be copywriting)


Met name bedoeld voor wie een gratis domein heeft met slechts beperkte toegang tot de HTML.
U wordt verondersteld over een basic kennis van HTML te beschikken, waarbij het al voldoende is
als u een afbeelding kunt importeren en positioneren, en het font kunt wijzigen.

Hoe komt u aan een pakket 1-pixel-bestanden? Onderstaande vierkantjes zijn 1-pixel-bestanden (.GIF) die om praktische redenen "opgepompt" zijn weergeven. Download deze (rechter muistoets en 'Opslaan als'), en upload vervolgens zoals u dat ook doet met foto's voor uw site. Download vooral ook het transparante bestand, want dat dient voor het positioneren, de hoofdfunctie van het tool.
TransparantWitLicht-grijsDonker-grijsZwartBlauwRoodGeelPaarsGroen Wat is het doel? De belangrijkste functie van het 1-pixel-bestand is de positionering van afbeeldingen en tekstregels, ongeacht de gebruikte browser en ongeacht de mate waarin er wordt ingezoomd. Bijkomende aardigheid is de aanmaak van zwarte, grijze of gekleurde horizontale en verticale lijnen met variabel dikte. Een lijn is immers niets anders dan een zeer platte rechthoek. Let vooral op de handige horizontale 'telescoop-lijn'. De tool blijkt ook zeer efficiënt bij het omlijnen of omkaderen van een afbeelding die visueel niet goed loskomt van de achtergrond. En tenslotte kunt u er decoratieve vormen en balken mee creëren, vooral in combinatie met afbeel- dingen. U vindt al die HTML teveel werk? Door linksboven op "Printversie" te klikken, haalt u een Word-document binnen met de in dit essay aangeboden HTML in bewerkbare vorm. U kunt dan het hele blok selecteren, kopiëren en in uw site plakken. Let erop dat ogenschijnlijke regelomslagen in werkelijkheid vaak automatische omslagen zijn, en dat dit voor de goede werking ook zo moet blijven. Afbeeldingen positioneren Bijna iedereen heeft wel eens meegemaakt dat een zorgvuldig opgebouwde web-pagina in chaos blijkt te verkeren als je hem trots aan een goede vriend of vriendin wilt laten zien. Wellicht was er sprake van een andere browser of een andere zoom-instelling. Afbeeldingen lopen uit hun veld en teksten lopen dood tegen een ernaast of erboven bedoelde af- beelding, als de tekst er tenminste niet dwars doorheen blijkt te lopen... Het probleem is dat deze parameters een verschillend effect hebben op tekst en afbeelding. Anders gezegd: Tekst en plaatjes groeien en krimpen niet in dezelfde mate. En dat gaan wij oplossen met een simpele tool. Wij trekken een transparant 1-pistel-bestandje m.b.v. het attribuut 'width' of 'heigh' uit tot een op elke achtergrond onzichtbare streep met een dikte van 1 pixel, en laten die zowel horizontaal als verticaal dienst doen als space-maintainer. Het is immers een plaatje tussen de plaatjes, en is dus veel minder gevoelig voor verstoring van de verhoudingen binnen de web-pagina dan een hele rij spaties of enters. De uitleg van het principe gaat het beste aan de hand van een paar voorbeelden. De waarde van het tool komt het beste tot zijn recht in vb.2. Positionerende één-pixel-bestanden zijn groen gekleurd, afbeeldings-adressen rood, overige adres- sen blauw en samenhangende parameters rood en paars.
vb.1 (horizontale positionering en space-maintaining)
Of met het attribuut align="right" (let erop dat eerst afb-B wordt geplaatst, en dan pas afb-A) vb.2 (horizontale + verticale positionering en space-maintaining, en het omgaan met 'align') Algemeen: Een afbeelding die wordt ingevoerd met het attribuut align="right" komt rechts in beeld te staan, en anders uiterst links. Bij het horizontaal of verticaal koppelen van afbeeldingen verschilt het resultaat afhankelijk van de gebruikte browser, en dat terwijl het zonder dat verschil al zo verwarrend is: De enige manier om een met elke browser gelijk resultaat te krijgen is de font-grootte plaatselijk op nul te zetten, waardoor: ▪Zonder align="right" - Op één regel ingevoerde afbeeldingen komen direct naast elkaar te staan, van links naar rechts "gestapeld". Op opeenvolgende regels ingevoerd, komen zij direct onder elkaar te staan. ▪Met align="right" - Op één regel ingevoerd ingevoerd, komen zij direct naast elkaar, van rechts naar links gestapeld. Op opeenvolgende regels ingevoerd, komen zij direct naast elkaar (!), zelfs zonder een verticale sprong. ▪De 1e afb. "met" en de 2e "zonder" - Op één regel ingevoerd komen zij op afstand naast elkaar, eveneens zonder verticale sprong. Zonder de font-grootte plaatselijk op nul te stellen blijkt de presentatie van gekoppelde afbeeldingen bij de diverse browsers op z'n zachts gezegd niet eenduidig, met name m.b.t. de verticale sprong en het al dan niet aanwezig zijn van ruimte tussen de afbeeldingen (dus al dan niet direct gekoppeld). Als u naast een met align="right" rechts staande afbeelding een plaatje zonder align plaatst, komt die- laatste uiterst links in het veld te staan i.p.v. direct links naast het eerste plaatje. Het volgende in te voeren plaatje dat weer wel met align="right" is toegerust komt wel weer links naast zijn rechts lig- gende soortgenoot terecht, maar zakt daarbij tot onder het uiterst linker plaatje naar beneden. Mocht dat hem onder zijn soortgenoot brengen, dan schiet hij er onder langs verder naar rechts. Tekst gedraagt zich als een afbeelding zonder eigen align-attribuut. Naast een afbeelding kunt u slechts één tekstregel plaatsen: Linksonder, of rechtsboven, -midden of -onder, afhankelijk van de waarde die u aan het attribuut 'align' van het plaatje heeft gegeven. Plaatst u de afbeelding echter met align="right" rechts in het veld, dan kunt u met tekst en plaatjes vrij over het veld links van de afbeelding beschikken. Reden waarom bij home-made sites de afbeeldin- gen zo vaak rechts in het veld staan. Maar dan blijken er op andere browsers dan de uwe of bij een andere zoom-instelling problemen te kunnen ontstaan: De tekst naast de afbeelding loopt dan tegen het plaatje aan of gaat er -afhankelijk van het type browser- zelfs dwars doorheen. Of de tekst onder de afbeelding valt een stuk hoger uit, met hetzelfde gevolg. Het eerste is een kwestie van 'uit de buurt blijven' en checken met een andere browser. Aan het tweede is door positioneren m.b.v. een transparant 1-pixel-bestand echter wat te doen. Toelichting op onderstaande HTML: Wij gaan uit van een afbeelding (afb-A) die met het attribuut align="right" rechts in het veld is ge- plaatst. De eerste groene regel (zonder align) is bedoeld om het verschil op te vangen in de wijze waarop bv. Firefox en Explorer omgaan met de eerste regel naast een rechts geplaatste afbeelding. Er verschijnt uiterst links een 1 pixel groot plaatje dat de browsers dwingt de 1e regel van tekst-1 identiek te behan- delen (deze space-maintainer komt als plaatje immers gelijk met de bovenrand van afb-A). De font-regels volgen op een Enter en worden afgesloten met een Enter, en dat duwt de tekstregels twee regels naar beneden. Dat had natuurlijk ook gekund door in de eerste groene regel voor Height een waarde 15 of 30 te nemen i.p.v. Height="1". De tweede groene regel (zonder align) bepaalt als verticale space-maintainer de positie van afb-B. De hoogte is 15 (de font-grootte) om een regel wit tussen tekst-1 en afb-B te krijgen. De derde groene regel (met align) regelt als een horizontale space-maintainer de afstand tussen de twee afbeeldingen. De vierde (zonder align) doet voor afb-B wat de eerste voor afb-A deed. De zesde en de zevende groene regel (zonder align) zorgen ervoor dat de tekst onder afb-B resp. afb-A komt te staan. De waarde voor hun attribuut 'height' is uit te rekenen, maar het gaat veel sneller met trial-and-error. De beschreven constructie blijkt zeer stabiel en is alleen nog onderhevig aan onregelmatigheden bij de letter-grootte van de tekstregels, en niet meer aan die van de lege regels. Bij een gesloten tekst- blok naast de afbeelding werkt dus alleen de eerste groene regel, maar dat is wel de meest invloed- rijke van het stel. HTML accepteert slechts één lege regel op rij en "eet" alle extra met enter gemaakte lege regels op. Als u in een HTML-document meer dan één lege regel in een tekstblok wilt opnemen, is het prak- tischer op elke extra lege regel de HTML-code [span][br][/span] (vervang de rechte haken door pijl- haken) te plaatsen dan een 1-pixel-bestand space-maintainer te gebruiken. Is er echter sprake van tekst naast een plaatje, dan is een verticale space-maintainer betrouwbaarder. Gekleurde lijnen en de telescoop-lijn Een horizontale of een verticale lijn is in feite een dunne rechthoek met een hoogte, respectievelijk breedte van 1 of 2 pixels.
vb.3 (1 pixel dikke horizontale zwarte lijn en 2 pixel dikke verticale blauwe lijn)
vb.4 (1 pixel dikke zwarte lijn als telescoop-lijn) Interessant is de toepassing als horizontale telescoop-lijn. Deze lijn bestaat uit twee delen, waarvan de ene links wordt gepositioneerd, en de ander met align="right" aan de rechter kant van het veld. Bij verbreding of versmalling schuiven deze lijnstukken uit en in elkaar, waarbij de uiteinden aan de pagina-randen blijven "kleven". Eventueel laat u de lijn- stukken met een space-maintainer iets vrijkomen van de pagina-randen. Omdat objecten dunner dan een tekstregel elkaar naar verschillende regels drijven, moeten wij de font-grootte plaatselijk op nul zetten. Dezelfde techniek is natuurlijk ook toepasbaar voor een pagina-brede bannerbalk. Voorbeeld van deze techniek zijn de twee pixel dikke blauwe scheidingslijnen in dit artikel. Afbeelding omlijnen of alleen een lijn onder en/of boven het plaatje Soms wilt u een afbeelding omkaderen of voorzien van een onder- en bovenlijn, en soms wilt u alléén een onderlijn om de afbeelding te scheiden van de eronder staande toelichting. Hoewel de omlijning naderhand wordt aangebracht, zal hij op een andere browser of met een andere instelling niet weg- lopen van de afbeelding. Een licht-grijze, soms midden-grijze, lijn is vaak een goede keuze.
vb.5 (boven en onderlijn toevoegen aan een afbeelding met toelichtingstekst) De lengte van een liggende kaderlijn moet overeenkomen met de breedte van de afbeelding (rood). Deze afbeelding komt 50 pixels vanaf de linker rand. De toelichting springt 10 pixels in (60).
vb.6 (een afbeelding met toelichtingstekst geheel omkaderen) De lengte van een staande kaderlijn moet overeenkomen met de hoogte van de afbeelding (paars), en de lengte van de liggende lijn met de breedte plus tweemaal de lijndikte (rood). Deze afbeelding komt 50 pixels vanaf de linker rand. De toelichting springt 10 pixels in (60). vb.7 (meer afbeeldingen met toelichtingstekst geheel omkaderen) U ziet dat elk van de vier met img beginnende blokken eenvoudig is verdubbeld, zij het met een halvering voor de afstand tot de linker rand die nu de afstand tussen de plaatjes wordt. De lengte van een staande kaderlijn moet overeenkomen met de hoogte van de afbeelding (paars), en de lengte van de liggende lijn met de breedte plus tweemaal de lijndikte (rood). Deze afbeelding komt 50 pixels vanaf de linker rand en de onderlinge afstand is 25 pixels. De toelichting springt 10 pixels in (de eerste 60, de tweede hangt af van de tekst-lengte). Voorbeeld van deze techniek is de te downloaden reeks 1-pixel-bestanden boven in dit artikel. Kleurvlak, vrij in de ruimte of langs een foto Het 1-pixel-bestand leent zich uitstekend voor het met kleur decoratief opfrissen van uw site. U brengt het bestand daartoe op maat met de attributen height en width, en positioneert het als boven bespro- ken. Als u met het align="right" attribuut rechts een verticaal vlak positioneert kunt u links ervan tekst en afbeeldingen toevoegen. Of u versterkt een afbeelding door een grijze of gekleurde band langs één van de zijden ervan te leggen. En mocht u genoeg krijgen van de gekozen kleur, dan kunt u die niet alleen met slechts weinig moeite wijzigen, maar u kunt ook kiezen voor transparant. Het kleurvlak wordt dan onzichtbaar zonder dat de ruimte-innemende functie verloren gaat.
vb.8 (kleurvlak links tegen een afbeelding)
Conclusie Wonderlijk dat zo'n simpele tool, die iedereen met een minimale kennis van HTML in principe zelf kan aanmaken en gebruiken, voor zover ik weet nog niet niet tot het gebruikelijke gereedschap behoort. Dit zal wellicht te maken hebben met de mogelijkheden van geavanceerde HTML-technieken, maar die komen voor de gemiddelde blogger die slechts beperkt toegang heeft tot de HTML van zijn site niet in aanmerking. Deze bijdrage is dan ook bedoeld voor een ieder die een gratis web-log heeft, niet al teveel tijd wil be- steden aan geavanceerde HTML, en die zijn site met basic middelen toch een beetje wil opwaarderen. Tenslotte een tip: Maak bij het positioneren gebruik van de gratis te downloaden "Screen Measure" beeldscherm-lineaal die afstanden meet in pixels en die voor precisiewerk is voorzien van loep-ondersteuning.
Naar boven Meer essays


# menno kater - Een handige tool voor HTML, het één-pixel-bestand