ใบความรู้ หน่วยการเรียนรู้ที่ 1
พื้นฐานการสร้างเว็บไซต์
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต อินเตอร์เน็ต (Internet) เป็นเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลกซึ่งรวมเอาเครือข่ายย่อยเป็น จานวนมากต่อเชื่อมภายใต้มาตรฐานเดียวกันจนเป็น เครือข่ายคอมพิวเตอร์ขนาดใหญ่ ทาให้ทั่วโลกเชื่อมโยง กัน เป็นเครือข่ายเดียวกันได้ในแพลตฟอร์มของ เวิลด์ ไวด์ เว็บ (World Wide Web)
ลักษณะของเวิล์ด ไวด์ เว็บ (World Wide Web) เวิล์ด ไวด์ เว็บ (World Wide Web – www) หรือเรียกย่อ ๆ ว่า เว็บ (web) เป็นอินเตอร์เน็ตชนิ หนึ่ ง ที่ อ ยู่ ใ นรู ป แบบของกราฟิ ก และมั ล ติ มี เ ดี ย ซึ่ ง ประกอบด้ ว ยข้ อ ความ (Text) ภาพ (Graphic) เสี ย (Sound) และ ภาพเคลื่อนไหว (Movie) เป็นต้นผู้ใช้ทั่ว ไปสามารถเข้าไปในเว็บได้ง่าย และจะได้รับข้อมูล ครบถ้วนปัจจุบัน ถ้าพูดถึงอินเตอร์เน็ต คนทั่วไปจะเข้าใจว่าหมายถึงเว็บ ทั้งที่จริงแล้วเว็บเป็นส่วนหนึ่งของ อินเตอร์เน็ตเท่า นั้น
เว็บไซต์ (Website) และเว็บเพจ (Webpage) เอกสารหรือส่วนที่ติดต่อกับผู้ใช้ในเว็บ เรียกว่า เว็บเพจ (Webpage) หมายถึงเอกสารหนึ่งหน้า การ ใช้เว็บก็คือการเปิดอ่านหรือเปิดใช้เว็บแต่ละหน้านั่นเอง เว็บเพจอาจสร้างขึ้นด้วยภาษาคอมพิวเตอร์ เช่น HTML, ASP, PHP, JAVA ฯลฯ เมื่อ น าเว็ บ เพจหลาย ๆ หน้ า มารวมกัน และระบุ อยู่ใ นอิ นเตอร์ เน็ ต หรื อ ยูอ าร์แ อล (Uniform Resource Locator – URL) ให้กับเว็บเพจกลุ่มนั้นจะเรียกว่า เว็บไซต์ (Web Site) เมื่อเปิดเว็บไซต์ขึ้นมาจะพบกับหน้าแรกของเว็บไซต์ ซึ่งเรียกว่าโฮมเพจ (Homepage) ซึ่งเป็น หน้าที่ สาคัญที่สุดและเป็นหน้าที่จะเชื่อมโยงไปยังเว็บเพจและเว็บไซต์อื่น ๆ
เว็บเบราเซอร์ (Web Browser) เเว็บเบราเซอร์ (Web Browser) คือโปรแกรมที่ใช้สาหรับเปิดเว็บเพจหรือ รับส่งข้อมูลตามที่ เครื่องลูกข่ายร้องขอเมื่อเราเปิดเข้าสู่อินเตอร์เน็ต เว็บเบราเซอร์ที่ได้รับความนิยมปัจจุบันมีหลายโปรแกรม เช่น Microsoft Internet Explorer (IE), Mozilla Firefox, Opera, และ Google Chrome
สรุปเว็บเพจ เว็บไซต์ และโฮมเพจ
ภาษา HTML ภาษา HTML ย่อมาจากคาว่า Hypertext Markup Language เป็นภาษาที่ใช้สาหรับสร้างเว็บเพจ โดยจะได้รับการแปลหรือการแสดงผลโดยเว็บ เบราเซอร์ซึ่งสามารถแสดงได้ทั้งข้อความ ภาพ และเสียง
โครงสร้างหลักของภาษา HTML ในไฟล์เอกสาร HTML ประกอบด้วย สองส่วนใหญ่ๆ คือ ส่วนหัว HEAD และ ส่วนตัว BODY 1) Tag <HTML> และ </HTML> จะอยู่บรรทัดแรก และ บรรทัดสุดท้าย ในไฟล์ HTML เสมอ เป็น Tag ที่บอกให้รู้ว่า ข้อความ หรือ Tag ที่อยู่ระหว่าง 2 Tag นี้ เป็นแบบ HTML 2) Tag <HEAD> และ </HEAD> ส่วนนี้จะไว้ใส่ รายละเอียดต่าง ๆ เช่น Tag<TITLE>TodayLoad.com</TITLE> ไว้ใส่ข้อความที่ต้องการให้ปรากฎอยู่บน ไตเติ้ลบาร์ เป็นต้น 3) <BODY ....... > ข้อความที่ปรากฎอยู่ตรงช่วงจุดไข่ปลา 4) Tag <BODY> และ </BODY> ข้อความ หรือ Tag ที่อยู่ระหว่าง 2 Tag นี้ เป็นส่วนของเนื้อหา
โดเมนเนม (Domain Name) โดเมนเนม (Domain Name) หรือที่เข้าใจกันทั่วไป คือ ชื่อเรียกเว็บไซต์นั่นเอง การจดทะเบียน โดเมนเนมจึงเป็นการลงทะเบีย นชื่อให้กับเว็บไซต์ของเราในโลกอินเตอร์เน็ต โดเมนเนมที่ขอจดทะเบียน จะต้องไม่ซ้ากับคนอื่น และควรตั้งให้เกี่ยวข้องกับเนื้อหาภายในเว็บไซต์ หรือเกี่ยวข้องกับสินค้าและบริการ ตลอดจนใช้คาง่าย ๆ ให้จาได้ เช่น sanook.com และ yahoo.com เป็นต้น
ความหมายของซับโดเมน
หลักการออกแบบเว็บไซต์ หลักการออกแบบเว็บไซต์สามารถแบ่งออกเป็นขั้นตอนต่าง ๆ เพื่อให้เหมาะสมกับผู้เริ่มต้นใช้เป็น แนวทาง ในการสร้างและพัฒนาเว็บไซต์ - การวางแผน การวางแผนนับว่ามีความสาคัญมากในการสร้างเว็บไซต์ เพื่อให้การทางานในขั้นตอนต่าง ๆ มีแนว ทางที่ ชัดเจนและสามารถปฏิบัติได้ตามที่ตั้งเป้าไว้ ซึ่งประกอบด้วย - การกาหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ การกาหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ที่จะสร้าง นับเป็นสิ่งสาคัญอย่างมากในการเริ่มต้นสร้างเว็บไซต์ เลยทีเดียว เพื่อให้เห็นภาพว่าเราต้องการนาเสนอข้อมูลแบบใด เช่น เว็บไซต์เพื่อให้ข้อมูลข่าวสาร การบริการ ด้านต่าง ๆ หรือขายสินค้า เป็นต้น เมื่อสามารถกาหนดจุดประสงค์ของเว็บไซต์ได้แล้ว เงื่อนไขเหล่านี้จะเป็น ตัวกาหนดโครง สร้างรูปแบบรวมถึงหน้าตา และสีเว็บไซต์ของเราด้วย - การกาหนดกลุ่มเป้าหมาย เพื่อให้การสร้างและออกแบบเว็บไวต์ได้รับความนิยม การกาหนดกลุ่มเป้าหมายในการเข้าชมเว็บไซต์ก็นับว่ามี ส่วนสาคัญไม่น้อย เช่น เว็บไซต์สาหรับเยาวชน นักเรียน นักศึกษาในการค้นหาข้อมูล หรือเว็บไซต์สาหรับ บุคคลทั่วไปที่เข้าไปใช้บริการต่าง ๆ เป็นต้น - การเตรียมข้อมูล เนื้อหาหรือข้อมูลจัดว่าเป็นสิ่งที่เชิญชวนให้ผู้อื่นเข้ามาเยี่ยมชมเว็บไซต์ และต้องทราบว่าข้อมูลข่าวสารต่าง ๆ สามารถนามาจากแหล่งใดบ้าง เช่น การคิดนาเสนอข้อมูลด้วยตัวเอง หรือนาข้อมูลที่น่าสนใจมาจากสื่ออื่น เช่น หนังสือพิมพ์ แมกกาซีน เว็บไซต์ และที่สาคัญ ขออนุญาตเจ้าของบทความก่อนเพื่อป้องกันเรื่องลิขสิทธิ์ด้วย - การเตรียมสิ่งต่าง ๆ ที่จาเป็น ในการออกแบบเว็บไซต์ต้องอาศัยความสามารถต่าง ๆ เช่น โปรแกรมสาหรัสร้าง เว็บไซต์ ภาพเคลื่อนไหว มัลติมีเดีย การจดโดเมนเนม การหาผู้ให้บริการรับฝากเว็บไซต์ (Web Hosting) เป็นต้น - การจัดโครงสร้างข้อมูล เมื่อได้ข้อมูลต่าง ๆ เช่น กาหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ การกาหนดกลุ่มเป้าหมาย การเตรียม ข้อมูล การเตรียมสิ่งต่าง ๆ ที่จาเป็นจากขั้นแรกเรียบร้อยแล้ ว ในขั้นตอนนี้ เราจะจัดระบบเพื่อใช้เป็นกรอบ สาหรับการออกแบบและดาเนินการในขั้นตอนต่อไป ซึ่งมีรายละเอียด ดังนี้ • โครงสร้างและสารบัญของเว็บไซต์ • การใช้ระบบนาผู้เข้าชมไปยังส่ วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่าระบบนาทาง (Navigation) • องค์ประกอบที่ต้องนามาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่าง ๆ • การกาหนดรูปแบบและลักษณะของเว็บเพจ • การกาหนดฐานข้อมูล ภาษาสคริปต์หรือแอปพลิเคชันที่นามาใช้ในเว็บไซต์ • การบริการเสริมต่าง ๆ • การออกแบบเว็บไซต์
นับเป็นขั้นตอนในการออกแบบรูปร่าง โครงสร้างและลักษณะทางด้านกราฟิกของหน้าเว็บเพจโดย โปรแกรมที่เหมาะสมในการออกแบบคือ Photoshop หรือ Fireworks ซึ่งจะช่วยในการสร้างเค้าโครงของหน้า เว็บและองค์ประกอบต่าง ๆ เช่น ชื่อเว็บไซต์ โลโก้ รูปไอคอน ปุ่มไอคอน ภาพเคลื่อนไหว แบนเนอร์โฆษณา เป็นต้น ในการออกแบบเว็ บ ไซต์ นั้ น ยั ง ต้ อ งค านึ ง ถึ ง สี สั น และรู ป แบบของส่ ว นประกอบต่ า ง ๆ ที่ ไ ม่ ใ ช่ ภาพกราฟิก เช่น ขนาดของตัวอักษร สีของข้อความ สีพื้น ลวดลายของเส้นกรอบเพื่อความสวยงามและดึง ดูด ผู้เยี่ยมชมด้วย
ส่วนประกอบของหน้าเว็บเพจ เราสามารถจาแนกส่วนประกอบของหน้าเว็บเพจ เป็น 3 ส่วน ดังนี้ 1. ส่วนหัว (Page Header) จะอยู่บริเวณบนสุดของหน้าเว็บเพจ เป็นส่วนที่แสดงชื่อ เว็บไซต์ โลโก้ แบนเนอร์โฆษณาลิงก์สาหรับข้ามไปยังหน้าเว็บอื่น
2. ส่วนเนื้อหา (Page Body) อยู่บริเวณตอนกลางของหน้าเว็บเพจ ซึ่งเป็นส่วนที่แสดงเนื้อหาภายใน หน้าเว็บเพจนั้น โดยประกอบด้วยข้อความ ข้อมูล ภาพเคลื่อนไหว เป็นต้น
3. ส่วนท้าย (Page Footer) อยู่บริเวณด้านล่างสุดของหน้าเว็บเพจ ส่วนมากใช้สาหรับลิงก์ข้อความ สั้นๆ เข้าใจง่าย หรือจะมีชื่อเจ้าของเว็บไซต์ อีเมลแอดเดรสของผู้ดูแลเว็บไซต์สาหรับติดต่อกับทางเว็บไซต์
สรุปส่วนประกอบของหน้าเว็บเพจ
แนวคิดในการออกแบบ - ดูจากเว็บไซต์อื่นเพื่อเป็นตัวอย่าง การดูจากเว็บไซต์อื่นบนอินเตอร์เน็ตเพื่อศึกษาเป็นตัวอย่างนั้น นับเป็นวิธีการที่ง่ายที่สุด แต่ก็ควรนาไปประยุกต์ใช้ให้เหมาะสมกับเนื้อหาและกลุ่มเป้าหมายของเราด้วย - ศึกษาจากสื่อสิ่งพิมพ์ในรูปแบบต่างๆ สื่อสิ่งพิมพ์ในที่นี้ ได้แก่ แมกกาซีน โปสเตอร์โฆษณา โบรชัวร์ หรือหนังสือบางเล่มที่มีรูปแบบและจุดดึงดูดความสนใจ สามารถนามาประยุกต์ใช้ในเว็บไซต์ของเราได้เช่นกัน