నేడు ఏ వెబ్ పేజీని చూడండి మరియు వారు కొన్ని విషయాలను సాధారణంగా భాగస్వామ్యం చేస్తారని మీరు గమనించవచ్చు. ఆ షేర్డ్ లక్షణాలలో ఒకటి చిత్రాలు. కుడి చిత్రాలను వెబ్సైట్ యొక్క ప్రదర్శనకి చాలా జోడించండి. ఒక కంపెనీ లోగో లాంటి ఆ చిత్రాలలో కొన్ని బ్రాండ్ సైట్కు సహాయపడతాయి మరియు మీ భౌతిక సంస్థకు డిజిటల్ ఎంటిటీని కనెక్ట్ చేయండి.
మీ వెబ్ పేజీకి ఒక చిత్రం, ఐకాన్ లేదా గ్రాఫిక్స్ని జోడించడానికి, మీరు ట్యాగ్ను పేజీ యొక్క HTML కోడ్లో ఉపయోగించాలి. మీరు మీ HTML లో IMG ట్యాగ్ను ప్రదర్శించడం ఖచ్చితంగా ఎక్కడ ప్రదర్శించాలనుకుంటున్నారా. పేజీ వీక్షించిన తర్వాత పేజీ యొక్క కోడ్ను అందించే వెబ్ బ్రౌజర్ ఈ ట్యాగ్ను తగిన గ్రాఫిక్తో భర్తీ చేస్తుంది. మా సంస్థ లోగో ఉదాహరణకి తిరిగి వెళ్లండి, ఇక్కడ మీరు మీ సైట్కు ఈ చిత్రాన్ని ఎలా జోడించగలరు:
చిత్రం గుణాలు
పైన HTML కోడ్ వద్ద, మీరు మూలకం రెండు లక్షణాలను కలిగి చూస్తారు. వాటిని ప్రతి చిత్రం కోసం అవసరం.
మొదటి లక్షణం "src". ఇది చాలా అక్షరార్థంగా మీరు పేజీలో ప్రదర్శించదలిచిన ఇమేజ్ ఫైల్. మా ఉదాహరణలో మనం "logo.png" అని పిలువబడే ఒక ఫైల్ ఉపయోగిస్తున్నాము. ఇది సైట్ను ప్రదర్శించినప్పుడు వెబ్ బ్రౌజర్ ప్రదర్శించే గ్రాఫిక్.
మీరు ఈ ఫైల్ పేరుకు ముందుగా, "/ images /" అనే కొన్ని అదనపు సమాచారాన్ని మేము జోడించాము. ఇది ఫైల్ మార్గం. ప్రాధమిక ఫార్వార్డ్ స్లాష్ డైరెక్టరీ యొక్క రూటులోకి చూసేందుకు సర్వర్కు చెబుతుంది. అప్పుడు "ఫోల్డ్స్" అని పిలవబడే ఒక ఫోల్డర్ మరియు చివరకు "logo.png" అని పిలువబడే ఫైల్ కోసం చూస్తుంది. సైట్ యొక్క గ్రాఫిక్స్ని నిల్వ చేయడానికి "చిత్రాలు" అనే ఫోల్డర్ను ఉపయోగించడం అనేది చాలా సాధారణమైన పద్ధతి, కానీ మీ సైట్ మార్గం కోసం మీ ఫైల్ మార్గం తగినట్లు మారుతుంది.
రెండవ అవసరమైన లక్షణం "alt" టెక్స్ట్. ఇమేజ్ కొన్ని కారణాల వల్ల లోడ్ చేయకపోతే అది చూపించే "ప్రత్యామ్నాయ వచనం". చిత్రం లోడ్ చేయడంలో విఫలమైతే మన ఉదాహరణలో "కంపెనీ లోగో" చదివి వినిపిస్తుంది. అలా ఎందుకు జరగాలి? అనేక కారణాలు:
- తప్పు ఫైల్ మార్గం
- తప్పు ఫైల్ పేరు లేదా అక్షరక్రమం
- ట్రాన్స్మిషన్ లోపం
- సర్వర్ నుండి సర్వర్ తొలగించబడింది
మా పేర్కొన్న చిత్రం ఎందుకు తప్పిపోయి ఉండవచ్చు అనేదానికి కొన్ని అవకాశాలు మాత్రమే. ఈ సందర్భాలలో, మా alt టెక్స్ట్ బదులుగా ప్రదర్శిస్తుంది.
ప్రత్యామ్నాయ వచనం స్క్రీన్ రీడర్ సాఫ్ట్ వేర్ కూడా దృష్టిని తగ్గించే ఒక సందర్శకుడికి "చదువు" కు ఉపయోగించబడుతుంది. మనము చిత్రాలను చూడలేము కాబట్టి, ఈ పాఠం ఏమిటో వారికి తెలుస్తుంది. ఎందుకు వచనం అవసరమవుతుందో మరియు ఇది ఎందుకు చిత్రం స్పష్టంగా వివరించాలి!
Alt text యొక్క ఒక సాధారణ అపార్థం ఇది శోధన ఇంజిన్ ప్రయోజనాల కోసం ఉద్దేశించబడింది. ఇది నిజం కాదు. గూగుల్ మరియు ఇతర శోధన ఇంజిన్లు ఈ పాఠాన్ని చదివేటప్పుడు ఈ చిత్రం ఏమిటో గుర్తించడానికి (గుర్తుంచుకోండి, వారు మీ చిత్రం "చూడలేరు"), శోధన ఇంజిన్లకు మాత్రమే అప్పీల్ చెయ్యడానికి మీరు వచనం వ్రాయకూడదు. మనుషుల కోసం ఉద్దేశించిన రచయిత అస్పష్టం. మీరు శోధన ఇంజిన్లకు విజ్ఞప్తి చేసిన ట్యాగ్లోకి కొన్ని కీలకపదాలను చేర్చగలిగితే, అది మంచిది, కాని ఎల్లప్పుడూ వచనం దాని ప్రాథమిక ప్రయోజనంగా పని చేస్తుందని నిర్ధారించుకోండి.
ఇతర గుణాలు
వెడల్పు మరియు ఎత్తు - IMG ట్యాగ్ మీ వెబ్ పేజీలో ఒక గ్రాఫిక్ను ఉంచినప్పుడు మీరు ఉపయోగించగల రెండు ఇతర లక్షణాలను కూడా కలిగి ఉంది. ఉదాహరణకు, మీరు డ్రీమ్వీవర్ వంటి WYSIWYG సంపాదకుడిని ఉపయోగిస్తే, ఇది మీ కోసం స్వయంచాలకంగా ఈ సమాచారాన్ని జోడిస్తుంది. ఇక్కడ ఒక ఉదాహరణ ఉంది:
WIDTH మరియు HEIGHT లక్షణాలను బ్రౌసర్ చిత్రం యొక్క పరిమాణంతో చెప్పండి. అప్పుడు బ్రౌజర్ కేటాయించే లేఅవుట్లో ఎంత స్థలం ఖచ్చితంగా తెలుసు, మరియు చిత్రం దిగుమతి అయినప్పుడు పేజీలో ఇది తదుపరి మూలకానికి వెళ్లవచ్చు. ఈ సమాచారాన్ని మీ HTML లో ఉపయోగించడం వలన, మీ చిత్రం ఖచ్చితంగా ఆ ఖచ్చితమైన పరిమాణంలో ప్రదర్శించబడకూడదు. ఉదాహరణకు, మీరు సందర్శకులు స్క్రీన్ మరియు పరికర పరిమాణాన్ని బట్టి మార్పులు చేసుకునే ప్రతిస్పందించే వెబ్సైట్ని కలిగి ఉంటే, మీ చిత్రాలను కూడా అనువైనది కావాలి. మీరు మీ HTML లో స్థిరమైన పరిమాణంలో ఉన్నట్లయితే, మీరు ప్రతిస్పందించే CSS మీడియా ప్రశ్నలతో భర్తీ చేయడాన్ని చాలా కష్టతరం చేస్తుంది. ఈ కారణంగా, మరియు శైలి (CSS) మరియు నిర్మాణం (HTML) యొక్క విభజనను నిర్వహించడానికి, మీరు మీ HTML కోడ్కు వెడల్పు మరియు ఎత్తు లక్షణాలను జోడించవద్దని సిఫార్సు చేయబడింది.
ఒక గమనిక: మీరు ఈ పరిమాణ సూచనలను ఆపివేస్తే మరియు CSS లో పరిమాణాన్ని పేర్కొనకపోతే, బ్రౌజరు దాని డిఫాల్ట్, స్థానిక పరిమాణంలో ఏమైనప్పటికీ చిత్రం చూపుతుంది.
జెరెమీ గిరార్డ్ చే ఎడిట్ చేయబడింది