ดาวน์โหลดบทความ
ดาวน์โหลดบทความ
เว็บไหนหรือโปรไฟล์ใครมีรูปสวยๆ รับรองปังแน่นอน โค้ด HTML ที่ใช้ใส่รูปนั้นใช้ง่าย ตรงไปตรงมา เรียกว่าเป็นขั้นตอนแรกที่มือใหม่ HTML ควรจะรู้ไว้ทีเดียว
ขั้นตอน
-
อัพโหลดรูป. มีหลายเว็บเลยที่ให้บริการ host หรือฝากรูปฟรี เช่น Picasa Web Albums, Imgur, Flickr หรือ Photobucket ยังไงก่อนเลือกใช้ให้อ่านเงื่อนไขดูดีๆ ก่อน บางเว็บจะย่อรูปคุณทำให้ด้อยคุณภาพลง บางเว็บก็ถึงขั้นถอดรูปออกจากเว็บถ้าคนดูรูปเยอะเกินไป (เพราะเปลือง bandwidth ของเว็บเขา)
- บาง blog มีเครื่องมือให้คุณอัพโหลดรูปเสร็จสรรพ
- ถ้าคุณใช้ web host แบบเสียเงิน ก็อัพโหลดรูปเข้าเว็บตัวเองได้ด้วย FTP และควรสร้าง "images" directory ไว้เพื่อเก็บไฟล์รูปให้เป็นระบบระเบียบ [1] X แหล่งข้อมูลอ้างอิง
- ถ้าอยากใช้รูปจากเว็บอื่น ก็ต้องขออนุญาตเจ้าของก่อนหยิบยืมมา ถ้าเจ้าของเขาอนุญาตแล้วก็ดาวน์โหลดมาได้เลย แล้วอัพโหลดรูปเข้าเว็บฝากรูป
-
เปิดไฟล์ HTML. เปิดไฟล์ HTML ของหน้าเว็บที่คุณจะใส่รูป
- ถ้าจะใส่รูปในกระทู้ ก็พิมพ์ลงโพสต์โดยตรงได้เลย หลายเว็บบอร์ดมีระบบเฉพาะแทน HTML ถ้าใช้ไม่เป็นตรงไหนก็ถามเพื่อนร่วมเว็บบอร์ดดู
-
เริ่มจากแท็ก img. หาจุดในโค้ด HTML ที่จะใส่รูป แล้วใส่แท็ก <img> ลงไป นี่คือแท็กว่าง (empty tag) คือใส่ทีเดียวจบ ไม่มีแท็กเปิดแท็กปิด โค้ดที่ต้องใช้เพื่อใส่รูปจะอยู่ตรงกลางระหว่าง 2 วงเล็บเหลี่ยมนั่นแหละ
- <img>
-
หา URL ของรูป. เข้าหน้าเว็บที่คุณฝากรูปไว้ คลิกขวาที่รูป (กด control แล้วคลิก ถ้าใช้ Mac) แล้วเลือก "Copy Image Location" หรือคลิก "View Image" เพื่อดูแต่รูป จากนั้นก็ copy URL ในแถบ address เลย
- ถ้าคุณอัพโหลดรูปเข้า images directory ของเว็บตัวเอง ให้ลิงค์ไปยังโฟลเดอร์นั้น แล้วใส่ /images/ yourfilenamehere ถ้าไม่ได้ผล แสดงว่า images directory อยู่ในอีกโฟลเดอร์หนึ่ง ให้เอาไปไว้ที่ root directory แทน
-
วาง URL ใน attribute src. คุณอาจจะพอรู้มาแล้ว ว่า attributes ต่างๆ ของ HTML จะอยู่ในแท็กเวลาปรับแต่ง อย่าง attribute src ก็ย่อมาจาก "source" ใช้บอกเบราว์เซอร์ว่าต้องไปหารูปที่ไหน ให้คุณเขียน src=" " แล้ว paste URL ของรูปตรงกลางระหว่างเครื่องหมายคำพูด เช่น
- <img src="http://www.exampleimagehost.com/my-cute-dog.jpg">
-
ใส่ attribute alt. ปกติ HTML ก็มีทุกอย่างที่ต้องใช้ในการแสดงรูปอยู่แล้ว แต่ก็ควรใส่ attribute alt ไปอีกที เพื่อบอกเบราว์เซอร์ว่าต้องขึ้นข้อความไหนแทนเวลารูปไม่ขึ้น แถมช่วยให้ search engines รู้ด้วยว่ารูปคุณเกี่ยวกับอะไร ส่วน screen readers ก็จะใช้อธิบายรูปให้ผู้พิการทางสายตาได้ด้วย [2] X แหล่งข้อมูลอ้างอิง ลองทำตามตัวอย่างดู แล้วเปลี่ยนข้อความข้างในเครื่องหมายคำพูดเอา
- <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="หมากินส้ม">
- ถ้าเนื้อหาในหน้านั้นไม่ถึงกับขาดรูปไม่ได้ ให้ใส่ attribute alt แบบไม่ต้องมีคำบรรยาย (alt="") [3] X แหล่งข้อมูลอ้างอิง
-
เซฟค่าใหม่. เซฟไฟล์ HTML ลงเว็บ แล้วเข้าหน้าเว็บที่คุณเพิ่งแก้ไข หรือ refresh หน้านั้นถ้าเปิดอยู่ เท่านี้ก็จะเห็นรูปแล้ว ถ้ารูปผิดขนาดหรือไม่ถูกใจด้วยเหตุผลใดก็ตาม ก็ให้ไปปรับแก้ตามวิธีการข้างล่างโฆษณา
-
ปรับขนาดรูป. จะดีที่สุดถ้าคุณ ปรับขนาดรูปด้วยโปรแกรมแต่งรูปฟรี ก่อน แล้วค่อยอัพโหลด การปรับค่า width (ความกว้าง) กับ height (ความสูง) ด้วย HTML จะเป็นการบอกเบราว์เซอร์ให้ยืด/หดรูป ซึ่งก็ต่างกันไปตามแต่ละเบราว์เซอร์ และอาจ (แทบไม่ค่อย) เกิด error ตอนแสดงรูปได้ [4] X แหล่งข้อมูลอ้างอิง ถ้าอยากปรับรูปแบบสะดวกรวดเร็วทันใจ ให้ใช้ฟอร์แมตนี้
- <img src="http://example.com/example.png" alt="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 ไว้
-
ใส่ tooltip. attribute title ใช้เพิ่มคอมเม้นท์หรือข้อมูลอื่นๆ ของรูปได้ เช่น ใส่เครดิตให้เจ้าของรูป ส่วนใหญ่ข้อความนี้จะขึ้นเวลาคนอ่านเขาเลื่อนเคอร์เซอร์มาที่รูป
- <img src="http://example.com/example.png" title="Photograph by J. Godfrey">
-
สร้างลิงค์. ถ้าอยากได้รูปที่เป็นลิงค์ด้วย ให้ใส่แท็ก 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 แหล่งข้อมูลอ้างอิง
โฆษณา
ข้อมูลอ้างอิง
- ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
- ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
- ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
- ↑ http://www.htmlcodetutorial.com/images/_IMG_WIDTH.html
- ↑ http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
- ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
- ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
- ↑ http://www.webweaver.nu/html-tips/hotlinking.shtml
โฆษณา
