Inhoudsopgave
Er zijn momenten waarop niet alles een formulier in onze HTML-documenten moet genereren, vaak moeten we andere elementen zoals afbeeldingen in sommige tags opnemen om onze pagina vorm te geven, hiervoor zullen we in deze tutorial zien hoe dit te doen en de verschillende functies opgenomen in zichzelf.Om een afbeelding in ons HTML-document weer te geven, moeten we het element gebruiken img die de volgende attributen heeft:
- src
- alt
- hoogte
- breedte
- usemap
- ismap
Op dit moment gaan we ons concentreren op de eerste twee kenmerken, src Y alt; src stelt ons in staat om het pad te geven van waaruit de browser naar de afbeelding zal zoeken, het kan een relatief pad zijn of zelfs een URL, het attribuut alt stelt ons in staat om een tekst te plaatsen, deze tekst wordt alleen weergegeven als de afbeelding niet beschikbaar is, of deze nu niet in het pad staat waarin deze is opgegeven in de src of zelfs de browser kan het niet interpreteren.
Laten we een voorbeeld bekijken van hoe u een afbeelding in ons HTML-document kunt opnemen:
Voorbeeld Hier is een gebruikelijke vorm om de drie activiteiten in een triatlon weer te geven.Het eerste pictogram staat voor zwemmen, het tweede voor fietsen en het derde voor hardlopen.
In dit voorbeeld zien we ook nog twee attributen, de breedte en de hoogte Deze zijn, zoals hun naam aangeeft, om de breedte en hoogte van het beeld te regelen, hiermee kunnen wij garanderen dat het beeld binnen de door ons vastgestelde formaten blijft, ook als het beeld groter is dan dat het opnieuw gedimensioneerd zal worden, zonder Er moet echter op worden gelet dat de afbeelding hetzelfde gewicht zal hebben, dus het is raadzaam om de reeds bewerkte afbeelding van de vereiste grootte te plaatsen en dat onze pagina sneller laadt.
Een ander vrij algemeen gebruik is om een afbeelding te gebruiken als een link naar andere pagina's, hetzij door het pictogram van een team te plaatsen, bijvoorbeeld een volgende pijl, natuurlijk, nu met de nieuwe CSS-frameworks kan dit minder gebruikelijk zijn, maar laten we eens kijken hoe het is gedaan om deze optie in ons portfolio van HTML-tools te hebben.
Om de afbeelding in te sluiten, plaatsen we eenvoudig het element img binnen een element dat verwijst naar een pagina zoals:
Voorbeeld Hier is een gebruikelijke vorm om de drie activiteiten in een triatlon weer te geven.Het eerste pictogram staat voor zwemmen, het tweede voor fietsen en het derde voor hardlopen.
Hiermee bereiken we dat de afbeelding nu onze link is, zoals we in het volgende scherm zullen zien verandert de afbeelding niet in de manier waarop deze wordt weergegeven:
