Lesson 10: How To Handle Images In Html
Kahte hain ek image 1000
words ke equal hoti hai. Aur kisi bhi webpage ke liye images bahut jaroori
hoti hain. Abhi tak aapne html ke kuch basic program ko seekha, ab is lesson se
hum html ke important lesson ki taraf badhenge. Image lagana bhi bahut
important hota hai. Aaj ke lesson me hum ek page par image lagana seekhenge.
Aur sath hi us image ki height and width bhi change karna janenge. Image ko
left, right, aur center me kaise kare aur image me border kaise lagaye, ye bhi
aap aaj seekhenge.
Note: Is lesson ko seekhne se
pahle aap pahle ke saare lessons ko ek baar fir se padh le. Html language ki ye
sabse khas baat hai, agar hum revision nahi karte hain to saara padha hua
bekaar ho jata hai. Maine Html ke Videos dene ka bhi socha hai. Is liye aap
hame bataye ki aapko aise likhe hue tutorials jyada pasand aate hain ya aap
video tutorial bhi chahte hain. Hame comment se zaroor bataye.
Html me image lagane ke liye
hum <img /> tag ka use karte hain. <img /> tag ek empty tag hai.
Jaisa ki main aapko pahle bhi bata chukka hoon ki empty tags kya hote hain. Ab
rahi baat <img /> tag ko samajhne ki, to aap socho kya kewal <img
/> likhne se image show hone lagegi. Nahi na! hmmm sahi kaha apne. To iske
liye hame ek path dena padega, path matlab image ki location (jaha image rakhi
hoti hai). Ab location ka path dekar hum image ko page me show kar sakte hain.
To main aapko 2 tareeke bataunga.
· * Image and Html program same folder me ho
· * Images, ek image folder me ho and Program dusare
folder me ho.
To chaliye tutorial ki taraf
badhte hain. Waise html me images ke sath bahut kuch kiya ja sakta hai. Lekin
abhi is level par main aapko itna hi bataunga. Jaise jaise aap seekhte jayenge
aapka dimag bhi khulta chala jayega.
Html ka syntax aisa hota hai.
Neeche dekhe..
<img src="Image URL" attributes-list/>
Agar
dhyan se dekhe to sara kuch <img/> ke andar likha hua hai. Jab bhi hame
koi image lagani hoti hai to hame source (src) dena hota hai. “Image url” me
hame path dena hota hai. Aur image ka naam bhi aur sath me image ka type (jpeg,
png,Gif). Attributes-list me hame wo likhna hota hai jo ham image ke sath koi
property use karna chahte ho. Jaise alt, height,width, align aur bhi bahut
kuch.
First Method:
Chaliye
ab hum pahle point par aate hain jisme image and program same folder me hain.
To aap ek image chun le aur usko program wale folder me paste kar de. Pahle
main program likh leta hoon.
<!DOCTYPE html>
<html>
<head>
<title>images lagana</title>
</head>
<body>
<p>First method</p>
<img src="flower.jpg" alt="Beautiful flower"
/>
</body>
</html>
Yaha main eek image choose ki hai jiska naam flower hai aur wo ek jpg image hai is liye uska poora path flower.jpg hai. Ye first method hai to isme iage and program same folder me hain jaisa ki neeche image me diya hai.
“ alt” ek alternate text ke
liye use kiya jata hai. jab hum images ko server per dalte hain to alt text hi
use search karne ka kaam karte hain. To main eek attribute use kiya hai jo ki
alt hai. aur jaha maine “Beautiful flower” likha hai. <p> matlab
paragraph (aap log pahle bhi seekh chukhe hain) maine is liye use kiya hai.
jisse hame image ke sath kuch text bhi dikhe. Chaliye maine program likh liya
hai aur save bhi kar liya hai. Aap bhi ek alag se program likhe aur save kare.
Ab iska output dekhte hain.
Jaisa aapne dekha ki image show ho rahi hai. magar image by default left side me hi aati hai. hum isko align attribute ki help se center ya right me bhi kar sakte hain.
Second method:
Is method me hum flower.jpg ko ek Image folder me move kara denge. Aur program ko bahar wale folder me hi rakhenge. Fir iska program likhenge. Chaliye dekhiye maine Image aur Program ko kaise rakha hua hai.
Jo maine program likha hai wo
bhi aap dekh le.
<!DOCTYPE html>
<html>
<head>
<title>images
lagana</title>
</head>
<body>
<p>Second
method</p>
<img
src="image/flower.jpg" alt="Beautiful flower" />
</body>
</html>
Dhyan rahe folder ka naam / image ka naam , is
tarah se hame path dena hai. Ab iska output dekhte hain.
To kaisa laga. Maza aaya na.
Jab hum html me images par kaam karte hain to andar se bahut accha feel hota
hai. kyo ki images hi ek webpage ki jaan hoti hain. Abhi lesson baaki hai mere
dost… thoda paani pee lo aur break le
lo…
Change Height and width of images:
Ab image ki height aur width
change karte hain. chaliye main second wale program me hi change karta hoon. Ab
iske liye main upar wala code hi copy kar leta hoon. Height and width bhi
attributes hi hain. attributes ke beech me ek space jarrori hai.
<!DOCTYPE html>
<html>
<head>
<title>images
lagana</title>
</head>
<body>
<p>Size changed to
600x350</p>
<img
src="image/flower.jpg" alt="Beautiful flower" width="600"
height="350" />
</body>
</html>
Mujhe image ka size 600x350
ka chahiye is liye maine ise is tarah se likha aap apna size likh sakte hain.
chaliye ab iska output dekhte hain.
Aap dhyan se dekhenge to
aapko image ka size change hua dikhega. Kaise maine aasan tareeke se size
change kiya. Ab aap bhi ek image ke sath aise hi program likhe.
Set Image Border and Image alignment:
Kabhi kabhi image me Aur
sundarta lane ke liye border bhi set kiye jate hain. to hum kisi image me
border kaise set karenge ye seekhenge. Aur sath hi image ko left right aur
center me kaise karte hain ye bhi seekhenge. Border and align bhi attributes
hai. jinko ki <img/ > tag ke andar hi use kiya jata hai. main kewal image
ko right me karna bata raha hoon center me aap khud karenge. Chaliye main iska
program likhta hoon.
<!DOCTYPE html>
<html>
<head>
<title>images
lagana</title>
</head>
<body>
<img
src="image/flower.jpg" align="right" border="3" />
</body>
</html>
Chaliye mera image ka output aa chukka hai. maine upar border ka pixel 3 set kiya hai aap apne man ka set kar sakte hain. Mera image right me hai. but neeche aapko aisa nahi lagega. Kyo ki agar main poora page ka image rakhunga to size bada ho jayega.
Image ko center me karne ke
liye aapko align="center" use karna hoga.
Align ka matlab to aapko pata hi hai. matlab alignment (jagah ko badalna).
Theek hum jaise text ko align karte hain.
To
dosto aaj ke lesson ke liye bas itna hi. Next lesson me hum Images and paragraph ko ek sath use karna seekhenge. kyo ki yaha tak aap paragraph and images handle karna seekh chuke hain. Likin abhi hum sab kuch basic hi seekh rahe hain jab hum css
seekhenge. Tab aap dekhenge ki aap ek html aur css ke expert ho gaye hain. Aap
apne template ko samjhne lagenge. Yaha tak ki aap khud template bhi design
karna seekh jayenge. Sath hi aap apne widget bhi design kar sakte hain.
Lesson
kaafi bada tha lekin mujhe poori ummed hai ki aapko maza zarror aaya hoga. Bas
aap ise apne facebook and twitter par share karke meri bhi help kare. Kyo ki
share karna ek Achhi adat hai.
This post have 14 comments
Hello sir ; bahut achhi jankari hai, mere pc me windows xp hai to moi html sikhne ke liye konsa version istemall karu.
Replyapp kewal Notpad ++ install kar le.. iske kiye aap lesson 1 padhe.
ReplyXp me aap aaram se html seekh sakte hain.
Very nice article, thanks for sharing
ReplyWelcome mahaveer.
Replysupppperrr bhai I like your website
Replysumer aapka bahut dhanyabad.
ReplyHello sir apka koi video hai kya jisme apka full Lesson ho
ReplyAbhi koi vdo nahi hai, lekin jald hi main lesson wise vdo dene wala hoon.
ReplyVery nice
Replynice informatin
ReplyThank you sir...sir mere me pic show nhi kr rha h...flower wala...[×] ye sembol show kr rha bs
Replysir aapne se banaya gya websit ko net me kese kholnge Google me...jese koi chiz google me sarch marte h na ussi tarha se...
ReplyWo isliye kyo ki aap image ko same folder me nahi rakh rahe hain.
ReplyAisa karne ke liye website ke data ko hosting lekar rakhna hota gai aur ek domain lekar uska address lena padta hai. Agar aap apni website banwana chahte hain to mujhe digitonly@gmail.com par mail kare aur aap ghar baithe paise kamana shuru kar sakte hain. Is par mene article likha hai use padhen.
ReplyEmoticonEmoticon