Mis on HTML-pildid ja kuidas teie veebilehte muuta?



See artikkel annab teile üksikasjalikud ja põhjalikud teadmised HTML-piltidest ning selle lisamisest ja muutmisest, et teie veebileht näeks hea välja.

Pildid on veebilehe väga oluline osa, kuna see parandab veebilehe välimust ja suurendab klientide suhtlust. Mitme veebisaidi USP on see, kuidas nad korraldavad oma veebisaitidel erinevaid pilte ja lisavad sellele maitseid. Selles Artiklis Pildid saame aru, kuidas HTML-i abil veebilehtedele pilte manustada järgmises järjekorras:

Kuidas lisada pilti HTML-i

Pildi kinnistamiseks veebilehele annab HTML silt. Teine oluline asi, mida meeles pidada, on pole sulgemismärki. scr atribuuti kasutatakse pildi tee määramiseks, mis võib olla URL / pildi tee süsteemist / serverist. Alustame esmalt HTML-i abil veebilehele pildi manustamise põhisüntaksist.





Süntaks

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

Näidiskood



HTML-pildi piltide manustamine veebilehele  

Sarnaselt teistele siltidele on ka sellega seotud erinevaid atribuute silt. Vaatame neid kõiki ükshaaval, mõistame nende vajadust ja kuidas neid kasutada.

HTML-piltide sildid

  • alt atribuut

Atribuut alt on pildi asendustekst. Põhjus, miks atribuut kasutusele võeti, on see, et kui pilti ei saanud mingil põhjusel laadida, peaks ilmuma alternatiivne tekst, mis annab pildi kohta aimu. Kujutise mittelaadimise põhjused võivad olla aeglane Interneti-ühendus või pilt ei asu antud allikas jne.



Kui pilt asub samas kaustas, kus asub HTML-fail, saate faili nime otse määrata. Vastasel juhul on teil pildifaili absoluutne tee.

Atribuudi alt väärtus peaks pilti kirjeldama.

Näide

 Edureka logo
HTML-pildi piltide manustamine veebilehele edureka logo 

mis on java actionlistener
  • Pildi laius ja kõrgus

Stiili atribuuti kasutatakse pildi kõrguse ja laiuse määramiseks. Stiili atribuudis määrate CSS-i stiili.

HTML-pildi piltide manustamine veebilehele  

Mõned HTML-i abil veebilehele pildi manustamise olulised punktid on:

  • Laiuse ja kõrguse atribuudid on määratletud pikslites.
  • Samuti saate määratleda pildi laiuse ja kõrguse protsentides. See arvestab protsentuaalselt kogu veebilehe järgi.
   
  • Kui määrate ainult ühe neist, kohandab see teist vastavalt.
  • Piltide manustamine URL-i abil

HTML annab teile ka paindlikkuse, kui saate pildi teisest serverist valida, lihtsalt URL-i määrates. Piltide majutamiseks ja URL-i abil nende piltide manustamiseks võite kasutada eraldi serverit.

HTML-pildi piltide manustamine veebilehele  

  • Pilt lingina

Pilti saate kasutada ka lingina, kus kasutaja saab pildil klõpsata ja uuel veebilehel maanduda. Selleks peate lihtsalt panema päev sisse silt.

HTML-pildi piltide manustamine veebilehele  

Pildi joondamist saate reguleerida ka CSS-ujukvara abil. Kogu atribuut CSS tuleb täpsustada stiili atribuudis.

HTML-pilt Pilt hõljub tekstist paremal. Pilt hõljub tekstist vasakule.

kuidas java süsteemis.exit kasutada
  • Pildikaardid

See on üks HTML-i pakutavatest olulistest funktsioonidest. silt aitab määratleda pildikaarti. Kindlasti mõtlete, mis on pildikaart. Pilt-kaart on pilt, millel on klõpsatavad alad

HTML-pilt  
  • Taustapilt

Veebilehele saate lisada ka taustpildi. Peate lihtsalt kasutama CSS-i omadust, st taustapilti stiilimärgendis ja lisama selle HTML-elemendile.

HTML-pilt

Taustapilt

KEHA element

Sellega jõuame selle HTML-piltide ajaveebi lõpuni.Pärast ülaltoodud juppide käivitamist oleksite aru saanud, kuidas HTML-i pilt lisada. Loodan, et see ajaveeb on informatiivne ja annab teile lisaväärtust.

Vaadake meie mis on varustatud juhendajate juhitud elava koolituse ja reaalse elu projektikogemusega. See koolitus võimaldab teil omandada oskusi, mis võimaldavad töötada tagumise ja esiotsa veebitehnoloogiatega. See sisaldab koolitust veebiarenduse, jQuery, Angular, NodeJS, ExpressJS ja MongoDB kohta.

Kas teil on meile küsimus? Palun mainige seda blogi „HTML Images” kommentaaride jaotises ja me võtame teiega ühendust.