Mid-term+exams

1.เว็บไซต์(Website) คือ
 * เว็บไซต์ **

เว็บไซต์ (Web Site) คือ แหล่งที่เก็บรวบรวมข้อมูลเอกสารและสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ ของแต่ละบริษัทหรือหน่วยงานโดยเรียกเอกสารต่าง ๆ เหล่านี้ว่า เว็บเพจ (Web Page) และเรียกเว็บหน้าแรกของแต่ละเว็บไซต์ว่า โฮมเพจ (Home Page) หรืออาจกล่าวได้ว่า เว็บไซต์ก็คือเว็บเพจอย่างน้อยสองหน้าที่มีลิงก์ (Links) ถึงกัน ตามหลักคำว่า เว็บไซต์จะใช้สำหรับผู้ที่มีคอมพิวเตอร์แบบเซิร์ฟเวอร์หรือจดทะเบียนเป็นของตนเองเรียบร้อยแล้วเช่น www.google.co.th ซึ่งเป็นเว็บไซต์ที่ให้บริการสืบค้นข้อมูลเป็นต้น  สรุป เว็บไซต์ คือ ชื่อเรียกหรือที่อยู่ของเครื่องคอมพิวเตอร์ที่ให้บริการ

เว็บเพจ คือ หน้าแต่ละหน้าที่มีการเชื่อมโยงถึงกัน



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

 1. ข้อความ (Text) ได้แก่ ตัวอักษร ตัวเลข ซึ่งอาจเป็นภาษาอังกฤษ ไทย หรือภาษา อื่น ๆ ก็ได้

2. กราฟิก (Graphics) ได้แก่ ภาพวาดและรูปภาพต่าง ๆ 3. มัลติมีเดีย (Multimedia) ได้แก่ ภาพเคลื่อนไหว ภาพวีดิทัศน์ เสียง

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

2.โฮมเพจ(Homepage) คือ Home page คืออะไร

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

<span style="font-family: Tahoma,sans-serif; font-size: 10pt;">3.เว็บเพจ(Webpage) คือ
 * <span style="color: #050505; font-family: Tahoma,sans-serif; font-size: 12pt;">เว็บเพจ **<span style="color: #050505; font-family: Tahoma,sans-serif; font-size: 12pt;"> คือ หน้าไฟล์เว็บไซต์หน้าต่างๆ จะมีเนื้อหา ภาพ เสียง และองค์ประกอบอื่นๆ ที่สามารถสร้างขึ้นมาได้ เปรียบเสมือนหนังสือเล่มหนึ่ง ที่สามารถเปิดอ่านได้หลายๆ หน้า เว็บเพจแต่ละหน้าจะถูกระบุเชื่อมโยงด้วยที่อยู่ของเว็บเพจที่เรียกว่า Url (Uniform Resource Locator) และในเว็บเพจยังมีจุดเชื่อมโยง (Links) หรือ ไฮเปอร์ลิงค์ (Hyperlink) ที่เป็นข้อความ หรือภาพที่ให้คลิกเม้าส์เพื่อเชื่อมโยงไปยังที่อยู่ของเว็บเพจอื่นๆ โดยการระบุด้วย Url นั่นเอง ตัวอย่าง Url ของเว็บไซต์ เช่น <span style="font-family: Tahoma,sans-serif; font-size: 12pt;">[] <span style="color: #050505; font-family: Tahoma,sans-serif; font-size: 12pt;"> ซึ่งถ้าเราเข้าเว็บไซต์ด้วยชื่อนี้ ก็จะปรากฏหน้าแรก หรือหน้า โฮมเพจ นั่นเอง หรือถ้าเข้าเว็บไซต์ด้วย <span style="font-family: Tahoma,sans-serif; font-size: 12pt;">[] <span style="color: #050505; font-family: Tahoma,sans-serif; font-size: 12pt;"> ก็จะปรากฏหน้า เว็บเพจ อีกหน้า เป็นต้น

<span class="textexposedshow" style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">4. <span style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">เว็บเบราเซอร์ ( <span class="textexposedshow" style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">Web Browser) <span style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">คือ
 * <span style="color: #555555; font-family: Tahoma,sans-serif; font-size: 9pt;">เว็บเบราว์เซอร์ **<span style="color: #555555; font-family: Tahoma,sans-serif; font-size: 9pt;"> (web browser) **<span style="color: #555555; font-family: Tahoma,sans-serif; font-size: 9pt;">เบราว์เซอร์ **<span style="color: #555555; font-family: Tahoma,sans-serif; font-size: 9pt;"> หรือ **<span style="color: #555555; font-family: Tahoma,sans-serif; font-size: 9pt;">โปรแกรมดูเว็บ **<span style="color: #555555; font-family: Tahoma,sans-serif; font-size: 9pt;"> คือโปรแกรมคอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเวบที่สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล (html) ที่จัดเก็บไว้ที่ระบบบริการเว็บหรือเว็บเซิร์ฟเวอร์ หรือระบบคลังข้อมูลอื่น ๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ
 * <span style="color: #555555; font-family: Tahoma,sans-serif; font-size: 9pt;">ประโยชน์ของ ****<span style="color: #555555; font-family: Tahoma,sans-serif; font-size: 9pt;">Web Browser **

<span style="color: #555555; font-family: Tahoma,sans-serif; font-size: 9pt;">สามารถดูเอกสารภายในเว็บเซิร์ฟเวอร์ได้ อย่างสวยงามมีการแสดงข้อมูลในรูปของ ข้อความ ภาพ และระบบมัลติมีเดียต่างๆ ทำให้การดูเอกสารบนเว็บมีความน่าสนใจมากขึ้น ส่งผลให้อินเตอร์เน็ตได้รับความนิยมเป็นอย่างมากเช่นในปัจจุบัน ปัจจุบัน web browser ส่วนใหญ่จะรองรับ html 5 และ อ่าน css เพื่อความสวยงามของหน้า web page

<span style="color: #555555; font-family: Tahoma,sans-serif; font-size: 9pt;">รายชื่อเว็บเบราว์เซอร์ (web browser) ที่เป็นที่นิยมอย่างแพร่หลาย


 * <span style="color: #555555; font-family: Tahoma,sans-serif; font-size: 9pt;">Internet Explorer
 * <span style="color: #555555; font-family: Tahoma,sans-serif; font-size: 9pt;">Mozilla Firefox
 * <span style="color: #555555; font-family: Tahoma,sans-serif; font-size: 9pt;">Google Chrome
 * <span style="color: #555555; font-family: Tahoma,sans-serif; font-size: 9pt;">Safari

<span class="textexposedshow" style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">5. <span style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">เวิล์ด ไวด์ เว็บ ( <span class="textexposedshow" style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">World Wide Web – www) <span style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">คือ <span style="color: #333333; font-family: 'Angsana New',serif; font-size: 11.5pt;">เวิลด์ไวด์เว็บ ( <span style="color: #333333; font-family: Arial,sans-serif; font-size: 11.5pt;">World Wide Web, WWW, W3) <span style="color: #333333; font-family: 'Angsana New',serif; font-size: 11.5pt;">หรือที่เรียกกันสั้นๆ ว่า "เว็บ" คือพื้นที่เก็บข้อมูลข่าวสารที่เชื่อมโยงกันทางอินเทอร์เน็ตเป็นแบบเครือข่ายคล้ายใยแมงมุมโดยใช้การกำหนด <span style="color: #333333; font-family: Arial,sans-serif; font-size: 11.5pt;">URL <span style="color: #333333; font-family: 'Angsana New',serif; font-size: 11.5pt;">ซึ่งผู้ใช้สามารถเชื่อมต่อเข้าถึงแหล่งข้อมูลที่เก็บไว้ภายในของคอมพิวเตอร์แต่ละเครื่องได้ผ่านทางบราวเซอร์ ( <span style="color: #333333; font-family: Arial,sans-serif; font-size: 11.5pt;">Browser) <span style="color: #000066; font-family: 'Microsoft Sans Serif',sans-serif; font-size: 10pt;">เวิลด์ไวด์เว็บ (World Wide Web หรือ WWW หรือ W3 หรือ Web) คือ บริการค้น

<span style="color: #000066; font-family: 'Microsoft Sans Serif',sans-serif; font-size: 10pt;">หรือเรียกดู ข้อมูลแบบหนึ่ง ในอินเทอร์เน็ต ข้อมูลในเวิลด์ไวด์เว็บ จะอยู่ในแบบสื่อผสม หรือ

<span style="color: #000066; font-family: 'Microsoft Sans Serif',sans-serif; font-size: 10pt;">มัลติมีเดีย (multimedia) ที่มีทั้งตัวอักษร รูปภาพ เสียง ภาพเคลื่อนไหวแบบวิดีโอ

<span style="color: #000066; font-family: 'Microsoft Sans Serif',sans-serif; font-size: 10pt;">ข้อมูลจะถูกแบ่งเป็นหน้า ๆ แต่ละหน้าสามารถ เชื่อมโยงถึงกันได้

<span style="color: #000066; font-family: 'Microsoft Sans Serif',sans-serif; font-size: 10pt;">เป็นแบบเครือข่ายคล้ายใยแมงมุม จากแหล่งต่าง ๆ ที่กระจายอยู่ทั่วโลก

<span class="textexposedshow" style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">6. <span style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">หลักการออกแบบเว็บเพจ คือ ขั้นตอนที่ <span style="font-family: Arial,sans-serif; font-size: 10pt;">1 ่ี กําหนดโครงสร้างของเว๊บไซด์

การสร้างเว็บไซด์น้ันควรเร่ิมจากการสร้างแผนผังของเว็บไซด์ก่อน หรือ

เรียกว่า่ <span style="font-family: Arial,sans-serif; font-size: 10pt;">Site Map ดงภาพตัวอย่างมี การกำหนดหน้าเว็บเพจ

ขั้นตอนที่ <span style="font-family: Arial,sans-serif; font-size: 10pt;">2 ่ กำหนดการเชื่อมโยงระหว่างเว็บเพจ

ผู้พัฒนาต้องกําหนดการเชื่อมโยงเว็บเพจแต่ละหน้าว่ามีการเชื่อมโยงกันเช่นไร ระหว่าง

หน้าเพจต่าง่ ๆ โดยแสดงชื่อไฟล์ <span style="font-family: Arial,sans-serif; font-size: 10pt;">HTML แตละไฟล์ ที่ มีการเชื่อมโยงสัมพันธั กัน

ขั้นตอนที่ <span style="font-family: Arial,sans-serif; font-size: 10pt;">3 ่ การออกแบบเว็บเพจแต่ละหน้า้

นัก ศึก ษ า ส า ม า ร ถ อ อ ก แ บ บ ห น้า เ ว็บ เ พ จ แ ต่ล ะ ห น้า ใ ห้ส ว ย ง า ม ต า ม ส ไ ต ส์ที่ต้อ ง ก า ร

โดยเฉพาะหน้าเว็บเพจหน้าแรกที่เรียกว่า <span style="font-family: Arial,sans-serif; font-size: 10pt;">“ โฮมเพจ ( <span style="font-family: Arial,sans-serif; font-size: 10pt;">Home page)” ซึ่งควรออกแบบให้

สวยงามเพื่อดึงดูดความสนใจของผู้เยี่ยมชม ในขั้นตอนออกแบบนั้นบางคร้ังอาจเรียกว่า

การออกแบบเลย์เอาท์ ( <span style="font-family: Arial,sans-serif; font-size: 10pt;">Lay out Design) สามารถทําได้โดยการออกแบบบนแผนภาพ

สตอรี่บอร์ด ( <span style="font-family: Arial,sans-serif; font-size: 10pt;">Storyboard Form) ทางกระดาษก่อนก็ได้แล้วจึงนําส่ิงที่ออกแบบมาพัฒนา

บนเครื่องมือพัฒนาเว็บเพจด้วยคอมพิวเตอร์ ต่อไป ่ <span style="font-family: Arial,sans-serif; font-size: 10pt;">3

ขั้นตอนที่ <span style="font-family: Arial,sans-serif; font-size: 10pt;">4 ่ี การสรางเว็บเพจแต่ละหน้า้

เป็น ขั้น ต อ น ที่นํา ส่ิง ที่ออ ก แบ บ บ น กร ะ ด า ษ ด้ว ย แผ น ภ า พ ส ต อ รี่บ อร์ด ม า พัฒน า ด้ว ย

เครื่องมือพัฒนาเว็บเพจบนคอมพิวเตอร์ ภาษาที่ใช้ในการพัฒนาเว็บเพจคือ ( <span style="font-family: Arial,sans-serif; font-size: 10pt;">Hypertext

<span style="font-family: Arial,sans-serif; font-size: 10pt;">Markup Language : HTML) และเครื่องมือที่ใช้ในการพัฒนาเว็บเพจที่นิยมใช้ในปัจจุบัน

เช่น <span style="font-family: Arial,sans-serif; font-size: 10pt;">Frontpage, Macromedia Dreamweaver, PHP Fusion, Joomla และ <span style="font-family: Arial,sans-serif; font-size: 10pt;">Webpage

<span style="font-family: Arial,sans-serif; font-size: 10pt;">Maker เป็นต้น ทั้งนี้ขึ้นกับความถนัดของผู้พัฒนา คุณสมบัติของเครื่องเว็บเซิร์บเวอร์ที่

ใหบริการ และฟังก์ชันที่ผู้พัฒนาต้องการพัฒนา

ขั้นตอนที่ <span style="font-family: Arial,sans-serif; font-size: 10pt;">5 ่ี การลงทะเบียนขอพื้นที่เว็บไซต์

เป็นการเผยแพร่เว็บไซต์ ที่ สร้างเสร็จแล้วเข้าสู่ระบบเครือข่ายอินเตอร์เน็ต เพื่อให้บุคคลอื่น

ส า ม า ร ถ เข้า ช ม เ ว็บ ไ ซ ต์ข อ ง นักศึก ษ า ไ ด้ใ น ก า ร เ รีย น ก า ร ส อน ร า ย วิช า นี้ให้นักศึก ษ า

ลงทะเบียนเพื่อขอพื้นที่บริการเว็บไซด์( <span style="font-family: Arial,sans-serif; font-size: 10pt;">Web Hosting) จากทางมหาวิทยาลัย แต่อย่างไร

ก็ตามยังมีผู้ใหู้บริการพื้นที่ เว็บไซด์ อื่นให้บริการฟรี และแบบต้องเสียค่าบริการ

ขั้นตอนที่ <span style="font-family: Arial,sans-serif; font-size: 10pt;">6 ่ี การอัพโหลดเว็บไซต์

หลังจากสร้างเว็บไซต์ และลงทะเบียนขอพื้นที่สําหรับฝากข้อมูลเว็บไซต์แล้ว ให้ใช้โปรแกรม

สําหรับอับโหลด ( <span style="font-family: Arial,sans-serif; font-size: 10pt;">Upload) เช่นโปรแกรม <span style="font-family: Arial,sans-serif; font-size: 10pt;">CuteFTP, FileZilla เพื่อให้คนทั่วโลก

สามารถเข้าชมเว็บไซต์ของเราผ่านทางระบบเครือข่ายอินเตอร์เน็ตได้ ในการเรียนการ

สอนวิชานี้ให้นักศึกษาใช้ <span style="font-family: Arial,sans-serif; font-size: 10pt;">FileZilla ในการอับโหลดไฟล์ข้อมูลเว็บไซด์ที่พัฒนาขึ้นไปยัง

เครื่องแม่ข่ายที่้ให้บริการของมหาวิทยาลัย สําหรับวิธีการใช้งานนักศึกษาสามารถศึกษาได้

จากคู่ในหน้าเว็บไซด์ ของมหาวิทยาลัย

<span class="textexposedshow" style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">7. <span style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">ส่วนประกอบของหน้าเว็บเพจ คือ <span style="color: #804040; font-family: Verdana,sans-serif; font-size: 19.5pt;">1. <span style="color: #804040; font-family: 'Angsana New',serif; font-size: 19.5pt;">ส่วนหัวของหน้า ( <span style="color: #804040; font-family: Verdana,sans-serif; font-size: 19.5pt;">Page Header) <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 18pt;">เป็นส่วนที่อยู่ตอนบนสุดของหน้า และเป็นส่วนที่สำคัญที่สุดของหน้า เพราะเป็นส่วนที่ดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์ มักใส่ภาพกราฟฟิกเพื่อสร้างความประทับใจ ส่วนใหญ่ประกอบด้วย <span style="color: white; font-family: Arial,sans-serif; font-size: 18pt;">. <span style="color: #804040; font-family: Verdana,sans-serif; font-size: 19.5pt;">2. <span style="color: #804040; font-family: 'Angsana New',serif; font-size: 19.5pt;">ส่วนของเนื้อหา ( <span style="color: #804040; font-family: Verdana,sans-serif; font-size: 19.5pt;">Page Body) <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 18pt;">เป็นส่วนที่อยู่ตอนกลางของหน้า ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ ซึ่งประกอบด้วยข้อความ <span style="color: #555555; font-family: Arial,sans-serif; font-size: 18pt;">, <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 18pt;">ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ และอาจมีเมนูหลัก หรือเมนูเฉพาะกลุ่มวางอยู่ในส่วนนี้ด้วย <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 18pt;">สำหรับส่วนเนื้อหาควรแสดงใจความสำคัญที่เป็นหัวเรื่องไว้บนสุด ข้อมูลมีความกระชับ ใช้รูปแบบตัวอักษรที่อ่านง่าย และจัด <span style="color: #555555; font-family: Arial,sans-serif; font-size: 18pt;">Layout <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 18pt;">ให้เหมาะสมและเป็นระเบียบ <span style="color: white; font-family: Arial,sans-serif; font-size: 18pt;">. <span style="color: #804040; font-family: Verdana,sans-serif; font-size: 19.5pt;">3. <span style="color: #804040; font-family: 'Angsana New',serif; font-size: 19.5pt;">ส่วนท้ายของหน้า ( <span style="color: #804040; font-family: Verdana,sans-serif; font-size: 19.5pt;">Page Footer) <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 18pt;">เป็นส่วนที่อยู่ด้านล่างสุดของหน้า จะมีหรือไม่มีก็ได้ มักวางระบบนำทางที่เป็นลิงค์ข้อความง่าย ๆ และอาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น เจ้าของเว็บไซต์ <span style="color: #555555; font-family: Arial,sans-serif; font-size: 18pt;">, <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 18pt;">ข้อความแสดงลิขสิทธิ์ <span style="color: #555555; font-family: Arial,sans-serif; font-size: 18pt;">, <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 18pt;">วิธีการติดต่อกับผู้ดูแลเว็บไซต์ <span style="color: #555555; font-family: Arial,sans-serif; font-size: 18pt;">, <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 18pt;">คำแนะนำการใช้เว็บไซต์ เป็นต้น
 * o <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 10pt;">โลโก้ ( <span style="color: #555555; font-family: Arial,sans-serif; font-size: 10pt;">Logo) <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 10pt;">เป็นสิ่งที่เว็บไซต์ควรมี เป็นตัวแทนของเว็บไซต์ได้เป็นอย่างดี และยังทำให้เว็บน่าเชื่อถือ
 * o <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 10pt;">ชื่อเว็บไซต์
 * o <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 10pt;">เมนูหลักหรือลิงค์ ( <span style="color: #555555; font-family: Arial,sans-serif; font-size: 10pt;">Navigation Bar) <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 10pt;">เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์

<span class="textexposedshow" style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">◦ <span style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">ส่วนหัว ( <span class="textexposedshow" style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">Page Header) <span style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">คือ

<span class="textexposedshow" style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">◦ <span style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">ส่วนเนื้อหา ( <span class="textexposedshow" style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">Page Body) <span style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">คือ

<span class="textexposedshow" style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">◦ <span style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">ส่วนท้าย ( <span class="textexposedshow" style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">Page Footer) <span style="background-color: white; font-family: Tahoma,sans-serif; font-size: 10pt;">คือ