ไฟล์รูปภาพมีอยู่มากมายหลายชนิด แต่เรานิยมและสามารถนำมาใส่ลงในเอกสาร HTML
ได้จะมีอยู่ด้วยกัน 3 ชนิดคือ
1) รูปภาพชนิด GIF (Graphics Interchange Format)
คือรูปแบบแฟ้มภาพนิ่งและแฟ้มภาพเคลื่อนไหว ถูกออกแบบโดย Compuserve
เพื่อใช้กับคอมพิวเตอร์
ต่างแบบต่าง รุ่นได้ ทำให้เหมาะสำหรับการนำมาใช้ในเวปเพจ เพราะต้องแสดงได้บนเครื่องที่แตกต่างกัน
แต่ข้อจำกัดของ GIF ที่สำคัญก็คือ มันสามารถใช้สีได้สูงสุดเพียงครั้งละ 256 สี เท่านั้น
2) รูปภาพชนิด JPEG หรือ JPG (Joint Photographic Experts Group)
ไฟล์ภาพนามสกุล JPEG
หรือที่หลายคนคุ้นกับคำว่า JPG เป็นไฟล์แบบมาตรฐานที่ได้รับความนิยม
มากที่สุดเลยก็ว่าได้ เพราะไม่เพียงแค่ได้ภาพที่คมชัดเท่านั้น แต่ยังได้ไฟล์ขนาดเล็ก ที่ช่วยประหยัดพื้นที่จัดเก็บ
ได้เป็นอย่างดี แถมเหมาะกับคนที่ชอบอัพโหลดภาพบนโซเชียลและแชร์ให้เพื่อน ๆ ดู รวมถึงการปริ้นต์ภาพด้วย ถึงแม้ว่าจะเป็นไฟล์ที่รองรับการใช้งานร่วมกับโปรแกรมหรืออุปกรณ์เกี่ยวกับภาพแทบทุกชนิด แต่ก็ยังมีข้อเสีย
ด้วยก็คือไม่รองรับภาพโปร่งใสนั่นเอง
3) รูปภาพชนิด PNG (Portable Network Graphics)
เป็นไฟล์รูปภาพที่นำคุณสมบัติเด่นของ JPG และ GIF มารวมเข้าไว้ด้วยกันโดยรองรับสีที่มีจำนวนมาก
ถึง 24 บิต เหมืนกับ JPG อีกทั้งยังสามารถทำพื้นหลังให้เป็นแบบโปร่งใสเช่นเดียวกับ GIF ได้
้
ในขณะเดียวกันในเว็บเพจส่วนใหญ่เรามักจะพบไฟล์ 3 ชนิดนี้ เนื่องจากเป็นไฟล์ที่บีบอัดข้อมูล
ทำให้ไฟล์ได้มีขนาดเล็ก ซึ่งช่วยให้แสดงผลได้รวดเร็ว เหมาะกับการนำมาใส่ในเว็บเพจ
1. ส่วนประกาศ <HTML> </HTML>
เป็นส่วนที่กำหนดให้ Web Browser ทราบว่าเอกสารนี้ใช้ภาษา HTML โดยมี <HTML> เป็นคำสั่งเริ่มต้นในการเขียน โปรแกรมและคำสั่ง </HTML> เป็นการสิ้นสุดโปรแกรม
2. ส่วนหัวเรื่อง <HEAD> </HEAD>
เป็นส่วนที่เขียนขึ้นเพื่อควบคุมส่วนหัวของโปรแกรม และจะแสดงผลข้อความบนไตเติลบาร์ของบราวเซอร์ โดยในส่วนนี้จะมี คำสั่ง <TITLE> </TITLE> กำกับอยู่ด้วยเสมอ
3.
ส่วนเนื้อหา <BODY> </BODY>
เป็นส่วนเนื้อหาของโปรแกรม ภายในคำสั่งนี้จะแสดงผลออกไปยังหน้า Web Browser เช่น ข้อความ รูปภาพ เสียง วิดีโอ หรือไฟล์ต่างๆ โดยมี <BODY> เป็นคำสั่งเริ่มต้นของโปรแกรมและคำสั่ง </BODY> เป็นการสิ้นสุดโปรแกรม
เรื่องที่ 1.2 แท็กต่างๆ ในภาษา HTML
เป็นคนส ใน
ซึ่งแท็ก (Tag)
< >
แท็ก (Tag) คือ คำสั่งที่ใช้ควบคุมการแสดงผลในภาษา HTML โดยจะถูกกำหนดอยู่ในเครื่องหมาย นั้นจะมีอยู่ด้วยกันหลายชนิดและมีหน้าที่แตกต่างกันออกไป
รูปแบบของการใช้คำสั่ง แท็ก (Tag) มี 2 รูปแบบ ดังนี้ 1. แท็กเดี่ยว คือ แท็กที่เป็นแท็กเปิดอย่างเดียว ก็สามารถทำงานได้โดยไม่ต้องมีแท็กปิด เช่น <p>,<br>,<hr> เป็นต้น
ตารางการใช้งานแท็กเดี่ยว
แท็ก
การใช้งาน
ใช้เมื่อต้องการขึ้นย่อหน้า (paragraph) ใหม่
<p>
ใช้เมื่อต้องการขึ้นบรรทัดใหม่ (line break)
<br>
<hr>
ดใช้เมื่อต้องการสร้างเส้นแนวนอน (horizontal line)
<img src= "image">
ใช้เมื่อต้องการใส่รูปภาพ ซึ่ง image คือชื่อไฟล์รูปภาพ
2. แท็กคู่ คือ แท็กที่เป็นแท็กเปิดและปิดคู่กัน คือมีส่วนเริ่มต้นและส่วนจบของคำสั่งนั้นๆ โดยแท็กที่เป็นส่วนจบจะมี เครื่องหมาย / อยู่ด้านหน้า เช่น <html> </html>, <b> </b>,<center> </center> เป็นต้น
4
8
CSS Backgrounds กำหนดพื้นหลังด้วย Css เป็นการจัดหน้าตาหรือรูปแบบของเว็บเพจเพื่อให้ดึงดูดความสนใจให้แก่ผู้ชื่นชมเป็นเรื่องที่สำคัญมากในการสร้างเว็บเพจนอกจากมีการตกแต่งตัวอักษรข้อความและสามารถเพิ่มการใส่รูปภาพของเว็บเพจ ในการกำหนดพื้นหลังให้กับเว็บเพจสามารถใช้รูปภาพหรือการใช้สีได้ โดยสามารถกำหนดสีข้อความได้ ถ้าหากพื้นหลังเป็นสีเข้มให้ข้อความเป็นสีอ่อน แต่ถ้าหากพื้นหลังเป็นที่อ่อน ก็ให้ข้อความเป็นสีเข้มได้ ซึ่งการใส่พื้นหลังรูปภาพหรือการใส่สี สามารถกำหนดตำแหน่งพื้นหลังได้
กำหนดคำสั่ง Background
- Background-coler
กำหนดสีของพื้นหลัง
- background-image กำหนดรูปมาใช้เป็นพื้นหลัง
- background-repeat กำหนดคำสั่งจะคู่กับ background-image เพื่อจะสั่งให้พื้นหลังนำรูปมาใช้ซ้ำ
- background-attachment กำหนดคำสั่งก็สามารถใช้กับ background-image ได้เช่นเดียวกัน เพื่อกำหนดรูปให้อยู่กับที่หรือเคลื่อนตาม
- background-position คำสั่งนี้สามารถใช้กับ background-image ได้เช่นเดียวกันโดยเป็นการกำหนดตำแหน่งเริ่มต้นที่รูปนี้จะไปอยู่
- background-size การกำหนดขนาดพื้นหลัง
ในการกำหนดรูปแบบพื้นหลังด้วย css เพื่อให้เว็บเพจมีสันมีความน่าสนใจ ในการเขียนโปแกรมเว็บไซต์ต้องมีการออกแบบเว็บไซต์ให้สวยงาม การจัดสัดส่วน layout ของเว็บเพจ สามารถใช้กำหนส่วนต่าง ๆของเว็บไซต์ได้อีกด้วย ในการออกแบบ CSS เป็นภาษา Style Sheets โดย Style Sheets ชุดเดียวสามารถใช้กำหนดรูปแบบการแสดงผลให้เอกสาร HTML ทั้งหน้า หรือทุกหน้ามีผลเหมือนกันได้ จึงทำให้เวลาที่มีการแก้ไขก็จะแก้ไขได้ง่ายขึ้นเพียงแก้ไข Style Sheets ที่ใช้งานเพียงชุดเดียวเท่านั้น ทำให้เว็บไซต์มีมาตราฐานเพราะการใช้งาน CSS นั้นจะทำให้การแสดงผลในสื่อต่าง ๆ ถูกปรับเปลี่ยนไปได้อย่างเหมาะสม เช่น การแสดงผลบนหน้าจอ
อ้างอิง
CSS พื้นหลัง.[ออนไลน์].เข้าถึงได้จาก //zakoschool.herokuapp.com/lesson/css/background
[CSS] วิธีใช้ background เบื้องต้น.[ออนไลน์].เข้าถึงได้จาก//rabbitinblack.com/2011/12/css-background/
CSS Backgrounds กำหนดพื้นหลังด้วย CSS.[ออนไลน์].เข้าถึงได้จาก//www.dcrub.com/css-backgrounds