.

Tuesday, March 08, 2016

Lesson 10 : Html Me Images Kaise Show Karte Hain

author photo

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

avatar
Vishal Hingne delete April 20, 2016 11:55 am

Hello sir ; bahut achhi jankari hai, mere pc me windows xp hai to moi html sikhne ke liye konsa version istemall karu.

Reply
avatar
Digit Only delete April 20, 2016 12:25 pm

app kewal Notpad ++ install kar le.. iske kiye aap lesson 1 padhe.
Xp me aap aaram se html seekh sakte hain.

Reply
avatar
Mahaveer Jain delete April 25, 2016 4:35 pm

Very nice article, thanks for sharing

Reply
avatar
sumer singh meena delete May 05, 2016 9:01 pm

supppperrr bhai I like your website

Reply
avatar
Digit Only delete May 10, 2016 7:19 pm

sumer aapka bahut dhanyabad.

Reply
avatar
Model Mansi delete August 11, 2016 12:49 pm

Hello sir apka koi video hai kya jisme apka full Lesson ho

Reply
avatar
Digit Only delete August 11, 2016 2:48 pm

Abhi koi vdo nahi hai, lekin jald hi main lesson wise vdo dene wala hoon.

Reply
avatar
Unknown delete January 21, 2017 11:43 pm

Thank you sir...sir mere me pic show nhi kr rha h...flower wala...[×] ye sembol show kr rha bs

Reply
avatar
Alok verma delete January 21, 2017 11:46 pm

sir aapne se banaya gya websit ko net me kese kholnge Google me...jese koi chiz google me sarch marte h na ussi tarha se...

Reply
avatar
Digit Only delete February 09, 2017 2:30 am

Wo isliye kyo ki aap image ko same folder me nahi rakh rahe hain.

Reply
avatar
Digit Only delete February 09, 2017 2:33 am

Aisa 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.

Reply


EmoticonEmoticon

Next article Next Post
Previous article Previous Post

Advertisement