บทที่ 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 /> กำหนดพื้นที่ที่สามารถคลิ๊กได้ภายในแผนที่รูปภาพ
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีสมัคร Binance ง่าย ๆ ใน 3 นาที ผจญภัยในโลกของ crypto
โดย p444722 อ 02 ม.ค. 2024 11:52 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
283
อ 02 ม.ค. 2024 11:52 pm โดย p444722 View Topic วิธีสมัคร Binance ง่าย ๆ ใน 3 นาที ผจญภัยในโลกของ crypto
วิธีเปิดบัญชี Binance ขั้นตอนในการลงทุนดิจิทัล
โดย p444722 อ 02 ม.ค. 2024 11:32 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
281
อ 02 ม.ค. 2024 11:32 pm โดย p444722 View Topic วิธีเปิดบัญชี Binance ขั้นตอนในการลงทุนดิจิทัล
วิธีอ่านค่าตัวต้านทาน แบบเส้น 4 และ 5 แถบสี วิธีการอ่านค่าตัวต้านทาน Resistor (R)
โดย mindphp จ 01 ม.ค. 2024 2:30 pm บอร์ด IOT - Internet of things
2
1801
จ 01 ม.ค. 2024 2:45 pm โดย mindphp View Topic วิธีอ่านค่าตัวต้านทาน แบบเส้น 4 และ 5 แถบสี วิธีการอ่านค่าตัวต้านทาน Resistor (R)
ความแตกต่างของเครื่อง Server R210 กับ R210 II
โดย mindphp จ 01 ม.ค. 2024 11:37 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
309
จ 01 ม.ค. 2024 12:04 pm โดย mindphp View Topic ความแตกต่างของเครื่อง Server R210 กับ R210 II
มาทำความรู้จักกับบัตรผ่อนสินค้ากัน
โดย asider8629 อ 31 ธ.ค. 2023 8:30 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
291
จ 01 ม.ค. 2024 9:58 am โดย Consolez View Topic มาทำความรู้จักกับบัตรผ่อนสินค้ากัน
ESP32 WiFi Node32s ESP-32 ESP-32S NodeMCU ESP-WROOM-32 WiFi Bluetooth
โดย mindphp อ 31 ธ.ค. 2023 8:28 pm บอร์ด IOT - Internet of things
0
773
อ 31 ธ.ค. 2023 8:28 pm โดย mindphp View Topic ESP32 WiFi Node32s ESP-32 ESP-32S NodeMCU ESP-WROOM-32 WiFi Bluetooth
Mg90s Servo เฟืองเหล็ก motor Version อัพเกรดเฟือง ตัวนี้หมุนครึ่งรอบ 180 องศา
โดย mindphp อ 31 ธ.ค. 2023 8:27 pm บอร์ด IOT - Internet of things
0
1343
อ 31 ธ.ค. 2023 8:27 pm โดย mindphp View Topic Mg90s Servo เฟืองเหล็ก motor Version อัพเกรดเฟือง ตัวนี้หมุนครึ่งรอบ 180 องศา
ชุดข้อต่อ Servo Bracket เป็นโลหะวัสดุทนมาก ไว้ใช้คู่กับ Servo สำหรับทำแขนหมุน
โดย mindphp อ 31 ธ.ค. 2023 8:26 pm บอร์ด IOT - Internet of things
0
1326
อ 31 ธ.ค. 2023 8:26 pm โดย mindphp View Topic ชุดข้อต่อ Servo Bracket เป็นโลหะวัสดุทนมาก  ไว้ใช้คู่กับ Servo สำหรับทำแขนหมุน