Afbeeldingsformaten png, gif en jpg

uit de cursus Basiskennis HTML5 (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Volgende video: Audio plaatsen op webpagina

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Basiskennis HTML5 (2019)

perm_identity Belinda | video_library 55 video's | query_builder 3:02:53

Webpagina’s maken met HTML

Om webpagina’s correct te kunnen voorvertonen door browsers is het essentieel dat je de juiste HTML-tags verbindt aan de content. In webdesign is namelijk de content gescheiden met de opmaak. Zoekmachines gebruiken de HTML-structurering om betekenis en waarde aan de content te verbinden. Maak je niet gebruik van de juiste structurering dan zul je dit terugzien in de zoekresultaten. Slecht gestructureerde webpagina’s worden minder goed geïndexeerd

Doelgroep van deze cursus

Iedereen die wil leren hoe je statische websites maakt of haar/zijn kennis wil uitbreiden van webdesign-technieken in het algemeen. Heb je bijvoorbeeld al ervaring met het maken van websites met een CMS als WordPress. Dan nog is het bijna onmisbaar om voldoende begrip te hebben van de broncode.

Wat ga je leren

In de cursus basiskennis HTML5 leer je hoe je webpagina’s structureert met de juiste HTML-tags. Je krijgt uitgebreid uitleg en inzicht in de juiste wijze waarop je de html-tags toepast.

Je leert hoe de juiste mappenstructuur voor webproducties in de zogeheten Local Root Folder. je krijgt uitleg over de semantische betekenis van de html-tags en leert hoe je pagina’s structureert conform de regels van het W3C.

Eventuele vervolgcursus

Een logische vervolgcursus is de cursus Basiskennis CSS. Hierin leer je de vormgeving van webpagina’s onder de knie te krijgen met CSS. Dit is de werkwijze voor het creëren van prachtige webpagina’s. Eerst zorgen dat de HTML op orde is en vervolgens de vormgeving bepalen met CSS.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je geen specifieke voorkennis nodig. Algemene kennis van de computer is wel belangrijk.

In deze video ga ik uitleggen welke verschillende bestandsformaten er zijn voor afbeeldingen.

En waarvoor deze formaten bedoeld zijn.

Om één en ander duidelijk te maken heb ik de pagina voorzien van een achtergrondkleur met deze inline stijl.

Ik selecteer de afbeelding die ter versiering dient.

Kopieer deze met commando C .

Met commando V plak ik de afbeelding twee maal onder elkaar op de regel.

Het img-element is een inline element en deze afbeeldingen staan daarom op de webpagina gewoon naast elkaar.

Van de eerste afbeelding maak ik een .jpg.

En de tweede is een .gif en de derde wordt een .png.

Alle drie deze afbeeldingen staan in de local root folder, in het mapje img.

En ze worden ook alle drie gevonden.

Eigenschap van een jpg is dat deze geen transparantie ondersteunt.

En dus altijd een witte achtergrond zal tonen.

De tweede afbeelding is een gif-bestand.

En voor gif geldt dat deze wel transparantie kan ondersteunen.

Maar dan alleen honderd procent transparantie.

Om erg hakkelige randen te voorkomen moet je dan wel een randkleur opgeven.

Standaard is die randkleur wit en dat zie je ook bij deze afbeelding.

Als je goed kijkt zie je een kleine rand van witte pixels.

Had ik tijdens het wegschrijven van de afbeelding de huidige achtergrondkleur geweten.

Dan had ik dit kunnen aangeven als randkleur.

Maar erg praktisch is dat niet.

Want als de paginakleur weer verandert moet ik ook de randkleur van de afbeelding weer aanpassen.

Als je graag gebruik wilt maken van transparante afbeeldingen.

Dan kun je beter gebruik maken van een png.

Deze ondersteunt zelfs gedeeltelijke transparanties.

Ik plak nogmaals de code voor het plaatsen van een afbeelding.

En ik verander de naam in de naam boot.jpg.

Het formaat van deze afbeelding is px bij px.

Dus die pas ik aan bij de With en de height.

Voor realistische afbeeldingen met veel kleurnuances, zoals deze, gebruik je het liefst het jpeg-formaat.

Je kunt ook afbeeldingen willen plaatsen waarin delen van de afbeelding transparant zijn gemaakt.

En dat heb ik voorbereid met een png.

Voor afbeeldingen met graduele transparanties gebruik je het png-formaat.

Ook voor graduele afbeeldingen maak je gebruik van een png.

Deze heb ik voorbereid als boot-vignet.

Dat kun je mooi zien bij deze vignet afbeelding.

Waarin de afbeelding langzaam naar transparant oplost.

Wijzig de achtergrondkleur bijvoorbeeld in indianred.

En zie hoe mooi het vignet nu in deze kleur rood verdwijnt.

Wat het gif-formaat nog wel erg interessant maakt. En dat doe ik even voor met deze afbeelding.

En dan verander ik de versiering in versiering-animatie.

En dan wel het gif-formaat.

Is dat een gif-formaat wel animaties kan bevatten.

Ik maak de pagina nu wit met white.

En kijk op een witte achtergrond ziet die geanimeerde gif er toch wel strak uit.