การแทรกและจัดการรูปภาพ
การทำเว็บเพจในหนึ่งหน้า นอกจากจะมีข้อความแล้วยังต้องประกอบด้วยรูปภาพ เพื่อเพิ่มความน่าสนใจ ให้กับเว็บเพจ นอกจากนี้แล้วรูปภาพยังสามารถสื่อความหมายได้ชัดเจนกว่าข้อความ ดังคำกล่าวที่ว่า "หนึ่งภาพแทนพันตัวอักษร" การใส่รูปภาพในเอกสาร HTML นั้นจะต้องเตรียมรูปภาพไว้ก่อน โดยใช้แท็ก (Tag) สำหรับแสดงผลรูปภาพดังนี้
รูปแบบแท็ก (Tag) การใส่รูปภาพ สำหรับแฟ้มรูปภาพที่จัดเก็บใน Folder เดียวกับแฟ้ม Html
<img src = "ชื่อภาพ.ส่วนขยาย">
ตัวอย่างโค้ด
ผลที่เเสดง
หากมีการจัดเก็บรูปภาพไว้ต่าง Folder กับ แฟ้ม Html เช่น ถ้าแฟ้มรูปภาพถูกจัดเก็บในไดร์ว D: ชื่อ Folder ต่อไปนี้ M3 , Web site , Picture จะต้องแสดงที่อยู่ของแฟ้มข้อมูลให้ชัดเจน
<img src = "ชื่อเส้นทาง (Path)\ชื่อภาพ.ส่วนขยาย">
ตัวอย่างโค้ด
ผลที่เเสดง
ตัวอย่างโค้ด
ความกว้าง width="ตัวเลขระบุความกว้าง (หน่วยเป็น Pixels)"
ความสูง height="ตัวเลขระบุความสูง (หน่วยเป็น Pixels)"
เส้นขอบ border="ตัวเลขระบุความหนาของเส้นขอบ (หน่วยเป็น Pixels)"
ตัวอย่างโค้ด
ความสูง height="ตัวเลขระบุความสูง (หน่วยเป็น Pixels)"
เส้นขอบ border="ตัวเลขระบุความหนาของเส้นขอบ (หน่วยเป็น Pixels)"
ตัวอย่างโค้ด
ผลที่เเสดง
จากตัวอย่าง จะแสดงภาพขนาด 200x150 pix. (หน่วยการแสดงผลภาพ แสดงเป็น Pixels) และมีขอบ หากไม่ต้องการให้แสดงเส้นขอบให้กำหนด border="0" (หากต้องการให้ขอบมีความหนามาก ระบุตัวเลขให้มาก)
การวางตำแหน่ง
การนำภาพมาแสดงในเวปเพจนั้นเป็นเพียงขั้นตอนแรก ๆ ต่อไปนี้เราต้องจัดภาพให้เข้ากับเนื้อหาที่มีอยู่ ใน HTML โดยมีรูปแบบคำสั่งดังนี้
Align ="รูปแบบการวางตำแหน่งของภาพ"
|
รูปแบบตัวอักษร
|
คำสั่งที่ใช้
|
Left
|
ภาพแสดงทางซ้ายโดยมีข้อความล้อมอยู่ทางขวา
|
Right
|
ภาพแสดงทางขวาโดยมีข้อความล้อมอยู่ทางซ้าย
|
Top
|
ขอบบนของภาพตรงกับส่วนบนข้อความ
|
Bottom
|
ขอบล่างของภาพตรงกับส่วนล่างสุดของข้อความ
|
Center
|
ตรงกลางของภาพตรงกับกึ่งกลางของข้อความ
|
<Img src=”100.jpg” align=” Left / Right / Top / Bottom / Center”>
ตัวอย่างโค้ด
ผลที่เเสดง
ที่มา
http://www.thainextstep.com/html/html_06.php
http://www.aw.ac.th/web_html/010.htm
http://www.siamzone.com/board/view.php?sid=3405335
http://www.aw.ac.th/web_html/010.htm
http://www.siamzone.com/board/view.php?sid=3405335
ไม่มีความคิดเห็น:
แสดงความคิดเห็น