පින්තූර සහ වස්තූන් සඳහා HTML IMG ටැග් භාවිතය
HTML ඉඟි මඟින් වෙබ් පිටුවක පින්තූර සහ අනෙකුත් ස්ථිතික ග්රැෆික් වස්තු ඇතුළත් කිරීම පාලනය කරයි. මෙම පොදු ටැගය, ආකර්ෂණීය, ප්රතිබිම්බිත-යොමු වෙබ් අඩවියක් නිර්මාණය කිරීම සඳහා ඔබේ හැකියාවට පොහොසත් වන අනිවාර්ය හා වෛකල්පිත ගුණාංගයන් සඳහා අනුග්රහය දක්වයි.
සම්පූර්ණයෙන්ම සාදන ලද HTML IMG ටැගයක් පිළිබඳ නිදසුනක් මෙන්න මෙවැන්නකි:
අවශ්ය IMG ටැග් ආකෘති
SRC. වෙබ් පිටුවක දර්ශනය කිරීමට රූපයක් ලබා ගැනීමට ඔබට අවශ්ය එකම ගුණාංග වන්නේ SRC ලක්ෂණයයි. මෙම ආචරනය දර්ශනය වීමට නියමිත රූපයේ නම සහ ස්ථානය හඳුනා ගනියි.
ALT. වලංගු XHTML සහ HTML4 ලිවීම සඳහා ALT ලක්ෂණයද අවශ්ය වේ. මෙම ගුණාංගය රූපය විස්තර කරන පාඨ සහිත නොවන අක්ෂර වින්යාසයන් සැපයීමට භාවිතා කරයි. බ්රවුසරයේ විකල්ප පාඨය විවිධ ආකාරයෙන් පෙන්වයි. සමහරුන් රූපය මත ඔබේ මූසිකය තබා ඇති විට, එය උත්පතන ලෙස ප්රදර්ශනය කරයි, අනෙක් අය ඔබට රූපයේ දකුණු-ක්ලික් කර ඇති අතර සමහරුන් එය ප්රදර්ශනය නොකරයි.
වෙබ් පිටුවට අදාළ නොවන හෝ වැදගත් නොවන රූපයේ අමතර විස්තර ලබා දීම සඳහා alt text භාවිතා කරන්න. නමුත් screen readers සහ අනෙකුත් පෙළ-පමණක් බ්රවුසර් වලදී එම පිටුවෙහි ඇති ඉතිරි පාඨය සමඟ පාඨ කියවෙනු ඇත. ව්යාකූලත්වයට මඟ හැරීම සඳහා, (උදාහරණ ලෙස), "වෙබ් අඩවි නිර්මාණය සහ HTML" යන විස්තරාත්මක වචන පෙළක් භාවිතා කරන්න.
HTML5 හි, ALT ලක්ෂණය සෑම විටම අවශ්ය නොවේ, මන්ද එය ඔබට තවත් විස්තරයක් එකතු කිරීම සඳහා ශීර්ෂයක් භාවිතා කළ හැකිය. සම්පූර්ණ විස්තරයක් අඩංගු හැඳුනුම් පතක් සඳහන් කිරීමට ARIA-DESCRIBEDBY භාවිතා කළ හැකිය.
වෙබ් පිටුවක හෝ අයිකනයක ඉහළ රූපයක් වැනි රූපයක් වැනි රූපයක් හුදෙක් අලංකාර වේ නම් වෙනත් අකුරු ද අවශ්ය නොවේ. නමුත් ඔබ විශ්වාස නොකළහොත්, alt text එකේ පෙළක් ඇතුළත් කරන්න.
නිර්දේශිත IMG ආකෘති
තීරු සහ උස . WIDTH සහ HEIGHT ගුණාංගයන් සැමවිටම භාවිතා කිරීමට පුරුදු වන්න. තවද ඔබ සැමවිටම සැබෑ ප්රමාණය භාවිතා කළ යුතු අතර ඔබේ බ්රවුසරය සමඟ ඔබගේ ප්රතිබිම්බ ප්රමාණය වෙනස් නොකරන්න.
මෙම ගුණාංග මෙම පිටුවේ ප්රතිනිෂ්පාදනය වේගවත් කරයි, බ්රවුසරයට අනුරූපයට නිර්මාණය සඳහා ඉඩ ලබා දිය හැකි වන අතර, සම්පූර්ණ රූපය බාගැනීමට බලා නොසිට, අන්තර්ගතයේ ඉතිරි කොටස දිගටම බාගත කර ගනී.
වෙනත් ප්රයෝජනවත් IMG ආකෘති
ටයිටල් . මෙම ගුණාංගය ඕනෑම HTML අංගයකට යෙදිය හැකි ගෝලීය ගුණාංගයකි. එපමණක්ද නොව, TITLE ගුණාංගය ඔබට රූපය පිළිබඳ අමතර තොරතුරු ලබා දේ.
බොහෝ බ්රව්සර් TITLE ආකෘතියට සහය දක්වයි, නමුත් එය විවිධ ආකාරයෙන් සිදු කරයි. සමහරක් පාඨය උත්පතන ලෙස ප්රදර්ශනය වන අතර අනෙක් අය පින්තූරයේ දකුණු ක්ලික් කරන විට තොරතුරු තිරවල එය ප්රදර්ශනය කරයි. ඔබට රූපය පිළිබඳ අතිරේක තොරතුරු ලිවීමට TITLE ආකෘතිය භාවිතා කළ හැකිය, නමුත් මෙම තොරතුරු සැඟවී හෝ දෘශ්යමාන වේ. සෙවුම් යන්ත්ර සඳහා ප්රධාන වචන සැඟවීමට ඔබට අනිවාර්යෙන්ම මෙය භාවිතා නොකරන්න. බොහෝ විට මෙම සෙවුම් යන්ත්රය බොහෝ සෙවුම් ඇන්ජින් විසින් දඩුවම් කර ඇත.
USEMAP සහ ISMAP . මෙම ගුණාංග දෙක සේවාලාභීන්-පැත්ත () සහ සේවාදායක-පාර්ශ්වීය (ISMAP) අනුරූප සිතියම් ඔබගේ පින්තූර වෙත තබා ඇත.
LONGDESC . මෙම ආකෘතිය මඟින් අනුරූපයේ දිග විස්තරය සඳහා URL යොමු කරයි. මෙම විශේෂාංග ඔබගේ පින්තූර වඩා පහසුවෙන් ප්රවේශ විය හැකිය.
විරහිත හා යල් පැන ගිය IMG ආකෘති
HTML5 හි සමහර ගුණාංග HTML5 හි HTML හෝ අභාවයට ගොස් ඇත. හොඳම HTML සඳහා, ඔබට මෙම ගුණාංග භාවිතා කිරීම වෙනුවට වෙනත් විසඳුම් සොයාගත යුතුය.
සීමාව . රූපය වටා ඕනෑම මායිමෙහි පික්සල්හි පළල නිර්වචනය කර ඇත. HTML4 හි CSS හි වාසි සහ HTML5 හි භාවිතයෙන් එය කල් ඉකුත්ව ඇත.
ඒ . මෙම ගුණාංගය පෙළ ඇතුළත රූපයක් තැබීමට සහ එය වටා පෙළ ගලා යෑමට ඉඩ සලසයි. පින්තූරයක් දකුණු හෝ වම් පසින් රූපයක් තැබිය හැකිය. HTML4 හි float CSS දේපල වලට අනුකූලව HTML5 හි HTML5 හි අභාවයට ගොස් ඇත.
HSPACE සහ VSPACE . HSPACE සහ VSPACE ගුණාංග වර්ණවත්ව (HSPACE) සහ සිරස් අතට (VSPACE) හිස් ඉඩක් එක් කරයි. සුදු පැහැති අවකාශය ග්රැෆික් දෙපස දෙපසට එකතු වනු ඇත (ඉහළ සහ පහළ හෝ වම් හෝ දකුණු පස), එබැවින් ඔබ එක් පැත්තක ඉඩ පමණක් අවශ්ය නම්, ඔබ CSS භාවිතා කළ යුතුය. මෙම ගුණාංග ආන්තික CSS දේපල සඳහා වන HTML4 හි HTML4 හි අභාවයට ගොස් ඇත, ඒවා HTML5 හි අභාවයට ගොස් ඇත.
අඩුපාඩු . LOWSRC ගුණාංගය ඔබේ අනුරූ මූලාශ්රය එතරම් විශාල වන අතර එය ඉතා සෙමින් බාගත කර ගන්නා විට විකල්ප ආකෘතියක් සපයයි. නිදසුනක් ලෙස, ඔබට ඔබේ වෙබ් පිටුව දිස්වීමට 500KB රූපයක් ඇති නමුත්, 500KB බාගත කිරීමට බොහෝ කාලයක් ගත වනු ඇත. එමනිසා ඔබට රූපයේ වඩා කුඩා කුඩා පිටපතක් නිර්මාණය කළ හැකිය, සමහර විට කළු හෝ සුදු හෝ අතිශයින්ම ප්රශංසනීය වූ අතර LOWSRC ගුණාංගය තුළ එය තැබිය හැක. කුඩා රූපය බාගත කර ප්රථමයෙන් පෙන්වනු ඇත. එවිට විශාල රූපය දර්ශණය වන විට එය අඩු ප්රභවයක් ප්රතිස්ථාපනය කරනු ඇත.
LOWSRC ගුණාංගය Netscape Navigator 2.0 වෙත IMG ටැග් එක වෙත එක් කෙරිනි. DOM මට්ටම් 1 හි කොටසක් වූ නමුත් පසුව එය DOM මට්ටමෙන් ඉවත් කරන ලදී. 2. සියලුම වෙබ් අඩවි නවීන බ්රව්සර් විසින් එය සහාය දක්වන බව බ්රවුසරයේ අනුග්රහය මෙම අද්විතීය බව දක්වයි. එය HTML4 හි භාවිතයට නොපැමිණීම හෝ HTML5 හි අභාවයට ගොස් නැත.
මෙම ගුණාංගය භාවිතා නොකර, ඒවා ඉක්මනින් ප්රවේශනය කිරීම සඳහා ඔබේ පින්තූර උත්ශ්රේණි කරනු ලැබේ. පිටු බාවිතා කිරීම හොඳ වෙබ් නිර්මාණයක වැදගත් අංගයක් වන අතර, ඔබ විශාල LOWSRC ගුණාංගයක් භාවිතා කළද, විශාල ඡායාරූප මන්දගාමී පිටු දැවැන්ත අඩුවීමක් දක්වයි.