ให้เรตสมาชิก: 2 / 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 /> กำหนดพื้นที่ที่สามารถคลิ๊กได้ภายในแผนที่รูปภาพ
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Q - ทำอย่างไรให้มีเส้นขีดฆ่าราคาสินค้าเก่า
โดย jamepiyawat อ 06 ส.ค. 2019 12:18 pm บอร์ด Joomla Dev
4
9
อ 06 ส.ค. 2019 6:25 pm โดย jamepiyawat
สอบถามการใช้งาน กล่องข้อความเขียนอีเมล ค่ะ
โดย EyePornnipa อ 06 ส.ค. 2019 12:37 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
3
64
พ 07 ส.ค. 2019 12:23 pm โดย chatee supasand
บันทึกบัญชีตั้งหนี้เงินกู้ยืมกรรมการ ยังไงค่ะ
โดย EyePornnipa อ 06 ส.ค. 2019 12:17 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
1
90
ส 10 ส.ค. 2019 10:01 am โดย Amp_Audit
สอบถามครับ อยากเขียนโค้ด ให้ สามารถติดตั้ง font ตามที่เราต้องการ
โดย chatee supasand อ 06 ส.ค. 2019 12:11 pm บอร์ด Programming - C/C++ & java & Python
0
32
อ 06 ส.ค. 2019 12:11 pm โดย chatee supasand
Microsoft ปล่อยของ โชว์ Demo Minecraft Earth ที่งาน Microsoft Inspire 2019
โดย chatee supasand อ 06 ส.ค. 2019 11:56 am บอร์ด Microsoft Office Knowledge & line & Etc
0
51
อ 06 ส.ค. 2019 11:56 am โดย chatee supasand
Q-อยากทราบวิธีทำให้โมดูล MooZiiCart Latest Products แสดงสินค้าเป็นแนวนอนครับ
โดย jamepiyawat อ 06 ส.ค. 2019 10:50 am บอร์ด Joomla Dev
2
8
อ 06 ส.ค. 2019 11:37 am โดย jamepiyawat
งานประจำวันที่ 6 สิงหาคม 2562
โดย chatee supasand อ 06 ส.ค. 2019 10:26 am บอร์ด MT33 - นายชาตรี สุภาแสน
1
4
อ 06 ส.ค. 2019 7:54 pm โดย chatee supasand
งานประจำวันที่ 6 สิงหาคม 2562
โดย Patipat อ 06 ส.ค. 2019 10:15 am บอร์ด M088 - ปฏิภัทร สารธรรม
1
12
อ 06 ส.ค. 2019 8:45 pm โดย Patipat
งานประจำวันที่ 6 สิงหาคม 2562
โดย jirawoot อ 06 ส.ค. 2019 10:10 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
2
12
อ 06 ส.ค. 2019 7:51 pm โดย jirawoot
โครงสร้างเว็บขายของ ของใช้ภายในบ้าน
โดย Auttasti อ 06 ส.ค. 2019 10:08 am บอร์ด MT34 - นายอัฐสิทธิ์ รอดถนอม
0
22
อ 06 ส.ค. 2019 10:08 am โดย Auttasti
งานประจำวันที่ 6 กรกฎาคม 2562
โดย jamepiyawat อ 06 ส.ค. 2019 10:07 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
1
8
อ 06 ส.ค. 2019 8:45 pm โดย jamepiyawat
งานประจำวันที่ 06 สิงหาคม 2562
โดย EyePornnipa อ 06 ส.ค. 2019 10:05 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
3
48
อ 06 ส.ค. 2019 7:47 pm โดย EyePornnipa
งานประจำวันที่ 6 สิงหาคม 2562
โดย Auttasti อ 06 ส.ค. 2019 9:57 am บอร์ด MT34 - นายอัฐสิทธิ์ รอดถนอม
3
12
พ 07 ส.ค. 2019 9:54 am โดย Auttasti
Google Duo (ดูโอ) สามารถ Video Call ได้ 8 คนแล้ว
โดย jamepiyawat จ 05 ส.ค. 2019 7:26 pm บอร์ด Share Knowledge
0
61
จ 05 ส.ค. 2019 7:26 pm โดย jamepiyawat
ยิ่งเปิดแท็บเยอะยิ่งดูเก่ง ฮ่าๆ
โดย chatee supasand จ 05 ส.ค. 2019 7:15 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
55
จ 05 ส.ค. 2019 7:15 pm โดย chatee supasand
วิธีการเปลี่ยน Password Admin
โดย Auttasti จ 05 ส.ค. 2019 6:59 pm บอร์ด Joomla user Guide Knowledge
0
59
จ 05 ส.ค. 2019 6:59 pm โดย Auttasti
ประเภทของ border
โดย jamepiyawat จ 05 ส.ค. 2019 6:59 pm บอร์ด CSS Knowledge
0
36
จ 05 ส.ค. 2019 6:59 pm โดย jamepiyawat
การออฟไลน์เว็บไซต์ชั่วคราว
โดย Auttasti จ 05 ส.ค. 2019 6:29 pm บอร์ด Joomla user Guide Knowledge
0
45
จ 05 ส.ค. 2019 6:29 pm โดย Auttasti
เอกสารแสดงตนว่าขึ้นทะเบียนกับกรมบัญชีกลาง คืออะไร
โดย EyePornnipa จ 05 ส.ค. 2019 6:21 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
1
120
ส 10 ส.ค. 2019 11:37 am โดย Amp_Audit
การสร้างหมวดหมู่ หรือ Categories
โดย Auttasti จ 05 ส.ค. 2019 5:40 pm บอร์ด Joomla user Guide Knowledge
0
58
จ 05 ส.ค. 2019 5:40 pm โดย Auttasti