హ్ట్మ్ఎల్ <img> టాగ్
定义和用法
<img>
标签用于在 HTML 页面中嵌入图像。
从技术上讲,实际上并没有将图像插入到网页中,而是将图像链接到了网页。<img>
标签创建了一个容器,用于引用图像。
<img>
టాగులు రెండు అవసరమైన అంశాలు కలిగి ఉంటాయి:
- src - చిత్రం మార్గాన్ని నిర్ధారించు
- alt - ఏదైనా కారణంగా చిత్రం చూపించలేక పోయినట్లయితే, చిత్రం ప్రత్యామ్నాయ పదబంధాన్ని నిర్ధారించు.
మౌనంగా:ఇంకా, చిత్రం వెడల్పు మరియు పొడవును నిర్ధారించండి. అలాగే వెడల్పు మరియు పొడవును నిర్ధారించకపోతే, చిత్రం లోడ్ అయ్యే వరకు పేజీ చిత్రం చిత్రం చిత్రం కనిపించవచ్చు.
అనురూపంగా:మరొక పత్రానికి చిత్రాన్ని లింక్ చేయడానికి, కేవలం <img>
టాగులో అనువుగా పెట్టబడింది <a> టాగులోని (క్రింది ఉదాహరణను చూడండి).
మరింత చూడండి:
HTML పాఠ్యక్రమం:HTML చిత్రం
HTML DOM పరిశీలన కైవస్తుంది:Image ఆబ్జెక్ట్
CSS పాఠ్యక్రమం:చిత్రం శైలీని అమర్చడం
పఠనం విస్తరించండి:చిత్రాన్ని సరిగా ఉపయోగించడం
ఉదాహరణ
ఉదాహరణ 1
ఈ ఉదాహరణలో, మేము పేజీలో శాంఘై పూల్ పోర్ట్లో కింకుమాలను ఛాయాచిత్రం చేసిన CodeW3C.com యొక్క ఇంజనీర్లను చేర్చాము:
<img src="tulip.jpg" alt="శాంఘై పూల్ పోర్ట్ - కింకుమం" />

ఉదాహరణ 2
చిత్రాన్ని ప్రవేశపెట్టడానికి మరొక ఉదాహరణ:
<img src="dancer.png" alt="నాట్యకర్త" width="500" height="749">
అనురూపంగా:పేజీ ప్రక్కన మరిన్ని ఉదాహరణలను అందిస్తుంది.
అంశం
అంశం | విలువ | వివరణ |
---|---|---|
alt | పదబంధం | చిత్రం ప్రత్యామ్నాయ పదబంధాన్ని నిర్ధారించు. |
crossorigin |
|
పరిమిత క్రాస్-ఆర్గిన్ ప్రాసెస్ వెబ్ సైట్ల నుండి చిత్రాలు మరియు కాన్వాస్ ను ఉపయోగించడానికి అనుమతిస్తుంది. |
height | పిక్సెల్స్ | చిత్రం పొడవును నిర్ధారించు. |
ismap | ismap | చిత్రాన్ని సర్వర్ సైడ్ చిత్ర మ్యాపింగ్ గా నిర్వచించు. |
loading |
|
బ్రౌజర్ చిత్రాన్ని తక్కువగా లోడ్ చేయాలా లేదా కొన్ని పరిస్థితులు నిర్ణయించినప్పుడు చిత్రాన్ని లోడ్ చేయాలా నిర్ణయించు. |
longdesc | URL | చిత్రం వివరణ దిశగా పోపుటను నిర్ధారించు. |
referrerpolicy |
|
చిత్రాన్ని పొందడానికి ఉపయోగించాల్సిన సూచనా సమాచారాన్ని నిర్ధారించు. |
sizes | పరిమాణం | వివిధ పేజీ సంస్థాపన పరిమాణాలను నిర్ధారించు. |
src | URL | చిత్రం మార్గాన్ని నిర్ధారించు. |
srcset | URL-list | వివిధ పరిస్థితులలో ఉపయోగించిన చిత్రాల ఫైల్ జాబితాను నిర్ణయించుట |
usemap | #mapname | చిత్రాన్ని కస్టమర్ సెంటర్ ఇమేజ్ మ్యాపింగ్ గా నిర్వచించుట |
width | పిక్సెల్స్ | చిత్రం వెడల్పును నిర్ణయించుట |
గ్లౌబల్ అట్రిబ్యూట్స్
<img>
టాగ్స్ ఇవెంట్ అట్రిబ్యూట్స్ ను మద్దతు చేస్తాయి HTML లో గ్లౌబల్ అట్రిబ్యూట్స్。
ఇవెంట్ అట్రిబ్యూట్స్
<img>
టాగ్స్ ఇవెంట్ అట్రిబ్యూట్స్ ను మద్దతు చేస్తాయి HTML లో ఇవెంట్ అట్రిబ్యూట్స్。
మరిన్ని ఉదాహరణలు
ఉదాహరణ 3
చిత్రాన్ని నిర్ణయించండి (CSS ఉపయోగించడం ద్వారా):
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">
ఉదాహరణ 4
చిత్రానికి హెడ్జ్ జోడించండి (CSS ఉపయోగించడం ద్వారా):
<img src="flower.gif" alt="[#1#]" style="border:5px solid black">
ఉదాహరణ 5
చిత్రానికి ఎడమ, పైకి మార్గాలు జోడించండి (CSS ఉపయోగించడం ద్వారా):
<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">
ఉదాహరణ 6
చిత్రానికి పైని, క్రిందిని, బాహ్య మార్గాలు జోడించండి (CSS ఉపయోగించడం ద్వారా):
<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">
ఉదాహరణ 7
మరొక ఫోల్డర్ లేదా మరొక వెబ్ సైట్ నుండి చిత్రాన్ని చేర్చడం ఎలా ఉంటుంది:
<img src="/photo/flower.gif" alt="Flower" width="180" height="180"> <img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">
ఉదాహరణ 8
చిత్రానికి హెచ్చరిక లింక్ చేయటం ఎలా చేయాలి:
<a href="https://www.codew3c.com"> <img src="w3logo.png" alt="codew3c.com" width="400" height="225"> </a>
ఉదాహరణ 9
కింది చిత్రాన్ని క్లిక్ చేయడం సాధ్యమైన చిత్ర మ్యాపింగ్ ను ఎలా సృష్టించటం. ప్రతి రూపం ఒక హెచ్చరిక లింక్ గా ఉంటుంది:
<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451"> <map name="lifemap"> <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html"> <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html"> <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html"> </map>
పెరియడిక్ రీడింగ్ - ఎలా చిత్రాలను సరిగా వాడటం
HTML మరియు XHTML అత్యంత ఆకర్షణీయమైన లక్షణాలలో ఒకటి, డాక్యుమెంట్ పాఠంలో చిత్రాలను చేర్చటం, చిత్రాలను డాక్యుమెంట్ అంతర్గత వస్తువుగా (ఇన్లైన్ చిత్రం) చేర్చవచ్చు లేదా అది ఒక సింగిల్ డాక్యుమెంట్ గా డౌన్లోడ్ చేయవచ్చు లేదా డాక్యుమెంట్ బ్యాక్గ్రౌండ్ గా చేర్చవచ్చు.
డాక్యుమెంట్ విషయంలో చిత్రాలను (స్టాటిక్ లేదా అనిమేషన్ చిహ్నాలు, ఫోటోలు, వివరణలు, చిత్రాలు మొదలెడి) చిక్కగా చేర్చినప్పుడు, డాక్యుమెంట్ అధికంగా స్పష్టంగా మరియు ఆకర్షణీయంగా కనిపిస్తుంది, మరియు ప్రొఫెషనల్ కనిపిస్తుంది, మరియు ఇన్ఫర్మేషన్ గా మరియు చదవడం సులభంగా చేస్తుంది. ఇక ఒక చిత్రాన్ని హెచ్చరిక చిహ్నంగా వాడవచ్చు.
అయితే, చిత్రాలను అధికంగా వాడితే, డాక్యుమెంట్ చిత్రాలుగా కనిపించి, కాంఫ్యూజ్ అవుతుంది, మరియు చదవలేని అవుతుంది, మరియు వారికి పేజీని డౌన్లోడ్ చేయడం మరియు చూడడం కోసం అనేక అనివార్య వేదనలను పెంచుతుంది.
క్రింది వ్యాసాన్ని చదవండి, వెబ్లో రెండు ప్రధాన చిత్ర ఫార్మాట్లు: GIF మరియు JPEG ను నేర్చుకుని, ఎలా చిత్రాలను సరిగా వాడటం నేర్చుకుండాలి:
డిఫాల్ట్ CSS సెట్టింగ్స్
అనేక బ్రౌజర్లు క్రింది డిఫాల్ట్ విలువలను ప్రదర్శించతాయి <img>
అంశం:
img { display: inline-block; }
బ్రౌజర్ మద్దతు
చ్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఒపెరా |
---|---|---|---|---|
చ్రోమ్ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఒపెరా |
మద్దతు | మద్దతు | మద్దతు | మద్దతు | మద్దతు |