ให้เรตสมาชิก: 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 /> กำหนดพื้นที่ที่สามารถคลิ๊กได้ภายในแผนที่รูปภาพ
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เครื่องมือในการคำนวณภาษีหัก ณ ที่จ่าย ลดภาระการเสียภาษีก้อนใหญ่ได้ง่ายๆ
โดย prmindphp พ 25 ธ.ค. 2019 6:56 pm บอร์ด MindPHP News & Feedback
0
38
พ 25 ธ.ค. 2019 6:56 pm โดย prmindphp
วิธีการเขียน SQL เพื่อเปลี่ยนชื่อตาราง ในฐานข้อมูลเมื่อมีการเขียนชื่อตารางผิด
โดย Ittichai_chupol พ 25 ธ.ค. 2019 5:15 pm บอร์ด SQL Knowledge
0
35
พ 25 ธ.ค. 2019 5:15 pm โดย Ittichai_chupol
แก้ปัญหา ใช้ Python โอนย้ายไฟล์ข้ามเครื่อง ด้วย ftplib แล้วเจอ Connection timed out
โดย mindphp พ 25 ธ.ค. 2019 1:21 pm บอร์ด Python Knowledge
0
44
พ 25 ธ.ค. 2019 1:21 pm โดย mindphp
ตัวช่วยในคำนวณอัตราดอกเบี้ยสำหรับนักลงทุน
โดย prmindphp อ 24 ธ.ค. 2019 6:52 pm บอร์ด MindPHP News & Feedback
0
39
อ 24 ธ.ค. 2019 6:52 pm โดย prmindphp
วิธีการดึงกลุ่มของ phpbb มาสร้างเป็น listbox พร้อมเปลี่ยนชื่อกลุ่มตามภาษาที่กำหนด
โดย Ittichai_chupol อ 24 ธ.ค. 2019 6:35 pm บอร์ด PHP Knowledge
0
34
อ 24 ธ.ค. 2019 6:35 pm โดย Ittichai_chupol
R - ขั้นตอนการตรวจ สอบปัญหา ที่อาจจะเกิดขึ้น ตาม Systems Diagram
โดย mindphp อ 24 ธ.ค. 2019 12:12 pm บอร์ด MlineCRM Line + MD-CRM
0
2
อ 24 ธ.ค. 2019 12:12 pm โดย mindphp
ปฏิทินประจําปี 2563 มาในรูปแบบไซเบอร์ สำหรับคนสมัยใหม่ที่มีหัวคิดก้าวไกลเท่าทันเทคโนโลยี
โดย noppadonsk อ 24 ธ.ค. 2019 10:35 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
184
ส 04 ม.ค. 2020 4:38 am โดย mindphp
R - เพิ่ม Exception ตอน push ข้อมความ ไปที่ Line หรือ รับข้อความจาก Line ไม่ได้
โดย mindphp อ 24 ธ.ค. 2019 7:06 am บอร์ด MD-CRM - Tester
0
4
อ 24 ธ.ค. 2019 7:06 am โดย mindphp
B - เวลาใน Logs ไม่ตรง
โดย mindphp อ 24 ธ.ค. 2019 5:57 am บอร์ด MlineCRM Line + MD-CRM
0
3
อ 24 ธ.ค. 2019 5:57 am โดย mindphp
วางแผนเงินออมได้ง่ายๆ ด้วยโปรแกรมคำนวณหามูลค่าเงินในอนาคต
โดย prmindphp จ 23 ธ.ค. 2019 7:28 pm บอร์ด MindPHP News & Feedback
0
60
จ 23 ธ.ค. 2019 7:28 pm โดย prmindphp
ปฏิทินประจําปี 2563 ธีมแคมป์ กางเต้นท์ เดินป่า สายลุยๆไม่ควรพลาด
โดย noppadonsk จ 23 ธ.ค. 2019 5:10 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
936
พ 01 ม.ค. 2020 3:24 pm โดย mindphp
วิธีการปรับเปลี่ยนค่าการแสดงผลในหน้าแสดงบอร์ด ใน phpbb
โดย Ittichai_chupol ส 21 ธ.ค. 2019 5:48 pm บอร์ด PHP Knowledge
0
66
ส 21 ธ.ค. 2019 5:48 pm โดย Ittichai_chupol
จะทำอย่างไรจะแสดงข้อมูลในจำนวนตารางที่คงที่ได้ครับ
โดย jamepiyawat ส 21 ธ.ค. 2019 1:51 pm บอร์ด Programming - PHP
1
99
ส 21 ธ.ค. 2019 2:07 pm โดย thatsawan
วิธีการส่งค่า จาก Event หนึ่งไปยัง Event หนึ่ง ใน phpbb
โดย Ittichai_chupol ศ 20 ธ.ค. 2019 6:59 pm บอร์ด PHP Knowledge
0
67
ศ 20 ธ.ค. 2019 6:59 pm โดย Ittichai_chupol
โปรแกรมคำนวณหาจำนวนเงินผ่อนชำระ ตัวช่วยในการคำนวณเงินผ่อนเพื่อใช้ประกอบการตัดสินใจ
โดย prmindphp ศ 20 ธ.ค. 2019 5:58 pm บอร์ด MindPHP News & Feedback
0
68
ศ 20 ธ.ค. 2019 5:58 pm โดย prmindphp
ปฏิทินประจำปี 2563 ดอกไม้มงคลพืชสวยงาม -โหลดมาใช้กันเลยฟรี
โดย noppadonsk ศ 20 ธ.ค. 2019 1:55 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
4862
อ 24 ธ.ค. 2019 8:17 pm โดย mindphp
excel แบบวันที่เวลา ลงdatabase
โดย Anonymous ศ 20 ธ.ค. 2019 1:54 pm บอร์ด Programming - PHP
1
83
ศ 20 ธ.ค. 2019 2:03 pm โดย mindphp
ขอcode แปลงหน่วยนิ้ว เป็นเซ็นติเมตร ภาษา Java
โดย Anonymous ศ 20 ธ.ค. 2019 9:39 am บอร์ด Programming - PHP
0
1717
ศ 20 ธ.ค. 2019 9:39 am โดย บุคคลทั่วไป
โปรแกรมคำนวณสินเชื่อบ้าน เครื่องมือที่จะช่วยให้คุณคำนวณสินเชื่อบ้านได้ง่ายและรวดเร็ว
โดย prmindphp พฤ 19 ธ.ค. 2019 6:59 pm บอร์ด MindPHP News & Feedback
0
1724
พฤ 19 ธ.ค. 2019 6:59 pm โดย prmindphp
วิธีการแการแก้ไขข้อมูลโพสต์ ในระหว่างขั้นตอนการกดโพสต์ ของ phpbb
โดย Ittichai_chupol พฤ 19 ธ.ค. 2019 5:11 pm บอร์ด PHP Knowledge
0
537
พฤ 19 ธ.ค. 2019 5:11 pm โดย Ittichai_chupol