1 คำนำ หนังสืออิเล็กทรอนิกส์ (E-BOOK) วิชาการสร้างเว็บไซต์ เล่มนี้จัดทำขึ้นเพื่อการเรียนการสอนวิชา โครงการ ระดับชั้นประกาศนียบัตรวิชาชีพ (ปวช.) วิทยาลัยเทคนิคยะลา โดยมีวัตถุประสงค์ที่จะพัฒนาการ เรียนรู้ในสื่อการเรียนการสอนในรูปแบบออนไลน์วิชาการสร้างเว็บไซต์นี้เพื่อความสะดวกสบายต่อนักเรียน นักศึกษา และครูอาจารย์ตามหลักสูตรประกาศนวิชาชีพ (ปวช.) เนื้อหาของหนังสืออิเล็กทรอนิกส์ วิชาการสร้างเว็บไซต์มีด้วยกันทั้งหมด 10 หน่วยการเรียน ประกอบไปด้วย (1) ความรู้เบื้องต้นเกี่ยวกับเก็บไซต์ (2) กระบวนการและโครงสร้างการทำงานของเว็บไซต์ (3) โครงสร้างและไวยกรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์ (4) การออกแบบและใช้โปรแกรมเสริมใน การสร้างเว็บไซต์ (5) การติดตั้งและใช้งานโปรแกรม Adobe Dreamwever CC 2018 (6) การสร้างเว็บไซต์ ด้วยโปรแกรม Adobe Dreamwever CC 2018 (7) การจัดการไฟล์ภาพกราฟิก ภาพเคลื่อนไหวและข้อความ ในเว็บไซต์ (8) การเพิ่มเทคนิคพิเศษให้กับเว็บไซต์ (9) การเชื่อมโยงและการทดสอบการทำงานของเว็บไซต์ (10) การขอพื้นที่และการอัพโหลดเว็บไซต์ เพื่อให้ผู้เรียนได้ศึกษา ค้นคว้าหาความรู้ รวมทั้งบูรณาการกับการ ทำงานตามสาขาวิชาต่าง ๆ ต่อไป หนังสืออิเล็กทรอนิกส์เล่มนี้ ผู้จัดทำ (E-BOOK) หวังเป็นอย่างยิ่งว่า หนังสืออิเล็กทรอนิกส์เรื่องการ สร้างเว็บไซต์ เล่มนี้ จะสามารถใช้ศึกษาให้เกิดประโยชน์แก่ผู้เรียน ผู้สอน ตลอดจนผู้สนใจศึกษาทั่วไปได้เป็น อย่างดี หากมีข้อผิดพลาดประการใด ผู้จัดทำขอน้อมรับคำติชมเพื่อเป็นประโยชน์ในการปรับปรุงแก้ไขใน โอกาศต่อไป นางสาวณัฐจิตกานต์ อินทรสาย นางสาวอรอุมา อินทนิล นางสาวชาคริยา มุนชี ผู้จัดทำโครงการ
2 สารบัญ หน้า หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับเว็บไซต์ 5 1.1 ความหมายและความสำคัญของเว็บไซต์ 6 1.2 ที่มาของเว็บไซต์ 7 1.3 ประเภทของเว็บไซต์ 8 1.4 คำศัพท์พื้นฐานที่เกี่ยวข้องกับเว็บไซต์ 12 หน่วยที่ 2 กระบวนการและโครงสร้างการทำงานของเว็บไซต์ 16 2.1 การบวนการเตรียมข้อมูลในการสร้างเว็บไซต์ 17 2.2 กระบวนการออกแบบและการเลือกใช้สีในเว็บไซต์ 18 2.3 กระบวนการพัฒนาและเผยแพร่เว็บไซต์ 26 2.4 โครงสร้างการทำงานของเว็บไซต์ 27 2.5 การออกแบบโครงสร้างการทำงานของเว็บไซต์ 29 หน่วยที่ 3 โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์ 31 3.1 โครงสร้างและไวยากรณ์ของโปรแกรมภาษาในการสร้างเว็บไซต์ 32 3.2 คำสั่งภาษา HTML พื้นฐานในการสร้างเว็บไซต์ 36 3.3 โปรแกรมภาษาที่นิยมใช้ในการพัฒนาเว็บไซต์ 43 หน่วยที่ 4 การออกแบบและใช้โปรแกรมกราฟิกเสริมในการสร้างเว็บไซต์ 47 4.1 การออกแบบส่วนประกอบของเว็บไซต์ 48 4.2 โปรแกรมกราฟิกที่นิยมใช้ในการออกแบบเว็บไซต์ 49 4.3 การใช้โปรแกรม Adobe Photoshop CC 2018 52 4.4 การบันทึกไฟล์ภาพกราฟิกสำหรับเว็บไซต์ 61 4.5 การใช้โปรแกรม Adobe Animate CC 2018 63 4.6 การบันทึกไฟล์ภาพเคลื่อนไหวสำหรับเว็บไซต์ 70 หน่วยที่ 5 การติดตั้งและใช้งานโปรแกรม Adobe Dremwever CC 2018 92 5.1 รู้จักกับโปรแกรม Adobe Dreamwever CC 2018 93 5.2 การติดตั้งโปรแกรม Adobe Dreamwever CC 2018 95 5.3 ส่วนประกอบต่าง ๆ ของโปรแกรม Adobe Dreamwever CC 2018 98
3 หน้า หน่วยที่ 6 การสร้างเว็บไซต์ด้วยโปรแกรม Adobe Dremwever CC 2018 103 6.1 การใช้งานโปรแกรม Adobe Dremwever CC 2018 104 6.2 การสร้างไซต์ 107 6.3 การจัดการโครงร่างเว็บไซต์ด้วยตาราง 110 6.4 การตั้งค่าการแสดงผลเว็บไซต์ 115 6.5 การบันทึกเอกสารเว็บไซต์ 116 หน่วยที่ 7 การจัดการไฟล์ภาพกราฟิก ภาพเคลื่อนไหว และข้อความในเว็บไซต์ 118 7.1 การจัดการไฟล์ภาพกราฟิกในเว็บไซต์ 119 7.2 การจัดการไฟล์ภาพเคลื่อนไหวในเว็บไซต์ 123 7.3 การจัดการข้อความในเว็บไซต์ 125 หน่วยที่ 8 การเพิ่มเทคนิคพิเศษให้กับเว็บไซต์ 127 8.1 เครื่องมือในการเพิ่มเทคนิคพิเศษให้กับเว็บไซต์ 128 8.2 การกำหนดพฤติกรรมการแสดงผลของภาพในเว็บไซต์ 129 8.3 การเพิ่มวิดีโอ YouTube ในเว็บไซต์ 136 หน่วยที่ 9 การเชื่อมโยงและการทดสอบการทำงานของเว็บไซต์ 138 9.1 รู้จักกับการเชื่อมโยงเว็บไซต์ 140 9.2 การเชื่อมโยงเว็บไซต์ 141 9.3 การตรวจสอบการเชื่อมโยงเว็บไซต์ 144 หน่วยที่ 10 การขอพื้นที่และการอัพโหลดเว็บไซต์ 145 10.1 การขอพื้นที่ในการอัพโหลดเว็บไซต์ 147 10.2 โปรแกรมที่ใช้ในการอัพโหลดเว็บไซต์ 148 10.3 การอัพโหลดเว็บไซต์ 148
4 ส
5 ความรู้เบื้องต้นเกี่ยวกับเว็บไซต์ หัวข้อเรื่อง (Topics) 1.1 ความหมายและความสําคัญของเว็บไซต์ 1.2 ที่มาของเว็บไซต์ 1.3 ประเภทของเว็บไซต์ 1.4 คำศัพท์พื้นฐานที่เกี่ยวข้องกับเว็บไซต์ แนวคิดสําคัญ (Main ldea) ปัจจุบันคนส่วนใหญ่มักนิยมใช้อินเทอร์เน็ตในการสืบคันข้อมูลจากแหล่งข้อมูลต่าง ๆ เว็บไซต์จึงเป็น อีกหนึ่งทางเลือกที่หน่วยงานองค์กรต่าง ๆ นิยมสร้างขึ้นมาเพื่อจัดเก็บข้อมูล ประชาสัมพันธ์ข้อมูล เป็นต้น ก่อนที่จะสร้างเว็บไซต์สิ่งสําคัญที่ต้องเรียนรู้ในหน่วยนี้คือความรู้เบื้องตันเกี่ยวกับเว็บไซต์ ซึ่งประกอบด้วย ความหมายและความสําคัญของเว็บไซต์ ที่มาของเว็บไซต์ ประเภทของเว็บไซต์ และคําศัพท์พื้นฐานที่เกี่ยวข้อง กับเว็บไซต์ เพื่อเป็นความรู้พื้นฐานในการออกแบบและพัฒนาเว็บไซต์ต่อไป สมรรถนะทางย่อย (Element of Competency) แสดงความรู้เบื้องต้นเกี่ยวกับเว็บไซต์ จุดประสงค์เชิงพฤติกรรม (Behavioral Objectives) 1. อธิบายความหมายและความสําคัญของเว็บไซต์ได้ 2. บอกที่มาของเว็บไซต์ได้ 3. จําแนกประเภทของเว็บไซต์ได้ 4. บอกคําศัพท์พื้นฐานที่เกี่ยวข้องกับเว็บไซต์ได้
6 เนื้อหาสาระ (Content) 1.1ความหมายและความสําคัญของเว็บไซต์ เว็บไซต์(Website) หมายถึง เอกสารหน้าเว็บเพจหลายหน้าที่เชื่อมโยงกัน ส่วนใหญ่จัดทําขึ้นเพื่อเสนอ ข้อมูลผ่านอินเทอร์เน็ต หน้าแรกของเว็บไซต์เรียกว่า โฮมเพจ (Home Page) เว็บไซต์ให้บริการ ต่อผู้ใช้ฟรีแต่ในขณะเดียวกันบางเว็บไซต์จําเป็นต้องมีการสมัครสมาชิกและเสียค่าบริการเพื่อที่จะดูข้อมูล หรือดาวน์โหลด ข้อมูลในเว็บไชต์นั้น ซึ่งได้แก่ข้อมูลทางวิซาการ ข้อมูลตลาดหลักทรัพย์ ภาพยนตร์ เพลง หรือข้อมูลสื่ออื่น ๆ ผู้ทำเว็บไชต์มีหลากหลายระดับ ตั้งแต่สร้างเว็บไซต์ส่วนตัว จนถึงระดับเว็บไซด์สำหรับ ธุรกิจหรือองค์กรต่าง ๆ การเรียกดูเว็บไชต์โดยทั่วไปนิยมเรียกดูผ่านซอฟต์แวร์ในลักษณะของเว็บบราวเซอร์ ในยุคปัจจุบันเว็บไซต์ได้กลายเป็นสื่อที่มีความสําคัญอย่างมาก ไม่ว่าจะเป็นเรื่องของการโฆษณาและ ประชาสัมพันธ์หน่วยงาน การติดต่อประสานงาน การเก็บรวบรวมข้อมูล การนําเสนอข้อมูล ทั้งนี้เนื่องจาก คุณสมบัติที่สามารถนําเสนอ เผยแพร่ ข้อมูลข่าวสารได้อย่างไร้ขีดจํากัด ทั้งในเรื่องเวลาและระยะทาง โดย สามารถคลิกเปิดดูได้ตลอด 24 ชั่วโมง ไม่ว่าจะอยู่ในโลกก็ตาม ด้วยข้อดีดังกล่าว บริษัท ห้าง ร้าน สถานศึกษา สถานประกอบการเกือบทุกแห่งทั้งภาครัฐและเอกชน หรือแม้แต่บุคคลทั่วไป ต่างก็มีความต้องการจัดทํา เว็บไซต์ขึ้นเพื่อเป็นช่องทางการสื่อสารรูปแบบใหม่และเพื่อประโยชน์ในการเผยแพร่ข้อมูล ข่าวสาร ไปสู่ กลุ่มเป้าหมาย เช่น การโฆษณาขายสินค้าและบริการในรูปแบบต่าง ๆ ที่มีจุดมุ่งหมายในเชิงธุรกิจ หรือ การใช้ เว็บไซต์เป็นช่องทางเผยแพร่ข้อมูล ข่าวสารขององค์กร เพื่อประชาสัมพันธ์องค์กรให้เป็นที่รู้จักเพื่อหวังผลใน การสร้างภาพลักษณ์ขององค์กรให้เป็นที่ยอมรับ ซึ่งเว็บไชต์เป็นสื่อที่มีประสิทธิภาพเป็นอย่างมาก ในการสนอง ภารกิจดังกล่าว รูปที่ 1.1 เว็บไซต์ในงานธุรกิจ https://www.google.com/searchq
7 1.2 ที่มาของเว็บไซต์ เซอร์ทิโมที จอห์น เบอร์เนิร์ส-ลี (Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA) เกิดเกิดเมื่อวันที่ 8 มิถุนายน พ.ศ. 2498 เป็นผู้คิดค้นและประดิษฐ์เวิลด์ไวด์เว็บ โดย เริ่มจากการจัดทําโครงการ หนึ่งที่ใช้แนวคิด “ข้อความหลายมิติ” หรือไฮเปอร์เท็กซ์ (Hypertext) มาใช้สําหรับการแลกเปลี่ยนข้อมูล ระหว่างนักวิจัยด้วยกัน ขณะที่ เซอร์ทิโมที จอห์น เบอร์เนิร์ส-ลี ทํางานอยู่ที่ “เซิร์น” เขาให้สร้างระบบต้นแบบ ไว้แล้วเรียกว่าเอ็นไควร์ (Enquire) หลังจากออกจาก เซิร์น เมื่อ พ.ศ. 2523 เบอร์เนิร์ส-ลี ไปร่วมงานกับ บริษัท “อิมเมจคอมพิวเตอร์ซิสเต็ม” ของจอห์น พุล เบอร์เนิร์ส-ลี และได้กลับมาทํางานที่เซิร์นอีกครั้งหนึ่งเมื่อ พ.ศ. 2527 ในตําแหน่งสิกขบัณฑิต (Fellow) เมื่อถึง พ.ศ. 2532 เซิร์นได้กลายเป็นศูนย์อินเทอร์เน็ตที่ใหญ่ที่สุดในยุโรป ซึ่งเบอร์เนิร์ส-ลี ได้เล็งเห็นโอกาสในการใช้ “ข้อความหลายมิติ” ผนวกเข้ากับอินเทอร์เน็ต โดยเอา ความคิดเรื่อง ข้อความหลายมิตินี้เชื่อมต่อเข้ากับความคิด “ทีซีพี” และ “DNS”จึงกลายเป็น “เวิลด์ไวด์เว็บ” และ ได้ใช้ความคิดเดียวกับระบบเอ็นไควร์มาใช้สร้างเวิลด์ไวด์เว็บ ซึ่งได้ออกแบบพัฒนาสร้างเว็บบราวเซอร์ และ เอดิเตอร์ตัวแรกของโลก ชื่อว่าเวิลด์ไวด์เว็บ “World Wide Web” บนระบบปฏิบัติการ เน็กซ์สเต็ป (Nextstep) ของสตีฟ จอบส์ และสร้างเว็บเซิร์ฟเวอร์ขึ้น เรียกว่า httpd (ย่อมาจาก HyperText Transfer Protocal Daemon) เว็บไซต์แรกสุดสร้างขึ้นที่เซิร์นนําขึ้นออนไลน์ เมื่อวันที่ 6 สิงหาคม พ.ศ. 2534 ให้คําอธิบายว่าเวิลด์ไวด์เว็บคือ อะไร การที่จะเป็นเจ้าของบราวเซอร์ทําได้อย่างไร และ จะ ติดตั้งเว็บเซิร์ฟเวอร์ได้อย่างไร นอกจากนี้ยังนับเป็นเว็บ ไดเร็กทอรีอันแรกของโลกด้วยเนื่องจากเบอร์เบิร์ส-ลีดูแล รายชื่อของเว็บไซต์อื่น ๆ ทั้งหมดนอกจากเว็บไซต์ของ ตนเองด้วย ในปี พ.ศ. 2537 เบอร์เนิร์ส-ลี ได้ก่อตั้งกลุ่ม บริษัทเวิลด์ไวด์เว็บ(W3C) ขึ้นที่สถาบันเทคโนโลยี แมสซาชูเซตส์หรือเอ็มไอที ประกอบด้วยบริษัท หลาย บริษัทที่ยินยอมพร้อมใจมาร่วมสร้างมาตรฐานและ ข้อเสนอแนะ สําหรับใช้เป็นหลักในการปรับปรุงคุณภาพ ของเว็บในเดือนธันวาคม พ.ศ. 2547เบอร์เนิร์ส-ลี ยอมรับ ตําแหน่งประธานสาขาวิทยาศาสตร์คอมพิวเตอร์ที่คณะ อิเล็กทรอนิกส์และวิทยาศาสตร์คอมพิวเตอร์ของ มหาวิทยาลัยเซาท์แธมตันสหราชอาณาจักร เพื่อดําเนินโครงการใหม่ “นั่นคือ“ซีแมนติกเว็บ” (Semantic Web) เบอร์เนิร์ส-ลี ไม่ทําการ จดทะเบียนลิขสิทธิ์การคิดค้นรวมทั้งไม่เรียกค่าตอบแทนหรือรางวัลจากองค์กรใด ดังนั้น กลุ่มบริษัท เวิลด์ไวด์เว็บจึงตัดสินใจไม่คิดมูลค่าใด ๆ จากการนํามาตรฐานของกลุ่มบริษัทไปใช้ทั้งนี้เพื่อให้ ผู้ประกอบการทุกรายยอมรับมาตรฐานเดียวกันได้บนพื้นฐานทางเทคโนโลยีต่อไป
8 1.3 ประเภทของเว็บไซต์ การออกแบบเว็บไซต์เพื่อใช้ในงานต่าง ๆ ให้เหมาะสมและเกิดประโยชน์สูงสุดนั้นจําเป็นอย่างยิ่ง ที่ จะต้องเข้าใจถึงลักษณะของเว็บไซต์แต่ละประเภทเพื่อที่จะสามารถแยกแยะข้อแตกต่างของเว็บไซต์แต่ละ ประเภทและนํามาออกแบบเว็บไซต์ให้ตรงตามความต้องการของผู้ใช้ โดยเว็บไซต์ในปัจจุบันสามารถ แบ่งเป็น กลุ่มใหญ่ ๆ ได้ 9 ประเภท ตามลักษณะของเนื้อหาและรูปแบบของเว็บไซต์ ได้แก่ 1.3.1 เว็บธุรกิจหรือการตลาด (Business / Marketing Site) เว็บธุรกิจเป็นเว็บไซต์ที่มักสร้างขึ้นโดยองค์กรธุรกิจต่าง ๆ มีจุดมุ่งหมายหลักเพื่อประชาสัมพันธ์สินค้า และบริการ โดยเนื้อหาส่วนใหญ่จะนําเสนอข้อมูลที่มีความน่าสนใจและตรงใจกลุ่มเป้าหมายมากที่สุด ทั้งนี้เพื่อ ผลกําไรทางธุรกิจนั่นเอง รูปที่ 1.3 ตัวอย่างเว็บธุรกิจหรือการตลาด (ที่มา : https//shopee.co.th) 1.3.2 เว็บหน่วยงานการศึกษา (Education Site) เว็บหน่วยงานการศึกษาเป็นเว็บที่สร้างขึ้นเพื่อเผยแพร่ความรู้และให้โอกาสในการ ค้นคว้าหาข้อมูล เพื่อการศึกษาโดยจะให้บริการข้อมูลเกี่ยวกับการเรียนรู้ทั้งหมด เว็บไซต์ที่ให้บริการ เรียนรู้แบบออนไลน์ที่ เรียกว่า อี-เลิร์นนิง (e-Learning) รวมถึงเว็บไซต์ที่สอนหรือให้ความรู้เกี่ยวกับเรื่องต่าง ๆ เช่นเว็บไซต์การ ทําอาหารเว็บไซต์เขียนโปรแกรม ฯลฯ รูปที่ 1.4 ตัวอย่างเว็บหน่วยงานการศึกษา (ที่มา : http://www2.kmutt.ac.th)
9 1.3.3 เว็บบันเทิง (Entertainment Site) เว็บบันเทิงเป็นเว็บที่นําเสนอและให้บริการต่าง ๆ เพื่อเสริมสร้างความบันเทิงเช่นดนตรีภาพยนตร์ ดารากีฬาความรักบทกลอนการ์ตูนเรื่องขําขันเว็บประเภทนี้อาจมีรูปแบบที่ใช้เทคโนโลยีมัลติมีเดียทีน่าตื่นตา ตื่นใจมากกว่าเว็บประเภทอื่น รูปที่ 1.5 ตัวอย่างเว็บบันเทิง (ที่มา : http://www.mthia.com/#tab-women) 1.3.4 เว็บท่า (Portal Site) เว็บท่าเป็นเว็บที่ให้บริการที่เกี่ยวกับเรื่องราวที่มีสาระและความบันเทิงหลากหลายประเภทเช่นดูหนัง ฟังเพลงดูดวงท่องเที่ยวไอทีเกมสุขภาพหรืออื่น ๆ และเป็นแหล่งแลกเปลี่ยนความคิดเห็นของผู้คนในสังคมใน เรื่องเกี่ยวกับประเด็นต่าง ๆ ซึ่งเรียกว่าเว็บชุมชน (Community Webs) คือเว็บที่ให้บริการพื้นที่แก่กลุ่มคนผู้ที่ มีความสนใจในเรื่องเดียวกันได้เข้ามาแลกเปลี่ยนและแสดงความคิดเห็นกัน รูปที่ 1.6 ตัวอย่างเว็บท่า (ที่มา : https://www.sanook.com)
10 1.3.5 เว็บข่าว (News Site) เว็บข่าวเป็นเว็บที่สร้างขึ้นโดยองค์กรข่าวหรือสถาบันสื่อสารมวลชนต่าง ๆ เพื่อนําเสนอข่าวและสาระ ที่เป็นการสรุปใจความสําคัญซึ่งช่วยให้ผู้ใช้สามารถค้นหาข้อมูลและติดตามข่าวสารได้ทุกที่ทุกเวลา แม้ว่าจะอยู่ ที่ใดก็ตามเช่นสถานีโทรทัศน์สถานีวิทยุหนังสือพิมพ์นิตยสารวารสารหรือแม้กระทั่ง กระทรวงทบวงกรมต่าง ๆ เป็นต้น รูปที่ 1.7 ตัวอย่างเว็บข่าว (ที่มา : https://www.thairath.co.th/news)0 1.3.6 เว็บข้อมูล (Information Site) เว็บข้อมูลเป็นเว็บที่ให้บริการเกี่ยวกับการสืบค้นข้อมูลข่าวสารหรือข้อเท็จจริงต่าง ๆ เป็นช่องทางให้ประชาชน หรือกลุ่มบุคคลที่สนใจได้เข้ามาศึกษาค้นคว้าข้อมูลที่เกี่ยวข้องกับองค์กรของตนได้อีกทั้งยังเป็นการสร้างโอกาส ในการประชาสัมพันธ์ให้แก่ประชาชนในสังคม รูปที่ 1.8 ตัวอย่างเว็บข้อมูล (ที่มา : https://www.vec.go.th)
11 1.3.7 เว็บองค์กรที่ไม่แสวงหาผลกําไร (Non-profit Organization Site) เว็บองค์กรที่ไม่แสวงหาผลกําไรเป็นเว็บที่สร้างขึ้นโดยกลุ่มบุคคลหรือองค์กรต่าง ๆ ที่มีนโยบายในการ สร้างสรรค์ช่วยเหลือสังคมโดยไม่หวังผลกําไรหรือค่าตอบแทนเช่นสมาคมชมรมมูลนิธิโครงการต่าง ๆ โดยมี จุดประสงค์เฉพาะที่แตกต่างกันเช่นพิทักษ์สิ่งแวดล้อมเพื่อทําความดี สร้างสรรค์สังคมรณรงค์เป็นต้น รูปที่ 1.9 เว็บองค์กรที่ไม่แสวงหาผลกําไร (ที่มา : https://www.vec.go.th) 1.3.8 เว็บส่วนตัว (Personal Site) เว็บส่วนตัวเป็นเว็บที่จัดทําขึ้นด้วยเหตุผลที่แตกต่างกันเช่นแนะนํากลุ่มเพื่อนโชว์รูปภาพแสดงความ คิดเห็นเขียนไดอารี่ประจําวันนําเสนอผลงานถ่ายทอดประสบการณ์เกี่ยวกับสิ่งที่เชี่ยวชาญหรือน่าสนใจ โดย ทั้งหมดนี้อาจทําเป็นเว็บไซต์หรือเป็นเพียงเว็บเพจหน้าเดียวก็ได้ รูปที่ 1.10 ตัวอย่างเว็บส่วนตัว (ที่มา : https://www.vec.go.th)
12 1.3.9 เว็บสังคมออนไลน์ (Social Network) เว็บสังคมออนไลน์เป็นเว็บที่รวบรวมข้อมูลของหลาย ๆ บุคคลเชื่อมโยงถึงกันทําความรู้จักกันผ่าน ระบบอินเทอร์เน็ตโดยเว็บไซต์เหล่านี้จะมีพื้นที่ให้บุคคลเข้ามาทําความรู้จักกันมีเครื่องมือต่าง ๆ เพื่ออํานวย ความสะดวกในการสร้างเครือข่ายสร้างเนื้อหาตามความสนใจของผู้ใช้สังคมออนไลน์ช่วยให้คนสามารถรู้จักกัน แลกเปลี่ยนความคิดเห็นและความสนใจร่วมกันได้ง่ายขึ้นเช่น Facebook, MySpace, Linkedin, Line เป็น ต้น รูปที่ 1.11 ตัวอย่างเว็บสังคมออนไลน์ (ที่มา : https://www.vec.go.th) 1.4 คําศัพท์พื้นฐานที่เกี่ยวข้องกับเว็บไซต์ ก่อนที่จะออกแบบและพัฒนาเว็บไซต์นั้นจําเป็นต้องมีความรู้เกี่ยวกับคําศัพท์ต่าง ๆ ที่เกี่ยวข้อง เพื่อ เป็นพื้นฐานความรู้ในการสร้างเว็บไซต์ ซึ่งมีคําศัพท์ที่สําคัญดังนี้ 1. โฮมเพจ (Home Page) หมายถึง เว็บเพจหน้าแรกที่ปรากฏของแต่ละเว็บไซต์ โดยเป็นทางเข้าหลัก ของเว็บไซต์ เมื่อเปิดเว็บไซต์นั้นขึ้นมาจะเป็นหน้าแรกที่ปรากฏขึ้นในโปรแกรมเว็บบราวเซอร์เปรียบเสมือน หน้าปกหนังสือ 2. เว็บเพจ (Web Page) หมายถึง หน้าเอกสารหนึ่งหน้าภายในเว็บเพจประกอบด้วยข้อความ ภาพ ลิงก์ เว็บเพจแต่ละหน้าจะเชื่อมโยงกันเพื่อให้เรียกดูเอกสารหน้าอื่น ๆ ที่เกี่ยวข้องได้อย่างสะดวก เปรียบเสมือนเอกสารและหน้าในหนังสือ 1 เล่ม 3. เว็บไซต์ (Website) หมายถึง หน้าเว็บเพจหลายหน้าซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ เปรียบเสมือนแหล่งเก็บรวบรวมข้อมูลของหน่วยงาน องค์กร ถูกจัดเก็บไว้ใน www (เวิลด์ไวด์เว็บ) 4. เว็บบราวเซอร์ (Web Browser) หมายถึง โปรแกรมสําหรับเรียกดูเว็บไซต์โดยจะแปลคําสั่ง HTML แล้วประมวลผลแสดงผลออกมาเป็นเว็บเพจเช่น Google Chrome, Internet Explorer, Mozilla Firefox, Safari, Opera, Netscape Navigator tuu
13 5. เว็บเซิร์ฟเวอร์ (Web Server) หมายถึง เครื่องคอมพิวเตอร์ซึ่งให้บริการเว็บไซต์ ซึ่งผู้ใช้เรียกชม หน้าเว็บไซต์ได้โดยใช้โปรโตคอล HTTP ผ่านทางเว็บบราวเซอร์ 6. URL (Uniform Resource Locator) หมายถึง ข้อความที่บอกตําแหน่งของข้อมูลในอินเทอร์เน็ต ไม่ว่าจะเป็นเว็บเพจไฟล์ประเภทต่าง ๆ เช่นรูปภาพเสียงเป็นต้น URL ประกอบด้วยโปรโตคอลโดเมนเนม (Domain Name (ไดเร็กทอรีที่เก็บไฟล์)) ชื่อไฟล์เช่น http://www.reallyhost.com เป็นต้น 7. www (World Wide Web) เป็นบริการข้อมูลโดยข้อมูลของ www จะอยู่ในรูปเอกสารแบบ ไฮเปอร์เท็กซ์ (Hypertext) ซึ่งภายในเอกสารจะมีจุดเชื่อมโยง (Link) ไปยังเอกสารอื่น ๆ ที่เกี่ยวข้องเอกสาร ต่าง ๆ ที่เชื่อมโยงกันเหมือนใยแมงมุม เป็นที่มาของคําว่าเว็บ (Web) 8. อัพโหลด (Upload) และดาวน์โหลด (Download) หมายถึง การส่งผ่านข้อมูลทางอิเล็กทรอนิกส์ ระหว่างคอมพิวเตอร์ 2 เครื่อง การส่งข้อมูล แฟ้มข้อมูล หรือโปรแกรมจากคอมพิวเตอร์เครื่องที่ใช้อยู่ขึ้นไป เก็บไว้ในเครื่องแม่ข่าย (Server) เรียกว่า การอัพโหลด (Upload) ขณะเดียวกันการดึงข้อมูลจากแฟ้มข้อมูล ที่ เก็บอยู่ในเครื่องแม่ข่าย (Server) ลงมาเก็บไว้ในเครื่องคอมพิวเตอร์ที่ใช้งานอยู่ เรียกว่า การดาวน์โหลด (Download) 9. โดเมนเนม (Domain Name) หมายถึง ชื่อเว็บไซต์ซึ่งโดยปกติเป็นชื่อที่สื่อถึงหน่วยงานองค์กรที่ ตั้งขึ้นเพื่อให้จดจําและนําไปใช้งานได้ง่ายโดยแบ่งออกเป็น 2 ประเภท คือ (1) โดเมนเนม 2 ระดับประกอบด้วย www. ชื่อโดเมน. ประเภทของโดเwww.sanook.corn ประเภทของโดเมน คือ ค าย่อขององค์กร โดยประเภทขององค์กรที่พบบ่อย ๆ มีดังนี้ * com คือ บริษัทหรือองค์กรพาณิชย์ * org คือ องค์กรเอกชนที่ไม่แสวงผลก าไร * .net คือ องค์กรที่เป็นเกตเวย์หรือจุดเชื่อมต่อเครือข่าย * .edu คือ สถาบันการศึกษา * .gov คือ องค์กรของรัฐบาล * mil คือ องค์กรทางทหาร (2) โดเมนเนม 3 ระดับประกอบด้วย www. ชื่อโดเมน.ประเภทของโดเมน.ประเทศอย่างเช่น www.google.co.th ประเภทขององค์กรที่พบบ่อยคือ * .co คือ บริษัทหรือองค์กรพาณิชย์ * .ac คือ สถาบันการศึกษา * .go คือ องค์กรของรัฐบาล * .net คือ องค์กรที่ให้บริการเครือข่าย * .or คือ องค์กรเอกชนที่ไม่แสวงผลกําไร ตัวย่อของประเทศที่ตั้งขององค์กร * .th คือ ประเทศไทย * .cn คือ ประเทศจีน * .Uk คือ ประเทศอังกฤษ
14 * .jp คือ ประเทศญี่ปุ่น ตัวอย่างการเรียกใช้ข้อมูลเว็บไซต์ผ่านโปรแกรมเว็บบราวเซอร์โดยพิมพ์ URL (Uniform Resource Locator) ซึ่งเป็นที่อยู่ของเว็บไซต์ที่ผู้ใช้บริการจะเข้าไปเรียกดูข้อมูล ซึ่งรูปแบบของ URL จะประกอบด้วย 3 ส่วนหลัก ๆ ได้แก่ 1. ส่วนของชื่อโปรโตคอล http, https 2. ส่วนของชื่อโดเมนเช่น http://www.sisat.ac.th/main/index.php 3. ส่วนของชื่อไฟล์เว็บเพจ เช่น ไฟล์นามสกุล. php, ไฟล์นามสกุล. html ซึ่งก่อนจะถึงไฟล์ เอกสาร นั้นบางครั้งอาจต้องผ่านไดเร็กทอรี รูปที่ 1.12 ตัวอย่างการเรียกใช้ข้อมูลผ่านโปรแกรมเว็บเบราเซอร์ (ที่มา: http://www.sisat.ac.th./main/index.php) จากรูปที่ 1.12 http://www.sisat.ac.th/main/index.php อธิบายให้เข้าใจได้ดังนี้ - http คือ ชื่อของโปโตคอล ซึ่งในตัวอย่างจะเป็น Hypertext Transfer Protocol - www คือ เครือข่ายWord Wide Web - sisat.ac.th คือ ชื่อของเว็บไซต์ที่ตั้งขึ้น เรียกว่า โดเมนเนม (Domain Name) .ac คือ หน่วยงาน ทาง การศึกษา .th คือประเทศไทย - index.php คือ ชื่อไฟล์เว็บเพจ ซึ่งประกอบด้วยเนื้อหาความรู้หรือข้อมูลต่าง ๆ
15