ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 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 /> กำหนดพื้นที่ที่สามารถคลิ๊กได้ภายในแผนที่รูปภาพ
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
พิมพ์ข้อความเว็บบอร์ด แล้วกดไปโดยเว็บบอร์ดที่โชว์ในรูปแบบโทรศัพท์ทำยังไง
โดย Udomsak2539 จ 14 ก.ย. 2020 2:59 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
128
จ 14 ก.ย. 2020 3:05 pm โดย tsukasaz
keyword
โดย Udomsak2539 จ 14 ก.ย. 2020 11:27 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
178
อ 15 ก.ย. 2020 10:07 am โดย Udomsak2539
ลบคอมเม้นของเว็บบอร์ด PHP ยังไง
โดย Udomsak2539 จ 14 ก.ย. 2020 10:58 am บอร์ด MindPHP News & Feedback
2
154
จ 14 ก.ย. 2020 11:07 am โดย Udomsak2539
วิธีใช้คีย์ลัดเปลี่ยนภาษาใน Ubantu กดตรงไหนเหรอคะ
โดย fhakun จ 14 ก.ย. 2020 10:56 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
5
267
พ 16 ก.ย. 2020 5:09 pm โดย chatee supasand
การใส่ใจลูกน้อยวัยทารกที่มีอาการผื่นแดงแพ้ตามลำตัว
โดย medalezga ศ 11 ก.ย. 2020 4:38 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
261
ศ 11 ก.ย. 2020 4:38 pm โดย medalezga
วิธี Setup SSL ให้กับ GitLab เข้าใช้งาน https ได้ง่ายไม่ต้องแก้ไขโค้ดได้แล้วด้วย GitLab 12
โดย mindphp อ 08 ก.ย. 2020 8:29 pm บอร์ด Linux - Web Server
1
308
อ 08 ก.ย. 2020 8:42 pm โดย mindphp
สอบถามเรื่อง Output ข้อมูล Keywords ที่ได้จาก Youtube ครับ
โดย nai_cyp ส 05 ก.ย. 2020 6:35 pm บอร์ด Programming - C/C++ & java & Python
1
263
ส 05 ก.ย. 2020 7:53 pm โดย mindphp
geckodriver คืออะไรครับ ?
โดย nai_cyp พฤ 03 ก.ย. 2020 10:49 pm บอร์ด Programming - C/C++ & java & Python
2
391
ส 05 ก.ย. 2020 11:33 pm โดย nai_cyp
วิธีเลือกงาน
โดย jataz2 พฤ 03 ก.ย. 2020 5:51 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
278
พฤ 03 ก.ย. 2020 5:51 pm โดย jataz2
งานที่ได้เงินเดือนเยอะ
โดย jataz2 พฤ 03 ก.ย. 2020 5:38 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
234
พฤ 03 ก.ย. 2020 5:38 pm โดย jataz2
จัดการขยะ กับน้ำเสีย
โดย jataz2 พฤ 03 ก.ย. 2020 5:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
225
พฤ 03 ก.ย. 2020 5:25 pm โดย jataz2
ปัญหาการบันทึกใบแจ้งหนี้ในระบบ กับใบแจ้งหนี้/ใบกำกับภาษีที่ได้รับจากเจ้าหนี้ไม่ตรงกัน จะต้องทำอย่างไร
โดย natthanit.r2538 พฤ 03 ก.ย. 2020 3:51 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
201
พฤ 03 ก.ย. 2020 3:51 pm โดย natthanit.r2538
Edge Computing คืออะไร และมีประโยชน์อย่างไร
โดย nai_cyp อ 01 ก.ย. 2020 6:27 pm บอร์ด Share Knowledge
1
351
พฤ 10 ก.ย. 2020 5:15 pm โดย บุคคลทั่วไป
การสร้างบทความและสินค้าไว้ในหน้าเดียวกันในร้านค้าออนไลน์ด้วย Plugin Content Product Match ใน MooZiiCart
โดย bolue อ 01 ก.ย. 2020 3:51 pm บอร์ด MindPHP News & Feedback
0
292
อ 01 ก.ย. 2020 3:51 pm โดย bolue
โชว์สินค้าสไลด์ในร้านค้าออนไลน์ด้วย Module Ajax Search ใน MooZiiCart
โดย bolue อ 01 ก.ย. 2020 3:42 pm บอร์ด MindPHP News & Feedback
0
161
อ 01 ก.ย. 2020 3:42 pm โดย bolue
โชว์สินค้าสไลด์ในร้านค้าออนไลน์ด้วย Module Product Slide ใน MooZiiCart
โดย bolue อ 01 ก.ย. 2020 3:34 pm บอร์ด MindPHP News & Feedback
0
161
อ 01 ก.ย. 2020 3:34 pm โดย bolue
แสดงสถิติของร้านค้าในร้านค้าออนไลน์ด้วย Module Statistics ใน MooZiiCart
โดย bolue อ 01 ก.ย. 2020 3:30 pm บอร์ด MindPHP News & Feedback
0
142
อ 01 ก.ย. 2020 3:30 pm โดย bolue
แสดง ratings ของสินค้าในร้านค้าออนไลน์ด้วย Module Products Reviews ใน MooZiiCart
โดย bolue อ 01 ก.ย. 2020 3:20 pm บอร์ด MindPHP News & Feedback
0
136
อ 01 ก.ย. 2020 3:20 pm โดย bolue
แสดงป้ายกำกับสินค้าในร้านค้าออนไลน์ด้วย Module Product Labels ใน MooZiiCart
โดย bolue อ 01 ก.ย. 2020 3:12 pm บอร์ด MindPHP News & Feedback
0
151
อ 01 ก.ย. 2020 3:12 pm โดย bolue
Import excel .xlxs มีปัญหาอยู่ไฟล์หนึ่งไม่สามารถเเสดงได้ เจอ error ไม่ทราบว่าเกิดจากอะไร
โดย thatsawan อ 01 ก.ย. 2020 11:44 am บอร์ด Programming - PHP
1
593
อ 01 ก.ย. 2020 11:45 am โดย thatsawan