/ / / / HTML Tutorial in Tamil : Images

HTML Tutorial in Tamil : Images

06 அக்டோபர் , ,
HTML Tutorial in Tamil - Images


HTML 5 Tutorial in Tamil இன் தொடர்ச்சியாக Image இனை எவ்வாறு சேர்ப்பது என இந்தப் பதிவில் பார்க்கலாம்.

Images:

இணையத்தளப்பக்கங்களில்  Images எப்படி சேர்ப்பது என பார்ப்போம்.

இது  <img>  என்ற starting tag இனை மாத்திரம் ("Empty tag" என்றும் அழைக்கப்படும்) உபயோகித்து எழுதப்படும்.

<img>  tag ஆனது முக்கியமாக இரண்டு attributes உடன் சேர்த்து எழுதப்படும்.

  • src- நாம் சேர்க்க வேண்டிய image இன் location/path/url
  • alt- ஏதோ ஒரு காரணத்தால் image display ஆகவில்லை எனின் அந்த image இற்கு பதிலாக display ஆக வேண்டிய text (alternate text).

Image இன் உடைய HTML ஆனது பின்வரும் கட்டமைப்பில் அமையும்;

HTML Tag - Image

மேலே உள்ள கட்டமைப்பின் படி நாமும் எமது இணையத்தளப்பக்கங்களில் images இனை சேர்க்கலாம். 

எனது இணையப்பக்கத்துக்கான storage இல் இருக்கும் ஒரு image இன் URL இனை உதாரணமாக கொண்டு அந்த image இனை எவ்வாறு சேர்க்கலாம் என பார்க்கலாம். 

அந்த Image இன் url ஆனது 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX0oW0KLnBaRWn6XgWdqP4mi3GgN0Fzi0hO_V2LlALNVhu3bqhIG2ge6z-0r-segmwx6ANL-gAYmAFV0frytv7v31OQFfIOlbKdoz9-NyDbMlwVFXQ4HT9nVKc2Hux3I3oXYNxqRIsMtlq/

உதாரணம்:

<!DOCTYPE html> <html> <head></head> <body> <p>This is My Room:</p> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX0oW0KLnBaRWn6XgWdqP4mi3GgN0Fzi0hO_V2LlALNVhu3bqhIG2ge6z-0r-segmwx6ANL-gAYmAFV0frytv7v31OQFfIOlbKdoz9-NyDbMlwVFXQ4HT9nVKc2Hux3I3oXYNxqRIsMtlq/" alt="My Room Image"> </body> </html>

இதன் output இனை Browser இல் பார்க்கும் போது கீழ் வருமாறு காட்சி அளிக்கும்.


Browser Preview


This is My Room:

My Room Image

Image-Size:

மேலே பார்த்த attribute தவிர்த்து இன்னும் சில attributes காணப்படுகின்றன அதில் Size இற்கான attribute ஆன width மற்றும் height ஆகியவற்றை பாவித்து உதாரணம் ஒன்றை பார்ப்போம்.

மேலே உள்ள image இன் orginal Size ஆனது Width - 1880px; Height - 1250px; ஆகும். 

இணையத்தளத்தில் மேலே உள்ள image இனை Width - 376px;  Height - 250px; என்ற Size இல் சேர்க்க வேண்டும் எனில்;

<!DOCTYPE html> <html> <head></head> <body> <p>This is My Room</p> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX0oW0KLnBaRWn6XgWdqP4mi3GgN0Fzi0hO_V2LlALNVhu3bqhIG2ge6z-0r-segmwx6ANL-gAYmAFV0frytv7v31OQFfIOlbKdoz9-NyDbMlwVFXQ4HT9nVKc2Hux3I3oXYNxqRIsMtlq/ width="376" height="250" alt="My Room Image"> </body> </html>

இதன் output இனை Browser இல் பார்க்கும் போது கீழ் உள்ளவாறு காட்சியளிக்கும்.



Browser Preview


This is My Room:

My Room Image

இது தவிர்த்து style என்ற attribute உம் காணப்படுகின்றது, அதனை CSS இனை கற்கும் போது கற்பதே சிறந்தது. 

alternative text for image:

இனி alt என்ற attribute பற்றிப் பார்க்கலாம். நாம் மேலே alt attribute பாவித்து இருக்கின்றோம், இருப்பினும் அது எங்கும் எமக்கு output ஆகவில்லை, அதற்கான காரணம் browser இல் image display ஆகி இருப்பதே.  

அதாவது நாம் சேர்க்க இருக்கும் / சேர்த்த image இன் URL(Uniform Resource Locator) இல் ஏதாவது தவறாக இருந்தாலோ அல்லது எமது storage இல் நாம் வழங்கிய url இல் இருக்கும் அந்த image delete ஆகிவிட்டாலோ அல்லது எமது இணையப்பக்கத்தினை பார்வையிடும் பாவனையாளரின் இணைய வேகம் சாதாரண வேகத்தை விட குறைவாக காணப்பட்டாலோ image ஆனது Browser இல் தென்படாது, அதன் போதே alternative text, image இற்கு பதிலாக display ஆகும். 

உதாரணமாக ஒரு போலியான image URL ஒன்றைக் கொடுத்து அதன் output இனைப் பார்க்கலாம்;


<!DOCTYPE html> <html> <head></head> <body> <p>This is my room</p> <img src="noimageurl/myroom.jpeg" alt="My Room Image"> </body> </html>

இதன் output இனை Browser இல் பார்க்கும் போது கீழ் காணப்படுமாறு காட்சியளிக்கும்.



Browser Preview


This is my room

My Room Image

Image File Format:

பொதுவாக எல்லா browser இலும் display ஆகக்கூடிய images இன் File Format பற்றி சுருக்கமாக பார்க்கலாம். 

File Format Names File Extension
Joint Photographic Expert Group image .jpeg,
.jpg,
.jfif,
.pjpeg,
.pjp
Portable Network Graphics .png
Graphics Interchange Format .gif
Icon/ Cursor .ico, .cur
Scalable Vector Graphics .svg
Animated Portable Network Graphics .apng


இன்றைய HTML Tutorial தொடரில் Images எவ்வாறு சேர்ப்பது என்று பற்றிப் பார்த்திருந்தோம். இதன் தொடர்ச்சியாக அடுத்த பதிவில் HTML Links பற்றிப் பார்க்கலாம்.

தொடரும்..

கருத்துகள் இல்லை

இதற்கு குழுசேர்: கருத்துரைகளை இடு ( Atom )