สอนทำเว็บ ด้วย HTML

ภาพที่นำมาใช้ในการนำเสนอผ่านเครือข่ายอินเทอร์เน็ต ด้วยเอกสารเว็บ ควรใช้ภาพนามสกุล .GIF หรือ .JPG เท่านั้น โดยมีหลักการพิจารณาเลือก คือ ภาพที่มีสีน้อยๆ หรือภาพที่ต้องการทำพื้นให้โปร่งใส ควรจัดเก็บในฟอร์แมต .GIF และกำหนดค่าเพิ่มเติม (Option) เป็น Interlaced คือ ให้ภาพแสดงหยาบๆ แล้วค่อยๆ ละเอียด ในขณะที่ภาพที่ต้องการความคมชัด ความสดใส ควรจัดเก็บในฟอร์แมต .JPG และกำหนดคุณภาพ (Quality) ที่เหมาะสมกับภาพนั้นๆ ค่าแนะนำ คือ 4 - 6 หากต้องการให้ภาพแสดงหยาบๆ แล้วค่อยๆ ละเอียด ให้กำหนดค่าเพิ่มเติม (Option) เป็น Progressive ด้วย สำหรับความละเอียดของภาพ (Resolution) ควรใช้ค่า 72 dpi

ตัวอย่าง เปิดภาพตัวอย่างของ Photoshop 5.5 ชื่อ dune.tif มาจัดเก็บใหม่ด้วยฟอร์แมต และค่าต่างๆ ได้ผลดังนี้

ต้นฉบับ .TIF	1,061 KB
.JPG ค่า Quality = 8	44 KB
.JPG ค่า Quality = 3	17 KB
.GIF	102 KB

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

คำสั่งการนำเสนอไฟล์รูปภาพ

< img src="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" >

เราสามารถกำหนดคุณสมบัติของรูปภาพได้ โดยเราจะใส่ภายในคำสั่ง < IMG SRC > เพื่อที่จะทำให้รูปภาพสามารถใช้ร่วมกับข้อ ความหรือตัวอักษรและทำให้ เว็บเพจนั้นมีความน่าสนใจมากยิ่งขึ้น

< img src="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" alt= "ข้อความอธิบาย" align="top/middle/bottom/left/right" width="ค่าตัวเลข" height="ค่าตัวเลข" hspace="ค่าตัวเลข" vspace="ค่าตัวเลข" border="กำหนดเป็นตัวเลข" >

Alt= เป็นการกำหนดข้อความอธิบาย โดยจะปรากฎก็ต่อเมื่อนำเมาส์ลากมาที่รูปข้อความก็จะปรากฎ
Align = "top" เป็นการกำหนดข้อความที่อยู่ด้านบนของรูปภาพ
Align = "middle" เป็นการกำหนดข้อความที่อยู่กึ่งกลางของรูปภาพ
Align = "bottom" เป็นการกำหนดข้อความที่อยู่ด้านล่างของรูปภาพ
Align = "left" เป็นการกำหนดข้อความที่อยู่ด้านขวาของรูปภาพ
Align = "right" เป็นการกำหนดข้อความที่อยู่ด้านซ้ายของรูปภาพ
Width = การกำหนดขนาดความกว้างของรูปภาพ
Height = การกำหนดขนาดความสูงของรูปภาพ
Hspace = เป็นการกำหนดระยะเว้นขอบจากด้านซ้ายกับรูปภาพ - ในการแสดงข้อความล้อมรอบรูปนั้น เป็นวิธีที่ใช้กันมากกับรูปที่เป็นตัวสินค้าและมีคำอธิบายล้อมอยู่ข้างๆ แต่การที่ข้อความอยู่ใกล้กับรูปนั้นๆ มากไปอาจทำให้เพจนั้นดูแน่นไม่น่าอ่าน ดังนั้นแท็ก <IMG> จึงถูกออกแบบให้มีแอตทริบิวต์ VSPACE และ HSPACE เพื่อใช้กำหนดระยะห่างระหว่างรูปและข้อความที่ล้อมรูป โดยค่าที่กำหนดนั้นอาจใช้หน่วยที่เป็นพิกเซล หรือ กำหนดเป็นเปอร์เซ็นต์ของหน้าจอแทนก็ได้
Vspace = เป็นการกำหนดระยะเว้นขอบจากด้านบนกับรูปภาพ - ในการแสดงข้อความล้อมรอบรูปนั้น เป็นวิธีที่ใช้กันมากกับรูปที่เป็นตัวสินค้าและมีคำอธิบายล้อมอยู่ข้างๆ แต่การที่ข้อความอยู่ใกล้กับรูปนั้นๆ มากไปอาจทำให้เพจนั้นดูแน่นไม่น่าอ่าน ดังนั้นแท็ก <IMG> จึงถูกออกแบบให้มีแอตทริบิวต์ VSPACE และ HSPACE เพื่อใช้กำหนดระยะห่างระหว่างรูปและข้อความที่ล้อมรูป โดยค่าที่กำหนดนั้นอาจใช้หน่วยที่เป็นพิกเซล หรือ กำหนดเป็นเปอร์เซ็นต์ของหน้าจอแทนก็ได้
Border = เป็นการกำหนดเส้นกรอบของรูปภาพ - สำหรับการใส่เส้นขอบให้กับรูปใดๆ นั้น ให้ใช้แอตทริบิวต์ BORDER แล้วตามด้วยความหนาของเส้นขอบโดยมีหน่วยเป็นพิกเซล ซึ่งหากไม่กำหนดหรือกำหนดเป็นศูนย์ก็หมายความว่าไม่มีเส้นขอบนั่นเอง

คำสั่งที่นำรูปภาพมาเป็นพื้นหลัง

background = กำหนดรูปภาพ
bgproperties = fixed การกำหนดให้รูปภาพคงที่ จะทำให้รูปภาพไม่มีการเคลื่อนที่ตามเมื่อเลื่อนสกอรบาร์ เมื่อข้อมูลมีความยาวมากกว่า 1 หน้าจอ

การนำเสนอไฟล์วิดีโอ

การใส่ภาพเคลื่อนไหวใน Homepage ถือว่าเป็นการสร้างความน่าสนใจในการชมเว็บไซต์นั้นมาก เพราะนอกจากมีภาพที่สามารถเคลื่อนไหวได้แล้ว ยังสามารถมีเสียงประกอบภาพได้อีกด้วย เช่นเดียวกันการชมหนังในโทรทัศน์ เพียงแต่มาปรากฎใน Homepage ไฟล์ภาพเคลื่อนไหว (Video) ที่สนับสนุนบน Homepage ได้แก่ AVI (*.avi), MPEG (*.mpg), Movie (*.mov) เป็นต้น

loop เป็นการกำหนดจำนวนรอบในการแสดงผล การกำหนดการวนรอบ (loop) นั้นเราสามารถกำหนดเป็นตัวเลขแต่ถ้าเรากำหนดเป็นค่า infinite จะแสดงผลตลอดเวลา

การนำเสนอไฟล์เสียง

การใส่เสียงประกอบใน Homepage ถือว่าเป็นสิ่งที่สร้างความน่าสนใจอย่างหนึ่งให้กับ Homepage นั้น ซึ่งไฟล์รูปแบบของเสียงประกอบที่สนับสนุนได้แก่ MDI (*.mdi), AU (*.au), Real Audio (*.ram) และ WAVE (*.wav) เป็นต้น

ภาพกับการรอคอย

การกำหนดค่า ALT หรือ Alternate Text ก็เป็นวิธีช่วยให้นักท่องเว็บ ไม่รู้สึกเบื่อกับการรอคอยเวลาระหว่างโหลดข้อมูล เป็นที่ยอมรับกันแล้วว่า "ข้อความตัวอักษร จะโหลดได้ไวกว่าภาพ" ดังนั้นหากมีแทรกภาพในเอกสารเว็บ ควรกำหนดค่า ALT กำกับภาพทุกภาพด้วย โดยเพิ่ม Attribute ในแท็ก IMG ดังนี้