วิธีการ ใส่รูปด้วย HTML

เว็บไหนหรือโปรไฟล์ใครมีรูปสวยๆ รับรองปังแน่นอน โค้ด HTML ที่ใช้ใส่รูปนั้นใช้ง่าย ตรงไปตรงมา เรียกว่าเป็นขั้นตอนแรกที่มือใหม่ HTML ควรจะรู้ไว้ทีเดียว

ส่วน 1

ส่วน 1 ของ 2:

ใส่รูป

ดาวน์โหลดบทความ

1
อัพโหลดรูป. มีหลายเว็บเลยที่ให้บริการ host หรือฝากรูปฟรี เช่น Picasa Web Albums, Imgur, Flickr หรือ Photobucket ยังไงก่อนเลือกใช้ให้อ่านเงื่อนไขดูดีๆ ก่อน บางเว็บจะย่อรูปคุณทำให้ด้อยคุณภาพลง บางเว็บก็ถึงขั้นถอดรูปออกจากเว็บถ้าคนดูรูปเยอะเกินไป (เพราะเปลือง bandwidth ของเว็บเขา)
- บาง blog มีเครื่องมือให้คุณอัพโหลดรูปเสร็จสรรพ
- ถ้าคุณใช้ web host แบบเสียเงิน ก็อัพโหลดรูปเข้าเว็บตัวเองได้ด้วย FTP และควรสร้าง "images" directory ไว้เพื่อเก็บไฟล์รูปให้เป็นระบบระเบียบ ^{[1]Xแหล่งข้อมูลอ้างอิง}
- ถ้าอยากใช้รูปจากเว็บอื่น ก็ต้องขออนุญาตเจ้าของก่อนหยิบยืมมา ถ้าเจ้าของเขาอนุญาตแล้วก็ดาวน์โหลดมาได้เลย แล้วอัพโหลดรูปเข้าเว็บฝากรูป
2
เปิดไฟล์ HTML. เปิดไฟล์ HTML ของหน้าเว็บที่คุณจะใส่รูป
- ถ้าจะใส่รูปในกระทู้ ก็พิมพ์ลงโพสต์โดยตรงได้เลย หลายเว็บบอร์ดมีระบบเฉพาะแทน HTML ถ้าใช้ไม่เป็นตรงไหนก็ถามเพื่อนร่วมเว็บบอร์ดดู
3
เริ่มจากแท็ก img. หาจุดในโค้ด HTML ที่จะใส่รูป แล้วใส่แท็ก <img> ลงไป นี่คือแท็กว่าง (empty tag) คือใส่ทีเดียวจบ ไม่มีแท็กเปิดแท็กปิด โค้ดที่ต้องใช้เพื่อใส่รูปจะอยู่ตรงกลางระหว่าง 2 วงเล็บเหลี่ยมนั่นแหละ
- <img>
4
หา URL ของรูป. เข้าหน้าเว็บที่คุณฝากรูปไว้ คลิกขวาที่รูป (กด control แล้วคลิก ถ้าใช้ Mac) แล้วเลือก "Copy Image Location" หรือคลิก "View Image" เพื่อดูแต่รูป จากนั้นก็ copy URL ในแถบ address เลย
- ถ้าคุณอัพโหลดรูปเข้า images directory ของเว็บตัวเอง ให้ลิงค์ไปยังโฟลเดอร์นั้น แล้วใส่ /images/yourfilenamehere ถ้าไม่ได้ผล แสดงว่า images directory อยู่ในอีกโฟลเดอร์หนึ่ง ให้เอาไปไว้ที่ root directory แทน
5
วาง URL ใน attribute src. คุณอาจจะพอรู้มาแล้ว ว่า attributes ต่างๆ ของ HTML จะอยู่ในแท็กเวลาปรับแต่ง อย่าง attribute src ก็ย่อมาจาก "source" ใช้บอกเบราว์เซอร์ว่าต้องไปหารูปที่ไหน ให้คุณเขียน src=" " แล้ว paste URL ของรูปตรงกลางระหว่างเครื่องหมายคำพูด เช่น
- <img src="http://www.exampleimagehost.com/my-cute-dog.jpg">
6
ใส่ attribute alt. ปกติ HTML ก็มีทุกอย่างที่ต้องใช้ในการแสดงรูปอยู่แล้ว แต่ก็ควรใส่ attribute alt ไปอีกที เพื่อบอกเบราว์เซอร์ว่าต้องขึ้นข้อความไหนแทนเวลารูปไม่ขึ้น แถมช่วยให้ search engines รู้ด้วยว่ารูปคุณเกี่ยวกับอะไร ส่วน screen readers ก็จะใช้อธิบายรูปให้ผู้พิการทางสายตาได้ด้วย ^{[2]Xแหล่งข้อมูลอ้างอิง} ลองทำตามตัวอย่างดู แล้วเปลี่ยนข้อความข้างในเครื่องหมายคำพูดเอา
- <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="How.com.vn ไท: หมากินส้ม">
- ถ้าเนื้อหาในหน้านั้นไม่ถึงกับขาดรูปไม่ได้ ให้ใส่ attribute alt แบบไม่ต้องมีคำบรรยาย (alt="How.com.vn ไท: ") ^{[3]Xแหล่งข้อมูลอ้างอิง}
เซฟไฟล์ HTML ลงเว็บ แล้วเข้าหน้าเว็บที่คุณเพิ่งแก้ไข หรือ refresh หน้านั้นถ้าเปิดอยู่ เท่านี้ก็จะเห็นรูปแล้ว ถ้ารูปผิดขนาดหรือไม่ถูกใจด้วยเหตุผลใดก็ตาม ก็ให้ไปปรับแก้ตามวิธีการข้างล่าง
โฆษณา

ส่วน 2

ส่วน 2 ของ 2:

ปรับแต่งเพิ่มเติม

ดาวน์โหลดบทความ

1
ปรับขนาดรูป. จะดีที่สุดถ้าคุณปรับขนาดรูปด้วยโปรแกรมแต่งรูปฟรีก่อน แล้วค่อยอัพโหลด การปรับค่า width (ความกว้าง) กับ height (ความสูง) ด้วย HTML จะเป็นการบอกเบราว์เซอร์ให้ยืด/หดรูป ซึ่งก็ต่างกันไปตามแต่ละเบราว์เซอร์ และอาจ (แทบไม่ค่อย) เกิด error ตอนแสดงรูปได้ ^{[4]Xแหล่งข้อมูลอ้างอิง} ถ้าอยากปรับรูปแบบสะดวกรวดเร็วทันใจ ให้ใช้ฟอร์แมตนี้
- <img src="http://example.com/example.png" alt="How.com.vn ไท: display this" width=200 height=200> (จำนวนพิกเซล หรือ "CSS pixels" ของ HTML5 ที่ใช้กับมือถือได้ดีกว่า)^{[5]Xแหล่งข้อมูลอ้างอิง}^{[6]Xแหล่งข้อมูลอ้างอิง}
- หรือ <img src="http://example.com/example.png" width=100% height=10%> (เปอร์เซ็นต์ของสัดส่วนหน้าเว็บ หรือเปอร์เซ็นขององค์ประกอบ HTML ที่มีรูป)
- ถ้าคุณใส่แค่ attribute เดียว (width หรือ height) เบราว์เซอร์จะปรับอีกค่าตาม เพื่อคงสัดส่วน width:height ratio ไว้
2
ใส่ tooltip. attribute title ใช้เพิ่มคอมเม้นท์หรือข้อมูลอื่นๆ ของรูปได้ เช่น ใส่เครดิตให้เจ้าของรูป ส่วนใหญ่ข้อความนี้จะขึ้นเวลาคนอ่านเขาเลื่อนเคอร์เซอร์มาที่รูป
- <img src="http://example.com/example.png" title="Photograph by J. Godfrey">
3
สร้างลิงค์. ถ้าอยากได้รูปที่เป็นลิงค์ด้วย ให้ใส่แท็ก image ในแท็ก hyperlink <a></a> เช่น
- <a href="http://www.urloflink.com"><img src="http://urlofimage.com/image.gif"></a>
โฆษณา

เคล็ดลับ

ไฟล์รูป GIF เหมาะสำหรับโลโก้หรือการ์ตูน แต่ถ้าไฟล์ JPEG จะเหมาะกับรูปซับซ้อนหน่อย อย่างพวกรูปถ่าย
URL ต้องรวมฟอร์แมตของไฟล์รูปไว้ด้วย (เช่น .jpg, .gif และอื่นๆ)
อย่าลืม backup ไฟล์รูปเผื่อไว้ในคอม
พยายามใช้รูปที่เป็นฟอร์แมต .gif, .jpeg, .jpg หรือ .png ^{[7]Xแหล่งข้อมูลอ้างอิง} ถ้าเป็นฟอร์แมตอื่นบางเบราว์เซอร์ก็ไม่แสดง

โฆษณา

คำเตือน

ห้าม "hotlink" คือใส่ URL ที่ copy มาจากเว็บคนอื่นโดยตรงเด็ดขาด เพราะจะไปกิน bandwidth ของเว็บเจ้าของรูปเขาโดยที่เขาเองไม่ได้ยอดวิวของเว็บด้วยซ้ำ แบบนี้ถือเป็นมารยาทการใช้เน็ตที่ไม่ดี แถมถ้าวันดีคืนดีเจ้าของเขาเอารูปออกหรือปิดเว็บ รูปที่คุณไปแอบ hotlink มาก็จะพลอยหายไปด้วย ที่สำคัญคือถ้าเจ้าของเขาจับได้ ระวังเขาจะเอาเรื่องหรือแกล้งเปลี่ยนเป็นรูปประหลาดๆ แทน ^{[8]Xแหล่งข้อมูลอ้างอิง}

โฆษณา