การออกแบบและจัดทำเว็บไซต์ด้วยภาษา html by แสงตะวัน ยามอัสดง

เอกสารประกอบการเรียนรู้ รายวิชา

การออกแบบและเขียนเว็บไซต์ รหัสวิชา ง40206 ระดับชั้นมัธยมศึกษาปี ที่ 6 ตามหลักสตรการศึ กษาขั้นพืน้ ฐาน พทธศั ู ุ กราช 2544

กล่ ุมสาระการเรียนรู้ การงานอาชีพและเทคโนโลยี โรงเรียนเบ็ญจะมะมหาราช

คํานํา เอกสารประกอบการเรี ยนรู ้ รายวิชา การออกแบบและเขียนเว็บไซต์ รหัสวิชา ง40206 ่ ้ ได้เรี ยบเรี ยงขึ้ นโดยยึดกรอบสาระและมาตรฐานการเรี ยนรู ้ช่วงชั้ น ระดับชั้ นมัธยมศึกษาปี ที่ 6 เลมนี ที่ 4 กลุ่มสาระการเรี ยนรู ้การงานอาชีพและเทคโนโลยี สาระที่ 3, 4 และ 5 ตามหลักสู ตรการศึกษา ขั้นพื้นฐาน พุทธศักราช 2544 ่ ้ แบงออกเป็ ่ ่ เนื้ อหาในเอกสารเลมนี น 7 หนวยการเรี ยนรู ้ ประกอบด้วย อินเทอร์ เน็ตและ ตกแต่ ง เว็บ เพจด้ ว ยรปภาพ ควบคมให้ การสื่ อ สาร ภาษา HTML ู ุ เว็บ เพจสวยด้ ว ยตาราง การเชื่อมโยงเนือ้ หาในหน้ าเว็บเพจ เทคนิคพิเศษในการสร้ างความสนใจให้ เว็บเพจ และการเผยแพร่ ่ ่ มีตวั อยางกจกรรมการฝึ ่ ิ ่ นขั้ นตอน เว็บไซต์ บนเครือข่ าย นอกจากนี้ ในแตละหนวยได้ กปฏิบตั ิอยางเป็ ิ ั เ้ รี ยนศึกษาเพิ่มเติม และคําถามท้ายบท เพื่อทบทวนความรู ้ความเข้าใจ กจกรรมเสนอแนะให้ กบผู และฝึ กทักษะในการปฏิบตั ิงานอีกด้วย นอกจากเนื้ อหาในเอกสารเล่มนี้ แล้ว ผูเ้ ขียนยังได้จดั ทําเนื้ อหาบนเว็บไซต์ให้สอดคล้องโดย ่ ผเู ้ รี ยนได้ศึกษาเพิ่มเติม ที่ http://www.krumontree.com/html/ และสามารถดาวน์โหลด มีไฟล์ตวั อยางให้ ่ ้ างความเข้าใจในการฝึ กทักษะปฏิบตั ิอีกด้วย ไฟล์ตวั อยางมาแกไขสร้ ่ ง่ วา่ เอกสารประกอบการเรี ยนรู ้รายวิชา การออกแบบและเขียนเว็บไซต์ เลมนี ่ ้ หวังเป็ นอยางยิ ่ เ้ รี ยนและผูส้ อนที่จะนําไปใช้ในการจัดการเรี ยนรู ้ให้บรรลุตามวัตถุประสงค์ จะเป็ นประโยชน์ท้ งั ตอผู และมาตรฐานการเรี ยนรู ้ของกลุ่มสาระการเรี ยนรู ้การงานอาชีพและเทคโนโลยีต่อไป

นายมนตรี โคตรคันทา กลุ่มงานคอมพิวเตอร์ โรงเรี ยนเบ็ญจะมะมหาราช

สารบัญ หน้ า หน่ วยที่ 1 อินเทอร์ เน็ตและการสื่ อสาร ่ นเทอร์เน็ต เครื อขายอิ ่ นเทอร์เน็ต ประโยชน์และโทษของเครื อขายอิ การนําเสนอข้อมูลบนเว็บไซต์ ่ ลักษณะเดนของการนํ าเสนอข้อมูลบนเว็บเพจ หลักการออกแบบเว็บไซต์ องค์ประกอบของการออกแบบเว็บไซต์ การออกแบบเว็บไซต์ การออกแบบโครงสร้างเว็บไซต์ หน้าตาและสี สนั ของเว็บไซต์ การเลือกโปรแกรมสร้างเว็บไซต์ ิ กจกรรมเสนอแนะและคํ าถามท้ายบท หน่ วยที่ 2 ภาษา HTML ํ ดภาษา HTML กาเนิ ่ ่ ่คิด ภาษา HTML ไมยากอยางที โครงสร้างภาษา HTML ่ ํ ั อ่ ระบุไฟล์ HTML - สวนกากบเพื ่ วเอกสาร (Header) - สวนหั ่ วเอกสาร (Body) - สวนตั การจัดข้อความในเอกสาร การจัดข้อความแบบรายการ ข้อควรจํา ิ กจกรรมเสนอแนะและคํ าถามท้ายบท หน่ วยที่ 3 ตกแต่ งเว็บเพจด้ วยรปภาพ ู ชนิดของรู ปภาพ ่ ่มาของภาพ แหลงที คําสัง่ ในการแทรกภาพในเว็บเพจ ิ กจกรรมเสนอแนะและคํ าถามท้ายบท

1 2 3 7 8 9 9 12 15 17 21 24 25 26 27 30 30 31 35 39 42 45 46 47 48 49 50 58

หน้ า หน่ วยที่ 4 ควบคมให้ ุ เว็บเพจสวยด้ วยตาราง โครงสร้างของตาราง ่ คําสัง่ สวนขยายเพิ ม่ เติมในตาราง ิ กจกรรมเสนอแนะและคํ าถามท้ายบท หน่ วยที่ 5 การเชื่อมโยงเนือ้ หาในหน้ าเว็บเพจ การสร้างการเชื่อมโยงเว็บไซต์ ลักษณะของการเชื่อมโยง ํ การกาหนดสี ของจุดเชื่อมโยง คําสัง่ ในการเชื่อมโยง คําสัง่ ในการเชื่อมโยงภายในเอกสารเดียวกนั คําสัง่ ในการเชื่อมโยงไปหน้าเอกสารอื่นภายในเว็บไซต์เดียวกนั ่ บไซต์ คําสัง่ ในการเชื่อมโยงไปหน้าเอกสารอื่นในตางเว็ การใช้รูปภาพแทนข้อความในคําสัง่ เชื่อมโยง การเชื่อมโยงไปยังอีเมล์ การเชื่อมโยงไปยังไฟล์เอกสาร หรื อไฟล์อื่น ิ กจกรรมเสนอแนะและคํ าถามท้ายบท หน่ วยที่ 6 เทคนิคพิเศษในการสร้ างความสนใจให้ เว็บเพจ ่ ั บไซต์ การสร้างความนาสนใจให้ กบเว็ ่ วยสไตล์ชีท Style Sheet สร้างความเดนด้ ่ เทคนิคนาสนใจสํ าหรับนําไปใช้ในเว็บเพจ - การทําให้หน้าเว็บเพจเปลี่ยนไปโดยอัตโนมัติ ้ ตโนมัติ - การทําให้หน้าเว็บเพจบันทึกวันเวลาที่แกไขอั ่ ยงเพลงให้หน้าเว็บเพจ - การใสเสี - การสร้างเว็บเพจให้มีการแสดงผลแบบเฟรม ิ กจกรรมเสนอแ นะและคําถามท้ายบท

59 60 62 70 71 72 72 72 73 73 75 75 76 80 81 84 85 86 86 90 90 90 91 92 96

หน้ า หน่ วยที่ 7 การเผยแพร่ เว็บไซต์ บนเครือข่ าย ่ นเทอร์เน็ต การนําเสนอเว็บไซต์สู่ เครื อขายอิ การสมัครใช้พ้ืนที่ฟรี (Free Web Hosting) ่ ่ ่ การสงไฟล์ ไปยังเครื่ องแมขาย ่ - การสงไฟล์ ดว้ ยระบบ File Manager ่ - การสงไฟล์ ดว้ ย FTP ่ - การสงไฟล์ ดว้ ยบราวเซอร์ การจดทะเบียนโดเมนเนม ิ กจกรรมเสนอแนะและคํ าถามท้ายบท ภาคผนวก ่ และเลขฐานสิ บหก ตารางแสดงคาสี บรรณานกรม ุ

97 98 98 99 99 103 104 105 108

109 110

หน่ วยที่ 1 อินเทอร์ เน็ตและการสื่ อสาร ผลการเรียนรู้ ทคี่ าดหวัง ่ นเทอร์เน็ตและการสื่ อสารผานเครื ่ ่ ได้ อขาย 1. อธิบายความหมายของเครื อขายอิ ่ 2. อธิ บายประโยชน์และโทษของอิ นเทอร์ เน็ ตและการนํามาใช้ในชี วิตประจําวันได้อยาง เหมาะสม 3. อธิบายหลักการนําเสนอข้อมูลด้วยเว็บไซต์ ภาษา HTML และบราวเซอร์ 4. อธิบายหลักการออกแบบเว็บไซต์ทวั่ ไปได้ ่ 5. เลือกโปรแกรมสร้างเว็บไซต์มาใช้งานได้อยางเหมาะสม

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

คิดแล้วตอบ  ่ มากมาย เชน ่ Hi5, นัก เรี ย นเคยเข้าใช้ง านเว็บไซต์สัง คมออนไลน์ ย อดนิ ย มตางๆ ่ ่ เว็บไซต์เหลานี ่ ้ สร้างได้อยา่ งไร? Facebook, Twitter นักเรี ยนเคยสังเกตหรื อไมวา

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

เครือข่ ายอินเทอร์ เน็ต ่ ่ ่ อินเทอร์ เน็ต (Internet) หมายถึง เครื อขายคอมพิ วเตอร์ขนาดใหญ่ ที่มีการเชื่อมตอระหวาง ่ ่ ว่ โลก โดยภาษาที่ใช้สื่อสารกนระหวางคอมพิ ั ่ เครื อขายหลายๆ เครื อขายทั วเตอร์ ที่เรี ยกวา่ โพรโทคอล ่ ้ สามารถสื่ อสารถึงกนั ได้ในหลายๆ ทาง อาทิเชน่ อีเมล์ เว็บบอร์ด และ (Protocol) ผูใ้ ช้เครื อขายนี ่ ่ รวมทั้ งคัดลอกแฟ้ มข้อมูลและโปรแกรมมาใช้ได้ สามารถสื บค้นข้อมูลและขาวสารตางๆ

ปั จจุบนั จํานวนผูใ้ ช้อินเทอร์เน็ตทัว่ โลกโดยประมาณ 1,596 ล้านคนเศษ (ข้อมูล ณ เดือน ่ พบวาทวี ่ ปที่มีผใู ้ ช้อินเทอร์ เน็ตมากที่สุดคือ ทวีป มีนาคม 2552) โดยเมื่อเปรี ยบเทียบในทวีปตางๆ เอเชีย คิดเป็ นร้อยละ 41.2 รองลงมาได้แก่ ทวีปยุโรป ร้อยละ 24.6 และอเมริ กาเหนื อ ร้อยละ 15.7 ่ แตหากจั ดลําดับจํานวนผูใ้ ช้ตามประเทศ ประเทศที่มีประชากรผูใ้ ช้อินเทอร์ เน็ตมากที่สุดคือ ประเทศจีน คิดเป็ นจํานวน 298 ล้านคน รองลงมาคือ สหรัฐอเมริ กา ญี่ปุ่น อินเดีย ตามลําดับ ่ อขายไปยั ่ ่ ในประเทศไทยของเรานับตั้ งแตมี่ การเชื่ อมตอเครื งตางประเทศครั ้ งแรก เมื่อปี ่ นเทอร์เน็ตกเพิ ็ ่มมากขึ้ น พ.ศ. 2530 จนถึงปั จจุบนั อัตราการเจริ ญเติบโตของการใช้งานเครื อขายอิ ่ จจุบนั มีจาํ นวนประมาณ 13.4 ล้านคน ทําให้หนวยงานทั ่ เรื่ อยๆ คาดวาปั ้ งภาครัฐ องค์กรภาคเอกชน ่ นเทอร์เน็ต เชน่ บริ ษทั ห้างร้าน สถาบันการศึกษา มองเห็นความสําคัญและประโยชน์จากเครื อขายอิ ่ ไปสู่ ชุมชน และสังคมโลก มีการพัฒนา ่ ประชาสัมพันธ์กิจกรรมตางๆ การใช้เผยแพรข้่ อมูล ขาวสาร ่ นเทอร์ เน็ต (e-Commerce) เพื่อการซื้ อขายตรงสู่ ผบู ้ ริ โภค ไปสู่ การทําธุ รกรรมการค้าบนเครื อขายอิ ในภาคการศึกษาก็มีการใช้ประโยชน์ในการเรี ยนรู ้ออนไลน์ (e-Learning) โรงเรี ยน สถาบันการศึกษา ้ ญหาการขาดแคลน ่ ํ งเรงพั ่ ฒนาระบบการจัดการเรี ยนการสอนออนไลน์ เพื่อแกไขปั หลายแหงกาลั ่ ั ใ นกลุ่ ม สถานศึ ก ษาที่ มี ครู แ ละผูเ้ ชี่ ย วชาญในบางสาขาวิ ช า ให้ส ามารถใช้บ ทเรี ย นรวมกนได้ ่ หลักสู ตรเดียวกนั ในหนวยงานภาครั ฐที่สามารถนําเอาเทคโนโลยีอินเทอร์เน็ตมาใช้งานและองค์กร

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

่ มให้ประชาชนชําระภาษีผาน ่ ที่ประสบผลสําเร็ จมากคือ กรมสรรพากร (e-Revenue) ในการสงเสริ ่ ่ ทางระบบออนไลน์ ซึ่งสะดวกและรวดเร็ วกวาการไปชํ าระที่หนวยงาน สรรพากรโดยตรง

ประโยชน์ และโทษของเครือข่ ายอินเทอร์ เน็ต ่ นเทคโนโลยี ที่ มี บ ทบาทมากในปั จ จุ บ ัน เพราะเป็ น อิ น เทอร์ เ น็ ต ( Internet) นับ วาเป็ ่ ่ ่น ตางเมื ่ อง ตาง ่ ประเทศเข้าด้วยกนัเป็ น เครื อขายของโลกที ่เชื่ อมเอาเครื่ องคอมพิวเตอร์ จากตางถิ ่ ่ อสารกนผานเครื ั ่ ่ ้ ่ คล้ายดัง่ ใยแมงมุม (เครื อขายเวิ ่ ลด์ไวด์เว็บ www) มีการติดตอสื อขายนี โครงขาย ่ ่ อสารกนั แทนการเขียน-อานจดหมายบนกระดาษ ่ ่ เชน่ การใช้อีเมล์ (e-mail) ติดตอสื การถายโอน / ่ ่ องคอมพิวเตอร์ ที่อยูห่ ่ างไกลกนั การสื บค้นหาข้อมูลผาน ่ แลกเปลี่ยนข้อมูล (ftp) ไปมาระหวางเครื Search engine เชน ่ Google, Bing หรื อการใช้งานเว็บไซต์สังคมออนไลน์หลากหลายเพื่อเผยแพร่ ่ คคล เชน่ Hi5, Facebook, Twitter, Blog เป็ นต้น ข้อมูลสวนบุ ิ นอกจากการใช้งานเพื่อความบันเทิงแล้ว ยังมีการใช้เพื่อธุรกจการค้ า ขายสิ นค้าออนไลน์ (e-Commerce) ผานทางเว็ ่ บไซต์มากยิ่งขึ้ น เพราะไมต้่ องลงทุนด้านอาคารสถานที่ คลังสิ นค้า ่ นค้า ระบบรับชําระเงินออนไลน์ และการจัดสงสิ ่ นค้า (Logistics) ไป เพียงแตมี่ ระบบจัดจําหนายสิ ้ ยังผูซ้ ้ือปลายทาง ซึ่งในปั จจุบนั มีความกาวหน้ าไปมาก ในระบบการศึกษา สถาบันการศึกษา มหาวิทยาลัย โรงเรี ยน ทั้ งในและนอกประเทศ กมี็ ่ ยนรู ้บนเว็บไซต์เครื อขายอิ ่ นเทอร์ เน็ต ให้บริ การกบผู ั เ้ รี ยนได้ท้ งั ในระบบ การพัฒนาสร้างแหลงเรี และนอกระบบ ผูเ้ รี ยนสามารถเข้าถึงบทเรี ยน การทดสอบได้จากทุกๆ ที่ในโลกที่สามารถเชื่อมตอ่ ั อขายอิ ่ นเทอร์ เน็ตได้ จึงเป็ นการเปิ ดโอกาสให้ผูเ้ รี ยนได้เลือกเรี ยนตามความสามารถ เข้ากบเครื ั ความสนใจ และเวลาที่สะดวกในการเข้าเรี ยน เรี ยนไปพร้อมกบการทํ างานหรื อประกอบอาชีพอื่น ํ ่ ดเชื่อมโยงที่ผสู ้ อนได้ สามารถศึกษาเพิ่มเติมในเนื้ อหาที่เข้มข้นนอกเหนื อจากผูส้ อนกาหนด ผานจุ ่ ข้าใจได้ทุกเมื่อ ด้วยวิธีการ ให้คาํ แนะนําไว้ หรื อย้อนกลับไปศึกษาบทเรี ยนบางบทที่ยากตอการเ ่ อมูลดิจิตอล (Digital Library) อื่นๆ ที่มีผสู ้ ร้างไว้มากมายในหลากหลายภาษา เรี ยนรู ้จากแหลงข้ ่ หนวยงาน ราชการ องค์กร สถาบัน บริ ษทั ห้างร้าน จึงสร้างเว็บไซต์ของตนเองเพื่อเป็ นการ ่ นเทอร์เน็ตมาใช้งาน เพื่อการประชาสัมพันธ์ข่าวสาร และกจกรรมของ ิ นําประโยชน์ของเครื อขายอิ ่ ่ บ วารสารหรื อสื่ อสิ่ งพิมพ์อื่นๆ องค์กร เพราะมีค่าใช้จ่ายน้อยกวาการทํ าโฆษณาด้วยเอกสาร แผนพั ั ่ เมื่อเปรี ยบเทียบกนในลั กษณะการเข้าถึงข้อมูล จํานวนผูช้ ม และไมมี่ ค่าใช้จ่ายในการจัดสงไปยั ง ่ ่ ั ผูร้ ับขาวสาร แม้วาจะอยู ห่ ่ างไกลกนคนละซี กโลก และยังสามารถนําเสนอได้ท้ งั ตัวอักษร ข้อความ ่ รู ปภาพ เสี ยง ภาพเคลื่อนไหวและไฟล์มลั ติมีเดียอื่นๆ ทําให้มีความนาสนใจ ชวนติดตาม สื่ อ ความหมายได้ตรงจุดประสงค์มากกวา่ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

ห้ องสมุดขนาดใหญ่ หนังสื อนับพันเล่ ม ค้ นหาง่ ายขึน้ เมื่อถูกเก็บเป็ นสื่ อดิจิตอล

ในทางการศึกษาเว็บไซต์เป็ นเสมือนห้องสมุดดิ จิตอลขนาดใหญ่ ที่ มีขอ้ มูลมากมาย มหาศาล มีการเพิ่มข้อมูล ความเคลื่อนไหวทางสังคม วิทยาการ เทคโนโลยี สิ่ งประดิษฐ์ใหมๆ่ ทั้ ง ทางด้านวิทยาศาสตร์ การแพทย์ อุตสาหกรรม เกษตรกรรม ปรากฏอยูใ่ นเว็บไซต์หลากหลายภาษา ่ ่ อมูลที่เกยวข้ ี่ องของการพัฒนา สามารถค้นหาได้อยางรวดเร็ ว และมีการเชื่อมโยงเข้าไปยังแหลงข้ ิ และวิจยั ในศาสตร์สาขานั้ นๆ ทําให้เกดการเรี ยนรู ้เชื่อมโยงไร้พรมแดน ่ นเทอร์ เน็ตจะมีประโยชน์มากมายมหาศาลเพียงใดกตาม ็ ในอีกมุมหนึ่ ง แม้ว่า เครื อขายอิ ่ ดระวังหรื อเชื่ อมัน่ มากเกนไปใน ิ ่ นเทอร์ เน็ตกกอให้ ็ ่ เกดโทษขึ ิ เครื อขายอิ ้ งานไมระมั ้ นได้ หากผูใช้ การใช้สื่อและเทคโนโลยี เชน่ ิ ่ อยู่ 1. โรคติดอินเทอร์ เน็ต (Webaholic) ถ้าผูใ้ ช้งานหมกมุ่นเกนไปในการใช้ งาน ขาดไมได้ ่ างานอยางอื ่ ่น เสพติดการสนทนาออนไลน์ (Chat) การเลนเกม ่ หน้าจอคอมพิวเตอร์ ท้ งั วัน ไมทํ ่ ่ อย 4 อยาง ่ เป็ นเวลานานอยางน้ ่ อย 1 ปี ถือได้ว่า มี (Game Online) ผูท้ ี่มีคุณสมบัติดงั ตอไปนี ้ อยางน้ อาการติดอินเทอร์เน็ต ั นเทอร์เน็ต แม้ในเวลาที่ไมได้ ่ ต่อกบอิ ั นเทอร์เน็ต  รู ้สึกหมกมุ่นกบอิ  มีความต้องการใช้อินเทอร์เน็ตเป็ นเวลานานขึ้ น ่  ไมสามารถควบคุ มการใช้อินเทอร์เน็ตได้  รู ้สึกหงุดหงิดเมื่อต้องใช้อินเทอร์เน็ตน้อยลงหรื อหยุดใช้ ่  ใช้อินเทอร์เน็ตเป็ นวิธีในการหลีกเลี่ยงปั ญหาหรื อคิดวาการใชอิ นเทอร์เน็ตทําให้ ตนเองรู ้สึกดีข้ ึน  หลอกคนในครอบครัวหรื อเพื่อน เรื่ องการใช้อินเทอร์เน็ตของตัวเอง มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

ิ ่  การใช้อินเทอร์เน็ตทําให้เกดการเสี ่ ยงตอการสู ญเสี ยงาน การเรี ยน และความสัมพันธ์ ั คคลอื่น ยังใช้อินเทอร์เน็ตถึงแม้วาต้ ่ องเสี ยคาใช้ ่ จ่ายมาก กบบุ ่ ่ หดหู่ กระวนกระวายเมื่อเลิกใช้อินเทอร์เน็ต  มีอาการผิดปกติ อยางเชน ่ ่ตวั เองได้ต้งั ใจไว้  ใช้เวลาในการใช้อินเทอร์เน็ตนานกวาที ่ ที่มี 2. เรื่ องอนาจารผิดศีลธรรม (Pornography/Indecent Content) เรื่ องของข้อมูลตางๆ ่ ลธรรม ลามกอนาจาร หรื อรวมถึงภาพโป๊ เปลือยตางๆ ่ นั้ นเป็ นเรื่ องที่มีมา เนื้ อหาไปในทางขัดตอศี ่ ่ ่ ่ งเนื่ องจากสมัยกอนเป็ นานพอสมควรแล้วบนโลกอินเทอร์ เน็ต แตไมโจงแจ้ นยุคที่ WWW ยังไม่ ่ จจุบนั ภาพเหลานี ่ ้ เป็ นที่โจงแจ้ ่ งปรากฏบนอินเทอร์เน็ต พัฒนามากนัก ทําให้ไมมี่ ภาพออกมา แตในปั ่ ้ สามารถเข้าสู่ เด็กและเยาวชนได้รวดเร็ ว โดยผูป้ กครองไมสามารถที ่ ค้นหาได้ง่าย และสิ่ งเหลานี ่ จะ ่ นเทอร์เน็ตนั้ นเป็ นโลกที่ไร้พรมแดนและเปิ ดกว้างทําให้สื่อเหลานี ่ ้ ให้ความดูแลได้เต็มที่ เพราะวาอิ ่ ่ ่ ้ ข้ ึนมาได้ รวมทั้ ง สามรถเผยแพรไปได้ รวดเร็ ว จนเราไมสามารถจั บกุมหรื อเอาผิดผูท้ ี่ทาํ สิ่ งเหลานี ่ ่ ั ทั้ งเรื่ องข้อห้ามและบทลงโทษ กฎหมายในแตละประเทศก ม็ ีความแตกตางกน 3. การโจมตีจากไวรัสและซอฟท์ แวร์ อนั ตราย (Virus, Worm, Spyware, Trojan, Malware) ่ ้ นคอนข้ ่ างจะอันตรายจากการเชื่ อมโยงเครื่ องคอมพิวเตอร์ ที่ไร้ขอบเขต จึง ในโลกของเครื อขายนั ่ ่ อาจมีการรับ-สงไฟล์ ที่มีอนั ตรายตอระบบปฏิ บตั ิการ และงานสําคัญในเครื่ องคอมพิวเตอร์ ได้ ซึ่ ง ิ ่ ั ทั้ งเพื่อปกป้ องสิ ทธิ แหงซอฟท์ ่ เกดจากการกระทํ าของมนุ ษย์ที่มีจุดประสงค์แตกตางกนไป แวร์ ที่ ่ ้ ได้แก่ ตนเองผลิตขึ้ น หรื อเพื่อทําการโจรกรรมข้อมูลสําคัญของผูอ้ ื่น ซอฟท์แวร์อนั ตรายเหลานี ่ ้ อไปติดไฟล์อื่นๆ ในคอมพิวเตอร์โดยการแนบตัวมันเองเข้าไปในไฟล์  Virus = แพรเชื ่ ่ วเองไปยังคอมพิวเตอร์ เครื่ องอื่นๆ ได้ตอ้ งอาศัยไฟล์พาหะ การกระทํา ไมสามารถสงตั ่ ั ที่มีผลตอคอมพิ วเตอร์คือ สร้างความเสี ยหายให้กบไฟล์ ข้อมูล ่ วเองไปยังคอมพิวเตอร์ เครื่ องอื่นๆ ได้อยาง ่  Worm = คัดลอกตัวเองและสามารถสงตั ่ ่ ่ ่ ้ อไปติดไฟล์ อิสระ โดยอาศัยอีเมลล์หรื อชองโหวของระบบปฏิ บตั ิการ มักจะไมแพรเชื ่ ั ่ อื่น การกระทําที่มีผลตอคอมพิ วเตอร์คือ มักจะสร้างความเสี ยหายให้กบระบบเครื อขาย ่ ่ ่ เลยในบางขณะ อเชื่อมตอไมได้ เชน่ ทําให้ความเร็ วในการเชื่อมตอลดลงหรื ่ ่ ้ อไปติดไฟล์อื่นๆ ไมสามารถสงตั ่ ่ วเองไปยังคอมพิวเตอร์ เครื่ อง  Trojan = ไมแพรเชื ่ ่ องเอง หรื อ อื่นๆ ได้ ต้องอาศัยการหลอกลวงผูใ้ ช้งานให้ดาวโหลดไฟล์เอาไปใสเครื ่ การกระทําที่มีผลตอคอมพิ ่ ด้วยวิธีการอื่นๆ แล้วผูใ้ ช้งานทําการเปิ ดไฟล์ดงั กลาว วเตอร์ ่ ดีเข้ามาควบคุมเครื่ องที่ติดเชื้ อจากระยะไกล ซึ่ งจะทํา คือ เปิ ดโอกาสให้ผไู ้ มประสงค์ ็ ให้เกดความเสี ิ อะไรกได้ ยหาย

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร



่ ่ ้ อไปติดไฟล์อื่นๆ ไมสามารถสงตั ่ ่ วเองไปยังคอมพิวเตอร์ เครื่ อง ไมแพรเชื ่ ่ องเองเหมือนกบั อื่นๆ ได้ ต้องอาศัยการหลอกลวงผูใ้ ช้งานให้ดาวโหลดเอาไปใสเครื ่ ่ web browser ในการติดตั้ งตัวเองลงในเครื่ อง เชน่ มี โทรจัน หรื ออาศัยชองโหวของ ่ pop-up ให้คลิกยืนยันหรื อยกเลิกการกระทําใดๆ ที่ผใู ้ ช้งานไมทั่ นสังเกต และ หน้าตาง ิ ่ ่ เกดความรํ าคาญ จึงกดปุ่ ม Yes/No, OK/Cancel เพื่อปิ ดหน้าตางไป แตในความจริ งทุก ่ กตั้ งคาไว้ ่ เป็ นการยืนยันการติดตั้ งสปายแวร์ เหลานี ่ ้ ท้ งั หมด (วิธีแกไข ้ ให้ ปุ่ มดังกลาวถู ่ ้ น) การกระทําที่มีผลตอคอมพิ ่ คลิกที่ปุมกากบาทมุมบนขวาเพื่อปิ ดหน้าตางนั วเตอร์คือ ่ วของผู ้ ใช้งาน รบกวนและละเมิดความเป็ นสวนตั ่ Malicious Software หมายถึงโปรแกรมคอมพิวเตอร์ ทุกชนิ ดที่มี  Malware ยอมาจาก ่ ่ จุดประสงค์ร้ายตอคอมพิ วเตอร์ และเครื อขาย หรื อเป็ นคําที่ใช้เรี ยกโปรแกรมที่มี ่ ็ ่ virus, จุดประสงค์ร้ายตอระบบคอมพิ วเตอร์ทุกชนิดแบบรวมๆ โปรแกรมพวกนี้ กเชน worm, trojan, spyware, keylogger, hack tool, dialer, phishing, toolbar, BHO และ อื่นๆ  Phishing = เป็ นเทคนิ คการทํา social engineer โดยใช้อีเมลล์เพื่อหลอกให้เหยื่อ หลงเชื่อ เข้าไปยังเว็บไซต์หลอกลวง กระทําการเปิ ดเผยข้อมูลการทําธุรกรรมทางการเงิน ้ อมูลบัตรเครดิตหรื อแกไข ้ online bank account บนอินเตอร์เน็ตเชน่ แกไขข้ Spyware =

่ อีกมากมายที่กลายเป็ นขาวให้ ่ เราได้รับทราบอยูเ่ สมอ นอกจากนี้ ยังมีเรื่ องหลอกหลวงตางๆ ่ เมล์หลอกลวงวาเราเป็ ่ เชน่ สงอี นผูโ้ ชคดีได้รับรางวัลจากการชิ งโชค การขายสิ นค้าที่ไมมี่ อยู่จริ ง ่ หลอกให้โอนเงิน หรื อแม้แต่การพยายามในการเจาะทําลายระบบเพื่อล้วงความลับหรื อข้อมูลตางๆ ่ นเทอร์ เน็ตจึงต้องมีความระมัดระวังในการใช้งานมากเป็ น ดังนั้ น การใช้งานเครื อขายอิ ่ ่ ่อไมให้ ่ ตกเป็ นเหยือ่ จาก พิเศษ มีวิจารณญาณในการรับข้อมูลขาวสาร กลัน่ กรองจากหลายๆ แหลงเพื ่ จฉาชีพไฮเทคเหลานี ่ ้ เหลามิ

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

การนําเสนอข้ อมลูบนเว็บไซต์ ่ ่ การนําเสนอข้อมูลบนเว็บไซต์น้ นั มีลกั ษณะเดนกวาการนํ าเสนอด้วยเอกสารสิ่ งพิมพ์ เพราะ ่ ่ ด มีการจัด มีความสามารถในการจัดองค์ประกอบของการนําเสนอเรื่ องราว หมวดหมู่ ได้อยางเดนชั ความเชื่อมโยง ใช้แถบนําทาง (Navigator) ให้ผชู ้ มสามารถเข้าไปยังเนื้ อหาที่สนใจได้ทนั ที การจัดทํา ่ ตรึ งใจผูช้ ม จึงเป็ นทั้ งศาสตร์และศิลป์ ที่จะต้องเรี ยนรู ้และทําความเข้าใจ เว็บไซต์ให้มีความนาสนใจ ่ ่ ่อง เพื่อให้ได้ผลงานที่ดี มีผเู ้ ข้าชมจํานวนมากอยางตอเนื เว็บไซต์เป็ นเอกสาร HTML (Hyper Text Markup Language) ่ นย์ ที่ถูกพัฒนาขึ้ นโดย ทิม เบอร์ เนอร์ ส-ลี (Tim Berners-Lee) แหงศู ปฏิบตั ิการวิจยั ทางอนุ ภาคฟิ สิ กส์ของยุโรป (CERN) ซึ่ งตั้ งอยูท่ ี่กรุ ง เจนีวา สวิตเซอร์แลนด์ เมื่อปี ค.ศ. 1989 ในครั้ งแรก ทิมเพียงคิดอํานวย ่ ความสะดวกให้แกบรรดานั กวิทยาศาสตร์ ของสถาบันให้คน้ หาข้อมูล ่ ้ น จึงได้คิดประดิ ษฐ์ตวั อักษรที่มีความสามารถในการสื่ อสาร งายขึ ข้อมูลได้ เรี ยกวา่ “ไฮเปอร์ เท็กซ์ ” (Hyper Text) ่ เมื่อได้ตวั อักษรที่มีคุณสมบัติพิเศษแล้ว สิ่ งที่พฒั นาขึ้ นตอจากไฮเปอร์ เทกซ์ก็คือ เครื่ องมือ ่ วอักษรที่เขาประดิษฐ์ข้ ึน และเรี ยกเครื่ องมือนี้ วา่ “บราวเซอร์ ” (Browser) เพียง 3 ปี สําหรับอานตั ํ ดไฮเปอร์ เท็กซ์ข้ ึนมา โปรแกรมบราวเซอร์ ตวั แรกชื่ อ Mosaic ซึ่ งทํางานบน หลังจากกาเนิ ็ างปรากฏการณ์ใหมขึ่ ้ นมาในระบบการสื่ อสารข้อมูลบน ระบบปฏิบตั ิการยูนิกซ์ (X-Windows) กสร้ ่ ตวั อื่นๆ เชน่ Internet Explorer, Safari, Mozilla อินเทอร์ เน็ต และยังเป็ นแมแบบของบราวเซอร์ ่ เกดกระแสโลกไร้ ิ พรมแดนขึ้ นมาจนถึงปัจจุบนั Firefox เป็ นต้น และกอให้ ่ าสู่ เครื อขายอิ ่ นเทอร์ เน็ต และใช้บราวเซอร์ ในการค้นหาข้อมูล สิ่ งที่ เมื่อเราเชื่ อมตอเข้ ่ ปรากฏในหน้าตางบราวเซอร์ คือ โฮมเพจ หรื อเว็บเพจ ที่ถูกสร้างมาจากภาษา HTML แม้ว่าใน ปั จจุบนั นี้ จะมีการสร้างเว็บเพจจากโปรแกรมสร้างเว็บมากมายหลากหลายภาษา เชน่ PHP, ASP, ่ ทุกๆ โปรแกรมเหลานี ่ ้ กมี็ พ้ืนฐานมาจากคําสัง่ ภาษา HTML อยูน่ น่ั เอง JSP แตใน เว็บเพจ เว็บไซต์ และโฮมเพจ คําสามคํานี้ จะมีความหมาย ั ่ ั แตมั่ กจะถูกนํามาใช้งานกนจนติ ดปากและ ที่แตกตางกน ่ นคําที่มีความหมายเดียวกนั ความจริ งแล้ว เข้าใจวาเป็ โฮมเพจ หมายถึง หน้าแรก ถ้าเปรียบกับหนังสือก็จะ หมายถึงปกหน้าซึ่งเป็นส่วนแรกที่ผู้ชมจะพบเห็นก่อน เป็นลําดับแรก เว็บเพจ หมายถึง หน้าเว็บทุกๆ หน้าซึ่งรวมหน้าแรกด้วย เปรียบเหมือนหนังสือหน้าต่างๆ นั่นเอง ซึ่งจะขยายส่วนเนื้อหาต่างๆ ให้ชัดเจนยิ่งขึ้น มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

่ ้ งอยูท่ ี่ใด เปรี ยบเหมือน เว็บไซต์ หมายถึง กลุ่มของหน้าเว็บเพจที่รวมกนั และถูกอ้างถึงวาตั ่ ท่ ี่ช้ นั ใด หิ้ งใด เราจะพบวา่ การบอกตําแหนงนั ่ ้ นๆ วาอยู ่ ้ นจะระบุเป็ นชื่อ URL ที่วางหนังสื อเลมนั (Uniform Resource Locator) เชน่ http://www.krumontree.com บราวเซอร์ หมายถึง ซอฟท์แวร์ ที่ทาํ หน้าที่แปลผลคําสั่งจากไฟล์ HTML มาแสดงผลให้ ถูกต้องทั้ งตัวอักษร สี รู ปภาพ เสี ยง หรื อสื่ อมัลติมีเดียอื่นๆ

ลักษณะเด่ นของการนําเสนอข้ อมลเว็ ู บเพจ (Hyper Text) ด้วยความสามารถในการเชื่ อมโยงข้อมูลไปยังจุดอื่นๆ บนหน้าเว็บไซต์เดียวกนั หรื อ ่ ่ อันเป็ นที่มาของคําวา่ HyperText (ข้อความ เว็บไซต์อื่นๆ ได้อยางหลากหลาย ในระบบเครื อขาย ่ หลายมิติ) ซึ่งเป็ นข้อความที่มีความสามารถมากกวาปกติ นน่ั เอง ดังนั้ นคํานิยามของเว็บจึงหมายถึง  The Web is a Graphical HyperText Information System. ่ บ เป็ นการนําเสนอด้วยข้อมูลที่สามารถเรี ยกหรื อโยงไปยังจุด การนําเสนอข้อมูลผานเว็ อื่นๆ ในระบบกราฟิ ก ซึ่งทําให้ขอ้ มูลนั้ นๆ มีจุดดึงดูดให้น่าเรี ยกชม  The Web is Cross-Platform. ั เอกสาร HTML ไมยึ่ ดติดกบระบบปฏิ บตั ิการ (Operating System : OS) เนื่องจากข้อมูล ็ น Text File ดังนั้ นไมวาจะถู ่ ่ กเกบไว้ ็ ในคอมพิวเตอร์ที่ใช้ระบบปฏิบตั ิการ ถูกจัดเกบเป็ ็ เป็ น UNIX, Linux, Mac OSX, Windows กสามารถเรี ยกดูจากคอมพิวเตอร์ ที่ใช้ ่ ระบบปฏิบตั ิการตางจากคอมพิ วเตอร์ที่เป็ นเครื่ องบริ การเว็บได้  The Web is distributed. ่ นเทอร์ เน็ ตมี ปริ มาณมากจากทัว่ โลกและผูใ้ ช้จากทุกแหงหนที ่ ่ ข้อมูลในเครื อขายอิ ่ าระบบอินเทอร์เน็ตได้ กสามารถเรี ็ สามารถเชื่อมตอเข้ ยกดูขอ้ มูลได้ตลอดเวลา ดังนั้ น ่ รวดเร็ ว และกว้างไกล ข้อมูลในระบบอินเทอร์เน็ตจึงสามารถเผยแพรได้  The Web is interactive. ั ใ้ ช้โดยธรรมชาติอยูแ่ ล้ว ดังนั้ น เว็บ การทํางานบนเว็บเป็ นการทํางานแบบโต้ตอบกบผู จึงเป็ นระบบโต้ตอบ (Interactive) ในตัวมันเองเริ่ มตั้ งแตผู่ ใ้ ช้เปิ ดโปรแกรมบราวเซอร์ ่ ผูใ้ ช้ก็ (Browser) พิมพ์ชื่อเรี ยกเว็บ (URL) เมื่อเอกสารเว็บแสดงผลผานบราวเซอร์ สามารถคลิกเลือกรายการ หรื อข้อมูลที่สนใจ อันเป็ นการทํางานแบบโต้ตอบไปในตัว นัน่ เอง

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

หลักการออกแบบเว็บไซต์ (Web Design) ่ อินเตอร์เน็ต เพราะเว็บไซต์เป็ นสื่ อ เว็บไซต์เป็ นสื่ อที่ได้รับความนิยมอยา่งมากบนเครื อขาย ่ อ ผูใ้ ช้สามารถตัดสิ นใจเลือกได้ว่าจะดูหรื อไม่ดู ที่อยู่ในความควบคุมของผูใ้ ช้โดยสมบูรณ์ กลาวคื ่ ปสรรคและปั ญหาที่เกดิ ขึ้ นจาก เว็บไซต์ใดก็ได้ตามที่ตอ้ งการ จึ งทําให้ผใู ้ ช้ไมมี่ ความอดทนตออุ ่ บไซต์ที่กาลั ํ งรอดูอยู่น้ ันไมมี่ ประโยชน์ต่อตัวเขา การออกแบบเว็บไซต์ผิดพลาด ถ้าผูใ้ ช้เห็ นวาเว็ ่ าใจวาเว็ ่ บไซต์น้ ี จะใช้งานอยางไร ่ หรื อรอการแสดงผลยาวนานเกนไป ิ เขากสามารถที ็ หรื อไมเข้ ่ จะ ่ เปลี่ยนไปดูเว็บไซต์อื่นๆ ได้อยางรวดเร็ ว เนื่องจากในปัจจุบนั มีเว็บไซต์มากมาย รวมทั้ งมีเว็บไซต์ที่ ิ ้ นใหม่ๆ ทุกชัว่ โมง ผูใ้ ช้จึงมีทางเลือกและเปรี ยบเทียบคุณภาพของเว็บไซต์ต่างๆ ได้เอง เกดขึ ่ ่ รับความสนใจ เว็บไซต์ที่ได้รับการออกแบบอยางสวยงาม มีการใช้งานที่สะดวก ยอมได้ ่ ่ นอกจากนี้ ยงั ใช้เวลา จากผูใ้ ช้มากกวา่เว็บไซต์ที่ดูสับสนวุ่นวาย มีขอ้ มูลมากมายแตหาอะไรไมเจอ ิ ซึ่งปัญหาเหลานี ่ ้ ลว้ นเป็ นผลมาจากการออกแบบเว็บไซต์ไมดี่ ในการแสดงผลแตล่ะหน้านานเกนไป ทั้ งสิ้ นดังนั้ น การออกแบบเว็บไซต์จึงเป็ นกระบวนการสําคัญในการสร้างเว็บไซต์ ให้ประทับใจตอ่ ผูใ้ ช้ ทําให้อยากกลับเข้ามาเว็บไซต์เดิมอีกในวันข้างหน้า

องค์ ประกอบของการออกแบบเว็บไซต์ ่ การออกแบบเว็บไซต์ที่มีประสิ ทธิภาพนั้ นต้องคํานึงถึง องค์ประกอบสําคัญดังตอไปนี ้ 1. ความเรียบง่ าย (Simplicity) ํ ดองค์ประกอบเสริ มให้เหลือเฉพาะองค์ประกอบหลัก เลือกเสนอสิ่ งที่เรา หมายถึง การกาจั ่ ต้องการนําเสนอจริ งๆ ออกมา ในสวนของ ภาพกราฟิ ก สี สัน ตัวอักษรและภาพเคลื่อนไหว ต้อง ิ ่ ใ้ ช้ เลือกให้พอเหมาะ ถ้าหากมีมากเกนไปจะรบกวนสายตาและสร้ างความคําราญตอผู ่ ไมซั่ บซ้อน และใช้งานอยางสะดวก ่ ่ ่ เว็บไซต์ที่มีการออกแบบที่ เรี ย บงาย เชน ตัว อยาง เว็บไซต์ของบริ ษทั Apple, Adobe, Microsoft หรื อ Nokia

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

2. ความสมํ่าเสมอ (Consistency) ิ ้ นตลอดทั้ งเว็บไซต์ โดยอาจเลือกใช้รูปแบบ หมายถึ ง การสร้ างความสมํ่าเสมอให้เกดขึ ่ ่ ่ ั เดี ยวกนัตลอดทั้ งเว็บไซต์ก็ได้ เพราะถ้าหากวาแตละหน้ าในเว็บไซต์น้ ันมีความแตกตางกนมาก ิ ิ ่ ่ ่ ํ ง ชมอยู่ใ นเว็บ ไซต์เ ดิ ม หรื อ ไม่ จนเกนไป อาจทํา ให้ผูใ้ ช้เ กดความสั บ สน และไมแนใจวากาลั ่ เพราะฉะนั้ นการออกแบบเว็บไซต์ในแตละหน้ าควรจะมีรูปแบบ สไตล์ของกราฟิ ก ระบบนําทาง ั (Navigation) และโทนสี ที่มีความคล้ายคลึงกนตลอดทั ้ งเว็บไซต์ 3. ความเป็ นเอกลักษณ์ (Identity) ในการออกแบบเว็บไซต์ตอ้ งคํานึ งถึงลักษณะขององค์กรเป็ นหลัก เนื่ องจากเว็บไซต์จะ สะท้อนถึงเอกลักษณ์และลักษณะขององค์กร การเลือกใช้ตวั อักษร ชุดสี รู ปภาพหรื อกราฟิ ก จะมี ่ ปแบบของเว็บไซต์เป็ นอยางมาก ่ ่ ผลตอรู เชน่ ถ้าเราต้องออกแบบเว็บไซต์ของธนาคาร แตเรากลั บ ่ นเว็บไซต์ของสวนสนุ กซึ่ งสงผลตอ ่ ่ เลือกสี สันและกราฟิ กการ์ ตูนมากมาย อาจทําให้ผใู ้ ช้คิดวาเป็ ความเชื่อถือขององค์กรได้ 4. เนือ้ หา (Useful Content) เนื้ อหาถือเป็ นสิ่ งสําคัญที่สุดในเว็บไซต์ ต้องมีความสมบูรณ์และได้รับการปรับปรุ งพัฒนา ่ ้ ากบเว็ ั บอื่นน ให้ทนั สมัยอยูเ่ สมอ เป็ นเนื้ อหาที่ทีมผูพ้ ฒั นาสร้างสรรค์ เรี ยบเรี ยงขึ้ นมาเอง และไมไปซํ เพราะจะถือเป็ นสิ่ งที่ดึงดูดผูใ้ ช้ให้เข้ามาเว็บไซต์ได้เสมอ แตถ้่ าเป็ นการสร้างลิงค์ขอ้ มูลจากเว็บอื่นๆ ็ มา เมื่อใดกตามที ่ผใู ้ ช้ทราบวา่ ข้อมูลนั้ นมาจากเว็บไซต์ใด ผูใ้ ช้ก็ไมจํ่ าเป็ นต้องกลับมาใช้งานลิงค์ ่ ้ นอีก เหลานั 5. ระบบเนวิเกชั่น (User-Friendly Navigation) ่ ่ บไซต์มาก เพราะจะชวยไมให้ ่ ่ ผใู ้ ช้เกดความสั ิ เป็ นสวนประกอบที ่มีความสําคัญตอเว็ บสน ่ เว็บไซต์ ระบบเนวิเกชัน่ จึงเปรี ยบเสมือนป้ ายบอกทาง ดังนั้ นการออกแบบเนวิเกชัน่ จึง ระหวางดู ่ ใช้งานได้สะดวก ถ้ามีการใช้กราฟิ กกควรสื ็ ่ อความหมาย ตําแหนงของการวาง ่ ควรให้เข้าใจงาย แถบ ็ ่ เนวิเกชัน่ กควรวางให้ สมํ่าเสมอ เชน่ อยู่ตาํ แหนงบนสุ ดของทุกหน้า ซึ่ งถ้าจะให้ดีควรเพิ่มแถบ ่ ของหน้าด้วย เพื่อชวยอํ ่ านวยความสะดวกให้กบผู ั ใ้ ช้ที่ยกเลิก เนวิเกชัน่ ที่เป็ นตัวอักษรไว้ส่ วนลาง การแสดงผลภาพกราฟิ กบนเว็บเบราเซอร์

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

6. คณภาพของสิ ่งทีป่ รากฏให้ เห็นในเว็บไซต์ (Visual Appeal) ุ ั ่ คคลเป็ นสําคัญ แตโดยรวม ่ ลักษณะที่น่าสนใจของเว็บไซต์น้ นั ขึ้ นอยูก่ บความชอบสวนบุ ็ ่ ่ ๆ ควรมีคุณภาพ เชน่ กราฟิ กควร แล้วกสามารถสรุ ปได้วา่ เว็บไซต์ที่น่าสนใจนั้ นสวนประกอบตาง ่ ่ สมบูรณ์ไมมี่ รอยหรื อขอบขั้นบันได้ให้เห็น ชนิดตัวอักษรอานงายสบายตา มีการเลือกใช้โทนสี ที่ ั ่ เข้ากนอยางสวยงาม 7. ความสะดวกของการใช้ ในสภาพต่ างๆ (Compatibility) ่ ่ อ ต้องสามารถใช้งานได้ดีใน การใช้งานของเว็บไซต์น้ ันไมควรมี ขอบเขตจํากดั กลาวคื สภาพแวดล้อ มที่ ห ลากหลาย ไมมี่ ก ารบัง คับ ให้ผูใ้ ช้ต ้อ งติ ด ตั้ ง โปรแกรม เสริ ม อื่ น ใดเพิ่ ม เติ ม นอกเหนื อจากเว็บบราวเซอร์ ควรเป็ นเว็บที่แสดงผลได้ดีในทุกระบบปฏิบตั ิการ และทุกบราวเซอร์ สามารถแสดงผลได้ใ นทุ ก ความละเอี ย ดหน้า จอ ซึ่ ง หากเป็ นเว็บ ไซต์ที่ มี ผูใ้ ช้บ ริ ก ารมากและ ั ่ องนี้ ให้มาก กลุ่มเป้ าหมายหลากหลายควรให้ความสําคัญกบเรื

8. ความคงทีใ่ นการออกแบบ (Design Stability) ่ บไซต์มีคุณภาพ ถูกต้อง และเชื่อถือได้ ควรให้ความสําคัญ ถ้าต้องการให้ผใู ้ ช้งานรู ้สึกวาเว็ ั ่ ่ กบการออกแบบเว็ บไซต์เป็ นอยางมาก ต้องออกแบบวางแผนและเรี ยบเรี ยงเนื้ อหาอยางรอบ คอบ ถ้า ่ เว็บที่จดั ทําขึ้ นอยางลวก ๆ ไมมี่ มาตรฐานการออกแบบและระบบการจัดการข้อมูล ถ้ามีปัญหามาก ่ ิ ญหาและทําให้ผใู ้ ช้หมดความเชื่อถือ ขึ้ นอาจสงผลให้ เกดปั 9. ความคงทีข่ องการทํางาน (Function Stability) ่ ในเว็บไซต์ควรมีความถูกต้องแนนอน ่ ระบบการทํางานตางๆ ซึ่ งต้องได้รับการออกแบบ ่ ่ ลิงค์ต่างๆ ในเว็บไซต์ ต้องตรวจสอบวายั ่ งสามารถ สร้างสรรค์และตรวจสอบอยูเ่ สมอ ตัวอยางเชน เชื่อมโยงไปยังข้อมูลได้ถูกต้องหรื อไม่ โดยเฉพาะการเชื่อมโยงไปยังเว็บไซต์อื่นซึ่ งเว็บไซต์น้ นั อาจ มีการเปลี่ยนแปลงได้ตลอดเวลา เชน่ ลบหน้าข้อมูลนั้ นออกไปแล้ว หรื อย้ายหมวดหมู่ จะทําให้ผชู ้ ม ิ ่ บมาเว็บไซต์เราอีก เกดความรํ าคาญและไมกลั

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

การออกแบบเว็บไซต์ ่ มากมายเพื่อให้เว็บไซต์มี ในการออกแบบเว็บไซต์น้ ันมีข้ นั ตอนและกระบวนการตางๆ ความสวยงาม โดดเดน่ ดึงดูดผูช้ มให้กลับมาเยีย่ มชมเราอีกเรื่ อยๆ เริ่ มตั้ งแต่การออกแบบโครงสร้าง ลักษณะหน้าตา หรื อการเขียนโปรแกรม แตมี่ หลายเว็บไซต์ที่พฒั นาโดยขาดการวางแผนและทํางาน ่ นระบบ เชน ่ การลงมื อออกแบบโดยการใช้โปรแกรมชวยสร้ ่ ไมเป็ างเว็บ เนื้ อหาและรู ปแบบก็ ่ ดีแล้ว (หน้าเดี ยว) กเปิ ็ ดตัวเลย ทําให้เว็บนั้ นมี เป็ นไปตามที่นึกขึ้ นได้ขณะนั้ น และเมื่ อเห็ นวาดู ่ ่ ั ่ างมาก เป้ าหมายและแนวทางที่ไมแนนอน ผลลัพธ์ที่ได้จึงเสี่ ยงกบความล้ มเหลวคอนข้ ความล้มเหลวที่พบเห็นได้โดยทัว่ ไป ได้แก่ หน้าเว็บไซต์ที่แสดงข้อความวา่ เว็บไซต์อยู่ ่ าง (Under Construction หรื อ Coming soon) ซึ่ งแสดงให้เห็นถึงการขาด ่ ระหวางการกอสร้ การวางแผนที่ดี บางเว็บถือได้ว่าตายไปแล้ว เนื่ องจากข้อมูลไมทั่ นสมัย ขาดการพัฒนาปรับปรุ ง ่ ้ แสดงให้เห็นถึงการขาดการดูแล ตรวจสอบและพัฒนา เทคโนโลยีลา้ สมัย ลิงค์ผิดพลาด สิ่ งเหลานี ให้ทนั สมัยอยูเ่ สมอ ่ กต้องจะชวยลดความผิ ่ ่ ้ และชวยลดความเสี ่ การออกแบบเว็บไซต์อยางถู ดพลาดเหลานี ่ ยงที่ จะทําให้เว็บประสบความล้มเหลว การออกแบบเว็บไซต์ที่ดีตอ้ งอาศัยการออกแบบและจัดระบบ ่ ข้อมูลอยางเหมาะสม ควรดําเนินการดังนี้ กําหนดเป้ าหมายของเว็บไซต์ ํ ขั้ นตอนแรกของการออกแบบเว็บไซต์ คื อการกาหนดเป้ าหมายของเว็บไซต์ใ ห้แนชั่ ด ่ เพื่อจะได้ออกแบบการใช้งานได้ตรงกบเป้ ั าหมายที่ได้ต้ งั เอาไว้ โดยทัว่ ไปมักจะเข้าใจวา่ เสี ยกอน ่ ่ ้ น แตในความเป็ ่ การทําเว็บไซต์มีจุดมุ่งหมายเพื่อบริ การข้อมูลของหนวยงานหรื อองค์กรเทานั นจริ ง ่ ่ ็ เป้ าหมายของตนเองแตกตางก ่ นั ออกไป แล้ว เว็บไซต์แตละแหงกจะมี กําหนดกล่ ุมผู้ใช้ เป้าหมาย ผูอ้ อกแบบเว็บไซต์จาํ เป็ นต้องทราบกลุ่มผูใ้ ช้เป้ าหมายที่เข้ามาใช้บริ การเว็บไซต์ เพื่อที่จะ ่ ดเจน ตัวอยางเชนเว็ ่ ่ บไซต์ที่มีกลุ่มผูใ้ ช้หลากหลาย ได้ตอบสนองความต้องการของผูใ้ ช้ได้อยางชั ่ บไซต์ส่ วนใหญนั่ ้ นจะ เชน่ ค้นหาข้อมูล (Search engine) เว็บทา่ (Portal) และเว็บไดเรกทอรี่ แตเว็ ่ ้ น ไมสํ่ าหรับทุกคน เพราะคุณไมสามารถตอบสนองความ ่ ตอบสนองความต้องการเฉพาะกลุ่มเทานั ต้องการของคนที่หลากหลายได้ในเว็บไซต์เดียว สิ่ งทีผ่ ้ ูใช้ ต้องการจากเว็บ ่ หลังจากที่ได้เป้ าหมายของเว็บไซต์และกลุ่มผูใ้ ช้เป้ าหมายแล้ว ลําดับตอไปคื อการออกแบบ เว็บไซต์เพื่อดึงดูดผูใ้ ช้งานให้ได้นานที่สุด ด้วยการสร้างสิ่ งที่น่าสนใจเพื่อดึงดูดผูใ้ ช้โดยทัว่ ไปแล้ว สิ่ งที่ผใู ้ ช้คาดหวังจากการเข้าชมเว็บไซต์หนึ่ง ได้แก่ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

 ข้อมูลและการใช้งานที่เป็ นประโยชน์ ่  ขาวและข้ อมูลที่น่าสนใจ ่ ใ้ ช้  การตอบสนองตอผู  ความบันเทิง  ของฟรี ข้ อมลหลั ู กทีค่ วรมีอย่ ูในเว็บไซต์ เมื่ อเราทราบถึ งความต้องการที่ ผูใ้ ช้ตอ้ งการได้รับเมื่ อเข้าชมเว็บไซต์หนึ่ งๆ แล้ว เราก็ ่ ่ ออกแบบเว็บไซต์ให้มีขอ้ มูลที่ผูใ้ ช้ตอ้ งการ ซึ่ งข้อมูลตอไปนี งจะ ้ เป็ นสิ่ งที่ผูใ้ ช้ส่ วนใหญคาดหวั ได้รับเมื่อเข้าไปชมเว็บไซต์ ี่ ั เจ้าของเว็บไซต์ (บริ ษทั องค์กร หนวยงาน ่  ข้อมูลเกยวกบ สถาบัน บุคคล)  รายละเอียดของเนื้ อหา (ตามจุดประสงค์ของเว็บ เชน่ องค์ความรู ้ ผลิตภัณฑ์) ่ ่ ี่ อง นาสนใจ ่  ขาวความคื บหน้าและขาวจากสื ่ อมวลชนที่เกยวข้ ตามจุดประสงค์ของ เว็บไซต์ ี่ องกบจุ ั ดประสงค์ของเว็บไซต์  คําถามยอดนิยม (FAQ) ของผูช้ ม หรื อที่เกยวข้ ั จ้ ดั ทํา หนวยงาน ่  ข้อมูลในการติดตอ่กบผู องค์กร เจ้าของเว็บไซต์ ออกแบบหน้ าเว็บไซต์ (Page Design) หน้าเว็บเป็ นสิ่ งแรกที่ผใู ้ ช้จะได้เห็นขณะที่เปิ ดเข้าสู่ เว็บไซต์ และยังเป็ นสิ่ งแรกที่แสดงถึง ประสิ ทธิ ภาพในการออกแบบเว็บไซต์อีกด้วย โดยปกติหน้าเว็บจะประกอบด้วย รู ปภาพ ตัวอักษร สี พ้ืน ระบบเนวิเกชั่น และองค์ประกอบอื่ นๆ ที่ ช่ วยสื่ อความหมายของเนื้ อหาและอํานวยความ ่ สะดวกตอการใช้ งาน ่ ๆ รวมกนเพื ่ ั ่อ หลักสําคัญในการออกแบบหน้าเว็บกคื็อ การใช้รูปภาพและองค์ประกอบตาง ี่ ั ้ อหาหรื อลักษณะสําคัญของเว็บไซต์ โดยมีเป้ าหมายสําคัญเพื่อการสื่ อ สื่ อความหมาย เกยวกบเนื ่ ่ ความหมายที่ชดั เจนและนาสนใจ บนพื้นฐานของความเรี ยบงายและความสะดวกของผู ใ้ ช้ การออกแบบเว็บไซต์ ต้ องคํานึงถึง ่ ดมุ่งหมายของเราที่สร้างเว็บไซต์ข้ ึนมาเพื่ออะไร 1. กําหนดเป้ าหมายของเว็บไซต์ วาจุ ใครคือกลุ่มเป้ าหมายในการเข้าชม สิ่ งที่ตอ้ งการนําเสนอคืออะไร

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

ให้ ความสํ าคัญในการออกแบบ เว็บที่ดูสวยงาม สบายตา มีเนื้ อหาและข้อมูลที่น่าสนใจ ่ ่ าแรกที่ เห็ น จะทําให้ผูช้ มแวะเวียนกลับมาเยี่ยม แบงแยกเป็ นหมวดหมู่ ประทับใจผูช้ มตั้ งแตหน้ ่ เว็บไซต์เราอีก และยังจะชวยประชาสั มพันธ์เว็บไซต์ให้ผอู ้ ื่นรู ้ต่อๆ ไป ่ อ้ ื่ น ได้ดี ที่สุ ด 3. หาจดเด่ ุ น ของเว็ บไซต์ ใ ห้ พ บ เพราะนั่น คื อคําอธิ บ ายเว็บของเราตอผู ่ ั การจัดวางเนื้ อหาที่น่าสนใจเป็ นลําดับกอนหลั ง เหมือนกบเราเข้ าไปในร้านสะดวกซื้ อที่คน้ หาสิ นค้า เลือกซื้ อได้สะดวก ่ ไมซั่ บซ้อน ใช้งานสะดวก มีการจัดหมวดหมู่ที่ดี 4. ความเรี ยบง่ าย เว็บที่อ่านงายสบายตา ใช้สีเหมาะสม จะได้เปรี ยบเว็บที่ดูสบั สนวุน่ วาย ่ ่ ่ อง าเป็ นไปในทิศทางเดียวกนั ตอเนื 5. ความเป็ นหนึ่ งเดียว (Unity) เว็บเพจในแตละหน้ ่ ่ ทั้ งการออกแบบ สี สนั และเมนูทางเลือก ไมใชการออกแบบสี ลูกกวาดที่เปลี่ยนไปในทุกหน้า ู ้ มต้องการและจะแวะเวียนมาเยีย่ มเยียนเว็บเรา 6. เนื้อหาดีมีประโยชน์ นี่ คือสิ่ งสําคัญที่ผช ่ ่าเสมอ เนื้ อหาจะต้องมีความถูกต้อง ครบถ้วนและมีการปรับปรุ งให้ทนั สมัยอยูเ่ สมอ อีกอยางสมํ ่ 7. สร้ างเอกลักษณ์ รู ปแบบของเว็บไซต์ที่สามารถสะท้อนถึงเอกลักษณ์และลักษณะเดน ขององค์กรนั้ นได้ เชน่ การใช้ชุดสี ชนิดตัวอักษร รู ปภาพกราฟิ ก ่ 8. มีระบบนําทางที่ดี (Navigator bar) หมายถึงเมนู หรื อปุ่ มนําทางไปสู่ เนื้ อหาตางๆ สะดวกทั้ งการเข้าชมในเนื้ อหาที่ลึกเข้าไป และสามารถย้อนกลับมายังหัวข้ออื่นๆ ได้ง่าย ไม่ซบั ซ้อน ่ เป็ นเขาวงกตยากตอการเข้ าชม ่ ิ าจะทําให้เกดความ 9. ลิง ก์ ต ายเว็บ อาจตายได้ การสร้ า งเนื้ อ หาที่ มี ก ารวางแผนลวงหน้ ่ ่ อง ต้องหมัน่ ตรวจสอบลิงกและการแสดงผลกบบราวเซอร์ ์ ั ่ ั ระวังเรื่ อง เชื่อมโยงตอเนื ที่แตกตางกน ่ ่ การใช้สคริ ปต์ที่ไมสามารถแสดงผลในบราวเซอร์ บางตัวได้ ต้องทดลองให้แนใจ ่ าให้มีการใช้ 10. ลดขนาดภาพให้ เหมาะสม (Fixed Image Size) ภาพที่มีขนาดใหญจะทํ ่ เวลาในการโหลดภาพนานจนผูช้ มเบื่ อที่ จ ะรอคอย ควรใช้โ ปรแกรมตกแตงภาพลดขนาดให้ ั ้นที่ในการแสดงผล เหมาะสมกบพื ่ ิ กวา่ 11. โหลดไม่ ช้า หน้ าไม่ ยาว (Fast Load) เนื้ อหาภายในเว็บเพจโดยปกติไมควรยาวเกน ่ ั 2 หน้ากระดาษ A4) เพื่อให้ผชู ้ มได้สะดวกในการชม โหลดได้เร็ ว ถ้ามีเนื้ อหามาก 3 หน้าจอ (เทากบ ่ วทําลิงกเชื ์ ่อมโยงไปยังแตละหั ่ วข้อ ควรแยกเป็ นหน้ายอยแล้ ู ้ มสงสัยต้องสามารถถามและได้รับคําตอบ 12. มีคําถามคําตอบ (FAQ) ทุกคําถามที่ ผช ั บของคุณ เสมอ อาจเป็ นกระดานถาม-ตอบ สมุดเยีย่ ม จะทําให้ผชู ้ มรู ้สึกดีๆ กบเว็ ่ 13. ติดต่ อได้ สะดวก นัน /องค์กร ที่อยู่และหมายเลข ่ คือต้องมีตราสัญลักษณ์ ชื่อหนวยงาน ่ และถ้ามีแผนที่สาํ หรับแสดงที่ต้ งั ด้วยยิง่ ดี โทรศัพท์ อีเมล์ที่ติดตอได้ 2.

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

่ ่ หมั่นปรั บปรงเนื ุ ้อหาให้ สดใส ทันสมัยใหม่เสมอ เว็บไซต์ที่ได้รับความนิ ยมสวนใหญ ่ ่ ารใหมๆ่ ตอเนื ่ ่ อง ใส่ เป็ นเพราะมีการปรับปรุ งเนื้ อหา (Update) อยางสมํ ่าเสมอ เพิ่มเติมขาวส ิ ประกาศเชิญชวนให้ร่ วมกจกรรม 14.

การออกแบบโครงสร้ างเว็บไซต์ (Site Structure Design) ่ นเทอร์เน็ต (Website) จะเหมือนกบัการสร้างบ้านที่เรา การออกแบบเว็บไซต์บนเครื อขายอิ ่ อาศัยอยู่จริ ง เราต้องทําตัวเป็ นสถาปนิ กออกแบบบ้าน โดยรางความคิ ด ความฝันลงบนกระดาษ มี ่ มนี่ ไป แบบไร้ เว็บไซต์มากมายที่เริ่ มต้นด้วยการทําแบบเรื่ อยเปื่ อย จากหน้าแรก แล้วเติมโนนเติ ทิศทางซึ่ งเป็ นการไมถู่ กต้อง เพราะเมื่อเว็บไซต์เราขยายตัวใหญขึ่ ้ น ด้วยเหตุที่มีคนชมมากขึ้ น เรามี ไฟมีพลังที่จะสร้างสรรค์งานมากขึ้ น เราจะเริ่ มงงเสี ยเองวา่ “เว็บหน้านี้ เราจะเอาไว้ไหน เชื่อมโยง ั าใดบ้าง?” เพราะเราขาดการวางแผนที่ดีนน่ั เอง กบหน้ ่ ํ จะเป็ นการดีถา้ เราจะเริ่ มต้นวางโครงรางของเว็ บไซต์เหมือนการสร้างบ้าน ที่เราจะกาหนด ่ อ งนอนอยู่ที่ต าํ แหนงใด ่ ห้อ งนั่ง เลนพั ่ ก ผอน ่ ห้อ งรั บ แขก ห้อ งครั ว ห้อ งนํ้ า อยู่ที่ไ หน จะ วาห้ ่ เชื่อมโยง (มีทางเดิน) อยางไรจึ งจะสะดวกแกผู่ ม้ าเยีย่ มเยือน และผูอ้ ยูอ่ าศัยเองจะทําอะไรได้สะดวก ็ อนบ้านเมื่อผูม้ าเยีย่ มเยือนได้รับความสะดวก หาอะไรได้ง่ายๆ ใช้บริ การได้ทนั ใจ ไม่ เว็บไซต์กเหมื ่ บไซต์ของเรากจะมี ็ มากขึ้ น แนนอน ่ เรากจะ ็ หลงทางสับสนในการดูเนื้ อหา ความประทับใจตอเว็ ่ ่ ได้รับการโปรโมตจากปากตอปากได้ โดยไมยาก ่ บไซต์บนกระดาษเหมือนตัวอยาง ่ กาหนดสิ ํ ลองวางแผนโครงรางเว็ ่ งที่เราต้องการนําเสนอ ่ ้ อหา และทิศทางในการเข้าออกไปสู่ เนื้ อหาอื่นทําได้สะดวก แล้วจะเห็นวา่ การเชื่อมโยงระหวางเนื การสร้างและบริ หารเว็บไซต์ทาํ ได้ง่ายดาย

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

่ วิธีก ารจัด โครงสร้ า งเว็บ ไซต์สามารถทํา ได้ห ลายแบบ แตแนวคิ ด หลัก ๆ ที่ นิ ย มใช้กัน โดยทัว่ ไปมีอยู่ 2 แบบคือ จัดตามกลุ่มเนื้ อหา (Content-based Structure) จัดตามกลุ่มผูช้ ม (User-based Structure) รปแบบของโครงสร้ างเว็บไซต์ ู เราสามารถวางรู ปแบบโครงสร้างเว็บไซต์ได้หลายแบบตามความเหมาะสม เชน่ ่ ก หรื อ แบบเรี ยงลําดับ (Sequence) เหมาะสําหรับเว็บไซต์ที่มีจาํ นวนเว็บเพจไมมากนั เว็บไซต์ที่มีการนําเสนอข้อมูลแบบที ละขั้ นตอน มักจะพบในกรณี การนําเสนอภาพในลักษณะ Presentation หรื อ Directory Search

แบบระดับชั้น (Hierarchy) เหมาะสําหรับเว็บไซต์ที่มีจาํ นวนเว็บเพจมากขึ้ น เป็ นรู ปแบบที่ ั บที่มีขอ้ มูลไมมากนั ่ ่ เราจะพบได้ทว่ั ไป เหมาะกบเว็ กและไมต้่ องการปรับเปลี่ยนบอยๆ

ี่ องกนั แบบผสม (Combination) เหมาะสําหรับเว็บไซต์ที่มีความซับซ้อนในเนื้ อหาที่เกยวข้ เป็ นการนําข้อดีของรู ปแบบทั้ ง 2 ข้างต้นมาผสมผสานกัน

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

หน้ าตาและสี สันของเว็บไซต์ ่ คงต้องจินตนาการหรื อหลับตาวาดฝั นถึงหน้าตาและสี สันของเว็บไซต์ของเราวาควรจะ ่ ่ ออกมาในรู ปแบบใด สี สันอยางไรจึ งจะเหมาะสม เอกลักษณ์ที่ตอ้ งการบงบอกเป็ นการเฉพาะของ ่ ั ้ อหาที่นาํ เสนอด้วย องค์กรหรื อหนวยงาน ซึ่งจะสัมพันธ์กบเนื ่ โครงสร้างที่ยอมรับวาเป็ ่ นมาตรฐานอยู่ 3 แบบ คือ โดยทัว่ ๆ ไปเว็บไซต์ส่ วนใหญจะมี

แบบที่ 1

แบบที่ 2

แบบที่ 3

่ แบบที่ 1 จะประกอบด้วยพื้ นที่ส่ วนหัวของหน้าด้านบน เมนู ทางซ้ายมือและสวนแสดง เนื้ อหาในด้านขวามือ ั ่ ่มผังรายละเอียดด้านขวามือขึ้ นมา โดยมีส่ วนเนื้ อหา แบบที่ 2 จะคล้ายกบแบบที ่ 1 แตจะเพิ ั อยูต่ รงกลางหน้า (เว็บสําเร็ จรู ปหลายแบบนิยมใช้ เหมาะกบการทํ าหน้าแรกที่ตอ้ งการเสนอประเด็น สําคัญที่น่าสนใจ สามารถคลิกไปดูรายละเอียดในหน้าถัดไปได้) ่ ่ าย แบบที่ 3 จะตัดสวนเมนู ซา้ ยขวาออก นําเอาเมนูไปแทรกไว้ที่ส่ วนหัวเรื่ องและในสวนท้ ั บไซต์เล็กๆ ที่ตอ้ งการแสดงความสวยงามในการออกแบบภาพกราฟฟิ ก หน้าแทน (เหมาะกบเว็ ่ ้ อหาภายใน) มากกวาเนื ่ คือ โครงสร้างทั้ ง 3 แบบจะมีส่ วนประกอบหลักอยู่ 3 สวน ่ ่ จ ะบรรจุ ต รา /เครื่ องหมาย/สั ญ ลัก ษณ์ ข องเว็ บ ไซต์ น้ ั น 1. ส่ วนหั ว เรื่ อ ง เป็ นสวนที ่ ่ มซ้ายบนจะเหมาะสมที่สุด (ในวงกลม : ผล (หนวยงานหรื อองค์กร) ซึ่ งจะนิ ยมวางไว้ที่ตาํ แหนงมุ ่ ่ได้รับความนิ ยมในการวางโลโกคื้ อ ซ้าย 74% กลาง 20% ขวา 6%) ด้าน จากการวิจยั ตําแหนงที ิ ่ ได้ ขวามืออาจวางแบนเนอร์โฆษณากจกรรมตางๆ ่ ่จะนําพาผูช้ มเข้าไปยังหมวดหมู่เนื้ อหาที่จดั ไว้ได้อยาง ่ 2. ส่ วนเมนู (สี เทาเข้ม) เป็ นสวนที ั สะดวก รวดเร็ ว ทําหน้าที่เหมือนกบถนนหรื อแผนผังเส้นทางเดิน หรื อหน้าสารบัญในหนังสื อ อาจ ่ ่ วเรื่ องกได้ ็ และทําเมนูปลีกยอยไว้ ่ ใน วางไว้ในตําแหนงบนสุ ดใต้ส่ วนหัวเรื่ อง หรื อแทรกในสวนหั ่ ายของหน้า หรื อสวนลางของหน้ ่ ่ สวนซ้ า มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

่ ่ จะแสดงรายละเอี ย ดของเนื้ อหาแต่ ละเรื่ องสัมพัน ธ์กับเมนู ส่ วนเนื้อหา เป็ นสวนที ่ ซึ่ งจะต้องมีการเปลี่ยนแปลงไป ประกอบไปด้วยข้อความ ภาพประกอบ ตารางแสดงข้อมูลตางๆ ่ ตามเหตุการณ์มกั จะวางไว้ในสวนกลางหน้ า ั ตามความเหมาะสมใน ในการออกแบบอาจมี การผสมผสานทั้ ง 3 รู ปแบบเข้าด้วยกนได้ ่ ้ อหา ตามจินตนาการของผูจ้ ดั ทํา นอกจากรู ปแบบหน้าตาของเว็บไซต์แล้ว ยังต้องคิดตอไป ่ แตละเนื วา่ การแสดงผลของเว็บจะใช้วิธีการแบบเปิ ดหน้าใหมทุ่ กครั้ งที่คลิกบนจุดเชื่อมโยง หรื อแสดงผล แทนที่หน้าเดิม หรื อแสดงผลแบบเฟรม ่ ดเจน การเลือกใช้ การสร้างสี สันบนหน้าเว็บเป็ นสิ่ งที่สื่อความหมายของเว็บไซต์ได้อยางชั ่ ยงแตจะสร้ ่ ั ใ้ ช้ แตยั่ งสามารถทําให้เห็นถึง สี ให้เหมาะสม กลมกลืน ไมเพี างความพึงพอใจให้กบผู ่ ่ บไซต์ได้ สี เป็ นองค์ประกอบหลักสําหรับการตกแตงเว็ ่ บ จึงจําเป็ นอยางยิ ่ ง่ ความแตกตางระหวางเว็ ี่ ั ที่จะต้องทําความเข้าใจเกยวกบการใช้ สี ่ ระบบสี ที่แสดงบนจอคอมพิวเตอร์ มีระบบการแสดงผลผานหลอดลํ าแสงที่เรี ยกวา่ CRT (Cathode ray tube) โดยมีลก ั ษณะระบบสี แบบบวก อาศัยการผสมของของแสงสี แดง สี เขียว และสี ํ ่ จาก 0 ถึง 255 ได้ จากการรวมสี ของแมสี่ หลักจะทํา นํ้ าเงิน หรื อระบบสี RGB สามารถกาหนดคาสี ิ ่ ให้เกดแสงสี ขาว มีลกั ษณะเป็ นจุดเล็กๆ บนหน้าจอไมสามารถมองเห็ นด้วยตาเปล่าได้ จะมองเห็น ั ว จุดแตละจุ ่ ดหรื อพิกเซล (Pixel) เป็ นสวนประกอบของภาพ ่ เป็ นสี ที่ถูกผสมเป็ นเนื้ อสี เดียวกนแล้ ํ บนหน้าจอคอมพิวเตอร์ โดยจํานวนบิตที่ใช้ในการกาหนดความสามารถของการแสดงสี ต่างๆ เพื่อ สร้างภาพบนจอนั้ นเรี ยกวา่ บิตเด็ป (Bit-depth) 3.

รู ปภาพระบบสี RGB จากเว็บไซต์ www.webstyleguide.com

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

่ สวาง

มืด 0

C D E

ํ ในภาษา HTML มีการกาหนดสี ดว้ ยระบบเลขฐานสิ บหก ซึ่ งมีเครื่ องหมาย (#) อยูด่ า้ นหน้า ่ และตามด้วยเลขฐานสิ บหกจํานวนอักษรอีก 6 หลัก โดยแตละไบต์ (byte) จะมีตวั อักษรสองตัว แบง่ ออกเป็ น 3 กลุ่ม (#RRGGBB) เชน่ #00FF00 ่ ํ ่ ของชุดสี RGB โดย การใช้ตวั อักษรแตละไบต์ น้ ีเพื่อกาหนดระดั บความเข้มของแมสี่ แตละสี ่ แสดงถึงความเข้มของสี เขียว 2 หลักสุ ดท้าย 2 หลักแรก แสดงถึงความเข้มของสี แดง 2 หลักตอมา ่ #00FF00 เป็ นคาของสี ่ แสดงถึงความเข้มของสี น้ าํ เงิน จากตัวอยาง เขียว ่ ด กระตุน้ การรับรู ้ทางด้านจิตใจ สี มีอิทธิ พลในเรื่ องของอารมณ์การสื่ อความหมายที่เดนชั ่ ให้ความรู ้สึก อารมณ์ที่ไมเหมื ่ อนกนั สี บางสี ให้ความรู ้สึกสงบ บางสี ให้ความรู ้สึก มนุษย์ สี แตละสี ่ ่งตอการออกแบบเว็ ่ บไซต์ ดังนั้ นการเลือกใช้โทนสี ตื่นเต้นรุ นแรง สี จึงเป็ นปั จจัยสําคัญอยางยิ ่ ภายในเว็บไซต์เป็ นการแสดงถึงความแตกตางของสี ที่แสดงออกทางอารมณ์ มีชีวิตชี วา หรื อ ่ โศกเศร้า รู ปแบบของสี ที่สายตาของมนุษย์มองเห็น สามารถแบงออกเป็ น 3 กลุ่ม คือ 1. สี โทนร้ อน (Warm Colors) เป็ นกลุ่มสี ที่แสดงถึงความสุ ข การปลอบโยน ความอบอุ่น และดึงดูดใจ สี กลุ่มนี้ เป็ นกลุ่มสี ที่ช่วยให้หายจากความเฉื่ อยชา มีชีวิตชีวามากยิง่ ขึ้ น จะพบเห็นใน เว็บไซต์ที่เจาะกลุ่มเป้ าหมายที่เป็ นวัยรุ่ น ่ 2. สี โทนเย็น (Cool Colors) เป็ นกลุ่มสี ที่แสดงถึงความสุ ภาพ ออนโยน เรี ยบร้อย เป็ น ่ กลุ่มสี ที่มีคนชอบมากที่สุด สามารถโน้มน้าวในระยะไกลได้ จะพบได้ในเว็บไซต์องค์กร หนวยงาน ราชการ 3. สี โทนกลาง (Neutral Colors) สี ที่เป็ นกลาง ประกอบด้วย สี ดาํ สี ขาว สี เทา และสี น้ าํ ตาล ่ ้ คือ สี กลางที่สามารถนําไปผสมกบสี ั อื่นๆ เพื่อให้เกดสี ิ กลางขึ้ นมา กลุ่มสี เหลานี

สี โทนร้อน

สี โทนเย็น

่ อ้ อกแบบเว็บคือการเลือกใช้สีสาํ หรับเว็บ นอกจากจะมีผลตอการแสด ่ สิ่ งที่สาํ คัญตอผู งออก ่ แตละสี ่ สามารถสื่ อ ของเว็บแล้วยังเป็ นการสร้างความรู ้สึกที่ดีต่อผูใ้ ช้บริ การ ดังนั้ นจะเห็ นวาสี ่ ดเจน ความแตกตาง ่ ความสัมพันธ์ที่เกดขึ ิ ้ นยอมสงผลให้ ่ ่ ความหมายของเว็บได้อยางชั เว็บมีความ ่ ่อถือมากยิง่ ขึ้ น ชุดสี แตละชุ ่ ดมีความสําคัญตอเว็ ่ บ ถ้าเลือกใช้สีไมตร ่ งกบวั ั ตถุประสงค์หรื อ นาเชื ่ ่ เป้ าหมายอาจจะทําให้เว็บไมนาสนใจ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

ตัวอย่ างเว็บไซต์ ของสายการบินที่เลือกโทนสี ม่วงของกล้ วยไม้

ตัวอย่ างเว็บไซต์ บริ ษทั ผู้ผลิตรถยนต์ เลือกสี เทาดูภูมิฐานมัน่ คง นักออกแบบเว็บไซต์ที่ดีควรจะเป็ นผูช้ มเว็บไซต์ที่หมัน่ สํารวจเว็บไซต์ต่างๆ เพื่อสํารวจ ่ ดด้อยของเว็บไซต์ต่างๆ นํามาเปรี ยบเทียบ และเลือกมาเป็ นแนวทางในการออกแบบ และหาจุดเดนจุ ของเราเอง หากยังไมมี่ จุดเริ่ มต้นแนะนําให้ไปเยีย่ มชมเว็บไซต์ท่าของนักออกแบบเว็บ คือ http://www.rookienet.com เลือกชมในหมวด Web Gallery

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

การเลือกโปรแกรมสร้ างเว็บไซต์ ่ ดาย ด้วยการใช้โปรแกรมสําเร็ จรู ปตางๆ ่ เข้าชวย ่ การสร้างเว็บเพจในปั จจุบนั เป็ นเรื่ องงาย ิ ทํา ให้ เ กดความสะดวกร วดเร็ ว และมี ค วามสวยงามมากขึ้ น บางโปรแกรมมี ไ ฟล์ ต ้น แบบ ้ เป็ นแบบของเราได้ง่าย ซึ่งโปรแกรมสร้างเว็บไซต์จะ (Templates) มาให้พร้อมสําหรับนํามาแกไขให้ ่ แบงออกเป็ น 2 กลุ่ม คือ 1. โปรแกรมช่ วยในการเขียนด้ วยภาษา HTML สําหรับผูท้ ี่มีความชํานาญในการใช้คาํ สั่ง ั จะชอบใช้โปรแกรมชนิ ดนี้ บางโปรแกรมมีมาพร้อมกบระบบปฏิ บตั ิการไมต้่ องซื้ อเพิ่ม เชน่ ใน ระบบปฏิบตั ิการวินโดว์จะมีโปรแกรมเล็กๆ เชน่ Notepad, Wordpad ในระบบปฏิบตั ิการลินุกส์จะ มี Quanta Plus, Screem HTML/XML Editor ในระบบปฏิบตั ิการ Mac OSX จะมี Text Editor และ ่ เชน่ EditPlus, Homesite บางโปรแกรมกมี็ ผพู ้ ฒั นาออกมา มีบางโปรแกรมที่มีผพู ้ ฒั นาออกจําหนาย ่ ใช้กนัฟรี ๆ เชน่ HTMLAssistant, CoffeeCup, ThaiHTML เป็ นต้น แจกจายให้

ั ่ผอู ้ อกแบบต้องการมากที่สุด ไฟล์มี ข้อดีของโปรแกรมประเภทนี้ คือ ให้ผลตรงกบที ขนาดเล็กกวา่ ไมมี่ โค๊ดซํ้ าซ้อน ข้อเสี ยคือผูเ้ ขียนต้องจดจําคําสัง่ ภาษา HTML ได้มากๆ จึงจะ สามารถสร้างเว็บได้สวยงามตามที่ตอ้ งการ 2. โปรแกรมช่ วยในการเขียนแบบเห็นอย่ างไรได้ อย่ างนั้น (WYSIWYG : What You See ่ งและนิ ยมใช้กนมากที ั It, What You Get) เป็ นโปรแกรมที่ได้รับการกลาวถึ ่สุดได้แก่ Adobe ่ Macromedia Dreamweaver, MS FrontPage, Namo WebEditor เป็ นต้น ข้อดีคือใช้งานงาย ั ่ เหมือนกบการพิ มพ์เอกสารในโปรแกรมประมวลผลคําทัว่ ไป สามารถใช้เมาส์คลิกลากปรับแตงได้ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

สะดวก ข้อเสี ยคือ ต้องการทรัพยากรในเครื่ องคอมพิวเตอร์ มากกวา่ ไฟล์ที่ได้จากการสร้ างจะมี ่ ่ กติ (เนื่ องจากการสร้ างคําสั่งซํ้ าซ้อนในระหวางการแกไขไฟล์ ่ ้ ขนาดใหญกวาป และไมถู่ กลบ ออกไปในขั้นตอนสุ ดท้าย)

ตัวอย่ างโปรแกรมสร้ างเว็บ Adobe Dreamweaver CS4 ่ ้ แม้จะสร้างได้ง่ายดาย แตเบื ่ ้องหลังของการทํางานกคื็ อการสร้างโค๊ดภาษา โปรแกรมเหลานี ็ ็ ็ งคงใช้ภาษา HTML เป็ นหลักอยูเ่ ชนเดิ ่ ม งานรู ปแบบการจัดเกบกยั HTML เมื่อบันทึกเกบไฟล์

่ หน้าตางโปรแกรมออกแบบเว็ บ Golive, MS Frontpage, Namo Webeditor, NetObjects Fusion มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

ไมมี่นักออกแบบเว็บไซต์หรื อเว็บมาสเตอร์มืออาชีพคนใดที่สร้างเว็บเพจด้วยโปรแกรมใด ่ ็ ขอ้ ดีขอ้ เสี ยที่แตกตางกนดั ่ ั งกลาว ่ โปรแกรมหนึ่ งเพียงโปรแกรมเดียว เพราะในแตละโปรแกรมกมี การศึกษาภาษา HTML ให้รู้ลึกแตกฉานจึงเป็ นเหมือนการสร้างพื้นฐานให้แข็งแกรง่ ในการออกแบบ ิ ้ นจากโปรแกรมสําเร็ จรู ป เหมือนกบเราต้ ั ้ ญหาที่อาจจะเกดขึ องทําการศึกษา ก. ไก่ ข. ไข่ และแกไขปั ่ สระและวรรณยุกต์ กอนการเรี ยนรู ้เพื่อผสมคําและผูกประโยคให้มีความสวยงามสละสลวยนัน่ เอง

ภาพแสดงโหมดออกแบบและโหมดแสดงโค๊ ดของ Adobe Dreamweaver CS4 การเรี ยนรู ้ภาษา HTML จะเป็ นพื้นฐานสําคัญของการเขียนเว็บไซต์ดว้ ยภาษาขั้ นสู งขึ้ น เชน่ ่ ั การเขียนคําสั่งเพื่อติดตอกบฐานข้ อมูลในภาษา ASP, PHP, JSP และอื่นๆ โดยเฉพาะในปั จจุบนั ที่ นิยมเอาระบบบริ หารจัดการเนื้ อหา (CMS = Contents Management System) มักจะใช้ภาษา ASP, ้ ่ ต้องมีความรู ้ภาษา HTML ดตางๆ PHP ในการจัดการเว็บไซต์ ถ้าต้องการแกไขการแสดงผลในจุ ้ รวดเร็ ว ด้วยจึงจะแกไขได้ ่ ่ ่มเติมเทคนิ คพิเศษตางๆ ่ ได้ นอกจากนี้ การรู ้ จกั ภาษา HTML ยังชวยให้ เราปรับแตงเพิ ่ ้ บเพจในกรณี ฉุกเฉิ นที่ไมสามารถหาเครื ่ สะดวกและงายดายยิ ่ องคอมพิวเตอร์ ที่ ่งขึ้ น การแกไขเว็ ติดตั้ งโปรแกรมสําเร็ จรู ปสําหรั บการสร้างเว็บไว้เป็ นพิเศษ เราก็ยงั สามารถใช้ Notepad หรื อ ้ อความอื่นๆ ในการแกไขแทนได้ ้ โปรแกรมแกไขข้

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

อินเทอร์เน็ตและการสื่ อสาร

กิจกรรมเสนอแนะ ่ ่ 1 เสร็ จสิ้ นแล้ว ให้นกั เรี ยนแบงกลุ ่ ่มๆ ละ 5 คน เพื่อทํา หลังจากการศึกษาบทเรี ยนหนวยที ิ กจกรรมดั งนี้ ่ จํานวน 10 เว็บไซต์ โดยวัด 1. สํารวจหาเว็บไซต์ยอดนิ ยมทั้ งของไทยและตางประเทศ จากจํานวนผูเ้ ข้าชม หรื อค้นหาสถิติจาก Search engine นํามาวิเคราะห์เปรี ยบเทียบจุดเดน่ จุดด้อย ่ บไซต์ แล้วรายงานหน้าชั้ นเรี ยน ของแตละเว็ ่ ่มชวยกนออกแบบโครงรางของเว็ ่ ั ่ บไซต์กลุ่ม เป้ าหมายของ 2. ให้นักเรี ยนในแตละกลุ ่ ไป เว็บไซต์ เนื้ อหา กลุ่มผูช้ มเป้ าหมาย เพื่อใช้ในการจัดทําเว็บไซต์จริ งในบทเรี ยนตอๆ หมายเหตุ เว็บไซต์ของกลุ่มอาจเลือกตามความสนใจของกลุ่มหรื อตามคําแนะนําของครู ผสู ้ อน เมื่อได้รับความเห็นชอบแล้ว จึงดําเนิ นการออกแบบ จัดทํา โดยครู ผสู ้ อน กลุ่มเพื่อน ่ ในชั้ นเรี ยนชวยประเมิ นลักษณะกระบวนการทํางาน ควรมีการสรุ ป แลกเปลี่ยนความรู ้ ่ จารณาเกบในแฟ้ ั ั กอนพิ ็ ซึ่งกนและกน มผลงาน

คําถามท้ ายบท 1. 2. 3. 4. 5.

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

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

หน่ วยที่ 2 ภาษา HTML ผลการเรียนรู้ ทคี่ าดหวัง ํ ดของภาษา HTML ได้ 1. บอกจุดกาเนิ 2. อธิบายโครงสร้างพื้นฐานของภาษา HTML ได้ถูกต้อง 3. สามารถเขียนคําสั่ง (Tag) มาตรฐานของภาษา HTML ในการเขียนเว็บเพจหน้าแรกและ แสดงผลได้ถูกต้อง

สาระสํ าคัญ ็ รู ป แบบไฟล์ต่ างๆ ที่ เ ห็ นบนจอภาพในระบบอิ นเตอร์ เ น็ ตนั้ น จะถูก จัด เกบในรู ปแบบ HTML ซึ่ งเป็ นเอกสารที่สามารถเชื่อมโยงข้อมูลไปยังเอกสารอื่นได้ โดยการเขียนเป็ น แท็ก (Tag) ่ าสั่ง โดยโปรแกรมบราว์เซอร์ต่างๆ เชน่ Internet Explorer, Firefox, Safari, คําสั่ง และจะถูกอานคํ Opera, Google Chrome แล้วแสดงผลออกมาเป็ นตัวอักษร ภาพ และเสี ยง ํ ั ภาษา HTML เป็ นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกากบ ่ ่ Tag แตละ (Tag) ควบคุมการแสดงผลข้อความ รู ปภาพ หรื อวัตถุอื่นๆ ผานโปรแกรมเบราเซอร์ อาจจะมีส่ วนขยายที่เรี ยกวา่ Attribute สําหรับระบุหรื อควบคุมการแสดงผลของเว็บให้เป็ นไปตามที่ ํ ผูอ้ อกแบบเว็บไซต์กาหนด ไว้ ่ HTML เป็ นภาษาที่ถูกพัฒนาโดย World Wide Web Consortium (W3C) จากแมแบบของ ่ ภาษา SGML (Standard Generalized Markup Language) โดยตัดความสามารถบางสวนออกไป ่ ทําให้บริ การ WWW เพื่อให้สามารถทําความเข้าใจและเรี ยนรู ้ ได้ง่าย และด้วยประเด็นดังกลาว ่ างขวางตามไปด้วย เติบโตขยายตัวอยางกว้

คิดแล้ วตอบ  ่ ? อยากรู ้ นักเรี ยนเคยสงสัยบ้างไหมวา่ หน้าเว็บเพจที่เราดูสวยงามนั้ นเขียนขึ้ นอยางไร ให้คลิกที่เมนู View ในบราวเซอร์แล้วเลือก Page Source สิ่ งที่พบคือ...

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

หน่ วยที่ 3 ตกแต่ งเว็บเพจด้ วยรปภาพ ู ผลการเรียนรู้ ทคี่ าดหวัง 1. อธิบายชนิดของรู ปภาพที่เหมาะสมในการใช้บนเว็บเพจได้ 2. สามารถเขียนคําสัง่ (Tag) ภาษา HTML เพื่อแทรกรู ปภาพและแสดงผลได้ถูกต้อง

สาระสํ าคัญ ่ ยวจะไมสามารถดึ ่ เว็บเพจที่มีเฉพาะข้อมูลตัวอักษรเพียงอยางเดี งดูดความสนใจของผูช้ มได้ ่ จึงต้องมีการแทรกรู ปภาพประกอบเพื่อเสริ มความสมบูรณ์ ของเนื้ อหา และชวยให้ หน้าเว็บเพจมี ่ ดตาม สร้างความประทับใจแกผู่ ช้ ม สี สนั สวยงาม นาติ ่ นเทอร์ เน็ตต้องการความรวดเร็ ว รู ปภาพที่นาํ มาใช้จึง เนื่ องจากการแสดงผลบนเครื อขายอิ ่ ต้องมีการจัดการอยางเหมาะสมทั ้ งในเรื่ องของขนาดของไฟล์ ชนิดของไฟล์

คิดแล้ วตอบ  นักเรี ยนเคยสังเกตรู ปภาพที่แสดงผลในหน้าเว็บเพจหรื อไม่? รู ปภาพบางชนิ ดมีความ คมชัดรายละเอียดสู ง บางภาพขาดรายละเอียด มีสีผดิ เพี้ ยน บางภาพสามารถเคลื่อนไหวได้ เรา ่ งจะเหมาะสม... จะเลือกรู ปภาพมาใช้งานอยางไรจึ

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บเพจด้วยรู ปภาพ ตกแตงเว็

ี่ ั ในบทที่ 2 เราได้ศึกษารายละเอียดเกยวกบการจั ดข้อความในเอกสารไปแล้ว ในบทนี้ จะ ่ ั บเพจของเราให้มีความสวยงามนาดู ่ ข้ ึนไปอีก เป็ นการเพิ่มสวนภาพประกอบ เพื่อเพิ่มสี สันให้กบเว็ ่ การนําภาพมาใช้ในเว็บเพจนั้ นมีรายละเอียดที่ตอ้ งศึกษาให้เข้าใจอยูห่ ลายเรื่ องดังตอไปนี ้ 1. ชนิดของรู ปภาพที่นาํ มาใช้ได้ ่ ่มาของภาพ 2. แหลงที ่ 3. รู ปแบบของคําสัง่ ตางๆ 1. ชนิดของรปภาพ ู ่ ่ นี้ เว็บบราวเซอร์ส่ วนใหญจะสนั บสนุนฟอร์แมตของรู ปภาพดังตอไป ่ ่ จิ๊ฟ หรื อ กฟ๊ิ มีนามสกุล 1.1 ไฟล์ Gif (Compuserve Graphics Interchange Format) อานวา เป็ น *.gif ไฟล์บิตแมตชนิ ดนี้ เ ป็ น ไฟล์ชนิ ดบี บอัด ข้อมูล สามารถแสดงสี ไ ด้สูงสุ ด เพีย ง 256 สี ็ เหมาะสําหรั บใช้จดั เกบภาพการ์ ตูน หัวข้อเรื่ อง ที่มีความละเอี ยดของสี สันน้อยแสดงผลได้เร็ ว ่ (Transparency) จึง รวมทั้ งสนับสนุ นการแสดงภาพเคลื่อนไหวได้ ทําให้เป็ นภาพชนิ ดพื้นโปรงใส ่ ่ ขยายไปสู่ ละเอียด มีความนาสนใจมากขึ ้ น มีความสามารถในการแสดงผลแบบหยาบและคอยๆ (Interlace) ่ ่ เจ-เพ็ก มีนามสกุล 1.2 ไฟล์ JPEG หรื อ JPG (Joint Photographic Experts Group) อานวา เป็ น *.jpg เป็ นไฟล์ชนิ ดบีบอัดข้อมูลที่มีขนาดเล็กมาก และแสดงสี ได้สูงสุ ดถึง 16.7 ล้านสี ทําให้ ภาพมี ความคมชัดสู ง เนื่ องจากไฟล์ชนิ ดนี้ ผ่านการบีบอัดข้อมูลมาก จึ งใช้เวลาในการคลายภาพ ่ ่ ละเอียดชัดเจน กลับมาเพื่อแสดงผลนานกวาไฟล์ GIF มีระบบการแสดงภาพแบบหยาบแล้วคอยๆ ่ ่ไมสามารถทํ ่ ่ ขึ้ นแบบ Progressive มีจุดออนที าพื้นโปรงใสได้ จึงควรเลือกใช้ให้เหมาะสม ดังนั้ นจึงนิ ยมนําไฟล์ JPG ไปใช้ในการแสดงผลรู ปภาพที่มีขนาดใหญ่ มีความละเอียดใน ั ปภาพที่มีขนาดเล็ก ภาพสู ง เชน่ ภาพคน ภาพอาคารสถานที่ ภาพทิวทัศน์ และจะใช้ไฟล์ GIF กบรู ่ ่ วไฟล์ GIF สามารถโหลดมาแสดงผลได้รวดเร็ วกวาไฟล์ ่ โดยสวนใหญแล้ JPG ด้วยกลวิธีของ ระบบอิเล็กทรอนิกส์ดาวน์โหลด ่ ่ ปิ ง เป็ นไฟล์ที่ถูกพัฒนาขึ้ นมาแทน 1.3 ไฟล์ PNG (Portable Network Graphic) อานวา ่ ของไฟล์ท้ งั สองรู ปแบบมาใช้งาน เชน่ ไฟล์ GIF และไฟล์ JPG ซึ่ งเป็ นการดึงเอาคุณสมบัติเดนๆ ่ สนับสนุ นจํานวนสี ได้มากเหมือนภาพ JPEG แตการแสดงผลแบบหยาบไปละเอี ยดเลือกใช้แบบ ่ ่ Interlace เหมื อ นภาพ GIF ทํา พื้ น โปรงใสได้ ดวย ้ แสดงผลได้อยางรวดเร็ ว ในปั จจุบนั ได้มีการ ่ ่ ็ บสนุนการ นําเข้ามาแทนที่รูปภาพชนิ ด JPEG และ Gif แล้ว โปรแกรมตกแตงภาพหลายคายกสนั เปิ ดและบันทึกไฟล์สกุลนี้ ในระบบปฏิบตั ิการที่มีพ้ืนฐานจาก Unix เชน่ Linux, Mac OSX จะใช้ ภาพสกุลนี้ เป็ นหลักในการบันทึกภาพจากซอฟท์แวร์ต่างๆ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บเพจด้วยรู ปภาพ ตกแตงเว็

่ ่่ ไมวาจะใช้ รูปภาพแบบใด สิ่ งที่ตอ้ งพิจารณากอนการนํ ามาใช้งานคือ เรื่ องขนาดที่มีความ ่ ่ าให้บดบังเนื้ อหาหรื อเล็กจนไมสามารถบอกรายละเอี ่ เหมาะสม ไมใหญจนทํ ยดอะไรได้ มีขนาด ่ 10 KB ถึง 50 KB ของไฟล์เฉลี่ยอยูร่ ะหวาง ่ ่ ้ อที่ที่เราต้องการควรปรับขนาด ขนาดความกว้างยาวของภาพ ถ้าภาพมีขนาดใหญกวาเนื ่ ่ ่ตอ้ งการ จะได้ขนาดไฟล์ที่เล็กกวาการใช้ ่ ของภาพด้วยโปรแกรมตกแตงภาพให้ มีขนาดภาพเทาที วิธี ่ ดสวนภาพด้ ่ ํ ยอสั วยคําสัง่ ในภาษา HTML (กาหนดความกว้ าง x สูงของภาพ) 2. แหล่ งทีม่ าของรปภาพ ู ในการนํารู ปภาพมาใช้งานในหน้าเว็บเพจนั้ น จะต้องคํานึ งถึงลิขสิ ทธิ์ ของภาพที่นาํ มาใช้ เพราะเป็ นงานสร้างสรรค์ตามพระราชบัญญัติลิขสิ ทธิ์ ควรมีการขออนุญาตจากเจ้าของในกรณี ที่ใช้ ่ ็ งานของผูอ้ ื่นมาประกอบในหน้าเว็บเพจของเรา อยางไรกตามเราสามารถหารู ปภาพมาใช้งานได้ ่ โดยวิธีการดังตอไปนี ้ 2.1 วาดขึ้ นเองด้วยโปรแกรมวาดภาพ เชน่ Photoshop, Paint Shop Pro, CorelDRAW, PhotoImpact หรื อโปรแกรมอื่นๆ ซึ่ งต้องใช้ความสามารถและความชํานาญในขั้ นสู ง ่ หรื อหนังสื อ สิ่ งพิมพ์ ซึ่ งอาจมีลิขสิ ทธิ์ ภาพ ต้อง 2.2 สแกนด้วยเครื่ องแสกนเนอร์ จากภาพถาย ขออนุญาตจากเจ้าของลิขสิ ทธิ์ น้ นั ั ้ อหาด้วย 2.3 บันทึกภาพด้วยกล้องดิจิตอล จากสถานที่ต่างๆ นํามาปรับปรุ งให้เหมาะสมกบเนื ่ ฝี มือการถายภาพของเราเอง 2.4 ซื้ อคลิปอาร์ตรู ปภาพหรื อ Photo CD มาใช้งาน ่ นเทอร์ เน็ตที่ไมสงวนลิ ่ 2.5 ดาวน์โหลดรู ปภาพจากเครื อขายอิ ขสิ ทธิ์ มาใช้งาน ซึ่ งในปั จจุบนั มี อยูจ่ าํ นวนมากที่ระบุว่า เป็ นภาพที่มีลิขสิ ทธิ์ แบบ Creative Commons (CC) ซึ่ งเรานํามาใช้เพื่อ ่ ่ หรื อนําไปใช้ประโยชน์ทางการค้า เชน่ การเผยแพรทางการศึ กษาได้ แตห้่ ามรวบรวมนําไปจําหนาย http://www.freephotobank.org/ สังเกตได้จากเครื่ องหมาย ํ ดตั้ งขึ้ น ครีเอทีฟคอมมอนส์ (Creative Commons: CC) คือองค์กรที่ไม่แสวงหาผลกาไรจั ่ ่ ให้กว้างขึ้ นโดยไมจํ่ ากดที ั ่สัญญาอนุญาตของสื่ อนั้ นๆ สัญญา เพื่อขยายขอบขายของการใช้ สื่อตางๆ ่ อนุ ญาตของครี เอทีฟคอมมอนส์ จะเอื้ อให้มีการใช้สื่อทั้ งทางภาพ เสี ยง ข้อมูล โดยการแบงแยก ่ ่ สัญญาอนุญาตยอยออกสํ าหรับการแจกจายและการใช้ ขอ้ มูล โดยการอ้างอิงถึงเจ้าของลิขสิ ทธิ์ เดิม ครี เอทีฟคอมมอนส์ก่อตั้ งโดย ลอว์เรนซ์ เลสสิ ก ซึ่งปัจจุบนั บริ หารงานโดย โจอิจิ อิโต (จอย อิโต) ่ ่ สัญญาอนุญาตครี เอทีฟคอมมอนส์ ชวยให้ เจ้าของลิขสิ ทธิ์ สามารถให้สิทธิ บางสวนหรื อ ่ ทั้ งหมดแกสาธารณะ ในขณะที่ยงั คงสงวนสิ ทธิ อื่นๆไว้ได้ โดยการใช้สัญญาอนุ ญาตหลายหลาก รู ปแบบ ซึ่ งรวมถึง การยกให้เป็ นสาธารณสมบัติหรื อสัญญาอนุ ญาตแบบเปิ ดทั้ งหลาย โดยมี ิ ญหาลิขสิ ทธิ์ต่อการแบงปั ่ นสารสนเทศ จุดประสงค์เพื่อหลีกเลี่ยงการเกดปั มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บเพจด้วยรู ปภาพ ตกแตงเว็

่ อของ สํานักกฎหมาย สัญญาครี เอฟทีฟคอมมอนส์ในภาษาไทย จัดทําขึ้ นโดยความรวมมื ธรรมนิติ สถาบัน ChangeFusion และสถาบันเทคโนโลยีนานาชาติสิรินธร มหาวิทยาลัย ธรรมศาสตร์ ั โดยรองรับตามหลักเกณฑ์ครี เอทีฟคอมมอนส์ รุ่ น 3.0 และปรับให้เข้ากบกฎหมายลิ ขสิ ทธิ์ ไทย จึง สามารถใช้บงั คับได้ตามกฎหมายไทย ประกาศเปิ ดตัวเมื่อวันที่ 2 เมษายน พ.ศ. 2552 เป็ นลําดับที่ 51 ของโลก (รายละเอียดดูได้ที่ http://creativecommons.org/international/th/) 3. คําสั่ งในการแทรกภาพในเว็บเพจ 3.1 รปแบบคํ าสั่ ง ู <IMG SRC=“ชื่อรู ปภาพ” หรื อ “path/file name” หรื อ “image URL”> ่ ่เกบภาพให้ ็ สําหรับคําสัง่ <IMG SRC> เป็ นการเรี ยกรู ปภาพด้วยการระบุตาํ แหนงที ถูกต้อง ่ ่ ถ้าระบุ ผิดตําแหนงบราวเซอร์ จะไมสามารถแสดงผลรู ปภาพนั้ นได้และมี เครื่ องหมายกากบาท ่ ่ แทนที่ การระบุตาํ แหนงและชื ่ อไฟล์จะแตกตางจากที ่เราเคยระบุในระบบปฏิบตั ิการวินโดว์ปกติ ่ ั ่ออ้าง ถือเป็ นมาตรฐานของการอ้างไฟล์บนเว็บ ระวังเรื่ องชื่อไฟล์ที่มีอกั ษรตัวเล็กตัวใหญผสมกนเมื ่ ตอ้ งทําการแกไขกอนเสมอ ้ ่ ่ ผิดในคําสัง่แล้ว การแสดงผลในบราวเซอร์จะทําไมได้ ดังตัวอยาง การอ้างไฟล์ในระบบวินโดว์ปกติบอกเส้นทางด้วยแบ็คสแลช (\) C:\images\bird.jpg

การอ้างไฟล์ในการเขียนเว็บเพจบอกเส้นทางด้วยแสลช (/) <IMG SRC=“images/bird.jpg”> <IMG SRC=“http://www.easyhome.in.th/images/bird.jpg”>

่ ั ่อรู ปภาพจริ งที่ทาํ ให้การแสดงผลไมถู่ กต้อง เชน่ การระบุชื่อไมตรงกบชื <IMG SRC=“images/Bird.jpg”> <IMG SRC=“images/Bird.Jpg”> <IMG SRC=“images/BIRD.jpg”> <IMG SRC=“images/bird.JPG”>

่ าสั่งทั้ งสี่ บรรทัดเป็ น สังเกตที่อกั ษรตัวเล็กตัวใหญ่ ในระบบปฏิบตั ิการวินโดว์จะเห็นวาคํ ั ่ การเรี ยกรู ปเดียวกนมาแสดงผล แสดงผลในเครื่ องที่มีระบบปฏิบตั ิการวินโดว์ได้ไมมี่ ปัญหา แตใน ่ นเทอร์ เน็ตจะมองเห็นคําสั่งทั้ งสี่ ระบบปฏิบตั ิการยูนิกส์หรื อลินุกส์ที่นิยมใช้กนัมากบนเครื อขายอิ ่ ั ่ รูปมาแสดงผล วิธีการแกไขที ้ ่ง่ายที่สุดคือ ให้เราเปลี่ยนชื่ อ บรรทัดเป็ นการเรี ยกรู ปที่แตกตางกนสี ่ นเทอร์ เน็ตเป็ นอักษรตัวเล็กทั้ งหมด เมื่ออ้างชื่อไฟล์จะได้ ไฟล์ทุกไฟล์ในการใช้งานบนเครื อขายอิ ่ ปใดเป็ นรู ปเกยวกบอะไร ี่ ั ่ สะดวกขึ้ น ไมสั่ บสนวารู ให้แยกความแตกตางของชื ่อด้วยเลขเรี ยงลําดับ เชน่ bird_01.jpg, bird_02.jpg, bird_11.jpg เป็ นต้น มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บเพจด้วยรู ปภาพ ตกแตงเว็

การเพิม่ เติมส่ วนขยาย (Attribute) ให้ รู ปภาพ เพื่อให้การแสดงผลรู ปภาพบนหน้าเว็บเพจเป็ นไปตามความต้องการของเรา เราสามารถ ํ ่ กาหนดสวนขยายให้ รูปภาพได้ดงั นี้ 3.2 การใส่ คาํ อธิบายในภาพ ่ บสนุ นการแสดงผลรู ปภาพทราบวาใน ่ เป็ นการระบุขอ้ ความให้ผชู ้ มที่ใช้บราวเซอร์ ไมสนั ่ ้ คือรู ปอะไร หรื อในกรณี ที่เป็ นภาพขนาดใหญการแสดงผลจะช้ ่ ตําแหนงนี า ผูช้ มสามารถมองเห็น ่ ่ ่อนํา ข้อความนั้ นได้และพิจารณาได้วาจะรอดู ภาพที่สมบูรณ์ก่อนหรื อไม่ ถ้าเป็ นบราวเซอร์ยคุ ใหมเมื ็ ่ ยวกนั อความในแท็ก ALT ออกมาให้เห็นเชนเดี เมาส์ไปชี้ บนรู ปภาพกจะแสดงข้ ี่ ั ปภาพ”> <IMG SRC=“ชื่อรู ปภาพ” ALT=“ข้อความที่ตอ ้ งการแสดงเกยวกบรู ่ <IMG SRC=“images/prasart_peung.jpg” ALT=“งานแหปราสาทผึ ้ ง จังหวัดสกลนคร”>

ผลจากการแสดงผลเมื่อนําเมาส์ ไปวางเหนือภาพ

3.3 การกําหนดขนาดภาพ ่ ั ่เราต้องการเล็กน้อย เชน่ ในบางครั้ งเมื่อเรานํารู ปภาพมาใช้งานอาจจะมีขนาดไมตรงกบที ่ อเล็กไป 10 pixels เราสามารถใช้วิธีการกาหนดขนาด ํ ใหญหรื ความกว้างหรื อความสู งของภาพได้ ่ นพิกเซล ด้วยคําสัง่ WIDTH=“number” และ HEIGHT=“number” ได้ โดยตัวเลขจะมีหนวยเป็ <IMG SRC=“images/bird.jpg” ALT=“Lovely Bird” WIDTH=“250” HEIGHT=“92”>

่ ็ ไมมี่ ผลตอการแสดงภาพ ํ ่ ่ ่ ่ การกาหนดสวนขยายจะใ ช้คาํ สั่งใดขึ้ นกอนกได้ ระหวางสวน ่ วให้คน่ั ด้วยชองวางเสมอดั ่ ่ ่ างลางนี ่ ้ จะมีผลเหมือนกบบรรทั ั ขยายแตละตั งตัวอยางข้ ดบน <IMG SRC=“images/bird.jpg” WIDTH=“250” HEIGHT=“92” ALT=“Lovely Bird”> <IMG ALT=“Lovely Bird” WIDTH=“250” HEIGHT=“92” SRC=“images/bird.jpg”>

ํ ่ การกาหนดคาตายตั วแบบนี้ สามารถใช้ได้ท้ งั การเพิ่มหรื อลดขนาดของภาพ ในกรณี ที่ ่ ต้องการขยายขนาดของภาพโดยให้คงอัตราสวนของภาพเดิ มไว้ถกต้ ู องเสมอ เราสามารถใช้แท็กนี้ <IMG SRC=“ชื่อรู ปภาพ” WIDTH=“X%”>

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บเพจด้วยรู ปภาพ ตกแตงเว็

ํ ่ ่ เ พิ่มขึ้ นทางด้านกว้าง โดยมี ความสู งถูกขยายตามใน ซึ่ งจะเป็ นการกาหนดอั ตราสวนที ่ ้ น ลดเปอร์ เซนต์ลงให้ติดลบไมได้ ่ ) ข้อควรระวังคือ ่ สัดสวนคงที ่นน่ั เอง (ใช้ในการขยายภาพเทานั ่ ่เกนกวา ิ ่ 100 เปอร์ เซ็นต์จะทําให้รูปภาพแตก ขาด ถ้าภาพมีขนาดเล็ก การขยายในอัตราสวนที ่ จะดีกวา่ ่ ขยายให้ได้ขนาดกอน ความชัดเจน หากต้องการขยายขึ้ นควรใช้โปรแกรมตกแตงภาพ 3.4 การกําหนดเส้ นขอบภาพ ่ ั ปภาพด้วยการแสดงเส้นขอบ (โดยเฉพาะ ในบางกรณี เราอาจต้องเพิ่มความนาสนใจให้ กบรู ่ ) เราสามารถใช้แท็ก BORDER=“number” ได้ ในกรณี ทาํ เป็ นจุดเชื่อมโยง รายละเอียดในบทตอไป ํ ่ นศูนย์ ่ วเลขที่ระบุจะมีหนวยเป็ ่ นพิกเซล ถ้าไมต้่ องการเส้นขอบให้กาหนดคาเป็ โดยคาตั <IMG SRC=“images/bird.jpg” ALT=“Lovely Bird” WIDTH=“250” HEIGHT=“92” BORDER=“2”>

3.5 การจัดวางตําแหน่ งรปภาพ ู ั อความมักจะประสบปั ญหาเมื่อภาพมีขนาดสูงกวาตั ่ วอักษรและ ในการวางรู ปภาพผสมกบข้ ่ ่ ั โดยปกติเมื่อนํารู ปไปวางแทรกข้อความ ข้อความจะ ข้อความมีความสั้ นยาวของประโยคไมเทากน ่ แสดงผลอยูท่ ี่ส่ วนลางของภาพทางขวามื อเสมอ

่ ก น้องเหมียวนารั ํ เราสามารถกาหนดการแสดงผลของรู ปภาพด้วยแท็ก ALIGN=“X” ได้ดงั นี้ ํ ่ ่แสดงผล การแสดงผล คําสัง่ ที่ใช้กาหนดตํ าแหนง่ ตําแหนงที ่ ายของจอภาพ แบบแนวตั้ งเป็ น ตําแหนงซ้ ALIGN=”LEFT” ่ คําสัง่ ที่ใช้กบั ตําแหนงขวาของจอภาพ ALIGN=”RIGHT” รู ปภาพ ALIGN=”TOP”, “TEXTTOP” ่ แบบแนวนอน ตําแหนงบนสุ ดของรู ปภาพ ALIGN=”MIDDLE”, “ABSMIDDLE” ่ ่ึ เป็ นคําสัง่ ที่ใช้กบั ตําแหนงกงกลางของรู ปภาพ ALIGN=”BOTTOM”, “BASELINE”, ่ ่ ดของรู ปภาพ ข้อความ ตําแหนงลางสุ “ABSBOTTOM”

ิ ข้ อสั งเกต ถ้าข้อความที่แสดงผลมีความยาวเกนไป เมื่อใช้คาํ สัง่ ALIGN=“TOP” หรื อ ่ ่ลน้ บรรทัดจะถูกตัดมาแสดงผลใต้รูปภาพ ซึ่งอาจจะขาดความ ALIGN=“MIDDLE” ข้อความสวนที ่ ั ่ ้น สวยงามและไมเหมาะสม ดังนั้ นทั้ งสองคําสัง่ จึงเหมาะกบการแสดงผลด้ วยข้อความสั้ นๆ เทานั

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บเพจด้วยรู ปภาพ ตกแตงเว็

่ อความในคําสัง่ ALIGNMENT จะมีดงั นี้ ลักษณะการแสดงผลของตําแหนงข้

3.6 การกําหนดช่ องว่ างระหว่ างข้ อความกับรปภาพ ู ั ปภาพจะถูกกาหนดให้ ํ โดยปกติ ขอ้ ความกบรู วางชิ ดติดกนั ทําให้ขาดความสวยงาม เรา ํ ่ ่ อความกบรู ั ปภาพได้ท้ งั ในแนวนอนและแนวตั้ งด้วยแท็ก สามารถกาหนดระยะหางระหวางข้ <IMG SRC=“ชื่อรู ปภาพ” VSPACE=“number” HSPACE=“number”> ่ ่ ่ ่ นพิกเซล และ เมื่อ VSPACE คือชองวางตามแนวนอน (บนและลางของรู ปภาพ) มีหนวยเป็ ่ ่ ่ นพิกเซล HSPACE คือชองวางตามแนวตั ้ ง (ซ้ายและขวาของรู ปภาพ) มีหนวยเป็ <IMG SRC=“images/apinksax.jpg” ALT=”Pink Sax Man” WIDTH=“160” HEIGHT=“200” BORDER=“2” VSPACE=”5” HSPACE=“10”>

่ น 20,20 ภาพซ้ายเว้นระยะขอบแนวนอน (10)และแนวตั้ ง (5) ภาพขวาเปลี่ยนคาเป็ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บเพจด้วยรู ปภาพ ตกแตงเว็

ํ เราจะทดลองกาหนดการแสดงผลรู ป ภาพใน ่ เรากาหนดโฟลเดอร์ ํ ่ กนั จากตัวอยาง สาํ หรับ แบบตางๆ ็ ปภาพไว้ชื่อโฟลเดอร์ images เมื่อเขียนคําสั่งเพื่อ เกบรู ็ การแสดงผลจึงต้องอ้างอิงโฟลเดอร์เกบภาพด้ วย ดังไฟล์ ่ ข้างลาง ่ นี้ ตัวอยาง

ผลลัพธ์ที่ได้เป็ นดังภาพนี้

ตัวอย่ างไฟล์ คาํ สั่งการแทรกภาพในเว็บเพจ

ตัวอย่ างหน้ าเว็บเพจแทรกรู ปภาพจากไฟล์ image_01.html มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บเพจด้วยรู ปภาพ ตกแตงเว็

่ ่ ่ ทดลองสร้างไฟล์ที่แตกตางจากเดิ มด้วยการเปลี่ยนคาสวนขยายของคํ าสั่งรู ปภาพเพิ่มเติม ่ ่ ่ แล้วจัดเกบ็ไฟล์ในชื่ อ image_02.html ทดสอบการแสดงผลผานบราวเซอร์ ดูความแตกตางที ิ ้ นวา่ มาจากการแกไขหรื ้ ่ เกดขึ อเพิม่ เติมสวนขยายคํ าสัง่ ใด

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

จะเห็นได้ว่า การวางข้อความ และรู ปภาพในหน้าเว็บเพจของเรา ่ งาม ไร้ ยังกระจัดกระจาย ดูไมสวย ระเบียบ ่ วิธีการที่ดีกวานี ่ ้ ในการ นาจะมี ํ ่ กาหนดตํ าแหนงของการแสดง ผล ภาพและตัวอักษร เหมือนกบัที่เรา ่ ดู จ ากเว็บไซต์อื่นๆ ที่ ทาํ ได้อ ยาง สวยงาม

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บเพจด้วยรู ปภาพ ตกแตงเว็

3.7 การกําหนดภาพฉากหลังด้ วยส่ วนขยาย BACKGROUND ํ การกาหนดให้ รูปภาพเป็ นฉากหลังโดยใช้ส่ วนขยาย BACKGROUND=“Image URL” ํ มักจะใช้ในคําสัง่ <BODY> เสมอ เป็ นคําสั่งที่กาหนดการแสดงรู ปภาพที่เราต้องการซึ่ งอาจจะไม่ ี่ องกบข้ ั อมูลเนื้ อหาในเว็บไซต์ของเรา แต่ตอ้ งไมขั่ ดแย้งหรื อแยงความนาสนใจไปจากเนื ่ ่ เกยวข้ ้ อหา ที่เราต้องการนําเสนอ

ตัวอย่ างภาพพืน้ หลังขนาดเล็กที่นิยมใช้ กนั ในเว็บเพจ มี ขอ้ ควรระวังสําหรั บการใช้รูปภาพเป็ นพื้ นหลัง คือ รู ปภาพฉากหลังที่ นํามาแสดงผล ิ จะต้องไม่สร้ างปั ญหาความขัดแย้ง เชน่ การมีสีสันฉู ดฉาดมากเกนไป มีลวดลายยุ่งเหยิงมากจน ่ วอักษร ภาพต้องมีขนาดเล็กเพื่อให้ ่ ้ อหา ควรเป็ นภาพชนิ ด GIF มีสีอ่อนจางกวาตั รบกวนการอานเนื ่ แสดงผลได้อยางรวด เร็ ว

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

โรงเรี ยนเบ็ญจะมะมหาราช

่ บเพจด้วยรู ปภาพ ตกแตงเว็

ตัวอย่ างภาพพืน้ หลังเป็ นแถบยาวตามแนวนอนและการแสดงผลเมื่อนํามาใช้ งาน

ตัวอย่ างภาพพืน้ หลังเป็ นแถบยาวตามแนวตั้งและการแสดงผลเมื่อนํามาใช้ งาน

นอกจากการใช้ภาพเป็ นพื้ นหลังของหน้าเว็บเพจแล้ว ยังมี การนําภาพไปเป็ นสี พ้ืนของ ่ กบเนื ั ้ อหา ซึ่งเราจะได้ศึกษาในบทตอไป ่ ตารางเพื่อสร้างความโดดเดนให้

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บเพจด้วยรู ปภาพ ตกแตงเว็

กิจกรรมเสนอแนะ ่ ่ 3 เสร็ จสิ้ นแล้ว ให้นกั เรี ยนแตละ ่ คน ทํากจกรรมดั ิ หลังจากการศึกษาบทเรี ยนหนวยที งนี้ ่ ยนรู ้ต่างๆ 1. ศึกษาหาความรู ้เพิ่มเติมในการสร้างภาพกราฟิ กใช้ในเว็บเพจจากแหลงเรี เชน่ http://www.thaigraph.com/discuz/ ่ และกาหนดสวนขยาย ํ ่ 2. ให้นกั เรี ยนทดลองการใช้คาํ สั่งแทรกรู ปภาพในตําแหนง่ตางๆ ่ แล้วทดสอบการแสดงผลผานบราวเซอร์ ่ เพิม่ เติมนอกเหนือจากในตัวอยาง

คําถามท้ ายบท ี่ องกนให้ ั ถูกต้อง 1. จงจับคูข่ อ้ ความที่มีความเกยวข้ ่ ปภาพ ……… 1) ภาพ JPEG A. ระยะหางของขอบรู ……… 2) ภาพ PNG B. เหมาะกับภาพบุคคล ทิวทัศน์ ……… 3) ภาพ GIF C. แสดงผลได้มากกวา่ 256 สี เคลื่อนไหวได้ ี่ ั ……… 4) VSPACE D. แสดงคําอธิบายเกยวกบภาพ ……… 5) ALT E. แสดงผลได้ 256 สี เคลื่อนไหวได้ ํ ั ั ลักษณ์ CC กากบ 2. จงให้ความหมายและการนํามาใช้ของภาพที่มีสญ ่ ปภาพต่อไปนี้ พอสังเขป 3. จงบอกความหมายของคําสัง่ สวนขยายรู  Boder …………………………………………………………………………………...  Align ……………………………………………………………………………………  Vspace …………………………………………………………………………………  Hspace …………………………………………………………………………………  Width …………………………………………………………………………………..  Height …………………………………………………………………………………  Alt …………………………………………………………………………………….. มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

กําเนิดภาษา HTML HTML (เอชทีเอ็มแอล - เป็ นคํายอจากคํ ่ าขึ้ นต้นของ Hyper Text Markup Language) เป็ น

่ ภาษามาร์กอัปหลักในปั จจุบนั ที่ใช้ในการสร้างเว็บเพจ หรื อข้อมูลอื่นที่เรี ยกดูผานทาง เว็บเบราเซอร์ ่ า รายการ รวมถึงการสร้าง ซึ่ งตัวโค้ดจะแสดงโครงสร้างของข้อมูล ในการแสดง หัวข้อ ลิงก์ ยอหน้ แบบฟอร์ ม เชื่ อมโยงภาพหรื อวิดีโอ โครงสร้างของโค้ดเอชทีเอ็มแอลจะอยู่ในลักษณะภายใน เครื่ องหมายมากกวา่/น้อยกวา่ เชน่ <html>, <Table>, <br> เอชทีเอ็มแอลเริ่ มพัฒนาโดย ทิม เบอร์ เนอรส์ ลี (Tim Berners Lee) เมื่อปี พ.ศ. 2523 ด้วยชื่ อโครงการ “ข้อ ความหลายมิ ติ (Hypertext)” ขณะที่ ท ํา งานอยู่ ที่ ศูนย์ปฏิบตั ิการวิจยั ทางอนุภาคฟิ สิ กส์ของยุโรป (CERN) ซึ่ งตั้ งอยู่ที่กรุ งเจนี วา สวิตเซอร์ แลนด์ ในครั้ งแรก ทิ ม เพียงคิดอํานวยความสะดวกให้กบับรรดานักวิทยาศาสตร์ ่ ้ น ในปี พ.ศ. 2537 ทิม ของสถาบันให้คน้ หาข้อมูลงายขึ ได้ก่อตั้ งกลุ่มบริ ษทั เวิลด์ไวด์เว็บ (World Wide Web Consortium : W3C) ขึ้ นที่สถาบันเทคโนโลยีแหง ่ เซอร์ทิม เบอร์เนิร์ส-ลี แมสซาชูเสตส์ หรื อเอ็มไอที ประกอบด้วยบริ ษทั หลาย ผูค้ ิดค้นและประดิษฐ์เวิลด์ไวด์เว็บ ี่ องในเครื อขายอิ ่ นเทอร์เน็ต ที่ต่างพร้อมใจ บริ ษทั ที่เกยวข้ ่ มารวมสร้ างมาตรฐาน และข้อเสนอแนะ สําหรับใช้เป็ นหลักในการปรับปรุ งคุณภาพของเว็บไซต์ ่ ผ้ ลิตด้วยมาตรฐานเดียวกนั และการแสดงผลของบราวเซอร์ของทุกคายผู ่ ภาษา HTML เป็ นภาษาที่ง่ายตอการเรี ยนรู ้ มีคาํ สั่งที่สามารถทําความเข้าใจได้ง่าย เพื่อสื่ อ ั ความหมายคล้ายกบภาษาพู ดของมนุษย์ เชน่ <Table width=”100%”> หมายถึงตารางกว้าง 100% ิ มีส่ วนขยายรายละเอียดเพิ่มเติม การตีความจากคําสั่งเพื่อให้เกดการแสดงผลของผู อ้ อกแบบและ บราวเซอร์จึงได้ผลใกล้เคียงกนั ่ จจุบนั จะมีการเขียนเว็บไซต์ดว้ ยภาษาอื่นๆ เชน่ ASP, PHP, JSP หรื ออื่นๆ แตทุ่ ก แม้วาในปั ่ ้ นกยั็ งคงใช้ภาษา HTML เป็ นพื้นฐานหลักในการควบคุมการแสดงผลของเว็บไซต์อยู่ ภาษาเหลานั นัน่ เอง ่ การศึกษาเรี ยนรู ้ภาษา HTML จึงมีความสําคัญและจําเป็ นอยางมากของนั กออกแบบและ ่ ยนเว็บไซต์มากมายที่ทาํ ให้ผูใ้ ช้งานไมต้่ องมี พัฒนาเว็บไซต์ แม้ว่าจะมีซอฟท์แวร์ ในการชวยเขี ่ ่อต้องการแกไขในสวนโค๊ ้ ่ ความรู ้ในคําสั่งภาษา HTML เลยกทํ็ าเว็บไซต์ได้ แตเมื ดคําสั่งที่มีความ ซับซ้อนให้แสดงผลได้ถูกต้องกยั็ งคงต้องใช้ความรู ้พ้ืนฐานของภาษา HTML เข้าช่วยแกปั้ ญหาอยูด่ ี มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

ภาษา HTML ไม่ ยากอย่ างทีค่ ดิ ่ ่ ิ 30 นาที อาจจะคิด ถ้าจะบอกวาเราสามารถสร้ างเว็บเพจด้วยภาษา HTML ได้ในเวลาไมเกน ่ นคํากลาวที ่ ่เกนจริ ิ ง กจกรรมตอไปนี ิ ่ ่ เราพิสูจน์ถึงความจริ งในคํากลาวดั ่ งกลาว ่ วาเป็ ้ จะชวยให้ เตรี ย มเครื่ อ งมื อ สํา หรั บ การสร้ า งงาน ประกอบด้ว ย เครื่ อ งคอมพิ ว เตอร์ พ ร้ อ มระบบ ้ อความ (Text Editor) บราวเซอร์สาํ หรับการแสดงผล โดยแยกตาม ปฏิบตั ิการและซอฟท์แวร์แกไขข้ ระบบปฏิบตั ิการดังนี้ 1. ระบปปฏิบัติการ Windows ใช้ Notepad ในการเขียนคําสั่ง ใช้บราวเซอร์ Internet Explorer หรื อบราวเซอร์อื่นๆ ในการแสดงผล 2. ระบบปฏิบัติการ Linux ใช้ Text Editor ในการเขียนคําสั่ง ใช้บราวเซอร์ Firefox หรื อ บราวเซอร์อื่นๆ ในการแสดงผล 3. ระบบปฏิบัติการ Mac OS X ใช้ Text Editor ในการเขียนคําสั่ง ใช้บราวเซอร์ Safari หรื อบราวเซอร์อื่นๆ ในการแสดงผล ่ บนซอฟท์แวร์แกไขข้ ้ อความในแตละระบบปฏิ ่ ให้พิมพ์คาํ สั่งภาษา HTML งายๆ บตั ิการที่ ่ เราใช้งานอยูใ่ นเครื่ องคอมพิวเตอร์ ดังตอไปนี ้ <HTML> <head> <title>Welcome to My First Page : เว็บเพจแรกของฉัน</title> </head> <body> Welcome to My First Page : นี่คือเว็บเพจแรกของฉัน </body> </HTML> ่ การพิมพ์คาํ สัง่ เมื่อพิมพ์เครื่ องหมาย < (น้อยกวา่) จะต้องพิมพ์อกั ษรตัวแรกของคําสั่งตอไป ่ อตัวเล็กกได้ ็ แล้วบันทึกไฟล์น้ ี ดว้ ยชื่ อ ทันทีไมต้่ องเคาะเว้นวรรค คําสั่งจะใช้ตวั อักษรตัวใหญหรื index.html กรณี ที่เป็ นระบบปฏิบตั ิการวินโดว์และใช้ Notepad เขียนโค๊ดคําสั่งเมื่อทําการบันทึก ่ ไฟล์จะต้องเปลี่ยนชนิดของการบันทึกไฟล์เป็ น All files (*.*) กอน ่ จากนั้ นให้เปิ ดบราวเซอร์ที่แนะนําไว้ในแตละระบบ ปฏิบตั ิการ ที่เมนู File เลือก Open File เลือกไฟล์ index.html เพื่อแสดงผลไฟล์เว็บเพจหน้าแรกของเราได้แล้ว มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

การพิมพ์คาํ สั่งใน Notepad บนวินโดว์

การพิมพ์คาํ สั่งใน Text Editor บนลินุกส์

การแสดงผลใน Internet Explorer

การแสดงผลใน Firefox Browser

ั ภาพแสดงการเขียนคําสั่งใน Notepad บนระบบปฏิบตั ิการวินโดว์เปรี ยบเทียบกบการเขี ยน ่ ่ ั และเมื่อแสดงผลในบราวเซอร์ ก็ให้ ใน Text Editor บนระบบปฏิบตั ิการลินุกส์ไมแตกตางกน ่ ถูกต้อง ผลลัพธ์แบบเดียวกนัอยาง

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

การพิมพ์คาํ สั่งใน Text Editor บนระบบปฏิบตั ิการ Mac OS X

การแสดงผลในบราวเซอร์ Safari และ Firefox บนระบบปฏิบตั ิการ Mac OS X

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

โครงสร้ างภาษา HTML ํ ั ่อให้สามารถนําไปใช้ โครงสร้างของภาษา HTML ถูกกาหนด ให้มีมาตรฐานเดี ยวกนเพื ประโยชน์ได้ครอบคลุมและแสดงผลได้ดีในทุกบราวเซอร์ โดยมีคาํ สัง่ (tag) ในภาษา HTML ซึ่ ง ประกอบด้วยเครื่ องหมายน้อยกวา่ (<) และเครื่ องหมายมากกวา่ (>) ซึ่งบรรจุคาํ สั่งอยูภ่ ายใน <คําสัง่> ่ ่ นคําสั่งแบบคู่คือ มีคาํ สั่งเปิ ดและคําสั่งปิ ด เชน่ <p>...</p> ในคําสั่งปิ ดจะมี คําสั่งสวนใหญจะเป็ เครื่ องหมายสแลช (/) นําหน้าคําสัง่ ด้วยเสมอ แต่กม็ ีบางคําสัง่ ที่ไมจํ่ าเป็ นต้องมีคาํ สัง่ ปิ ดท้ายอีก ่ าสัง่ อาจมีส่ วนขยาย (Attributes) เพื่อเพิ่มเติมในรายละเอียดของคําสัง่ นั้ นๆ ได้ คําสัง่ แตละคํ ่ โดยในแตละสวนให้ ่ ่ ่ ่ (เว้นวรรค) เพือ่ ให้ อีก และสามารถมีส่ วนขยายได้หลายๆ สวน คน่ั ด้วยชองวาง บราวเซอร์ตีความหมายในการแสดงผลได้ถูกต้อง ่ โครงสร้างของภาษา HTML จะประกอบด้วย 3 สวนหลั กๆ คือ ่ ํ ั ่อระบุไฟล์ HTML 1. สวนกากบเพื ่ วเอกสาร (Header) 2. สวนหั ่ ้ อหาของเอกสาร (Body) 3. สวนเนื

ุ HTML 1. ส่ วนกํากับเพือ่ ระบไฟล์ ํ ่ นไฟล์ภาษา HTML คําสัง่ <HTML> … </HTML> เป็ นการกาหนดให้ บราวเซอร์ รู้จกั วาเป็ ่ ถูกต้อง ตัวอักษรของคําสั่งจะเขียนด้วยอักษรตัวเล็กหรื อ เพื่อการแปรผลคําสั่งให้แสดงผลได้อยาง ่ ็ เชน่ <HTML> หรื อ <html> การแปรผลของบราวเซอร์จะให้ความหมายเดียวกัน ตัวใหญกได้ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

2. ส่ วนหัวเอกสาร (Header) ํ ่ ว (Header) ของเอกสาร HTML คือข้อความทั้ งหมดที่อยูภ่ ายใต้แท็ก ข้อกาหนดของสวนหั <HEAD> และ </HEAD> ซึ่งประกอบด้วยข้อความที่จะไปปรากฏบนไตเติ้ลบาร์ (แถบด้านบนของ ํ บราวเซอร์) และข้อกาหนดอื ่นๆ ที่จะเป็ นตัวบอกให้บราวเซอร์หรื อเซิร์ฟเวอร์ ส่ งข้อมูลไปแสดงผล ่ ้ (นอกจากข้อความในไตเติ้ล) จะไมได้ ่ ปรากฏบนหน้าเว็บเพจเลย แต่ ให้ได้ถูกต้อง ซึ่ งข้อมูลเหลานี จะทํางานอยูเ่ บื้องหลังซึ่งมีความจําเป็ นเพื่อบอกรายละเอียดสําคัญของหน้าเว็บเพจ ได้แก่ 3.1 แท็ก <TITLE> ํ ่ เอกสารเว็บเพจทุกไฟล์จะต้องมีแท็ก <title> เพือ่ ตามมาตรฐาน HTML 4.0 กาหนดวา ํ ่ อ ความที่ ใ ช้เ ป็ นชื่ อ เรื่ อ งของเว็บ เพจจะถู ก กาหนดชื ่ อ เรื่ อ งของเว็บ เพจนั้ น ๆ เสมอ เพราะวาข้ ั ดประสงค์ของเว็บเพจ โปรแกรม Search Engine ใช้ทาํ สารบัญเว็บเพจ จึงควรตั้ งชื่อเรื่ องให้ตรงกบจุ ็ ่ ่ ่ หรื อระบุเป็ น Untitle page ที่สาํ คัญควรเป็ นชื่อภาษาอังกฤษ (กจะ หน้านั้ นๆ ไมควรปลอยวางไว้ ทํางานในระดับอินเทอร์ (เน็ต) ให้ชุมชนออนไลน์ในโลกนี้ เข้าใจแล้ว ถ้าต้องการให้มีชื่อภาษาไทย ่ วยอาจใช้เครื่ องหมายโคลอน ่ (:) คัน่ระหวางสองภาษา ่ ่ รวมด้ ดังตัวอยาง <TITLE>Tip & Tricks : เทคนิคและกลเม็ดเคล็ดไมลั่ บ</TITLE>

3.2 แท็ก <META> ํ ่ กาหนดหน้ ํ ตามข้อกาหนดของมาตรฐาน HTML ไมได้ าที่ของแท็ก <META> ไว้ ่ ํ ่ ตายตัว เพี ย งแตกาหนดให้ แ ท็ก นี้ เ ป็ นคํา สั่ ง พิ เ ศษเพิ่ ม เติ ม ที่ ค าํ สั่ ง อื่ น ๆ ไมสามารถทํ า ได้ จึ ง มี ั ่ ดประสงค์ของแตละคน ่ ด้วยเหตุน้ ี แท็กตัวนี้ จึง ผูอ้ อกแบบใช้แท็กนี้ กนไปหลายแนวทางตามแตจุ ั ่ ํ ่ ่ สามารถทํางานได้หลายหน้าที่ข้ ึนอยูก่ บวาจะใช้ ส่ วนขยายเป็ นรู ปแบบไหนและกาหนดคาอยางไร ่ ่พบมีการนํามาใช้กนอยู ั ่ 4 รู ปแบบคือ เทาที ํ HTTP-EQUIV ใช้กาหนดข้ อมูลที่จะนําไปสร้าง HTTP header ซึ่ งเป็ นข้อมูลสําคัญที่ใช้ ่ อมูลโดยโปรโตคอล HTTP ในการรับสงข้ NAME ใช้ระบุชื่อคุณสมบัติของเอกสาร เชน่ author, description, expiration, date และ keyword (คําสําคัญที่ Search engine ใช้คน้ หาเว็บเพจตาม ั ่ หมวดหมู่ที่ตรงกบความต้ องการหรื อไม่) เป็ นต้น ซึ่ งจะต้องสงไปพร้ อม ั ่ ณสมบัติที่ระบุโดยสวนขยาย ่ กบคาคุ CONTENT

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

ํ ่ ณสมบัติของเอกสารที่ตอ้ งการสงให้ ่ กบั เว็บเซิ ร์ฟเวอร์หรื อ ใช้กาหนดคาคุ ํ ั ั ่ การกาหนดชื ่อเฉพาะ ต้องสอดคล้องตรงกนกบสวนขยายใน NAME ํ ่ SCHEME ใช้กาหนดรู ปแบบในการตีความข้อมูลที่อยูใ่ นสวนขยาย CONTENT มัก ่ <META SCHEME=”9พบในเว็บไซต์ที่มีที่ต้ งั ในอเมริ กา ดังตัวอยาง digit-ZipCode” NAME=”zip” CONTENT=”02134-1078”> ่ ่ให้ต่อไปนี้ ถือวาเป็ ่ น การใช้งานของแท็ก <META> มีหลายแนวทางแตตั่ วอยางที มาตรฐานสากลที่ทุกเว็บเพจควรมีไว้เสมอ ได้แก่ ํ  การกาหนดรหั สเพื่อแสดงอักขระภาษาให้ถูกต้อง เราสร้างเว็บเพจภาษาไทยดังนั้ น ํ ่ ่ง ซึ่ งมี 2 แบบคือ การกาหนดให้ บราวเซอร์ แสดงผลด้วยอักขระภาษาไทยจึงมีความจําเป็ นอยางยิ ํ ํ windows-874 ซึ่งกาหนดโดยไมโครซอฟท์ และ TIS-620 กาหนดโดย NECTEC ให้ใช้แท็กนี้ <meta http-equiv="content-type" content="text/html; charset=windows-874"> <meta http-equiv="content-type" content="text/html; charset=TIS-620"> ในปั จจุ บนั นี้ เพื่อให้เว็บไซต์ต่างๆ มีความเป็ นสากล บราวเซอร์ สามารถแสดง ่ ได้ครอบคลุมหลายภาษามากขึ้ น จึงมีการใช้รหัสภาษาแบบยูนิโค๊ด (UTF-8) อักขระในภาษาตางๆ ี่ องกบฐานข้ ั ่ ่ ่ใช้ระบบปฏิบตั ิการ มากขึ้ น โดยเฉพาะการทําเว็บที่ตอ้ งเกยวข้ อมูลหรื อเครื่ องแมขายที รุ่ นใหมๆ่ ปั จจุบนั หันมาให้การสนับสนุ นรหัสภาษาแบบ UTF-8 แทบทั้ งสิ้ น ควรเลื อกใช้ให้ ่ ่ ) เหมาะสม (หรื อสอบถามผูใ้ ห้บริ การเครื่ องแมขาย <meta http-equiv="content-type" content="text/html; charset=UTF-8"> ํ  การกาหนดชื ่ อเจ้าของเว็บไซต์ หรื อผูอ้ อกแบบเว็บไซต์น้ นั ๆ เพื่อให้ผชู ้ มสามารถ ่ บได้สะดวก ค้นหาและติดตอกลั <meta name="author" content="Montree Kotkanta : webmaster@krumontree.com"> ํ ี่ ั บไซต์ ซึ่ งอาจเป็ นการบอกเลาถึ ่ งชื่ อ หรื อภารกจิ  การกาหนดคํ าอธิ บายเกยวกบเว็ ่ ็ ด้วยการเขียนเป็ นประโยคบอกเลาซึ ่ ่ งมี ของหนวยงาน หรื อวัตถุประสงค์ของการจัดทําเว็บไซต์กได้ ่ ้ จะไปปรากฏในฐานข้อมูลของ Search engine ด้วย ความยาวได้ถึง 256 ตัวอักษร คําอธิ บายเหลานี ่ ดังตัวอยาง CONTENT

Benchama.ac.th

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

IsanGate.com

ตัวอย่ างการค้ นหาเว็บไซต์ Isangate.com จาก Yahoo ํ ่ บไซต์คน้ หาข้อมูล (Search engine)  การกาหนดคํ าหลักสําหรับการค้นหาผานเว็ เป็ นสิ่ งจําเป็ นและสําคัญยิง่ ในการโปรโมตเว็บไซต์ของเราให้เข้าไปอยูใ่ นกลุ่มของเว็บไซต์ต่างๆ ใน ่ Google, Yahoo, Lycos, Excite หรื อเว็บไซต์ของไทย ฐานข้อมูลของ search engine ชื่อดังๆ อยาง ่ Sanook.com เป็ นต้น อยาง <meta name="keywords" content="ben, benchama, benjama, bm, bmnet, k-12, secondary school, ubon, ubonratchathani, isan, esarn, northeast, thai, Thailand."> <meta name="Keywords" content="isan, saon, i-san, sa-on, art, cultural, thai, morlum, folk, song, music, drama, dhamma, cha supatto, Thailand, north-eastern, isaan, e-sarn, ubon, ubonratchathani."> ํ ่ ช้ มจะใช้คน้ หาเมื่ อนึ ก ถึ ง การเขี ยนคํา หลัก นั้ นเราสามารถกาหนดคํ าที่ คาดวาผู เว็บไซต์ของเรา เป็ นคําที่ติดปาก อาจเป็ นชื่ อเต็ม ชื่อยอ่ ชื่อสถานที่สาํ คัญ ชื่อเมือง ชื่อประเทศ ชื่ อ ี่ องกบเว็ ั บเรา สามารถใส่ คาํ ได้มากมายถึง 256 บทความ ชื่ อคนเขียน คําเดน่ หรื อคําที่มีส่ วนเกยวข้ ่ าให้คน่ั ด้วยเครื่ องหมายคอมมา่ (,) ตัวอักษร ในแตละคํ

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

ผลการค้ นหาจากคําหลักของเว็บไซต์ www.benchama.ac.th ด้ วยคํา benchama bmnet 3.3 แท็ก <LINK> ี่ องกบไฟล์ ั แท็กนี้ จะทําหน้าที่ในการอ้างอิงถึงข้อมูลจากไฟล์อื่นๆ ที่เกยวข้ HTML ที่ เปิ ดในขณะนี้ การอ้างอิงมีจุดประสงค์ 2 ประการคือ ํ 1) อ้างถึงไฟล์ขอ้ มูลตัวอื่นเพื่อกาหนดให้ บราวเซอร์ ดึงข้อมูลนั้ นมาใช้ประโยชน์ใน ่ างอิงไฟล์กาหนดรู ่ กษณะนี้ ได้แกการอ้ ํ ็ ไฟล์ปัจจุบนั ตัวอยางลั ปแบบหรื อสไตล์ชีทที่เกบในไฟล์ อื่น ่ งในหนวยที ่ ่ 6) ดังตัวอยางนี ่ ้ มาแสดงผล (รายละเอียดจะกลาวถึ <link href="bmstyle1.css" rel="stylesheet" type="text/css">

2) ใช้อา้ งถึ งไฟล์อื่นๆ เพื่อแสดงข้อมูลเพิ่มเติม ในลักษณะการขยายรายละเอี ยดที่ ่ สัมพันธ์ถึงกนั ดังตัวอยาง <link title=”The manual in Thai” type=”text/html” rel=”alternate” hreflang=”th” href= “http://www.easyhome.in.th/technical/flashget.htm>

่ ้ ห มายถึ ง เราจะอ้า งถึ ง ไฟล์ที่เ ป็ นคู่ มื อ การใช้ง านภาษาไทยซึ่ ง มี จากตัว อยางนี ั ั ่ ่ ความสัมพันธ์กนกบไฟล์ ปัจจุบนั ไฟล์ที่อา้ งถึงอยูท่ ี่เว็บไซต์ใด ชื่อวาอยางไร

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

3. ส่ วนตัวเอกสาร (BODY) ่ ่ มี ค วามสลับ ซับ ซ้อ น และมี ร ายละเอี ย ดมากที่ สุ ด ของไฟล์ อยู่ ภ ายใต้ค าํ สั่ ง เป็ นสวนที <BODY> และ </BODY> ภายในแท็กนี้ ยงั มีส่ วนขยายเพิ่มเติมอีกมากเพื่อแสดงรายละเอียดของ การแสดงผลในหน้านี้ อีกหลายคําสัง่ ดังนี้ 3.1 แท็ก <BODY> ํ ั ็ ภายในแท็กนี้ จะมีการกาหนดรายละเอี ยดเพิ่มเติมพื้นฐานเข้าไปที่นิยมใช้กนมากกจะ ํ ่ ถ้าเรา ได้แก่ การกาหนดสี พ้ืนหลัง สี ของตัวอักษรในเนื้ อหา สี ของข้อความที่เป็ นจุดเชื่อมโยงตางๆ ่ มีการกาหนดเรื ํ ไมได้ ่ องสี เลย จะสังเกตได้วา่ บราวเซอร์ จะใช้ค่ามาตรฐานแสดงผลแทน นัน่ คือ พื้น ํ ่ ่ น เพื่อ ความ หลัง จะเป็ นสี ข าวและตัว อัก ษรจะเป็ นสี ด าํ เสมอ เราสามารถกาหนดให้ เ ป็ นอยางอื ่ ตามที่ตอ้ งการ ซึ่งสวนขยายที ่ ั แก่ สวยงามและชัดเจนในการอานได้ ่นิยมมาใช้กนได้ Attribute BACKGROUND BGCOLOR BGPROPERTIES LEFTMARGIN TOPMARGIN TEXT LINK ALINK VLINK

ความหมายของส่ วนขยาย ํ ใช้กาหนดชื ่อไฟล์ที่ใช้เป็ นพื้นหลัง ํ ใช้กาหนดสี พ้ืนหลัง ่ ่ อน ํ ั กาหนดคุ ณสมบัติให้กบภาพพื ้นหลัง ถ้าเป็ น FIXED ภาพพื้นหลังจะไมเลื ตามการปรับของแถบเลื่อน (Scroll bar) ํ ่ ่ น Pixels กาหนดระยะหางจากขอบ จอด้านซ้ายมีหนวยเป็ ํ ่ ่ น Pixels กาหนดระยะหางจากขอบ จอด้านบนมีหนวยเป็ ํ กาหนดสี ของตัวอักษรภายใต้แท็ก <BODY> และ </BODY> ทั้ งหมดให้มีสี ํ ่ คาํ สัง่ อื่นๆ กาหนดแยกตางหาก ํ ่ ตามที่กาหนดไว้ เว้นแตจะมี ํ ่ กเรี ยกใช้งาน กาหนดสี ของข้อความที่เป็ นจุดเชื่อมโยง ที่มีสถานะยังไมเคยถู ํ ํ งถูกเรี ยกใช้งาน กาหนดสี ของข้อความที่เป็ นจุดเชื่อมโยง ที่มีสถานะกาลั ํ กาหนดสี ของข้อความที่เป็ นจุดเชื่อมโยง ที่มีสถานะเคยถูกเรี ยกใช้งานแล้ว

่ ่ ่ ่ ั ตัวอยางของรู ปแบบคําสั่งจะเห็นวาสวนขยายทุ กตัวจะเขียนเรี ยงตอกนไปภายในแท็ ก ่ น่ ระหวางสวนขยายนั ่ ่ <BODY> โดยมีช่องวางคั ้ นๆ เชน่ <body BGCOLOR=“white” BACKGROUND=“images/lotus.jpg” TEXT=“navy” LINK=“red” ALINK=“green” VLINK=“magenta”>

ํ ่ ตามตัวอยางนี ่ ้ มีขอ้ จํากดเนื ั ่องจากการใช้ชื่อของสี โดยตรง ถ้าต้องการ การกาหนดคาสี ่ องใช้การกาหนดคาสี ํ ่ ดว้ ยเลขฐานสิ บหกแทน ซึ่ งจะได้ศึกษารายละเอียดตอไป ่ ระดับสี อ่อนแกจะต้ ํ ่ ่เกบรู ็ ปภาพให้ถูกต้อง ภาพที่ใช้ควรมีขนาดเล็ก การกาหนดใช้ รูปภาพเป็ นพิน้ หลังให้ระบุตาํ แหนงที ่ เพื่อให้แสดงผลได้เร็ ว และมีลกั ษณะไมไปรบกวนการแสดงผลของตั วอักษร ่ ํ ่ จะมีค่าเป็ น 1 ระยะหางของขอบจอจะกาหนดระยะเป็ นพิกเซล ถ้าไมระบุ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

3.2 แท็ก <Hx> … </Hx> ํ ั ่ วเลขที่ เป็ นการกาหนดขนาดตั วอักษรหัวเรื่ องให้มีขนาดตามต้องการขึ้ นอยู่กบคาตั แทนคา่ X ในแท็ก ซึ่ งมีค่าตั้ งแต่ 1 – 7 แท็ก <H1> จะมีขนาดของตัวอักษรใหญที่ ่สุด และ <H7> ่ จะมี ขนาดตัวอักษรเล็กที่ สุด (คาปกติ ของคําสั่งนี้ คือตัวอักษรที่อยู่ภายในจะเป็ นตัวหนา และไม่ ั ทุกๆ แท็กจะขึ้ นบรรทัดใหมเสมอ ่ ) ให้ทดลองใช้คาํ สั่ง สามารถซ้อนแท็กในบรรทัดเดียวกนได้ ่ วอยางข้ ่ างลาง ่ จัดเกบไฟล์ ็ ดังเชนตั ในชื่อ header.html แล้วแสดงผลในบราวเซอร์

่ ่ ่อแสดงผลใน ข้อสังเกต แม้เราจะพิมพ์คาํ สั่งในแตละบรรทั ดจํานวน 2 คําสั่ง แตเมื ่ การแสดงผลคนละบรรทัดดังภาพ ไมสามารถเขี ่ ่ บราวเซอร์ จะเห็นวามี ยนคําสั่งให้แสดงตางขนาด บนบรรทัดเดียวกนั ํ แท็กนี้ สามารถกาหนดรายละเอี ยดเพิ่มเติมได้เชน่ สี ตวั อักษร ลักษณะของตัวอักษร ศึกษารายละเอียดเพิม่ เติมได้จากแท็ก <font> ซึ่งใช้ส่ วนขยายคล้ายคลึงกนั

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

3.3 แท็ก <FONT> ํ ่ อมีจุดเดนกวาสวนอื ่ ่ ่ ่นๆ เชน่ เป็ นการกาหนดรายละเอี ยดของตัวอักษรให้แตกตางหรื ่ ดังนี้ ขนาด สี ลักษณะตัวหนา/เอียง/ขีดเส้นใต้ เป็ นต้น มีส่ วนขยายรายละเอียดตางๆ ํ 1) การกาหนดขนาดตั วอักษรจะใช้ส่ วนขยายเป็ น size=“X” ซึ่ งมีตวั เลขขนาดได้ ่ ยวกบแท็ ั ก <H> แตตรงกนข้ ่ ั ามกนั นัน่ คือตัวเลขยิง่ มากขนาดตัวอักษรจะใหญขึ่ ้ น ตั้ งแต่ 1 - 7 เชนเดี ่ างลางนี ่ ้ จัดเกบไฟล์ ็ เรื่ อยๆ ให้ทดลองพิมพ์ตามตัวอยางข้ ชื่อ fontsize.html แล้วแสดงผล

ํ การพิมพ์คาํ สัง่ กาหนดขนาดของฟอนต์ แยกขนาดละหนึ่งบรรทัด แต่ผลในบราวเซอร์ จะ ่ ั ในแถวเดียว ซึ่งตางจากแท็ ่ พบวา่ แม้จะใช้คาํ สัง่ ละบรรทัดแตการแสดงผลกลั บเรี ยงตอ่กนไป ก <Hx> ่ ํ ่ ั 3 เสมอ ดังนั้ นเรา และถ้าไมกาหนดขนาด ฟอนต์เลยบราวเซอร์จะแสดงผลลัพทธ์ของขนาดเทากบ ่ จึงสามารถใช้ค่าบวก (+) และลบ (-) จากคามาตรฐาน ในคําสัง่นี้ ได้ เชน่ ่ ั 4</font> <font size=“+1”>ตัวอักษรขนาด +1 มีค่าเทากบ ่ ั 2</font> <font size=“-1”> ตัวอักษรขนาด -1 มีค่าเทากบ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

่ เลขฐานสิ บ ั วอักษรจะใช้ส่ วนขยายเป็ น color=“ชื่อสี หรื อคาสี 2) การกาํหนดสี ให้กบตั ํ ่ หก” เนื่องจากการกาหนดสี ดว้ ยชื่อไมสามารถให้ ความละเอียดได้มากนัก สู งสุ ดอยูท่ ี่จาํ นวน 16 สี ่ จากเลขฐานสิ บหกของแมสี่ ของแสงจํานวน 3 ชุดคือ RGB (Red Green ดังนั้ นจึงมีการนําเอาคาสี Blue) มาใช้ในคําสัง่ HTML ดังนี้ ่ ่ น 0) ไปจนถึงสวางสุ ่ ด (คาเป็ ่ น F) จํานวน  คาของสี จะเริ่ มจาก สี มืดสุ ด (คาเป็ 16 คา่ คือ ่ สวาง

มืด 0

C D E

่ จะใช้เครื่ องหมายชาร์ฟ (#) นําหน้ากลุ่มคาสี ่ 6 หลัก (rrggbb) ดังตัวอยาง ่  คาสี ่ คาสี สี ดาํ สี แดง สี น้ าํ เงิน สี เหลือง

RRGGBB #000000 #FF0000 #0000FF #FFFF00

่ คาสี สี ขาว สี เขียว สี ฟ้า สี เทา

RRGGBB #FFFFFF #00FF00 #00FFFF #C0C0C0

รู ปแบบของแท็กจะเป็ น <font SIZE=“5” COLOR=“#ff0000>ตัวอักษรขนาด 5 สี แดง</font>

การใช้ค่าเลขฐานสิ บหกนี้ คงจะเป็ นการยาก ่ ต่างๆ ว่าสี ใดมีค่าเทาใด ่ เราจึงต้อง ในการจดจําคาสี ใช้ซ อฟท์แ วร์ ช่ วยจัด การเรื่ อ งนี้ ใ ห้ ซึ่ งสามารถ ค้นหาได้จาก Search engine ทัว่ ไป ในที่น้ ีแนะนํา ให้ใช้สื่อแฟลชแอนิ เมชัน่ ชื่อ col.swf ที่สามารถให้ ่ และกลุ่มสี ใกล้เคียงได้ ดาวน์โหลดฟรี ที่ คาสี http://www.krumontree.com/html/col_swf.html หรื อจะใช้การหาคา่ Themes Color จากบริ การออนไลน์ที่เว็บไซต์ครู มนตรี ดอทคอม ่ ั ตามลิงกนี์ ้ http://www.krumontree.com/html/color_table.html หรื อใช้ค่าสี จากตาราง ได้เชนกน ในภาคผนวกของเอกสารท้ายเลม่

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

ํ 3) การกาหนดลั ก ษณะของตัว อักษรเราจะใช้แ ท็ก คําสั่งพิ เศษนอกเหนื อจากแท็ก ่ ลายรู ปแบบดังนี้ <font> ซึ่ งมีการใช้งานอยูห  อักษรตัวหนาใช้แท็ก <b>ตัวอักษรหนา</b>  อักษรตัวเอียงใช้แท็ก <i>ตัวอักษรเอียง</i>  อักษรตัวขีดเส้นใต้ใช้แท็ก <u>ตัวอักษรขีดเส้นใต้</u>  อักษรตัวยกใช้แท็ก <sup>ตัวอักษรยก</sup>  อักษรตัวห้อยใช้แท็ก <sub>ตัวอักษรห้อย</sub> ่ ้ สามารถใช้ร่ วมกนได้ ั แตต้่ องระวังในการจับคูค่ วรให้อยูใ่ นลําดับที่ถูกต้อง เพื่อ แท็กเหลานี การตรวจสอบหาข้อผิดพลาดได้ง่าย เชน่ <font size=“5” color=“#ff0000><b><i><u>ตัวอักษรขนาด 5 สี แดง</u></i></b></font>

แสดงคู่คาํ สั่งของภาษา html

การจัดข้ อความในเอกสาร เมื่อเราป้ อนข้อความลงในโปรแกรม Text Editor หรื อโปรแกรมสร้างเว็บไซต์อื่นๆ แม้จะ มีการเคาะวรรคหรื อกดปุ่ มแท็ป หลายครั้ งเพียงใด แม้กระทัง่ การเคาะปุ่ ม ENTER แล้ว เมื่อนําไป ่ ้ นกยั็ งคงเรี ยงแถวหน้ากระดานในบรรทัดเดียว จะขึ้ น แสดงผลบนบราวเซอร์ แล้วตัวอักษรเหลานั ่ ็ ่ ่อการแสดงผลไปสุ ดขอบขวาของบราวเซอร์ แล้วเทานั ่ ้ น เพราะการตีความของ บรรทัดใหมกตอเมื ี่ ้ งกตามกถื ็ ็ อวามี ่ เพียง ่ บราวเซอร์ จะถือวาการเคาะวรรค การกดปุ่ มแท็ป การเคาะปุ่ ม ENTER จะกครั ่ ่ ่ ั ่ ้ น เราสามารถจัดระเบียบของตัวอักษรสามารถทํา ชองวางเทากบการเคาะวรรคเพี ยงหนึ่ งครั้ งเทานั ่ งนี้ ได้ดว้ ยการใช้คาํ สัง่เข้าชวยดั 3.4 แท็ก <BR> และ <P> ่ การแสดงผลที่ต่างกนคื ั อ เป็ นคําสัง่สําหรับการตัดคําขึ้ นบรรทัดใหมทั่ ้ งคู่ แตให้ <BR> (break) เป็ นคําสั่งที่สัง่ ให้การแสดงผลบนจอภาพของโปรแกรมเว็บบราวเซอร์ ่ ่ แสดงผลในบรรทัดใหม่ หรื อเป็ นคําสัง่ สําหรับบังคับให้ข้ ึนบรรทัดใหม่ สวนใหญเราจะวางคํ าสัง่ นี้ ่ ดท้ายของประโยค หรื อแทรกระหวางคํ ่ าที่ตอ้ งการให้เลื่อนไปแสดงผลในบรรทัด ไว้ที่ตาํ แหนงสุ ถัดไป คําสัง่ นี้ เป็ นคําสัง่ เดี่ยวไมต้่ องมีแท็กปิ ด

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

ํ ั เป็ นคําสัง่ ให้บราวเซอร์ แสดงผลข้อความในกากบของ ่ าใหม่ โดยปกติแล้วบราวเซอร์ จะไมเข้ ่ าใจการพิมพ์บรรทัดเปลาเพื ่ ่อเป็ นการเว้น แท็กนี้ ข้ ึนยอหน้ ่ าใหมหลั ่ งจากจบข้อความในบรรทัด คําสั่งนี้ สามารถแทรกสวนขยาย ่ วรรค และขึ้ นยอหน้ เพิ่มได้ ํ ่ ่ ่ บน ALIGN=“Left/Center/ Right” เพื่อกาหนดตํ าแหนงของข้ อความให้แสดงผลในตําแหนงตางๆ จอได้ เชน่ ่ ่ ึงกลางหน้ากระดาษ</p> <p align=”center”>ข้อความนี้ อยูก 3.5 แท็ก <HR> ่ อความออกเป็ นสวนๆ ่ ด้วยการสร้างเส้นกน คําสัง่ นี้ เป็ นคําสัง่ เดี่ยวใช้สาํ หรับการแบงข้ ้ั ่ ิ ตามแนวนอน จะทําให้ขอ้ ความแบงออกเป็ นตอนๆ เกดความเป็ นระเบียบและสวยงาม รู ปแบบของคําสัง่ <P> … </P> (paragraph)

ํ ํ ่ วเลขบอก เป็ นการกาหนดความกว้ างของเส้น สามารถกาหนดด้ วยคาตั ่ นพิกเซล หรื อใช้ค่าเปอร์เซนต์ความกว้างของจอกได้ ็ จํานวนหนวยเป็ ํ ่ นพิกเซล SIZE เป็ นการกาหนดความหนาของเส้ นคัน่ มีหนวยเป็ ่ ่ ่ึ ALIGN เป็ นการจัดวางตําแหนงของเส้ น คาปกติ คือกงกลาง ่ NOSHADE สวนขยายเมื ่อต้องการให้เส้นกนนั ้ ั ้ นเป็ นเส้นทึบ ่ ่ ็ ให้ทดลองสร้ างไฟล์ตามตัวอยางตอไปนี ่ อ formattext.html แล้วลอง ้ แล้วจัดเกบในชื ่ ้ ่ ่ ดูเพื่อหาข้อแตกตางของคํ ่ แสดงผลผานบราวเซอร์ ดู ลองแกไขคาตางๆ าสัง่ WIDTH

ไฟล์ formattext.html ที่สร้ างเสร็ จแล้ วและการแสดงผลในบราวเซอร์ ในหน้ าถัดไป มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

การแสดงผลในบราวเซอร์ ของไฟล์ formattext.html ่ ่ นั้ น จากภาพประกอบข้างต้นเราจะมองเห็นแล้ววา่ บรรดาสวนขยายเพิ ่มเติมในแท็กตางๆ ั ดังนั้ นเราสามารถลองถูกลองผิดด้วยการทดลองนําคําสั่งเหลานั ่ ้ นมาใช้ สามารถนํามาใช้ร่ วมกนได้ ่ กจะไมปรากฏผล ็ ่ งานดู หากคําสัง่ ใดใช้งานได้การแสดงผลในบราวเซอร์จะรายงานออกมา ถ้าไมได้ ใดๆ เราสามารถลบออกได้ในภายหลัง (จะไมมี่ การแสดงความผิดพลาดออกมาให้เห็ นโดยตรง ั เหมือนกบการเขี ยนโปรแกรมคอมพิวเตอร์ทว่ั ไป) ่ ่ สิ่ งหนึ่ งที่เป็ นปั ญหาในเรื่ องการจัดข้อความคือ เรามักจะมีความต้องการในการเว้นชองวาง ่ วอักษรมากกวา่ 1 ชองเพื ่ ่อเพิ่มความสวยงามและการแยกสวนข้ ่ อความ รวมทั้ งการจัดยอ่ ระหวางตั ่ หน้าของข้อความบรรทัดแรกให้เยื้องเข้าไปเพื่อเพิ่มความสวยงาม เราไมสามารถทํ าได้ดว้ ยวิธีการ พิมพ์ตามปกติ (เคาะวรรค/กดแท็ป) จะต้องใช้รูปแบบการแสดงผลพิเศษที่เรี ยกวา่ การแทรก ่ (Unvisible seen) ลงไปในตําแหนงที ่ ่ตอ้ งการ ตัวอักษรวางคื ่ อชุดอักขระ 6 ตัว ตัวอักษรวาง ั ่ ั ประกอบด้วยอักขระ &nbsp; พิมพ์เรี ยงติดกนจะมี ค่าเทากบการเคาะวรรค 1 ตัวอักษร ดังนั้ นถ้า ต้องการเว้น 5 ตัวอักษรกต้็ องใสชุ่ ดอักขระนี้ ลงไป 5 ชุด

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

การจัดข้ อความแบบรายการ โดยปกติ ขอ้ มูลในเว็บเพจจะประกอบไปด้วย การแสดงผลด้วยข้อความธรรมดาในรู ป ่ ่ องกนไป ั ซึ่ งอาจจะดูจืดชืดไมนาสนใจ ่ ่ ่ นข้อยอย ่ ประโยคตอเนื ในเนื้ อหาบางตอนอาจมีการแบงเป็ ่ ่ วข้อยอยเราเรี ่ เพื่อให้ง่ายตอการเข้ าใจ ลักษณะการแบงหั ยกวา่ การจัดข้อความแบบรายการ การแสดงข้อมูลแบบรายการ (Lists) จะมีการแสดงผล 3 แบบคือ ํ ั (Number Styles) 1. การแสดงข้อมูลรายการแบบเรี ยงลําดับ หรื อแบบมีตวั เลขกากบ ่ ยงลําดับ หรื อแบบสัญลักษณ์กากบ ํ ั (Bulleted Styles) 2. การแสดงข้อมูลรายการแบบไมเรี ั ํ บั (No 3. การแสดงข้อ มู ล รายการแบบคํา จํา กดความ หรื อแบบไมมี่ สัญลักษณ์ กาก Bulleted Styles)

1. การแสดงข้ อมลแบบเรี ยงลําดับ <Oder Lists> ู รู ปแบบคําสัง่ <OL> <LI>รายการที่ 1</LI> <Li>รายการที่ 2</Li> <li>รายการที่ 3</li>

หมายเหตุ การพิมพ์ คาํ สั่ ง ด้ วยอักษรตัวใหญ่ หรื ออักษรตัวเล็ก หรื อผสมกัน การแสดงผลในบราวเซอร์ จะไม่ แตกต่ างกัน

</OL>

่ ่อยู่ภายในคําสั่ง <OL> จะมีการเว้นระยะระหวางบรรทั ่ การแสดงผลของรายการยอยที ด ั ารใช้คาํ สัง่ <p> และในการแสดงผลของหัวข้อแบบเรี ยงลําดับนี้ ข้อความอยู่ 1 บรรทัดคล้ายๆ กบก ่ ่ ็ คาปกติ ของคําสั่งคือรายการข้อที่ 1, 2, 3, … เรี ยงตามลําดับไป อยางไรกตามเราสามารถเปลี ่ ยน ่ ลําดับจากการแสดงผลด้วยตัวเลขเป็ นการแสดงผลด้วยวิธีการนับอื่นๆ ได้ดว้ ยการเพิ่มสวนขยาย ็ ่ TYPE=“N” เมื่อ N มีค่าเปลี่ยนไปตามตาราง ผลกจะแตกตางออกไป และในแท็กรายการ <li> เรา ํ ่ ่ มต้นการนับได้ดว้ ยสวนขยาย ่ สามารถกาหนดคาเริ Value=“x” ดังตาราง คําสั่ ง

N เท่ ากับ

<Li value=“X”

มนตรี โคตรคันทา

ลักษณะการแสดงผล ํ ลําดับหัวข้อจะเป็ นตัวเลขเสมอ (แม้ไมมี่การกาหนด ็ ) Type กตาม ลําดับหัวข้อจะเป็ นตัวอักษรตัวใหญ่ ลําดับหัวข้อจะเป็ นตัวอักษรตัวเล็ก ลําดับหัวข้อจะเป็ นตัวเลขโรมันตัวใหญ่ ลําดับหัวข้อจะเป็ นตัวเลขโรมันตัวเล็ก ระบุค่าเริ่ มต้นของตัวเลขหรื อตัวอักษรใดๆ แทนคา่ X โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

่ ่ ํ แตไมสามารถ กาหนด Type ให้แสดงเป็ นลําดับหัวข้อตัวอักษรภาษาไทย (ก, ข, ค, ง, ...) หรื อตัวเลขไทย (๑, ๒, ๓, ๔,...) ได้ 2. การแสดงข้ อมลแบบไม่ เรียงลําดับ <Unodered Lists> ู รู ปแบบคําสัง่ <UL> <li>รายการที่ 1</li> <li>รายการที่ 2</li> <li>รายการที่ 3</li> </UL>

่ คล้ายกนั กบแบบเรี ั ่ ่ยนจากตัวเลขหรื อตัวอักษรมาใช้ รู ปแบบตางๆ ยงลําดับเพียงแตเปลี ่ ั ่ ่ ่ ่ เครื่ องหมายหรื อสัญลักษณ์แทน ซึ่งจะมีการแสดงผลแตกตางกนไปตามแตบราวเซอร์ แตสวนใหญ ่ เราสามารถกาหนด ํ จะแสดงผลในแบบเป็ นจุดกลมใหญทึ่ บสี ดาํ หน้าข้อมูลรายการยอย Type ของ สัญลักษณ์ได้ 3 แบบคือ ่ ่ ํ DISC จุดกลมใหญ่ทึบ () (เหมือนคาปกติ ที่เราไมกาหนด Type นัน ่ เอง) ่ CIRCLE จุดวงกลมใหญกลวง () SQUARE จุดสี่ เหลี่ยมทึบ () ํ ํ ่ การกาหนด TYPE ถ้าเรากาหนดที ่ <UL> สัญลักษณ์จะมีผลตอรายการทุ กรายการ แตถ้่ าเรา ํ ไปกาหนดที ่ <li> จะมีผลเฉพาะในรายการนั้ นรายการเดียว ่ หมายเหตุ สี ของสัญลักษณ์ที่แสดงผลออกมาจะเป็ นไปตามคาของสี ฟอนต์ในหน้านั้ นๆ ํ ํ หรื อเป็ นสี ที่กาหนดภายใต้ แท็กฟอนต์ก่ อนหน้าคําสั่งรายการนั้ นๆ เราจึ งสามารถกาหนดสี ของ ่ ํ ่ เฉพาะที่ สัญลักษณ์แตกตางจากสี ของตัวอักษรในรายการได้ดว้ ยการกาหนดคาสี าจํากัดความ <Definition Lists> 3. การแสดงข้ อมลแบบคํ ู รู ปแบบคําสัง่ <DL> <DT>Definition term <DD>Definition </DL>

ั ่ ที่ไมมี่ สัญลักษณ์กากบ ํ ั นิ ยมใช้ในการให้ความหมายของคําศัพท์ หรื อคําจํากดความตางๆ ่ ่ซอ้ นอยูค่ ือ ในคําสัง่ ซึ่งประกอบไปด้วยคําสัง่ ยอยที ั 1. <DT> Definition term หรื อคําจํากดความ เป็ นรายการแสดงชื่อคําศัพท์ หรื อหัวข้อที่ ่ ต้องการรายละเอียด เราอาจใช้คาํ สัง่ตัวหนา <b> และตัวเอียง <i> ชวยในการเน้ นคํา หรื อข้อความนั้ นๆ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

เป็ นคําอธิ บายรายละเอียดของคําศัพท์หรื อข้อความนั้ น เป็ น ่ ่ สวนประกอบยอยของคํ าสัง่ <DT> <DD>

Definition

่ ให้ทดลองสร้างไฟล์ชื่อ Lists.html ดังตัวอยางในภาพแล้ วแสดงผลในบราวเซอร์ดู

การแสดงผลของไฟล์ ชื่อ Lists.html ในบราวเซอร์ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

่ ่ ่ จัดเกบไฟล์ ็ ่ ทดลองเปลี่ยนคาในสวนขยายรู ปแบบตางๆ แล้วแสดงผลผานบราวเซอร์ อีกครั้ ง ่ าสัง่ ใดมีค่าเหนือกวาคํ ่ าสัง่ อื่นๆ หรื อควบคุมสวนอื ่ ่นได้ เชน่ ศึกษาวาคํ ํ ่ ?  ในการแสดงผลแบบเรี ยงลําดับเราสามารถกาหนดหั วข้อเริ่ มต้นได้อยางไร ่ ยงลําดับ เหตุใดรายการที่สามจึงเป็ นรู ปสี่ เหลี่ยม ตรงตามที่  ในการแสดงผลแบบไมเรี เราต้องการหรื อไม่? ั ั  การแสดงผลแบบคําจํากดความ เหมาะกบการนํ าไปใช้งานในลักษณะใด? ่ ้ ไ ปใช้ ในการใช้ง านจริ ง เราสามารถผสมผสานรู ป แบบของการจัด เรี ย งรายการเหลานี ่ อีก ประโยชน์ได้ สามารถนําไปวางซ้อนเพื่อสร้างลําดับชั้ นของหัวข้อยอยได้

ข้ อควรจํา ในการจัดการไฟล์ของระบบปฏิบตั ิการวินโดว์และระบบปฏิบตั ิการกลุ่มยูนิกส์น้ นั มีความ ่ ั โดยในระบบปฏิ บตั ิ การยูนิกส์และลินุกส์ จะเป็ นแบบเน้นความสําคัญของตัวอักษร แตกตางกน ่ ความแตกตางกน ่ ั เชน่ เมื่อเราบันทึกไฟล์ (Case-Sensitive) คือ ตัวอักษรตัวพิมพ์เล็ก ตัวพิมพ์ใหญมี ชื่อ index.html, Index.html, INDEX.html, INDEX.HTML ทั้ งสี่ ชื่อนี้ ระบบปฏิบตั ิการวินโดว์จะ ่ นไฟล์เดียวกนั ถ้าบันทึกจะมีกรอบแจ้งเตือนมีการบันทึกซํ้ า แตถ้่ าเป็ นระบบยูนิกส์หรื อ มองวาเป็ ่ นไฟล์แตกตางกน ่ ั 4 ไฟล์ ลินุกส์จะถือวาเป็ ่ เกดปั ิ ญหาในการจัดการเว็บไซต์ในภายหลังจึ งควรตั้ งชื่ อไฟล์อยางเป็ ่ น ดังนั้ นเพื่อไมให้ ระบบดังนี้  ต้องไมตั่ ้ งชื่อไฟล์เป็ นภาษาไทยเพราะจะมีปัญหาในการแสดงผลข้ามระบบปฏิบตั ิการ ทั้ งไฟล์เว็บเพจ ไฟล์เอกสารและไฟล์ภาพประกอบ  ควรใช้ตวั อักษรภาษาอังกฤษตัวพิมพ์เล็ก a – z หรื อตัวเลข 0 – 9 ในการตั้ งชื่อไฟล์ ่ นวรรคหรื อมีช่องวางในชื ่ ่ )  ไมเว้ ่อไฟล์ หากต้องการแยกคําควรใช้ Underscore (ขีดลาง หรื อ Dash (ขีดลบ) คัน่ เชน่ dog_name.html, school-day.html ่ ่ การจะตั้ งเป็ นคา่เริ่ มต้น  ชื่อไฟล์แรกของเว็บควรใช้ชื่อ index.html (ในเครื่ องแมขายบริ ของระบบ) ่ ่ ่ *.htm หรื อ *.html สวนไฟล์ อื่นอาจ  นามสกุลของไฟล์เอกสารเว็บเพจสวนใหญจะใช้ ่ ั ใช้ *.asp, *.php, *.jsp หรื ออื่นๆ หากมีการเขียนคําสัง่ เพื่อเชื่อมตอกบฐานข้ อมูล ่ ่ สอบถามผูด้ ูแลระบบเครื่ องแมขาย ่ ่ (Administrator) วาเครื ่ ่ องให้บริ การ  หากไมแนใจให้ ํ ่ บ้าง สนับสนุนไฟล์รูปแบบใด การตั้ งชื่อมีขอ้ กาหนดอยางไร

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ภาษา HTML

กิจกรรมเสนอแนะ ่ ่ 2 เสร็ จสิ้ นแล้ว ให้นกั เรี ยนแตละ ่ คน ทํากจกรรมดั ิ หลังจากการศึกษาบทเรี ยนหนวยที งนี้ 1. ศึกษาคําสัง่ มาตรฐานของภาษา HTML จากเว็บไซต์ http://www.w3c.org 2. ให้นกั เรี ยนศึกษาและทดลองเขียนโค๊ดคําสั่งแบบออนไลน์จากเว็บไซต์ W3Schools ที่ http://www.w3schools.com/html/ ่ และกาหนดสวนขยายเพิ ํ ่ 3. ให้นกั เรี ยนทดลองการใช้คาํ สั่งตางๆ ่มเติมนอกเหนื อจากใน ่ แสดงผลผานบราวเซอร์ ่ ตัวอยาง

คําถามท้ ายบท 1. จงบอกถึงซอฟท์แวร์ ในการเขียนคําสั่งและบราวเซอร์ แสดงผลในระบบปฏิบตั ิการ ่ ตางๆ ่ ่ า งหน้า เว็บ แม้จ ะไมแสดงผลในบราวเซอร์ ให้ 2. คํา สั่ ง ใดที่ มี ค วามจํา เป็ นตอการสร้ ่ 2 ชุดคําสัง่ ยกตัวอยางมา ่ าสัง่ <Hx> และ <font…> 3. จงบอกถึงความแตกตางของคํ

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

หน่ วยที่ 4 ควบคมให้ ุ เว็บเพจสวยด้ วยตาราง ผลการเรียนรู้ ทคี่ าดหวัง 1. อธิบายโครงสร้างและคําสัง่ ของตารางได้ 2. สามารถเขียนคําสัง่ (Tag) สร้างตารางที่ซบั ซ้อนได้ถูกต้อง

สาระสํ าคัญ เว็บเพจที่ เราพบเห็ นจํานวนมากในปั จ จุ บนั มี ความสวยงาม จัดเนื้ อหาทั้ งตัว อักษรและ ่ เป็ นหมวดหมู่ ในตําแหนงที ่ ่เหมาะสม เกดจากการใช้ ิ รู ปภาพอยูอ่ ยาง ตารางควบคุมการแสดงผล ่ ตารางที่ ใ ช้ใ นการจัด หน้า ตาเว็บ เพจนั้ น มี ก ารใช้ค าํ สั่ ง สวนขยายให้ แ สดงผลตามที่ ํ ั ํ ผูอ้ อกแบบต้องการ กาหนดความกว้ าง/สู งให้เหมาะสมกบขนาดของรู ปภาพ หรื อข้อความ กาหนด การแสดงเส้นขอบให้มีความหนา และสี สนั สวยงาม

คิดแล้วตอบ  ถ้านักเรี ยนมีขอ้ มูลจํานวนมากที่แสดงจํานวน ปริ มาณ ปริ มาตร ของวัตถุ สิ่ งของ พืช สัตว์ การสร้างเว็บไซต์เพื่อแสดงผลให้ผชู ้ มเข้าใจได้ง่าย นักเรี ยนควรจัดการเว็บไซต์หน้านี้ ่ .... อยางไร

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ควบคุมเว็บเพจให้สวยด้วยตาราง

ี่ ั ่ ั ปภาพใน ในบทที่ 3 เราได้ศึกษารายละเอียดเกยวกบการจั ดข้อความในเอกสารรวมกบรู ่ ไปแล้ว จะเห็นได้ว่า เว็บเพจของเรามีเรื่ องราวที่ดูน่ าสนใจมากขึ้ นแล้ว แม้จะยังไม่ รู ปแบบตางๆ ั ํ ่ ตรงกบความต้ องการของเรามากนัก เชน่ การกาหนดตํ าแหนงของรู ปภาพและข้อความให้อยู่ใน ่ ่ตอ้ งการตายตัว จัดหมวดหมู่ได้ง่ายขึ้ น ข้อมูลบางอยางจํ ่ าเป็ นต้องมีการเปรี ยบเทียบหรื อ ตําแหนงที ั แสดงให้เป็ นหมวดหมู่ การแสดงผลในรู ปแบบตารางดูจะเหมาะสมกบการนํ าเสนอแบบนี้

โครงสร้ างของตาราง ข้อความแสดงคําอธิบายของตาราง หัวตารางคอลัมน์ 1 หัวตารางคอลัมน์ 2 หัวตารางคอลัมน์ 3 ข้อมูล 1 แถวที่ 1 ข้อมูล 2 แถวที่ 1 ข้อมูล 3 แถวที่ 1 ข้อมูล 4 แถวที่ 2 ข้อมูล 5 แถวที่ 2 ข้อมูล 6 แถวที่ 2 ตารางในเว็บเพจมีความสําคัญและความจําเป็ นในการจัดการการแสดงผลของตัวอักษรและ ่ างบน สามารถเขี ย นคําสั่งที่ ใช้และเข้าใจได้ง่ าย ซึ่ งมี รู ปภาพให้เหมาะสม จากตารางตัวอยางข้ โครงสร้างของคําสัง่ ตารางดังนี้ รปแบบ คําสั่ ง ู <TABLE> <CAPTION> ข้อความแสดงคําอธิบายของตาราง </CAPTION> <TR><TH> หัวตารางคอลัมน์ 1 </TH><TH> หัวตารางคอลัมน์ 2 </TH> .... </TR> <TR><TD> ข้อมูล 1 แถวที่ 1 </TD><TD> ข้อมูล 2 แถวที่ 1 </TD> .... </TR> <TR><TD> ข้อมูล 3 แถวที่ 2 </TD><TD> ข้อมูล 4 แถวที่ 2 </TD> .... </TR> <TR><TD> ข้อมูล 5 แถวที่ 3 </TD><TD> ข้อมูล 6 แถวที่ 3 </TD> .... </TR> ....... </TABLE> สําหรับโครงสร้างของตารางจะประกอบไปด้วยคําสั่งเปิ ด คือ <TABLE> และคําสั่งปิ ด คือ ่ </TABLE> และมีคาํ สัง่ ยอยภายในอี ก 4 คําสัง่ คือ ํ 1. คําสั่ง <CAPTION> ... </CAPTION> เป็ นคําสั่งที่กาหนดคํ าหรื อข้อความอธิ บาย ี่ องกบเรื ั ่ องอะไร นัน่ เอง ตารางวา่ เกยวข้ ํ ่ 2. คําสัง่ <TR> ... </TR> (Table Row) เป็ นคําสั่งที่กาหนดแถวในตาราง จะมีคาํ สั่งยอย ภายในอีก 2 คําสัง่ คือ <TH> ... </TH> และ <TD> ... </TD> มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ควบคุมเว็บเพจให้สวยด้วยตาราง

ํ ่ 3. คําสัง่ <TH> ... </TH> (Table Head) เป็ นคําสัง่ ที่กาหนดหั วเรื่ องในแตละคอลั มน์ ข้อความภายในคําสัง่ นี้ จะเป็ นอักษรตัวหนาและอยูก่ ่ ึงกลางของคอลัมน์ในตาราง ่ 4. คําสัง่ <TD> ... </TD> (Table Data) เป็ นคําสั่งที่แสดงข้อมูลในตารางแตละคอลั มน์ ่ ลักษณะของข้อมูลอาจเป็ นตัวเลขหรื อตัวอักษร จะแสดงผลชิดขอบซ้ายของแตละคอลั มน์

่ าหรั บการแสดงผลรู ปแบบตารางดังภาพบนแล้วจัดเกบไฟล์ ็ สร้ างไฟล์ตวั อยางสํ ในชื่ อ table_01.html ทดลองแสดงผลในบราวเซอร์

การแสดงผลของคําสั่งตารางผ่ านบราวเซอร์

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ควบคุมเว็บเพจให้สวยด้วยตาราง

่ ่ ่ จากภาพจะเห็นได้ว่าตารางที่แสดงผลผานบราวเซอร์ ไมนาสนใจนั ก เราสามารถปรับแตง่ ่ ่ ยวกบแท็ ั กอื่นๆ เชน่ กาหนดการแสดงเส้ ํ ได้ โดยเพิ่มสวนขยายเข้ าไปเชนเดี นตารางด้วยคําสั่งแสดง ่ เส้นขอบ BORDER เข้าไปใน <TABLE> และยังสามารถเพิ่มคาความหนาของเส้ นตารางได้ดว้ ย ่ ่ นพิกเซล นขอบนอก มีหนวยเป็ คําสัง่ BORDER=“n” เมื่อ n คือ คาความหนาของเส้ ํ ํ กาหนดความ กว้างของตารางด้วยคําสัง่ WIDTH การกาหนดสี สนั และขนาดของตัวอักษร ่ <CAPTION> และในตารางสามารถกาหนดได้ ํ ในสวน ตามปกติเหมือนตัวอักษรทัว่ ไป เราสามารถ ํ กาหนดให้ ตารางอยูก่ ่ ึงกลางของหน้าได้ดว้ ยการใช้คาํ สัง่ <DIV ALIGN=“CENTER”> ... </DIV> ่ เป็ นต้น ดังตัวอยาง

คําสั่ งส่ วนขยายเพิม่ เติมในตาราง ่ ่ มีคาํ สัง่ WIDTH=“75%” ซึ่งมีผลตอตารางคื ่ 1. จากไฟล์ตวั อยางจะพบวา อจะแสดงขนาด ่ ั านวนเปอร์ เซนต์ที่ระบุเมื่อเทียบกบขนาดของ ั ่ ของตารางด้วยความกว้างเทากบจํ หน้าตางบราวเซอร์ ่ ่เป็ นตัวเลขจํานวนพิกเซลได้ เชน่ width= “600” เราสามารถระบุขนาดตารางด้วยคาคงที มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ควบคุมเว็บเพจให้สวยด้วยตาราง

ํ 2. การปรับขนาดความสู งของตาราง โดยกาหนดแอตทริ บิวต์ HEIGHT=“X%” ซึ่ งใน ั การแสดงผลของเว็บบราวเซอร์จะเปรี ยบเทียบกบเปอร์ เซนต์ความสู งของจอ 3. การวางหัวตารางไว้ตามแนวนอนหรื อแนวตั้ ง ทําได้โดยการวางคําสัง่ <TH> ... </TH> ่ แถวหรื อคอลัมน์ ไว้ในสวน

Table Heading Cellpadding

Cellspacing ํ ่ ตาราง โดยใช้แ อตทริ บิ ว ต์ 4. การกาหนดขนาดพื ้ น ที่ ข องการแสดงผลข้อ มู ล ใน ชอง ํ ่ ํ ่ CELLPADDING เพื่อกาหนดพื เป็ นการกาหนดระยะหาง ้ นที่ว่างภายในเซลข้อมูลแตละเซล ่ นและตัวอักษร หรื อเส้นกบัขอบรู ปภาพมีหนวยเป็ ่ นพิกเซล โดยใสคาตั ่ ่ วเลขจํานวน ระหวางเส้ พิกเซลที่ตอ้ งการเว้นระยะ เชน่ CELLPADDING=“10” ํ ่ ของชองวางระหวางชองตาราง ่ ่ ่ ่ 5. การกาหนด ระยะหาง ทําได้โดยการใช้แอตทริ บิวต์ ่ ่ CELLSPACING=“n” เมื่อ n คือจํานวนพิกเซลระบุค่าของระยะหางของเซล (คาปกติ คือ 1) ่ ่ ่ 6. การจัดตําแหนงของคํ าอธิบายตาราง คาปกติ จะอยูเ่ หนื อตาราง แตเราสามารถสั ่งให้ไป แสดงอยู่ใต้ตารางได้ โดยเพิ่มแอตทริ บิวต์ ALIGN=“BOTTOM” ในคําสั่ง <CAPTION> ดัง ่ ตัวอยาง <CAPTION ALIGN=“BOTTOM”> กําหนดให้ คาํ อธิบายตารางอยู่ล่าง</CAPTION>

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ควบคุมเว็บเพจให้สวยด้วยตาราง

ํ ่ อความแนวนอนในตาราง โดยใช้แอตทริ บิวต์ ALIGN ซึ่ งมี 7. การกาหนดตํ าแหนงข้ ลักษณะของคําสัง่ อยู่ 3 ลักษณะ คือ LEFT/CENTER/RIGHT ซึ่งมีขอ้ ยกเว้นดังนี้ ่  <TH> คาปกติ คือ CENTER จึงไมต้่ องใช้ ALIGN=“CENTER” ใช้เฉพาะ LEFT หรื อ RIGHT ่  <TD> คาปกติ คือ LEFT จึงไมต้่ องใช้ ALIGN=“LEFT” ใช้เฉพาะ CENTER หรื อ RIGHT ํ ่ อความในแนวตั้ งของตาราง โดยใช้แอตทริ บิวต์ VALIGN ซึ่งมี 8. การกาหนดตํ าแหนงข้ ลักษณะของคําสัง่ อยู่ 3 ลักษณะ คือ TOP/MIDDLE/BOTTOM ั าสัง่ <TR> หรื อ Table Row การแสดงผลใน  คําสัง่ VALIGN ถ้าใช้กบคํ ํ ่ โปรแกรมเว็บบราวเซอร์จะแสดงผลแบบกาหนดตํ าแหนงของข้ อมูลทั้ งแถวให้ ่่ เป็ นไปตามแอตทริ บิวต์ไมวาจะอยู ใ่ น <TH> หรื อ <TD> ํ ่ อมูลด้วยคําสัง่ VALIGN ในคําสัง่ <TH> หรื อ <TD> จะมี  ถ้ากาหนดตํ าแหนงข้ ํ ่ ้น ผลเฉพาะในเซลที่กาหนดเทานั ่  ไมจํ่ าเป็ นต้องใช้ VALIGN=“MIDDLE” เพราะเป็ นคาปกติ ท้ งั ใน <TR>, <TH> และ <TD> ํ ั 9. การกาหนดสี ให้กบตาราง สามารถทําได้โดยใช้แอตทริ บิวต์ BGCOLOR ลงในคําสั่ง ตาราง ั กชองในตาราง ่  <TABLE BGCOLOR=“สี ”> จะทําให้พ้นื สี มีผลกบทุ  <TR BGCOLOR=“สี ”> จะมีผลเฉพาะแถวนั้ นแถวเดียว  <TD BGCOLOR=“สี ”> หรื อ <TH BGCOLOR=“สี ”> จะมีผลเฉพาะเซลนั้ น  สามารถใช้รูปภาพแทนสี ได้โดยใช้ส่ วนขยายเป็ น Background=“ชื่อภาพ” ใน คําสัง่ <table> <th> และ <td> ํ ่ 10. การกาหนดความกว้ า งของคอลัม น์ แ ตละคอลั ม น์ ใ นตาราง โดยใช้แ อตทริ บิ ว ต์ ่ นพิกเซล การกาหนดความกว้ ํ ็ WIDTH=“n” คา่ n จะมีหนวยเป็ างของคอลัมน์ในแถวใดกตามจะมี ั ่ ่ ํ ผลกบคอลั มน์น้ ันๆ ในทุกๆ แถวโดยอัตโนมัติ สวนแถวที ่ไมกาหนดความกว้ างจะมี ความกว้าง ่ ั านวนตัวอักษรที่มีมากที่สุ ดในคอลัมน์น้ นั คําสัง่ นี้ ใช้กบั <TH> และ <TD> เทากบจํ ํ ่ ่ ่ ่ ่ ขอ้ มู ล เรา 11. การกาหนดชองวางในตาราง ในกรณี ที่ ช่ องตารางนั้ น เป็ นชองวางไมมี ่ (Invisible Character) หรื อ (Non breaking space) แทนได้ โดยการป้ อน สามารถใช้อกั ษรเคาะวาง ่ ่ 1 ตัวอักษรในประโยคใดๆ ข้อมูลรหัสแอสกดั้ ี งนี้ &nbsp; ลงไป อักษรเคาะวา่งนี้ จะใช้แทนชองวาง ็ (ถ้าเราไมใสอั ่ ่ กษรเคาะวางลงไป ่ ่ ่ไมมี่ ขอ้ มูลจะไมแสดงผลเส้ ่ กได้ ตารางในชองที นตาราง)

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ควบคุมเว็บเพจให้สวยด้วยตาราง

้ เราจะทดลองในการแกไขปรั บปรุ งตารางโดยการใช้ไฟล์ table_02.html เป็ นต้นแบบและ ็ นไฟล์ชื่อ table_03.html ดังตัวอยาง ่ จัดเกบเป็

แก้ ไขเพิ่มเติมส่ วนขยายคําสั่งในช่ องตารางและการแสดงผลในบราวเซอร์ ้ ่มเติมจากไฟล์เดิมคือ สิ่ งที่ได้แกไขเพิ ํ ่  กาหนดระยะหางของเซล ่ ่ ่  เพิ่มการวางตําแหนงของคํ าอธิบายตารางจากข้างบนมายังสวนลางของตาราง ํ  กาหนดสี ของแถวในหัวตาราง ํ ่ อมูลให้คอมลัมน์ชื่อผูเ้ ข้าสอบมีสีต่างจากชองคะแนนที ่  กาหนดสี ของชองข้ ่ได้ ํ ่  กาหนดการวางตํ าแหนงของคะแนนที ่ได้ ็ ่ ้ ่ เสร็ จแล้วให้จดั เกบไฟล์ และแสดงผลในบราวเซอร์ ว่ามีผลอยางไร ทดลองแกไขในสวน ่ ิ ่ มวาในการแกไขทุ ่ ้ กครั้ งจะต้องมีการจัดเกบข้ ็ อมูลลงไฟล์กอน อื่นๆ ดูว่าเกดผลอะไรขึ ้ นบ้าง อยาลื เสมอจึงจะมีการเปลี่ยนแปลงการแสดงผลในบราวเซอร์เมื่อมีการคลิกที่ปุ่มรี เฟรช

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ควบคุมเว็บเพจให้สวยด้วยตาราง

ํ 12. การกาหนดขนาดความสู งของแถวในตาราง โดยใช้แอตทริ บิวต์ ROWSPAN จะเป็ น ่ ่ ย ว คล้า ยกบการรวมเซลตารางในโปรแกรม ั การรวมเอาชองในแถวหลายแถวเข้ า เป็ นชองเดี ่ ไมโครซอฟท์เวิร์ด คําสัง่ นี้ ใช้กบั <TH> และ <TD> ดังตัวอยาง <TD ROWSPAN=“2”> ขยายช่ องตารางออกไปในแถว </TD> <TH ROWSPAN=“2”> ขยายช่ องตารางออกไปในแถว </TH> ํ ่ ่ าด้วยกนั ) โดย 13. การกาหนดความกว้ างของตาราง (รวมชองตารางคอลั มน์หลายชองเข้ ่ ํ กาหนดแอตทริ บิวต์ COLSPAN=“จํานวนคอลัมน์” คําสัง่ นี้ ใช้กบั <TH> และ <TD> ดังตัวอยาง <TH COLSPAN=“2”> ... </TH> และ <TD COLSPAN=“2”> ... </TD> 14. ในบางกรณี อาจจําเป็ นต้องใช้การแสดงผลแบบตารางซ้อนตาราง เพื่อให้สามารถ ํ ่ ยวกบการสั ั กาหนดรู ปแบบพิเศษได้ และมีผลที่สวยงาม เชนเดี ง่ LIST ซ้อน LIST นัน่ เอง ข้อสําคัญ ่ มปิ ดท้ายคําสัง่ ทุกคําสัง่ ไมเชนนั ่ ่ ้ นการแสดงผลจะไม่ถูกต้อง คือ อยาลื ํ ็ โดยใช้คาํ สั่ง 15. การกาหนดรู ปภาพในตาราง เราสามารถบรรจุภาพใด ๆ ลงในตารางกได้ ่ าให้ช่องตารางขยายตาม <IMG SRC=“รู ปภาพ”> แทนข้อความในตาราง ถ้ารู ปมีขนาดใหญจะทํ ั ํ ไปด้วย ถ้าต้องการให้ขนาดของรู ปภาพพอดีกบตารางจะต้ องกาหนดแอตทริ บิวต์ WIDTH และ ั ปภาพนั้ นด้วย HEIGHT ให้กบรู 16. การใช้ภาพหรื อข้อความในตารางเป็ นจุดเชื่อมโยงสามารถทําได้เหมือนปกติ โดยการ ่ งในบทตอไป ่ ใช้คาํ สัง่ <A HREF> จะกลาวถึ ่ ่ ตามที่ตอ้ งการ โจทย์ขา้ งลางนี ่ ้ คือ ตอไปเราจะทดลองการผสมผสานเซลให้ มีรูปแบบตางๆ ลักษณะการแสดงผลในบราวเซอร์ที่ตอ้ งการ การจัดการภาพและข้อความในตาราง การจัดวางข้อมูลลงในตาราง ่ึ แบบจัดกงกลาง เด็กเอ๋ ยเด็กน้อย

แสดงการรวมแถว 1,2 ในตาราง

่ จัดข้อความชิดขวาลาง แสดงการรวมคอลัมน์แถวบน

การวิเคราะห์ ก่อนการสร้ างตาราง ่ึ ่ ั วยแท็ก ROWSPAN จัดกงกลาง 1. ตารางในชองคอลั มน์ที่ 1 แถวที่ 1 และ 2 ต้องรวมกนด้ ทั้ งแนวตั้ งและแนวนอนในตารางนี้ ่ ่ 2 และ 3 ต้องรวมกนด้ ั วยแท็ก COLSPAN จัดกงกลางใน ่ึ 2. ตารางในแถวที่ 1 ชองที แนวนอนเพื่อบรรจุขอ้ ความ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ควบคุมเว็บเพจให้สวยด้วยตาราง

่ ํ ่ 3. รู ปภาพการ์ตูนต้องใช้แท็ก <IMG SRC=”ชื่อรู ป”> ในชองตาราง 1 กาหนดระยะหาง จากเส้นขอบถึงรู ปทั้ งสี่ ดา้ น ่ ่ ให้บรร จุ ขอ้ ความและสั่งจัด การตํา แหนงของ ่ 4. ชองตารางที ่ เ หลื อ ไมมี่ ก ารรวมชอง ่ ่ ข้อความในแตละชองตามต้ องการ ํ ่ เราสามารถสร้างตารางและกาหนดสวนขยายของตารางตามที ่ได้วิเคราะห์ไว้ และเมื่อใช้ ่ บราวเซอร์เปิ ดไฟล์แสดงผลลัพธ์จะได้ดงั ภาพข้างลาง

การแสดงผลของตารางเป็ นไปตามที่โจทย์ ต้องการ

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ควบคุมเว็บเพจให้สวยด้วยตาราง

่ ง่ ตอการแสดงผลของหน้ ่ ่ จะเห็นได้ว่า ตารางมีความสําคัญอยางยิ าเว็บเพจ จากภาพตัวอยาง ่ ้ http://www.cnn.com จะเห็นถึงแนวทางการใช้ตารางในการควบคุมการแสดงผลให้ได้ ข้างลางนี ํ ตามที่ผอู ้ อกแบบได้กาหนดไว้

ภาพล่ างเป็ นการแสดงแนวเส้ นตารางที่สร้ างตารางซ้ อนตารางในการแสดงผล

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ควบคุมเว็บเพจให้สวยด้วยตาราง

เว็บไซต์ ของสํานักงานคณะกรรมการการศึกษาขัน้ พืน้ ฐานก็ใช้ ตารางควบคุมการแสดงผล ่ จึงควรฝึ กฝน จดจํา เราจะเห็นได้ว่า เว็บไซต์ที่สวยงามนั้ นขาดการจัดการด้วยตารางไมได้ ั คําสัง่ ในการจัดการกบตาราง และนําไปประยุกต์ใช้ต่อไป ่ ่ ็ ั อ่ ยาง ่ เราได้ทดลองสร้างเว็บเพจมาได้จาํ นวนหลายหน้าแล้ว ในแตละหน้ าตางกแยกกนอยู ่ ั ่ น อิสระไมมี่ ความสัมพันธ์กนั ในบทตอไปเราจะได้ ศึกษาการเชื่ อมโยงเนื้ อหาเข้าหากนอยางเป็ ระบบ รวมทั้ งเชื่อมโยงไปยังเว็บไซต์อื่นๆ

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

ควบคุมเว็บเพจให้สวยด้วยตาราง

กิจกรรมเสนอแนะ ่ ่ 4 เสร็ จสิ้ นแล้ว ให้นกั เรี ยนแตละ ่ คน ทํากจกรรมดั ิ หลังจากการศึกษาบทเรี ยนหนวยที งนี้ 1. ศึกษาหาความรู ้เพิม่ เติมในการสร้างตารางควบคุมการแสดงผลจากเว็บไซต์ต่างๆ ่ แทรกตัว อัก ษรและรู ป ภาพใน 2. ให้นัก เรี ย นทดลองใช้คาํ สั่งจัด ตารางรู ป แบบตางๆ ่ ํ ่ ่ แล้วทดสอบ ่ ของชองตาราง และกาหนดสวนขยายเพิ ตําแหนง่ตางๆ ่มเติมนอกเหนือจากในตัวอยาง ่ การแสดงผลผานบราวเซอร์

คําถามท้ ายบท ่ ่ ของตาราง 1. อธิบายถึงผลเมื่อใช้คาํ สัง่ BGCOLOR ในสวนตางๆ <TABLE> ………………………………………………………………………………….. <TR> ……………………………………………………………………………………….. <TD> ………………………………………………………………………………………. ่ 2. จงให้ความหมายของคําสัง่ ตอไปนี ้ CAPTION ………………………………………………………………………………….. ROWSPAN …………………………………………………………………………………. COLSPAN ………………………………………………………………………………….. CELLPADDING …………………………………………………………………………… CELLSPACING ……………………………………………………………………………. ALIGN ……………………………………………………………………………………….

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

หน่ วยที่ 5 การเชื่อมโยงเนือ้ หาในหน้ าเว็บเพจ ผลการเรียนรู้ ทคี่ าดหวัง ่ ได้ 1. บอกรู ปแบบคําสัง่ ของการเชื่อมโยงแบบตางๆ ํ ปแบบการเชื่อมโยงจากตัวอักษรข้อความหรื อรู ปภาพ 2. สามารถเขียนคําสั่ง (Tag) กาหนดรู ได้ถูกต้อง

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

คิดแล้วตอบ  ี่ องกบเนื ั ้ อหาที่เรา ถ้านักเรี ยนสร้ างเว็บไซต์แล้วต้องการให้ผูช้ มได้ดูเนื้ อหาที่เกยวข้ ่ งในเว็บไซต์อื่น นักเรี ยนควรทําจุดเชื่อมโยงไปยังเว็บไซต์น้ นั ด้วยการเปิ ดหน้าตางใหม ่ ่ กลาวถึ หรื อแทนที่เว็บไซต์เรา....

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

การเชื่อมโยงเนื้ อหาในหน้าเว็บเพจ

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

ลักษณะของการเชื่อมโยง การเชื่อมโยงข้อมูลของเว็บเพจจะมีอยู่ 2 ประเภท คือ ่ ภายในเว็บไซต์เดียวกนั 1. Internal Links เป็ นการเชื่อมโยงข้อมูลที่เรี ยกใช้ขอ้ มูลตางๆ ั ่ ยวกนั วิธีการ มาแสดงผล เหมือนกบการพลิ กหน้าหนังสื อไปยังอี กหน้าหนึ่ ง แตยั่ งอยู่ในเลมเดี ็ ี่ องในหน้าเดียวกนั หรื อหน้าอื่นๆ กได้ เชื่อมโยงนี้ อาจเป็ นเนื้ อหาที่เกยวข้ ่ ่ อมูล งเว็บไซต์อื่น หรื อแหลงข้ 2. External Links เป็ นการเชื่อมโยงข้อมูลที่เชื่อมตอไปยั อื่น สิ่ งที่สาํ คัญที่สุดของการเชื่อมโยงแบบนี้ คือ การระบุจุดเชื่อมโยงให้ถูกต้อง โดยเฉพาะที่อยูข่ อง ็ /ชื่อไฟล์ และมีความจําเป็ นต้อง เว็บไซต์ (URL ต้องระบุ http:// นําหน้าเสมอ) ไดเร็ กทอรี่ ที่เกบไฟล์ ิ การเปลี่ยนแปลง เชน่ เปลี่ยนชื่อหรื อ ย้าย URL ข้อมูลที่ ตรวจสอบเป้ าหมายบ่อยๆ เพราะหากเกดมี ่ ่ เ้ ข้ามาชม เราต้องการเชื่ อมโยงจะสู ญหาย กลายเป็ นจุ ดเชื่ อมโยงที่ ไมมี่ อยู่จริ ง อันจะสงผลตอผู เว็บไซต์ของเรามากทีเดียว

การกําหนดสี ของจดุเชื่อมโยง ํ สําหรับการกาหนดสี ของข้อความที่เชื่อมโยงข้อมูลโดยปกติจะมีสีของตัวอักษร ดังนี้ ่ ก ารเชื่ อ มโยงกนั คื อ สี น้ ํา เงิน มีก ารขีด เส้น ใต้ 1. LINK จะเป็ นสี ข องตัว อัก ษรกอนมี ตัวอักษร เราจะเห็ นได้เมื่อมีการพิมพ์ URL หรื อ Email ในโปรแกรมไมโครซอฟท์เวิร์ด เรี ยกวา่ Unvisited Links 2. ALINK (Active Link) จะเป็ นสี ของตัวอักษรขณะถูกเลือก (วางเมาส์เหนื อตัวอักษร ่ ข้อความจุดเชื่อมโยง) คาปกติ คือ สี แดง มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

การเชื่อมโยงเนื้ อหาในหน้าเว็บเพจ

่ 3. VLINK (Visited Link) จะเป็ นสี ของตัวอักษรหลังจากผานการคลิ กเข้าไปชมเนื้ อหาของ ่ ่ ้ ตนเคยคลิกไป จุดเชื่ อมโยงข้อมูลเรี ยบร้อยแล้ว คาปกติ คือ สี ม่วง ทําให้ผชู ้ มทราบได้ว่าตําแหนงนี เยีย่ มชมมาแล้ว ั ํ ํ ดสี ของตัวอักษรหรื อข้อความที่จะเชื่ อมโยงข้อมูล จะเหมือนกบการกาหนดสี การกาหน ่ ํ ั ของตัวอักษรทัว่ ไป โดยจะระบุไว้ในคําสัง่ <BODY> เสมอ (เว้นแตจะสร้ างไฟล์กากบการแสดงผล ่ งในบทตอไป ่ ) เมื่อเราต้องการกาหนดสี ํ ของตัวอักษรสําหรับ แยกเป็ นพิเศษ Stylesheet ซึ่งจะกลาวถึ ํ การเชื่ อมโยงให้ต่างจากมาตรฐาน โดยเฉพาะเมื่อเรากาหนดสี ของพื้นหลังเว็บไซต์ให้เป็ นสี อื่นที่ ่ ่สีเทาหรื อสี ขาว ซึ่งมีรูปแบบดังนี้ ไมใช <body LINK=“สี ก่อนการเชื่อมโยง” VLINK=“สี หลังจากเชื่อมโยง” ALINK=“สี ขณะเชื่อมโยง”> ํ ่ นสี เดี ยวกบั สี พ้ืนหลัง มีความ ข้อควรระวังในการกาหนดสี ของจุดเชื่ อมโยงคือ ต้องไมเป็ ่ /หลังการคลิกที่จุดเชื่ อมโยง สี ขณะเชื่ อมโยง (ALINK) อาจไมต้่ อง ่ เห็ นชัดเจนทั้ งกอน แตกตางให้ ํ ็ เพราะจะแสดงเพียงชัว่ ขณะจนสังเกตไมเห็ ่ น กาหนดกได้

คําสั่ งในการเชื่อมโยง รู ปแบบคําสัง่ <A HREF=“URL” หรื อ “เป้ าหมายที่ตอ้ งการเชื่อมโยง”> ข้อความ </A> ั ่ คือ คําสัง่ ในการเชื่อมโยงข้อมูล ประกอบไปด้วยคําสัง่ 2 คําสัง่ ซ้อนกนอยู  คําสั่ ง anchor หรือ <A> เป็ นคําสัง่ พื้นฐานในการเชื่อมโยงสําหรับการสร้าง Hyper links ่  คําสั่ งแอตทริบวิ ต์ HREF ยอมาจาก Hypertext Reference ซึ่งจะระบุตาํ แหนง่เป้ าหมาย ของการเชื่อมโยง ่ คาปกติ ของข้อความที่ตอ้ งการให้เชื่อมโยงภายในคําสัง่ <A HREF> จะถูกขีดเส้นใต้โดย ํ อัตโนมัติ และสี ของตัวอักษรจะมีสีตามที่กาหนดไว้ ในคําสัง่ <BODY LINK> และเมื่อเคลื่อนเมาส์ ไปวางบนตําแหนง่ นี้ สญ ั ลักษณ์ของลูกศรจะเปลี่ยนเป็ นรู ปมือทันที 1. คําสั่ งในการเชื่อมโยงภายในเอกสารเดียวกัน ั ่ ่ คือ คําสัง่ ในการเชื่อมโยงข้อมูลภายในเอกสารเดียวกนจะแบงออกเป็ น 2 สวน 1.1 กําหนดเป้ าหมายที่ต้องการให้ แสดงผล เป็ นจุดที่จะแสดงผลเมื่อมีการคลิกจุดเชื่อมโยง เรา ํ จะกาหนดแอตทริ บิวต์เป็ น NAME (ใช้ภาษาอังกฤษ) เว็บบราวเซอร์จะค้นหาเป้ าหมายและแสดงผล ่ าใหมที่ ่เป็ นจุดเชื่อมโยง </A> รปแบบคํ าสั่ง : <A NAME=“Section-name”> เริ่ มต้นยอหน้ ู

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

การเชื่อมโยงเนื้ อหาในหน้าเว็บเพจ

1.2 กําหนดเป้ าหมายที่จะเชื่ อมโยง เป็ นจุดที่เมื่อเราคลิกแล้วจะกระโดดไปยังเป้ าหมายที่ถูก ํ กาหนดใน <A NAME> รปแบบคํ าสั่ง : <A HREF=“#Section-name”> เชื่อมโยงข้อมูลไปสู่ ชื่อเป้ าหมาย </A> ู

ั โดยสร้างไฟล์ตามตัวอยางคื ่ อ เราจะทดลองการสร้างการเชื่อมโยงเอกสารในหน้าเดียวกนดู ํ link_in_page.html สังเกตการใช้คาํ สั่งในการกาหนดเป้ าหมาย การเชื่อมโยงไปยังเป้ าหมายวา่ มี ่ ั ่ เสร็ จแล้วจัดเกบไฟล์ ็ ข้อแตกตางกนอยางไร และแสดงผลในเว็บบราวเซอร์ดู

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

การเชื่อมโยงเนื้ อหาในหน้าเว็บเพจ

2. คําสั่ งในการเชื่อมโยงไปหน้ าเอกสารอืน่ ภายในเว็บไซต์ เดียวกัน รปแบบคํ าสั่ ง : <A HREF=“ชื่อไฟล์.html”> ไฟล์ที่ตอ้ งการเชื่อมโยง </A> ู เป็ นการเชื่ อมโยงข้อมูลภายในเว็บไซต์ของเราเอง โดยมากจะระบุไฟล์เป้ าหมายเป็ นไฟล์ ่ องระบุ URL หรื อไดเร็ กทอรี่ ที่ซบั ซ้อน HTML ไมต้

3. คําสั่ งในการเชื่อมโยงไปหน้ าเอกสารอืน่ ในต่ างเว็บไซต์ รปแบบคํ าสั่ ง : <A HREF=“URL/ชื่อไฟล์.html”> ไฟล์ที่ตอ้ งการเชื่อมโยง </A> ู เป็ นการเชื่อมโยงข้อมูลไปยังเว็บไซต์อื่น จะต้องระบุ URL และไฟล์เป้ าหมายให้ถูกต้อง ถ้า ็ เกบในไดเร็ กทอรี่ ที่ซบั ซ้อน ต้องระบุให้ถูกต้อง เชน่ <A HREF=“http://www.microsoft.com/ie/ie401th/update.htm”> ดูขอ้ มูลการปรับปรุ ง IE 4.01 Thai ที่นี่ </A>

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

การเชื่อมโยงเนื้ อหาในหน้าเว็บเพจ

ํ ข้ อควรระวัง ในการกาหนดการเชื ่ อมโยงข้อมูลไปยังเวบไซต์อื่น ๆ นั้ น เป้ าหมายต้อง ํ ่ ชัดเจนถูกต้องทั้ ง URL และ Directory เพราะถ้ากาหนดเป้ าหมายผิด เราจะไมสามารถเชื ่ อมโยง ่ กจะ ็ ข้อมูลไปสู่ ไฟล์เป้ าหมายได้เลย นัน่ คือถ้าโปรแกรมเว็บบราวเซอร์หาเว็บไซต์ที่ตอ้ งการไมพบ รายงานผลความผิดพลาดให้ทราบทันที ดังรู ป

้ อผิดพลาดที่เกดขึ ิ ้ นของกรณี น้ ี คือ เราต้องแกไขที ้ ่ไฟล์ HTML ของเราในคําสั่ง การแกไขข้ ่ กต้องหรื อไม่ <A HREF> ให้ช้ ีไปยังเป้ าหมายที่ถูกต้อง จากนั้ นเซฟไฟล์และทดลองคลิกดูผลวาถู 4. การใช้ รู ปภาพแทนข้ อความในคําสั่ งเชื่อมโยง รปแบบคํ าสั่ ง : <A HREF=“URL/ชื่อไฟล์.htm”> <IMG SRC=“image”> </A> ู สําหรั บคําสั่งนี้ เป็ นการนําเอารู ปภาพมาแทนข้อความเป็ นจุ ดเชื่ อมโยง โดยแทรกคําสั่ง ่ <IMG SRC=“image”> เข้าไปแทนข้อความ และเมื่อนําเมาส์มาชี้ ที่ตาํ แหนงภาพจะเห็ นสัญลักษณ์ ลูกศรเปลี่ยนไปเป็ นรู ปมือทันที ่ เพื่อให้เว็บเพจของเราดูได้ดว้ ยบราวเซอร์ แบบ TEXT จึงควรใสแอตทริ บิวต์ <ALT> ลงไป หลังรู ปภาพด้วย เพื่อให้ขอ้ ความบรรยายภาพมีผลเป็ นจุดเชื่อมโยงในเทกซ์บราวเซอร์ดว้ ย ํ ข้ อสั งเกต ภาพที่เป็ นจุดเชื่อมโยงจะมีเส้นกรอบรอบรอบรู ป และมีสีเส้นกรอบตามที่เรากาหนดใน คําสัง่ <LINK, VLINK, ALINK> ทุกประการ

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

การเชื่อมโยงเนื้ อหาในหน้าเว็บเพจ

่ ให้สร้างไฟล์เพื่อการทดสอบการทําจุดเชื่อมโยงจํานวน 2 ไฟล์ต้ งั ชื่อตามตัวอยาง

็ ให้ทดลองโดยการจัดเกบไฟล์ ทั้ งสอง แล้วเปิ ดบราวเซอร์ทดสอบไฟล์ที่ 1 สามารถคลิกไป ่ ยัง ไฟล์ที่ ส องได้ห รื อ ไม่ ทั้ ง การคลิ ก ที่ ข ้อ ความและรู ป ภาพ สั ง เกตความแตกตางของผลใน ่ อเหมือนกนอยางไร ั ่ บราวเซอร์ ทั้ งสองไฟล์แตกตางหรื ทดลองสร้ างไฟล์ที่มีการเชื่ อมโยงไปยังเว็บไซต์อื่นๆ เพื่อทดสอบการเชื่ อมโยง ทั้งใน ่ ํ ํ รู ปแบบไมกาหนดหน้ าเป้ าหมายและแบบที่กาหนดหน้ าเป้ าหมายไว้ เพิ่มเติมจุดเชื่อมโยงในไฟล์ link_02.html อีกหนึ่งจุด และสร้างไฟล์ใหมชื่ ่อ link_03.html ่ ลองทดสอบการแสดงผล สังเกตความแตกตางในคํ ่ ่ ตามตัวอยาง าสัง่ ตางๆ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

การเชื่อมโยงเนื้ อหาในหน้าเว็บเพจ

เมื่อบันทึกไฟล์ แล้ วแสดงผลจะได้ ดังภาพด้ านล่ าง

ิ ์ บไซต์ที่ 1 และ 2 แตกตางจากเว็ ่ สังเกตผลที่เกดจากการคลิ กลิงกในเว็ บไซต์ที่ 3, 4 และ 5 ่ ทําไมจึงเป็ นเชนนั ่ ้น อยางไร ่ ่ นํา เสนอมาข้า งต้น เป็ นการสร้ า งจุ ด เชื่ อ มโยงแบบแทนที่ เ ดิ ม หมายถึ ง เมื่ อ มี ตัว อยางที การคลิกที่จุดเชื่อมโยงแล้วเว็บเพจที่เป็ นจุดเชื่อมโยงจะมาแสดงแทนที่หน้าเว็บเพจเดิมดังภาพ

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

การเชื่อมโยงเนื้ อหาในหน้าเว็บเพจ

ภาพแสดงผลจากบราวเซอร์เมื่อคลิกจุดเชื่อมโยงแบบแทนที่หน้าเว็บเพจเดิม

ในบางกรณี เรามี ความต้องการให้เมื่อคลิกจุดเชื่ อมโยงแล้ว หน้าเว็บเพจนั้ นต้องเปิ ดใน ่ ่ หรื อในแท็ป (Tap) แสดงผลใหม่ โดยหน้าเว็บเพจเนื้ อหาเดิมยังคงอยู่ นิยมใช้มากใน หน้าตางใหม ่ การสร้างจุดเชื่ อมโยงไปยังเว็บไซต์อื่น เพื่อให้ผชู ้ มยังคงอยูช่ มเว็บไซต์ของเรา ไมหลงเพลิ ดเพลิน ั ้ อหาในเว็บไซต์อื่น ไปกบเนื <A HREF=“URL/ชื่อไฟล์.html”> ไฟล์ที่ตอ้ งการเชื่อมโยง </A> ่ ่มสวนขยาย ่ คําสั่งสําหรับการเชื่ อมโยงยังใช้คาํ สั่งเดิม เพียงแตเพิ target (เป้ าหมาย) เข้าไป ่ ายจากการระบุชื่อไฟล์ เชน่ คือ target=“_blank” ตอท้ <a href

=“URL/ชื่อไฟล์.html” target=“_blank”> ไฟล์ที่ตอ้ งการเชื่อมโยง </a>

คําสั่ง target ยังมีการนําไปใช้ในลักษณะอื่น เชน่ เมื่อสร้างเว็บเพจที่มีการแสดงผลแบบ เฟรม (Frame) จะมีคาํ สัง่ target ใช้งานเพิม่ เติมดังนี้ ่ คาํ สั่ง target ในหน้าตาง ่ target=“_self” การแสดงผลแทนที่หน้าเดิม (เหมือนไมใช้ เดิม) ่ คาํ สั่ง target ในหน้าตาง ่ target=“_top” การแสดงผลแทนที่หน้าเดิม (เหมือนไมใช้ ่ อแท็ปใหม่) ใหมหรื target=“_parent” การแสดงผลแทนที่เฟรมเดิ ม (หลุดออกจากการแสดงผลแบเฟรมแต่ ่ ยังอยูใ่ นหน้าตางบราวเซอร์ เดิม เฟรมหายไป) ํ ํ target=“_name” การแสดงผลไปยังเฟรมที่กาหนด (ต้องกาหนดชื ่อเฟรมไว้)

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

การเชื่อมโยงเนื้ อหาในหน้าเว็บเพจ

์ จะแสดงเนื้ อหา เว็บไซต์ www.isangate.com ใช้การแสดงผลแบบเฟรม เมื่อคลิกที่ลิงกเมนู ํ ในกรอบขวามือ ซึ่งกาหนดชื ่อเฟรมขวาเป็ น Content ั บไซต์ที่มีเนื้ อหาไมมาก ่ และไมซั่ บซ้อน การจัดทํา การจัดทําเว็บเพจแบบเฟรม เหมาะกบเว็ ่ นที่นิยมแล้วในปั จจุบนั เนื่ องจากมักจะเกดข้ ิ อผิดพลาดได้ง่ายหากผูจ้ ดั ทําไม่ เว็บเพจแบบเฟรมไมเป็ ่ อขายอิ ่ นเทอร์เน็ตมีมากขึ้ น มีเทคโนโลยีในกาจัดการ รอบคอบพอ และความเร็ วในการเชื่อมตอเครื ่ มแล้ว แสดงผลที่ดีมากกวาเดิ 5. การเชื่อมโยงไปยังอีเมล์ ่ ั จ้ ดั ทําเว็บไซต์หรื อองค์กรเจ้าของ ในการจัดทําเว็บเพจนั้ น หากต้องการให้ผชู ้ มติดตอกบผู เว็บไซต์เพื่อสอบถามปั ญหาข้อข้องใจ หรื อให้คาํ แนะนําติชมเว็บไซต์ สามารถสร้างจุดเชื่อมโยงไป ยังอีเมล์ได้ดว้ ยคําสัง่ ่ <a href=“mailto:your_email@yourweb.com”>ติดตอเราทางอี เมล์ที่นี่</a> เมื่อผูช้ มคลิกที่จุดเชื่อมโยงนี้ ระบบปฏิบตั ิการจะทําการเรี ยกอีเมล์ไคลเอนท์ เชน่ Outlook ํ Express, Thunder Bird, Mail App ในเครื่ องขึ้ นมาเพื่อเขียนอีเมล์ส่ งไปยังที่อยูเ่ มล์ตามที่เรากาหนด ั ่ ในปัจจุบนั ไมนิ่ ยมทําจุดเชื่อมโยงอีเมล์แล้วเพื่อป้ องกนการสงจดหมายขยะ (Spam e-mail)

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

การเชื่อมโยงเนื้ อหาในหน้าเว็บเพจ

่ การใช้คาํ สั่งสร้าง ตัวอยาง จุ ด เชื่ อ มโยงไปยัง ที่ อ ยู่อี เ มล์ เมื่ อ ผูช้ มคลิ ก จุ ด เชื่ อ มโยงใน ็ า การเรี ย ก หน้า เว็บ เพจกจะทํ ่ เ มล์ข้ ึ น มา โปรแกรมรั บ -สงอี ทํางาน 6. สร้ างจดเชื ุ ่อมโยงไปยังไฟล์ เอกสาร หรือไฟล์อนื่ ๆ ในปั จจุบนั การนําเสนอข้อมูลในเว็บเพจนอกจากข้อความและรู ปภาพ แล้วยังมีการนําเอา ี่ องมานําเสนอรวมด้ ่ วย เชน่ เอกสารการนําเสนอ (Presentation) เอกสาร เอกสารอื่นๆ ที่เกยวข้ ี่ องในรู ปเอกสารประมวลผลคํา (Word) หรื อตารางทํางาน (Spread sheet) หรื อ บทความที่เกยวข้ ็ ในเครื่ องเพื่อ เอกสาร PDF เพื่อให้ผชู ้ มสามารถคลิกเปิ ดดูเอกสารนั้ นๆ หรื อบันทึกไฟล์ลงเกบไว้ เรี ยกดูในภายหลัง เราเรี ยกวิธีการนี้ วา่ จุดเชื่อมโยงเพื่อการดาวน์โหลด รู ปแบบคําสัง่ <a href=“URL/filename.ppt”>ไฟล์เอกสารนําเสนอ เรื่ อง....</a> <a href=“URL/filename.doc”>ไฟล์เอกสาร เรื่ อง....</a> <a href=“URL/filename.xls”>ไฟล์เอกสารตารางทํางาน เรื่ อง....</a> <a href=“URL/filename.pdf”>ไฟล์เอกสารPDF เรื่ อง....</a>

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

การเชื่อมโยงเนื้ อหาในหน้าเว็บเพจ

คําสั่งสําหรับการดาวน์โหลดไฟล์ยงั คงเป็ นรู ปแบบคําสั่งการเชื่อมโยงแบบปกติ เพียงแตชี่ ้ เป้ าไปที่ ไฟล์เอกสารตามที่ ตอ้ งการให้ผูช้ มดาวน์โหลด แทนที่ไฟล์หน้าเว็บเพจ เมื่ อผูช้ มคลิ กที่ ่ ่ ี่ อง หรื อจะดาวน์ จุดเชื่อมโยงจะมีกรอบหน้าตางถามวาจะเปิ ดไฟล์ขอ้ มูลนั้ นด้วยโปรแกรมที่เกยวข้ ็ นทึกไว้ในเครื่ องของผูช้ มดังภาพ โหลดเกบบั

ั ช้ มสองทาง จะมีทางเลือกให้กบผู คือ การเปิ ดไฟล์ดว้ ย MS Office Word ็ หรื อจัดเกบไฟล์ ลงในเครื่ อง

นอกจากไฟล์เอกสารแล้ว ยังสามรถทําจุดเชื่ อมโยงไปยังไฟล์ซอฟท์แวร์ ต่างๆ ที่สามารถ ดาวน์โหลดไปติดตั้ งลงในเครื่ องได้ รู ปแบบไฟล์ที่ให้ดาวน์โหลดนั้ นอาจจะเป็ นไฟล์บีบอัดข้อมูล เพื่อลดขนาดให้เล็กลง เชน่ ไฟล์แบบ *.zip, *.rar, *.7z รวมทั้ งไฟล์ติดตั้ งที่เป็ นสกุล *.exe ซึ่ งมี ให้บริ การในเว็บไซต์ต่างๆ

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

การเชื่อมโยงเนื้ อหาในหน้าเว็บเพจ

ตัวอย่ างเว็บไซต์ ที่สร้ างลิงก์ ไปยังจุดเชื่ อมโยงของไฟล์ ต่างๆ ทั้งไทยและเทศ

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

การเชื่อมโยงเนื้ อหาในหน้าเว็บเพจ

กิจกรรมเสนอแนะ ่ ่ 5 เสร็ จสิ้ นแล้ว ให้นกั เรี ยนแตละ ่ คน ทํากจกรรมดั ิ หลังจากการศึกษาบทเรี ยนหนวยที งนี้ 1. ให้นกั เรี ยนลองค้นหาข้อมูลจาก Search engine เพื่อหาจุดเชื่ อมโยงที่ผิดพลาด และ ่ วิเคราะห์หาสาเหตุของความผิดพลาดในแตละกรณี ่ ทดลองการเปลี่ยนสี พ้ืนหลัง 2. ให้นกั เรี ยนทดลองใช้คาํ สัง่สร้างจุดเชื่อมโยงรู ปแบบตางๆ ํ ั ดเชื่อมโยง แล้วทดสอบการแสดงผลผานบราวเซอร์ ่ ของหน้าเว็บเพจ เปลี่ยนสี กากบจุ

คําถามท้ ายบท 1. อธิบายความหมายเมื่อใช้คาํ สัง่ สร้างจุดเชื่อมโยง LINK ………………………………………………………………………………………….... ………………………………………………………………………………………………….. ALINK …………………………………………………………………………………………. ………………………………………………………………………………………………….. VLINK ………………………………………………………………………………………… ………………………………………………………………………………………………….. ่ 2. จงให้ความหมายของคําสัง่ Target ตอไปนี ้ _BLANK …………………………………………….……………………………………….. _PARENT ……………………………………………………………………………………. _SELF …………………………………………………….………………………………….. _TOP ………………………………………………………………….………………………

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

หน่ วยที่ 6 เทคนิคพิเศษในการสร้ างความน่ าสนใจให้ เว็บเพจ ผลการเรียนรู้ ทคี่ าดหวัง ่ ั บไซต์ได้ คให้น่าสนใจกบเว็ 1. สามารถเลือกคําสัง่ที่เหมาะสมในการใสเทคนิ ํ ปแบบการการแสดงผลของตัวอักษร ข้อความให้มี 2. สามารถเขียนคําสั่ง (Tag) กาหนดรู ่ ความนาสนใจ ได้

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

คิดแล้วตอบ  ่ ่ มีการตอบโต้กบผู ั ช้ มด้วยเทคนิ คหลากหลาย ถ้านักเรี ยนเข้าชมเว็บไซต์บางแหงที ่ ้ น ด้วยสาเหตุใดบ้าง? และควรใช้ นักเรี ยนเคยหงุดหงิดหรื อรําคาญใจในขณะเข้าชมเว็บเหลานั แนวทางใดในการแกปั้ ญหาที่พบ....

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

หน่ วยที่ 7 การเผยแพร่ เว็บไซต์ บนเครือข่ าย ผลการเรียนรู้ ทคี่ าดหวัง ่ ่ ่ เว็บเพจจากเครื่ องนักเรี ยนสู่ เครื่ องแมขายได้ 1. นักเรี ยนสามารถสงไฟล์ ่ ่ ่อโดเมนที่ปรากฏบนเครื อขายได้ 2. บอกความแตกตางของชื

สาระสํ าคัญ หลังจากการสร้างเอกสารเว็บเพจแล้ว สิ่ งสําคัญอีกประการหนึ่ งคือ การนําเอกสารเว็บเพจ ่ ้ นออกเผยแพรสู่ ่ เครื อขายอิ ่ นเทอร์เน็ต ด้วยการสมัครใช้บริ การจากผูใ้ ห้บริ การพื้นที่ฟรี (Free เหลานั ่ ้นที่จากผูใ้ ห้บริ การ Hosting) หรื อการเชาพื การนําไฟล์เอกสารจากเครื่ องคอมพิวเตอร์ ของเราไปยังผูใ้ ห้บริ การ เราจะใช้ซอฟท์แวร์ ่ ่ ่ (Server) ซึ่ ง ประเภท FTP (File Transfer Protocol) ทําการสงไฟล์ (Upload) ขึ้ นไปยังเครื่ องแมขาย มีท้ งั ที่เป็ นระบบปฏิบตั ิการวินโดว์และลินุกส์ ในการทํา เว็บ ไซต์ข องเราให้เ ป็ นที่ รู้จ ัก และเข้า ใช้ง านได้ส ะดวก เมื่ อมี ความมุ่ งมัน่ ใน ั ใ้ ดในโลก การเผยแพรสู่ ่ สาธารณชน ต้องมีการจดโดเมนเพื่อใช้ชื่อที่เป็ นเอกลักษณ์ และไมซํ่ ้ ากบผู ่ ่อถือให้กบผู ั ช้ ม สร้างความนาเชื

คิดแล้ วตอบ  ่ บไซต์แตละแหงมี ่ ่ ชื่อเฉพาะที่ไมซํ่ ้ ากบั เมื่ อนักเรี ยนเข้าชมเว็บไซต์ต่างๆ จะพบวาเว็ ่ บอื่นๆ นั้ น ผูใ้ ด และสามารถเข้าดูได้ตลอดเวลา เราจะทําให้เว็บไซต์ของเราแสดงผลได้อยางเว็ ด้วยวิธีการใด...

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บไซต์บนเครื อขาย ่ การเผยแพรเว็

การนําเสนอเว็บไซต์ สู่ เครือข่ ายอินเทอร์ เน็ต ่ สวยงาม มีขอ้ มูลครบถ้วนพร้ อมที่นาํ เสนอสู่ ชาวโลก เมื่อเว็บเพจของเราสร้างสรรค์อยาง ่ ่ ่ ่ นเทอร์ เน็ต ที่เรา แล้ว สิ่ งที่ตอ้ งดําเนิ นการในขั้ นตอไปคื อ หาพื้ นที่บนเครื่ องแมขายในเครื อขายอิ ั ่ Web Server ที่มีผใู ้ ห้บริ การทั้ งประเภทฟรี จริ งๆ ฟรี โดยมีขอ้ แลกเปลี่ยน (เชน่ ขอมี เรี ยกกนวา ่ ั ่ โฆษณาแฝงในหน้าเว็บของเรา หรื อมี หน้าตางโฆษณาแบบเปิ ดเองตามระยะเวลาที่ เรี ยกกนวา ่ ้นที่จากผูใ้ ห้บริ การซึ่งมีอยูม่ ากมายบนเครื อขายอิ ่ นเทอร์เน็ต ใน Popup) หรื อใช้บริ การด้วยการเชาพื ่ งจัง จึง ที่น้ ี ขอแนะนําให้สมัครใช้พ้ืนที่ฟรี ก่อน เมื่อมีความพร้อมหรื อต้องการสร้างเว็บไซต์อยางจริ ่ วิธีการเชาพื ่ ้นที่ซ่ ึงจะมีรายจายคงที ่ ่เป็ นรายปี คอยใช้

การสมัครใช้ พนื้ ทีฟ่ รี (Free Web Hosting) ่ นเทอร์ เน็ตมีผใู ้ ห้บริ การฟรี โฮสท์จะมีท้ งั ในประเทศและตางประเทศ ่ บนเครื อขายอิ ซึ่งจะมี ทั้ งที่ให้บริ การพื้นที่สาํ หรับเว็บไซต์ทว่ั ไปที่ใช้ภาษา HTML ไมมี่ เทคนิคพิเศษอะไรมากมายนักจะมี ให้บริ การมากมายหลายที่ สามารถค้นหาได้จาก search engine ทัว่ ไปด้วยคําวา่ Free web hosting

่ แตในกรณี ที่เว็บไซต์ของเราต้องมีการใช้เทคนิ คพิเศษเพิ่มเติม เช่ น ใช้ฐานข้อมูลสําหรับ ่ จําเป็ นจะต้องคํานึ งถึงการให้บริ การของผูใ้ ห้บริ การโฮสท์เหลานั ่ ้ นด้วย การแสดงผลรู ปแบบตางๆ ่ เชน่ สนับสนุนฐานข้อมูล CGI, MySQL และ PHP หรื อ Access ่ บสนุนเทคนิ คพิเศษอยางไร วาสนั ่ อนของเว็บไซต์ กบั ASP เนื้ อที่ในการจัดเกบ็ เว็บให้มากน้อยเพียงใด ปริ มาณข้อมูลเข้าออกตอเดื ิ ญหาได้ถา้ เว็บไซต์เราดัง มีคนเข้าชมมากตอวั ่ น ปริ มาณข้อมูลในการเรี ยกชมกจะมากตาม ็ (อาจเกดปั ่ ถ้าปริ มาณข้อมูลมากเกนกวาที ิ ่ ่กาหนด ํ ) ผูใ้ ห้บริ การอาจงดให้บริ การเป็ นชวงๆ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บไซต์บนเครื อขาย ่ การเผยแพรเว็

่ ่ การสมัครใช้พ้ืนที่ฟรี น้ นั สวนใหญจะได้ ชื่อเว็บไซต์เป็ นแบบ Sub Domain คือ ใช้ชื่อเรา ่ ายด้วยชื่อเรา เชน่ นําหน้าชื่อผูใ้ ห้บริ การ เป็ น http://yourname.freehost.com หรื อได้ชื่อโดเมนตอท้ ่ ่ ้ งนี้ http://www.freehost.com/yourname และในบางแหงจะให้ ใช้ชื่อโดเมนของเราเองได้ แตทั ่ จะต้องทําการจดทะเบียนโดเมนนั้ นไว้ก่อน จะต้องมีการเตรี ยมข้อมูลการสมัครให้พร้อมดังตอไปนี ้ ่ ยาวมาก ผูช้ มจดจํามาก) หรื อชื่อโดเมน  ชื่อเว็บไซต์เป็ นภาษาอังกฤษ (อยาให้ ่ (Password) ที่ตอ้ งการ (ผูใ้ ห้บริ การบางรายจะ  ชื่อผูใ้ ช้งาน (User name) และรหัสผาน ่ ใช้ชื่อเว็บไซต์เป็ นชื่อบัญชีใช้งานด้วย) ควรอานรายละเอี ยดจากหน้าเว็บผูใ้ ห้บริ การ ่ ั ใ้ ห้บริ การ หรื อใช้เพื่อ  อีเมล์ที่สามารถใช้งานได้จริ ง เพราะต้องใช้งานในการติดตอกบผู การยืนยันการขอใช้พ้ืนที่ ่ วของผูข้ อใช้ เชน่ ชื่อ-นามสกุล ที่อยู่ รหัสไปรษณี ย ์ หมายเลขโทรศัพท์  ข้อมูลสวนตั ่ ว/การศึกษา/ธุรกจิ ฯลฯ)  จุดประสงค์ในการทําเว็บไซต์ (เว็บสวนตั หลังจากการสมัครเสร็ จสิ้ น ทําการยืนยันการขอพื้นที่ตามขั้ นตอนแล้ว จะได้รับรายละเอียด ่ ่ ในการใช้บริ การจากผูใ้ ห้บริ การ เชน่ ที่อยู่ (URL) ของเว็บไซต์ วิธีการอัพโหลดไฟล์ การตั้งคาตางๆ ี่ อง เชน่ การจัดการฐานข้อมูล การกาหนดบั ํ ที่เกยวข้ ญชีอีเมล์ หรื อบัญชีผจู ้ ดั การอัพโหลดไฟล์ ไฟล์ ่ ่ นไฟล์ index.html สําหรับเว็บไซต์แบบ html ธรรมดา แรกที่ใช้ในการเข้าถึงเว็บไซต์ สวนใหญจะเป็ ั และเป็ นไฟล์ index.php หรื อ index.asp สําหรับเว็บไซต์ที่เชื่อมโยงกบฐานข้ อมูล

การส่ งไฟล์ ไปยังเครื่องแม่ ข่าย ่ ่ ่ ่ ้ เมื่อได้พ้ืนที่สําหรับใช้งานแล้ว การสงไฟล์ ข้ ึนไปยังเครื่ องแมขายของ ผูใ้ ห้บริ การเหลานี ็ วิธีการหลายแบบ แตที่ ่เป็ นที่นิยมกนนั ั ้ นจะมีอยู่ 2 แบบ คือ กจะมี ่ ่ ั ่ ระบบ Files Manager)  แบบจัดสงผานหน้ าเว็บเพจ (เรี ยกกนวา  วิธีส่ งด้วยการใช้โปรแกรม FTP (File Transfer Protocol) ่ ่ วผูใ้ ห้บริ การจะมีคาํ อธิบายในการจัดสงไฟล์ ่ สวนใหญแล้ เข้าสู่ เซิ ร์ฟเวอร์ไว้แล้ว สามารถ ่ ศึกษาได้จากหน้าเว็บไซต์ผใู ้ ห้บริ การแตละราย โดยตรง  การส่ งไฟล์ด้วยระบบ File Manager ่ ่ ้ เป็ นการใช้งานระบบ File Manager จากเว็บไซต์ให้บริ การในตางประเทศ คือ ตัวอยางนี www.741.com ที่ให้บริ การพื้นที่ฟรี การสมัครใช้บริ การทําได้ง่ายโดยมีขอ ้ แลกเปลี่ยนการให้บริ การ ่ ่ การราย ด้วยการติดแบนเนอร์ โฆษณาในเว็บไซต์ (สามารถปลดโฆษณาออกได้แตต้่ องจายคาบริ ั ็ รับชื่อบัญชีใช้งาน (เป็ นชื่อ เดือนให้กบทางผู ใ้ ห้บริ การเล็กน้อย) เมื่อการสมัครเสร็ จสิ้ นแล้วกจะได้ ั บไซต์ที่เราจะสร้าง) และรหัสผานที ่ ่เรากาหนดเอง ํ ่ ครด้วยชื่อ htmlweb เดียวกบเว็ ตัวอยางสมั มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บไซต์บนเครื อขาย ่ การเผยแพรเว็

100

วิธีการอัพโหลดไฟล์ไปยังเว็บไซต์ที่สมัครไว้แล้วคือ http://htmlweb.741.com จะทําตาม ขั้นตอนดังนี้ 1. เปิ ดหน้าเว็บไซต์ www.741.com เพื่อทําการล็อกอิ นเข้าสู่ ระบบ โดยใช้ชื่อบัญชี ่ ํ ผูใ้ ช้งานและรหัสผานตามที ่กาหนด ั าจัดการไฟล์ซ่ ึ งมีให้เลือกหลายหัวข้อ ในที่น้ ีแนะนําให้เลือก HTML File 2. จะพบกบหน้ ่ การอัพโหลดไฟล์ การแกไข ้ Manager เพราะมีความสามารถครอบคลุมทุกหน้าที่การทํางาน เชน ็ ไฟล์ การเปลี่ยนชื่ อไฟล์ สร้างโฟลเดอร์ เกบไฟล์ และย้ายไฟล์จากโฟลเดอร์ หนึ่ งไปยังอีกโฟลเดอร์ ็ รวมทั้ งเราสามารถเขียนไฟล์ดว้ ยคําสัง่ ภาษา HTML ได้โดยตรงจากที่นี่ หนึ่งกได้

่ HTML File Manager ดังภาพ สามารถสร้างไฟล์หรื อโฟลเดอร์ ได้ใน 3. ในหน้าตาง กรอบสี แดง (1) หรื อจะอัพโหลดไฟล์ที่เตรี ยมไว้แล้วจากเครื่ องเราขึ้ นไปยังเซิร์ฟเวอร์ ก็ใช้งานจาก ่ ในกรอบสี เขียว (2) ถ้าต้องการลบหรื อเปลี่ยนชื่อโฟลเดอร์กทํ็ าได้ในกรอบสี ม่วง (3) ด้านลาง

 

 ้ 4. ในการจัดการไฟล์ เชน่ เปลี่ยนชื่อไฟล์ แกไขไฟล์ ย้ายไฟล์หรื อ ลบไฟล์ก็สามารถทํา ่ ยวกบการจั ั ั ได้เชนเดี ดการกบโฟลเดอร์ ดงั ภาพถัดไป มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บไซต์บนเครื อขาย ่ การเผยแพรเว็

101

่ ่ ้ คือการแกไขไฟล์ ้ 5. ตัวอยางจากภาพข้ างลางนี index.html ด้วยการคลิกเลือกที่ช่ องหน้า ้ ชื่อไฟล์แล้วคลิกที่ปุ่ม edit เพื่อทําการแกไข

ั ่ าหรับการแกไขไฟล์ ้ จะพบกบกรอบหน้ าตางสํ สามารถทําการเขียนคําสัง่ ภาษา html ลงไป ได้โดยตรง รวมทั้ งข้อความภาษาไทยดังภาพ

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

102

่ บไซต์บนเครื อขาย ่ การเผยแพรเว็

่ ็ ้ เลยดังภาพ (จะเห็นวามี ่ เมื่อคลิกที่ปุ่ม Save Change ด้านลางกสามารถดู ผลจากการแกไขได้ แบนเนอร์โฆษณาอยูส่ ่ วนบนของหน้าเว็บ)

6. การอัพโหลดไฟล์ดว้ ย File Manager นั้ น เมื่อเราคลิกเลือก Upload File from Your ั าตางดั ่ งภาพ ให้เลือกโฟลเดอร์ที่จะเกบไฟล์ ็ Computer จะพบกบหน้ ตามที่ได้สร้างเตรี ยมไว้ จากนั้ น ่ ครั้ งละ 10 ไฟล์ มีขนาดรวมไมเกน ่ ิ 1 MB คลิกที่ปุ่ม Browse เพื่อเลือกไฟล์ สามารถเลือกสงได้ ่ จากนั้ นคลิกที่ปุ่ม Upload Files ด้านลาง

็ ั ซึ่ งมีอยูม่ ากมายลองค้นหาได้จาก กทดลองสมั ครใช้บริ การจากผูใ้ ห้บริ การพื้นที่ฟรี ๆ กนได้ Search engine ทัว่ ไป มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บไซต์บนเครื อขาย ่ การเผยแพรเว็

103

 การส่ งไฟล์ ด้วย FTP ่ งเปิ ดให้บริ การอัพโหลดไฟล์ นอกจากการอัพโหลดไฟล์ผ่านหน้าเว็บไซต์แล้ว บางแหงยั ด้วย FTP (File Transfer Protocol) ซึ่งสามารถใช้โปรแกรม FileZilla, CuteFTP, WS_FTP หรื อ ่ ่ ครั้ งละ โปรแกรมอื่นๆ ได้ ซึ่ งจะมีความสะดวกรวดเร็ วกวาการใช้ ระบบจัดการไฟล์ เพราะสงได้ ่ ่ ่ หลายๆ ไฟล์และโฟลเดอร์ ได้พร้อมกนั ตัวอยางตอไปนี ้ ใช้โปรแกรม FileZilla ในการสงไฟล์ สามารถดาวน์โหลดมาใช้ได้ฟรี จาก http://www.filehippo.com/download_filezilla/ ็ าการติดตั้ งโปรแกรมลงไปในเครื่ องให้เรี ยบร้อย กใช้ ็ หลังจากดาวน์โหลดไฟล์มาแล้วกทํ ่ ่ นคาลิ ่ ขสิ ทธิ์ เมื่อเปิ ด งานได้เลยเพราะเป็ นซอฟท์แวร์ โอเพนซอร์ ส ไมต้่ องลงทะเบียนหรื อจายเงิ ่ ้ ให้กรอกข้อมูลที่จาํ เป็ นในการเชื่อมตอ่ คือ โปรแกรมขึ้ นมาดังภาพลางนี

 ชื่อโฮสท์ที่จะอัพโหลดไฟล์ อาจเป็ นชื่อหรื อหมายเลขไอพี เชน่ www.741.com หรื อ 209.63.57.10

่  ชื่อบัญชีผใู ้ ช้งาน และรหัสผาน  พอร์ตการเชื่อมตอ่ (ปกติใช้ค่ามาตรฐาน Port 21) ่ าเร็ จด้านซ้ายมือคือรายการไฟล์ในเครื่ องของ คลิกที่ปุ่ม Quickconnect ได้เลย เมื่อเชื่อมตอสํ ่ ่ เพียงคลิกเลือกไฟล์ที่ตอ้ งการรับ-สง่ แล้วลากไปยังฝั่งตรงข้าม เราเอง ทางฝั่งขวามือคือเครื่ องแมขาย ็ นอันเรี ยบร้อย กเป็ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

104

่ บไซต์บนเครื อขาย ่ การเผยแพรเว็

 การส่ งไฟล์ ด้วยบราวเซอร์ ่ ่ ในกรณี ฉุกเฉิ นไมมี่ โปรแกรมรับสงไฟล์ ในเครื่ องคอมพิวเตอร์ เรายังสามารถสงไฟล์ ดว้ ย ่ เหมาะสําหรับการใช้งานในเครื่ องคอมพิวเตอร์ วิธีการ FTP แบบไมต้่ องใช้โปรแกรมพิเศษชวย ่ ติดตั้ งโปรแกรมเพื่อการจัดสงไฟล์ ่ ทัว่ ๆ ไปที่ไมได้ เป็ นการเฉพาะ ซึ่งสามารถทําได้ง่ายๆ ดังนี้ ่ บราวเซอร์ Internet Explorer, Firefox หรื อหน้าตาง ่ Windows Explorer 1. เปิ ดหน้าตาง ่ ขึ้ นมา ที่ช่อง Address ให้พิมพ์คาํ สัง่ สําหรับการรับสงไฟล์ ลงไป รู ปแบบคําสัง่ ่ เชน่ ftp://username@host.com หรื อ ftp://username@ip address ตัวอยาง ftp://htmlweb.741.com@www.741.com หรื อ ip address กดปุ่ ม Enter

่ ใสรหั ่ สผานตามที ่ ั ใ้ ห้บริ การ เมื่อใสลงไป ่ 2. จะมีกรอบหน้าตางให้ ่ได้ลงทะเบียนไว้กบผู ถูกต้องกดปุ่ ม Log On

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บไซต์บนเครื อขาย ่ การเผยแพรเว็

105

็ นไฟล์ที่เราเคยสงไว้ ่ ก่อนหน้าดังภาพ จากนั้ นเปิ ดหน้าตาง ่ Windows Explorer 3. กจะเห็ ในเครื่ องของเราเลือกไฟล์ที่ตอ้ งการ นําไปวางในบราวเซอร์ FTP ของเราได้ทนั ที

ั ่ องคอมพิวเตอร์ ที่ไมได้ ่ ติดตั้ งโปรแกรมประเภท FTP วิธีการนี้ ใช้ได้ในกรณี ฉุกเฉิ นกบเครื ่ นเทอร์เน็ตได้กพอ ็ ไว้ สะดวกทุกที่ขอให้เครื่ องคอมพิวเตอร์น้ นั เชื่อมตออิ

การจดทะเบียนโดเมนเนม ่ นเทอร์ เน็ตแล้ว มี หลังจากที่เราได้ดาํ เนิ นการเขียนเว็บไซต์และอัพโหลดขึ้ นสู่ เครื อขายอิ การโฆษณาประชาสัมพันธ์เว็บไซต์จนเป็ นที่รู้จกั มีจาํ นวนผูเ้ ข้าชมเว็บไซต์มากพอสมควร การที่เรา ่ เราจะได้ชื่อเว็บไซต์เป็ น Sub Domain ของผูใ้ ห้บริ การ เชน่ ใช้บริ การพื้นที่ฟรี ของผูใ้ ห้บริ การตางๆ ่ นเอกลักษณ์ตามที่เราต้องการ อยากจะมีโดเมนเนมในชื่อที่ตนเอง http://htmlweb.741.com ซึ่ งไมเป็ ็ ่ คิดจะทําเลนๆ ่ แตทํ ่ า ต้องการ กสามารถทํ าได้เพื่อประกาศให้ผชู ้ มทราบวา่ เว็บไซต์ของเรานี้ ไมได้ ่ งจังตอเนื ่ ่องตลอดไป อยางจริ ่ ชื่อโดเมนนั้ นมีความหมายและบงบอกให้ ทราบวา่ เว็บไซต์น้ นั จัดทําขึ้ นเพื่อวัตถุประสงค์ ั ั ว่ ไปมี อะไร ใครเป็ นเจ้าของ และมีการจดทะเบียนจากที่ใด ซึ่งจะไมมี่ ชื่อซํ้ ากนเลย ที่เราพบเห็นกนทั ความหมายดังนี้

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

106

่ บไซต์บนเครื อขาย ่ การเผยแพรเว็

ชื่ อ โดเมนของเว็บ ไซต์ต่ างๆ จะมี ร ายละเอี ย ดดัง ภาพบน คื อ ระบุ ชื่ อ บริ ษ ัท /บุ ค คล/ ่ หนวยงาน /องค์กรที่เป็ นเจ้าของ ระบุกิจการดําเนิ นงานของเว็บไซต์ และระบุประเทศที่ทาํ การจด ่ าย) จากตัวอยาง ่ ทะเบียนโดเมน (ยกเว้นเฉพาะที่จดทะเบียนในสหรัฐอเมริ กาที่ไมมี่ ชื่อประเทศตอท้ ิ ่ ายโดเมนมี าขาย จดทะเบียนในไต้หวัน นามสกุลตอท้ คือเว็บไซต์ของบริ ษทั ไมโครเทคทํากจการค้ ความหมายดังนี้ สกลโดเมน ความหมายของสกลโดเมน ุ ุ .com ิ Company กจการการค้ าขาย ห้างร้านหรื อบริ ษทั .net ิ ่ Network กจการบริ การด้านเครื อขาย .org ่ งผลกาไร ํ Organization องค์กรอิสระที่ไมหวั .edu Education สถาบันการศึกษา โรงเรี ยน มหาวิทยาลัย ่ .gov Government องค์กรภาครัฐ หนวยงานราชการ .mil Military องค์กรทางทหาร กองทัพ และในปั จจุบนั ยังมีชื่อนามสกุลใหมๆ่ เพิ่มมากขึ้ น เนื่ องจากสกุลเดิ มที่เป็ นที่นิยม (.com, ่ ่ .tv, .info และอื่นๆ .net) มีผใู ้ ช้ชื่อดีๆ สวยๆ ไปหมดแล้ว จึงมีสกุลใหมเชน เราสามารถขอจดทะเบียนโดเมนเนมได้จากตัวแทนผูใ้ ห้บริ การในประเทศไทย ซึ่ งจะมีท้ งั ่ ยวหรื อจดโดเมนพร้ อมเชาพื ่ ้ นที่ สําหรั บวางเว็บไซต์ด้วย คาบริ ่ การจด บริ การจดโดเมนอยางเดี ่ ่ ้นที่โฮสท์ 1 ปี จะให้จดชื่อโดเมนฟรี ลองค้นหา ทะเบียนโดเมนปี ละ 350-600 บาท บางแหงเชาพื รายละเอียดจาก Google ดูได้ ่ ารถซํ้ ากบผู ั อ้ ื่นได้ ชื่อที่ส้ ัน สื่ อความหมายดี และจดจํา ชื่อโดเมนเป็ นชื่อที่มีหนึ่ งเดียวไมสาม ่ กบผู ั ท้ ี่สนใจอยากได้ ดังนั้ นหากเราจดชื่อโดเมนที่ดี ได้ง่ายมักจะมีผขู ้ อจดทะเบียนไว้ เพื่อขายตอให้ ็ ผูเ้ ข้าชมกจะสามารถเข้ าชมเว็บไซต์เราได้ง่ าย ถ้ามี ยอดผูเ้ ข้าชมสู งติ ดอันดับในเว็บไซต์ Search ็ ่ หมดอายุไป เพราะอาจถูกยึดครองไปขายตอให้ ่ กบผู ั อ้ ื่นได้ engine กควรจะรั กษาไว้อยาให้

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บไซต์บนเครื อขาย ่ การเผยแพรเว็

107

สําหรับในประเทศไทยจะมีโดเมนที่บ่งบอกวา่ เป็ นบริ ษทั /เจ้าของมีที่ต้ งั ในประเทศไทย ั บริ ษทั ที.เอช.นิค จํากดั (http://www.thnic.net) ได้ ซึ่ งมีนามสกุลของ (.th) สามารถจดโดเมนกบ โดเมนลงท้ายดังนี้ สกลโดเมน ุ .co.th .or.th .ac.th

.go.th .mi.th .in.th

ความหมายของสกลโดเมน ุ ิ Company กจการการค้ าขาย ห้างร้านหรื อบริ ษทั ่ งผลกาไร ํ หรื อองค์กรในกากบ ํ ั Organization องค์กรอิสระที่ไมหวั ของรัฐ Academic สถาบันการศึกษา โรงเรี ยน มหาวิทยาลัย ่ Government องค์กรภาครัฐ หนวยงานราชการ Military องค์กรทางทหาร กองทัพทั้ ง 3 เหลา่ Individual เว็บไซต์ส่ วนบุคคล

่ จ่ายในการจดโดเมนปี ละ 800 บาท (ไมรวมภาษี ่ ่ ่ม) สามารถดูรายละเอียด คาใช้ มูลคาเพิ เพิม่ เติมได้จากเว็บไซต์ของบริ ษทั

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ บไซต์บนเครื อขาย ่ การเผยแพรเว็

108

กิจกรรมเสนอแนะ ่ ่ 7 เสร็ จสิ้ นแล้ว ให้นกั เรี ยนแตละ ่ คน ทํากจกรรมดั ิ หลังจากการศึกษาบทเรี ยนหนวยที งนี้ 1. ให้นกั เรี ยนค้นหาเว็บไซต์ที่ให้บริ การพื้นที่ฟรี และเลือกสมัครใช้บริ การเพื่ออัพโหลด เว็บไซต์ที่จดั ทําขึ้ นของกลุ่มหรื อของตนเอง ํ 2. ให้นกั เรี ยนทดสอบการอัพโหลดเว็บไซต์ ตามวิธีการที่ทางผูใ้ ห้บริ การกาหนดไว้

คําถามท้ ายบท ่ นขั้ นตอน จากผูใ้ ห้บริ การที่ นัก เรี ยนสมัครใช้ 1. อธิ บ ายวิ ธีการอัพ โหลดไฟล์อ ยางเป็ บริ การไว้ ………………………………………………………………………………………………….. ………………………………………………………………………………………………….. ………………………………………………………………………………………………….. ………………………………………………………………………………………………….. ………………………………………………………………………………………………….. ่ 2. จงให้ความหมายของชื่อโดเมนตอไปนี ้ www.siam.edu ……………………………………….……………………………………….. ………………………………………………………………………………………………….. www.moe.go.th…………………………………………………………………………………. ………………………………………………………………………………………………….. www.easyhome.in.th……………………………………….………………………………….. ………………………………………………………………………………………………….. www.krumontree.com………………………………………………….……………………… ………………………………………………………………………………………………….. มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ เทคนิคพิเศษในการสร้างความนาสนใจในเว็ บเพจ

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

สร้ างความเด่ นด้ วยสไตล์ ชีท Style Sheet ่ เทคนิคการควบคุมการแสดงผลแบบ (Style Sheet) มีใช้มานานแล้ว ตั้ งแตไมโครซอฟท์ เริ่ ม ั ่ เพราะชวยใน พัฒนาบราวเซอร์ Internet Explorer จนกระทัง่ ได้รับการยอมรับและนํามาใช้กนมาก ้ ่ตวั ไฟล์ควบคุมรู ปแบบ การปรั บเปลี่ยนรู ปแบบเว็บเพจทุกหน้าได้ง่ายๆ ทั้ งเว็บไซต์ เพียงแกไขที ่ บเพจทุกหน้า ทําให้สะดวกมากยิง่ ขึ้ นไมต้่ องไปตามแกไขในทุ ้ (Style Sheet) ที่เดียวจะมีผลตอเว็ กๆ ไฟล์นบั ร้อยหน้าในเว็บไซต์น้ นั สไตล์ชีทจะมีอยู่ 3 แบบ คือ ํ ่ วของไฟล์ภายในแท็ก ในสวนหั 1. แบบฝังตัวในไฟล์ HTML Embedding จะกาหนดไว้ ํ <Style> … </Style> เพื่อกาหนดการแสดงผลเป็ นพิเศษสําหรับไฟล์น้ นั ไฟล์เดียว มักจะพบในการ ใช้งานซอฟท์แวร์สร้างเว็บแบบ WYSIWYG เชน่ Dreamweaver, Front Page ํ 2. แบบเชื่อมโยงจากไฟล์ภายนอก (Linking) คือการกาหนดไฟล์ สไตล์ชีทแยกไว้ต่างหาก ่ วของไฟล์เรี ยกเอาไฟล์สไตล์ชีทมาทํางานเมื่อเริ่ มต้นการโหลดไฟล์ แล้วใช้คาํ สัง่ <link> จากสวนหั ั ่ เป็ นรู ปแบบที่นิยมนํามาใช้งานกนมากที ่สุด เนื่ องจากมีความงายในการควบคุ มการแสดงผลของ ้ ่ หน้าเว็บเพจทั้ งหมดในเว็บไซต์ เมื่อมีการแกไขคาในคํ าสั่งของสไตล์ชีทให้เปลี่ยนแปลงไปจะมี ่ ิ ผลกระทบตอการแสดงผลของหน้ าเว็บไซต์ท้ งั หมดในทันที จึงทําให้เกดความสะดวกในการจั ดการ แสดงผลของเว็บไซต์ขนาดใหญ่ ที่มีจาํ นวนหน้าเว็บเพจจํานวนหลายร้อยหน้า ให้แสดงผลไปใน ั วยการแกไขเพี ้ ยงไฟล์เดียว ทิศทางเดียวกนด้ ในการจัดการเว็บไซต์ขนาดใหญด้่ วยระบบบริ หารจัดการเนื้ อหา (CMS : Content Management System) จึงมีการใช้ Style Sheet ในการควบคุมการแสดงผลนี้ เป็ นหลัก ํ ่ 3. แบบกาหนดไว้ ในแท็กที่ตอ้ งการ (Inline) จะใช้เมื่อต้องการความแตกตางเฉพาะไฟล์ ่ ้น เฉพาะที่เทานั

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ เทคนิคพิเศษในการสร้างความนาสนใจในเว็ บเพจ

ตัวอย่ างแบบ Embedding ํ คือการใช้แท็ก <style> และ </style> ครอบข้อกาหนดสไตล์ ชีททั้ งหมดไว้ และให้ส่ วน ่ ก <head> และ </head> ตามตัวอยาง ่ สไตล์ชีทนี้ อยูร่ ะหวางแท็

่ ข้างบนนี้ จะเห็ นวา่ สไตล์ชีทจะทําหน้าที่ สไตล์ชีททําหน้าที่อะไรบ้าง จากไฟล์ตวั อยาง ่ ้ อหาทั้ งหมด เชน่ ควบคุมการแสดงผลของสวนเนื ํ ่ BODY ให้ชิดขอบจอทุกด้าน ด้วยการกาหนด ํ 1. การกาหนดการแสดงผลในสวน Margin ่ ่ นย์ทุกด้าน และ Padding (ระยะหางจากขอบบราวเซอร์ ) เป็ น (จุดเริ่ มต้นในการแสดงผล) เป็ นคาศู ่ นย์ทุกด้าน ซึ่ งเราสามารถเพิ่มเติมเรื่ องสี ของพื้นหลัง ตัวอักษรได้ในสวนนี ่ ้ ดว้ ย แตละคํ ่ าสั่งจะ คาศู ่ (;) เชน่ คัน่ ด้วยเครื่ องหมายเซมิโคลอน body {margin: 0px 0px; padding: 0px 0px; bgcolor: #ffffff; color: #0000cc;}

2. การควบคุมการแสดงผลของจุดเชื่อมโยงทั้ งสี่ แบบให้มีสีอะไร (Color คือสี ตวั อักษร)ให้ ่ ่ มีขีดเส้นใต้หรื อไม่ (Text-decoration คือลักษณะของตัวอักษร ถ้าเป็ น none คือไมแตกตางจากข้ อความ ิ ปกติ underline คือมีขีดเส้นใต้ bold คือเป็ นตัวหนา) เมื่อเกดการกระทํ า ประกอบด้วย 2.1 จุดเชื่อมโยง A:link 2.2 จุดที่เคยคลิกไปแล้ว A:Visited ํ งจะคลิก A:Active 2.3 จุดที่กาลั ่ A:Hover 2.4 จุดที่เมาส์เคลื่อนผาน มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ เทคนิคพิเศษในการสร้างความนาสนใจในเว็ บเพจ

ํ 3. การกาหนดลั กษณะของตัวอักษรในบริ เวณป้ อนข้อความ (TextArea) ให้ใช้ตวั อักษร ่ (Size) รู ปแบบตัวอักษร (font-family) ลักษณะของตัวอักษรปกติ/หนา/เอียง (fontขนาดเทาใด ่ ่ style) และระยะหางระหวางบรรทั ด (line-height) ํ ่ (td) เหมือนข้อ 3 4. การกาหนดการแสดผลของข้ อความในชองตาราง ตัวอย่ างแบบ Linking ํ ํ ่ วยกนคื ั อ ไฟล์สไตล์ชีทที่มีส่ วน การกาหนดสไตล์ ชีทแบบนี้ จะต้องกาหนดในสองสวนด้ ํ ่ ขยายของไฟล์เป็ น *.CSS และในไฟล์ HTML ที่มีการใช้แท็ก <LINK> เพื่ออ้างถึงข้อกาหนดตางๆ ในไฟล์สไตล์ชีท ่ ่ ่ ยวกบแบบ ั Embedding แตแยก สําหรับในสวนแรกนั ้ น เราจะต้องสร้างไฟล์สไตล์ชีทเชนเดี ็ นไฟล์ต่างหากและให้มีส่ วนขยายของไฟล์เป็ น *.CSS เพื่อบอกให้ทราบวาเป็ ่ นไฟล์ ออกมาจัดเกบเป็ ็ ดังตัวอยางนี ่ ้ เป็ นไฟล์ สไตล์ชีทนัน่ เอง ใช้ Notepad หรื อโปรแกรมเทกซ์เอดิเตอร์ ตวั ใดสร้างกได้ สไตล์ชีทของเว็บไซต์ www.benchama.ac.th

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ เทคนิคพิเศษในการสร้างความนาสนใจในเว็ บเพจ

โครงสร้างของการเขียนไฟล์สไตล์ชีทคือ HTML Tag {Property : Value; Property : Value; ...} HTML Tag

เครื่ องหมาย {….} Property Value

คําสัง่ ในภาษา HTML ั ่ องหมาย <...> ในภาษา HTML ทําหน้าที่เหมือนกบเครื ่ ชื่อของคุณสมบัติที่เป็ นสวนขยายของคํ าสั่งภาษา HTML หากมี ่ ่ ่ น่ ด้วยเครื่ องหมายเซมิโคลอน ่ (;) หลายคาแตละคาจะคั ํ ่ Property ที่กาหนดไว้ คาของ

ั ั ํ รู ปแบบคล้ายๆ กนกบสไตล์ ชีทแบบแรก แตมี่ รายละเอียดมากกวา่ เพราะมีท้ งั การกาหนด รู ปแบบของหัวเรื่ อง ฟอนต์พิเศษที่ถูกเรี ยกใช้ในบางตําแหนง่ การแสดงผลของพื้นหลัง ตัวอักษรใน ่ ่ การแสดงสี ของสครอลบาร์ดา้ นข้าง เสร็ จแล้วจัดเกบในชื ็ สวนตางๆ ่อไฟล์ bmstyle1.css ่ ่สองซึ่ งเป็ นการใช้แท็กคําสั่งในไฟล์ HTML เพื่อเรี ยกใช้สไตล์ชีท จะใช้แท็ก ในสวนที ่ ายในสวน ่ <HEAD> และ </HEAD> ซึ่งมีรูปแบบดังนี้ <LINK> อยูภ <html> <head> <link href="bmstyle1.css" rel="stylesheet" type="text/css"> <title>Test Style Sheet</title> </head> <body>……………..</body> </html>

่ วไฟล์ทุกไฟล์ที่ตอ้ งการใช้สไตล์ชีท ทําให้สะดวกใน เราจะแทรกบรรทัดแท็กนี้ ในสวนหั ํ ้ ่ ็ าไปแกที้ ่ การเขียนไฟล์ HTML ที่ไมต้่ องไปกาหนดอะไรเป็ นพิเศษ หากต้องการแกไขสวนใดกเข้ ่ ้ น โดยไมต้่ องไปยุงกบไฟล์ ั ไฟล์สไตล์ชีทเพียงไฟล์เดียวเทานั HTML เลย การแสดงผลของทุกไฟล์ ็ นไปในรู ปแบบเดียวกนทั ั ้ งหมด กจะเป็ ตัวอย่ างแบบ Inline ในเว็บเพจบางหน้าเราอาจมีความต้องการพิเศษในการแสดงผลของฟอนต์ เชน่ รู ปแบบ ตัวอักษร สี ขนาด เราจะใช้วิธีการเขียนคําสัง่ สไตล์ชีทลงไปในจุดนั้ นๆ โดยตรงได้เลยเชน่ <font style=“font-family:Tahoma; color:#ff0000; size:14px;”>Test Font</font>

มีความหมายวา่ ข้อความ Test ตัวอักษร 14 พิกเซล

มนตรี โคตรคันทา

Font

ให้แสดงผลด้วยฟอนต์ Tahoma ใช้สีแดง และขนาด

โรงเรี ยนเบ็ญจะมะมหาราช

่ เทคนิคพิเศษในการสร้างความนาสนใจในเว็ บเพจ

เทคนิคน่ าสนใจสํ าหรับนําไปใช้ ในเว็บเพจ 1. การทําให้ หน้ าเว็บเพจเปลีย่ นไปโดยอัตโนมัติ คําสัง่ HTML ที่ทาํ ให้มีการเปลี่ยนหน้าเว็บเพจจากหน้าหนึ่งไปยังอีกหน้าหนึ่งโดยอัตโนมัติ ํ ่ ่ ในเวลาที่กาหนด (ไมต้่ องมีการคลิกที่จุดเชื่อมโยง) ให้ใสบรรทั ดตอไปนี ้ ไว้ที่ Tag <HEAD>

ํ คา่ x = จํานวนวินาที ที่เราต้องการให้เปลี่ยนไปยังหน้าที่กาหนดใน URL=? ควรเผือ่ เวลาที่ บราวเซอร์ จะโหลดหน้าเว็บเพจนี้ ไว้ดว้ ย เชน่ ใช้เวลาโหลดจนแสดงผลได้ครบถ้วนไป 10 วินาที ็ ํ ่ x=15 เป็ นต้น ควรจะทดลองดูจนได้ผลเป็ นที่น่ าพอใจ ในกรณี ที่ตอ้ งการให้ เรากควรกาหนดคา ่ ่ x=0 เปลี่ยนหน้าไปในทันทีให้ใสคา 2. การทําให้ หน้ าเว็บเพจบันทึกวันเวลาทีแ่ ก้ไขให้ อตั โนมัติ ้ นเวลาที่แสดงการแกไข ้ /อัพเดทครั้ งสุ ดท้ายของเว็บเพจ เพื่อให้ เราอาจจะเบื่อที่จะแกไขวั ่ ่ ่ บเพจของเรามีการปรับปรุ งแกไขบอยๆ ้ ่ และแกไขครั ้ ้ งสุ ดท้ายเมื่อใด สวนใหญเรา ผูช้ มได้ทราบวาเว็ ้ ้ ้ งสุ ดท้ายก็ยัง มักจจะลื มระบุ บางที แกไขปรั บปรุ งไปแล้วตั้ ง 2-3 ครั้ ง แตวั่ น ที่ ของการแกไขครั เหมือนเดิม ให้ลองใช้ชุดสคริ ปต์ส้ นั ๆ นี้ ไปวางไว้ในตําแหน่งที่เราต้องการให้แสดงผลการปรับปรุ ง ่ ็ ตามชอบ (สคริ ปต์น้ ีจะได้ผลดี ถูกต้องหาก ดของหน้าหรื อท้ายสุ ดกได้ ครั้ งสุ ดท้าย อาจเป็ นสวนบนสุ ่ นปั จจุ บนั เพราะตัวสคริ ปต์จะอานเวลาจากภายในเครื ่ วัน/เวลาของเครื่ องให้บริ การตั้ งคาเป็ ่ อง ั นเวลาที่เราบันทึกไฟล์ครับ) เซิร์ฟเวอร์มาเทียบกบวั

ตัวอย่ างการแสดงผลเมื่อนําสคริ ปต์ วางไว้ ส่วนหัวไฟล์ และท้ ายไฟล์

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ เทคนิคพิเศษในการสร้างความนาสนใจในเว็ บเพจ

3. การใส่ เสี ยงเพลงให้ หน้ าเว็บเพจ ่ ยงให้กบั เว็บเพจของเราด้วยไฟล์มิด้ ี (*.mid) ต้องแยกเป็ น 2 คําสั่ง เพราะวาบราวเซอร์ ่ ใสเสี ่ คาย ่ รับคําสัง่ในการแสดงผลแตกตางกน ่ ั (ระวัง! การใสเสี ่ ยงจะทําให้เว็บเพจของเราโหลด ของแตละ ่ การแสดงผลของเว็บไซต์ ช้าลงมาก อาจทําให้ผชู ้ มเบื่อและไมรอดู ่ 1. บราวเซอร์ Internet Explorer ของ Microsoft ให้ใช้คาํ สัง่ BGSOUND วางไว้ในสวน ที่ตอ้ งการภายใต้คาํ สัง่ <BODY> <bgsound src=“xxx.mid” autostart=“true” loop=“true” controls=“smallconsole” width=“50” height=“15” volume=“75”>

2. บราวเซอร์อื่นๆ ให้ใช้คาํ สัง่ EMBED SRC แทน <embed src=“xxx.mid” autostart=“true” loop=“true” controls=“smallconsole” width=“50” height=“15” volume=“100”>

่ ้ งสองตัวเลยกได้ ็ แตให้ ่ เป็ นเพลงเดียวกนั สําหรับ ให้เลือกใช้ตามความต้องการจะใสไปทั ่ ั ่ องดนตรี ถ้าเป็ นไฟล์ที่ใช้ในโปรแกรม ไฟล์ xxx.mid นัน่ คือมิด้ ีไฟล์ชนิ ดสแตนดาร์ดที่ใช้เลนกบเครื ่ สวนขยายในแท็ ่ คาราโอเกะจะต้องนํามาแปลงให้เป็ นมาตรฐานกอน กที่น่าสนใจมีดงั นี้ ํ ่ นทีหรื อไม่ คาคื ่ อ True/Fault AUTOSTART คือการกาหนดให้ เพลงเลนทั ํ ่ ั ่ จบ คาที ่ ่ใช้ได้ท้งั True/Fault และ LOOP คือการกาหนดให้ เลนวนเวี ยนกนไปไมมี ตัวเลขระบุจาํ นวนรอบ ่ ยง เพื่อเปิ ดโอกาสให้ผชู ้ ม CONTROLS คือการให้แสดงผลตัวควบคุมการเลนเสี ่ สามารถปิ ด/เปิ ดเพลงได้ ถ้าเขาไมอยากฟั ง ่ ควบคุมการเลนเสี ่ ยง WIDTH-HEIGHT คือขนาดของหน้าตาง ํ ่ VOLUME คือระดับความดังของเสี ยงเพลง สามารถกาหนดได้ ต้ งั แต่ 0-100 คาปกติ คือ 50 ่ การนําไปใช้ควรพิจ ารณาด้ว ยวา่ เสี ยงเพลงสร้ างความนาสนใจให้ กับเว็บเพจของคุ ณ ่ ยงเพลง ถ้าต้องการใสควรเป็ ่ ่ เกดิ หรื อไม่ มีความจําเป็ นเพียงใดที่ตอ้ งใสเสี นเพลงชนิ ดใด อยาให้ ั ้ อหาของเว็บเพจ เพลงยิง่ มีความยาวมากเวลาของการแสดงผลกยิ็ ง่ นานมากขึ้ น ความขัดแย้งกบเนื ่ หัวของไฟล์ ถ้าการโหลดเพลงยังไมเสร็ ่ จสิ้ นการแสดงผลในสวน ่ ถ้านําคําสั่งนี้ ไปไว้ที่สวน ่ ่ อื่นๆ จะหยุดนิ่ งไมแสดงผล ไปด้วย จนกวาการโหลดเพลงจะแล้ วเสร็ จ จึงควรนําคําสั่งนี้ ไปไว้ใน ่ ท้ายๆ ไฟล์ สวน

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ เทคนิคพิเศษในการสร้างความนาสนใจในเว็ บเพจ

4. การสร้ างเว็บเพจให้ มีการแสดงผลแบบเฟรม FRAME ่ ้นที่จอภาพออกเป็ นสวน ่ ๆ เพื่อให้แสดงผลด้วยไฟล์ที่แตกตางกน ่ ั ดังภาพ เป็ นการแบงพื

1 3

่ แสดงผลฝั่งขวามือ (3) เทานั ่ ้น เมื่อเราคลิกที่เมนูในหัวข้อทางด้านซ้ายมือ (1) เนื้ อหาในสวน ิ ามรู ้สึกเหมือนวาการแสดงผลเป็ ่ ่ ่ าจอ ที่มีการเปลี่ยนแปลง ทําให้เกดคว นไปอยางรวดเร็ ว การแบงหน้ ่ อย 4 ไฟล์ คือ แบบนี้ จะต้องสร้างไฟล์ HTML ขึ้ นมาอยางน้  ไฟล์ที่ 1 เป็ นไฟล์ควบคุมการแสดงผลของเฟรมซ้ายและขวา ํ  ไฟล์ที่ 2 เป็ นไฟล์เมนูสาํ หรับการกาหนดหั วข้อให้เลือกในเฟรมซ้าย ่ วของเว็บ  ไฟล์ที่ 3 เป็ นไฟล์แสดงสวนหั ั วข้อในไฟล์เมนู ซึ่ งจํานวนไฟล์ที่ 3 นี้  ไฟล์ที่ 4 เป็ นไฟล์เนื้ อหาที่จะแสดงสัมพันธ์กบหั ่ ั ว ข้อ ในไฟล์ที่ 2 เป็ นอยางน้ ่ อย (ตัว อยางในภาพจะมี ่ จะมี จ าํ นวนเทากบหั ไ ฟล์ที่ 4 จํานวนถึง 8 ไฟล์ตามหัวข้อ) ตัวอย่ างคําสั่ งในการแบ่ งเฟรม ่ ่เป็ นแท็ก <HTML> และ ในไฟล์ควบคุมหรื อไฟล์แรก index.html จะมีคาํ สัง่เฉพาะสวนที ่ ส่ วนควบคุมการแสดงผลแบบเฟรมแทน <HEAD> ไมมี่ ส่ วน <BODY> แตจะมี ่ ่ ่ ่ คือ เฟรมบนสําหรับการใสหั ่ วเรื่ อง ตัวอยางตอไปนี นสามสวน ้ เป็ นการแบงเฟรมออกเป็ ่ ้ อหา ดังนั้ นไฟล์เริ่ มต้นจึงมี 4 หรื อชื่ อเว็บไซต์ เฟรมซ้ายสําหรับเมนู และเฟรมขวาสําหรับสวนเนื ่ ที่ http://www.krumontree.com/html/tools/frame.zip) เฟรม (สามารถดาวน์โหลดไฟล์ตวั อยางได้ มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ เทคนิคพิเศษในการสร้างความนาสนใจในเว็ บเพจ

้ อความ (Text Editor) และบันทึกชื่อ เริ่ มต้นสร้างไฟล์ควบคุมไฟล์ที่ 1 ด้วยโปรแกรมแกไขข้ เป็ น index.html ประกอบด้วยคําสัง่ ดังนี้ <html> <head> <title>Frame Control</title> <meta name="description" content="EasyHome is a complete webpage to learn about building homepage by using the basic tool & HTML."> <meta name="Keywords" content="easyhome, homepage, webpage, design, html, tool, shareware, freeware."> <meta name="Author" content="Montree Kotkanta - webmaster@isangate.net"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <frameset rows="15%,*" frameborder=yes border="1"> <frame name="top" src="top.htm" noresize> <frameset cols="20%,*" frameborder=yes border="1"> <frame name="left" src="menu.htm" noresize> <frame name="right" src="news.htm" noresize> </frameset> </frameset> <noframes><br><br> <div align="center"> <font size="4"><b>I'm sorry if you can't view my webpage. You must have a browser capable of displaying frames, and frames must be enabled in the browser's preferences.</b></font> </div> </noframes> </html>

่ ่ ในกรอบคือ คําสั่งการสร้ างเฟรมแสดงผลโดยแบงเฟรมในแนวนอนออกเป็ นสองสวน ่ ่ 1 สําหรับไฟล์แสดงหัวเว็บ (top.htm) สวนที ่ ่สองเป็ นสวนที ่ ่แสดงเมนูและเนื้ อหา ด้วยคําสัง่ สวนที <frameset rows="15%,*" frameborder=yes border="1">

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ เทคนิคพิเศษในการสร้างความนาสนใจในเว็ บเพจ

่ ํ จากคําสั่งมีความหมายวา่ เป็ นการแบงเฟรมออกเป็ นสองแถว โดยกาหนดให้ แถวแรกมี ่ ั 15% ของจอภาพ และแถวที่สองคือสวนที ่ ่เหลือ และมีเส้นขอบของเฟรม ขนาดความสู งเทากบ ขนาด 1 พิกเซล <frame name="top" src="top.htm" noresize>

ํ ่ กาหนดให้ แถวบนมีชื่อเฟรมวา่ top และแสดงไฟล์ชื่อ top.htm ไมสามารถเปลี ่ยนขนาดได้ (noresize) คือมีขนาดความสูงเป็ น 15% เสมอ ่ ้ นที่เฟรมที่สองตามแนวตั้ งเป็ น 2 เฟรมให้มีสัดสวนเป็ ่ จากนั้ นเราจะทําการแบงพื น 20% สําหรับการแสดงผลเมนู และอีกส่ วนที่เหลือ 80% แสดงเนื้ อหา ด้วยคําสัง่ <frameset cols="20%,*" frameborder=yes border="1">

จากนั้ นใช้คาํ สั่งให้เฟรมซ้ายมือเรี ยกไฟล์ menu.htm มาแสดงผลและตั้ งชื่ อเฟรมนี้ ว่า left ํ และกาหนดให้ เฟรมขวามือมีชื่อวา่ right และแสดงผลไฟล์แรกด้วยชื่อ news.htm <frame name="left" src="menu.htm" noresize> <frame name="right" src="news.htm" noresize>

มีคาํ สั่งเพิ่มเติมคือ noframe ใช้เพื่อให้ขอ้ ความที่อยู่ภายใต้คาํ สั่งนี้ แสดงผล บอกให้ผชู ้ ม ทราบในกรณี ที่บราวเซอร์บางรุ่ นที่ไมมี่ ความสามารถแสดงผลในแบบเฟรมได้ ่ วของเว็บ อาจใช้ตวั อักษรขนาดใหญ่ หรื อไฟล์ ไฟล์ที่สอง top.htm เป็ นไฟล์แสดงสวนหั ็ ตัวอยางคํ ่ าสัง่ ในไฟล์มีดงั นี้ ภาพแสดงผลกได้ <html> <head> <title>Top Frame</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> <!-body { margin: 0px 0px; padding: 0px 0px} a:link { color: #00FFFF; text-decoration: none} a:visited { color: #ff99ff; text-decoration: none} a:active { color: #0099FF; text-decoration: underline} a:hover { color: #0099FF; text-decoration: underline} TextArea {font-size : 9pt; font-family : "MS Sans Serif"; font-style : normal; line-height: 12pt} --> </style> </head> <body bgcolor="#ffff99" text="#ff0000"> <center><font size="+3"><b>TOP FRAME</b></font> <font color="#0000FF"> (ใช้ ภาพแทนข้ อความนีไ้ ด้ )</font></center> </body> </html>

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ เทคนิคพิเศษในการสร้างความนาสนใจในเว็ บเพจ

ไฟล์ที่สาม menu.htm เป็ นไฟล์สาํ หรับแสดงผลรายการเมนูของเว็บไซต์ ซึ่ งเมื่อผูช้ มคลิกที่ ํ จุดเชื่อมโยงในเมนู เฟรมทางด้านขวามือจะถูกแทนที่ดว้ ยไฟล์ที่กาหนดไว้ เป็ นไฟล์ที่จะต้องทําการ ่ ่ าสัง่ มีดงั นี้ สร้างจุดเชื่อมโยงเพื่อให้แสดงผลตางจากการทํ าจุดเชื่อมโยงแบบอื่นๆ ตัวอยางคํ <html> <head> <title>Left frame</title>

ํ สามารถกาหนดสไตล์ ชีท เมต้าแท็ก เหมือนไฟล์ index.html และ top.htm </head> <body> <div align=“center”><font size="+3"><b>เมนูตัวเลือก</b></font></div> <hr size="3"> <a href="news.htm" target="right"><b>NEWS</b></a><br> <a href="myfav.htm" target="right"><b>MY FAVORITE</b></a><br> <a href="mysong.htm" target="right"><b>MY SONGS</b></a> <hr size="3">

เมื่อคุณคลิกที่ link<br>ข้างบนให้สงั เกต<br>การเปลี่ยนแปลง<br>ที่เฟรมด้านขวาครับ <hr size="3"> </body> </html>

ํ จะสั ง เกตได้ว่า ในการเชื่ อ มโยงของเมนู จ ะกาหนดเป้ าหมายให้แ สดงในเฟรมขวามื อ ่ ่นต้องระบุให้ถูกต้อง หากไมระบุ ่ (right) จึ งต้องใช้ target=“ชื่ อเฟรม” หากตั้ งชื่ อเฟรมเป็ นอยางอื ่ ้น target จะเป็ นการเรี ยกไฟล์น้ น ั ๆ มาแสดงผลในเฟรมเมนู ซึ่งเราไมต้่ องการให้เป็ นเชนนั ่ ไฟล์ที่ 4 news.htm และไฟล์เนื้ อหาอื่นๆ กสร้ ็ างเหมือนไฟล์ HTML ปกติทว่ั ไป สวน ่ ้ งหมดมีให้ดาวน์โหลดที่ http://www.krumontree.com/html/tools/frame.zip สําหรับไฟล์ตวั อยางทั นอกจากนี้ เรายังสามารถเรี ยกไฟล์เนื้ อหาจากเว็บไซต์อื่นๆ มาแสดงผลภายในหน้าเว็บเพจ ํ ของเราได้ ด้วยการใช้คาํ สัง่ iframe สามารถกาหนดขนาดหน้ าจอแสดงผล (ความกว้าง/สู งของเฟรม ได้) เชน่ <iframe src=“http://www.isangate.com/word.html” width=“600” height=“400” border=“0”></iframe>

จากคําสั่งข้างบนนี้ เป็ นการเรี ยกไฟล์เว็บเพจชื่อ word.html ของเว็บไซต์ชื่อ อีสานเกต มา ํ แสดงในหน้าเว็บเรา โดยกาหนดความกว้ างไว้ที่ 600 พิกเซล สู ง 400 พิกเซล หากเว็บเพจนี้ มีความ ่ ่ ่ ่เรากาหนด ํ ิ านขวามือ กว้างหรื อสู งมากกวาคาที จะเกดแถบเลื ่อน (Scroll bar) ขึ้ นที่ดา้ นลางและด้ ตามลําดับ

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

่ เทคนิคพิเศษในการสร้างความนาสนใจในเว็ บเพจ

กิจกรรมเสนอแนะ ่ ่ 6 เสร็ จสิ้ นแล้ว ให้นกเรี ่ คน ทํากจกรรมดั ิ หลังจากการศึกษาบทเรี ยนหนวยที ั ยนแตละ งนี้ ่ 1. ให้นกั เรี ยนเขียนคําสัง่ Style Sheet เพื่อควบคุมการแสดงผลเว็บเพจในรู ปแบบตางๆ ้ ้ งสุ ดท้ายลงในหน้า 2. ให้นักเรี ยนทดสอบการใช้คาํ สั่งสคริ ปต์บันทึกวันเวลาที่แกไขครั เว็บเพจ ี่ ั วประวัติส่ วนตัวของ 3. สร้างเว็บไซต์แบบเฟรมตามความคิดของนักเรี ยนเอง เกยวกบชี นักเรี ยน โดยสร้ างเมนู เพื่อเชื่ อมโยงไปยังประวัติส่ วนตัว การศึกษา การเรี ยน ความสนใจ และ ความหวังในอนาคต

คําถามท้ ายบท ่ 1. อธิบายความหมายของสไตล์ชีทแบบตางๆ Embedding ..……………………………………………………………………………….... ………………………………………………………………………………………………….. Link ……………………………………………………………………………………………. ………………………………………………………………………………………………….. Inline ………………………………………………………………………………………… ………………………………………………………………………………………………….. ่ 2. จงให้ความหมายของคําสัง่คุณสมบัติเพิม่ เติมใน Frameset ตอไปนี ้ rows ………………………………………………….……………………………………….. cols ……………………………………………………………………………………………. noresize …………………………………………………….………………………………….. name …………………………………………………………………….………………………

มนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

การออกแบบและเขียนเว็บไซต์

109

ตารางแสดงค่าสี และเลขฐานสิ บหก

นายมนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช

การออกแบบและเขียนเว็บไซต์

110

บรรณานกรม ุ ทรงศักดิ์ บรรจงมณี . คัมภีร์ออกแบบเว็บเพจอย่ างมืออาชีพ. กรุ งเทพฯ : ซีเอ็ดยูเคชัน่, 2542. นพรัตน์ วินิจวรรณกมล และพรเทพ เซี่ยวโหล. สร้ างสรรค์ Web Page ให้ มีเสน่ ห์วนั ละอย่ าง. กรุ งเทพฯ : ซีเอ็ดยูเคชัน่, 2541. เยาวภา สงวนวรรณ และวิทยา สงวนวรรณ. Design Web Graphics with HTML. กรุ งเทพฯ : ดอกหญ้า, 2540. วิทยา เรื องพรวิสุทธิ์. เรียนรู้ ภาษา HTML กับการเขียนโฮมเพจ สํ าหรับผู้เริ่มต้ น. กรุ งเทพฯ : ซีเอ็ดยูเคชัน่, 2540. สุ ปราณี ธีรไกรศรี . HTML 4 Visual Guide. กรุ งเทพฯ : โปรวิชน่ั , 2542 Laura Lemay. Teach yourself Web Publishing with HTML 3.2 in 14 days. (n.p.) : Sans.net Publishing, 1996. Siamak Sarmady. Web Design in 7 Days!.e-book : Learn’em Educational (Learnem.com), 2000. W3Schools.com. HTML Tutorial. Online course : http://www.w3schools.com/html/, 2000.

นายมนตรี โคตรคันทา

โรงเรี ยนเบ็ญจะมะมหาราช