Giunsa pagbutang ang mga imahe sa Html

Unsaon Pagbutang og mga Imahe sa HTML

HTML Kini usa ka markup language gigamit kana sa paghimo ug istruktura sa sulod sa usa ka web page. Usa sa labing kasagaran nga mga elemento sa usa ka panid sa web mao ang mga imahe, nga magamit aron madani ang atensyon sa tiggamit ug ipadala ang biswal nga kasayuran. epektibo. Niini nga artikulo, kita makakat-on matag lakang giunsa ibutang ang mga hulagway sa HTML sakto ug optimized.

Lakang 1: Pag-andam sa imahe

Ang unang lakang sa dapit usa ka imahe sa HTML mao ang pagsiguro nga ang imahe mao giandam ug na-optimize alang sa imong paggamit sa web. Kini nagpasabot pag-usab ang imahe sa gusto nga gidak-on, pag-compress ang gibug-aton niini alang sa mas paspas nga pagkarga ug pagtipig niini sa angay nga format sama sa JPEG o PNG. Dugang pa, importante nga hatagan ang imahe og usa ka deskriptibo nga ngalan aron mapauswag ang ranggo niini sa mga search engine.

Lakang 2: Isulod ang label

sa ibutang ang usa ka imahe sa HTML, gigamit namo ang tag . Kini nga tag usa ka walay sulod nga tag, nagpasabot nga kini walay closing tag. Sa sulod sa label, kinahanglan natong ipiho ang URL sa hulagway nga gusto namong isulod sa "src" attribute. Makadugang usab kami ug dugang nga mga hiyas sama sa "alt" aron mahatagan ug alternatibong teksto kung ang imahe dili ma-load sa husto, ug ang "titulo" aron ipakita ang usa ka pop-up nga mensahe kung ang gumagamit nag-hover sa imahe.

Lakang 3: Ipiho ang gidak-on ug lokasyon sa hulagway

Sa higayon nga atong gisulod ang tag sa URL sa imahe, mahimo namon ipiho ang gidak-on ug lokasyon sa imahe gamit ang "lapad" ug "taas" nga mga hiyas. Kini nga mga hiyas modawat sa mga kantidad sa mga pixel o porsyento, ug nagtugot kanamo sa pag-adjust sa gidak-on sa imahe sumala sa among mga panginahanglan. Dugang pa, mahimo namong gamiton ang mga hiyas sama sa "align" aron ipahiangay ang imahe kalabot sa teksto, o "utlanan" aron makadugang usa ka utlanan sa imahe.

Uban niining yano nga mga lakang, ikaw karon adunay kahibalo nga gikinahanglan aron ibutang ang mga hulagway sa HTML ug pagpalambo sa biswal nga panagway sa imong mga web page. Hinumdumi nga ayohon ang gidak-on ug pag-optimize sa mga imahe aron mapadayon ang maayo nga pasundayag sa pagkarga ug ayaw kalimti ang paggamit og dugang nga mga hiyas aron mapauswag ang pagka-access ug pagkagamit sa imong website. Eksperimento ug dad-a ang imong sulod sa kinabuhi uban sa makabungog nga mga larawan!

Giunsa pagdugang ang mga imahe sa HTML

Sa kini nga panudlo, mahibal-an naton kung giunsa pagbutang ang mga imahe sa usa ka dokumento sa HTML. Ang pagdugang og mga hulagway kay a epektibo nga paagi aron mapaayo ang biswal nga hitsura sa imong website ug himuon kini nga labi ka madanihon sa mga bisita. Maayo na lang, ang HTML naghatag ug piho nga mga tag alang sa pagsal-ot sa mga imahe sa imong panid.

1. Gamit ang img tag

Ang labing komon nga paagi sa pagdugang og mga hulagway sa HTML mao ang paggamit sa tag . Aron mahimo kini, kinahanglan nimo nga itakda ang src attribute nga nagtino sa URL sa imahe nga gusto nimo ipakita. Pananglitan, . Hinumdomi nga kini girekomendar nga gamiton mga file sa imahe sa browser-compatible nga mga format, sama sa JPEG o PNG.

Dugang pa, mahimo nimong ipasibo ang hitsura sa imahe pinaagi sa paggamit sa ubang mga hiyas sama sa gitas-on ug gilapdon aron itakda ang gidak-on sa imahe, alt aron mahatagan ang alternatibong teksto kung dili ma-load ang imahe, ug titulo aron idugang ang teksto nga gipakita. sa dihang nag-hover ka ibabaw sa imahe.

2. Mga agianan sa file ug mga agianan sa URL

Kung bahin sa pagtino sa agianan sa imahe, kinahanglan nimong tagdon ang duha nga kapilian: ang agianan sa lokal nga file o ang agianan sa URL. Kung ang imahe nahimutang sa imong kompyuter ug gusto nimo nga i-upload kini gikan didto, kinahanglan nimo nga ihatag ang tibuuk nga agianan sa file, sama sa "C:imagefolder.jpg." Sa laing bahin, kung ang imahe gi-host sa usa ka web server, kinahanglan nimong itakda ang tibuuk nga URL sa imahe, sama sa "http://www.example.com/image.jpg."

Hinumdumi nga ang mga agianan sa URL mas komon, tungod kay gitugotan nila ang imong website nga mag-load sa mga imahe gikan sa usa ka eksternal nga server ug dili magsalig sa mga file nga gitipigan sa makina sa bisita.

3. Pag-optimize sa imahe

Importante nga ma-optimize ang imong mga hulagway para sa web sa dili pa kini idugang sa imong HTML nga panid. Kini nagpasabot sa pagkunhod sa gidak-on sa file sa mga hulagway nga walay pagkompromiso sa ilang biswal nga kalidad. Mahimo nimong gamiton ang mga himan sa pag-edit sa imahe o mga online compressor aron makab-ot kini. Pinaagi sa pag-optimize sa mga imahe, ang imong panid mas paspas nga mag-load ug mapugngan ang mga bisita nga mapakyas sa taas nga oras sa pagkarga.

Sa konklusyon, ang pagdugang sa mga imahe sa HTML usa ka yano nga buluhaton, apan kinahanglan nga tagdon ang pipila ka hinungdanon nga mga aspeto sama sa husto nga tag, ang agianan sa file o URL ug ang pag-optimize sa mga imahe aron masiguro ang usa ka maayong kasinatian sa gumagamit. Sunda kini nga mga instruksyon ug moadto ka sa imong dalan sa paghimo sa mga panid sa web nga madanihon nga makita.

Ang kamahinungdanon sa mga label sa HTML

1. Dugangi ang visual accessibility: Ang mga tag sa HTML adunay sukaranan nga papel sa pagpresentar sa mga imahe sa usa ka website. Kung magdugang usa ka imahe sa usa ka panid, kini nga tag gigamit aron ipakita kini sa husto. Bisan pa, ang kahinungdanon niini labaw pa sa yano nga biswal nga presentasyon. Ang mga tag Gitugotan nila ang mga search engine ug mga screen reader sa paghubad sa sulud sa imahe, pagpadali sa pagka-access alang sa mga tawo nga adunay mga kakulangan sa panan-aw o kinsa naggamit mga teknolohiya nga makatabang.

2. Pag-optimize sa performance: Pinaagi sa paggamit sa mga label sa HTML sa husto, mahimo nimong mapauswag ang performance sa usa ka site Web. Gitugotan ka niini nga mga tag nga ipiho ang gidak-on sa imahe, pakunhuran ang resolusyon niini ug i-compress pa kini, nga moresulta sa mas paspas nga pagkarga sa panid. Dugang pa, ang mga teknik sama sa tapolan nga pagkarga mahimong ipatuman, nga nag-load sa mga imahe sama sa gikinahanglan sa tiggamit niini, nga nagpamenos sa inisyal nga oras sa pagkarga sa panid.

3. Gipauswag nga kasinatian sa tiggamit: Ang mga imahe adunay hinungdanon nga papel sa kasinatian sa tiggamit sa usa ka website. Pinaagi sa husto nga paggamit sa mga label Sa HTML, makahatag ka ug biswal nga makapadani ug managsama nga kasinatian. Dugang pa, mahimo nimong idugang ang mga hiyas sama sa alt text, nga naghatag usa ka deskripsyon sa teksto sa imahe alang sa mga dili makakita niini. Kini nagpauswag sa pagsabot sa sulod ug naglikay sa kalibog sa tanang tiggamit.

Husto nga syntax aron masulod ang mga imahe sa HTML

1. Gamit ang label

Usa ka sukaranan ug sagad nga paagi sa pagsal-ot sa mga imahe sa HTML mao ang paggamit sa tag . Kini nga tag nagtugot kanamo sa pagtino sa lokasyon sa imahe, gidak-on niini ug uban pang mga kabtangan. Ang tag adunay mosunod nga gikinahanglan ug opsyonal nga mga hiyas:

- src: kini nga hiyas nagtino sa agianan sa imahe. Kini mahimo nga usa ka URL o ang paryente nga agianan sa file sa imahe.
- alt: Kini nga hiyas naghatag ug alternatibong teksto aron ipakita kung ang imahe dili makarga sa husto.
- gilapdon: Kini nga hiyas nagtino sa gilapdon sa imahe sa mga pixel.
- gitas-on: Kini nga hiyas nagtino sa gitas-on sa hulagway sa mga pixel.

Ania ang usa ka pananglitan kung unsa ang hitsura sa syntax sa pagsulud sa usa ka imahe gamit ang tag :

"`

"`

2. Gamit ang label

Ang laing paagi sa pagsal-ot sa mga hulagway sa HTML mao ang paggamit sa tag

. Ang label

gigamit sa paggrupo sa may kalabutan nga sulod, sama sa mga hulagway ug sa ilang mga kapsyon. Kini nga tag makatabang kanamo sa pagpausbaw sa pagka-access ug semantics sa among mga panid.

Aron gamiton ang label

, kinahanglan natong ibutang ang hulagway sulod sa label ug dayon idugang ang usa ka tag