Course Content
วิชาคอมพิวเตอร์เพื่ออาชีพ 1 (ง30241) ชั้นมัธยมศึกษาปีที่ 4 แผนการเรียนศิลป์คำนวณ/สหศิลป์ ภาคเรียนที่ 1 ปีการศึกษา 2564
About Lesson

ชนิดของรูปภาพ
        การนำรูปภาพมาใส่ในเวบเพจเป็นส่วนหนึ่งที่สร้างความน่าสนใจให้กับเวบเพจเป็นอย่างมาก โดยเฉพาะการสร้างเวบเพจในปัจจุบันก้าวไปถึงขั้นมีการตอบโต้กับผู้ที่เข้าชมเวบเพจ หรือที่เรียกกว่า อินเตอร์แอ็คทีฟ (Interactive) การนำรูปภาพในใช่ในเวบเพจยงิ่ มีความจำเป็นมากยิ่งขึ้น
        ในการแสดงผลในเวบเพจนั้น ภาพในแบบที่เหมาะสมคือภาพในแบบ GIF หรือ JPEG เนื่องจากภาพที่ได้จะมีขนาดเล็ก ทำให้แสดงผลได้อย่างรวดเร็ว
        1. Graphics Interchange Format (GIF) เป็นภาพที่มีการบีบอัดข้อมูล ภาพจึงมีขนาดเล็ก แต่สีที่รูปภาพในแบบ GIF นั้นสามารถแสดงผลได้เพียง 256 สี จึงเหมาะกับภาพในลักษณะภาพวาด ไฟล์ภาพแบบ GIF มีอยู่ด้วยกัน 2 ชนิด คือ
            – GIF87a เป็นไฟล์ GIF ทั่วไป
            – GIF89a เป็นไฟล์ GIF ที่สามารถเคลื่อนไหวได้ หรือที่เรียกว่า GIF Animation ไฟล์ภาพแบบ GIF ทั้งสองชนิดสามารถปรับการแสดงผลได้ 3 แบบ ได้แก่
             – แบบ Interlaced จะทำการแสดงภาพออกเป็นช่วง ๆ แทนที่จะแสดงไล่ลงมาจากบนลงล่าง
ตามปกติ
             – แบบ Progressive จะทำการแสดงภาพแบบหยาบ ๆ ก่อน แล้วค่อย ๆ ชัดขึ้น
             – แบบ Transparent Background จะแสดงภาพโดยไม่มีพื้นฉากหลัง
        2. Joint Photographic Experts Group (JPEG หรือ JPG) เป็นรูปภาพที่ถูกบีบอัดข้อมูลไว้ โดยใช้เทคนิค Lossy ซึ่งคุณภาพของภาพที่ได้จะมีคุณภาพลดลงตามขนาดที่บีบอัดข้อมูล แต่ไม่จำกัดจำนวนสี ไฟล์ภาพแบบ JPEG เหมาะสำหรับภาพในลักษณะภาพถ่าย

คำสั่งในการใส่รูปภาพในเวบเพจ (Image)
        เราจะใช้แท็ก <IMG> ในการนำภาพเข้ามาแสดงผลในเวบเพจ โดยมีรูปแบบดังนี้

        <IMG SRC = “ไฟล์ภาพ”>

        สำหรับ Attributes ที่ใช้ระบุตำแหน่งของรูปภาพคือ SRC หรือ Source เราสามารถที่จะชี้ตำแหน่งที่เก็บภาพได้ เช่น <IMG SRC=”http://www.north.rit.ac.th/image/logo.gif”> เป็นต้น

ตัวอย่าง image1.html
<HTML>
<HEAD><TITLE> Image </TITLE></HEAD>
<BODY>
<CENTER>
     <IMG SRC=”mypic.jpg”>
</CENTER>
</BODY>
</HTML>

        ถ้าเราต้องการใส่คำอธิบายภาพ ภาษา HTML มี Attributes ที่ช่วยทำในส่วนนี้ คือ ALT (Alternative Text) ประโยชน์สำหรับ Attributes นี้คือ เมื่อผู้ใช้เวบบราวเซอร์ที่ไม่รองรับการแสดงผลในแบบกราฟฟิค ในส่วนของภาพจะมีข้อความขึ้นมาอธิบายในส่วนนั้น โดยมีรูปแบบดังนี้

        <IMG SRC = “ไฟล์ภาพ” ALT = “คำอธิบาย”>

ตัวอย่าง image2.html
<HTML>
<HEAD><TITLE> Image </TITLE></HEAD>
<BODY>
<CENTER>
     <IMG SRC=” mypic.jpg” ALT=”รูปใครเอ่ย”>
</CENTER>
</BODY>
</HTML>

การนำรูปภาพทำเป็นพื้นหลัง
        เราสามารถนำรูปภาพไปประกอบเป็นพื้นหลังหรือที่เรียกว่าวอลล์เปเปอร์ (Wall Paper) ของเวบเพจได้โดยกำหนดในส่วนของแท็ก Body ซึ่งใช้ Attributes Background โดยมีรูปแบบดังนี้

        <BODY Background = “ไฟล์ภาพ”>

ตัวอย่าง image_background.html
<HTML>
<HEAD><TITLE> Wall Paper </TITLE></HEAD>
<BODY Background=”logo_bg.gif”>
<CENTER>
     We are students
</CENTER>
</BODY>
</HTML>