Hva er HTML Image Tags?
Følgende artikkel gir en oversikt over HTML Image Tags. Jeg kjenner dens klisjé, men la meg begynne med å si at et bilde er verdt tusen ord. Når det gjelder nettsider, er det spesielt sant. Et bilde kan selge besøkende med ideen din, imponere noen til å kjøpe produktet ditt, og det kan hjelpe en webside til å se så mye bedre ut. I denne guiden vil vi se på hvordan vi kan legge til IMG på websidene og justere dem ordentlig sammen med å legge til lenker til dem.
Legge til bilder på websider
Du kan legge IMG til en HTML-side ved å bruke tag i HTML-dokumentet, her er syntaks:
Her forteller IMG nettleseren at taggen handler om å legge til en IMG i dokumentet, og “src =” angir hvor bildet skal lastes ned fra.
Eksempel på en side med et bilde
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Her er utdata av koden:
Et interessant faktum med disse HTML-sidene er at når du bruker IMG-taggen, blir ikke bildet satt inn på nevnte webside, i stedet skaper det et holdeplass der bildet legges når det er lastet ned.
Nettleserstøtte og kompatibilitet med attributter
Som du kan forvente, støtter alle moderne nettlesere bilder og bruk av IMG-koder. Noen ganger endrer størrelse på mobile nettlesere størrelsen på bildet slik at det passer til det på skjermen hvis bildet ikke er angitt som responsivt.
Når det gjelder kompatibilitet av attributter med HTML 4.01 og nyere HTML5, vil de fleste kodene fungere, bortsett fra justering, kantlinje, hspace og vspace som ganske enkelt ikke støttes i sistnevnte.
Bilder som lenke:
Det vil være tider når du vil at et bilde skal fungere som en lenke til en annen side. Du kan få det til ved å legge til IMG-koden i koden.
Angi et bilde som bakgrunn på en webside
Du kan tilordne et bilde som bakgrunnsbilde av en webside ved å bruke CSS-egenskapen bakgrunnsbilde i Body-elementet på siden.
Bakgrunnsbilde
Stille inn et bilde til å flyte i nettleseren
Vi kan bruke CSS-egenskapen “float” for å stille inn et bilde til å flyte inni hvor som helst i nettleservinduet. La oss se på et eksempel som vil hjelpe deg med å forstå.
Her vil bildet av bilen flyte til høyre side av teksten.
Her vil bildet av bilen flyte til venstre på teksten.
Attributter for bildekode
Følgende er attributtene til en bildekode.
1) Juster
Mulige verdier: Topp, bunn, midten, venstre eller høyre.
Alight-attributtet brukes til å spesifisere justeringen av et bilde på websiden.
2) Alt
Verditype: Tekst
Alt brukes til å spesifisere den alternative teksten til et bilde av en webside. I tilfeller der det ikke er mulig å vise en IMG, viser nettleseren denne teksten til brukeren. Søkemotorer som Google og Bing bruker denne alt-teksten for å vise resultater i bildesøket.
3) Border
Verditype: piksler
Den brukes til å lage en kant med brukerdefinert tykkelse rundt bildet. Det fungerer ikke i HTML5.
4) Cross-Origin
Verditype: Anonym bruk-legitimasjon
Denne attributtet brukes når vi vil spesifisere hvordan bilder med tvers av opprinnelser skal håndteres. Dette brukes mest i tilfeller der lerretselementer av JavaScript-nettapper brukes.
5) Høyde
Verditype: Prosenter eller piksler
Det er klart at denne brukes til å betegne høyden på bildet på HTML-siden.
6) vspace
Verditype: piksler
Ikke støttet i HTML5, og hspace-attributtet brukes til å spesifisere i piksler hvor mye hvitt mellomrom som skal legges til venstre og høyre for det innsatte bildet.
7) ismap
Verditype: URL til en side
ismap vi brukte for å definere det nevnte bildet som et bildekart på serversiden. Når brukeren klikker (eller banker) inne i bildet, sender nettleserne koordinatene til klikket (eller trykk på) til webserveren som en URL.
8) LONGDESC
Verditype: URL
Longdesc brukes til å gi en detaljert beskrivelse av et bilde ved å bruke en URL. URL-en som brukes i attributtet brukes som beskrivelse av bildet.
9) src
Verditype: URL
src står for kilde, og den brukes til å spesifisere adressen som nettleseren vil hente bildet fra, denne URL-en kan brukes på et bilde i en katalog på samme server, og den kan også lagre et bilde i en tredjepartsserver med et annet domenenavn.
10) usemap
Verditype: # kartnavn
Usemap-attributtet brukes til å definere bildet for et bildekart på klientsiden. Et usemap brukes alltid med kart- og områdets HTML-tagger.
11) vspace
Verditype: piksler
Ikke støttet i HTML5, Vspace-attributtet brukes til å angi antall piksler som skal brukes som hvitrom øverst og nederst på bildet på websiden.
12) Bredde
Verditype: piksler
Akkurat som navnet antyder, brukes breddeattributtet til å spesifisere bredden på et bilde på HTML-websiden.
Konklusjon - HTML Image Tags
Nå som vi har sett på hvordan bilder legges til i HTML-sider og hvordan du kan angi attributtene deres, kan vi lage attraktive websider i et webprosjekt.
I tillegg til å bare legge til visuell teft på en webside, er bilder verdifulle fordi de hjelper i søkemotoroptimalisering også. Ved å legge til riktige alt-koder og beskrivelser til bilder hjelper søkemotorer å forstå innholdet på en webside bedre og forbedre rangeringen av en webside i mange tilfeller.
Anbefalte artikler
Dette er en guide til HTML Image Tags. Her diskuterer vi attributtene til bildekode sammen med nettleserstøtte og kompatibilitet med attributter. Du kan også se på følgende artikler for å lære mer -
- En enkel guide til HTML-kommandoer
- Introduksjon til hva er XHTML?
- Veiledninger om HTML-attributter
- Bruksområder og topp bruksområder for HTML
- Ulike listestiler i HTML
- HTML-rammer
- HTML-blokker