រូបភាពអាចកែលម្អការរចនានិងរូបរាងរបស់គេហទំព័រ។
ឧទាហរណ៍
<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>
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;">
No comments:
Write comments