พื้นฐาน HTML

การใส่รูปในเว็บเพจ

แทรกรูปเข้าไปในเว็บเพจ รูปมีความสำคัญกับเว็บไซต์มาก เพราะนอกจะทำความเข้าใจง่ายกว่าการอ่านแล้ว ยังทำให้เว็บไซต์ดูน่าสนใจขึ้นอีกด้วย

รูปนั้นสามารถบรรยายรายละเอียดได้ดีกว่าคำพูดมาก ดังนั้นแทบทุกเว็บไซต์จึงมีรูปอยู่เกือบทุกเว็บไซต์ ในบทความนี้เราจะมาใส่รูปในเว็บเพจกัน

1. ลองใส่รูปในเว็บเพจ
จะเห็นได้ว่าการใส่รูปที่ขยับได้ หรือขยับไม่ได้นั้น code ไม่แตกต่างกัน แต่จะแตกต่างกันที่ตัวรูปเองว่าขยับได้หรือไม่

ฟอร์ตแมตของไฟต์ที่เราจะเห็นกันบ่อยๆ
1.JPEG เหมาะสำหรับภาพถ่าย หรือภาพที่มีความละเอียดและจำนวนสีมากๆ
2.GIF เหมาะสำหรับภาพลายเส้น เช่นการ์ตูน ตัวหนังสือ หรือภาพที่ต้องการสร้างให้ภาพโปร่งใส หรือ ทำให้เคลื่อนไหวได้
3.PNG เหมาะสำหรับภาพที่ต้องการให้โปร่งแสง ขนาดไฟล์จะใหญ่กว่า JPEG แต่คุณภาพจะดีกว่า JPEG


สำหรับการเปลี่ยนฟอร์ตแมตของภาพเราจะใช้โปรแกรมเช่น Photoshop ในการเปลี่ยนซึ่งเรื่องนี้เราจะไปศึกษากันที่หัวข้อ Photoshop กันต่อไป ซึ่งฟอร์ตแมตของภาพจะมีผลมากต่อการทำเว็บไซต์ของเรา

คลิกเพื่อทดลองเขียนด้วยตัวเอง



2. ใส่รูปจาก directory ที่ต่างกัน
จะเห็นว่าการใส่รูปจาก directory ที่ต่างกันใช้หลักการเดียวกับการเขียน hyperlink นั่นเอง ซึ่งหากไม่เข้าใจสามารถกลับไปดูได้ที่หัวข้อ เชื่อมต่อเอกสารของเราด้วย hyperlink

คลิกเพื่อทดลองเขียนด้วยตัวเอง



3. The Alt Attribute
รูปแบบ <img src="boat.gif" alt="Big Boat"> เราใช้ alt Attribute เพื่อแสดงผลในกรณีที่ไม่สามารถโหลดรูปได้ และแสดงผลเมื่อมีเมาส์ไปอยู่ด้านบน นอกจากนั้นยังมีผลต่อการคนหาของ google อีกด้วย

คลิกเพื่อทดลองเขียนด้วยตัวเอง



4. การใส่รูปพื้นหลัง
รูปพื้นหลังจะถูกแสดงผลซ้ำกันเองโดยเราแม้ว่ารูปจะรูปจะมีขนาดเล็ก หรือสั้นเพียงใดก็ตาม

คลิกเพื่อทดลองเขียนด้วยตัวเอง



5. การจัดตำแหน่งของรูปในตัวอักษร
จะเป็นการจัดตำแหน่งของรูปในตัวอักษร เมื่อเรามีตัวอักษรกับภาพอยู่ด้วยกัน เราจะใช้ Align Attribute เพื่อจัดตำแหน่งของภาพ

คลิกเพื่อทดลองเขียนด้วยตัวเอง



6. การจัดตำแหน่งของรูปให้ชิดซ้าย หรือขวา
จะเป็นการจัดรูปของเราให้ชิดซ้ายหรือชิดขวา เมื่อแสดงผล

คลิกเพื่อทดลองเขียนด้วยตัวเอง



7. การใช้คำสั่งกำหนดขนาดของรูป
การใส่ขนาดของรูปนั้นเราจะใส่หรือไม่ใส่ก็ได้ ถ้าเราใส่ขนาด การแสดงผลของรูปก็จะเปลี่ยนแปลงตามที่เราใส่ แต่ขนาดของรูปจริงๆจะไม่เปลี่ยนแปลง

คลิกเพื่อทดลองเขียนด้วยตัวเอง



8. ทำให้รูปภาพเป็น hyperlink

การทำให้รูปภาพเป็น hyperlink ก็ให้ใส่คำสั่งของ hyperlink ครอบคำสั่งแสดงภาพ เท่านั้นเอง

คลิกเพื่อทดลองเขียนด้วยตัวเอง



9. คำสั่งที่ใช้ในการแสดงพิกัดในภาพ

เป็นการแสดงพิกัดที่อยู่ในภาพโดยจะแสดงที่ status bar เป็นพิกัดค่า X,Y ตามจุดที่เมาส์ของเราอยู่ด้านบน คลิกที่ภาพหน้าที่ลิงก์ไปจะแสดงตำแหน่งที่เราคลิกในภาพ โดยจุด 0,0 จะอยู่ที่ด้ายซ้ายบนของภาพ

คลิกเพื่อทดลองเขียนด้วยตัวเอง



10. สร้าง hyperlink ด้วยพิกัดในรูปภาพ
ในหัวข้อที่แล้วเราทราบพิกัดจุดของภาพแล้ว ในหัวข้อนี้จะใช้พิกัดจุดในภาพมาสร้าง hyperlink ซึ่งในตัวอย่างจะเห็นว่ามี hyperlink ในรูปภาพอยู่ 2 ที่คือ keyboard , mouse

คลิกเพื่อทดลองเขียนด้วยตัวเอง


เลื่อนขึ้นด้านบน