Transcript เว็บเทคโนโลยี (Web Technology)

รายวิชา 5654703
เว็บเทคโนโลยี (Web Technology)
ความรู้ เบือ้ งต้ นเกีย่ วกับเว็บเทคโนโลยี
Outline
•
•
•
•
•
•
•
•
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
HTML
วิธีสร้ างเว็บไซด์
ขนาดหน้ าของเว็บเพจ
พืน้ ทีข่ องเว็บเพจ
ส่ วนประกอบของเว็บ
ขั้นตอนในการพัฒนาเว็บไซต์
ข้ อแนะนาในการทาเว็บไซต์
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• เว็บเทคโนโลยี (Web Technology)
– คือ บริ การหนึ่งในรู ปแบบต่างๆของการให้บริ การของอินเตอร์เน็ต
สาหรับผูพ้ ฒั นาเว็บ หรื อผูท้ ี่ตอ้ งการเขียนโปรแกรมเพื่อ
ติดต่อสื่ อสารผ่านเว็บ หรื อ อินเตอร์เน็ต แล้วจะต้องรู ้และเข้าใจเรื่ อง
เกี่ยวกับโปรโตคอล (Protocal)
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• โปรโตคอล เป็ นเพียงข้อตกลงกันระหว่าง 2 ฝ่ ายที่ให้เครื่ องคอมพิวเตอร์
สามารถสื่ อสารกันได้อย่างถูกต้อง และราบรื่ นมากที่สุด
• การใช้บริ การเว็บจะทางานภายใต้ โปรโตคอล HTTP
• โดยโปรโตคอลจะเป็ นตัวกาหนดวิธีการส่ งข้อมูลหรื อไฟล์ ระหว่าง
เครื่ องคอมพิวเตอร์ที่เป็ น Client และ Server รวมถึงการกาหนด กฏ
ระเบียบในการติดต่อด้วย เราจะใช้โปรแกรมประเภท Browser เป็ นตัว
ช่วยในการติดต่อสื่ อสารได้ง่ายขึ้น
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• อินเทอร์ เน็ต หมายถึง ลักษณะของการเชื่อมต่อของเครื อข่าย
คอมพิวเตอร์ท้ งั เล็กและใหญ่จานวนมากเข้าด้วยกัน โดยมีขอ้ กาหนดว่า
ทุกเครื อข่ายที่เชื่อมต่อถึงกัน จะต้องอยูภ่ ายใต้มาตรฐานของการเชื่อมต่อ
(โปรโตคอล) ที่ถูกสร้างขึ้นมาเพื่อใช้งานบนเครื อข่ายแบบนี้โดยเฉพาะ
ซึ่งเรี ยกว่า TCP/IP
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• จากมาตรฐานการเชื่อมต่อกันนี้เอง จึงมีผลทาให้เครื อข่ายคอมพิวเตอร์
สามารถติดต่อสื่ อสารแลกเปลี่ยนข้อมูลระหว่างกันได้อย่างรวดเร็ วมี
ประสิ ทธิภาพ และไม่มีขีดจากัดทางด้านเวลาและสถานที่
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• โปรโตคอล HTTP (Hypertext Transfer Protocol)
– เป็ นโปรโตคอลที่ใช้ในการกระจายและทางานร่ วมกันของข้อมูลที่
ในอยูใ่ นรู ปสื่ อที่สามารถเชื่อมโยงถึงกันได้ เนื่องจากโปรโตคอล
HTTP สามารที่จะใช้ในการรับส่ งข้อมูลที่เป็ นข้อความ รู ป ภาพ หรื อ
ภาพเคลื่อนไหวได จึงทาให้แหล่งข้อมูลส่ วนใหญ่ใน WWW
อนุญาตให้เข้าถึงได้โดยผ่านโปรโตคอล HTTP
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• WWW (World Wide Web)
อาจเรี ยกสั้นๆ ว่า เว็บ เปรี ยบเสมือน
เป็ นห้องสมุดขนาดใหญ่ที่รวบรวม
ข้อมูลที่มากที่สุดในโลกก็วา่ ได้
สามารถค้นหาข้อมูลที่ตอ้ งการได้
เกือบทุกอย่างจากบริ การเว็บ
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• ข้ อมูลในเว็บจะอยูใ่ นรู ปแบบที่เรี ยกว่า Hypertext และทาการเชื่อมโยง
(Links) ข้อความหรื อ รู ปภาพ เข้ากับเอกสารอื่นๆ อย่างเป็ นอิสระต่อกัน
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• ภาพหรื อข้อความที่แสดงบนหน้าจอจะแสดงได้ทีละหน้า ซึ่งเรี ยกว่า เพจ
(Page) หรื ออาจมีการเชื่อมโยงด้วยการลิงค์ (Links) เพื่อค้นหาข้อมูลจาก
อีกเพจหนึ่งที่อยูห่ ่างออกไปไกลๆได้
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• เว็บไซต์ เปรี ยบเหมือนเว็บเป็ นห้องสมุดขนาดใหญ่ เว็บไซต์จะ
เปรี ยบเสมือนหนังสื อหนึ่งเล่มในห้องสมุดนั้น สามารถเลือกหยิบ
หนังสื อเล่มใดก็ได้ในห้องสมุดเว็บขึ้นมาอ่าน
• โดยระบุชื่อหนังสื อในลักษณะที่เรี ยกว่า URL(อ่านว่ า ยู อาร์ แอล)
• เช่น เว็บไซต์ของมหาวิทยาลัยราชภัฏลาปางมี URL หรื อมีชื่อเป็ น
www.lpru.ac.th หรื อเว็บไซต์ของสาขาเทคโนโลยีคอมพิวเตอร์
อุตสาหกรรมมีชื่อว่า www.comtech.lpru.ac.th เป็ นต้น
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• เว็บเพจ (Web Page) และโฮมเพจ (Home Page)
• ถ้าเว็บไซต์ คือ หนังสื อหนึ่งเล่ม เว็บเพจก็คือ หน้ากระดาษต่างๆ ที่บรรจุ
เนื้อหาในหนังสื อเล่มนั้นส่ วน
• โฮมเพจ คือ ปกหน้าของหนังสื อ ปกติแล้วเมื่อเริ่ มเปิ ดโปรแกรม Web
Browser โปรแกรมจะนาเข้าสู่หน้าแรกของเว็บใดเว็บหนึ่งให้โดย
อัตโนมัติ
• หน้าแรกนั้นจะถือว่าเป็ นโฮมเพจด้วยเช่นเดียวกัน สามารถเปลีย่ น
โฮมเพจของโปรแกรม Web Browser ที่ใช้อยูน่ ้ ีให้ไปยังเว็บไซต์ใดก่อน
ก็ได้
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• เว็บเพจ (Web Page) และโฮมเพจ (Home Page)
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• โปรแกรมเว็บบราวเซอร์ (Web Browser) การแสดงผลข้อมูลต่างๆ บน
อินเทอร์เน็ตในรู ปของ HTML ไม่สามารถที่จะแสดงผลข้อมูลออกมา
โดยตรงได้ จะต้องใช้โปรแกรมเว็บบราวเซอร์เป็ นตัวกลางที่จะทาหน้าที่
แปลงคาสัง่ ก่อนแล้วแสดงผลคาสัง่ ให้ออกมาเป็ นรู ปภาพ เสียง และ
ข้อมูลต่างๆ
• บราวเซอร์ที่ผใู ้ ช้นิยมใช้กนั ก็จะมีโปรแกรม Internet Explorer และ
Netscape Navigator
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• โปรแกรมเว็บบราวเซอร์ (Web Browser)
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• DNS-Domain Name System คือ ระบบการตั้งชื่อบนอินเทอร์เน็ต
ทรัพยากรบนอินเทอร์เน็ต
• โดยเฉพาะเครื่ องคอมพิวเตอร์ที่ต่ออยูน่ ้ นั ต้องมีหมายเลขประจาเครื่ อง
ซึ่งหมายเลขนี้เรี ยกว่า IP โดยการที่จะจดจาหมายเลขประจาเครื่ องนั้นทา
ได้ยาก จึงมีวิธีการตั้งชื่อให้จดจาและใช้งานง่าย ระบบชือ่ จึงถูก
กาหนดให้เป็ นมาตรฐาน
• โดยแบ่งตามลาดับขั้นตามสภาพภูมิศาสตร์ เป็ นประเทศ ประเภทของ
องค์กร และชื่อองค์กร
• เช่น www.lpru.ac.th th คือ ชื่อประเทศไทย ac คือ ประเภทองค์กร bu
คือ ชื่อองค์กร
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• Domain ทีน่ ิยมใช้ กนั อยู่ในปัจจุบัน เช่น
– .com = กลุ่มธุรกิจการค้า (Commercial)
– .edu = กลุ่มการศึกษา (Education)
– .gov = กลุ่มองค์กรรัฐบาล (Government)
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• ความหมายของ Sub Domain เช่น
– .co = องค์การธุรกิจ (Commercial)
– .ac = สถาบันการศึกษา (Academic)
– .go = หน่วยงานรัฐบาล (Government)
– .or = องค์กรอื่น ๆ (Organizations)
ความรู้เบือ้ งต้ นการใช้ งานอินเทอร์ เน็ต
• Domain Name ชื่อย่ อของประเทศ เช่ น
– .th = Thailand
– .hk = Hong Kong
– .jp = Japan
– .sg = Singapore
HTML
• HTML ย่อมาจาก Hyper Text Markup Language เป็ นภาษาที่ใช้ใน
การพัฒนาเว็บเพจเพื่อให้โปรแกรมเว็บบราวเซอร์ (Web Browser) ต่างๆ
สามารถแปลงคาสัง่ และแสดงผลเป็ นรู ปภาพ เสี ยง หรื อข้อมูลได้
• มีโปรแกรมเว็บบราวเซอร์มากกว่า 10 โปรแกรมที่สามารถอ่านหรื อ
เข้าใจในภาษา HTML ซึ่งเป็ นข้อความ Text กับรหัสที่อยูใ่ นเครื่ องหมาย
< > และมีนามสกุลเป็ น .html โดยเมื่อเราเปิ ดโปรแกรมเว็บบราวเซอร์
เราจะไม่สามารถพบรหัสเหล่านี้ได้เลยบนจอภาพ แต่รหัสเหล่านี้จะเป็ น
คาสัง่ ที่บอกโปรแกรมเว็บบราวเซอร์ของเราว่า รู ปแบบของข้อความเป็ น
อย่างไร รวมไปถึงการสร้างจุดเชื่อมโยงหรื อลิงค์ (Link) ที่เชื่อมโยง
ต่อไปยังเว็บเพจอื่นๆ
HTML
• สาหรับการสร้างไฟล์ HTML จะต้องอาศัยโปรแกรมที่มีคุณสมบัติเป็ น
Text Editor โดยเราจะใช้โปรแกรมเหล่านี้สาหรับเขียนคาสัง่ ต่างๆ หรื อ
รายละเอียดของข้อมูลที่ตอ้ งการให้แสดงผลบนจอภาพ และเก็บเป็ นไฟล์
โดยจะต้องมีนามสกุลเป็ น .html จากนั้นก็ทดสอบไฟล์ในโปรแกรมเว็บ
บราวเซอร์ต่อไป แต่ในปัจจุบนั ได้มีการพัฒนาโปรแกรมที่ผใู ้ ช้งานไม่
ต้องเขียนคาสัง่ เองก็สามารถที่จะสร้างเว็บเพจอย่างง่ายๆ ได้เลย
• เช่น Microsoft Frontpage Netscape Composer Macromedia
Dreamweaver Adobe Golive
HTML
• เอกสาร HTML เป็ นเอกสารที่ประกอบไปด้วยข้อมูลที่เราต้องการ
เผยแพร่ ผา่ น WWW และ ภาษา HTML ที่ใช้กาหนดการแสดงผลของ
ข้อมูลดังกล่าว
• ภาษา HTML เป็ นภาษาที่อยูในรู ปของ แท๊ก (Tag) ที่ใช้ห่อหุ ม้ ข้อมูลที่เรา
ต้องการเผยแพร่ ผา่ น WWW ซึ่งการแสดงผลของเอกสาร HTML เรา
สามารถที่จะดูได้โดยใช้โปรแกรมที่เรี ยกว่า เว็บ บราวเซอร์ (Web
Browser)
HTML
• โครงสร้างของภาษา HTML จะประกอบไปด้วย 3 ส่ วน ดังนี้
– ส่ วนที่ใช้บอกจดเริ่ มต้นและจุดสิ้ นสุ ดของเอกสาร คือ แท๊ก
<html></html>
– ส่ วนหัวของเอกสาร HTML คือ แท๊ก <head></head> ซึ่งเราจะแสดง
หัวเรื่ องของ เอกสาร HTML ไว้ในส่ วนนี้
– ส่ วนที่ใช้บอกจดเริ่ มต้นและจุดสิ้ นสุ ดของเนื้อหา คือ แท๊ก
<body></body>
HTML
วิธีสร้ างเว็บไซด์
• สร้างเว็บไซด์ดว้ ย Web Hosting
• สร้างเว็บไซด์ดว้ ยโปรแกรมกราฟฟิ ก
• สร้างเว็บไซด์ดว้ ยภาษา HTML และ JavaScript
ขนาดหน้ าของเว็บเพจ
• ขนาดหน้าของเว็บเพจที่นิยมใช้ในปัจจุบนั มี 2 ขนาด คือ
– ขนาด 800X600 pixels จะสามารถแสดงหน้าเว็บได้ครบถ้วนกับ
หน้าจอที่มีขนาด 15 นิ้วขึ้นไป
– ขนาด 800X600 pixels เป็ นขนาดของหน้าเว็บเพจที่นิยมมากที่สุดใน
ปัจจุบนั เพราะสามารถแสดงข้อมูลของเว็บได้มากขึ้นและง่ายต่อการ
ออกแบบด้วย
พืน้ ที่ของเว็บเพจ
• การจัดสรรพื้นที่ของเว็บเพจสามารถทาได้หลายรู ปแบบ แต่ทนี่ ิยมใช้กนั
จริ งๆจะมีอยู่ 3 แบบ คือ
– การแบ่งแบบอิสระ
– การแบ่ง 2 ส่ วน
– การแบ่ง 3 ส่ วน
ส่ วนประกอบของเว็บ
ส่ วนประกอบของเว็บ
• โลโก้ (Logo)
ส่ วนประกอบของเว็บ
• ส่ วนหัวของเว็บเพจ (Page Header)
ส่ วนประกอบของเว็บ
• เมนูหลัก (Link Menu)
ส่ วนประกอบของเว็บ
• ส่ วนทีใ่ ช้ แสดงเนือ้ หาของเว็บ (Page Body)
ส่ วนประกอบของเว็บ
• ส่ วนล่างสุ ดของเล็บไซด์ (Page Footer)
ส่ วนประกอบของเว็บ
• ช่ องทางการโฆษณาของเว็บไซด์ (Banner)
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
• เตรียมเนือ้ หาที่จะนาเสนอ
– ก่อนอื่นต้องมีเป้ าหมายก่อนว่าจะทาเว็บไซต์เกี่ยวกับเรื่ องอะไรและ
เนื้อหาต่างๆ มีอะไรบ้าง แล้วจัดเตรี ยมสิ่ งต่างๆ ซึ่งหมายถึง ข้อความ,
ภาพประกอบ, เสี ยง และอื่น ๆ
ขั้นตอนในการพัฒนาเว็บไซต์
• ออกแบบหน้ าตาของเว็บไซต์
– ว่าต้องการให้มีลกั ษณะเป็ นอย่างไร เช่น จะมีการแบ่งเฟรมหรื อไม่ สี
ของ Background และตัวอักษรเป็ นสี อะไร จะจัดวางอะไรไว้ตรง
ส่ วนไหน จะมี Link ที่ใดบ้างและแต่ละ Link เชื่อมโยงไปหาส่ วนใด
เป็ นต้น
ขั้นตอนในการพัฒนาเว็บไซต์
• ออกแบบหน้ าตาของเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
• ออกแบบหน้ าตาของเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
• ออกแบบหน้ าตาของเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
• เขียนและทดสอบ
– ลงมือเขียนโดยใช้โปรแกรมสาหรับเขียนเว็บไซต์ แล้วทาการ
ทดสอบการแสดงผลและ Link ต่างๆ ว่าเชื่อมโยงได้ถูกต้องหรื อไม่
ในขั้นตอนนี้ถา้ มีปริ มาณข้อมูลมากและมีการเชื่อมโยงที่ซบั ซ้อนก็จะ
ใช้เวลาค่อนข้างมากเพราะต้องคอยปรับแก้อยูเ่ รื่ อย ๆ
ขั้นตอนในการพัฒนาเว็บไซต์
• ลงทะเบียนชื่อเว็บไซต์ และจัดหาพืน้ ทีเ่ ก็บข้ อมูล
– สาหรับการสร้างเว็บไซต์ของอาจารย์จะมีชื่อเว็บไซต์ตามตัวอย่าง
ดังนี้
– Login: suchada จะมีชื่อเว็บไซต์วา่
http://netra.lpru.ac.th/~suchada/
– เนื้อที่ในการจัดทาเว็บไซต์จะมีพ้นื ที่ 10 MB
ขั้นตอนในการพัฒนาเว็บไซต์
• นาเว็บไซต์ ที่สร้ างขึน้ Upload ขึน้ Server และตรวจสอบความเรียบร้ อย
– คือ การคัดลอกข้อมูล จากเครื่ องของเราไปเก็บไว้ในเครื่ อง Server
ซึ่งการคัดลอกนี้เรี ยกว่า Upload โดยใช้โปรแกรมสาหรับการUpload
– เช่น โปรแกรม WinSCP, CuteFtp, WS_FTP (โปรแกรม
Dreamweaver มีความสามารถนี้อยูแ่ ล้ว)
ขั้นตอนในการพัฒนาเว็บไซต์
• ประกาศให้ โลกรับรู้
– เมื่อตรวจสอบความเรี ยบร้อยแล้ว ก็ถึงคราวที่จะชักชวนให้ผคู ้ นมา
ชมเว็บไซต์ โดยประชาสัมพันธ์ผา่ นทางสื่ อต่างๆ เช่น แลก Link กับ
เว็บไซต์อื่นๆ ฝากข้อความชักชวนไว้ตามกระดานข่าวต่างๆ หรื อจะ
เพิ่มชื่อเว็บไซต์ให้กบั แหล่งรวมข้อมูลบนอินเทอร์เน็ตอย่าง yahoo
หรื อ google
ข้ อแนะนาในการทาเว็บไซต์
ข้ อแนะนาในการทาเว็บไซต์
• การเลือกเนือ้ หาเว็บไซต์
– ถือเป็ นส่ วนสาคัญในการเริ่ มต้นทาเว็บไซต์ ทั้งการจัดโครงสร้าง
และ ความนิยมของเว็บไซต์ สาหรับผูเ้ ริ่ มต้น ซึ่งไม่แน่ใจว่าจะเลือก
หัวข้อใด
– ควรเริ่ มต้นจาก การสารวจตัวเองว่า ชอบ หรื อ สนใจสิ่ งใด มากที่สุด
หรื อ มีความรู ้เชี่ยวชาญด้านใดมากที่สุด
ข้ อแนะนาในการทาเว็บไซต์
• โครงสร้ างของเว็บไซต์
– มีจุดมุ่งหมายสาคัญ คือ การที่จะทาให้ ผูเ้ ข้าเยีย่ มชม สามารถค้นหา
ข้อมูล ในเว็บไซต์ได้อย่างเป็ นระบบ ประการแรกต้องพิจารณาถึง
ความเป็ นไปได้ของประเภทของผูเ้ ข้าเยีย่ มชมเพราะผูเ้ ยีย่ มชมแต่ละ
ประเภท ก็จะค้นหาข้อมูลที่แตกต่างกัน
– ดังนั้นสิ่ งที่ควรจะทาก็คือการจัดกลุ่มของข้อมูลโดยให้รวมหัวข้อย่อย
ต่างๆ ให้อยูใ่ นหัวข้อหลัก โดยมีจุดมุ่งหมายให้ จำนวนข้ อหลักน้ อย
ทีส่ ุ ด นอกจากนี้การจัดไฟล์และไดเร็ กทอรี่ ก็จะช่วยให้การดูแลรักษา
และการตรวจสอบความผิดพลาดของเว็บไซต์ง่ายยิง่ ขึ้น
ข้ อแนะนาในการทาเว็บไซต์
• โครงสร้ างของเว็บไซต์
– เช่น การจัดไฟล์รูปภาพไว้ที่เดียวกัน หรื อ จัดเว็บไซต์ที่เป็ นเรื่ อง
เดียวกันไว้ในไดเร็ กทอรี่ เดียวกัน เป็ นต้น
ข้ อแนะนาในการทาเว็บไซต์
• โครงสร้ างของเว็บไซต์
ข้ อแนะนาในการทาเว็บไซต์
• สามารถดูเว็บไซต์ ได้ ในหลายบราวเซอร์
– การทาเว็บไซต์ควรจะทาเพื่อให้สามารถดูได้จากทุกๆ Version ของ
Software ต่างๆ ไม่วา่ จะเป็ น Netscape, Communicator, Internet
Explorer หรื อ อื่นๆ การทาให้ทุกคนดูได้น้ ี ถือว่าเป็ นการขยายฐาน
ของผูเ้ ข้าเยีย่ มชม
ข้ อแนะนาในการทาเว็บไซต์
• ความเร็วในการโหลดเว็บไซต์
– สาหรับหน้าแรกของเว็บไซต์ไม่ควรให้โหลดข้อมูลช้า ปัจจัยที่จะ
กระทบต่อความเร็ ว ได้แก่ ขนาดของรู ปภาพที่ใช้ จานวนของรู ปภาพ
ที่ใช้ และปริ มาณของตัวอักษรที่อยูบ่ นหน้านั้นๆ อนึ่งความเร็ วใน
การโหลดเว็บไซต์ อาจอยูท่ ี่ Server ที่เว็บไซต์น้ นั ๆอยูว่ า่ มี
ความสามารถสูงเพียงใด ขนาดของรู ปภาพที่ใช้ควรจะมีขนาดไม่เกิน
20-30K ต่อรู ป
– ส่ วนประเภทของรู ปนั้นควรเป็ น GIF หรื อ JPEG ถ้าขนาดของ
รู ปภาพใหญ่เกินไป อาจตัดแบ่งให้ขนาดเล็กลง และใช้ตารางช่วยใน
การจัดรู ปภาพนั้นๆ
ข้ อแนะนาในการทาเว็บไซต์
• ความง่ ายในการค้ นหาข้ อมูล
– ปัจจัยหลักนั้นขึ้นอยูก่ บั โครงสร้างของเว็บไซต์ต้ งั แต่ตอนแรกที่มีการ
จัดโครงสร้างและจัดกลุ่มของข้อมูล นอกจากนี้ยงั มีปัจจัยอื่นๆ อีก
– เช่น การมี Navigator bar หรื อ แถบนาทาง ในทุกๆหน้าของเว็บไซต์
และถ้าสามารถให้บริ การ Search และ Sitemap ได้กจ็ ะเป็ นสิ่ งที่จะ
ช่วยให้คน้ หาข้อมูลได้ง่ายยิง่ ขึ้น
ข้ อแนะนาในการทาเว็บไซต์
• ตัวอักษร, ฉากหลัง และ สี
– สาหรับรู ปแบบที่นิยมใช้คือ ตัวอักษรสี ดา บนฉากหลังขาว ถ้า
ต้องการกาหนดประเภทของตัวอักษรควรใช้ที่เป็ นสากลนิยม
– เช่น ในกรณี ภาษาอังกฤษ อาจใช้ Arial หรื อTimes News Roman
เป็ นต้น ส่ วนภาษาไทย อาจใช้ MS Sans Serif
– การเลือกใช้ตวั อักษรภาษาไทยนั้นต้องระวังเป็ นพิเศษเพราะในกรณี
ที่เครื่ องผูเ้ ยีย่ มชมไม่มีตวั อักษรนั้นๆ อาจทาให้ผเู ้ ข้าเยีย่ มชมไม่
สามารถอ่านตัวอักษรได้เลย
ข้ อแนะนาในการทาเว็บไซต์
• รูปภาพ
– มีใช้กนั อยู่ 2 ประเภท คือ GIF หรือ JPEG หนึ่งในหลักการพิจารณา
การใช้ประเภทเพื่อประสิ ทธิภาพสูงสุ ด คือ จานวนสี ของรู ปภาพ
นั้นๆ
– ถ้าเป็ นภาพแต่งหรื อภาพถ่ายที่มีสีมากๆ ก็ควรใช้ไฟล์ประเภท JPEG
– แต่ถา้ เป็ นเพียงปุ่ มหรื อป้ ายที่มีสีไม่มากก็ควรใช้ GIF พร้อมกับ
พิจารณาเรื่ องขนาดของไฟล์ดว้ ย
– อนึ่งควรจะมีการคะเนขนาดของรู ปภาพที่จะใส่ บนเว็บไซต์ก่อน เพื่อ
จะได้ใช้ขนาด และอัตราส่ วน ที่พึงพอใจมากที่สุด
ข้ อแนะนาในการทาเว็บไซต์
• ส่ วนประกอบที่ขาดไม่ ได้ ของเว็บไซต์
– เช่น หัวข้อที่เกี่ยวกับผูจ้ ดั ทา อาจเป็ นประวัติความเป็ นมา และ/หรื อ
ข้อมูลปัจจุบนั (About us) เหล่านี้ช่วยเพิ่มความน่าเชื่อถือให้กบั ผูเ้ ข้า
เยีย่ มชม และเพิม่ เติมเกี่ยวกับแถบนาทาง Search Sitemap และยังมี
หัวข้ออื่นๆ อีก
– เช่น ข้อเสนอแนะ (Feedback) คาถามที่ถูกถามบ่อย (FAQ Frequently Asked Questions)
ข้ อแนะนาในการทาเว็บไซต์
• ก่อนทีจ่ ะนาเว็บไซต์ Upload ไปยัง Server ควรจะมีการทดสอบ
– โดยใช้ท้ งั Netscape Communicator และ Internet Explorer เพื่อดู
ความเร็ วในการโหลดว่าช้าหรื อเร็ วเพียงใด Link ทั้งภายใน และ
ภายนอกถูกต้องหรื อไม่ รู ปภาพถูกต้องหรื อไม่ พิสูจน์อกั ษร และ
อ่านข้อมูล เพื่อให้แน่ใจว่าข้อมูลต่างๆ ถูกต้อง
ข้ อแนะนาในการทาเว็บไซต์
• หลังจากทีเ่ ว็บไซต์ Publish
– ถ้าเป็ นไปได้ควรทดสอบ เหมือนกับที่ทดสอบก่อนที่จะ Publish เพื่อ
ความแน่ใจอีกครั้ง นอกจากการทดสอบแล้ว
– สิ่ งที่จะต้องกระทาหลัง Publish คือ การสารวจ ปรับปรุ ง และดูแล
รักษาเว็บไซต์ เมื่อพบความคิดดีๆ ที่อาจนามาปรับปรุ งเว็บไซต์ได้ก็
ควรจะจดบันทึกไว้ ถ้าเป็ นการแก้ไขนิดหน่อยก็ควรทาการแก้ไข
ทันที แต่ถา้ เป็ นการแก้ไขที่ตอ้ งใช้เวลานานควรรอสักระยะรวบรวม
สิ่ งที่ตอ้ งการแก้ไขทั้งหมด
LAB
Test1.html
<html>
<head><title> ชื่อของ Web page </title> </head>
<body>
เนือ้ หาของ Web page จะพิมพ์ อยู่ในส่ วนนี้
</body>
</html>
Test2.html
<html>
<head><title> Test 2 </title> </head>
<body>
เนือ้ หาของ Web page จะพิมพ์อยู่ในส่ วนนี้
ข้ อความนีเ้ ขียนเพิม่ เติม
</body>
</html>
Test3.html
<html>
<head><title> Test 3 </title> </head>
<body>
ขั้นตอนในการพัฒนาเว็บไซต์
1. เตรียมเนือ้ หาที่จะนาเสนอ
2. ออกแบบหน้ าตาของเว็บไซต์
3. เขียนและทดสอบ
4. ลงทะเบียนชื่อเว็บไซต์ และจัดหาพืน้ ทีเ่ ก็บข้ อมูล
5. Upload เว็บไซต์ และตรวจสอบความเรียบร้ อย
6. ประกาศให้ โลกรับรู้
</body>
</html>
Test4.html
<html>
<head><title> Test 4 </title> </head>
<body>
อินเทอร์ เน็ต หมายถึง ลักษณะของการเชื่อมต่ อของ
เครือข่ ายคอมพิวเตอร์ ท้งั เล็กและใหญ่ จานวนมากเข้ า
ด้ วยกัน โดยมีข้อกาหนดว่ าทุกเครือข่ ายทีเ่ ชื่อมต่ อถึงกัน
จะต้ องอยู่ภายใต้ มาตรฐานของการเชื่อมต่ อ(โปรโตคอล)
ทีถ่ ูกสร้ างขึน้ มาเพือ่ ใช้ งานบนเครือข่ ายแบบนีโ้ ดยเฉพาะ
ซึ่งเรียกว่ า TCP/IP
</body>
</html>
Test5.html
<html>
<head><title> Test 5 </title> </head>
<body>
ขึน้ บรรทัดใหม่ 1 แท๊ ก <br>
ขึน้ บรรทัดใหม่ 2 แท๊ ก <p>
ขึน้ บรรทัดใหม่ 3 แท๊ ก <p>&nbsp;</p>
ข้ อความ
</body>
</html>
Test6.html
<html>
<head><title> Test 6 </title> </head>
<body>
ข้ อความนีไ้ ม่ ได้ จัดตาแหน่ ง
<p align=“left”> ข้ อความนีก้ าหนดให้ ชิดซ้ าย </p>
<p align=“center”> ข้ อความนีก้ าหนดให้ ชิดกึง่ กลาง </p>
<p align=“right”> ข้ อความนีก้ าหนดให้ ชิดขวา </p>
</body>
</html>
Test7.html
<html>
<head><title> Test 7 </title> </head>
<body>
ข้ อความนีไ้ ม่ ได้ จัดตาแหน่ ง
< div align=“left”> ข้ อความนีก้ าหนดให้ ชิดซ้ าย </div>
< div align=“center”> ข้ อความนีก้ าหนดให้ ชิดกึง่ กลาง </div>
< div align=“right”> ข้ อความนีก้ าหนดให้ ชิดขวา </div>
</body>
</html>
Test8.html
<html>
<head><title> Test 8 </title> </head>
<body>
ข้ อความนีไ้ ม่ ได้ จัดตาแหน่ ง
<dd> ข้ อความนีม้ ีการจัดตาแหน่ งให้ ย่อหน้ าด้ วยแท๊ ก เป็ น
ตัวอย่ างการย่ อหน้ าแบบง่ าย โดยจะย่ อหน้ าประมาณ 5
ตัวอักษร ทาให้ เกิดความสวยงามได้
</body>
</html>
Test9.html
<html>
<head><title> Test 9 </title> </head>
<body>
ข้ อความนีไ้ ม่ ได้ จัดตาแหน่ ง
< blockquote> ข้ อความนีม้ ีการจัดตาแหน่ งการเยือ้ งของข้ อความ
ด้ วยแท๊ ก จะเป็ นตัวอย่ างการเยือ้ งข้ อความเข้ ามา <
/blockquote>
</body>
</html>
Test10.html
<html>
<head><title> Test 10 </title> </head>
<body>
ข้ อความนีไ้ ม่ ได้ จัดตาแหน่ ง
< blockquote> ข้ อความนีม้ ีการจัดตาแหน่ งให้ ย่อหน้ าด้ วยแท๊ ก
เป็ นตัวอย่างการย่ อหน้ าแบบง่ าย โดยจะย่อหน้ าประมาณ 5
ตัวอักษร ทาให้ เกิดความสวยงามได้
< blockquote> <dd>ข้ อความนีม้ ีการจัดตาแหน่ งการเยือ้ งและ
การย่อหน้ าของข้ อความด้ วยแท๊ ก เพือ่ ให้ เกิดความสวยงาม
มากยิง่ ขึน้ < /blockquote> < /blockquote>
</body>
</html>
Test11.html
<html>
<head><title> Test 11 </title> </head>
<body>
เส้ นข้ างล่ างนีไ้ ม่ ใช้ attribute อะไรเลย
<hr>
เส้ นข้ างล่ างกาหนดความหนา attribute size= 10 px
<hr size=“10px”>
เส้ นข้ างล่ างกาหนดความหนา attribute size= 10 px และให้ เป็ นเส้ นทึบด้ วย
noshade
<hr size=“10px” noshade>
เส้ นข้ างล่ างกาหนดความกว้ าง attribute width= 80%
<hr width =“80%”>
เส้ นข้ างล่ างกาหนดความกว้ าง attribute width= 300 px
<hr width= “300px”>
เส้ นข้ างล่ างกาหนดความกว้ าง attribute width= 300 px และจัดซ้ ายด้ วย
align= left
<hr width= “300px” align=“left”>
</body>
</html>
ตัวอย่ าง
1. html
คือ ……………………………………….
วิธีเขียน <html>……………</html>
2. head
คือ
วิธีเขียน <head>…………......</head>