ใบความรู้
หน่วยการเรยี นรทู้ ่ี 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) อยู่บริเวณด้านล่างสดุ ของหน้าเว็บเพจ ส่วนมากใช้สาหรบั ลิงก์ขอ้ ความ
ส้นั ๆ เขา้ ใจงา่ ย หรอื จะมชี ่อื เจา้ ของเวบ็ ไซต์ อเี มลแอดเดรสของผดู้ ูแลเว็บไซตส์ าหรับตดิ ต่อกบั ทางเวบ็ ไซต์
สรุปสว่ นประกอบของหนา้ เว็บเพจ
แนวคดิ ในการออกแบบ
- ดูจากเว็บไซต์อื่นเพ่ือเป็นตัวอย่าง การดูจากเว็บไซต์อ่ืนบนอินเตอร์เน็ตเพ่ือศึกษาเป็นตัวอย่างน้ัน
นับเป็นวิธกี ารทงี่ ่ายที่สดุ แตก่ ค็ วรนาไปประยกุ ต์ใช้ใหเ้ หมาะสมกบั เน้ือหาและกลุ่มเป้าหมายของเราด้วย
- ศึกษาจากสื่อส่ิงพิมพ์ในรูปแบบต่างๆ สื่อสิ่งพิมพ์ในท่ีน้ี ได้แก่ แมกกาซีน โปสเตอร์โฆษณา โบรชัวร์
หรอื หนังสอื บางเลม่ ท่ีมรี ูปแบบและจดุ ดงึ ดดู ความสนใจ สามารถนามาประยกุ ต์ใช้ในเว็บไซตข์ องเราไดเ้ ช่นกัน
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
020_ใบความรู้เรื่อง_พื้นฐานการสร้างเว็บไซต์
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
020_ใบความรู้เรื่อง_พื้นฐานการสร้างเว็บไซต์
- 1 - 10
Pages: