การใส่รูปภาพตกแต่งเว็บให้สวยงาม ในภาษา HTML
เว็บไซต์ที่มีข้อความอย่างเดียวนั้นไม่น่าสนใจเท่าไรนัก การมีรูปภาพให้เห็นกันในหน้าเว็บเพจจึงเป็นวิธีหนึ่งที่ช่วยตกแต่งให้เว็บเพจของเราดูน่าสนใจมากขึ้น นอกจากนี้รูปภาพยังช่วยให้การนำเสนอข้อมูลที่มีเนื้อหาเกี่ยวกับการอธิบายเรื่องราวเป็นไปได้โดยง่ายดายด้วย แท็กที่ใช้แสดงรูปภาพในภาษา HTML ก็คือ <img>
ลักษณะของแท็ก img ในภาษา HTML
ตัวอย่างต่อไปนี้ จะเป็นขั้นตอนการใส่รูปภาพ Notebook ลงในเว็บเพจ
-
ใส่ <img> เพื่อกำหนดตำแหน่งของการแสดงรูปภาพที่ต้องการ โดยเราจะพิมพ์ <img> ไว้ระหว่าง <body>….</body>
-
กำหนดชื่อไฟล์รูปภาพที่ต้องการ ให้กับแอตทริบิวต์ src (ตัวอย่างนี้ ไฟล์ html กับ รูปภาพอยู่ใน directory เดียวกัน)
-
Save เป็นไฟล์นามสกุล .html
ผลลัพธ์ที่ได้
จะเห็นได้ว่ามีรูปที่เราต้องการโชว์(นั่นก็คือรูป notebook) ไปแสดงอยู่ใน browser เรียบร้อยแล้ว
ปรับขนาดรูปภาพ ทั้งความกว้าง และ ความสูง
ถ้าเราต้องการกำหนดความกว้าง ความสูงของรูปภาพ เราจะต้องเพิ่มแอทริบิวต์ width และ height ลงไป เช่น
<img src=”notebook.jpg” width=”150″ height=”150″ ><img/>
เราก็ได้รูปที่มีขนาดกว้าง 150 pixel ยาว 150 pixel
กำหนดเส้นขอบของรูปภาพ
โดยปกติรูปภาพจะไม่มีเส้นขอบล้อมรอบ แต่ถ้าเราต้องการให้มีเส้นขอบก็สามารถทำได้โดยใช้แอตทริบิวต์ border เช่น ถ้าต้องการให้มีเส้นขอบขนาด 7 pixel ล้อมรอบรูปภาพ ให้ทำแบบนี้
<img src=”notebook.jpg” width=”50″ height=”50″ border=”7″ ><img/>
การแสดงรูปภาพบนเว็บไซต์ไม่เพียงแต่จะทำให้เห็นรูปภาพบนเว็บไซต์เท่านั้น แต่เรายังสามารถปรับแต่งรูปภาพได้อีกด้วย ซึ่งจะทำให้เราแสดงรูปภาพบนเว็บไซต์ได้ในแบบที่เราต้องการ…
