HTML Fundamentals - Afbeeldingen weergeven

• April 29, 2024

Nadat u de tekst van uw website naar uw wens hebt gepost en opgemaakt, is het tijd om de pagina wat meer pit te geven. Afbeeldingen kunnen niet alleen kleur en leven aan uw pagina's toevoegen, u kunt ze ook gebruiken om teksteffecten te genereren die moeilijk of onmogelijk te doen zijn met gewone tekst en opmaak. Uw lettertypekeuzes zijn bijvoorbeeld doorgaans beperkt tot het kleine aantal lettertypen waarvan u zeker weet dat ze op de computers van bezoekers zijn geïnstalleerd, want als ze het lettertype niet hebben geïnstalleerd, kunnen ze het niet op uw site zien! Telkens wanneer u tekst in een niet-beschikbaar lettertype plaatst, geven de computers van de bezoekers deze weer in het beschikbare lettertype dat het dichtst bij de stijl is, wat vaak schade aan uw website-ontwerp kan veroorzaken.

Aan de andere kant, als u een beeldbewerkingsprogramma gebruikt om tekst in een fraai lettertype vast te leggen en als GIF of JPEG op uw site te plaatsen, ziet elke bezoeker het precies zoals u het bedoeld had - aangezien het nu een foto van tekst is in plaats van tekst zelf. Hierdoor kun je fantasievolle lettertypen in je kopteksten gebruiken en ze op ongebruikelijke manieren groeperen.

De basistag die wordt gebruikt om afbeeldingen weer te geven, is de volgende:



De bovenstaande code werkt perfect in HTML. Als u XHTML gebruikt of er zeker van wilt zijn dat uw site XHTML-gereed is, moet u een schuine streep toevoegen om de tag te sluiten, omdat u in XHTML geen tags met een open einde kunt gebruiken:



'Src' is een afkorting voor bron en u zult het gebruiken om het bestandspad naar uw afbeelding op te geven - met andere woorden, om uw browser te vertellen waar de afbeelding op uw site kan worden gevonden. Als u uw afbeeldingen in dezelfde map als uw webpagina's bewaart, hoeft u de map niet in de 'src'-tekst te vermelden - u kunt gewoon de afbeeldingsbestandsnaam typen.

Nadat u uw afbeeldingsbron hebt opgegeven, kunt u dit basiskader verbeteren met verschillende optionele kenmerken om het maximale uit uw afbeeldingen te halen. Een kenmerk dat u bijna altijd moet gebruiken, is het kenmerk 'alt'. Hiermee kunt u opgeven welke tekst de browser moet weergeven als deze om een ​​of andere reden uw afbeelding niet kan weergeven. De 'alt'-tekst is als volgt opgesteld:



Een andere handige set attributen zijn de tags 'width' en 'height'. Hiermee kunt u afbeeldingen op een andere grootte weergeven dan de werkelijke afbeeldingsgrootte. U kunt ze gebruiken om uw afbeelding aan te passen zodat deze perfect past in uw algehele paginaontwerp. Over het algemeen verdient het echter de voorkeur om de werkelijke afbeeldingsgrootte te wijzigen met beeldbewerkingsprogramma's en de afbeelding vervolgens om twee redenen online te plaatsen. Ten eerste geeft de beeldbewerkingssoftware je bijna altijd een beter resultaat dan het handmatig aanpassen van de grootte. Ten tweede verandert het wijzigen van de tags 'breedte' en 'hoogte' niet de daadwerkelijke bestandsgrootte van de afbeelding, dus als je een enorme afbeelding hebt die je als een miniatuur weergeeft, duurt het even lang voordat de afbeelding is geladen en net zo snel zal kauwen als veel bandbreedte alsof je het op ware grootte had weergegeven.

Wanneer u de grootte van een afbeelding opgeeft, kunt u de hoogte, de breedte of beide vermelden. Maten worden gespecificeerd door de pixel, zoals u hieronder kunt zien:



U kunt uw afbeeldingen ook 'uitlijnen' om ze soepel te laten aansluiten op de stroom van uw tekst. Als u links uitlijnen kiest, begint de tekst rechts van de afbeelding. Als u de juiste uitlijning kiest, wordt de afbeelding aan de rechterkant van de pagina weergegeven en verschijnt uw tekst aan de linkerkant van de afbeelding en wordt deze vervolgens afgebroken naar een nieuwe regel.

De beelduitlijning is als volgt ingesteld:



U kunt de uitlijning ook instellen op "boven", "onder" of "midden" om de afbeelding in lijn te brengen met de bovenkant of onderkant van de tekstregel. Als u geen uitlijning opgeeft, wordt de afbeelding standaard "onder".

Als kanttekening kunt u uw afbeeldingskenmerken (src, uitlijnen, alt, enz.) In elke volgorde in de afbeeldingstags opnemen. Mijn persoonlijke voorkeur is om eerst het 'src' attribuut te vermelden, omdat dat het meest basale attribuut is en in elke afbeeldingstag moet worden opgenomen, maar je kunt elke volgorde gebruiken die voor jou het meest natuurlijk aanvoelt.

Video-Instructies: HTML Crash Course For Absolute Beginners (April 2024).