படங்கள் மற்றும் பொருள்களுக்கான HTML IMG டேக் பயன்படுத்தவும்
HTML IMG குறிச்சொல் ஒரு வலைப்பக்கத்தில் உள்ள படங்கள் மற்றும் பிற நிலையான வரைபட பொருள்களை செருகுவதை நிர்வகிக்கிறது. இந்த பொதுவான குறிச்சொல் ஒரு கட்டாயப்படுத்தி, படத்தை-கவனம் செலுத்தும் வலைத்தளத்தை வடிவமைக்கும் உங்கள் திறமைக்கு செழுமை சேர்க்கும் பல கட்டாய மற்றும் விருப்ப பண்புகளை ஆதரிக்கிறது.
ஒரு முழுமையான HTML IMG டேக் ஒரு உதாரணம் இது போல்:
தேவையான IMG டேக் பண்புக்கூறுகள்
எஸ் ஆர் சி. நீங்கள் ஒரு வலைப்பக்கத்தில் காட்ட ஒரு படத்தை பெற வேண்டும் மட்டுமே பண்பு SRC பண்பு ஆகும். இந்த பண்பு காட்டப்படும் படக் கோப்பின் பெயர் மற்றும் இடம் அடையாளம் காணப்படுகிறது.
ALT அளவுகள். சரியான XHTML மற்றும் HTML4 ஐ எழுத, ALT பண்புக்கூறு தேவைப்படுகிறது. இந்த கற்பனையானது, படத்தை விவரிக்கும் உரைகளுடன் அல்லாத உலாவிகளை வழங்குவதற்காக பயன்படுத்தப்படுகிறது. உலாவிகளில் மாற்று வழிகளை வெவ்வேறு வழிகளில் காட்டலாம். படத்தில் உங்கள் சுட்டியை வைக்கும்போது சிலர் அதை பாப்-அப் எனக் காட்டலாம், மற்றவர்கள் அதை படத்தில் வலது கிளிக் செய்யும் போது பண்புகளை காண்பிப்பார்கள், சிலர் அதனை காண்பதில்லை.
வலைப்பக்கத்தின் உரைக்கு பொருத்தமான அல்லது முக்கியமில்லாத படத்தைப் பற்றிய கூடுதல் விவரங்களை வழங்க மாற்று உரைகளைப் பயன்படுத்தவும். ஆனால் திரையில் வாசகர்கள் மற்றும் பிற உரை-மட்டுமே உலாவிகளில், உரை உரை பக்கத்தில் உள்ள மீதமுள்ள வாசகங்களை வாசிக்கவும். குழப்பத்தைத் தவிர்ப்பதற்கு, எடுத்துக்காட்டாக ("எடுத்துக்காட்டாக"), "லோகோ" க்கு பதிலாக "வலை வடிவமைப்பு மற்றும் HTML பற்றி" என்று விவரிக்கின்ற alt உரை பயன்படுத்தவும்.
HTML5 இல் ALT பண்புக்கூறு எப்போதுமே தேவைப்படாது, ஏனென்றால் அதற்கு கூடுதல் விளக்கம் சேர்க்க நீங்கள் தலைப்பைப் பயன்படுத்தலாம். முழு விவரம் கொண்ட ஒரு ஐடியைக் குறிப்பிடுவதற்கு, பண்புக்கூறு ARIA-DESCRIBEDBY ஐ பயன்படுத்தலாம்.
ஒரு வலைப்பக்கம் அல்லது சின்னங்களின் மேல் உள்ள கிராஃபிக்கைப் போன்ற படம் முற்றிலும் அலங்காரமாக இருந்தால் Alt உரை கூட தேவையில்லை. ஆனால் நீங்கள் உறுதியாக தெரியவில்லை என்றால், வழக்கில் மாற்று உரை சேர்க்கவும்.
பரிந்துரைக்கப்பட்ட IMG பண்புக்கூறுகள்
WIDTH மற்றும் HEIGHT . எப்போதும் WIDTH மற்றும் HEIGHT பண்புகளை பயன்படுத்துவதன் பழக்கத்தை நீங்கள் பெற வேண்டும். நீங்கள் எப்போதும் உண்மையான அளவைப் பயன்படுத்த வேண்டும் மற்றும் உங்கள் படங்களை உலாவியில் மறுஅளவிடுவதில்லை.
உலாவியானது, படத்திற்கான வடிவமைப்பில் இடத்தை ஒதுக்குவதன் மூலம், முழு உள்ளடக்கத்தையும் பதிவிறக்கம் செய்யாமல், மீதமுள்ள உள்ளடக்கத்தை பதிவிறக்குவதன் மூலம், இந்த பண்புகளை பக்கம் ஒழுங்கமைக்கலாம்.
பிற பயனுள்ள IMG காரணிகள்
TITLE . பண்புக்கூறு என்பது ஒரு உலகளாவிய பண்புக்கூறு ஆகும், அது எந்த HTML உறுப்புக்கும் பயன்படுத்தப்படலாம் . மேலும், TITLE பண்புக்கூறு நீங்கள் படத்தைப் பற்றிய கூடுதல் தகவல்களைச் சேர்க்க உதவுகிறது.
பெரும்பாலான உலாவிகள் TITLE பண்புகளை ஆதரிக்கின்றன, ஆனால் அவை வெவ்வேறு வழிகளில் செய்கின்றன. சிலர் படத்தில் பாப்-அப் போல காட்சி தருகிறார்கள், மற்றவர்கள் அதைத் திரையில் காட்டும்போது வலதுபுறத்தில் பயனர் திரையில் காண்பிக்கிறார்கள். படத்தைப் பற்றிய கூடுதல் தகவலை எழுதுவதற்கு TITLE பண்புக்கூறு பயன்படுத்தலாம், ஆனால் இந்த தகவலை மறைத்து அல்லது காணக்கூடியதாக இருக்க வேண்டாம். தேடுபொறிகளுக்கான முக்கிய வார்த்தைகளை மறைக்க நீங்கள் இதை நிச்சயமாக பயன்படுத்தக்கூடாது. இந்த நடைமுறை இப்போது பெரும்பாலான தேடுபொறிகளால் தண்டிக்கப்படுகிறது.
USEMAP மற்றும் ISMAP . இந்த இரண்டு பண்புக்கூறுகள் உங்கள் படங்களுக்கு கிளையன் பக்க () மற்றும் சர்வர்-சைட் (ISMAP) பட வரைபடங்களை அமைக்கின்றன.
LONGDESC . பண்புக்கூறு URL களின் நீண்ட விளக்கத்திற்கான ஆதாரங்களை ஆதரிக்கிறது. இந்த அம்சம் உங்கள் படங்களை இன்னும் அணுகக்கூடியதாக்குகிறது.
நீக்கப்பட்ட மற்றும் அகற்றப்படாத IMG பண்புக்கூறுகள்
பல பண்புக்கூறுகள் இப்போது HTML5 இல் வழக்கற்றுப் போய்விட்டன அல்லது HTML4 இல் நீக்கப்பட்டன. சிறந்த HTML க்கு, இந்த பண்புகளை பயன்படுத்துவதற்குப் பதிலாக வேறு தீர்வுகளை நீங்கள் கண்டுபிடிக்க வேண்டும்.
BORDER . பண்புக்கூறு அகலத்தை படத்தின் எந்த எல்லையிலிருந்தும் பிக்சல்களில் வரையறுக்கிறது. இது HTML4 இல் CSS க்கு ஆதரவாக நீக்கப்பட்டது மற்றும் HTML5 இல் வழக்கற்று உள்ளது.
ALIGN . இந்த பண்புக்கூறு நீங்கள் உரை உள்ளே ஒரு படத்தை வைக்க மற்றும் அதை சுற்றி உரை ஓட்டம் அனுமதிக்கிறது. நீங்கள் வலது அல்லது இடதுபுறமாக ஒரு படத்தை சீரமைக்கலாம். இது HTML4 இல் மிதவை CSS சொத்துக்கு ஆதரவாக நீக்கப்பட்டது மற்றும் HTML5 இல் வழக்கற்று உள்ளது.
HSPACE மற்றும் VSPACE . HSPACE மற்றும் VSPACE பண்புக்கூறுகள் வெள்ளை இடைவெளி கிடைமட்டமாக (HSPACE) மற்றும் செங்குத்தாக (VSPACE) சேர்க்கின்றன. கிராஃபிக் (மேல் மற்றும் கீழ் அல்லது இடது மற்றும் வலதுபுறம்) ஆகிய இரு பக்கங்களிலும் வெள்ளை இடைவெளி சேர்க்கப்படும், எனவே நீங்கள் ஒரு பக்கத்திற்கு மட்டுமே இடம் தேவை என்றால், நீங்கள் CSS ஐப் பயன்படுத்த வேண்டும். இந்த பண்புக்கூறுகள் HTML4 இல் விளிம்பு CSS சொத்துக்கு ஆதரவாக நீக்கப்பட்டன, மேலும் அவை HTML5 இல் வழக்கற்றுப் போகும்.
LOWSRC . LOWSRC பண்பு உங்கள் படத்தின் மூல அளவு மிக மெதுவாக தரவிறக்கம் செய்யும் போது மாற்று படத்தை வழங்குகிறது. உதாரணமாக, உங்கள் வலைப்பக்கத்தில் காட்ட விரும்பும் 500KB படத்தை நீங்கள் கொண்டிருக்கலாம், ஆனால் 500KB பதிவிறக்க நீண்ட நேரம் எடுக்கப்படும். எனவே நீங்கள் படத்தை மிக சிறிய நகலை உருவாக்கலாம், ஒருவேளை கருப்பு மற்றும் வெள்ளை அல்லது மிகவும் உகந்ததாக, மற்றும் LOWSRC கற்பிதத்தில் அந்த வைத்து. சிறிய படம் முதல் பதிவிறக்க மற்றும் காண்பிக்கும், பின்னர் பெரிய படம் தோன்றுகிறது போது அது குறைந்த மூல ஒரு பதிலாக.
IMG டேக் க்கு Netscape Navigator 2.0 க்கு LOWSRC பண்பு சேர்க்கப்பட்டது. இது டிஓஓ நிலை 1 இன் ஒரு பகுதியாக இருந்தது, பின்னர் டிஓஎம் நிலை 2 இல் இருந்து அகற்றப்பட்டது. உலாவி ஆதரவு இந்த கற்பிதத்திற்காக ஸ்கெட்ச்சியாக உள்ளது, இருப்பினும் அனைத்து நவீன உலாவிகளாலும் ஆதரிக்கப்படுவதாக பல தளங்கள் கூறுகின்றன. இது HTML4 இல் நீக்கப்பட்டது அல்லது HTML5 இல் வழக்கற்று இல்லை, ஏனெனில் இது ஒரு குறிப்பிட்ட அதிகாரத்தின் பகுதியாக இல்லை.
இந்த பண்புகளைப் பயன்படுத்துவதைத் தவிர்க்கவும், அதற்கு பதிலாக உங்கள் படங்களை மேம்படுத்துங்கள், இதனால் அவை விரைவில் ஏற்றப்படும். பக்கம் ஏற்றுதல் வேகம் நல்ல வலை வடிவமைப்பு ஒரு முக்கிய பகுதியாகும், மற்றும் பெரிய படங்களை மெதுவாக கீழே மெதுவாக பக்கங்கள்-நீங்கள் LOWSRC பண்பு பயன்படுத்த கூட.