Hvad er HTML-billeder, og hvordan ændrer du din webside?

Denne artikel vil give dig en detaljeret og omfattende viden om HTML-billeder, og hvordan du kan tilføje og ændre det for at få din webside til at se godt ud.

Billeder er en meget vigtig del af en webside, da det forbedrer udseendet på en webside og øger kundeinteraktionen. USP på flere websteder er, hvordan de organiserer forskellige billeder på deres websider og tilføjer varianter til det. Heri Billedartikel, vi forstår, hvordan man integrerer billeder på en webside ved hjælp af HTML i følgende rækkefølge:



Sådan tilføjes billede i HTML

At integrere et billede på en webside giver HTML dig tag. Et andet vigtigt punkt at huske er, har ikke et lukkemærke. scr attribut bruges til at specificere stien til billedet, som kan være en url eller billedsti fra systemet / serveren. Lad os først starte med den grundlæggende syntaks for indlejring af billede på en webside ved hjælp af HTML.



Syntaks

img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>

Prøvekode



HTML-billede, der integrerer billeder på websiden  

I lighed med andre tags er der forskellige attributter forbundet med tag. Lad os se på hver enkelt af dem en efter en, forstå deres behov og hvordan man bruger dem.

HTML-billedkoder

  • alt Attribute

Alt-attributten er den alternative tekst til et billede. Årsagen til, at alt-attribut blev introduceret, er, at billedet af en eller anden grund ikke kunne indlæses, så en alternativ tekst skulle vises, der gav en idé om billedet. Årsagerne til, at billedet ikke indlæses, kan være langsom internetforbindelse, eller hvis billedet ikke findes i den angivne kilde osv.



Hvis billedet findes i den samme mappe, hvor HTML-filen er, kan du angive filens navn direkte. Ellers har du den absolutte sti til billedfilen.

Værdien af ​​alt-attributten skal beskrive billedet.

Eksempel

 Edureka-logo
HTML-billede, der integrerer billeder på websiden edureka logo 

hvordan man laver tilføjelse i java
  • Bredde og højde på et billede

Stilattribut bruges til at indstille højden og bredden på et billede. I stilattribut specificerer du CSS-styling.

HTML-billede, der integrerer billeder på websiden  

Nogle af de vigtige punkter under indlejring af et billede på en webside ved hjælp af HTML er:

  • Bredde- og højdeattributterne er defineret i pixels.
  • Du kan også definere bredden og højden på et billede i procent. Det vil overveje procentdelen i henhold til hele websiden.
   
  • Hvis du kun angiver en af ​​dem, så justerer den den anden i overensstemmelse hermed.
  • Integrering af billeder ved hjælp af URL

HTML giver dig også fleksibiliteten, hvor du kan vælge billedet fra en anden server bare ved at angive URL'en. Du kan bruge en separat server til at være vært for billederne og derefter integrere disse billeder ved hjælp af URL.

HTML-billede, der integrerer billeder på websiden  

  • Billede som et link

Du kan også bruge billedet som et link, hvor brugeren kan klikke på billedet og lande på en ny webside. For at gøre det skal du bare sætte dag ind tag.

HTML-billede, der integrerer billeder på websiden  

Du kan også justere billedets justering ved hjælp af CSS float-egenskab. Alle CSS-egenskaber skal specificeres i typeattributten.

HTML-billede Billedet flyder til højre for teksten. Billedet flyder til venstre for teksten.

Dette er en af ​​de vigtige funktioner, der leveres af HTML. tag hjælper med at definere et billedkort. Du må undre dig over, hvad et billedkort er. Et billedkort er et billede med klikbare områder

big data tutorial for begyndere
HTML-billede  
  • Baggrundsbillede

Du kan også tilføje et baggrundsbillede på en webside. Du skal bare bruge CSS-egenskaben, dvs. baggrundsbillede i stilkoden og føje det til HTML-elementet.

HTML-billede

Baggrundsbillede

KROPP-element

Med dette kommer vi til en afslutning på denne HTML Images Blog.Efter at have udført ovenstående uddrag ville du have forstået, hvordan du indsætter billede i HTML. Jeg håber, at denne blog er informativ og merværdi for dig.

Tjek vores som kommer med instruktørstyret live træning og projektoplevelse i det virkelige liv. Denne træning gør dig dygtig til at arbejde med back-end og front-end webteknologier. Det inkluderer træning i webudvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.

Har du et spørgsmål til os? Nævn det i kommentarfeltet på bloggen 'HTML-billeder', og vi vender tilbage til dig.