Embedded Files
การจัดการรูปภาพและพื้นหลัง
การลองใส่รูปในเว็บเพจดู โดยให้เราหารูปอะไรก็ได้ในเครื่อง และ copy ให้ไปอยู่ใน folder เดียวกับไฟล์ index.html ที่เราได้ลองสร้างมาจากบทความแรก โดยรูปที่บทความนี้ใช้เป็นรูปในงานราชพฤกษ์ ที่จัดขึ้นที่เชียงใหม่ และมีชื่อรูปว่า 1.jpg
ให้เราเปิด notepad โดยไปที่ file > open และเลือกไฟล์ index.html ที่เราทำไว้จากบทความที่ผ่านมา
พิมพ์ข้อความตามด้านล่างนี้ โดยในส่วนของ <img src = "1.jpg"> ชื่อรูปที่นำมาใช้เป็น 1.jpg แต่ในส่วนของคุณก็เปลี่ยนเป็นชื่อรูปของคุณเอง
Source Code
<html> <head> <title>ทดลองใส่รูปในเว็บไซต์</title> </head> <body> เที่ยวงาน ราชพฤกษ์ <br> บรรยากาศภายในงาน <br> <img src = "1.jpg"> </body> </html>
ซึ่งจะได้ผลตามรูปด้านล่าง
เราจะเห็นได้ว่ามี source code ใหม่เพิ่มขึ้นมาคือ
<img src = "1.jpg"> เป็น code ที่ใช้ในการแสดงภาพ
<br> เป็น code ที่ใช้ในสั่งให้ขึ้นบรรทัดใหม่
ซึ่งเราอาจทดลองเอา <br> ที่อยู่ระหว่างประโยค เที่ยวงาน ราชพฤกษ์ และประโยค บรรยากาศภายในงาน ออกและกด save ที่ notepad
จากนั้นเราก็ไปดูผลที่ internet explorer (Web browser) ของเรา และทำการกด F5 หรือ กด Refresh เพราะ Web browser ยังแสดงผลที่เกิดจากการเปิดไฟล์ index.html ครั้งแรกอยู่ จากรูปจะเห็นว่าผลที่แสดงต่างจากเดิม โดยจะไม่มีการเว้นบรรทัดระหว่าง เที่ยวงาน ราชพฤกษ์ และ บรรยากาศภายในงาน
web browser ไม่ได้แสดงผลในครั้งแรกที่เราเปลี่ยนแปลงไฟล์ index.html ก็เพราะว่า web browser เปิดไฟล์ index.html และแสดงผลค้างไว้ จะไม่มีการเรียกไฟล์ index.html มาอ่านซ้ำระหว่างที่มีการแสดงผล ดังนั้นเราต้องทำการกด Refresh หรือ F5 เพื่อให้ web browser ทำการเรียกไฟล์ index.html มาแสดงผลใหม่
เราอาจลองเพิ่มรูปโดย การเพิ่มบรรทัดของ <img src = "ชือรูปของคุณ"> เข้าไปอีกก็ได้ บทความนี้ก็จบเพียงแค่นี้ บทความต่อไปจะเป็นเรื่องของการเชื่อมโยงไฟล์เข้าด้วยกัน ( การสร้าง LINK )
รูปนั้นสามารถบรรยายรายละเอียดได้ดีกว่าคำพูดมาก ดังนั้นแทบทุกเว็บไซต์จึงมีรูปอยู่เกือบทุกเว็บไซต์ ในบทความนี้เราจะมาใส่รูปในเว็บเพจกัน
1. ลองใส่รูปในเว็บเพจ
จะเห็นได้ว่าการใส่รูปที่ขยับได้ หรือขยับไม่ได้นั้น code ไม่แตกต่างกัน แต่จะแตกต่างกันที่ตัวรูปเองว่าขยับได้หรือไม่
ฟอร์ตแมตของไฟต์ที่เราจะเห็นกันบ่อยๆ
1.JPEG เหมาะสำหรับภาพถ่าย หรือภาพที่มีความละเอียดและจำนวนสีมากๆ
2.GIF เหมาะสำหรับภาพลายเส้น เช่นการ์ตูน ตัวหนังสือ หรือภาพที่ต้องการสร้างให้ภาพโปร่งใส หรือ ทำให้เคลื่อนไหวได้
3.PNG เหมาะสำหรับภาพที่ต้องการให้โปร่งแสง ขนาดไฟล์จะใหญ่กว่า JPEG แต่คุณภาพจะดีกว่า JPEG
สำหรับการเปลี่ยนฟอร์ตแมตของภาพเราจะใช้โปรแกรมเช่น Photoshop ในการเปลี่ยนซึ่งเรื่องนี้เราจะไปศึกษากันที่หัวข้อ Photoshop กันต่อไป ซึ่งฟอร์ตแมตของภาพจะมีผลมากต่อการทำเว็บไซต์ของเรา
2. ใส่รูปจาก directory ที่ต่างกัน
จะเห็นว่าการใส่รูปจาก directory ที่ต่างกันใช้หลักการเดียวกับการเขียน hyperlink นั่นเอง ซึ่งหากไม่เข้าใจสามารถกลับไปดูได้ที่หัวข้อ เชื่อมต่อเอกสารของเราด้วย hyperlink
3. The Alt Attribute
รูปแบบ <img src="boat.gif" alt="Big Boat"> เราใช้ alt Attribute เพื่อแสดงผลในกรณีที่ไม่สามารถโหลดรูปได้ และแสดงผลเมื่อมีเมาส์ไปอยู่ด้านบน นอกจากนั้นยังมีผลต่อการคนหาของ google อีกด้วย
4. การใส่รูปพื้นหลัง
รูปพื้นหลังจะถูกแสดงผลซ้ำกันเองโดยเราแม้ว่ารูปจะรูปจะมีขนาดเล็ก หรือสั้นเพียงใดก็ตาม
5. การจัดตำแหน่งของรูปในตัวอักษร
จะเป็นการจัดตำแหน่งของรูปในตัวอักษร เมื่อเรามีตัวอักษรกับภาพอยู่ด้วยกัน เราจะใช้ Align Attribute เพื่อจัดตำแหน่งของภาพ
6. การจัดตำแหน่งของรูปให้ชิดซ้าย หรือขวา
จะเป็นการจัดรูปของเราให้ชิดซ้ายหรือชิดขวา เมื่อแสดงผล
7. การใช้คำสั่งกำหนดขนาดของรูป
การใส่ขนาดของรูปนั้นเราจะใส่หรือไม่ใส่ก็ได้ ถ้าเราใส่ขนาด การแสดงผลของรูปก็จะเปลี่ยนแปลงตามที่เราใส่ แต่ขนาดของรูปจริงๆจะไม่เปลี่ยนแปลง
8. ทำให้รูปภาพเป็น hyperlink
การทำให้รูปภาพเป็น hyperlink ก็ให้ใส่คำสั่งของ hyperlink ครอบคำสั่งแสดงภาพ เท่านั้นเอง
9. คำสั่งที่ใช้ในการแสดงพิกัดในภาพ
เป็นการแสดงพิกัดที่อยู่ในภาพโดยจะแสดงที่ status bar เป็นพิกัดค่า X,Y ตามจุดที่เมาส์ของเราอยู่ด้านบน คลิกที่ภาพหน้าที่ลิงก์ไปจะแสดงตำแหน่งที่เราคลิกในภาพ โดยจุด 0,0 จะอยู่ที่ด้ายซ้ายบนของภาพ
10. สร้าง hyperlink ด้วยพิกัดในรูปภาพ
ในหัวข้อที่แล้วเราทราบพิกัดจุดของภาพแล้ว ในหัวข้อนี้จะใช้พิกัดจุดในภาพมาสร้าง hyperlink ซึ่งในตัวอย่างจะเห็นว่ามี hyperlink ในรูปภาพอยู่ 2 ที่คือ keyboard , mouse
ภาพพื้นหลังเป็นสิ่งที่ทำให้เว็บของเราดูสวยงามแต่ถ้าเราใช้ภาพพื้นหลังที่ไม่ดี อาจส่งผลเสียกับเว็บเราได้ ในบทความนี้จะเป็นตัวอย่างของการใส่พื้นหลังที่ดี และไม่ดี
1. สีพื้นหลังที่ดี
ตัวอย่างของภาพพื้นหลังที่ดี สีของตัวหนังสือและพื้นหลังแตกต่างกันเห็นได้ชัดเจน และสีพื้นหลังเป็นสีที่อ่อนทำให้อ่านแล้วสบายตา
2. สีพื้นหลังที่ไม่ดี
ตัวอย่างพื้นหลังที่ไม่ดีเนื่องจากว่าสีพื้นหลัง และตัวหนังสือเป็นสีสว่างเหมือนกัน ทำให้อ่านได้ยาก
ตัวอย่าง code ที่ใช้กับสีพื้นหลัง
Source Code
<body bgcolor="#000000"> กำหนดสีโดยใช้ hexadecimal number <body bgcolor="rgb(0,0,0)"> กำหนดสีโดยใช้ RGB value <body bgcolor="black"> กำหนดสีโดยใช้ชื่อของสีเอง
การใช้ภาพพื้นหลัง
ภาพพื้นหลังเป็นสิ่งที่ทำให้เว็บของเราดูดีขึ้น แต่เราต้องคำนึงถึงเรื่องต่อไปนี้ด้วย
1.การใส่ภาพพื้นหลังที่ใหญ่มาก จะทำให้เว็บของเราโหลดได้ช้าลง
2.การใส่ภาพพื้นหลังที่ไม่ดีจะทำให้อ่านข้อความได้ยาก
3.การใส่ภาพพื้นหลังอาจทำให้สับสนระหว่างภาพที่เราใช้สื่อความหมายกับภาพพื้นหลังได้
4.การใส่ภาพพื้นหลังทำให้ตัวอักษรอาจลดความเด่นชัดลงไป
code ที่ใช้ใส่ภาพพื้นหลัง
Source Code
<body background="logo.jpt"> <body background="http://www.hellomyweb.com/images/logo.jpg">
เราใส่ code อ้างอิงที่อยู่ของภาพ ได้แบบเดียวกับที่เราเขียนอ้างอิง hyperlink
3. การใส่ภาพพื้นหลังที่ดี
ตัวอย่างการใส่ภาพพื้นหลังที่ดี ทำให้เว็บไซต์ดูน่าสนใจขึ้น
4. การใส่ภาพพื้นหลังที่ไม่ดี
ตัวอย่างการใส่ภาพพื้นหลังที่ไม่ดีทำให้เว็บไซต์มีประสิทธิภาพลดลงไป
การใช้งานสีในเว็บเพจ
สีสันนั้นอยู่คู่กับเว็บเพจอยู่แล้ว เพราะนอกจากจะทำให้เว็บดูสวยงามน่าสนใจแล้ว ยังช่วยให้การอธิบายข้อความดีขึ้นอีก
ด้านล่างคือตัวอย่างสี เราสามารถใช้ทั้ง code สีและชื่อของสีได้เช่น
Source Code
<body bgcolor="AliceBlue"></body> <body bgcolor="#F0F8FF"></body>
ตัวอย่าง code สีในแบบ hex value และแบบ ชื่อของสี
อ้างอิงจากเว็บไซต์ http://www.w3schools.com
ที่มา http://www.hellomyweb.com/course/html
ที่มา http://www.hellomyweb.com/course/how_to_create_website/
Page updated
Report abuse