வலை பக்கங்களில் படங்களை சேர்த்தல்

இன்று எந்த வலைப்பக்கத்தையும் ஆன்லைனில் பாருங்கள், அவர்கள் சில விஷயங்களைப் பொதுவில் பகிர்ந்து கொள்வதை நீங்கள் கவனிப்பீர்கள். அந்த பகிரப்பட்ட பண்புகளில் ஒன்று படங்கள். சரியான படங்கள் ஒரு வலைத்தளத்தின் விளக்கக்காட்சியை அதிகம் சேர்க்கின்றன. ஒரு நிறுவனத்தின் லோகோவைப் போன்ற அந்த சில படங்கள், தளத்தை விளம்பரப்படுத்த உதவுகின்றன மற்றும் உங்கள் உடல் நிறுவனத்திற்கு அந்த டிஜிட்டல் நிறுவனம் இணைக்கின்றன.

உங்கள் வலைப்பக்கத்தில் ஒரு படம், ஐகான் அல்லது கிராபிக்ஸ் சேர்க்க, நீங்கள் டேக் ஒரு பக்கத்தின் HTML குறியீட்டில் பயன்படுத்த வேண்டும். நீங்கள் காண்பிக்கும் கிராபிக் எங்கு வேண்டுமானாலும் உங்கள் HTML இல் IMG டேக் வைக்கிறீர்கள். பக்கத்தின் குறியீட்டை வழங்கும் இணைய உலாவி இந்தப் பக்கத்தை பார்வையிட்டவுடன் பொருத்தமான கிராஃபிக்குடன் இந்த குறியை மாற்றும். எங்கள் நிறுவனத்தின் லோகோ எடுத்துக்காட்டுக்கு திரும்பிப் பார்க்க, இங்கே உங்கள் படத்தை அந்த படத்தை எப்படி சேர்க்கலாம்:

பட பண்புக்கூறுகள்

மேலே உள்ள HTML குறியீட்டைப் பார்த்து, உறுப்பு இரண்டு பண்புகளை உள்ளடக்கியது என்று நீங்கள் பார்ப்பீர்கள். அவர்கள் ஒவ்வொரு படத்திற்கும் தேவை.

முதல் பண்பு "src" ஆகும். இது மிகவும் எளிமையாக படத்தில் நீங்கள் காட்டப்பட வேண்டிய படக் கோப்பாகும். எங்கள் உதாரணத்தில் நாம் "logo.png" என்ற கோப்பை பயன்படுத்துகிறோம். இது இணையத்தளத்தை வழங்கியபோது வலை உலாவி காண்பிக்கும் கிராஃபிக் ஆகும்.

இந்த கோப்பு பெயருக்கு முன்பாக, "/ images /" என்ற சில கூடுதல் தகவல்களை நாங்கள் சேர்த்துள்ளோம். இது கோப்பு பாதை. தொடக்க முன்னோடி ஸ்லாஷ், அடைவின் ரூட்டாக பார்க்க சேவையகத்தை கூறுகிறது. இது "படங்கள்" என்றழைக்கப்படும் கோப்புறையையும் இறுதியாக "logo.png" என்று அழைக்கப்படும் கோப்பையும் பார்க்கும். அனைத்து தளத்தின் கிராபிகளையும் சேமிப்பதற்கு "படங்கள்" என்றழைக்கப்படும் ஒரு கோப்புறையைப் பயன்படுத்துவது ஒரு பொதுவான நடைமுறையாகும், ஆனால் உங்கள் கோப்பு பாதையை உங்கள் தளத்திற்கு பொருத்தமாக மாற்றும்.

இரண்டாவது தேவையான பண்புக்கூறு "alt" உரை. படத்தை சில காரணங்களால் ஏற்ற முடியவில்லை என்றால் இது காட்டப்படும் "மாற்று உரை" ஆகும். படத்தை ஏற்றுவதில் தோல்வி அடைந்தால், "நிறுவனத்தின் லோகோ" என்பதை எங்கள் எடுத்துக்காட்டுக்கு இது காட்டுகிறது. அது ஏன் நடக்கும்? பல்வேறு காரணங்கள்:

• தவறான கோப்பு பாதை
• தவறான கோப்பு பெயர் அல்லது எழுத்துப்பிழை
• பரிமாற்ற பிழை
• சேவையகத்திலிருந்து கோப்பு நீக்கப்பட்டது

எங்கள் குறிப்பிட்ட படம் காணாமல் போகலாம் என்பதற்கு இவை சில சாத்தியக்கூறுகள். இந்த நிகழ்வுகளில், எங்கள் மாற்று உரை காட்டப்படும்.

Alt உரை கூட பார்வை குறைபாடு யார் பார்வையாளர் படத்தை "வாசிக்க" திரை வாசகர் மென்பொருள் மூலம் பயன்படுத்தப்படுகிறது. நாம் செய்ததைப் போன்ற படத்தைப் பார்க்க முடியாது என்பதால், இந்த உரையானது படத்தை என்னவென்று அவர்களுக்குத் தெரியப்படுத்துகிறது. இது ஏன் மாற்று உரை தேவைப்படுகிறது, ஏன் படத்தை தெளிவாகக் குறிப்பிடுவது தெளிவாக இருக்க வேண்டும்!

Alt text ஒரு பொதுவான தவறான விளக்கம் இது தேடல் பொறி நோக்கங்களுக்காக பொருள் என்று. இது உண்மை இல்லை. Google மற்றும் பிற தேடுபொறிகள் இந்த உரையைப் படிக்கும்போது, ​​என்ன படம் என்பதை ("உங்கள் படத்தை" பார்க்க முடியாது "என்பதை நினைவில் கொள்ளவும்), தேடுபொறிகளுக்கு மட்டுமே மேல்முறையீடு செய்ய நீங்கள் தனி எழுத்து எழுதக்கூடாது. மனிதர்களுக்குப் பொருந்தக்கூடிய ஆசிரியரின் தெளிவான உரை. தேடுபொறிகளுக்கான தேடுதலுக்காக சில குறிச்சொற்களை சேர்க்க முடியும் என்றால், அது நன்றாக இருக்கிறது, ஆனால் மாற்று உரை அதன் முதன்மை நோக்கத்திற்காக கிராபிக்ஸ் கோப்பை பார்க்க முடியாத எவருக்கும் எதைக் குறிக்கிறது என்பதை உறுதிப்படுத்துவதன் மூலம் உறுதிப்படுத்தவும்.

மற்ற காரணிகள்

அகலம் மற்றும் உயரம் - உங்கள் வலைப்பக்கத்தில் ஒரு கிராஃபிக் வைத்திருக்கும் போது IMG குறிச்சொல்லை நீங்கள் பயன்படுத்தக்கூடிய மற்ற இரண்டு பண்புகளையும் கொண்டுள்ளது. உதாரணமாக, நீங்கள் ட்ரீம்வீவர் போன்ற ஒரு WYSIWYG ஆசிரியர் பயன்படுத்தினால், அது தானாகவே உங்களுக்காக இந்த தகவலை சேர்க்கிறது. இங்கே ஒரு உதாரணம்:

WIDTH மற்றும் HEIGHT பண்புக்கூறு உலாவியின் படத்தின் அளவைக் கூறும். உலாவி பின்னர் அமைப்பை அமைப்பதில் சரியாக எவ்வளவு இடத்தை அறிந்திருக்கிறது, மேலும் படத்தின் தரவரிசைகளில் பக்கத்தின் அடுத்த உறுப்புக்கு செல்ல முடியும். இந்த தகவலை உங்கள் HTML இல் பயன்படுத்தும் பிரச்சனை, உங்கள் படத்தின் சரியான அளவைக் காண்பிப்பதற்கு எப்போதும் நீங்கள் விரும்பவில்லை. உதாரணமாக, நீங்கள் பார்வையாளர்கள் திரை மற்றும் சாதனத்தின் அளவை அடிப்படையாகக் கொண்ட மாற்றங்களை அளவிடுகின்ற ஒரு பதிலளிக்க வலைத்தளம் இருந்தால், உங்கள் படங்கள் நெகிழ்வானதாக இருக்கும். உங்கள் HTML இல் நிலையான அளவு என்னவென்றால், பதிலளிக்க CSS மீடியா வினவல்களைப் புறக்கணிக்க மிகவும் கடினமாக இருப்பீர்கள். இந்த காரணத்திற்காகவும், மற்றும் பாணி (CSS) மற்றும் அமைப்பு (HTML) ஆகியவற்றின் பிரிப்புகளை பராமரிக்கவும், நீங்கள் உங்கள் HTML குறியீடுக்கு அகலமான மற்றும் உயரம் பண்புகளை சேர்க்க வேண்டாம் என்று பரிந்துரைக்கப்படுகிறது.

ஒரு குறிப்பு: நீங்கள் இந்த அளவிலான அறிவுறுத்தல்களை நிறுத்தினால், CSS இல் ஒரு அளவு குறிப்பிட வேண்டாம், உலாவி அதன் இயல்புநிலை, சொந்த அளவிலான படத்தில் எப்படியும் காட்டப்படும்.

ஜெர்மி கிரார்ட் திருத்தப்பட்டது