రచయిత:
Christy White
సృష్టి తేదీ:
4 మే 2021
నవీకరణ తేదీ:
1 జూలై 2024
![15: HTML మరియు CSS ఉపయోగించి చిత్రాలను ఎలా చొప్పించాలి | HTML మరియు CSS నేర్చుకోండి | HTML ట్యుటోరియల్ | CSS యొక్క ప్రాథమిక అంశాలు](https://i.ytimg.com/vi/_w6N_nplmAw/hqdefault.jpg)
విషయము
మీ వెబ్సైట్ లేదా సోషల్ నెట్వర్క్ ప్రొఫైల్కు చిత్రాలను జోడించడం మీ వెబ్ పేజీని అలంకరించడానికి ఒక అద్భుతమైన మార్గం. HTML (హైపర్టెక్స్ట్ మార్కప్ లాంగ్వేజ్) వెబ్ పేజీలను సృష్టించడానికి చాలా విధులను కలిగి ఉంది, కానీ అదృష్టవశాత్తూ మీరు చిత్రాలను జోడించాల్సిన కోడ్ చాలా కష్టం కాదు.
అడుగు పెట్టడానికి
1 యొక్క పద్ధతి 1: HTML తో చిత్రాలను చొప్పించడం
హాట్ లింకింగ్ను అనుమతించే ఫోటోబకెట్ లేదా టైనిపిక్ వంటి ఉచిత హోస్టింగ్ వెబ్సైట్కు మీ చిత్రాన్ని అప్లోడ్ చేయండి. హాట్-లింకింగ్ వెబ్సైట్ సర్వర్కు చిత్రం యొక్క ప్రత్యక్ష లింక్ను అనుమతిస్తుంది; కొంతమంది ప్రొవైడర్లు దీనిని నిషేధించారు ఎందుకంటే హాట్-లింకింగ్ వారి బ్యాండ్విడ్త్ను ఉపయోగిస్తుంది మరియు వారి సర్వర్లలో స్థలాన్ని తీసుకుంటుంది.
- మీకు చెల్లింపు హోస్టింగ్ ఖాతా ఉంటే, మీ వెబ్సైట్ ఉంచిన సర్వర్కు చిత్రాలను నేరుగా అప్లోడ్ చేయండి. ఇది ఎల్లప్పుడూ ఉచిత సైట్ కంటే నమ్మదగినది మరియు ఖరీదైనది కానవసరం లేదు.
టెక్స్ట్ ఎడిటర్లో క్రొత్త పత్రాన్ని తెరవండి (ఉదా., నోట్ప్యాడ్ / నోట్ప్యాడ్) లేదా మీ వెబ్సైట్ / ప్రొఫైల్లో పేజీని తెరవండి, అక్కడ మీరు నేరుగా HTML కోడ్ను మార్చవచ్చు.
తో ప్రారంభించండి img ట్యాగ్. ది img ట్యాగ్ ఖాళీగా ఉంది, అంటే ముగింపు ట్యాగ్ అవసరం లేదు. అయినప్పటికీ, XHTML ధ్రువీకరణ కోసం మీరు దాని ముందు ఒక స్థలాన్ని మరియు స్లాష్ను ఉంచవచ్చు అంతకన్నా ఎక్కువ గుర్తు.
- img />
అందుబాటులో ఉన్న అనేక లక్షణాలు ఉన్నాయి, కానీ ఒకటి మాత్రమే అవసరం:src. అది మీ చిత్రం యొక్క స్థానం / చిరునామా లేదా URL కూడా.
- img src = "చిత్రం యొక్క URL" />
తరువాత మీరు ఉండాలి alt లక్షణాన్ని జోడించండి. చిత్రం లోడ్ చేయడంలో విఫలమైతే ఇది ప్రత్యామ్నాయ వచనాన్ని చూపుతుంది. స్క్రీన్ రీడర్లను ఉపయోగించే దృష్టి లోపం ఉన్నవారికి ఇది ఒక సేవ.
- మీరు కర్సర్ను చిత్రంపై ఉంచినట్లయితే, ఈ వచనం టూల్టిప్గా కూడా చూపబడుతుంది, అయితే ఇది ఇంటర్నెట్ ఎక్స్ప్లోరర్లో మాత్రమే ఉంటుంది. అన్ని బ్రౌజర్లతో పనిచేసే పరిష్కారం (ఫైర్ఫాక్స్ ఎప్పటికి.) దానికి శీర్షిక అదనంగా ఉపయోగించడానికి లక్షణం alt. (చిత్రానికి టూల్టిప్ ఉండకూడదనుకుంటే మీరు రెండోదాన్ని వదిలివేయవచ్చు.)
ఉదాహరణకు:img src = "చిత్రం యొక్క URL" alt = "ఒకవేళ" title = "Tooltip" />
- ఇప్పుడు మీరు చిత్ర పరిమాణాన్ని సూచించవచ్చు ఎత్తు మరియు వెడల్పు లక్షణం మరియు పిక్సెల్లు లేదా శాతాన్ని పేర్కొనడం ద్వారా. ఈ విధంగా పున izing పరిమాణం చేయడం వలన వీక్షణ యొక్క పరిమాణం మాత్రమే మారుతుంది, చిత్రం యొక్క పరిమాణం కాదు. చిత్రం యొక్క లోడింగ్ సమయాన్ని తగ్గించడానికి, ఫోటో ఎడిటింగ్ సాఫ్ట్వేర్తో లేదా PicResize.com వంటి ఆన్లైన్ సేవతో ముందుగానే పరిమాణాన్ని మార్చడం మంచిది, ముఖ్యంగా పెద్ద చిత్రాలతో.
- img src = "చిత్రం యొక్క URL" alt = "ఒకవేళ" title = "Tooltip" height = "50%" width = "50%" />
- img src = "చిత్రం యొక్క URL" alt = "ఒకవేళ" title = "Tooltip" height = "25px" width = "50px" />
- img src = "చిత్రం యొక్క URL" alt = "ఒకవేళ" title = "Tooltip" height = "50%" width = "50%" />
చిట్కాలు
- ఈ లక్షణాల విలువ 1-100% నుండి పిక్సెల్లలో లేదా శాతంగా ఇవ్వబడుతుంది.
- ఎగువ, దిగువ, మధ్య, కుడి, ఎడమ మొదలైన వివిధ ఆకృతీకరణ లక్షణాలను ఉపయోగించి చిత్రాన్ని వెబ్ పేజీలో ఎక్కడైనా ఉంచవచ్చు.
- చిత్రం యొక్క ఎడమ మరియు కుడి వైపున క్షితిజ సమాంతర స్థలాన్ని చొప్పించడానికి hspace లక్షణం ఉపయోగించబడుతుంది, అయితే vspace లక్షణం చిత్రాలు మరియు ఇతర వస్తువుల ఎగువ మరియు దిగువ భాగంలో గదిని తయారు చేయడానికి ఉపయోగించబడుతుంది.
- చిత్రాలతో ఎక్కువగా మునిగిపోకండి. అది గజిబిజిగా మరియు వృత్తిపరంగా కనిపిస్తుంది.
- లోగోలు లేదా కార్టూన్లకు GIF చిత్రాలు బాగున్నాయి, అయితే ఈ ఫైల్ రకం ఫోటోలు మరియు ఇతర రంగులకు చాలా రంగులతో తక్కువ అనుకూలంగా ఉంటుంది.
- GIF చిత్రాలు ఒక చిత్రం కోసం గరిష్టంగా 256 రంగులతో 8-బిట్ రంగుకు మాత్రమే మద్దతు ఇస్తాయి. అందువల్ల 16 లేదా 24 బిట్ కలర్ ఇలస్ట్రేషన్ లేదా ఫోటో యొక్క పునరుత్పత్తి అంత మంచిది కాదని అంచనా వేయాలి.
- GIF చిత్రాలు కూడా పారదర్శకతకు మద్దతు ఇస్తాయి. ఒక బిట్ పారదర్శకత సాధ్యమే, అంటే ఒక రంగును పారదర్శకంగా చేయవచ్చు.
- ఇంటర్లేసింగ్కు GIF చిత్రాల ద్వారా కూడా మద్దతు ఉంది, అంటే సైట్ పూర్తిగా సందర్శించే ముందు చిత్రం ఎలా ఉంటుందో దాని గురించి సైట్ సందర్శకుడికి ఒక ఆలోచన వస్తుంది.
- GIF ఫార్మాట్ యానిమేషన్కు కూడా మద్దతు ఇస్తుంది.
- చిత్రం యొక్క ఫైల్ ఫార్మాట్ (.webp .gif etc) URL పేర్కొన్నట్లు నిర్ధారించుకోండి.
హెచ్చరికలు
- హాట్లింక్ చేయవద్దు!