ให้เรตสมาชิก: 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 /> กำหนดพื้นที่ที่สามารถคลิ๊กได้ภายในแผนที่รูปภาพ
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ภาพประกอบ Tools
โดย numtan5839 ศ 08 พ.ย. 2019 1:58 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
5
44
อ 12 พ.ย. 2019 5:11 pm โดย numtan5839
Q - ไม่สามารถบันทึกรูปภาพที่แคปบนหน้าจอได้ ในโปรแกรม snagit
โดย nnamfon.26 ศ 08 พ.ย. 2019 11:26 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
4
30
จ 11 พ.ย. 2019 3:42 pm โดย nnamfon.26
ต้องการเลือก select tag แล้วส่งค่ากลับมาแล้วแต่ไม่รู้จะนำมาใช้ยังไงครับ
โดย bankjittapol ศ 08 พ.ย. 2019 11:24 am บอร์ด JavaScript & Jquery Ajax
4
38
ศ 08 พ.ย. 2019 3:28 pm โดย bankjittapol
อยากทราบวิธีการที่จะแนบไฟล์ใน ข้อความส่วนตัว
โดย Ittichai_chupol ศ 08 พ.ย. 2019 11:09 am บอร์ด Programming - PHP
3
30
ศ 08 พ.ย. 2019 2:55 pm โดย thatsawan
ไม่มีรหัสไปรษณี 30005 ทำให้อัพเดต ไปรษณีย์ เดอะมอลล์นครราชสีมา แล้วไม่ขึ้นครับ
โดย jamepiyawat ศ 08 พ.ย. 2019 9:53 am บอร์ด Odoojob.com - Tester
3
10
ศ 08 พ.ย. 2019 12:30 pm โดย mindphp
งานประจำวันที่ 8 พฤศจิกายน 2562
โดย numtan5839 ศ 08 พ.ย. 2019 9:21 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
4
40
ศ 08 พ.ย. 2019 6:27 pm โดย numtan5839
วิธีการเพิ่ม part way ให้แสดงใน phpbb
โดย Ittichai_chupol พฤ 07 พ.ย. 2019 5:46 pm บอร์ด PHP Knowledge
0
31
พฤ 07 พ.ย. 2019 5:46 pm โดย Ittichai_chupol
VDO - โปรแกรมคำนวณอัตราแลกเปลี่ยนสกุลเงิน
โดย numtan5839 พฤ 07 พ.ย. 2019 4:05 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
19
111
อ 12 พ.ย. 2019 6:41 pm โดย numtan5839
VDO - โปรแกรมตรวจสอบหมายเลขพัสดุ
โดย numtan5839 พฤ 07 พ.ย. 2019 3:57 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
13
76
อ 12 พ.ย. 2019 6:54 pm โดย numtan5839
เท็มเพลต megadeal เมือเปลี่ยนเป็นภาษาไทยแล้วหน้า Home ก็เปลี่ยนไป ครับ
โดย jamepiyawat พฤ 07 พ.ย. 2019 3:33 pm บอร์ด Joomla Development
2
28
ศ 08 พ.ย. 2019 12:44 pm โดย mindphp
VDO - การใช้โปรแกรมคำนวณสแควรูท
โดย numtan5839 พฤ 07 พ.ย. 2019 3:18 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
7
63
อ 12 พ.ย. 2019 7:01 pm โดย numtan5839
โมดูล JE Quick Contact ขึ้นว่า Warning ครับ
โดย jamepiyawat พฤ 07 พ.ย. 2019 3:16 pm บอร์ด Joomla Development
5
47
ศ 08 พ.ย. 2019 5:29 pm โดย mindphp
VDO - การใช้โปรแกรมคำนวน ค่าเฉลี่ย, ค่าแปรปรวน, ค่าเบี่ยงเบนมาตราฐาน
โดย numtan5839 พฤ 07 พ.ย. 2019 2:54 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
9
101
อ 12 พ.ย. 2019 7:06 pm โดย numtan5839
ขั้นตอนการอัดวิดิโอ
โดย numtan5839 พฤ 07 พ.ย. 2019 2:31 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
1
10
พฤ 07 พ.ย. 2019 2:47 pm โดย thatsawan
วิธีการเพิ่มค่าลดค่า array แต่ละค่าใน php
โดย jamepiyawat พฤ 07 พ.ย. 2019 2:11 pm บอร์ด PHP Knowledge
0
19
พฤ 07 พ.ย. 2019 2:11 pm โดย jamepiyawat
วิธีการใช้ curl เพื่อขอข้อมูลเว็บไซต์
โดย jamepiyawat พฤ 07 พ.ย. 2019 1:46 pm บอร์ด PHP Knowledge
0
21
พฤ 07 พ.ย. 2019 1:46 pm โดย jamepiyawat
Joomla 3.9.13 พร้อมให้อัปเดตแล้ว ปรับปรุงความปลอดภัยและระบบให้ดีขึ้น
โดย tsukasaz พฤ 07 พ.ย. 2019 1:14 pm บอร์ด MindPHP News
0
14
พฤ 07 พ.ย. 2019 1:14 pm โดย tsukasaz
VDO - การแนบไฟล์รูปภาพในบอร์ด Mindphp
โดย numtan5839 พฤ 07 พ.ย. 2019 12:28 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
23
อ 12 พ.ย. 2019 5:53 pm โดย mindphp
ทำไมข้อมูลของใบแจ้งหนี้ถึงไม่แสดงเมื่อกดHeader for report บนระบบERP
โดย nnamfon.26 พฤ 07 พ.ย. 2019 12:13 pm บอร์ด OpenERP - MD-ERP (Main)
5
17
พฤ 07 พ.ย. 2019 6:35 pm โดย mindphp
จะทำอย่างไรให้เราดึงข้อมูล Email ของ admin joomal ออมมาได้ครับ
โดย jamepiyawat พฤ 07 พ.ย. 2019 11:37 am บอร์ด Joomla Development
4
30
ศ 08 พ.ย. 2019 2:32 pm โดย tsukasaz