บทที่ 11 HTML images

   HTML images คือ การใส่รูปภาพในเอกสาร html

 1.ใส่รูปภาพแบบปกติ ไม่มีการกำหนดอะไร

<img src="/ใส่ URL ของภาพ" />

2.ในกรณีที่ต้องการใส่ชื่อภาพ ซึ่งอาจใช้เป็นข้อความสำรองในกรณีที่รูปภาพเกิดข้อผิดพลาดไม่สามารถแสดงผลบนหน้าเว็บเพจได้

<img src="/url" alt="ข้อความอธิบายภาพสำรอง"/>

3.ใส่ขนาดของภาพ

<img src="/URL ของภาพ" alt="ข้อความอธิบายภาพสำรอง" width="กรอกตัวเลขที่ต้องการ" height="กรอกตัวเลขที่ต้องการ"/>

โดยค่าตัวเลขที่กรอกมีหน่วยเป็น pixels
ตัวอย่าง

<html>
<body>

<img border="0" src="http://images.temppic.com/20-10-2012
/images_vertis/1350706157_0.24874200.jpg"
alt="coala" width="304" height="228">

</body>
</html>

ผลัพธ์ที่ได้คือ

***ในการใส่รูปภาพในเอกสาร html นี้การใส่ที่อยู่ URL สำคัญมาก เพราะถ้าที่อยู่ผิดรูปจะไม่แสดง
วิธีการหาที่อยู่ URL ของรูปภาพมี 2 วิธี ดังนี้
1.การเอารูปจากเว็บไซต์
- เปิดเว็บไซต์นั้นขึ้นมา หารูปที่ต้องการ
- คลิกขวาที่รูป เลือก view image info แล้ว copy ตัว URL ในส่วน location ให้หมด
- เมื่อได้ URL ก็เอาไปใส่ในโค็ด html ได้เลย
จะสังเกตุได้ว่า จะขึ้นด้วย http และจบด้วย นามสกุล .jpg หรือ .gif

2.การเอารูปภาพจากคอมของเราเอง
- หาเวปที่ให้บริการอัพโหลดรูป เช่น http://www.temppic.com
- ทำการอัพโหลดรูป พอเสร็จแล้วเราจะได้ URL

Tag ที่เกี่ยวข้อง

<img /> กำหนดรูปภาพ
<mapt> กำหนดแผนที่รูปภาพ
<area /> กำหนดพื้นที่ที่สามารถคลิ๊กได้ภายในแผนที่รูปภาพ
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ภาษา Lua ตอนที่ 4 : ชนิดข้อมูล String
โดย worramaitk พฤ 18 ม.ค. 2024 12:32 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
169
พฤ 18 ม.ค. 2024 12:32 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 4 : ชนิดข้อมูล String
ภาษา Lua ตอนที่ 3 : ชนิดข้อมูล nil กับ boolean
โดย worramaitk พฤ 18 ม.ค. 2024 11:34 am บอร์ด Microsoft Office Knowledge & line & Etc
0
168
พฤ 18 ม.ค. 2024 11:34 am โดย worramaitk View Topic ภาษา Lua ตอนที่ 3 : ชนิดข้อมูล nil กับ boolean
ภาษา Lua ตอนที่ 2 : พื้นฐานตัวแปร
โดย worramaitk พฤ 18 ม.ค. 2024 10:56 am บอร์ด Microsoft Office Knowledge & line & Etc
0
159
พฤ 18 ม.ค. 2024 10:56 am โดย worramaitk View Topic ภาษา Lua ตอนที่ 2 : พื้นฐานตัวแปร
ภาษา Lua ตอนที่ 1: รู้จักพื้นฐานของภาษา จะได้เขียนโปรแกรมได้ง่ายขึ้น
โดย worramaitk พฤ 18 ม.ค. 2024 10:54 am บอร์ด Microsoft Office Knowledge & line & Etc
0
150
พฤ 18 ม.ค. 2024 10:54 am โดย worramaitk View Topic ภาษา Lua ตอนที่ 1: รู้จักพื้นฐานของภาษา จะได้เขียนโปรแกรมได้ง่ายขึ้น
นำเที่ยวจังหวัดนราธิวาส
โดย worramaitk อ 16 ม.ค. 2024 7:12 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
346
พ 17 ม.ค. 2024 7:13 pm โดย simall View Topic นำเที่ยวจังหวัดนราธิวาส
แนะนำการเดินทางและท่องเที่ยวในจังหวัดเชียงใหม่
โดย DearCM จ 15 ม.ค. 2024 4:23 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
296
อ 16 ม.ค. 2024 9:11 am โดย emptyspace View Topic แนะนำการเดินทางและท่องเที่ยวในจังหวัดเชียงใหม่
ไขข้อข้องใจ มะเร็งตับมีกี่ระยะกันนะ?
โดย admeadme ศ 12 ม.ค. 2024 1:46 pm บอร์ด Share Knowledge
0
456
ศ 12 ม.ค. 2024 1:46 pm โดย admeadme View Topic ไขข้อข้องใจ มะเร็งตับมีกี่ระยะกันนะ?
ใช้งานร่วมกันหลายๆคนในทีมเดียวกันด้วย ChatGPT Team เปิดมาให้ราคา
โดย mindphp พฤ 11 ม.ค. 2024 3:55 am บอร์ด MindPHP News & Feedback
0
281
พฤ 11 ม.ค. 2024 3:55 am โดย mindphp View Topic ใช้งานร่วมกันหลายๆคนในทีมเดียวกันด้วย ChatGPT Team เปิดมาให้ราคา