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
HTML-kuvan upottaminen kuviin verkkosivulle
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
- Kuva kelluva
Voit myös säätää kuvan kohdistusta CSS float -ominaisuuden avulla. Kaikki CSS-ominaisuus on määritettävä tyylimääritteessä.
HTML-kuva
- Kuvakartat
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
- Taustakuva
Voit myös lisätä taustakuvan verkkosivulle. Sinun tarvitsee vain käyttää CSS-ominaisuutta eli taustakuvaa tyylitunnisteessa ja lisätä se HTML-elementtiin.
HTML-kuvaTaustakuva
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.