Mitä ovat HTML-kuvat ja miten verkkosivua muokataan?

Tämä artikkeli antaa sinulle yksityiskohtaisen ja kattavan tiedon HTML-kuvista ja siitä, miten voit lisätä ja muokata sitä, jotta verkkosivusi näyttää hyvältä.

Kuvat ovat erittäin tärkeä osa verkkosivua, koska ne parantavat verkkosivun ulkonäköä ja lisäävät asiakkaiden vuorovaikutusta. Usean verkkosivuston USP on, miten he järjestävät erilaisia ​​kuvia verkkosivuilleen ja lisäävät siihen makuja. Tässä Kuvat-artikkelissa ymmärrämme, kuinka kuvia upotetaan verkkosivulle HTML-koodilla seuraavassa järjestyksessä:

Kuinka lisätä kuvaa HTML-muotoon

Voit upottaa kuvan verkkosivulle HTML antaa sinulle tag. Toinen tärkeä asia on muistaa, ei ole lopputagia. scr attribuuttia käytetään määrittämään kuvan polku, joka voi olla URL-osoite tai kuvan polku järjestelmästä / palvelimelta. Aloitetaan ensin kuvan upottamisen perussyntaksista verkkosivulle HTML-koodin avulla.





Syntaksi

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

Näytekoodi



HTML-kuvan upottaminen kuviin verkkosivulle  

Muiden tunnisteiden tapaan niihin liittyy useita määritteitä tag. Katsotaanpa kutakin niistä yksi kerrallaan, ymmärretään heidän tarpeensa ja miten niitä käytetään.

HTML-kuvatunnisteet

  • alt Attribuutti

Alt-attribuutti on kuvan vaihtoehtoinen teksti. Syy siihen, miksi alt-attribuutti otettiin käyttöön, on, että jos jostain syystä kuvaa ei voitu ladata, pitäisi ilmestyä vaihtoehtoinen teksti, joka antaa kuvan kuvan. Syyt kuvan latautumiseen voivat olla hidas internetyhteys tai kuva ei ole toimitetussa lähteessä jne.



Jos kuva sijaitsee samassa kansiossa, jossa HTML-tiedosto on, voit määrittää tiedoston nimen suoraan. Muussa tapauksessa sinulla on kuvatiedoston absoluuttinen polku.

Alt-attribuutin arvon tulisi kuvata kuvaa.

Esimerkki

 Edureka-logo
HTML-kuvan upottaminen kuviin verkkosivulle edureka-logo 

yhdistä lajittelu c ++ -lähdekoodi
  • Kuvan leveys ja korkeus

Style-määritettä käytetään kuvan korkeuden ja leveyden asettamiseen. Style-määritteessä määrität CSS-tyylin.

HTML-kuvan upottaminen kuviin verkkosivulle  

Joitakin tärkeitä kohtia upotettaessa kuvaa verkkosivulle HTML-koodilla ovat:

  • Leveys- ja korkeusmääritykset määritetään pikseleinä.
  • Voit myös määrittää kuvan leveyden ja korkeuden prosentteina. Se ottaa huomioon prosenttiosuuden koko verkkosivun mukaan.
   
  • Jos määrität vain yhden niistä, se säätää toista vastaavasti.
  • Kuvien upottaminen URL-osoitteen avulla

HTML antaa sinulle myös joustavuutta, jossa voit valita kuvan toisesta palvelimesta vain määrittämällä URL-osoitteen. Voit käyttää erillistä palvelinta kuvien isännöimiseksi ja upottaa sitten kuvat URL-osoitteen avulla.

miten paketteja käytetään javassa
HTML-kuvan upottaminen kuviin verkkosivulle  

  • Kuva linkkinä

Voit käyttää kuvaa myös linkkinä, jossa käyttäjä voi napsauttaa kuvaa ja laskeutua uudelle verkkosivulle. Voit tehdä sen vain asettamalla päivä sisään tag.

HTML-kuvan upottaminen kuviin verkkosivulle  

Voit myös säätää kuvan kohdistusta CSS float -ominaisuuden avulla. Kaikki CSS-ominaisuus on määritettävä tyylimääritteessä.

HTML-kuva Kuva kelluu tekstin oikealla puolella. Kuva kelluu tekstin vasemmalla puolella.

Tämä on yksi HTML: n tarjoamista tärkeistä ominaisuuksista. tag auttaa määrittelemään kuvakartan. Mietit varmasti, mikä kuvakartta on. Kuvakartta on kuva, jolla on napsautettavia alueita

HTML-kuva  

Voit myös lisätä taustakuvan verkkosivulle. Sinun tarvitsee vain käyttää CSS-ominaisuutta eli taustakuvaa tyylitunnisteessa ja lisätä se HTML-elementtiin.

HTML-kuva

Taustakuva

BODY-elementti

Tämän myötä olemme päässeet tämän HTML-kuvablogin loppuun.Nyt kun olet suorittanut yllä olevat katkelmat, olisit ymmärtänyt kuvan lisäämisen HTML-muotoon. Toivon, että tämä blogi on informatiivinen ja lisäarvoa sinulle.

Katso meidän joka sisältää ohjaajan vetämän live-koulutuksen ja tosielämän projektikokemuksen. Tämä koulutus antaa sinulle taitoja työskennellä back-end- ja front-end-verkkoteknologioiden kanssa. Se sisältää koulutusta verkkokehityksestä, jQuery, Angular, NodeJS, ExpressJS ja MongoDB.

Onko sinulla kysymys meille? Mainitse se HTML-kuvat-blogin kommenttiosassa ja palaamme sinuun.