HTML Image

ஒரு web page-ல் image display செய்ய <img> tag பயன்படுதபடுகிறது. இதில் "src" and "alt" என்ற attributes மிகவும் இன்றியமையாதது.

src attribute

src என்பது ஒரு attribute. இதில் image-க்கான link-ஐ வரையறை செய்யபடுகிறது.

alt attribute

alt என்பது ஒரு attribute. இதில் image-க்கான alternate text வரையறை செய்யபடுகிறது. அதாவது image display ஆகவில்லை எனில். அந்த image இருந்த இடத்தில் image-க்கு பதிலாக ஒரு text display செய்யபடும் அதுவே alternate text என்று அழைக்கபடுகிறது.

Example

Try this code 
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <img src="images/something-happens-only-once.jpg" title="Beautiful Quote" alt="Inspiration Quote">
</body>
</html>
Output
Inspiration Quote

Example

Try this code 
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <img src="images/something-happens-only-once" title="Beautiful Quote" alt="Inspiration Quote">
</body>
</html>
Output

image-ன் name-ல் extension (.jpg) நீக்கப்பட்டுள்ளது ஆகையால் image display ஆகாது. அதற்க்கு பதில் alternate text display-ல் தெரிகிறது.

Inspiration Quote
Note:
  • Images ஆனது technically webpage-ல் insert செய்யபடுவதிலை. அது src என்ற attribute-ன் மூலமாகத்தான் link செய்யப்பட்டு webpage-ல் display செய்யபடுகிறது.
  • ஒரு webpage-ல் image 2 முறைகளில் display செய்ய படுகிறது. ஒன்று <img> tag. மற்றொன்று background-image என்ற attribute பயன்படுத்தபடுகிறது.

Comments

hai 9th December,2023 11:33 am
good, 2nd Example image not working
zc 28th February,2020 02:24 pm
hjvb