ภาษา Html

การนำรูปภาพมาใส่โนโฮมเพจ

การนำรูปภาพมาใส่โนโฮมเพจ

รูปแบบคำสั่ง : <img src="ชื่อรูปภาพ.นามสกุลภาพ">

คำอธิบาย : เป็นคำสั่งที่ใช้ในการใส่รูปภาพ โดยภาพที่แสดงจะมีขนาดเท่ากับรูปปกติ หากเราต้องการการจัดรูปแบบรูปภาพลักษณะต่าง ๆ ต้องมีคำสั่งเพิ่มเติมอีก คำสั่ง นี้จะไม่มี คำสั่งปิดคือ </img>

คำสั่งเพิ่มเติมที่ใช้ร่วมกับคำสั่งนี้อีกดังนี้

height=ความสูงของภาพ(Pixel) : เป็นการกำหนดความสูงของภาพ เช่น <img src="sura.jpg" height=50>
width=ความกว้างของภาพ (Pixel) : เป็นการกำหนดความกว้างของภาพ เช่น <img src="sura.jpg" width=100>

align=left หรือ center หรือ Right หรือ top หรือ bottom : เป็นการกำหนดตำแหน่งของรูปว่าจะให้อยู่ด้านซ้าย ขวา หรือ ตรงกลาง ส่วน top กับ bottom ใช้จัดตำแหน่งอักษร เช่น จัดรูปให้อยู่ด้านขวา <img src="sura.jpg" align=right>

ตารางแสดงคำสั่งการจัดตำแหน่งของภาพ

การแสดงผล	คำสั่งที่ใช้กำหนดตำแหน่งข้อความและรูปภาพ	ตำแหน่งที่แสดงผลข้อความและรูปภาพ
1. แบบแนวตั้งเป็นคำสั่งที่ใช้กับรูปภาพ	ALIGN = "LEFT"	ตำแหน่งซ้ายของจอภาพ
1. แบบแนวตั้งเป็นคำสั่งที่ใช้กับรูปภาพ	ALIGN = "RIGHT"	ตำแหน่งขวาของจอภาพ
2. แบบแนวนอนเป็นคำสั่งที่ใช้กับข้อความ	ALIGN = "TOP","TEXTTOP"	ตำแหน่งบนสุดของรูปภาพ
	ALIGN = "MIDDLE","ABSMIDDLE"	ตำแหน่งกึ่งกลางของรูปภาพ
	ALIGN = "BOTTOM","BASELINE","ABSBOTTOM"	ตำแหน่งล่างสุดของรูปภาพ

border=ความหนาของเส้นขอบ :เป็นการใส่ขอบให้รูปภาพ โดยขนาดของขอบเราสามารถกำหนดได้ เช่น <img src="sura.jpg" border=3>

ตัวอย่าง : การนำรูปภาพมาใส่ในโฮมเพจ
* ก่อนจะทำลองตัวอย่างนี้ให้นำรูปภาพที่มีอยู่มาใส่ไว้ใน folder เดียวกันกับไฟล์ที่เราใช้งานอยู่ ในตัวอย่างนำไฟล์ชื่อ "WOW.JPG" มาทดสอบ*

<HTML>
<HEAD>
<TITLE> การนำภาพมาใส่ในโฮมเพจ</TITLE>
</HEAD>
<BODY bgcolor=white>

รูปธรรมดาที่ไม่ได้ตกแต่ง : <img src=wow.jpg> 
กำหนดความกว้างของรูป=300 : <img src="wow.jpg" width=300> 
กำหนดความสูงของรูป=200 : <img src="wow.jpg" height=200> 
กำหนดเส้นของของรูป=5: <img src="wow.jpg" border=5> 
กำหนดความกว้างของรูป=300 ยาว=300 เส้นขอบ=5 : <img src="wow.jpg" width=300 height=200 border=5>

</BODY>
</HTML>

Click เพื่อดูผลลัพธ์

ตัวอย่าง : การจัดตำแหน่งรูปภาพ
* การจัดตำแหน่งรูปภาพที่จะสำพันธ์กับตำแหน่งของอักษรหรือข้อมูลที่อยู่ต่อจากคำสั่งนี้ เช่น เราต้องการจัดให้รูปอยู่ด้านซ้าย และมีข้อความอยู่ด้านขวาของรูป ดังตัวอย่าง

<HTML>
<HEAD>
<TITLE> การจัดตำแหน่งภาพ</TITLE>
</HEAD>
<BODY bgcolor=white>

<IMG SRC = "wow.gif" ALIGN = "TOP"> ข้อความนี้อยู่ส่วนบนของรูปภาพ (TOP) แต่ถ้าข้อความยาวจะถูกตัดออกมาแสดงผลไว้ที่ส่วนล่างของรูป ถ้าต้องการแสดงผลให้ข้อความที่ยาวมากอยู่ในบรรทัดต่อมาโดยไม่ถูกตัดมาไว้ส่วนล่างให้เปลี่ยน ALIGN จาก TOP เป็น LEFT แทน <HR>

 <IMG SRC = "wow.gif" ALIGN = "MIDDLE"> ข้อความนี้อยู่ส่วนกลางของรูปภาพ (MIDDLE) <HR>

 <IMG SRC = "wow.gif" ALIGN = "BOTTOM"> ข้อความนี้อยู่ส่วนล่างของรูปภาพ (BOTTOM) <HR>

 <IMG SRC = "wow.gif" ALIGN = "LEFT"> เป็นการกำหนดรูปภาพให้ชิดซ้าย และ ข้อความนี้อยู่ส่วนบนของรูปภาพ (TOP) แต่ถ้าข้อความยาวไม่จะถูกตัดออกมาเหมือนกันการใช้ ALIGN = TOP , MIDDLE หรือ BOTTOM ข้อความจะแสดงออกมาในบรรทัดต่อไปโดยอัตโนมัติ <HR> 

 <IMG SRC = "wow.gif" ALIGN = "RIGHT"> เป็นการกำหนดรูปภาพให้ชิดขวา และ ข้อความนี้อยู่ส่วนบนของรูปภาพ (TOP) แต่ถ้าข้อความยาวไม่จะถูกตัดออกมาเหมือนกันการใช้ ALIGN = TOP ,MIDDLE หรือ BOTTOM ข้อความจะแสดงออกมาในบรรทัดต่อไปโดยอัตโนมัติ

</BODY>
</HTML>

Click เพื่อดูผลลัพธ์

แหล่งข้อมูล http://www.rin.ac.th/