ให้เรตสมาชิก: 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 /> กำหนดพื้นที่ที่สามารถคลิ๊กได้ภายในแผนที่รูปภาพ
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
บทความ เกษตร ตำบล
โดย Auttasti พ 14 ส.ค. 2019 9:46 am บอร์ด MT34 - นายอัฐสิทธิ์ รอดถนอม
0
9
พ 14 ส.ค. 2019 9:46 am โดย Auttasti
งานประจำวันที่ 14 สิงหาคม 2562
โดย Auttasti พ 14 ส.ค. 2019 9:28 am บอร์ด MT34 - นายอัฐสิทธิ์ รอดถนอม
5
24
พ 14 ส.ค. 2019 7:40 pm โดย Auttasti
อยากทำโลโก้แบบนี้ครับ - อยากทำโลโก้ ให้อยู่ตรงกลาง ตำแหน่งเดียวกับเมนูแบบนี้
โดย toonytoony2004 อ 13 ส.ค. 2019 9:06 pm บอร์ด Joomla Development
1
53
พ 14 ส.ค. 2019 6:10 pm โดย tsukasaz
google search กับ google maps สามารถหาข้อมูลแบบไม่แสดงตัวตนได้แล้ว
โดย jamepiyawat อ 13 ส.ค. 2019 6:44 pm บอร์ด Share Knowledge
0
35
อ 13 ส.ค. 2019 6:44 pm โดย jamepiyawat
VDO - สคลิปการอัดวีดีโอ&วีดีโอ mdsoft_magic librery แปลงตัวเลขเป็นตัวหนังสือ
โดย jirawoot อ 13 ส.ค. 2019 10:14 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
2
17
อ 13 ส.ค. 2019 5:56 pm โดย jirawoot
B - ตัวหนังสือตรง กราฟของ Feedback Report - error [2019-08][001]
โดย tsukasaz อ 13 ส.ค. 2019 5:08 pm บอร์ด IIEC - Feedback Service System - Tester
1
2
อ 13 ส.ค. 2019 6:32 pm โดย tsukasaz
Q - กดปุ่ม wish-list แล้วขึ้น 404 Page not found
โดย jamepiyawat อ 13 ส.ค. 2019 4:19 pm บอร์ด Joomla Dev
3
11
อ 13 ส.ค. 2019 5:06 pm โดย tsukasaz
Sony จดสิทธิบัตร คอนแทคเลนส์ ถ่ายรูปและบันทึกวีดีโอ เพียงแค่กระพริบตา
โดย chatee supasand อ 13 ส.ค. 2019 3:13 pm บอร์ด MindPHP News
2
44
อ 13 ส.ค. 2019 4:21 pm โดย chatee supasand
Windows 10 ปรับดีไซน์จอ Network Status ใหม่ รวมทุกการเชื่อมต่อ ในแพตช์ Build 18956
โดย chatee supasand อ 13 ส.ค. 2019 11:36 am บอร์ด Microsoft Office Knowledge & line & Etc
0
41
อ 13 ส.ค. 2019 11:36 am โดย chatee supasand
Q - เรียกใช้ Class CSS ซ้ำกันครับ
โดย Patipat อ 13 ส.ค. 2019 11:25 am บอร์ด HTML CSS
2
45
อ 13 ส.ค. 2019 11:32 am โดย Patipat
B - กด Print รายงานภาษีไม่ได้
โดย EyePornnipa อ 13 ส.ค. 2019 11:19 am บอร์ด M.D.Soft Co.,Ltd. - Tester
0
3
อ 13 ส.ค. 2019 11:19 am โดย EyePornnipa
จะปรับขอบของปุ่ม Switch Language อย่าไรให้พอดีกับ Layout ของ Template Helix ครับ
โดย Patipat อ 13 ส.ค. 2019 10:42 am บอร์ด Joomla Development
1
39
อ 13 ส.ค. 2019 10:44 am โดย tsukasaz
งานประจำวันที่ 13 กรกฎาคม 2562
โดย jamepiyawat อ 13 ส.ค. 2019 10:15 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
3
12
อ 13 ส.ค. 2019 11:14 pm โดย thatsawan
งานประจำวันที่ 13 สิงหาคม 2562
โดย Patipat อ 13 ส.ค. 2019 10:07 am บอร์ด M088 - ปฏิภัทร สารธรรม
3
14
อ 13 ส.ค. 2019 11:16 pm โดย thatsawan
Re: งานประจำวันที่ 13 สิงหาคม 2562
โดย jirawoot อ 13 ส.ค. 2019 10:02 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
3
15
อ 13 ส.ค. 2019 11:20 pm โดย thatsawan
งานประจำวันที่ 13 สิงหาคม 2562
โดย EyePornnipa อ 13 ส.ค. 2019 9:58 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
5
25
อ 13 ส.ค. 2019 11:00 pm โดย thatsawan
งานประจำวันที่ 13 สิงหาคม 2562
โดย Auttasti อ 13 ส.ค. 2019 9:57 am บอร์ด MT34 - นายอัฐสิทธิ์ รอดถนอม
1
8
อ 13 ส.ค. 2019 7:18 pm โดย Auttasti
งานประจำวันที่ 13 สิงหาคม 2562
โดย chatee supasand อ 13 ส.ค. 2019 9:55 am บอร์ด MT33 - นายชาตรี สุภาแสน
3
15
อ 13 ส.ค. 2019 11:19 pm โดย thatsawan
รอ 10 วิแล้วไม่ขึ้นดาวห์โหลดไฟล์ Joomshopping Thai Edition
โดย Anonymous จ 12 ส.ค. 2019 10:38 pm บอร์ด Joomla Development
4
79
พ 14 ส.ค. 2019 3:28 pm โดย บุคคลทั่วไป
ปรับแต่ง เทมเพลต
โดย alonglot จ 12 ส.ค. 2019 1:50 pm บอร์ด Joomla Development
1
110
อ 13 ส.ค. 2019 10:16 am โดย tsukasaz