Afbeeldingen zijn een zeer belangrijk onderdeel van een webpagina, omdat ze het uiterlijk van een webpagina verbeteren en de interactie met de klant vergroten. De USP van meerdere websites is hoe ze verschillende afbeeldingen op hun webpagina's organiseren en er smaken aan toevoegen. In deze Afbeeldingen artikel, zullen we begrijpen hoe u afbeeldingen in een webpagina kunt insluiten met HTML in de volgende volgorde:
Hoe afbeelding in HTML toe te voegen
Om een afbeelding in een webpagina in te sluiten, geeft HTML u label. Een ander belangrijk punt om te onthouden is:
heeft geen afsluitende tag. scr attribuut wordt gebruikt om het pad van de afbeelding op te geven, wat een url of afbeeldingspad van het systeem / de server kan zijn. Laten we eerst beginnen met de basissyntaxis van het insluiten van afbeeldingen in een webpagina met HTML.
Syntaxis
img src = 'img / front-end-web-development / 50 / wat-zijn-html-images.png'>Voorbeeldcode
HTML-afbeelding Afbeeldingen in webpagina insluiten
Net als bij andere tags zijn er verschillende attributen aan verbonden label. Laten we ze allemaal een voor een bekijken, hun behoefte begrijpen en hoe ze te gebruiken.
HTML-afbeeldingen Tags
- alt-kenmerk
Het alt-attribuut is de alternatieve tekst voor een afbeelding. De reden waarom het alt-attribuut werd geïntroduceerd, is dat als de afbeelding om welke reden dan ook niet kon worden geladen, er een alternatieve tekst zou moeten verschijnen die een idee geeft over de afbeelding. De redenen waarom de afbeelding niet wordt geladen, kunnen een trage internetverbinding zijn of de afbeelding bevindt zich niet in de opgegeven bron, enz.
Als de afbeelding zich in dezelfde map bevindt als het HTML-bestand, kunt u de naam van het bestand rechtstreeks opgeven. Anders moet u het absolute pad van het afbeeldingsbestand opgeven.
De waarde van het alt-attribuut moet de afbeelding beschrijven.
Voorbeeld
HTML-afbeelding Afbeeldingen in webpagina insluiten
datagedreven raamwerk in selenium webdriver voorbeeld
- Breedte en hoogte van een afbeelding
Het stijlkenmerk wordt gebruikt om de hoogte en breedte van een afbeelding in te stellen. In stijlkenmerk specificeert u de CSS-stijl.
HTML-afbeelding Afbeeldingen in webpagina insluiten
Enkele van de belangrijke punten bij het insluiten van een afbeelding in een webpagina met HTML zijn:
- De attributen breedte en hoogte worden gedefinieerd in pixels.
- U kunt ook de breedte en hoogte van een afbeelding in procenten definiëren. Het zal het percentage op basis van de hele webpagina overwegen.
- Als u er maar één specificeert, wordt de andere dienovereenkomstig aangepast.
- Afbeeldingen insluiten via URL
HTML geeft je ook de flexibiliteit waar je de afbeelding van een andere server kunt kiezen door gewoon de URL op te geven. U kunt een aparte server gebruiken om de afbeeldingen te hosten en die afbeeldingen vervolgens insluiten met behulp van een URL.
HTML-afbeelding Afbeeldingen in webpagina insluiten
- Afbeelding als een link
U kunt de afbeelding ook als een link gebruiken waar de gebruiker op de afbeelding kan klikken en op een nieuwe webpagina terecht kan komen. Om dit te doen, hoeft u alleen maar de dag in label.
HTML-afbeelding Afbeeldingen in webpagina insluiten
- Afbeelding drijvend
U kunt de uitlijning van de afbeelding ook aanpassen met de CSS-eigenschap float. Alle CSS-eigenschappen moeten worden opgegeven in het style-attribuut.
HTML-afbeelding
- Afbeeldingskaarten
Dit is een van de belangrijke functies van HTML. tag helpt bij het definiëren van een afbeeldingskaart. Je vraagt je vast af wat een image map is. Een image-map is een afbeelding met klikbare gebieden
HTML-afbeelding
- Achtergrond afbeelding
U kunt ook een achtergrondafbeelding aan een webpagina toevoegen. U hoeft alleen maar de CSS-eigenschap, d.w.z. achtergrondafbeelding, in de stijltag te gebruiken en deze toe te voegen aan het HTML-element.
HTML-afbeeldingAchtergrond afbeelding
BODY-element
Hiermee komen we aan het einde van deze HTML Images Blog.Nadat u de bovenstaande fragmenten hebt uitgevoerd, zou u hebben begrepen hoe u een afbeelding in HTML kunt invoegen. Ik hoop dat deze blog informatief en een meerwaarde voor je is.
Bekijk onze die wordt geleverd met live training onder leiding van een instructeur en real-life projectervaring. Deze training maakt je bedreven in vaardigheden om te werken met back-end en front-end webtechnologieën. Het omvat training over webontwikkeling, jQuery, Angular, NodeJS, ExpressJS en MongoDB.
java hoe u het programma afsluit
Heeft u een vraag voor ons? Vermeld het alstublieft in het commentaargedeelte van de 'HTML-afbeeldingen' blog en we nemen zo spoedig mogelijk contact met u op.