แូแแាแแขាแ
แែแแ្แขแាแแแ
แាแិแแូแแាแแแแ់แេแ แំแ័แ។
แงแាแ แแ៍
<img src="pulpitrock.jpg" alt="Mountain View">
แงแាแ แแ៍
<img src="img_girl.jpg" alt="Girl in a jacket">
แงแាแ แแ៍
<img src="img_chania.jpg" alt="Flowers in Chania">
HTML แូแแាแแាแ្แแแ្แแ្แ
แ្แុแ
HTML แូแแាแแ្แូแแាแแំแแ់แោแแ្แាแ <img> ។
แ្แាแ <img>
แแេแាแាแแែแុแแแ្แแៈแិแแិแแាแแ្แាแแិแ។
แុแแแ្แแៈ
src แแ្แាแ់ URL (แขាแแแ្แាแแេแ แំแ័แ) แแแ់แូแแាแ:
<img src=" url ">
แុแแแ្แแៈ alt
แុแแแ្แแៈ
alt แ្แแ់แขแ្แแแแំแួแแแ្แាแ់แូแแាแแ្แแិแแើแข្แแแ្แើแិแแขាแ
แแแើแแា
(แោแแាแแាแแแ្แាแ់แឺแแំแ ុแแ្แុแแុแแแ្แแៈ src แฌแ្แแិแแើแข្แแแ្แើแ្แើแแ្แแិแីแขាแแขេแ្แแ់) ។
แแ្แៃแแแ់แុแแแ្แแៈ
alt แួแแแ៌แាแขំแីแូแแាแ:
แงแាแ แแ៍
<img src="img_chania.jpg" alt="Flowers in Chania">
แ្แแិแแើแแ្แแិแីแុแแแแិแแขាแ
แแแើแแូแแាแแាแឹแแแ្แ ាแแแ្แៃแៃแុแแแ្แแៈ
alt:
แงแាแ แแ៍
<img src="wrongname.gif" alt="Flowers in Chania">
แំแ ំแូแแាแ - แแឹแแិแแំแแ់
แข្แแแขាแ
แ្แើแុแแแ្แแៈ แแ
แាแ័แ្แ แើแ្แីแแ្แាแ់แแឹแแិแแแ្แแ់แแแ់แូแแាแ។
แงแាแ แแ៍
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
แាแแ្แើแแข្แแแขាแ
แ្แើแុแแแ្แแៈ แแឹแ แិแ แแ្แแ់ :
แงแាแ แแ៍
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
แុแแแ្แแៈแแឹแแិแแំแแ់แែแแែแំแแ់แแឹแแិแแแ្แแ់แแแ់แូแแាแแាแីแแែแ។
แแឹแแិแแំแแ់แฌแ្แីแ?
แាំแแំแ ំแแឹแแិแแแ
แាแ័แ្แแាแแុแแแាแแ្แុแ
HTML5 ។
แោះแាแ៉ាแแាแ៏แោแแើแแ្แើแฑ្แแ្แើแុแแแ្แแៈแแ
แាแ័แ្แ។ แាแាแแាแแแ្แឹแแแ
แាแ័แ្แแីแាแแ្แាแ់แ្แូแแំแ ំแូแแាแ:
แงแាแ แแ៍
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
แូแแាแแ្แុแแแแ្แេแแៀแ
แ្แแិแแើแិแแាแแแ្แាแ់แេแแ្แแិแីแុแแแแំแឹแแាแឹแแ្แែแแแแូแแាแแៅแ្แុแแแแូแ
แ្แាแាแួแแេแ แំแ័แ។
แោះแាแ៉ាแแាแ៏แោแแាแូแៅแាแ្แូแแแ្แាแុแแូแแាแแៅแ្แុแแแแแ។ แข្แแแ្แូแแែแแ្แ
ូแแ្แោះแแแ្แុแ src
attribute:
แงแាแ แแ៍
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
แូแแាแแៅแើแ៉ាแ៊ីแแេแ្แេแแៀแ
แេแ แំแ័แแ្แះแ្แុแแូแแាแแแแ់แួแแេแៅแើแ៉ាแ៊ីแแេ។
แាแแិแแข្แแแขាแ
แ
ូแแើแแូแแាแแីแขាแแแ្แាแแแ្แាแแាแួแแ្แុแแិแแแោแ:
แงแាแ แแ៍
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
แូแแាแแាแแ
แแា
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;border:0;">
</a>
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
แូแแាแแขแ្แែแ
แ្แើแแ្แแแแ្แแ្แិ แขแេแ CSS แើแ្แីแฑ្แแូแแាแแขแ្แែแแៅแាแแ្แាំแฌแាแแ្แេแแៃแขแ្แแแ:
แงแាแ แแ៍
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
แงแាแ แแ៍
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
แុแแแ្แแៈแៃแ្แាแแ្แោះ <แែแแី> แ្แូแแាแแ្แាแ់แាแួแแឹแแុแแแ្แแៈแแ្แំแแแ់ <img>
แិแแแ្แើแแំแាแ់แំแแแแាแแូแแាแแិแแែแแី។
แ្แាแ <แែแแី> แាแแ
ំแួแแៃแ្แាแ <แំแแ់> แែแแំแแ់แំแแ់แขាแ
แ
ុแ
แាแแៅแ្แុแแែแแីแូแแាแ។
แូแแាแแ្แៃแាแแ្แោแ
แើแ្แីแแ្แែแแូแแាแแ្แៃแាแแ្แោแแើแាแុแแแ់
HTML แូแแ្แើ
background-image แแ្แแแแ្แแ្แិ CSS:
แงแាแ แแ៍
แើแ្แីแแ្แែแแូแแាแแ្แៃแាแแ្แោแแៅแើแំแ័แแ៉េแแแ្แាแ់แแ្แแแแ្แแ្แិแូแแាแแ្แៃแាแแ្แោแแៅแើแាแុ
BODY:
<body style="background-image:url('clouds.jpg')">
<h2>Background Image</h2>
</body>
<h2>Background Image</h2>
</body>
แงแាแ แแ៍
แើแ្แីแแ្แែแแូแแាแแ្แៃแាแแ្แោแแៅแើแแាแแ្แแแ្แាแ់แแ្แแแแ្แแ្แិแូแแាแแ្แៃแាแแ្แោแแៅแើแាแុ
P:
<body>
<p style="background-image:url('clouds.jpg')">
...
</p>
</body>
<p style="background-image:url('clouds.jpg')">
...
</p>
</body>
แើแ្แីแ្แែแแแ់แแ្แែแแขំแីแូแแាแแ្แៃแាแแ្แោแแិแ្แា แแ្แแិแ្แាแ្แៃแាแแ្แោแ CSS แแแ់แើแ។
HTML5 แាแแែแាំแាแុ <picture> แើแ្แីแแ្แែแแាแแแ់แែแแៅแេแแแ្แាแ់แฏแแាแแូแแាแ។
แាแុ <แូแแាแ> แាแแ
ំแួแแាแុ <แ្แแแ> แីแួแแแែแแំแៅแៅแើแ្แแแแូแแាแแ្แេแแแ្แា។ แិแីแេះแแ្แแិแីแុแแแแขាแ
แ្แើแแើแแូแแាแแែแแแแំแុแแឹแแិแ្แแាแแแ
្แ
ុแ្แแ្แแិแ
/ แฌแงแแแแ៍។
แាแុ <แ្แแแ> แីแួแแแាแแុแแแ្แแៈแិแแ៌แាแៅแេแแែแแូแแាแแแแ់แួแแេแឺแแแแ្แแំแុแ។
แแ្แแិแីแុแแแแឹแแ្แើแ្แាแ់แាแុ <แ្แแแ> แំแូแแាแួแแឹแแแ្แៃแុแแแ្แแៈแែแแ្แូแ្แแแ ើแแិแแขើแើแឹแแាแុแាแแ្แោแแាแួแ។
แงแាแ แแ៍
แแ្แ ាแแូแแាแแួแแ្แแិแแើแแ្แขួแ
แแ្แแិแីแុแแแ
(แិแ្แแាแ) แាแแំแ ំแขแ្แแแแា 650 แីแแែแแិแแូแแាแแ្แេแแៀแแ្แแិแแើแិแแំแាแ 465 แីแแែแ។
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">