HTML යනු වෙබ් සංවර්ධනයේදී වැඩිපුරම භාවිතා වන ක්රමලේඛන භාෂාවක් වන අතර පෙනුම අභිරුචිකරණය කිරීමට සහ වැඩිදියුණු කිරීමට පුළුල් පරාසයක හැකියාවන් ලබා දෙයි. වෙබ් අඩවියක. මෙම විකල්ප අතර HTML භාවිතයෙන් වෙබ් පිටු නිර්මාණයකට ලාංඡනයක් එක් කිරීමේ හැකියාව ඇත. මෙම ලිපියෙන් අපි HTML හි ලාංඡනයක් තැබිය යුතු ආකාරය විස්තරාත්මකව සොයා බලමු, පියවරින් පියවර, පැහැදිලි උදාහරණ සහ තාක්ෂණික පැහැදිලි කිරීම් ලබා දීමෙන් ඔබට මෙම ක්රියාකාරීත්වය ක්රියාත්මක කළ හැක ඔබේ ව්යාපෘති වල වෙබ් අඩවිය ඵලදායී ලෙස.
1. HTML හි ලාංඡනයක් ඇතුළත් කිරීම පිළිබඳ හැඳින්වීම
HTML, HyperText Markup Language ලෙසද හැඳින්වේ, අන්තර්ගතය නිර්මාණය කිරීම සහ ව්යුහගත කිරීම සඳහා භාවිතා කරන සම්මත භාෂාව වේ. වෙබයේ. මෙම ලිපියෙන්, අපි ඔබට HTML හි ලාංඡනයක් ඇතුළු කරන්නේ කෙසේද සහ එය ඔබේ වෙබ් අඩවියට හොඳින් ගැලපෙන පරිදි එහි පෙනුම රිසිකරණය කරන්නේ කෙසේද යන්න පියවරෙන් පියවර පෙන්වන්නෙමු.
ආරම්භ කිරීමට, ඔබට ඔබේ ලාංඡනය රූප ආකෘතියෙන් තිබිය යුතුය. වඩාත් පොදු ආකෘති වන්නේ JPEG, PNG සහ SVG ය. ඔබට ඔබේ ලාංඡන රූපය ලැබුණු පසු, ඔබට ලේබලය භාවිතා කළ හැක එය ඔබගේ HTML පිටුවට ඇතුල් කිරීමට. රූපය ඔබේ HTML ගොනුව ඇති ෆෝල්ඩරයේම ගබඩා කර ඇති බවට වග බලා ගන්න, නැතහොත් ටැගයේ "src" උපලක්ෂණයේ නිවැරදි රූප මාර්ගය සඳහන් කරන්න
.
ලාංඡනය ඇතුළු කිරීමට අමතරව, ඔබට එහි විශාලත්වය, පෙළගැස්ම සහ ආන්තිකය වැනි එහි පෙනුම අභිරුචිකරණය කිරීමට අවශ්ය විය හැකිය. ඔබට මෙය HTML සහ CSS ගුණාංග භාවිතයෙන් කළ හැක. උදාහරණයක් ලෙස, ලාංඡනයේ විශාලත්වය සකස් කිරීම සඳහා, ඔබට ටැගයට "පළල" සහ "උස" ගුණාංග එකතු කළ හැකිය. , පික්සල හෝ ප්රතිශතයෙන් අපේක්ෂිත අගයන් නියම කිරීම. අතිරේකව, ඔබට ලාංඡනය වම්, දකුණ හෝ පිටුවේ මැදට පෙළගස්වා ගැනීමට "පෙළගැස්වීම" ගුණාංගය භාවිතා කළ හැක. ඔබට ලාංඡනය වටා ආන්තිකයක් එක් කිරීමට අවශ්ය නම්, ඔබට අවශ්ය අගයන් නියම කිරීමට CSS හි "ආන්තික" ගුණාංගය භාවිතා කළ හැක.
2. HTML ලාංඡනයක් සඳහා ගැළපෙන රූප ආකෘති
කිහිපයක් තිබේ රූප ආකෘති වෙබ් අඩවියක ලාංඡනයක් සඳහා භාවිතා කළ හැකි HTML අනුකූල වේ. ආකෘතියක් තෝරාගැනීමේදී, රූපයේ ගුණාත්මකභාවය, ගොනු විශාලත්වය සහ විවිධ බ්රව්සර් සමඟ අනුකූල වීම සලකා බැලීම වැදගත් වේ.
HTML ලාංඡනයක් සඳහා වඩාත් පොදු ආකෘතිවලින් එකකි PNG ආකෘතිය (Portable Network Graphics). මෙම ආකෘතිය පුළුල් ලෙස භාවිතා වන්නේ එහි විනිවිදභාවයෙන් යුත් රූප පෙන්වීමට ඇති හැකියාව සහ එහි හොඳ පාඩු රහිත සම්පීඩන ගුණත්වය හේතුවෙනි. 
තවත් ජනප්රිය ආකෘතියක් වන්නේ SVG (Scalable Vector Graphics) ආකෘතියයි. SVG රූප දෛශික වන අතර ගුණාත්මකභාවය නැති නොවී පරිමාණය කළ හැකි බැවින්, සංකීර්ණ ග්රැෆික් මූලද්රව්ය හෝ පෙළ අඩංගු ලාංඡන සඳහා මෙම විකල්පය වඩාත් සුදුසු වේ. මීට අමතරව, ගොනු ප්රමාණය සාපේක්ෂව කුඩා වන අතර විවිධ තිර ප්රමාණයන්හි ලාංඡනය හොඳ පෙනුමක් ලබා දෙනු ඇත. 
අවසාන වශයෙන්, JPEG (ඒකාබද්ධ ඡායාරූප විශේෂඥ කණ්ඩායම) ආකෘතිය HTML ලාංඡනයක් සඳහා විකල්පයක් විය හැකිය. මෙම ආකෘතිය අනුක්රමණය සහිත ඡායාරූප හෝ රූප අඩංගු ලාංඡන සඳහා වඩාත් සුදුසු වේ. කෙසේ වෙතත්, JPEG ලෝසි සම්පීඩනය භාවිතා කරයි, එය ඉහළ සම්පීඩනය භාවිතා කළහොත් රූපයේ ගුණාත්මක භාවයට බලපායි. 
ඔබගේ HTML ලාංඡනය සඳහා රූප ආකෘතියක් තෝරාගැනීමේදී, විවිධ බ්රව්සර් සහ උපාංග සමඟ ගැළපුම සලකා බැලිය යුතු බව මතක තබා ගැනීම වැදගත්ය. අතිරේකව, දෘශ්ය ගුණාත්මක භාවයට හානියක් නොවන පරිදි ගොනු ප්රමාණය අඩු කිරීමට රූප ප්රශස්තිකරණ මෙවලම් භාවිතා කිරීම නිර්දේශ කෙරේ.
3. චිත්රක මෙවලම් තුළ ලාංඡනය නිර්මාණය කිරීම සහ නිර්මාණය කිරීම
මෙම කොටසේදී, අපි ඔබට ග්රැෆික් මෙවලම් භාවිතයෙන් ලාංඡනයක් සාදා සැලසුම් කරන්නේ කෙසේදැයි කියා දෙන්නෙමු. වෘත්තීය සහ ආකර්ශනීය ප්රතිඵලයක් ලබා ගැනීම සඳහා මෙම පියවර අනුගමනය කරන්න:
1. නිවැරදි මෙවලම තෝරන්න: වැනි බොහෝ විකල්ප තිබේ ඇඩෝ Illustrator, Photoshop, Canva, හෝ CorelDRAW. ඔබේ අවශ්යතා සහ හැකියාවන්ට වඩාත් ගැලපෙන එක කුමක්දැයි සොයා බලන්න.
2. සංකල්පය සහ ශෛලිය නිර්වචනය කරන්න: නිර්මාණය ආරම්භ කිරීමට පෙර, ඔබේ ලාංඡනය සමඟ ඔබට පැවසීමට අවශ්ය රූපය ගැන සිතන්න. ඔබට එය නවීන, අලංකාර, විනෝදජනක හෝ බැරෑරුම් වීමට අවශ්යද? ඔබ භාවිතා කරන වර්ණ ද නිර්වචනය කරන්න.
3. කටු සටහන් සහ පරීක්ෂණ කරන්න: ග්රැෆික් මෙවලම වෙත යාමට පෙර, කඩදාසි මත කටු සටහන් සහ පරීක්ෂණ සිදු කිරීම ප්රයෝජනවත් වේ. ඔබ අපේක්ෂිත ප්රතිඵලය සොයා ගන්නා තෙක් මෝස්තරයේ විවිධ හැඩයන් සහ පිරිසැලසුම් සමඟ අත්හදා බලන්න.
4. වෙබ් සඳහා සුදුසු ආකෘතියකින් ලාංඡනය සුරැකීම
මෙම අවස්ථාවේදී, ඔබ ලාංඡනය වෙබයේ භාවිතයට සුදුසු ආකෘතියකින් සුරැකීමට වග බලා ගැනීම වැදගත් වේ. මෙමඟින් රූපය නිවැරදිව පූරණය වන බවත් හොඳ දෘශ්ය ගුණාත්මක භාවයක් ඇති බවත් සහතික කරනු ඇත විවිධ උපාංග සහ බ්රව්සර්. මෙම කාර්යය ඉටු කිරීමට අවශ්ය පියවර පහත දැක්වේ:
1. නිවැරදි ආකෘතිය තෝරන්න: ලාංඡනය වෙබයේ නිවැරදිව දර්ශනය වන බව සහතික කිරීම සඳහා, JPEG, PNG හෝ SVG වැනි රූප ආකෘති භාවිතා කිරීම සුදුසුය. මෙම ආකෘති පුළුල් ලෙස සහාය දක්වන අතර හොඳ රූපයේ ගුණාත්මක බවක් ලබා දෙයි. කෙසේ වෙතත්, එක් එක් ආකෘතියට එහි විශේෂිත ලක්ෂණ සහ භාවිතයන් ඇති බව සැලකිල්ලට ගැනීම වැදගත්ය. උදාහරණයක් ලෙස, JPEG බොහෝ නාද සහිත ඡායාරූප සඳහා වඩාත් සුදුසු වේ, PNG විනිවිදභාවය සහිත රූප සඳහා පරිපූර්ණ වේ, සහ SVG දෛශික මූලද්රව්ය සහිත ලාංඡන සඳහා සුදුසු වේ.
2. ප්රමාණය ප්රශස්ත කරන්න: අපි නිවැරදි ආකෘතිය තෝරා ගත් පසු, ලාංඡනය වෙබයේ ඉක්මනින් පටවන පරිදි ගොනු ප්රමාණය ප්රශස්ත කිරීම වැදගත් වේ. පින්තූර කොම්ප්රෙෂර් වැනි මෙවලම් කිහිපයක් අන්තර්ජාලයේ තිබේ, ඒවා රූපයේ ගුණාත්මක භාවයට වැඩි හානියක් නොකර ගොනු ප්රමාණය අඩු කිරීමට උපකාරී වේ. බර ලාංඡනයක් පරිශීලක අත්දැකීමට සහ වෙබ් අඩවි ක්රියාකාරිත්වයට අහිතකර ලෙස බලපාන බව මතක තබා ගන්න.
3. විභේදනය පරීක්ෂා කරන්න: අවසාන වශයෙන්, ලාංඡනයේ විභේදනය වෙබ් සඳහා සුදුසු බව සහතික කිරීම අත්යවශ්ය වේ. විභේදනය යනු රූපය සෑදෙන පික්සල ගණන වන අතර එහි තියුණු බව සහ දෘශ්ය ගුණාත්මක භාවයට සෘජුවම බලපායි. වෙබය සඳහා, 72 dpi (අඟලකට පික්සල) විභේදනයක් භාවිතා කිරීම රෙකමදාරු කරනු ලැබේ. මෙම ලාංඡනය විවිධ ප්රමාණවලින් සහ විභේදනවලින් යුත් තිරවල හොඳ තත්ත්වයේ දර්ශනය වීම සහතික කරයි.
මෙම පියවර අනුගමනය කිරීමෙන්, ඔබට ඔබේ ලාංඡනය වෙබ් හිතකාමී ආකෘතියකින් සුරැකිය හැකි අතර එය ඔබේ වෙබ් අඩවියේ නිවැරදිව ප්රදර්ශනය වන බව සහතික කර ගත හැක. නිවැරදි ආකෘතිය තෝරා ගැනීමට මතක තබා ගන්න, ගොනු ප්රමාණය ප්රශස්ත කර විභේදනය පරීක්ෂා කරන්න.
5. ලාංඡනය සත්කාරකත්වය සඳහා HTML ව්යුහයේ වින්යාසය
මෙම කොටසේදී, අපගේ වෙබ් අඩවියේ ලාංඡනය සත්කාරකත්වය සඳහා HTML ව්යුහය වින්යාස කරන්නේ කෙසේදැයි අපි ඉගෙන ගනිමු. එය සංකීර්ණ ක්රියාවලියක් සේ පෙනෙන්නට ඇත, නමුත් නිවැරදි පියවර සමඟ එය ඉතා සරල වනු ඇත.
1. පළමුව, අපට අපගේ HTML ගොනුව පෙළ සංස්කාරකයක් හෝ ඒකාබද්ධ සංවර්ධන පරිසරයක් තුළ විවෘත කිරීමට අවශ්ය වනු ඇත. මෙම උදාහරණයේදී, අපි භාවිතා කරන්නෙමු දෘශ්ය ශබ්දාගාර කේතය. HTML ගොනුව තුළ, අපි අපගේ ලාංඡනය තැබීමට අවශ්ය ස්ථානය සොයමු. මෙය සංචාලන තීරුවේ, ශීර්ෂයේ හෝ පිටුවේ වෙනත් ඕනෑම කොටසක විය හැක.
2. අපි ලාංඡනය සඳහා ස්ථානය හඳුනා ගත් පසු, අපි අදාළ HTML මූලද්රව්යය තුළ රූප ටැගයක් සාදන්නෙමු. අපි "img" ටැගය භාවිතා කර ලාංඡනය ලෙස භාවිතා කිරීමට අවශ්ය රූපයේ මාර්ගය සඳහන් කිරීමට "src" ගුණාංගය සකසන්නෙමු. උදාහරණයක් ලෙස: «`
"`. "logo-path.jpg" ඔබේම ලාංඡන රූපයේ ස්ථානය සහ නම සමඟ ප්රතිස්ථාපනය කිරීමට වග බලා ගන්න.
3. "src" ගුණාංගයට අමතරව, "alt" සහ "title" ගුණාංග භාවිතා කිරීම ද යෝග්ය වේ. "alt" ගුණාංගය රූපය සඳහා විකල්ප පෙළ සපයයි, රූපය පූරණය කිරීමට අපොහොසත් වුවහොත් හෝ පරිශීලකයා තිර කියවනය භාවිතා කරන්නේ නම් එය පෙන්වනු ඇත. මාතෘකා ගුණාංගය විස්තරාත්මක පෙළ සපයයි, එය පරිශීලකයා රූපය මත සැරිසරන විට පෙන්වනු ඇත. උදාහරණයක් ලෙස: «`"`. ඔබේම ලාංඡනය සඳහා සුදුසු තොරතුරු සමඟ මෙම ගුණාංග අභිරුචිකරණය කිරීමට වග බලා ගන්න.
මෙම පියවර අනුගමනය කිරීමෙන්, ඔබේ වෙබ් අඩවියේ ලාංඡනය සත්කාරකත්වය සඳහා HTML ව්යුහය නිවැරදිව වින්යාස කිරීමට ඔබට හැකි වනු ඇත. පිටුවේ ලාංඡනයේ ප්රමාණය, පිහිටීම සහ පෙනුම පාලනය කිරීමට ඔබට CSS මෝස්තර එකතු කළ හැකි බව මතක තබා ගන්න. ඔබේ අවශ්යතා සහ මනාපයන් අනුව ඔබේ ලාංඡනය අත්හදා බැලීමට සහ අභිරුචිකරණය කිරීමට පසුබට නොවන්න!
6. HTML හි 'img' ටැගය භාවිතයෙන් ලාංඡනය ඇතුළු කිරීම
එය වෙබ් පිටුවක සමාගමක හෝ වෙළඳ නාමයක නියෝජිත රූපය දෘශ්ය ලෙස ප්රදර්ශනය කිරීමට ඔබට ඉඩ සලසන සරල ක්රියාවලියකි. මෙය සාක්ෂාත් කර ගැනීම සඳහා, ඔබ වෙබ් අඩවියේ ලාංඡනය නිවැරදිව ප්රදර්ශනය කරන ප්රධාන පියවර කිහිපයක් අනුගමනය කළ යුතුය.
පළමු පියවර වන්නේ .jpg, .png, හෝ .gif වැනි HTML-අනුකූල ආකෘතියකින් ඔබේ ලාංඡන රූප ගොනුව ඇති බවට වග බලා ගැනීමයි. ඔබ ගොනුව නිවැරදි ආකෘතියෙන් ලබා ගත් පසු, රූපය එහි පිහිටීම පහසු කිරීම සඳහා වෙබ් ව්යාපෘති නාමාවලිය තුළ නිශ්චිත ෆෝල්ඩරයක සුරැකීමට නිර්දේශ කරනු ලැබේ.
ඉන්පසුව, 'img' ටැගය HTML කේතයට ඇතුල් කරනු ලැබේ. මෙම ටැගය රූප මාර්ගය නියම කිරීමට සහ එහි විශාලත්වය තීරණය කිරීමට භාවිතා කරයි. ලාංඡනය ඇතුළු කිරීමට, HTML කේතයට පහත සඳහන් දෑ එක් කළ යුතුය: 
. මෙම උදාහරණයේදී, “logo_path.jpg” යනු ලාංඡන රූප ගොනුවේ ස්ථානයට අනුරූප වන අතර, “සමාගම ලාංඡනය” යනු රූපය පූරණය කළ නොහැකි අවස්ථාවකදී පෙන්වන විකල්ප පෙළයි. රූපයේ පළල සහ උස මෝස්තරයේ අවශ්යතා අනුව සකස් කළ හැකිය.
7. වෙබ් පිටුවේ ලාංඡනයේ ප්රමාණය සහ පිහිටීම සකස් කිරීම
ඔබේ වෙබ් අඩවියේ ලාංඡනයේ ප්රමාණය සහ පිහිටීම සකස් කිරීම සඳහා, ප්රධාන පියවර කිහිපයක් අනුගමනය කිරීම වැදගත් වේ. පළමුව, ඔබට ලාංඡන ගොනුවට සුදුසු ආකෘතියෙන් ප්රවේශය ඇති බවට වග බලා ගන්න, හොඳම රූපයේ ගුණාත්මකභාවය සහතික කිරීම සඳහා දෛශික ආකෘතියෙන්. ඔබට සුදුසු ආකෘතියකින් ගොනුව නොමැති නම්, ඔබට සබැඳි පරිවර්තන මෙවලම් භාවිතා කිරීම සලකා බැලිය හැකිය.
ඔබ ලාංඡන ගොනුව සූදානම් කළ පසු, ඔබට එහි ප්රමාණය සකස් කිරීම ආරම්භ කළ හැක. මේ සඳහා, ඔබට වැනි රූප සංස්කාරකයක් භාවිතා කළ හැකිය Adobe Photoshop හෝ GIMP. සංස්කාරකයේ ලාංඡන ගොනුව විවෘත කර රූපයේ ප්රමාණය වෙනස් කිරීමේ විකල්පය සොයන්න. මෙහිදී, විකෘති කිරීම් වළක්වා ගැනීම සඳහා ලාංඡනයේ මුල් අනුපාතය පවත්වා ගැනීම වැදගත් වේ. a හදන්න මතක තියාගන්න උපස්ථය කිසියම් වෙනසක් කිරීමට පෙර මුල් ගොනුවේ. ප්රමාණය සකස් කිරීමෙන් පසු, නවීකරණය කරන ලද අනුවාදය පිළිබිඹු කරන නව නමකින් ගොනුව සුරකින්න.
දැන් ඔබට නිවැරදි ප්රමාණයේ ලාංඡනය ඇති බැවින්, වෙබ් පිටුවේ එහි පිහිටීම සකස් කිරීමට කාලයයි. මෙය සිදු කිරීම සඳහා, ඔබට ඔබේ පිටුවේ HTML කේතය සංස්කරණය කිරීමට සිදුවේ. ඔබට ලාංඡනය දිස්වීමට අවශ්ය ස්ථානය සොයාගෙන අදාළ ලේබලය සොයන්න. මෙය ` මූලද්රව්යයක් විය හැකිය` හෝ a `
මීළඟට, ලාංඡනයේ නිවැරදි පිහිටීම සකස් කිරීමට CSS භාවිතා කරන්න. මෙය සාක්ෂාත් කර ගැනීම සඳහා ඔබට `ස්ථානය`, `ඉහළ`, `පහළ`, `වම` සහ `දකුණ` ගුණාංග භාවිතා කළ හැක. උදාහරණයක් ලෙස, ඔබට ලාංඡනය පිටුවේ ඉහලින් තිරස් අතට කේන්ද්රගත කිරීමට අවශ්ය නම්, ඔබට පහත CSS කේතය භාවිතා කළ හැක:
"" සීඑස්එස්
.ලාංඡනය {
පිහිටීම: නිරපේක්ෂ;
ඉහළ: 0;
වමේ: 50%;
පරිවර්තනය: translateX (-50%);
}
""
මූලද්රව්යයට `ස්ථිතික` හැර වෙනත් ස්ථානයක් තිබේ නම් පමණක් මෙම ගුණාංග ක්රියා කරන බව මතක තබා ගන්න. ඔබ අපේක්ෂිත ස්ථානය ලබා ගන්නා තෙක් විවිධ අගයන් සමඟ අත්හදා බලන්න. ඔබ අවශ්ය ගැලපීම් සිදු කළ පසු, ඔබගේ HTML ගොනුවේ වෙනස්කම් සුරකින්න සහ ලාංඡනය නිවැරදිව ස්ථානගත කර ඇති බව තහවුරු කර ගැනීමට ඔබගේ බ්රවුසරයේ පිටුව බලන්න.
8. HTML හි අමතර ගුණාංග සහිත ලාංඡනය අභිරුචිකරණය කිරීම
HTML හි, අතිරේක ගුණාංග මඟින් ඔබේ වෙබ් අඩවියේ ලාංඡනය තවදුරටත් අභිරුචිකරණය කිරීමේ හැකියාව ලබා දේ. ලාංඡනයේ ප්රමාණය, වර්ණය සහ ස්ථානය වෙනස් කිරීමට හෝ විශේෂ ප්රයෝග එක් කිරීමට ඔබට මෙම ගුණාංග භාවිතා කළ හැක. මෙන්න අපි පියවරෙන් පියවර එය කරන්නේ කෙසේදැයි ඔබට පෙන්වන්නෙමු.
1. ලාංඡන ප්රමාණය වෙනස් කරන්න: ලාංඡනයේ ප්රමාණය වෙනස් කිරීමට, රූප ටැගය තුළ "පළල" සහ "උස" යන ගුණාංගය භාවිතා කරන්න. උදාහරණයක් ලෙස, ඔබට ලාංඡනය පික්සල 200ක පළලක් සහ පික්සල 100ක උසකින් යුක්ත වීමට අවශ්ය නම්, ඔබට පහත කේතය එක් කළ හැක: .
2. ලාංඡනයේ වර්ණය වෙනස් කරන්න: ලාංඡනයේ වර්ණය වෙනස් කිරීමට ඔබට "ස්ටයිල්" ගුණාංගය භාවිතා කළ හැකිය. උදාහරණයක් ලෙස, ඔබට ලාංඡනය රතු වීමට අවශ්ය නම්, ඔබට පහත කේතය එක් කළ හැක: . ඔබට ෂඩාස්රාකාර වර්ණ කේත හෝ පූර්ව නිශ්චිත වර්ණ නාම භාවිතා කළ හැකිය.
3. ලාංඡනයට විශේෂ ප්රයෝග එක් කරන්න: ඔබට ලාංඡනයට සෙවනැලි හෝ වටකුරු දාර වැනි විශේෂ ප්රයෝග එක් කිරීමට අවශ්ය නම්, ඔබට CSS සමඟ එක්ව "ශෛලිය" ගුණාංගය භාවිතා කළ හැක. උදාහරණයක් ලෙස, ඔබට ලාංඡනයට සෙවනැල්ලක් එක් කිරීමට අවශ්ය නම්, ඔබට පහත කේතය එක් කළ හැක: . අපේක්ෂිත බලපෑම ලබා ගැනීම සඳහා ඔබට බහුවිධ ගුණාංග සහ මෝස්තර ඒකාබද්ධ කළ හැකි බව මතක තබා ගන්න.
මේවා උදාහරණ පමණක් බවත් ඔබේ අවශ්යතා සහ මනාපයන් අනුව ලාංඡනය රිසිකරණය කළ හැකි බවත් මතක තබා ගන්න. අපේක්ෂිත ප්රතිඵලය සාක්ෂාත් කර ගැනීම සඳහා විවිධ ගුණාංග සහ විලාසිතා සංයෝජන ගවේෂණය කරන්න. ඔබේ වෙබ් අඩවියේ ලාංඡනය අභිරුචිකරණය කර විනෝද වන්න!
9. කාර්යක්ෂම වෙබ් අඩවි පැටවීම සඳහා ලාංඡන ප්රශස්තකරණය
කාර්යක්ෂම වෙබ් අඩවි පැටවීම සඳහා ඔබේ ලාංඡනය ප්රශස්ත කිරීම පරිශීලක අත්දැකීම් වැඩිදියුණු කිරීමට සහ අඩවි වේගය වැඩි කිරීමට අත්යවශ්ය වේ. මෙය සාක්ෂාත් කර ගැනීම සඳහා අපි ප්රායෝගික නිර්දේශ කිහිපයක් ඉදිරිපත් කරමු:
1. නිසි ප්රමාණය සහ ආකෘතිය: ලාංඡනයේ ප්රමාණය සහ වෙබය සඳහා ප්රශස්ත කළ ආකෘතියක් ඇති බව සහතික කිරීම වැදගත් වේ. JPEG හෝ PNG වැනි රූප ආකෘති භාවිතා කිරීම ගොනු ප්රමාණය අඩු කිරීමට සහ අඩවි පැටවීම වැඩි දියුණු කිරීමට උපකාරී වේ. ප්රමාණය තෝරන විට, පිටුවේ ඇති ඉඩ ප්රමාණය සලකා බලා ලාංඡනය පික්සල හෝ විකෘති කිරීම වළක්වා ගන්න.
2. ලාංඡනය සම්පීඩනය කරන්න: රූප සම්පීඩන මෙවලම් භාවිතා කිරීම ලාංඡන ගොනුවේ ගුණාත්මක භාවයට හානියක් නොවන පරිදි එහි බර අඩු කිරීමට විශිෂ්ට ක්රමයකි. ඔබගේ ලාංඡනය උඩුගත කිරීමට සහ එය ස්වයංක්රීයව ප්රශස්ත කිරීමට ඔබට ඉඩ සලසන සබැඳි මෙවලම් කිහිපයක් තිබේ. ලාංඡනය තියුණු සහ පැහැදිලිව පවතින බව සහතික කිරීම සඳහා ප්රතිඵලය වන ගුණත්වය සමාලෝචනය කිරීමට මතක තබා ගන්න.
3. ජංගම උපාංග සඳහා ප්රශස්ත කරන්න: වැඩි වැඩියෙන් පරිශීලකයින් ඔවුන්ගේ ජංගම උපාංගවලින් වෙබ් අඩවි වෙත පිවිසෙන බැවින්, මෙම වේදිකාවල කාර්යක්ෂමව පැටවීම සඳහා ලාංඡනය ප්රශස්ත කිරීම ඉතා වැදගත් වේ. ලාංඡන ප්රමාණය කුඩා තිර මත නිවැරදිව ගැළපෙන බවත් මන්දගාමී ජංගම සම්බන්ධතා මත වේගයෙන් පූරණය වීම සඳහා ගොනුව අනුවර්තනය වී ඇති බවත් සහතික කර ගන්න. අධික ලාංඡනයක් පිටු පැටවීම මන්දගාමී කළ හැකි අතර, එය ඉහළ පිම්ම අනුපාතයකට තුඩු දිය හැකිය.
ඔබේ ලාංඡනය ප්රශස්ත කිරීමට සහ ඔබේ වෙබ් අඩවිය පැටවීම සම්බන්ධයෙන් වේගවත් හා කාර්යක්ෂම බව සහතික කිරීමට මෙම ඉඟි අනුගමනය කිරීමට මතක තබා ගන්න. හොඳින් ප්රශස්ත කරන ලද ලාංඡනයක් ඔබේ පරිශීලකයින්ගේ අත්දැකීම වැඩිදියුණු කර වැඩි නරඹන්නන් රඳවා තබා ගැනීමට දායක වේ. ක්ෂණික සහ ධනාත්මක ප්රතිඵල ලබාගැනීමට අදම මෙම නිර්දේශ යෙදීම අරඹන්න!
10. ලාංඡනය මත ක්ලික් කිරීමේදී පිටුවකට හරවා යැවීමට සබැඳි භාවිතා කිරීම
මෙය බොහෝ වෙබ් අඩවි වල පොදු කාර්යයකි. සමහර විට පරිශීලකයන් ලාංඡනයක් මත ක්ලික් කළ විට, ඔවුන් වෙබ් අඩවියේ මුල් පිටුවට හරවා යැවීමට අපේක්ෂා කරයි. මෙහිදී ඔබට ඔබේ වෙබ් අඩවියේ මෙම ක්රියාකාරිත්වය ක්රියාත්මක කිරීමට පියවරෙන් පියවර විසඳුමක් සොයාගත හැකිය.
1. පළමුව, ඔබේ වෙබ් අඩවියේ ලාංඡනය සබැඳි ටැගයක ඔතා ඇති බවට වග බලා ගන්න ("`HTML හි "`). මෙය පරිශීලකයාට ලාංඡනය මත ක්ලික් කර වෙනත් පිටුවකට හරවා යැවීමට ඉඩ සලසයි.
""html
""
2. «`your-homepage-url«` ඔබේ මුල් පිටුවේ URL එක සහ «`path-of-your-logo-image.png«` ඔබේ ලාංඡනයේ රූපයේ නිවැරදි මාර්ගය සමඟ ප්රතිස්ථාපනය කිරීමට වග බලා ගන්න. ඔබේ ලාංඡනය සඳහා විකල්ප විස්තරයක් සැපයීමට ඔබට "`alt"` උපලක්ෂණයද සකස් කළ හැක.
3. ඔබ මෙම වෙනස්කම් සිදු කළ පසු, ගොනු සුරකින්න සහ ඔබේ වෙබ් අඩවිය බ්රවුසරයකින් විවෘත කරන්න. දැන්, පරිශීලකයන් ලාංඡනය මත ක්ලික් කළ විට, ඔවුන් වෙබ් අඩවියේ මුල් පිටුවට හරවා යවනු ලැබේ.
ඔබේ වෙබ් අඩවිය පුරා ඔබේ ලාංඡන සබැඳි දිශාවට අනුකූලතාව පවත්වා ගැනීම වැදගත් බව මතක තබා ගන්න. මෙය පරිශීලකයින්ට ඔබේ වෙබ් අඩවිය පහසුවෙන් සැරිසැරීමට සහ ඔවුන් සොයන තොරතුරු සොයා ගැනීමට උපකාරී වනු ඇත. ඔබේ පරිශීලකයින් සඳහා වඩාත් අවබෝධාත්මක බ්රවුසින් අත්දැකීමක් සඳහා මෙම පියවර අනුගමනය කරන්න!
11. විවිධ බ්රව්සර්වල ලාංඡනයේ ගැළපුම පරීක්ෂා කිරීම
අපගේ ලාංඡනය සියලුම බ්රව්සර්වල නිවැරදිව සංදර්ශනය වන බව සහතික කර ගැනීම සඳහා, සම්පූර්ණ අනුකූලතා පරීක්ෂාවක් අවශ්ය වේ. ඔබට මුහුණ දීමට සිදු විය හැකි ඕනෑම ගැටළුවක් විසඳීමට ඔබට උපකාර කිරීමට පියවරෙන් පියවර මාර්ගෝපදේශයක් මෙන්න:
1. ගැළපුම් පරීක්ෂණ මෙවලම් භාවිතා කරන්න: විවිධ බ්රව්සර්වල ලාංඡනයේ ගැළපුම පරීක්ෂා කිරීමට ඔබට ඉඩ සලසන මෙවලම් කිහිපයක් මාර්ගගතව තිබේ. සමහර ජනප්රිය විකල්ප වලට BrowserStack, CrossBrowserTesting, සහ Souce Labs ඇතුළත් වේ.
2. CSS කේතය පරීක්ෂා කරන්න: නොගැලපෙන ගැටළුව ලාංඡනයේ CSS කේතයේ දෝෂයක් නිසා විය හැක. ඔබේ CSS කේතය ප්රවේශමෙන් සමාලෝචනය කර එය සියලුම බ්රවුසර අනුවාදවලට නිවැරදිව යොදන බව සහතික කර ගන්න. එසේම, ඔබේ වෙබ් අඩවියේ වෙනත් CSS විලාසයන් හෝ රීති සමඟ ගැටුම් නොමැති බව පරීක්ෂා කරන්න. අවශ්ය නම්, ඔබගේ බ්රවුසරයේ CSS නිදොස්කරණය භාවිතා කර යම් ගැටළු හඳුනාගෙන ඒවා විසඳීමට.
12. HTML හි ලාංඡනයක් ඇතුළත් කිරීමේදී පොදු ගැටළු විසඳීම
HTML හි ලාංඡනයක් ඇතුළත් කිරීමේදී, වෙබ් පිටුවේ නිවැරදිව පෙන්වීමට අපහසු විය හැකි ගැටළු කිහිපයක් ඇතිවීම සාමාන්ය දෙයකි. ඊළඟට, වඩාත් පොදු ගැටළු පියවරෙන් පියවර විසඳන්නේ කෙසේදැයි අපි විස්තර කරමු.
1. ලාංඡන ගොනු මාර්ගය පරීක්ෂා කරන්න: පොදු දෝෂයක් වන්නේ වැරදි මාර්ගයක් හේතුවෙන් ලාංඡනය දර්ශනය නොවීමයි. ටැගයේ "src" ගුණාංගයේ දක්වා ඇති මාර්ගය සහතික කර ගන්න නිවැරදි වෙන්න. ගොනු පිහිටීම සඳහා ඔබට සාපේක්ෂ හෝ නිරපේක්ෂ ෆෝල්ඩර ව්යුහය භාවිතා කළ හැකිය. HTML හි ඇති මාර්ග කේස් සංවේදී බව මතක තබා ගන්න.
2. රූප ආකෘතිය පරීක්ෂා කරන්න: ලාංඡනය HTML සමඟ නොගැලපෙන ආකෘතියක ඇති විට ඇතිවිය හැකි තවත් ගැටළුවක් වේ. ඔබ JPEG, PNG, හෝ GIF වැනි සහය දක්වන රූප ආකෘතියක් භාවිතා කරන බවට වග බලා ගන්න. ලාංඡනය වෙනත් ආකෘතියක තිබේ නම්, ඔබට එය Photoshop හෝ GIMP වැනි රූප සංස්කරණ මෙවලමක් භාවිතයෙන් පරිවර්තනය කිරීමට සිදුවේ.
3. ලාංඡනයේ ප්රමාණය ප්රශස්ත කරන්න: ඉතා විශාල ලාංඡනයක් වෙබ් පිටුව පූරණය වීමට බලපෑ හැකි අතර සංදර්ශක ගැටළු ඇති කරයි. HTML වෙත ලාංඡනය ඇතුළු කිරීමට පෙර එහි ප්රමාණය ප්රමාණය වෙනස් කර ප්රශස්ත කිරීම නිර්දේශ කෙරේ. ගුණාත්මකභාවය නැති නොවී ගොනු ප්රමාණය අඩු කිරීමට ඔබට සබැඳි මෙවලම් හෝ රූප සංස්කරණ මෘදුකාංග භාවිතා කළ හැකිය. ලේබලයේ ඇති "පළල" හෝ "උස" ගුණාංගය භාවිතයෙන් ලාංඡනයේ ප්රමාණයද සකස් කිරීමට මතක තබා ගන්න එය නිවැරදිව දර්ශණය වන බව තහවුරු කර ගැනීමට.
මෙම පියවර අනුගමනය කිරීමෙන්, ඔබට HTML හි ලාංඡනයක් ඇතුළත් කිරීමේදී වඩාත් පොදු ගැටළු විසඳා ගත හැකිය. ඔබගේ වෙබ් පිටුවේ නිවැරදි සංදර්ශකය සහතික කිරීම සඳහා ගොනු මාර්ගය, රූප ආකෘතිය සහ ප්රමාණය සුදුසු පරිදි පරීක්ෂා කිරීමට මතක තබා ගන්න. මෙම ඉඟි සමඟ, ඔබ ඔබේ වෙබ් අඩවියේ සැලසුම තුළ ඔබේ ලාංඡනය දර්ශනීය ලෙස පෙනෙනු ඇත.
13. වෙබ් අඩවියේ ලාංඡනය නඩත්තු කිරීම සහ යාවත්කාලීන කිරීම
සන්නාමයේ දෘශ්ය අනන්යතාවය පවත්වා ගැනීම සහ නිර්මාණයේ අනුකූලතාව සහතික කිරීම වැදගත් කාර්යයකි. ඊළඟට, මෙම කාර්යය ඉටු කිරීමට අවශ්ය පියවර අපි විස්තර කරමු. කාර්යක්ෂමව.
1. ලාංඡන ගොනුවේ ගුණාත්මකභාවය සහ ආකෘතිය පරීක්ෂා කරන්න: වෙබ් අඩවියේ ලාංඡනය යාවත්කාලීන කිරීමට පෙර, ඔබට සුදුසු ආකෘතියෙන් උසස් තත්ත්වයේ රූපයක් ඇති බව සහතික කිරීම අත්යවශ්ය වේ. පිටුවේ විවිධ කොටස්වල ලාංඡනයේ ප්රමාණය අනුවර්තනය කිරීමේදී වැඩි නම්යශීලී බවක් ලබා දෙන බැවින්, SVG හෝ EPS වැනි දෛශික ආකෘතියෙන් ගොනු භාවිතා කිරීම අපි නිර්දේශ කරමු. අතිරේකව, රූපයේ පික්සලේෂන් හෝ විකෘති කිරීමේ ගැටළු නොමැති බව පරීක්ෂා කිරීම වැදගත් වේ.
2. වෙබ් අඩවියේ සියලුම පිටු වල ලාංඡනය යාවත්කාලීන කරන්න: ඔබ ලාංඡන ගොනුව නිවැරදි ආකෘතියෙන් ලබා ගත් පසු, ඔබ වෙබ් අඩවියේ සියලුම පිටු වල පැරණි රූපය නව එකක් සමඟ ප්රතිස්ථාපනය කිරීමට ඉදිරියට යා යුතුය. ඒ කාර්යක්ෂම මාර්ගය මෙය සාක්ෂාත් කර ගැනීම සඳහා ගෝලීය වශයෙන් වෙනස් කිරීම සඳහා CSS භාවිතා කිරීමයි. උදාහරණයක් ලෙස, ඔබට ලාංඡනය සඳහා CSS පන්තියක් සාදා, යාවත්කාලීන කළ ගොනුව වෙත යොමු කිරීමට එහි "පසුබිම්-රූපය" ගුණාංගය වෙනස් කළ හැක.
3. පරීක්ෂණ සහ සත්යාපනය සිදු කරන්න: වෙබ් අඩවියේ ලාංඡනය යාවත්කාලීන කිරීමෙන් පසු, එය සියලුම බ්රව්සර් සහ උපාංගවල නිවැරදිව දර්ශණය වන බව තහවුරු කර ගැනීම සඳහා පුළුල් පරීක්ෂණයක් සිදු කිරීම ඉතා වැදගත් වේ. වෙබ් අඩවිය විවිධ තිර ප්රමාණයන්ගෙන් මෙන්ම ක්රෝම්, ෆයර්ෆොක්ස් සහ සෆාරි වැනි ජනප්රිය බ්රව්සර් මත පරීක්ෂා කිරීම රෙකමදාරු කරනු ලැබේ. මීට අමතරව, ඩෙස්ක්ටොප් තිරයට සාපේක්ෂව එහි ප්රමාණය සැලකිය යුතු ලෙස වෙනස් විය හැකි බැවින් ජංගම උපාංගවල ලාංඡනය ප්රදර්ශනය කිරීම සමාලෝචනය කිරීම හොඳ පුරුද්දකි.
මෙම පියවර අනුගමනය කිරීමෙන්, ඔබේ වෙබ් අඩවියේ ලාංඡනය ඵලදායී ලෙස පවත්වා ගෙන යාමට සහ යාවත්කාලීන කිරීමට ඔබට හැකි වනු ඇත, ඔබේ සන්නාමය අන්තර්ජාලයේ නිවැරදි නියෝජනය සහතික කරයි. ලාංඡනයට අමතරව, නිසි ක්රියාකාරීත්වය සහ ප්රශස්ත පරිශීලක අත්දැකීමක් සහතික කිරීම සඳහා සම්පූර්ණ වෙබ් අඩවියම වරින් වර නඩත්තු කිරීම වැදගත් බව මතක තබා ගන්න.
14. HTML හි ලාංඡනයක් ඇතුළත් කිරීම සඳහා නිගමන සහ නිර්දේශ
අවසාන වශයෙන්, නිවැරදි පියවර අනුගමනය කරන්නේ නම්, HTML හි ලාංඡනයක් ඇතුළත් කිරීම සරල කාර්යයක් විය හැකිය. මෙම ලිපිය පුරාම, මෙය ඵලදායී ලෙස සාක්ෂාත් කර ගැනීම සඳහා විවිධ නිර්දේශ සහ ඉඟි ලබා දී ඇත.
පළමුවෙන්ම, ඔබ ලාංඡනය PNG හෝ SVG වැනි වෙබයට සුදුසු ආකෘතියක ඇති බවට සහතික විය යුතුය. මීට අමතරව, ලාංඡනයේ ප්රමාණය සහ විභේදනය නිවැරදිව ප්රදර්ශනය කිරීම සහතික කිරීම සඳහා සලකා බැලීම වැදගත් වේ. විවිධ උපාංග මත.
ඔබ ලාංඡනය නිවැරදි ආකෘතියෙන් ලබා ගත් පසු, ඔබට එය HTML පිටුවට ඇතුළු කිරීමට ඉදිරියට යා හැක. මෙය «` ටැගය භාවිතයෙන් ලබා ගත හැක«`, ලාංඡනයේ URL සමඟ «`src«` ගුණාංගය සහ ලාංඡනය නිවැරදිව පූරණය නොවන්නේ නම් විස්තරාත්මක පෙළක් සහිත «`alt «` උපලක්ෂණ ඇතුළත් විය යුතුය.
ලාංඡනයේ මානයන් නියම කිරීම සඳහා "උස" සහ "පළල"" ගුණාංග භාවිතා කිරීම ද යෝග්ය වන අතර එමඟින් රූපය පූරණය වන විට පිටුව විකෘති වීම වළක්වා ගත හැකිය. අවසාන වශයෙන්, CSS භාවිතයෙන් ලාංඡනයට එහි පිහිටීම, ප්රමාණය හෝ ඔබ වෙනස් කිරීමට කැමති වෙනත් දෘශ්ය අංගයක් සකස් කිරීමට අමතර මෝස්තර යෙදිය හැක. මෙම පියවර සහ නිර්දේශ සමඟින්, HTML හි ලාංඡනයක් සාර්ථකව ඇතුළත් කිරීමට හැකි වනු ඇත.
අවසාන වශයෙන්, නිසි පියවර අනුගමනය කිරීමෙන් HTML හි ලාංඡනයක් එකතු කිරීම සරල ක්රියාවලියක් විය හැකිය. නිවැරදි ටැග්, ගුණාංග සහ වාක්ය ඛණ්ඩ භාවිතා කිරීමෙන්, අපගේ වෙබ් පිටුවට අපගේ ලාංඡනයේ රූපයක් ඇතුළු කළ හැකිය. රූපයේ ප්රමාණය සහ ආකෘතිය මෙන්ම එහි පිහිටීම සහ අනෙකුත් අන්තර්ගතයට අදාළව පෙළගැස්වීම සැලකිල්ලට ගැනීම වැදගත්ය. අතිරේකව, ඕනෑම පරිසරයක රූපය නිවැරදිව පැටවීම සහතික කිරීම සඳහා සාපේක්ෂ මාර්ග භාවිතා කිරීම යෝග්ය වේ. සෑම විටම, HTML හි මූලික කරුණු සමඟ නිරන්තර පුහුණුවීම් සහ හුරුපුරුදු වීම මෙම කාර්යය ප්රගුණ කිරීමට යතුරයි. මේ සමඟ, අපට අපගේම ලාංඡනය සහිත වෘත්තීය සහ පුද්ගලීකරණය කළ වෙබ් අඩවියක් තිබිය හැකිය. ඔබේ දැනුම යාවත්කාලීනව තබා ගැනීමට සහ ඔබේ වෙබ් අඩවිය වැඩිදියුණු කිරීමට සහ ප්රශස්ත කිරීමට නව ක්රම ගවේෂණය කිරීමට සැමවිටම මතක තබා ගන්න. අත්හදා බැලීමට සහ පුහුණු වීමට පසුබට නොවන්න, සීමාව ඔබේම නිර්මාණශීලීත්වයයි!
මම සෙබස්තියන් විදාල්, තාක්ෂණය සහ DIY ගැන දැඩි උනන්දුවක් දක්වන පරිගණක ඉංජිනේරුවෙක්. තවද, මම එහි නිර්මාතෘ වෙමි tecnobits.com, මම තාක්ෂණය වඩාත් ප්රවේශ විය හැකි සහ සැමට තේරුම් ගත හැකි කිරීමට නිබන්ධන බෙදාහදා ගනී.