คำสั่งการเเทรกรูปภาพ
| <html> <head> <title> Insert Images : การแทรกภาพ </title> </head> <body background="bgimage.gif"> ข้อความที่แสดงในส่วนเนื้อหา <img src="kerokero.gif"> </body> </html> |
ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ
ข้อความที่แสดงในส่วนเนื้อหา  |
หากเราต้องการแสดงรูปให้มีขนาดต่างจากขนาดจริงของภาพ ก็สามารถทำได้ด้วยการกำหนดเพิ่มในส่วนของความกว้าง ความยาวของรูปภาพ ดังตัวอย่าง ภาพแรกคือภาพขนาดจริง ภาพที่สองเป็นการลดขนาดลง และภาพที่สามเป็นการเพิ่มขนาดขึ้น
| <html> <head> <title> Insert Images : การกำหนดขนาดภาพ </title> </head> <body> แสดงการกำหนดขนาดภาพ<br> <img src="daffy.gif"><br> <img src="daffy.gif" width="50" height="51"><br> <img src="daffy.gif" width="150" height="153"><br> </body> </html> |
ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ
แสดงการกำหนดขนาดภาพ  |
| <html> <head> <title> Insert Images : ตำแหน่งและเส้นขอบรูปภาพ </title> </head> <body> <div align="center"> ตำแหน่งและเส้นขอบรูปภาพ<br> <img src="kerokero.gif" border="3"> </div> </body> </html> |
ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ
ตำแหน่งและเส้นขอบรูปภาพ |
นอกจากนี้แล้ว เรายังสามารถกำหนดให้มีการแสดงชื่อรูปภาพ หรือคำบรรยาย หรือรายละเอียดของรูปภาพได้เมื่อนำเมาท์ไปชี้บนรูปนั้น หรือในกรณีที่ผู้ชมบางคนกำหนดให้บราวเซอร์ไม่ต้องแสดงผลรูปภาพ เพื่อความรวดเร็วในการชมเว็บ รูปจะถูกแทนที่ด้วยชื่อ ที่เรียกว่า Alternative text โดยใช้วิธีการเพิ่มคุณสมบัติลงไปในคำสั่งแทรกรูปภาพ ดังตัวอย่าง
<img src="kerokero.gif" border="3" alt="รูปกบ kero">
 END : สรุปคำสั่งที่ใช้ในบทนี้ |
|
ไม่มีความคิดเห็น:
แสดงความคิดเห็น