HTML படங்கள்
படங்கள் வலைப்பக்கத்தின் வடிவமைப்பையும் தோற்றத்தையும் மேம்படுத்தும்.
img1.png பட உதாரணம்
இது img1.png என்ற படத்தின் எடுத்துக்காட்டு. படங்கள் உங்கள் வலைப்பக்கங்களைக் கவர்ச்சியாக்கும்!
எடுத்துக்காட்டுகள்:
HTML படங்களின் தொடரியல்
HTML <img> குறிச்சொல் ஒரு வலைப்பக்கத்தில் ஒரு படத்தை உட்பொதிக்கப் பயன்படுகிறது.
படங்கள் தொழில்நுட்ப ரீதியாக வலைப்பக்கங்களில் செருகப்படுவதில்லை; படங்கள் வலைப்பக்கங்களுடன் இணைக்கப்படுகின்றன. <img> குறிச்சொல் குறிப்பிடப்பட்ட படத்திற்கான இடத்தை உருவாக்குகிறது.
முக்கிய குறிப்பு:
<img> குறிச்சொல் காலியானது, இது பண்புகளை மட்டும் கொண்டுள்ளது, மற்றும் மூடும் குறிச்சொல் இல்லை.
<img> குறிச்சொல்லுக்கு இரண்டு தேவையான பண்புகள் உள்ளன:
src பண்பு
படத்திற்கான பாதையை (URL) குறிப்பிடுகிறது
alt பண்பு
படத்திற்கான மாற்று உரையை குறிப்பிடுகிறது
தொடரியல்
<img src="url" alt="alternatetext">src பண்பு
தேவையான src பண்பு படத்திற்கான பாதையை (URL) குறிப்பிடுகிறது.
குறிப்பு:
ஒரு வலைப்பக்கம் ஏற்றப்படும் போது, அந்த நேரத்தில் உலாவியே படத்தை வலை சேவையகத்திலிருந்து பெற்று பக்கத்தில் செருகுகிறது. எனவே, படம் உண்மையில் வலைப்பக்கத்துடன் தொடர்புடைய அதே இடத்தில் இருக்கும் என்பதை உறுதிப்படுத்தவும், இல்லையெனில் உங்கள் பார்வையாளர்களுக்கு உடைந்த இணைப்பு ஐகான் கிடைக்கும்.
எடுத்துக்காட்டு
<img src="img_chania.jpg" alt="Flowers in Chania">முயற்சிக்கவும்:
படம் கிடைக்காத போது என்ன நடக்கும்:
உலாவி படத்தைக் கண்டுபிடிக்க முடியாவிட்டால், alt பண்பின் மதிப்பைக் காண்பிக்கும்
alt பண்பு
தேவையான alt பண்பு ஒரு படத்திற்கான மாற்று உரையை வழங்குகிறது, பயனர் சில காரணங்களால் அதைப் பார்க்க முடியாவிட்டால் (மெதுவான இணைப்பு காரணமாக, src பண்பில் பிழை, அல்லது பயனர் திரை வாசிப்பான் பயன்படுத்தினால்).
alt பண்பின் மதிப்பு படத்தை விவரிக்க வேண்டும்:
எடுத்துக்காட்டு
<img src="img_chania.jpg" alt="Flowers in Chania">படம் கிடைக்காத போது:
<img src="wrongname.gif" alt="Flowers in Chania">திரை வாசிப்பான் பற்றி:
திரை வாசிப்பான் என்பது HTML குறியீட்டைப் படித்து, பயனருக்கு உள்ளடக்கத்தை "கேட்க" அனுமதிக்கும் மென்பொருள் நிரலாகும். பார்வைக் குறைபாடு அல்லது கற்றல் குறைபாடு உள்ளவர்களுக்கு திரை வாசிப்பாளர்கள் பயனுள்ளதாக இருக்கும்.
பட அளவு - அகலம் மற்றும் உயரம்
படத்தின் அகலம் மற்றும் உயரத்தை குறிப்பிட style பண்பைப் பயன்படுத்தலாம்.
எடுத்துக்காட்டு 1: style பண்புடன்
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">எடுத்துக்காட்டு 2: width மற்றும் height பண்புகளுடன்
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">width மற்றும் height பண்புகள் எப்போதும் படத்தின் அகலம் மற்றும் உயரத்தை பிக்சல்களில் வரையறுக்கின்றன.
முக்கிய குறிப்பு:
எப்போதும் படத்தின் அகலம் மற்றும் உயரத்தை குறிப்பிடவும். அகலம் மற்றும் உயரம் குறிப்பிடப்படவில்லை என்றால், படம் ஏற்றப்படும் போது வலைப்பக்கம் சிணுங்கலாம்.
Width and Height, or Style?
width, height மற்றும் style பண்புகள் அனைத்தும் HTML இல் செல்லுபடியாகும்.
இருப்பினும், style பண்பைப் பயன்படுத்த பரிந்துரைக்கிறோம். இது படங்களின் அளவை மாற்றுவதிலிருந்து பாங்கு தாள்களைத் தடுக்கிறது:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>வெவ்வேறு அளவு படங்கள்:
வெவ்வேறு இடங்களில் படங்கள்
துணை கோப்புறையில் படங்கள்
உங்கள் படங்கள் ஒரு துணை கோப்புறையில் இருந்தால், src பண்பில் கோப்புறை பெயரைச் சேர்க்க வேண்டும்:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">மற்றொரு சேவையகத்தில் படங்கள்
சில வலைத்தளங்கள் மற்றொரு சேவையகத்தில் உள்ள படத்தை சுட்டிக்காட்டுகின்றன.
<img src="https://www.jassifteam.com/images/logo.jpg" alt="Jassif Team Logo">வெளி படங்கள் குறித்த குறிப்புகள்:
வெளி படங்கள் பதிப்புரிமையின் கீழ் இருக்கலாம். அதைப் பயன்படுத்த அனுமதி பெறவில்லை என்றால், நீங்கள் பதிப்புரிமைச் சட்டங்களை மீறலாம். கூடுதலாக, நீங்கள் வெளி படங்களைக் கட்டுப்படுத்த முடியாது; அவை திடீரென நீக்கப்படலாம் அல்லது மாற்றப்படலாம்.
சிறப்பு பட வகைகள்
அனிமேஷன் படங்கள்
HTML அனிமேட்டட் GIF களை அனுமதிக்கிறது:
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">இணைப்பாக படம்
படத்தை இணைப்பாகப் பயன்படுத்த, <img> குறிச்சொல்லை <a> குறிச்சொல்லுக்குள் வைக்கவும்:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>படங்களை மிதக்க விடுதல்
உரையின் வலது அல்லது இடது பக்கத்தில் படம் மிதக்க CSS float பண்பைப் பயன்படுத்தவும்:
வலது பக்கம் மிதத்தல்:
இந்த படம் உரையின் வலது பக்கத்தில் மிதக்கும். CSS float பண்பு படங்களை உரையுடன் சேர்ப்பதற்கான சிறந்த வழியாகும். படம் மிதக்கும் போது, உரை அதைச் சுற்றி ஓடும்.
இடது பக்கம் மிதத்தல்:
இந்த படம் உரையின் இடது பக்கத்தில் மிதக்கும். CSS float பண்பு வலை வடிவமைப்பில் பொதுவாகப் பயன்படுத்தப்படும் ஒரு சக்திவாய்ந்த கருவியாகும். இது உள்ளடக்கத்தை ஒழுங்கமைக்க உதவுகிறது.
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
படம் உரையின் வலது பக்கத்தில் மிதக்கும்.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
படம் உரையின் இடது பக்கத்தில் மிதக்கும்.</p>உதவிக்குறிப்பு:
CSS Float பற்றி மேலும் அறிய எங்கள் CSS Float டுடோரியலைப் படிக்கவும்.
பொதுவான பட வடிவங்கள்
அனைத்து உலாவிகளிலும் (Chrome, Edge, Firefox, Safari, Opera) ஆதரிக்கப்படும் மிகவும் பொதுவான பட கோப்பு வகைகள் இங்கே:
| சுருக்கம் | கோப்பு வடிவம் | கோப்பு நீட்டிப்பு |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
JPEG
புகைப்படங்களுக்கு
.jpg, .jpeg
PNG
வெளிப்படை பின்னணிக்கு
.png
GIF
அனிமேஷன்களுக்கு
.gif
SVG
வெக்டர் படங்களுக்கு
.svg
அத்தியாய சுருக்கம்
குறிப்பு:
பெரிய படங்களை ஏற்றுவதற்கு நேரம் எடுக்கும், மேலும் உங்கள் வலைப்பக்கத்தை மெதுவாக்கும். படங்களை கவனமாகப் பயன்படுத்தவும்.
பயிற்சி
படத்தைச் சேர்க்க எது சரியான HTML உறுப்பு?
HTML பட குறிச்சொற்கள்
| குறிச்சொல் | விளக்கம் |
|---|---|
| <img> | ஒரு படத்தை வரையறுக்கிறது |
| <map> | ஒரு பட வரைபடத்தை வரையறுக்கிறது |
| <area> | ஒரு பட வரைபடத்தின் உள்ளே கிளிக் செய்யக்கூடிய பகுதியை வரையறுக்கிறது |
| <picture> | பல பட வளங்களுக்கான கொள்கலனை வரையறுக்கிறது |
குறிப்பு:
அனைத்து கிடைக்கக்கூடிய HTML குறிச்சொற்களின் முழுமையான பட்டியலுக்கு, எங்கள் HTML Tag Reference ஐப் பார்வையிடவும்.