Afbeeldingen op een webpagina

Japabako

HTML afbeeldingen

Een positie markeren in de tekst met de image <img> tag vervolgens het source src="" attribuut toevoegen voor verwijzing naar het (op de webpagina weer te geven) afbeeldings bestand. Alternatieve tekst opstellen en markeren voor wanneer de afbeelding niet geladen kan worden. Width en height van de afbeelding opgeven en title attribuut tekst in een tekstvlag laten verschijnen tijdens on mouse over de webpagina afbeelding.

Image tag

Een verwijzing naar een afbeeldingsbestand wordt met een image <img> tag in een tekstregel ofwel inline gepositioneerd, de hoeveelheid tekst voor en na het image element als mede de breedte en hoogte van de weergegeven afbeelding op de webpagina zijn van invloed op de webpagina lay-out. Afbeelding van inline skate Onthoudt dat het img element in een tekstregel ondanks de grote rechthoekige afmeting van de op de webpagina weergegeven afbeelding, toch een inline element is.

Source

Een afbeelding kan je niet in een platte teksteditor plakken, wel kan je in de image<img> tag naar een afbeeldingsbestand verwijzen dat je op de webpagina wilt weergeven. Het verwijzen naar een afbeelding bestand doe je met het source src="" attribuut, je geeft als waarde van het src attribuut het bestand pad of de uniform resource locator naar het weer te geven afbeelding bestand op. Let wel op dat je afbeelding bestanden gebruikt die de browser weer kan geven zoals bestanden met een jpeg, gif of png bestand format.

Width en height

Met de width en height attributen in de image tag kan je de waarde van de breedte en hoogte van de afbeelding weergave opgeven, dat doe je door het aantal pixels in te voeren, in html5 code is het niet nodig om de eenheid pixels px na het waarde getal te plaatsen, wanneer je een andere eenheid kiest dan moet deze wel na het getal geplaatst worden. De browser kan met de opgegeven waarden voor breedte en hoogte ruimte op de pagina reserveren voor de afbeelding wanneer het laden van de afbeelding op zich laat wachten. De attributen width="" en height="" kun je ook gebruiken om de afbeeldingen wat te verkleinen door de waarden wat aan te passen.

<img src="adres en naam van afbeeldingsbestand" width="100" height="200" alt="Alternatieve tekst" title="Tekst voor tekstvlag"  />

Alternatieve tekst

Wanneer een afbeelding behorende bij een webpagina niet geladen wordt door de browser dan beschikken we over de mogelijkheid om alternatieve tekst aan te bieden op de plaats waar de afbeelding zou worden weergegeven. De alternatieve tekst voor afbeeldingen geven we op als waarde van het alternate alt="" attribuut dat we in de img tag opnemen. Ook voor mensen die screen readers gebruiken kan de alternatieve tekst waardevolle informatie bevatten en het gemis van de afbeelding opvulling geven.

Title tekst

Het title attribuut kan in veel verschillende html tags worden gebruikt en biedt de mogelijkheid om een beschrijving weer te geven wanneer er op de webpagina de muis aanwijzer boven het element wordt geplaatst. De beschrijvende tekst die je on mouse over ofwel on hover bij het html element in kwestie wil laten verschijnen kan je in dat html element opnemen als waarde van het toegevoegde title="" attribuut.

Update uw browser

Robohost web-hosting