Afbeelding plaatsen -img-

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

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.

Wijs de Local Root Folder toe die bij dit hoofdstuk hoort.

Ga naar Bestand > Open map en wijs de map htm-- toe.

Ik heb hem al toegewezen, dus ik druk op Cancel. Jij drukt op Open.

In deze local root folder, die zie je in de linkerkolom, staat een map 'img', image.

En daarin bevinden zich een aantal afbeeldingen.

Een van deze afbeeldingen ga ik plaatsen in het bestand index.html.

Ik zet de cursor op de plek waar ik de afbeelding wil invoegen.

Om een afbeelding te plaatsen gebruik je het img-element.

Deze hoeft niet afgesloten te worden.

Want het enige wat dit element doet is de afbeelding plaatsen.

Het img element is een inline element en dat houdt in dat je dus meerdere afbeeldingen op één regel kunt plaatsen.

Het img-element heeft twee verplichte attributen.

Het src="" en het alt="" attribuut.

De locatie naar de afbeelding geef je aan met het attribuut src=" ".

En het alt-attribuut zorgt ervoor dat blinden en slechtzienden ook kunnen horen waar de afbeelding over gaat.

Het formaat van de afbeelding geef je op met de attributen width=" " en height=" ".

Allereerst ga ik de route opgeven naar de locatie van de afbeelding.

Naast de index.html staat in de Local Root Folder de map img.

Dus typ je als eerste de naam van de map in 'img'.

Daarin staat een bestand en dat geef je aan met een slash.

De naam van het bestand is kerk-px.jpg.

Als je niet goed de naam overneemt zal de browser geen afbeelding tonen

Dus let erop dat je geen schrijffouten maakt.

Dan moet je nog de breedte en de hoogte van de afbeelding opgeven bij de width en de height.

Klik in de broncode op de naam van de afbeelding en een voorvertoning verschijnt.

Met daarbij de breedte en de hoogte.

Ik voer de breedte pixels in bij de width en de height is pixels.

Het is belangrijk dat je altijd de juiste breedte en hoogte opgeeft.

Als je dat niet doet dan komt dat zeker niet ten goede van de kwaliteit van de afbeelding.

Nu heb ik de afbeelding ook nog eens disproportioneel geschaald en dat ziet er al helemaal niet uit.

Maar er is nog een reden waarom je het formaat van de afbeelding moet opgeven.

Teksten worden namelijk sneller geladen dan afbeeldingen.

Als de browser van te voren niet weet hoeveel ruimte hij moet vrijhouden voor de afbeelding.

Dan wordt op de plek van de afbeelding eerst de tekst geladen.

Als daarna de afbeelding binnenkomt dan verspringen alle teksten weer.

Dit kun je dus voorkomen door de juiste breedte en hoogte op te geven.

Als alternatieve omschrijving typ ik 'Kerk in Portugal'.

Deze tekst wordt dan uitgesproken door spraakmachines.

De afbeelding staat boven de eerste paragraaf op een eigen regel.

Ik kan hem ook plaatsen binnen een regel.

Ik selecteer de broncode en knip deze weg met Commando X.

Dan zet ik de cursor na het p-element en nog voor het eerste woord.

En hier plak ik de broncode weer terug met commando V.

Zie dat de afbeelding nu op de eerste regel is gaan staan.

Want de onderkant van de afbeelding lijnt met de onderkant van de tekst.

En als ik nog een spatie tussen de afbeelding en de eerste letter wil hebben.

Typ je gewoon in het p-element een spatie.