WINDOWS
Windows 10
Windows 8
Windows 7
Windows XP
WEBSITE
HTML
StyleSheet
xampp
BROWSERS
Edge
Firefox
HARDWARE
Sony e-Reader
iPhone
iPad
SOFTWARE
Thunderbird
HomeSite
PC-INFO
DNS servers
DIVERSEN
Dagboek Tobias
Stripboeken
PostNL tarieven
 

INDEX HTML
Afbeeldingen: keuze tussen jpg, gif en png
Selectie van een 'clickable image' niet tonen
Colored pixel, van een punt tot een dikke lijn
Verschillen in schrijfwijze XHTML t.o.v. HTML

Afbeeldingen: keuze tussen jpg, gif en png
Er zijn vier bestandsformaten waarin plaatjes voor web pagina's opgeslagen kunnen worden: jpg, gif, png en xbm. Het jpg-bestandsformaat wordt in het algemeen gebruikt voor foto's met veel kleuren, terwijl het gif-bestands- formaat in het algemeen wordt gebruikt voor plaatjes en tekeningen met weinig kleuren. Het png-bestandsformaat (portable network graphics) is een nieuw bestandsformaat dat uiteindelijk gif zal gaan vervangen. De modernere browsers (>4) kunnen dit formaat aan. Het percentage mensen dat een versie 4 browser gebruikt wordt steeds groter, maar is nog steeds niet groot genoeg om uitsluitend het png-formaat te gebruiken. Het xbm-formaat (x-bitmap) is een bestandsformaat dat vrijwel nooit gebruikt wordt.
Kortom, de keuze is feitelijk tussen het jpg-formaat en het gif-formaat. Informatie omtrent het jpg-bestandsformaat:
Het jpg-formaat is superieur wat betreft compressie. In Paint Shop Pro kan bij Options het compressie-niveau worden ingesteld. De compressie die kan worden toegepast is aanzienlijk. Hieronder staat een grafiek waarin de bestandsgrootte uitstaat tegen het compressieniveau.



Het JPEG algoritme verdeelt de foto in blokken van 8 bij 8 pixels en neemt het gemiddelde van de kleuren van al deze pixels. Het bewaart dit gemiddelde als de waarde voor de pixel linksboven in het blok. De kleuren van de andere pixels worden dan weergegeven als relatief tot de eerste pixel. Nu hoeven voor de resterende 63 pixels niet meer zoveel bits gebruikt te worden, omdat het kleurverschil tussen een pixel in het blok en het gemiddelde niet zo groot is. Vervolgens wordt het proces herhaald: er worden blokken gemaakt van 8 bij 8 blokken, waarbij zoveel mogelijk pixels dezelfde kleur worden gegeven. Is het kleurverschil tussen bij elkaar liggende pixels toch groot, dan lijkt het alsof de kleuren uitgesmeerd zijn.

De bron voor een jpg bestand moet een bmp- of tif-bestand zijn van 16,7 miljoen kleuren, omdat deze formaten nog alle informatie bevatten. M.b.v. 'croppen' wordt alle overbodige ruimte rondom het onderwerp weggehaald. Een jpg-bestand openen, bewerken en daarna weer bewaren als jpg betekent dat elke keer informatie wordt wegge- gooid. Het is dus verstandig om bij aanpassingen van het bestand elke keer weer uit te gaan van het orginele bmp- of tif-bestand. Als origineel ook geen gif-bestand gebruiken; een gif-bestand bestaat uit hooguit 256 kleuren. Een uitzondering hierop zijn foto's die bewaard zijn in het gif formaat.

Als web-ontwerper heb je geen grip op het aantal kleuren in een jpg-bestand: het jpeg-compressie-algoritme gooit kleuren weg naar eigen goeddunken en dit is niet in te stellen. Het algoritme is dan ook 'lossy'; je verliest informatie wanneer je de compressie toepast. Hoewel de algemene opvatting is dat een jpg bestand 16,7 miljoen kleuren bevat, staat het 'palet' van jpg inderdaad maximaal 16,7 miljoen kleuren toe, maar in vrijwel alle gevallen zal een gecomprimeerd jpg bestand minder kleuren bevatten, bijvoorbeeld enkele tienduizenden.

De structuur van het jpg-bestand maakt het erg moeilijk om (een deel van) een jpg-afbeelding trans- parant te maken. Een gif-bestand kan transparant gemaakt worden. Er wordt dan aan één kleur de eigenschap transparantie toegevoegd. Het gif-bestandsformaat is hier erg geschikt voor, omdat gif gebruik maakt van een palet: een verzameling discrete kleuren. Bij jpg ligt dit heel anders, jpg is nu juist goed wanneer het gaat om afbeeldingen (foto's) met vele kleuren.

Informatie omtrent het gif-bestandsformaat:
Het gif-bestandsformaat is een compleet ander verhaal dan voor het jpg-bestandsformaat. Gif gebruikt een palet. Bij gif gaat het in de eerste plaats om het manipuleren van kleuren en niet om compressie. Alles wat niet foto- realistisch is en geen kleurgradaties heeft, moet wel haast een beperkt aantal kleuren hebben. De vraag is dan alleen nog, hoe simpel is de afbeelding en hoe klein kan het palet zijn? Het hangt helemaal af van welk palet wordt gekozen.

Gif wordt trouwens ook gecomprimeerd, met behulp van het LZW-algoritme (genoemd naar de drie wis- kundigen Lempel, Ziv en Welch). LZW compressie heeft een grote invloed op de bestandsgrootte. LZW compressie werkt erg goed wanneer het plaatje grote horizontale vlakken van dezelfde kleur bevat. LZW is een compressie-methode waarbij geen informatie verloren gaat ('lossless'), het is gewoon een intelligente manier van opslaan.

Gif kent vier subformaten: 87a standard, 87a interlaced, 89a standard en 89a interlaced. Op alle vier sub- formaten wordt LZW compressie toegepast. Met andere woorden, een gif bestand zonder LZW compressie bestaat niet. 87a is de 'gewone' gif. 87a interlaced (en 89a interlaced) wordt ingeladen in meerdere lagen. Het is de gif-equivalent van de progressive jpg. Een animated gif is eigenlijk een filmpje van meerdere gif plaatjes achter elkaar. Tussen elke twee gif plaatjes kunnen zogenaamde 'control blocks' worden geplaatst. Dit kan alleen bij de subversie 89a en 89a interlaced. In zo'n control block kan dan worden aangegeven hoelang het volgende plaatje zichtbaar moet blijven, enzovoort.

Van een gif-plaatje kan een kleur uit het gif palet tot een 'transparante kleur' worden gekozen. De browser zal elke pixel met deze kleur niet laten zien, in plaats daarvan zie je de achtergrond. Het grote voordeel van een transpa- rante kleur is dat plaatjes niet meer rechthoekig hoeven te zijn. Dit gebeurt ook weer met een control block, daarom werkt het alleen met het subformaten 89a en 89a interlaced.

Selectie van een 'clickable image' niet tonen
Bij gebruik van een 'clickable image' zie je bij de 'klik met de muis' het selectie-kader van het plaatje.
Dit kan je voorkomen door in het bijbehorende href-statement de parameter onFocus="blur()" op te nemen.

Colored pixel, van een punt tot een dikke lijn
Met een (gekleurd) plaatje van 1 x 1 pixels kan je je eigen blokje of lijn samenstellen door de hoogte en de breedte van dit plaatje in HTML aan te passen.

Verschillen in schrijfwijze XHTML t.o.v. HTML
XHTML biedt, mits goed gebruikt, enkele voordelen boven HTML. Doordat XML-documenten well-formed moeten zijn, kunnen ze makkelijker geïnterpreteerd worden door useragents. Een correcte XML-parser moet namelijk een fatale error geven als een XML-document niet volledig correct is, terwijl bij SGML-parsers complexe error-correcties worden gedaan. Doordat voor het verwerken van XHTML minder rekenkracht nodig is kan deze ook beter verwerkt worden door useragents met minder rekenkracht, zoals mobiele telefoons en pda's.
Door de modularisatie van XHTML kan XHTML makkelijk uitgebreid worden met nieuwe elementen en attributen. Ook worden hiermee de compatibiliteitsproblemen opgelost die ontstonden door onofficiële uitbreidingen van de HTML-standaard die niet door alle browsers werden ondersteund. Lowercase
Alle tags en attributen moeten nu lowercase zijn; standaard HTML was niet case-sensitive.
Alle tags sluiten
In XHTML moeten alle tags worden gesloten. De meest simpele manier is om de de sluitingstag toe te voegen aan de al bestaande tag; bv. <br /> Quotes gebruiken
In HTML mocht je bij numerieke waarden de quotes weglaten; in XHTML mag dit niet meer. Alle waarden van attributen moeten nu tussen quotes staan.
Het id-attribuut gebruiken in plaats van het name-attribuut
Dit is echter niet altijd compatibel met oudere brouwsers; het is daarom verstandig om voorlopig zowel het id-attribuut als het name-attribuut te gebruiken.
Doctype's in XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Doctype in XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Doctype van deze website
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

opmerkingVersie 1.1 verschilt met de versie 1.0 op een aantal punten:
- slechts één document type, nl. xhtml 1.1
- geen 'transitional' document types meer
- alle ondersteuning voor 'deprecated' elementen is verwijderd
- xhtml 1.1 is steeds Strict
- het name attribuut is volledig vervangen door id.

Submenu WEBSITE | HTML | StyleSheet | Xampp |