หน่วยการเรียนรู้ การเขียนโปรแกรมภาษาขั้นพื้นฐาน เรื่อง หลักการสร้างเว็บไซต์ และ HTML 5 รหัส รายวิชา ง23102 การงานอาชีพและเทคโนโลยี 6 กลุ่มสาระ การงานอาชีพและเทคโนโลยี ชั้น มัธยมศึกษาปีที่ 3 เวลา 2 คาบ โรงเรียน เตรียมอุดมศึกษาพัฒนาการ

หลักการออกแบบเว็บไซต์ 1.วางแผน 2.กำหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ 3.กำหนดกลุ่มเป้าหมาย 4.เตรียมข้อมูล 5.เตรียมสิ่งต่าง ๆ ที่จำเป็น 6.จัดโครงสร้างข้อมูล 7.ออกแบบเว็บไซต์  

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

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

หลักการออกแบบเว็บไซต์ 5.การเตรียมสิ่งต่าง ๆ ที่จำเป็น ในการออกแบบเว็บไซต์ต้องอาศัยความสามารถต่าง ๆ เช่น โปรแกรมสำหรับสร้าง เว็บไซต์ ภาพเคลื่อนไหว มัลติมีเดีย การจดโดเมนเนม การหาผู้ให้บริการรับฝากเว็บไซต์ ( Web Hosting ) เป็นต้น

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

หลักการออกแบบเว็บไซต์ การจัดโครงสร้างข้อมูล (1) โครงสร้างและสารบัญของเว็บไซต์ (2) ใช้ระบบนำผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์ หรือ เรียกว่า ระบบนำทาง (Navigation) (3) องค์ประกอบที่ต้องนำมาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่าง ๆ (4) กำหนดรูปแบบและลักษณะของเว็บเพจ (5) กำหนดฐานข้อมูล ภาษาสคริปต์หรือแอปพลิเคชันที่นำมาใช้ในเว็บไซต์ (6) บริการเสริมต่าง ๆ

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

ความรู้พื้นฐานก่อนสร้างเว็บไซต์ อินเตอร์เน็ต                อินเตอร์เน็ต ( Internet) เป็นเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลก ซึ่งรวมเอาเครือข่ายย่อยเป็นจำนวนมากต่อเชื่อมภายใต้มาตรฐานเดียวกัน เป็นเครือข่ายคอมพิวเตอร์ขนาดใหญ่ ทำให้ทั่วโลกเชื่อมโยงกันเป็นเครือข่ายเดียวกันได้ในแพลตฟอร์มของ เวิลด์ ไวด์ เว็บ (World Wide Web)

ความรู้พื้นฐานก่อนสร้างเว็บไซต์ ลักษณะของเวิล์ด ไวด์ เว็บ (World Wide Web)         เวิล์ด ไวด์ เว็บ (World Wide Web – www) หรือเรียกย่อ ๆ ว่า  เว็บ (web)  เป็นอินเตอร์เน็ตชนิดหนึ่งที่อยู่ในรูปแบบของกราฟิกและ มัลติมีเดีย ซึ่งประกอบด้วยข้อความ (Text) ภาพ (Graphic)  เสียง (Sound) และ ภาพเคลื่อนไหว (Movie) เป็นต้น

ความรู้พื้นฐานก่อนสร้างเว็บไซต์ โฮมเพจ ( Homepage )              หมายถึง เว็บเพจหน้าแรกของเว็บไซต์ ซึ่งเป็นหน้าที่เชื่อมโยงไปยังเว็บเพจและเว็บไซต์อื่น ๆ

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

ความรู้พื้นฐานก่อนสร้างเว็บไซต์ เว็บไซต์ (Web site)                  หมายถึง เว็บเพจหลาย ๆ หน้ามารวมกัน และเก็บไว้ ในระบบอินเตอร์เน็ต 

ความรู้พื้นฐานก่อนสร้างเว็บไซต์ เว็บเบราเซอร์ (Web Browser)               เว็บเบราเซอร์ (Web Browser)  คือ โปรแกรมที่ใช้สำหรับเปิดเว็บเพจหรือรับส่งข้อมูลตามที่เครื่องลูกข่ายร้องขอเมื่อเปิดเข้าสู่อินเตอร์เน็ต เว็บเบราเซอร์ที่ได้รับความนิยมปัจจุบันมีหลายโปรแกรม  เช่น  Internet Explorer (IE), Mozilla Firefox, Opera และ Google Chrome

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

ความรู้พื้นฐานก่อนสร้างเว็บไซต์ โดเมนเนม  (Domain Name) คือ ที่อยู่ของเว็บไซต์ แต่เป็นการนำตัวอักษรมาแทนตัวเลขไอพีแอดเดรส เช่น www.tup.ac.th เพื่อให้จดจำได้ง่ายขึ้น เนื่องจากไอพีแอดเดรสนั้น เป็็นชุดตัวเลข ที่มีความยาวทำให้ยากต่อการจดจำ จึงได้มีการใช้ โดเมนเนม (Domain Name) แทน โดเมนเนมจะไม่ซ้ำกัน มักจะตั้งชื่อให้สอดคล้องกับชื่อบุคคล องค์กร หรือหน่วยงานผู้เป็นเจ้าของเว็บไซต์ เพื่อสะดวกในการจดจำ

ส่วนประกอบหน้าเว็บเพจ ส่วนประกอบของหน้าเว็บเพจ แบ่งออกเป็น 3 ส่วน ดังนี้ 1. ส่วนหัว ( Header )  2. ส่วนเนื้อหา ( Body )  3. ส่วนท้าย ( Footer ) 

ส่วนประกอบหน้าเว็บเพจ 1. ส่วนหัว ( Header )  อยู่บริเวณบนสุดของหน้าเว็บเพจ เป็นส่วนที่แสดงชื่อ เว็บไซต์ โลโก้ แบนเนอร์โฆษณาลิงก์ หรือข้อมูลต่างๆสำหรับข้ามไปยังข้อมูลหน้าเว็บอื่น

ส่วนประกอบหน้าเว็บเพจ 2. ส่วนเนื้อหา ( Body )  อยู่บริเวณตอนกลางของหน้าเว็บเพจ ซึ่งเป็นส่วนที่แสดงเนื้อหาภายในหน้าเว็บเพจนั้น ประกอบด้วยข้อความ ข้อมูล บทความ ภาพเคลื่อนไหว เป็นต้น

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

ส่วนหัว ( Header ) ส่วนเนื้อหา ( Body )  ส่วนท้าย ( Footer )

ส่วนหัว ( Header ) ส่วนเนื้อหา ( Body )  ส่วนท้าย ( Footer )

ตัวอย่าง เว็บไซต์ที่สร้างด้วย HTML 5 http://www. aspirecreation ตัวอย่าง เว็บไซต์ที่สร้างด้วย HTML 5 http://www.aspirecreation.com/blog/ best-html5-websites/ ศึกษาข้อมูลเพิ่มเติมเกี่ยวกับ HTML 5 http://www.w3schools.com/html5/