අද දින ඕනෑම වෙබ් පිටුවක් දෙස බලන අතර ඒවා සාමාන්යයෙන් පොදු දේවල් බෙදාහදා ගන්නා බව ඔබට පෙනෙනු ඇත. මෙම පොදු ගති ලක්ෂණ එක් පින්තූරයකි. නිවැරදි රූප සටහන් වෙබ් අඩවිවල ඉදිරිපත් කිරීම සඳහා බොහෝ දේ එකතු කරයි. සමාගමේ ලාංඡනයක් වැනි සමහර පින්තූර, එම වෙබ් අඩවිය වෙළඳ නාමය සහ එම ඩිජිටල් ආයතනය ඔබේ ශාරීරික සමාගමට සම්බන්ධ කරන්න.
ඔබගේ වෙබ් පිටුවට රූපයක්, අයිකනයක් හෝ රූපයක් එකතු කිරීම සඳහා, පිටුවෙහි HTML කේතයෙහි ටැගය භාවිතා කළ යුතුය. ඔබට ග්රැෆික් දර්ශනය කිරීමට අවශ්ය ස්ථානයේම ඔබේ HTML හි HTML ටැගය තැන්පත් කරන්න. පිටුව නරඹන වෙබ් බ්රවුසරය මගින් මෙම ටැගය ප්රතිස්ථාපනය කරනු ලැබේ. අපගේ සමාගමට logo උදාහරණයට ආපසු යන්න, ඔබේ වෙබ් අඩවියට එම රූපය එකතු කළ හැක්කේ කෙසේද යන්න මෙහි දැක්වේ:
අනුරූපණ ගුණාංග
ඉහත HTML කේතය දෙස බැලීමෙන්, මූලද්රව්යයේ අංග දෙකකට අයත් වේ. ඔවුන් සෑම රූපයක්ම සඳහා අවශ්ය වේ.
පළමු ලක්ෂණය වන්නේ "src" වේ. මෙය සත්ය වශයෙන්ම පිටුවෙහි ප්රදර්ශනය කිරීමට ඔබට අවශ්ය පින්තූර ගොනුව වේ. අපගේ උදාහරණයේදී අපි "logo.png" ලෙස ගොනුවක් භාවිතා කරමු. වෙබ් බ්රවුසරය එම වෙබ් අඩවිය විදහාපෙන්වූ විට එය දර්ශනය වේ.
මෙම ගොනුවේ නමට පෙර, අප විසින් "අමතර තොරතුරු", "/ images /" එකතු කරන බව ඔබ දකිනු ඇත. මෙය ගොනු මාර්ගයයි. මූලික අළුත් කෙඳි ඩිරෙක්ටරයේ මූල සොයා බැලීමට සේවාදායකයාට කියයි. එවිට "පින්තූර" යනුවෙන් හඳුන්වන ෆෝල්ඩරයක් සොයා බලනු ඇත. අවසානයේ "logo.png" යනුවෙන් හඳුන්වනු ලැබේ. වෙබ් අඩවිවල සියළුම වෙබ් අඩවි ගබඩාව ගබඩා කිරීම සඳහා "පින්තූර" ෆෝල්ඩරයක් භාවිතා කිරීම සාමාන්ය දෙයක් වේ. නමුත් ඔබේ ගොනු මාර්ගය ඔබේ වෙබ් අඩවිය සඳහා අදාළ වන ඕනෑම ස්ථානයකට වෙනස් වනු ඇත.
දෙවන අරුත වන්නේ "alt" පෙළයි. කිසියම් හේතුවක් නිසා පින්තූර අපහසුතාවට පත් වුවහොත් එය පෙන්වන විකල්ප ආකෘතිය මෙයයි. මෙම පෙළ පින්තූරයට අපහාස නොකළහොත් "සමාගම් ලාංඡනය" කියවනු ලැබේ. ඇයි එහෙම වෙන්නේ? විවිධ හේතු:
- වැරදි ගොනු මාර්ගය
- වැරදි ගොනු නාමයක් හෝ වැරදි අක්ෂර වින්යාසය
- සම්ෙපේෂණ දෝෂය
- ගොනුව සේවාදායකයෙන් මකා දමා ඇත
අපගේ නිශ්චිත රූපය අතුරුදහන් වී ඇත්තේ ඇයි දැයි විවේචන කිහිපයක් පමණි. මෙම අවස්ථාවන්හිදී, අපගේ alt පෙළ පමණක් ප්රදර්ශනය වනු ඇත.
දෘශ්ය ආබාධිත පුද්ගලයෙකුට රූපය කියවීමට "තිරය කියවීමේ මෘදුකාංගය" Alt text භාවිතා කරයි. අප වැනි පින්තූර දැකීමට නොහැකි නිසා, මෙම පින්තූරය තමාට ඇත්තේ කුමක්දැයි ඔවුන්ට දැනගන්නට ලැබේ. Alt පෙළ අවශ්ය වන්නේ ඇයි සහ එය පැහැදිලිව දැක්විය යුත්තේ ඇයි?
Alt පාඨයේ පොදු වරදවා වටහා ගැනීම යනු සෙවුම් යන්ත්ර සඳහා අරමුණු කර ඇත. මෙය සත්ය නොවේ. ගූගල් සහ අනෙකුත් සෙවුම් එන්ජින් පින්තූරයේ ඇති දේ තීරණය කිරීමට මෙම පාඨය කියවුවද (මතක තබා, ඔවුන් ඔබේ රූපය "බලන්න" නොහැකිය), සෙවුම් ඇන්ජින් වලට පමණක් ආයාචනය කිරීමට ඔබට අභිප්රේතයක් නැත. Alt alt alt alt alt alt alt alt alt alt alt alt alt alt alt alt alt alt alt සෙවුම් යන්ත්ර වලට ආයාචනය කරන අභිරුචියකට අභිරුචියකට අභිරුචිකරණය කරන සමහර ටැගයන් එකතු කළ හැකි නම්, එය හොඳය. නමුත් සෑම විටම අක්ෂර පෙළහි රූපය එහි රූපයේ දැක්වෙන රූපයක් දැකිය නොහැකිය.
වෙනත් ලක්ෂණ
IMG ටැග් ඔබට ඔබේ වෙබ් පිටුවෙහි ඇති ග්රැෆික්ස් තැනීමේදී ඔබ භාවිතා කළ හැකි වෙනත් ගුණාංග දෙකක් ඇත - පළල සහ උස. උදාහරණයක් ලෙස, ඔබ ඩයිනෝවීවර් වැනි WYSIWYG සංස්කාරකය භාවිතා කරන්නේ නම්, එය ස්වයංක්රීයව ඔබට මෙම තොරතුරු ලබා දෙයි. මෙන්න උදාහරණයක්:
WIDTH සහ HEIGHT ගුණාංගවල රූපයේ ප්රමාණය අනුව බ්රවුසරයට කියනු ලැබේ. වෙබ් බ්රව්සරයේ පසුව පිරිසැලසුමෙහි ඇති ඉඩ ප්රමාණය කොපමණ ද යන්න දන්නා අතර එය රූපයේ බාගැනීම් අතරතුර පිටුවෙහි ඊළඟ අංගය වෙත ගමන් කළ හැකිය. ඔබගේ HTML හි මෙම තොරතුරු භාවිතා කිරීමේ ගැටළුව නම් ඔබට ඔබේ රූපය සෑම විටම ප්රමාණවත් නොවේ. නිදසුනක් ලෙස, ඔබට ප්රතිචාරාත්මක වෙබ් අඩවියක් නරඹන්නන් තිරය මත සහ උපාංගයේ ප්රමාණය මත පදනම්ව වෙනස්වන ප්රමාණය අනුව, ඔබගේ පින්තූරවල නම්යශීලී විය යුතුය. ඔබ ස්ථාවර ප්රමාණය යනු ඔබේ HTML හි සඳහන් නම්, ප්රතිචාරාත්මක CSS මාධ්ය විමසුම් සමඟ පරයා යන්නට ඉතා අපහසු වනු ඇත. මෙම හේතුව නිසා, සහ CSS සහ CSS (CSS) වෙන්කිරීම පවත්වා ගෙන යාම සඳහා (HTML), ඔබගේ HTML කේතයට පළල සහ උස ගුණාංග එකතු නොකරයි.
එක් සටහනක්: ඔබ මෙම ප්රමාණයේ උපදෙස් පැහැර හැර ඇති අතර, CSS හි ප්රමාණය නියම නොකරන්නේ නම්, බ්රවුසරය පෙරනිමියෙන්, ස්වකීය ප්රමාණයෙන් දර්ශණය වනු ඇත.
ජෙරමි ගිරාඩ් විසින් සංස්කරණය කරන ලදි