การเรียนการสอน

                   กระบวนการพัฒนาเว็บไซต์

WEB DEVELOPMENT PROCESSES

• การจัดระบบโครงสร้างข้อมูลเป็นพื้นฐานในการออกแบบเว็บไซท์ที่ดี ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์

• การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า

เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนดเป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ

การจัดระบบโคลงสร้างของข้อมูล(Information achitacture)

• Phase 1 : สำรวจปัจจัยสำคัญ(Research)

1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม

2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการการ

3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง

• สิ่งที่ได้รับ

1. เป้าหมายหลักของเว็บ

2. ความต้องการของผู้ใช้

3. กลยุทธ์ในการแข่งขัน

Phase 2 : พัฒนาเนื้อหา(Site Content)

4. สร้างกลยุทธ์การออกแบบ

5. หาข้อสรุปขอบเขตเนื้อหา

• สิ่งที่ได้รับ

1. แนวทางการออกแบบเว็บ

2. ขอบเขตเนื้อหาและการใช้งาน

3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ

Phase 3 : พัฒนาโครงสร้างเว็บไซท์(Site Structure)

6. จัดระบบข้อมูล

7. จัดทำโครงสร้างข้อมูล

8. พัฒนาระบบเนวิเกชัน

• สิ่งที่ได้รับ

1. แนวทางการออกแบบเว็บ

2. ขอบเขตเนื้อหาและการใช้งาน

3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ

Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)

9. ออกแบบลักษณะหน้าตาเว็บ

10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย

• สิ่งที่ได้รับ

1. ลักษณะหน้าตาของเว็บ

2. เว็บต้นแบบที่จะใช้ในการพัฒนา

3. รูปแบบโครงสร้างของเว็บ

4. ข้อกำหนดในการพัฒนาเว็บ

Phase 5 : พัฒนาและดำเนินการ (Production & Operation)

11. ลงมือพัฒนาเว็บ

12. เปิดเว็บไซท์

13. ดูแลและพัฒนาต่อเนื่อง

• สิ่งที่ได้รับ

1. เว็บที่สมบูรณ์

2. เปิดตัวเว็บและทำให้เป็นที่รู้จัก
3. แนวทางการดูแลและพัฒนาต่อไป

            Phase 1 : สำรวจปัจจัย (Research)
ควรแบ่ง เป้าหมายออกเป็นกลุ่มตามความสำคัญ 3 กลุ่ม

คือ

1. จำเป็นต้องมี

2. อยากให้มี

3. ยังรอได้

1. รู้จักตัวเอง

กำหนดเป้าหมายหลักของเว็บ เพื่อใช้เป็นตัวกำหนดขอบเขตและการทำงานในเว็บให้เหมาะสมกับเป้า เป้าหมายทั่วไปของหน่วยงานธุรกิจได้แก่

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

หมายที่ตั้งไว้โดยอาจการประเมินผล

2. เรียนรู้ผู้ใช้กำหนดกลุ่มผู้ใช้เป้าหมาย ดูว่าใครคือผู้ที่จะเข้ามาใช้บริการกลุ่มผู้ใช้มีลักษณะเป็นอย่างไร?ควรออกแบบเว็บโดยให้ความสำคัญแก่กลุ่มผู้ใช้หลักและไม่กังวลกับผู้ใช้กลุ่มอื่นที่เหลือการออกแบบเพื่อกลุ่มผู้ใช้ที่กว้างเกินไปมักจะดึงดูดความสนใจ

ได้ไม่ดีนัก การกำหนดกลุ่มเป้าหมายให้แคบลงแล้วทำเว็บให้ตรง

กลุ่มจะช่วยสร้างความเชื่อถือและความมั่นใจได้มากขึ้น

3. สำรวจการแข่งขันและคู่แข่ง

3.1 สำรวจบรรยากาศการแข่งขัน

3.2 เรียนรู้จากคู่แข่ง

Phase 2 : พัฒนาเนื้อหา (Site Content)

4. สร้างกลยุทธ์การออกแบบ

4.1 ประยุกต์เนื้อหาจากสื่ออื่นเช่นสิ่งพิมพ์ วิทยุ ซีดีรอม แต่ควรระวังว่าไม่ใช่เพียงเอาเนื้อหาจากสิ่งพิมพ์ มาใส่รวมไว้ในเว็บเท่านั้นจะทำให้เว็บ

เป็นเพียงรูปแบบหนึ่งของสิ่งพิมพ์เท่านั้นแต่เว็บเป็นสื่อที่ทำประโยชน์ได้มากกว่า จำเป็นต้อง ปรับปรุงเนื้อหาที่ได้จากสื่ออื่นให้เหมาะสมกับเป้าหมายและกลยุทธ์ของเว็บ

4.2 เลือกใช้เทคโนโลยีที่เหมาะสมเลือกใช้เฉพาะเทคโนโลยีที่สามารถจะสื่อข้อความถึงผู้ใช้ส่วนใหญ่ได้

5. หาข้อสรุปขอบเขตเนื้อหา

5.1 กำหนดเนื้อหาและการใช้งานที่จำเป็นนำข้อมูลที่ได้เตรียมไว้นำมาพิจารณาถึงเนื้อหาที่จำเป็นในการสื่อถึงผู้ใช้ พร้อมกับเพิ่มเติมสิ่งอื่นๆ ที่เหมาะสมเพื่อให้บรรลุ ตามเป้าหมาย

จากนั้นจึงแยกข้อมูลออกเป็น 2 ประเภทคือ เนื้อหา กับ การใช้งาน

5.2 เก็บรวบรวมและพัฒนาข้อมูลเก็บรวบรวมและพัฒนาข้อมูลที่จำเป็นในขั้นตอนนี้ข้อมูลเหล่านี้รวมถึงบทความ รูปภาพ เสียงประกอบหรือวิดีโอที่ต้องการนำเสนอในเว็บไซต์ เนื่องจากกระบวนการเก็บข้อมูลนี้อาจต้องใช้เวลานานหลายสัปดาห์ทั้งนี้ขึ้นอยู่กับความยากง่ายในการได้มาของข้อมูล

5.2 เก็บรวบรวมและพัฒนาข้อมูลจุดประสงค์ของขั้นตอนนี้ คือข้อสรุปขอบเขตเนื้อหาเพื่อทำเป็นโครงสร้างข้อมูลของเว็บไซต์

Phase 3:พัฒนาโครงสร้างเว็บไซต์ (Site Structure)

6. จัดระบบข้อมูลจัดกลุ่มและระบุชื่อเนื้อหาเมื่อมีข้อมูลจำนวนมากที่จะนำมาใช้จะต้องนำข้อมูลเหล่านั้นมาจัดให้เป็นระบบ เพื่อให้ได้เป็น ร่างแผนผังโครงสร้าง (Draft architecture plan) ระบบโครงสร้างข้อมูลที่ดีมีส่วนช่วยให้ผู้ใช้เข้าใจภาพรวมของเนื้อหา

ได้ดีขึ้นจัดกลุ่มและระบุชื่อเนื้อหาวิธีที่ช่วยในการจัดระบบข้อมูลได้ดีคือ การใช้แบบจำลองระบบโครงสร้าง จากสิ่งต่าง ๆ ทีอยู่รอบตัว

ช่วยให้มีอิสระทางความคิดมากขึ้นและอาจทำให้ค้นพบระบบข้อมูลที่เหมาะสมทั้งหมดให้สมบูรณ์ขึ้น

7. จัดทำโครงสร้างข้อมูล

โครงสร้างที่ดีจะช่วยสร้างระบบเนวิเกชันได้ง่ายขึ้น

7.1 จัดทำรายการโครงสร้างของเว็บ การจัดโครงสร้างเนื้อหาแสดงถึงกลุ่มข้อมูลและลำดับชั้นของหัวข้อย่อย โดยอยู่ในรูปแบบตัวหนังสือทั้งหมดก่อน

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

7.2 จัดทำแผนผังโครงสร้างของเว็บนอกจากนี้ยังมีแผนผังโครงสร้างเว็บอย่างง่ายที่เรียกว่าSite map แสดงภาพรวมของเนื้อหาหลักภายในเว็บแต่มีรายละเอียดมากเท่ากับ แผนผังโครงสร้างเว็บโดยอาจจัดทำเป็นแบบตัวหนังสือหรือแบบกราฟิกก็ได้

8. พัฒนาระบบเนวิเกชัน

8.1 วางแนวทางการเคลื่อนที่ภายในไซท์

เป็นการกำหนดขอบเขตของข้อมูลส่วนต่าง ๆ ร่วมกับ

การสร้างทางเชื่อมโยงถึงกัน

ขั้นตอนนี้อาจต้องใช้แผนภาพประกอบการสร้าง

Flowchart หรือ Storyboard แสดงแนวทางและรูปแบบ

การเชื่อมโยงที่ชัดเจน
8.2 สร้างระบบเนวิเกชันระบบเนวิเกชันหรือระบบนำทาง เป็นเครื่องมือสำคัญที่จะนำผู้ใช้ไปยังส่วนต่างๆของเว็บได้ กระบวนการสร้างระบบเนวิเกชัน เริ่มต้นจากการพิจารณาแผนผังโครงสร้างเว็บ ร่วมกับแนวทางการเคลื่อนที่ภายในไซท์ที่มีอยู่ เพื่อให้ได้ระบบนำทางที่จะพาผู้ใช้ไปสู่ส่วนต่างๆ ของเว็บ

Phase 4:การออกแบบเละพัฒนาหน้าเว็บ(Visual Design

9. ออกแบบลักษณะหน้าตาเว็บเพจ

9.1 สร้างแบบจำลองรายละเอียดข้อมูลในหน้าเว็บในขั้นนี้จะเป็นการสร้างแบบจำลองข้อมูลด้วยตัวหนังสือยังไม่มีลักษณะของกราฟิกและสิ่งที่จะสร้างขึ้นก็เป็นแบบจำลองของหน้าเว็บหลักๆ เท่านั้น ซึ่งเมื่อนำไปรวมกับการออกแบบลักษณะหน้าตาของเว็บจะ

ได้เป็นเทมเพลตเพื่อไปใช้กับหน้าย่อยอื่นตอ่ ไป

9.2 จัดแบ่งพื้นที่ในหน้าเว็บเริ่มต้นจากการพิจารณารายการโครงสร้างของไซต์ร่วมกับข้อสรุปขอบเขตเนื้อหาแล้วจำแนกรูปแบบ

ของหน้าเว็บที่จำเป็นต้องมี จากนั้นสรุปให้เหลือเพียง 2- 3 แบบขั้นตอนนี้ตอ้ งจัดแบง่ พื้นที่ในหน้าเว็บ โลโก้หรือลัญลักษณ์ของหน่วยงานควรมีปรากฏอยู่ในทุกหน้าแสดงให้รู้ว่ากำลังอยู่ในเว็บเดียวกัน ตำแหน่งที่ดีที่สุดในการวางโลโก้ไว้คือ มุมซ้ายบนสุดระบบเนวิเกชันหลักจำเป็นต้องมีอยู่ในทุกๆ หน้า ณตำแหน่งเดียวกันตลอดทั้งเว็บ

9.3 ออกแบบโครงร่างของหน้าตาเว็บขั้นตอนนี้ต้องอาศัยผู้เชี่ยวชาญการออกแบบกราฟิกเข้ามาช่วย เริ่มจากการร่างภาพคร่าวๆในกระดาษอาจเริ่มจากโปรแกรม Photoshop สร้างเป็นรูปของโครงร่างของหน้าเว็บขึ้นทันทีหลังจากจบขั้นตอนนี้จะได้ตัวอย่างลักษณะของ

เว็บ ซึ่งอาจดีไซน์ออกมาได้หลายรูปแบบ

10.พัฒนาเว็บต้นแบบและโครงสร้างเว็บขั้นสุดท้าย

10.1 สร้างและทดสอบเว็บต้นฉบับหลังจากเลือกรูปแบบเว็บที่ต้องการได้แล้วนำไปสร้างเป็นเว็บต้นแบบซึ่งจะประกอบด้วยตัวอักษรลิงค์ และองค์ประกอบหลักๆ เท่าที่จำเป็นเพื่อนำไปทดสอบการใช้งานกับตัวอย่างกลุ่มผู้ใช้หลายๆคน

10.2 สรุปแผนผังโครงสร้างเว็บขั้นสุดท้ายหลังจากผ่านการทดสอบจากผู้ใช้แล้ว ถ้าพบปัญหาใดๆที่เกี่ยวกับการใช้งานก็ต้องแก้ไขให้เรียบร้อยผลลัพธ์ขั้นสุดท้ายจากขั้นตอนนี้ คือแผนผังโครงสร้างเว็บไซท์ขั้นสุดท้ายเรียกว่าFinal architecture blueprint

10.3 ระบุข้อกำหนดในการพัฒนาเว็บไซท์ข้อกำหนด(Specs) คือเอกสารที่กำหนดลักษณะการออกแบบ หรือสิ่งที่ต้องการทางเทคนิคที่ได้จาก

ขั้นตอนต่างๆ ที่ผ่านมาซึ่งจะประกอบด้วยรูปแบบโครงสร้างเว็บ การจัดระบบข้อมูล เทคโนโลยีที่จะนำมาใช้ ระบบการตั้งชื่อไฟล์ให้สื่อความหมายรวมถึงรายละเอียดต่างๆที่จะนำไปใช้เป็นแนวทางในการพัฒนาเว็บ

Phase 5: การพัฒนาและดำเนินการ(Production &Operation)

11. ลงมือพัฒนาเว็บ

11.1 เรียบเรียงและตรวจสอบข้อมูลเริ่มจากการจัดเตรียมข้อมูลให้พร้อม โดยนำข้อมูลที่มีอยู่มาเรียบเรียงให้มีรูปแบบที่เหมาะสม จัดรูปแบบเนื้อหาให้อ่านง่ายและชัดเจน ตรวจสอบคำผิดและข้อผิดพลาดอื่นๆ เพื่อไม่ให้ผู้อ่านรู้สึกสับสนและเสียความเชื่อถือได้

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

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

11.3 สร้างเทมเพลตสำหรับหน้าเว็บโปรแกรมช่วยสร้าง เช่น Dreamweaver สามารถช่วยจัดการเทมเพลตได้เป็นอย่างดีที่สำคัญเมื่อเปลี่ยนแปลงส่วนใดส่วนหนึ่งในเทมเพลตโปรแกรมจะตามไปแก้ไขข้อมูลส่วนนั้นในทุกหน้าของเว็บที่ใช้เทมเพลตเดียวกันอัตโนมัติ จะเป็นประโยชน์มากถ้ามีเว็บเพจจำนวนมากที่มักมีการเปลี่ยนแปลงบ่อยๆ

11.4 พัฒนาระบบการใช้งานของเว็บพัฒนาระบบการทำงานที่จำเป็นของเว็บซึ่งต้องอาศัยการเขียนโปรแกรม CGI,ASP,JAVA,JAVAScrip หรือFlash ตามความเหมาะสมเมื่อได้ระบบการทำงานที่สำเร็จแล้วนำไปประกอบเข้าในเว็บที่มีอยู่ระบบการใช้งานที่นิยมใช้ในเว็บทั่วไป เช่นguestbook,counter,web board, formmail หรือ countdown

12. เปิดตัวเว็บไซต์(Launch)ก่อนเปิดตัวควรทดสอบการใช้งานเพื่อค้นหาข้อผิดพลาดที่อาจเกิดขึ้นเสียก่อน เมื่อเปิดตัวแล้วต้องดำเนินการประชาสัมพันธ์ให้เป็นที่รู้จัก

12.1 ทดสอบคุณภาพการใช้งานและความถูกต้อง

- การใช้งาน

- ความสม่ำเสมอและความถูกต้อง

- ความเข้ากันได้กับสิ่งแวดลอ้ มของผูใ้ ช้

12.2 ทำให้เว็บเป็นที่รู้จัก

- การลงทะเบียนกับ search engineวิธีการโปรโมท offline โดยการอาศัยการประชาสัมพันธ์แบบไม่ใช้อินเตอร์เน็ตโดยใช้สื่อทั่วไปเช่น นิตยสาร วิทยุ ทีวี หนังสือพิมพ์ เป็นต้น

13. ดูแลและพัฒนาระบบต่อเนื่อง

13.1 เพิ่มข้อมูลใหม่โดยยึดรูปแบบมาตรฐาน

13.2 วิเคราะห์สถิติการใช้บริการในเว็บ

13.3 ตรวจสอบความถูกต้องของลิงค์

13.4 ตรวจสอบเนื้อหาและการใช้งานเว็บให้ถูกต้องทันสมัย และตรงกับความต้องการของผู้ใช้อยู่เสมอ

การจัดรูปแบบข้อความและการไส่รูปภาพ

การจัดรูปแบบข้อความ

บทความนี้ก็ยังคงเกี่ยวข้องกับข้อความ เป็นบทความที่ต่อเนื่องมาจากบทความที่แล้ว ในบทความนี้เราจะมาจัดรูปแบบของข้ิอความ ในการทำเว็บส่วนใหญ่เนื้อหาจะเป็นส่วนสำคัญ ในบางครั้งเราต้องการที่จะเน้นที่ข้อความใดข้อความหนึ่ง เพื่อดึงดูดความสนใจ ซึ่งเราอาจจะเน้นข้อความนั้น ๆ เป็นพิเศษ ด้วยการใส่ตัวหนา ตัวเอียง

การขีดเส้นใต้ข้อความ หรือการขีดฆ่า

ในแท็กภาษา HTML ก็มีคำสั่งเหล่านี้อยู่ด้วยเหมือนกัน โดยรูปแบบของแท็ก มีดังนี้

1. การกำหนดแบบตัวหนา (Bold) <b> ...ข้อความ...</b> หรือ <strong> ...ข้อความ...</strong>

2. การกำหนดแบบตัวเอียง (Italic) <i> ...ข้อความ...</i>

3. การกำหนดแบบตัวขีดเส้นใต้ (Underline) <u>...ข้อความ...</u>

4. การกำหนดแบบตัวขีดฆ่า (Strike) <strike>...ข้อความ...</strike>

<!--[if !vml]--><!--[endif]--> รูปแบบการจัดรูปแบบข้อความแบบต่าง ๆ

<html>
<head><title> ....การจัดรูปแบบข้อความ....</title></head>
<body>
<b><font size = "2"> ข้อความนี้กำหนดตัวหนา b</font></b><br>
<strong><font size = "2"> ข้อความนี้กำหนดตัวหนา strong</font></strong><br>
<i><font size = "2"> ข้อความนี้กำหนดตัวเอียง i </font></i><br>
<u><font size = "2"> ข้อความนี้กำหนดตัวขีดเส้นใต้ u </font></u><br>
<strike><font size = "2"> ข้อความนี้กำหนดตัวขีดฆ่า strike </font></strike><br>
</body>
</html>

การจัดรูปแบบไม่ยากเลยนะค่ะ อยากให้ข้อความไหนเน้น เด่นเป็นพิเศษก็เลือกเอาค่ะ ว่าอยากให้เป็นแบบไหน แล้วก็เอาแท็กไปครอบไว้เป็นอันเสร็จเรียบร้ิอยค่ะ สำหรับการเน้นข้อความอาจใช้สีช่วยเน้น พร้อม ๆ การจัดรูปแบบด้วยก็ได้ค่ะ โดยใช้ Attribute Color ในส่วนของแท็กฟอนต์ร่วมด้วยค่ะ

การใส่รูปภาพ

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

รูปแบบแท็กการใส่รูปภาพ <img src = "ชื่อภาพ">

<!--[if !vml]--><!--[endif]--> รูปแบบการใส่รูปภาพ

<html>
<head><title> ....การใส่รูปภาพ....</title></head>
<body>
<img src = "lilies.jpg">
</body>
</html>

สำหรับแท็กการใส่รูปภาพ สามารถมี Attribute กำกับเพิ่มเติมได้้ ไม่ว่าจะเป็นขนาดความกว้าง ความสูงของรูปภาพว่าเราต้องการให้แสดงขนาดกว้างและสูง เท่าไหร่ ซึ่งหากเราไม่ได้ระบุภาพจะมีขนาดเท่าขนาดของภาพต้นฉบับ นอกจากนี้เรายังสามารถใส่ขอบของภาพได้ด้วย ซึ่ง Attribute มีดังนี้

ความกว้าง width="ตัวเลขระบุความกว้าง"
ความสูง height="ตัวเลขระบุความสูง"
เส้นขอบ border="ตัวเลขระบุความหนาของเส้นขอบ"

ตัวอย่าง <img src = "lilies.jpg" width="200" height="150" border="1">

จากตัวอย่าง จะแสดงภาพขนาด 200x150 px. (หน่วยการแสดงผลภาพ แสดงเป็น Pixels) และ่มีขอบ หากไม่ต้องการให้แสดงเส้นขอบให้กำหนด border="0" (หากต้องการใ้ห้ขอบมีความหนามาก ระบุตัวเลขให้มาก)

การกำหนดพื้นหลังและสีของตัวอักษร

การปรับแต่งเอกสาร HTML

การปรับแต่งเอกสารในที่นี้ จะหมายถึงการใส่สีสันให้กับเอกสาร HTML ในส่วนของการใส่พิ้นหลัง (Background) ให้โฮมเพจของเรามีสีสันเพิ่มขึ้น ซึ่งการใส่พื้นหลังให้โฮมเพจสามารถใส่ได้ 2 แบบ คือ การใส่สีให้พื้นหลัง และการใส่ภาพ

ให้พื้นหลังในการใส่รูปแบบนั้นจะใส่เิิ่พิ่มในส่วนของแท็กเปิด

ของแท็ก <body> เพราะคำสั่งนี้เป็นส่วนขยายที่เรียกว่า Attribute ของแท็ก <body> นั้นเอง โดยจะมีรูปแบบดังนี้

1. แบบใส่สีให้พื้นหลัง bgcolor = "ชื่อสี" หรือ bgcolor = "#รหัสสี"

2. แบบใส่ภาพให้พื้นหลัง background = "ชื่อภาพ"

รูปแบบการใส่สีให้ื้พื้นหลัง

<html>
<head><title> ....การใส่สีให้พื้นหลังเป็นสีแดง....</title></head>
<body bgcolor = "red">
</body>
</html>

รูปแบบการใส่ภาพให้ื้พื้นหลัง

<html>
<head><title> ....การใส่ภาพให้พื้นหลัง....</title></head>
<body background = "lilies.jpg">
</body>
</html>

Tip HTML

การระบุค่าสีสำำหรับภาษา HTML

การระบุค่าสีสำหรับภาษา HTML สามารถระบุค่าได้ 2 แบบ คือ แบบระบุโดยใช้ชื่อสี (ภาษาอังกฤษ) เช่น red green blue เป็นต้น และอีกรูปแบบหนึ่ง คือการระบุค่าสีเป็นรหัสสี ซึ่งอยู่ในรูปแบบของเลขฐาน 16 ได้แก่ 1-9 และ E-F (ทั้งหมดรวม 16 ตัว) และเื่พื่อให้ได้สีที่หลากหลายจึง มีการผสมของหลักสีกลายมาเป็นรหัสค่าสี 6 หลัก ซึ่งมีตั้งแต่รหัส 000000 - FFFFFF ซึ่งจะได้สีทั้งหมดประมาณ 16.7 ล้านสีด้วยกัน

ในรหัสสี 6 หลักนี้ มีความหมายเกี่ยวการผสมสีอยู่ โดยแบ่งเป็น 3 สีหลัก หรือจะเรียกว่าแม่สีก็ได้คือ สองหลักแรก คือสีแดง และ 2 หลักกลางคือสีเขียว และ 2 หลักสุดท้ายคือสีน้ำเงิน ซึ่งเราจะเรียกว่า RGB (Red Green Blue) โดยแม่สีสามตัวหลักนี้ เขียนอยู่ในรูปแบบรหัสสีสำหรับใช้กับภาษา HTML ได้ดังนี้

- รหัสสีแดง #FF0000

- รหัสสีเขียว #00FF00

- รหัสสีน้ำเงิน #0000FF

นอกจากนี้ก็มีสีหลักอีก 2 สี ซึ่งก็คือ

- รหัสสีดำ #000000 - รหัสสีขาว #FFFFFF

หลักการของสีทางคอมพิวเตอร์เราจะเรียกว่าสีทางแสง ซึ่งจะมีความแตกต่างจากสีทางวัตถุอยู่บ้าง นั้นก็คือ หากเป็นสีในทางวัตถุเมื่อเราผสมสี แดง เขียว น้ำเงิน เข้าด้วยกันจะได้ผลลัพธ์เป็นสีดำ แต่สำหรับสีทางแสง เมื่อผสมสีีทั้ง 3 นี้เข้าด้วยกันจะได้เป็นสีขาว ดังเช่นเมื่อเรา เราเอารหัสสี แดง เขียว น้ำเงิน ซึ่งก็คือ #FF0000 #00FF00 และ #0000FF รวมกันจะได้รหัสสีของสีขาว #FFFFFF

การใส่ภาพในเอกสาร HTML

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

1. GIF (Graphic Intechange Format)

ไฟล์ภาพชนิดนี้ นิยมใช้สำหรับภาพกราฟิคที่เป็นลักษณะลายเล้น ข้อความตัวอักษร หรือภาพการ์ตูนต่าง ๆ ซึ่งมีสีไม่มากนัก เพราะไฟล์ GIF มีค่าสีสูงสุดเีพียง 256 สี ดังนั้นทำให้ภาพกราฟิคที่เราเซฟเป็นไฟล์ประเภท GIF เป็นภาพที่มีลักษณะทึบ และไม่สามารถไล่เฉดสีได้มากนัก แต่ข้อดีของไฟล์ประเภทนี้คือ เราสามารถสร้างและเซฟภาพประเภทนี้ให้มีลักษณะพื้นหลังโปร่งใส (Transparent) ซึ่งสามารถนำภาพเหล่านี้ไปใช้กับพื้นหลังสีอะไรก็ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .gif

2. JPG (Joint Photographic Expert Group)ไฟล์ประเภทนี้สามารถแสดงผลของสีได้สูงสุดถึง 16.7 ล้านสี ดังนั้นจึงเหมาะสำหรับภาพที่มีเฉดสีเยอะ เช่น ภาพถ่ายต่าง ๆ หรือภาพอื่น ๆ ที่มีสีเยอะ นอกจากนี้ยังสามารถเลือกที่จะบีบอัดไฟล์ภาพให้มีขนาดเล็กลงได้ แต่คุณภาพจะลดลง และ่ไฟล์ประเภทนี้ไม่สามารถทำเป็นแบบพื้นหลังโปร่งใส่ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .jpg และ.jpeg

3. PNG(Portable Network Graphic)ไฟล์ประเภทนี้จะมีให้เลือกเซฟ 2 แบบคือ แบบ PNG-8 ซึ่งสามารถแสดงผลสีได้สูงสุด 256 สี และยังสามารถเซฟเป็นแบบ PNG-24 ซึ่งสามารถแสดงผลสีได้สูงสุดถึง 16.7 ล้านสีเหมือนไฟล์ JPG นอกจากนี้ยังสามารถทำเป็นภาพพื้นหลังโปร่งใส เหมือนกับ GIF ได้ด้วย แต่ไฟล์ภาพประเภทนี้จะมีขนาดไฟล์ใหญ่กว่าภาพ JPG มาก ดังนั้นจึงมักใช้เซฟภาพซึ่งมีขนาดเล็ก ๆ แต่มีการใช้สีมาก เช่น ภาพไอคอน ต่าง ๆ ไฟล์ประเภทนี้มีนามสกุล .png

** หมายเหตุ จากโค้ด รูปแบบการใส่ภาพให้ื้พื้นหลัง ในการกำหนดชื่อรูปจะต้องมีรูปภาพเตรียมไว้ด้วย และจะต้องระบุเส้นทางการเข้าถึงไฟล์ภาพนั้น ๆ ให้ถูกต้อง ในที่นี้ Webmaster เซฟรูปภาพอยู่ที่เดียวกันกับไฟล์ HTML หากคุณเซฟภาพไว้คนล่ะที่ก็ต้องระบุเส้นทางการเข้าถึงไฟล์ภาพ เช่น หากคุณสร้างโฟลเดอร์ชื่อ images ไว้เก็บรูปโดยเฉพาะอีกที โค้ดก็จะต้องระบุดังนี้ <body background = " images/lilies.jpg">

    การกำหนดลักษณะสีข้อความในเอกสาร HTML

จากในบทที่ 2 เรื่องโครงสร้างภาษา HTML เราได้ทำการใส่ข้อความลงในโฮมเพจแล้ว ในส่วนระหว่างแท็ก <body> ....</body> ซึ่งจะสังเกตได้ว่าข้อความที่เราได้เขียนไปเมื่อทดสอบผ่านเว็บบราวเซอร์ จะเป็นข้อความสีดำ 3 หากเราเิ่พิ่มเติมโค้ด เพิ่ม Attribute ของแท็ก <body> เข้าไปโดยระบุให้ืพื้นหลังของโฮมเพจเป็นสีแดง จะทำให้สีข้อความดูไม่เข้ากันกับสีพื้นหลัง

และทำให้ข้อความอ่านยาก นอกจากนี้ข้อความก็ดูไม่เป็นมาตรฐาน เหมือนเว็บทั่ว ๆ ไป อันนี้เพราะว่าเรายังไม่ได้ทการกำหนดลักษณะของข้ิอความ

สำหรับการกำหนดลักษณะข้อความนั้น จะใส่เิิ่พิ่มในส่วนของแท็กเปิด ของแท็ก <font> เพราะคำสั่งนี้เป็นส่วนขยายที่เรียกว่า Attribute ของแท็ก <font> นั้นเอง โดยจะมี Attribute ต่าง ๆ ดังนี้

1. การกำหนดชื่อฟอนต์ face = "ชื่อฟอนต์"
2. การกำหนดขนาดของข้อความ size = "ขนาดของข้อความ"
3. การกำหนดสีของข้อความ color= "ชื่อสี" หรือ color = "#รหัสสี"

รูปแบบการกำหนดชื่อฟอนต์
การกำหนดฟอนต์ ก็เหมือน ๆ กับตอนที่เราิพิมพ์งานใน word นั้นละค่ะ ซึ่งเราจะสามารถเลือกได้ว่าเราจะใช้ฟอนต์แบบไหน ซึ่งอาจจะเป็น Arial หรือ Angsana New เป็นต้น ในการเขียน HTML เราก็สามารถกำหนดได้ค่ะ ว่าจะให้ข้อความของเราแสดงผลด้วยรูปแบบของฟอนต์แบบไหน แต่ในการเขียนเว็บเพจนั้น ฟอนต์ที่เป็นที่นิยมจะมีด้วยกัน 2 ชนิดคือ MS Sans Serif และ Tahoma โดยฟอนต์แบบ MS Sans Serif จะนิยมใช้กับเว็บที่มีการแสดงผลข้อความเป็นภาษาไทย และ Tahoma มักใช้การแสดงผลข้อความเป็นภาษาอังกฤษ แต่ก็สามารถใช้กับข้อความภาษาไทยได้เหมือนกัน (อย่าง Nextstepdev ก็ใช้ฟอนต์แบบ Tahoma) รูปแบบการกำหนดชื่อฟอนต์ ก็เป็นตามตัวอย่างด้านล่างค่ะ
<html>
<head><title> ....การหนดรูปแบบฟอนต์ของข้อความ....</title></head>
<body>
<font face = "MS Sans Serif"> ข้อความนี้กำหนดฟอนต์แบบ MS Sans Serif </font> <br>
<font face = "Tahoma"> ข้อความนี้กำหนดฟอนต์แบบ Tahoma </font> <br>
</body>
</html>
เหตุผลที่เรามักใช้ฟอนต์แบบ MS Sans Serif หรือ Tahoma เนื่องจากฟอนต์สองตัวนี้เป็นฟอนต์ มาตรฐานของวินโดวน์ ไม่ว่าเครื่องไหน ๆ ก็มีฟอนต์สองแบบนี้ อีกทั้งฟอนต์ทั้งสองแบบนี้ สามารถแสดงผลเป็นภาษาไทยได้ด้วย ด้วยลักษณะเฉพาะนี้นั้นเอง ดังนั้นเมื่อมีผู้เข้าเยี่ยมชมเว็บที่ใช้ฟอนต์ 2 แบบนี้ การแสดงผลของข้อความก็จะยังสามารถแสดงผลได้เหมือนปกติ หากเรากหนดการแสดงผลด้วยฟอนต์ที่ไม่เป็นมาตรฐาน เมื่อถูกแสดงผลที่เครื่องบางเครื่อง ซึ่งเครื่องนั้น ๆ ไม่มีฟอนต์ที่เราเลือกใช้ จะทำให้ผู้ดูเว็บอ่านข้อความของเว็บเราไม่ได้ ซึ่งจะส่งผลเสียกับการเข้าเยี่ยมชมเว็บไซต์ของเราได้

รูปแบบการกำหนดขนาดข้อความ

การกำหนดขนาดของข้อความสามารถกำหนดได้โดยใช้ตัวเลขเป็นตัวกำหนด ซึ่งสามารถกำหนดได้ 7 ระดับ รูปแบบการใส่มีด้วยกัน 3 แบบ คือ แบบแรกการกำหนดโดยใช้ตัวเลข 1-7 สองการกำหนดตัวเลขโดยใส่เครื่องหมาย + คือตั้งแต่ +1 - +7 และ การใส่แบบใส่เป็นค่าแบบ - ตั้งแต่ -1 - -7 ซึ่งรูปแบบการใส่มีดังนี้

<html>
<head><title> ....การหนดรูปแบบขนาดข้อความ....</title></head>
<body>
<font size = "2"> ข้อความนี้กำหนดขนาดเท่ากับ 2</font> <br>
<font size = "+2"> ข้อความนี้กำหนดขนาดเท่ากับ +2</font> <br>
<font size = "-2"> ข้อความนี้กำหนดขนาดเท่ากับ -2</font> <br>
</body>
</html>

การใส่ขนาดข้อความที่นิยมคือแบบแรก และปกติแล้วข้อความของเนื้อหาโดยทั่ว ๆ ไปจะอยู่ที่ขนาด 2 หรือ 3 ซึ่งต้องขึ้นอยู่กับชนิดของฟอนต์ที่ใช้ด้วย เพราะขนาดของฟอนต์แต่ละชนิดจะไม่เท่ากัน
รูปแบบการกำหนดสีข้อความ

การกำหนดสีสันของข้อความเป็นเรื่องสำคัญอยู่ในลำดับต้น ๆ ของการทำเว็บเลยทีเดียว เพราะสีสันข้อความสามารถดึงดูดสายตาของผู้เยี่ยมชม หากข้อความของเว็บใช้สีที่อ่านยาก เพราะว่าสีกลืนกันไปหมดกับพื้นหลัง ความสำคัญของการสื่อความหมายของข้อความนั้น ๆ อาจอ่อนด้อยลง ดังนั้นการพิจารณาเลือกใช้สีควรเลือกให้เหมาะกับโทนสีทั้งหมดของเว็บ ไม่ควรอ่อนด้อยเกินไป หรือโดดเด่นเิกินไป (สำหรับข้อความเล็ก ๆ ต้องการเน้นอาจทำได้) ซึ่งรูปแบบการใส่สีให้ข้อความในเว็บมีดังนี้

<html>
<head><title> ....การหนดรูปแบบสีข้อความ....</title></head>
<body>
<font color = "red"> ข้อความนี้กำหนดให้เป็นสีแดง</font> <br>
<font color = "#0000ff"> ข้อความนี้กำหนดให้เป็นสีน้ำเงิน </font> <br>
</body>
</html>

Tip HTML

การกำหนดลักษณะข้อความในแท็กเดียว
ในการกำหนดลักษณะข้อความสามารถกำหนดได้ในแท็กเดียว โดยการเิ่พิ่ม Attribute ของแท็ก <font> โดยใช้ Space หรือช่องว่างเป็นตัวแบ่งระหว่างแต่ละ Attribute โดยเขียนโค้ดตามตัวอย่างดังนี้
<font face = "ชื่อฟอนต์" size = "ขนาดข้อความ" color = "สี"> .... </font>

แท็ก <br> คงสังเกตเห็นแล้วนะค่ะ ว่ามีแท็กเพิ่มมาอีกแท็ก ในบทความนี้ คือ <br> แท็ก <br> เป็นแท็กสำหรับขึ้นบรรทัดใหม่ค่ะ

** หมายเหตุ นอกจากแท็ก <br> แล้ว ยังมีแท็กสำหรับขึ้นบรรทัดใหม่อีกหนึ่งแท็กคือ <p> หรือ <p>....</p> แต่แตกต่างกันที่ <br> เป็นการขึ้นบรรทัดใหม่ของย่อหน้าเดียวกัน แต่ <p> จะเป็นการขึ้นบรรทัดย่อหน้า ดังนั้น ช่องว่างของการขึ้นบรรทัดใหม่ของ <p> จะมีความสูงมากกว่า <br>