0 การสร้างเว็บไซต์ 0
1 การสร้างเว็บไซต์ 1 หน่วยที่ 5 การแทรกรูปภาพในเว็บเพจ เอกสารเว็บเพจที่เขียนด้วยภาษา HTML นอกจากการแสดงเนื้อหาที่เป็นข้อความแล้วยังสามารถ แสดงเนื้อหาในลักษณะรูปภาพได้ด้วย ซึ่งการนำรูปภาพมาตกแต่งทำให้เว็บเพจมีความสวยงาม สะดุดตาและ น่าสนใจมากยิ่งขึ้น ซึ่งไฟล์รูปภาพที่ใช้ไม่ควรมีขนาดใหญ่เกินไปเพราะจะทำให้การเรียกดูเว็บเพจใช้เวลานาน อีกทั้งการเลือกประเภทของไฟล์รูปภาพมีผลต่อการแสดงผลในหน้าเว็บเพจเช่นกัน การสร้างเว็บเพจนอกจากจะมีข้อความแล้วยังต้องประกอบด้วยรูปภาพเพื่อเพิ่มความน่าสนใจให้กับ เว็บเพจ และรูปภาพยังสามารถสื่อความหมายได้ชัดเจนกว่าข้อความ รูปภาพกราฟิกมีรูปแบบต่าง ๆ ซึ่งแต่ละ ชนิดจะมีความแตกต่างของการใช้งานและขนาดไฟล์ในการจัดเก็บ จำนวนสี ซึ่งส่วนใหญ่จะใช้รูปภาพแบบ GIF ไฟล์นามสกุล gif และแบบ JPEG ไฟล์นามสกุล jpg) และต้องเลือกขนาดให้เหมาะสมไม่ควรใหญ่เกินไปเพราะ จะมีผลในการโหลดเว็บเพจ ซึ่งไฟล์รูปภาพมีลักษณะการนำมาใช้ที่แตกต่างกันดังนี้ 1. GIF (Graphic Interchange Format) เป็นฟล์รูปภาพที่มีลักษณะเป็นลายเส้น ข้อความตัวอักษร หรือภาพการ์ตูนที่มีสีไม่มากนักเพราะไฟล์ GIF มีค่สีสูงสุดเพียง 256 สี มีลักษณะพื้นหลังโปร่งใส ไฟล์ประเภท นี้มีไฟล์นามสกุลเป็น gif 2. JPG (Joint Photographic Experts Group) เป็นไฟล์รูปภาพที่สามารถแสดงผลของสีได้สูงถึง 16.7 ล้านสี เหมาะสำหรับภาพที่มีเฉดสีมาก เช่น ภาพถ่าย และยังสามารถบีบอัดไฟล์ภาพให้มีขนาดเล็กลงได้ แต่คุณภาพจะลดลง ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น jpeg หรือ jps 3. PNG (Portable Network Graphic) เป็นรูปแบบไฟล์ภาพที่พัฒนาขึ้นมาทดแทนรูปแบบแฟ้มแบบ ไฟล์ gif ที่สนับสนุนระบบสีหลายรูปแบบทั้ง 8 Bit Indexed Color, 16 Bit Grayscale และ 24 Bit TrueColor มีการบีบอัดข้อมูลแบบไม่มีการสูญเสียบางส่วนของภาพ นอกจากนี้ยังมีระบบควบคุมค่า Gamma และความโปร่งใสในตัวเองแต่ไฟล์ภาพประเภทนี้จะมีขนาดไฟล์ใหญ่กว่าภาพ JPG มาก จึงใช้กับภาพขนาดเล็ก แต่มีการใช้สีมาก เช่น ภาพไอคอน ไฟล์ประเภทนี้มีนามสกุล .png ในการนำรูปภาพมาใช้ในเว็บเพจจะต้อง จัดเตรียมไฟล์รูปภาพไว้ เพื่อการระบุเส้นทางการเข้าถึงไฟล์ภาพนั้น ๆให้ถูกต้อง ดังเช่น การบันทึกไฟล์เว็บเพจ ไว้ที่เดียวกับไฟล์รูปภาพ สามารถระบุชื่อไฟล์รูปภาพนั้นได้ทันทีและถ้าบันทึกไฟล์รูปภาพไว้โฟลเดอร์ images การอ้างถึงไฟล์รูปภาพจะต้องระบุดังนี้ <body background=“images/pict01.jpg”>
2 การสร้างเว็บไซต์ 2 5.1 การแทรกรูปภาพในเว็บเพจ การแทรกรูปภาพในเว็บเพจจะใช้คำสั่ง <img> พร้อมกับระบุชื่อไฟล์รูปภาพที่จะนำมาแสดง โดยมีรูปแบบ คำสั่งดังนี้ <img src = “ชื่อไฟล์รูปภาพ”> ชื่อไฟล์รูปภาพจะต้องเป็นไฟล์รูปภาพที่สามารถแสดงผลในโปรแกรมเว็บบราว์เซอร์ได้รวมถึงไฟ ล์ ภาพเคลื่อนไหวแบบ Gif Animation ตัวอย่างที่ 5.1 <IDOCTYPE html> <html> <head> <title> การแทรกรูปภาพบนเว็บเพจ</title> <meta charset=“UTF-8”> </head> <body> <img src=“vec.jpg”> </body> </html>
3 การสร้างเว็บไซต์ 3 โดยปกติหากไม่กำหนดขนาดของรูปภาพที่ต้องการแสดง โปรแกรมเว็บเบราว์เชอร์จะแสดงรูปภาพ ตามขนาดที่แท้จริงของรูปภาพ ในกรณีที่ไฟล์รูปภาพอยู่คนละโฟลเดอร์กับไฟล์เว็บเพจ การใช้งานรูปภาพจะต้องมีการระบุชื่อของได เร็กทอรีตามด้วยชื่อไฟล์ เช่น ไฟล์รูปภาพชื่อ vec.jpg อยู่ในโฟลเดอร์ images ซึ่งอยู่คนละโฟลเดอร์กับไฟล์ เว็บเพจ สามารถเขียนใต้เป็น <img src=“/images/vec.jpg > แต่ถ้าไฟล์รูปภาพอยู่ในโฟลเดอร์เดียวกับไฟล์ เว็บเพจ สามารถเขียนได้เป็น <img src=“vecjpg”> 5.2 การใส่ข้อความกำกับรูปภาพ นอกจากการแทรกรูปภาพในเว็บเพจแล้ว เรายังสามารถกำหนดให้มีการแสดงชื่อรูปภาพ คำบรรยาย หรือรายละเอียดของรูปภาพได้เมื่อนำเมาส์ไปชี้บนรูปภาพนั้น หรือในกรณีที่กำหนดให้โปรแกรมเว็บเบราว์เซอร์ ไม่ต้องแสดงรูปภาพเพื่อความรวดเร็วในการชมเว็บ รูปภาฬนั้นจะถูกแทนที่ด้วยชื่อที่เรียกว่า Alternative Textโดยใช้การเพิ่มคุณสมบัติลงไปในคำสั่งแทรกรูปภาพการใส่ข้อความกำกับรูปภาพควรใส่ในกรณีที่ กำหนดให้โปรแกรมเว็บบราว์เชอร์ไม่ต้องโหลดรูปภาพมาแสดงจะมีข้อความกำกับรูปภาพปรากฎขึ้นมาแทน ซึ่งผู้ใช้สามารถอ่านคำบรรยายเพื่อให้ทราบว่ารูปภาพนั้นคืออะไร เพราะข้อความกำกับรูปภาพจะปรากฎใน ขณะที่ภาพกำลังโหลดอยู่ทำให้ผู้ใช้ที่รออยู่ทราบว่าภาพนั้นคืออะไรก่อนที่รูปภาพจะถูกโหลดมาครบ ด้วยการ ใช้แอททริบิวต์ alt โดยมีรูปแบบคำสั่งดังนี้ <img src=“ชื่อไฟล์รูปภาพ” alt=“ข้อความกำกับรูปภาพ”> แอททริบิวต์ alt เป็นการใส่ข้อความอธิบายรูปภาพซึ่งจะปรากฎเมื่อนำเมาส์มาขี้ที่ตำแหน่งของ รูปภาพช่วยให้ทราบข้อมูลระหว่างการโหลครูปภาพ <!DOCTYPE html> <html> <head> <title>การแทรกรูปภาพบนเว็บเพจ</title> <meta charset=“UTF-8”> </head> <body> <img src=“vec.jpg”alt=“สำนักงานคณะกรรมการการอาชีวศึกษา”> </body> </html>
4 การสร้างเว็บไซต์ 4 5.3 การกำหนดขนาดรูปภาพ การกำหนดขนาดของรูปภาพเป็นการทำให้รูปภาพในเว็บเพจมีการแสดงผลในขนาดที่แตกต่างกัน ตามที่ต้องการ โดยใช้แท็ก <img> มีรูปแบบคำสั่งดังนี้ <img scr=“ชื่อไฟล์รูปภาพ” width=“ค่าความกว้าง” height=“ค่าความสูง”> โดยการกำหนดความกว้างและความสูงของรูปภาพสามารถกำหนดได้ 2 รูปแบบ คือ 5.3.1 การกำหนดค่าที่แน่นอน มีหน่วยเป็นพิกเซล เช่น width = “300” หมายถึง การกำหนดให้ รูปภาพมีความกว้าง 300 พิกเซล ซึ่งการกำหนดค่าด้วยวิธีนี้จะมีผลทำให้รูปภาพมีขนาดคงที่ไม่ว่าจะย่อหรือ ขยายการแสดงผลจะไม่มีผลต่อขนาดของรูปภาพ 5.3.2 การกำหนดค่าเป็นสัดส่วนหรือร้อยละ โดยเปรียบเทียบกับส่วนการแสดงผล เช่น width= “30%”หมายถึงการกำหนดให้รูปภาพมีความกว้าง 30% ของส่วนการแสดงผล และเมื่อมีการย่อหรือขยาย การแสดงผลจะทำให้ขนาดของรูปภาพย่อและขยายตามสัดส่วนของเว็บเพจแต่จะไม่สามารถใช้ได้กับแอททริ บิวท์ height ตัวอย่างที่ 5.3 <!DOCTYPE html> <html> <head> <title> การปรับขนาดรูปภาพ</title> <meta charset=“UTF-8”> </head> <body>แสดงการกำหนดขนาดภาพ<br> <img src=“vec.jpg”> <img src=“vec.jpg” width=“250* height=“250”> /body> </html>
5 การสร้างเว็บไซต์ 5 5.4 การใส่กรอบให้รูปภาพ การใส่กรอบให้รูปภาพเป็นการทำให้รูปภาพมีเส้นขอบเพื่อใช้เน้นรูปภาพหรือแยกส่วนที่เป็นรูปภาพ จากข้อความมีรูปแบบคำสั่งดังนี้ <img scr=“ชื่อไฟล์รูปภาพ” border=“ขนาดความหนาของกรอบ”> โดยที่ border เป็นแอทริบิวต์ที่ใช้ในการกำหนดขนาดกรอบของรูปภาพ โดยมีค่าเป็นตัวเลขตั้งแต่ 0-10 ตัวอย่างที่ 5.4 <!DOCTYPE html> <html> <head> <title>การใส่กรอบให้กับรูปภาพ</title> <meta charset=“UTF-8”> </head> <body> <img src=“vec.jpg” border=“1”> </body> </html>
6 การสร้างเว็บไซต์ 6 5.5 การจัดตำแหน่งข้อความและรูปภาพ การจัดตำแหน่งข้อความและรูปภาพ เป็นการจัดตำแหน่งให้รูปภาพเข้ากับข้อความที่แสดงบนเว็บเพจ ด้วยการใช้แอททริบิวท์ align ของแท็ก <Img> มีรูปแบบคำสั่งดังนี้ <img src=“ชื่อไฟล์รูปภาพ” align=ตำแหน่งของรูปภาพ”> โดย alignเป็นแอททริบิวท์ที่ใช้ในการจัดตำแหน่งข้อความและรูปภาพ มีรายละเอียดดังนี้ left จัดตำแหน่งรูปภาพด้านซ้ายของข้อความ right จัดตำแหน่งรูปภาพด้านขวาของข้อความ top จัดตำแหน่งรูปภาพด้านซ้ายของข้อความ โดยบรรทัดแรกของข้อความจะแสดงใน ระดับเดียวกันกับขอบด้านบนของรูปภาพ middle จัดตำแหน่งรูปภาพด้านซ้ายของข้อความ โดยบรรทัดแรกของข้อความจะแสดงใน ระดับกึ่งกลางความสูงของรูปภาพ bottom จัดตำแหน่งรูปภาพด้านช้ายของข้อความ โดยบรรทัดแรกของข้อความจะแสดงใน ระดับเดียวกันกับขอบด้านล่างของรูปภาพซึ่งเป็นค่าเริ่มต้นของการจัดตำแหน่งข้อความและรูปภาพ
7 การสร้างเว็บไซต์ 7 ตัวอย่างที่ 5.5 <!DOCTYPE html> <html> <head> <title>การจัดตำแหน่งข้อความและรูปภาพ</title> <meta charset=“UTF-8”> </head> <body> <p><img src=“vec.jpg” align=“left” >สำนักงานคณะกรรมการการอาชีวศึกษา</p> <p><img src=“vec.jpg” align=“right” >สำนักงานคณะกรรมการการอาชีวศึกษา</P> <p><img src=“vec.jpg” align=“top” >สำนักงานคณะกรรมการการอาชีวศึกษา</p> <p><Img src=“vec.jpg” align=“middle” >สำนักงานคณะกรรมการการอาชีวศึกษา</p> <p><img src=“vec.jpg” align=“bottom” >สำนักงานคณะกรรมการการอาชีวศึกษา</p> /body> <html>
8 การสร้างเว็บไซต์ 8 5.6 การใช้รูปภาพเป็นพื้นหลัง การใช้รูปภาพเป็นพื้นหลังเป็นการตกแต่งหน้าเว็บเพจตัวยรูปภาพที่แสดงเป็นพื้นหลังของเว็บเพจ โดย ใช้ภาพมาเรียงต่อกันคล้ายการวางแผ่นกระเบื้องสามารถทำได้ด้วยการกำหนดแอทริบิวต์ Background ใน แท็ก<body> มีรูปแบบคำสั่งดังนี้ <body background =“ชื่อไฟล์รูปภาพ”> การใช้รูปภาพเป็นพื้นหลังนิยมใช้ไฟล์ประเภท “*gif หรือ “*jpg โดยโปรแกรมเว็บเบราว์เชอร์จะนำ รูปภาพเหล่านั้นมาเรียงต่อกันจนเต็มหน้าจอภาพของการแสดงผลโดยอัตโนมัติ ตัวอย่างที่ 5.6 <!DOCTYPE html> <html> <head> <title>การใช้รูปภาพเป็นพื้นหลัง</title> <meta charset=“UTF-8”> </head> <body background=“bgPict.jps”> </body> </html>
9 การสร้างเว็บไซต์ 9 ในกรณีที่เนื้อหาที่แสดงในหน้าเว็บเพจมีความต่อเนื่องหลายหน้า การเลื่อนดูเนื้อหาส่วนอื่น ๆจะทำให้ มีการเลื่อนรูปภาพพื้นหลังตามไปด้วย ซึ่งในกรณีนี้สามารถกำหนดให้รูปภาพพื้นหลังอยู่คงที่ได้ ไม่ให้เคลื่อนที่ ตามเนื้อหา ดังมีรูปแบบคำสั่งดังนี้ <body background=“ชื่อไฟล์รูปภาพ” bgproperties=“fixed “> ตัวอย่างที่ 5.7 <!DOCTYPE html> <html> <head> <title>การใช้รูปภาพเป็นพื้นหลัง</title> <meta charset=“UTF-8”> </head> <body background=“bgPict.jpg” bgproperties=“fixed”> </body> </html>
10 การสร้างเว็บไซต์ 10 สรุปสาระสำคัญ การสร้างเว็บเพจนอกจากจะมีข้อความแล้วยังต้องประกอบตัวยรูปภาพเพื่อเพิ่มความน่าสนใจให้กับ เว็บเพจ นอกจากนี้รูปภาพยังสามารถสื่อความหมายได้ชัดเจนกว่าข้อความ การใส่รูปภาพในเอกสาร HTMLนั้น จะต้องเตรียมรูปภาพไว้ก่อนโดยมีวิธีการจัดการกับรูปตังนี้ 1. การแทรกรูปภาพในเว็บเพจจะใช้คำสั่ง <img> พร้อมกับระบุไฟล์รูปภาพที่จะนำมาแสดง โดยมี รูปแบบคำสั่งดังนี้ <img scr=“ชื่อไฟล์รูปภาพ”> 2. การใส่ข้อความกำกับรูปภาพจะใช้แอทริบิวต์คือ alt โดยมีรูปแบบคำสั่งแท็กดังนี้คำสั่งแท็ก <img> มีรูปแบบคำสั่งดังนี้ <img src=“ชื่อไฟล์รูปภาพ” alt=“ข้อความกำกับรูปภาพ”> 3. การกำหนดขนาดรูปภาพ เป็นการทำให้รูปภาพบนเว็บเพจมีการแสดงผลในขนาดที่แตกต่างกันโดย กำหนดขนาดของรูปภาพในแท็ก <img> มีรูปแบบคำสั่งดังนี้ <img scr=“ชื่อไฟล์รูปภาพ” width=“ค่าความกว้าง” height=“ค่าความสูง”> 4. การใส่กรอบให้รูปภาพเป็นการทำให้รูปภาพมีขอบเส้นเพื่อเน้นรูปภาพหรือแยกส่วนที่เป็นรูปภาพ จากข้อความ ซึ่งสามารถกำหนดแอททริบิวต์ border ในแท็ก <img> มีรูปแบบคำสั่งดังนี้ <img scr=“ชื่อไฟล์รูปภาพ” border=“ขนาดความหนาของกรอบ”> 5. การจัดตำแหน่งข้อความและรูปภาพเป็นการกำหนดแอททริบิวท์ align ในแท็ก <img> มีรูปแบบ คำสั่งดังนี้ <img scr=“ชื่อไฟล์รูปภาพ” align=“ตำแหน่งของรูปภาพ> 6. การจัดระยะห่างข้อความกับรูปภาพสามารถกำหนดขนาดช่องว่างระหว่างรูปภาพกับข้อความโดยมี แอทริบิวต์ hspace และ vspace มีรูปแบบคำสั่งดังนี้ <img src=“ชื่อไฟล์รูปภาพ” vspace=“ระยะห่างจากขอบบนและล่าง” hspace=*ระยะห่างจากขอบข้ายและขวา”> 7. การจัดข้อความจากแนวรูปภาพสามารถกำหนดแอทริบิวต์ clear ในแท็ก <br> ซึ่งมีรูปแบบคำสั่ง <br clear=*ตำแหน่งข้อความ”> 8. การใช้รูปภาพเป็นพื้นหลังทำได้โดยมีการกำหนดแอททริบิวต์ background ในแท็ก <body>มี รูปแบบการใช้คำสั่งดังนี้ <body background=“ชื่อไฟล์รูปภาพ”>