หน่วยที่ 2 การออกแบบเว็บเพจเบื้องต้น

ชือ่ วิชา การสรา งเวบ็ เพจดว ยภาษาเอชทเี อม็ แอล หนว ยที่ 2 ช่อื หนวย การออกแบบเว็บเพจเบ้อื งตน รหัสวิชา 20901-2004 ชือ่ เรอื่ ง หลกั การออกแบบเว็บเพจ / ข้ันตอนการพัฒนาเวบ็ เพจ / เรม่ิ ตนการเขียนภาษา HTML / โครงสรางของภาษา HTML / โครงสรางของภาษา XHTML 1. สาระสำคญั HTML เปนภาษาหลักทใ่ี ชในการสรางไฟลเ ว็บเพจ โดยลกั ษณะของภาษา HTML แบง ออกเปน สองสวน คือ สวนของขอความท่ัว ๆ ไปและสว นทเี่ ปน คำสัง่ ในการกำหนดรปู แบบของขอ ความซงึ่ เรยี กวา แท็ก (Tag) หลังจากน้ันได พัฒนาภาษา HTML ขึ้นเรื่อย ๆ เพ่อื ลบจุดออ นหลายๆอยา งลง จนกลายมาเปนภาษาใหมที่ช่ือ XHTML 2. สมรรถนะประจำหนวย 1. หลักการออกแบบเวบ็ เพจ 2. ขัน้ ตอนการพฒั นาเว็บเพจ 3. เรมิ่ ตนการเขียนภาษา HTML 4. โครงสรา งของภาษา HTML 5. โครงสรางของภาษา XHTML 3. จุดประสงคก ารเรียนรู 1. สามารถแสดงความรคู วามเขาใจเกยี่ วกับหลักการออกแบบเวบ็ เพจ 2. บอกขน้ั ตอนในการพัฒนาเวบ็ เพจ 3. สามารถแสดงความรใู นการกำหนดไฟลและโฟลเดอร 4. สาระการเรยี นรู 1. หลกั การออกแบบเวบ็ เพจ 2. ขน้ั ตอนการพฒั นาเวบ็ เพจ 3. การกำหนดไฟลและโฟลเดอร

ใบความรู หนวยที่ 2 ชื่อวิชา การสรา งเวบ็ เพจดว ยภาษาเอชทเี อ็มแอล รหสั วิชา 20901-2004 ชือ่ หนว ย ความรเู บ้อื งตนเกยี่ วกับการสรางเวบ็ เพจ สัปดาหท ่ี 2-5 ชื่อเร่ือง หลกั การออกแบบเว็บเพจ / ขนั้ ตอนการพัฒนาเวบ็ เพจ / เริ่มตน การเขยี นภาษา HTML / โครงสรางของภาษา HTML / โครงสรางของภาษา XHTML หลักการออกแบบเว็บเพจ วิวัฒนาการของการ ออกแบบ เว็บไซต นั้นเปลี่ยนไปมาก แตเดิมนั้นหากเรา ออกแบบ เว็บไซต ดวยภาษา HTML เพยี งอยางเดยี วกส็ ามารถทำไดไมยากนกั เพียงแตม ันไมสามารถตอบสนองความตอ งการในหลาย ๆ ดานได เชน การสง ขอมลู ดว ยแบบฟอรม ผานทางหนา เวบ็ ไซต เขาสูฐานขอมลู ทรี่ จู ักกันดีในช่อื ของเว็บแอพพลิเคชั่น เปน ตน ดวยเหตุนี้จึงไดมีการพัฒนา เว็บไซต ที่เรียกวา CMS ขึ้นมา (ผมมักเรียก เว็บไซต ประเภทนี้วา เว็บไซต กึ่ง สำเรจ็ รปู ) เพือ่ ชว ยใหคนทมี่ คี วามรูในการออกแบบ เว็บไซต ไมมากนักสามารถ ออกแบบ เว็บไซต ไดอยางรวดเรว็ การ ออกแบบ เว็บเพจ ในปจจุบันนี้ตองประกอบดวยเทคโนโลยีสมัยใหม นั่นคือสามารถแสดง ขอมูล มัลติมีเดีย ไดอยาง สมบูรณ การจัดวางตำแหนงรูปภาพ และตัวอักษรเปนเรื่องที่มคี วามสำคัญ นอกจากนี้การเชื่อมโยงลิงคตาง ๆ ก็เปน เรอื่ งท่คี ณุ ควรใหค วามสำคญั ดวย เนือ่ งจากเปนการอำนวยความสะดวกใหกับผูเ ย่ยี มชม เวบ็ ไซต นัน่ เอง ขนาดของตัวอกั ษร ขนาดตวั อักษรเปนเรื่องสำคัญไมน อ ย เพราะหากตวั อักษรเล็กเกนิ ไปจะทำใหผูเยี่ยมชมรสู กึ วาอา นขอมลู ตาง ๆ ไดยาก แตถา ตวั อักษรใหญจนเกนิ ไปเราก็จะใสเนือ้ หาภายในหนาเวบ็ เพจไดน อ ย นอกจากนเี้ วบ็ ไซตของเราก็จะดไู ม สวยงามอีกดว ย เพราะฉะนนั้ ขนาดตวั อักษรจงึ เปน เร่อื งสำคญั ไมนอ ยเลย ปจจบุ ันหากคุณใช CMS ในการสรางเวบ็ ไซต มกั จะมเี ทมเพลททีอ่ อกแบบใหมีปุม เพม่ิ หรอื ลดขนาดของตวั อกั ษรอยดู วย ขนาดและความละเอยี ดของรปู ภาพ เว็บไชต จะดูดีหรือไม รูปภาพเปนสว นประกอบท่ีมคี วามสำคญั ชนดิ ของรปู ภาพที่นิยมนำมาใสในหนาเว็บเพจ กค็ ือ .jpg, .png และ .gif เปนตน เนือ่ งจากรปู ภาพเหลา น้ีมขี นาดเลก็ และสามารถแสดงสี หรอื การเคล่ือนไหวไดด ี นั่นเอง ท้งั น้คี วามกวา ง และความสูงของรปู ภาพเปนเร่ืองทีต่ องใหความสำคัญอกี เชนกัน เนอ่ื งจากภาพทใี่ หญไ ปมักจะ กนิ เน้อื ทที่ ำใหใ สข อมลู แลวไมส วยงาม สวนภาพที่เลก็ ไปจะทำใหดูรายรายละเอยี ดของภาพไมชดั เจน เปน ตน หากคณุ ตองการปรับแตงรูปดวยโปรแกรมงา ย ๆ เรามีบทความเก่ยี วกับการใชโปรแกรมดงั กลาว ซึ่งมีขนาดเลก็ และสามารถ Download มาใชง านไดฟ รี เชน Xnview, Gimp, Photoscape และ Paint.net ความกวาง และความสงู ของหนาเว็บเพจ ในเรื่องของความกวาง และความสงู ของหนาเวบ็ เพจนั้น เรอื่ งน้กี ม็ คี วามสำคญั ไมแ พเรือ่ งอนื่ ๆ เนือ่ งจาก ปจ จุบันจอคอมพวิ เตอรมีขนาดทใ่ี หญข ึ้น และมขี นาดที่หลากหลาย รวมทั้งมีอุปกรณใหม ๆ เพิ่มเขามา อยา งเชน Smartphone, Tablet, หรือแมกระทัง่ ทวี กี ส็ ามารถใชง าน Internet ไดในการกำหนดขนาดความกวา งจึง ตองคำนงึ เรือ่ งนี้ดวย สำหรบั ความสูงนั้นควรกำหนดใหหนาเวบ็ เพจไมยาวจนเกินไป เพราะอาจจะทำใหผูเย่ยี มชม เว็บไซตร สู ึกเบือ่ ในการเลือ่ นสกรอบารนาน ๆ นนั่ เอง



ใบความรู หนวยท่ี 2 ช่อื วิชา การสรางเว็บเพจดว ยภาษาเอชทีเอม็ แอล รหสั วิชา 20901-2004 ชอ่ื หนวย ความรูเ บ้ืองตน เก่ยี วกับการสรางเว็บเพจ สัปดาหท ี่ 2-5 ชอ่ื เรื่อง หลกั การออกแบบเวบ็ เพจ / ข้ันตอนการพฒั นาเวบ็ เพจ / เร่มิ ตนการเขียนภาษา HTML / โครงสรา งของภาษา HTML / โครงสรา งของภาษา XHTML ข้ันตอนการพฒั นาเวบ็ เพจ การทีจ่ ะสรา งพฒั นาเว็บเพจและนำเว็บไซตเ ขา สูระบบเวลิ ด ไวด เว็บ ใหคนอน่ื เขา มาเยี่ยมชมไดนน้ั มกี ระบวนการที่ ผูพัฒนาเว็บไซตจะตอ งศึกษาและปฏิบัตติ าม ดังนี้ 1. การวางแผนการทำงาน การวางแผนการทำงานเปรยี บเหมือนเขม็ ทิศท่จี ะชีท้ างใหเรารูวา ควรจะเดนิ ทางไปในทิศทางใดเพอื่ ไมใหห ลง ทาง การสรา งเวบ็ ไซตก็เหมือนกันจำเปน ตอ งมีการวางแผนการทำงานใหรอบดานกอนทจี่ ะเรมิ่ ลงมอื ทำ โดยมหี ลกั ทีต่ อง กำหนดในการวางแผน ดงั นี้ - ระยะเวลาการทำงาน เปน การกำหนดชวงเวลาที่จะใชใ นการสรางเว็บ ทีมงานหรือผูร ว มงาน ปกติการสรา งเว็บตอ งทำงานเปนทมี อยา งนอยตอ งมีผูเชย่ี วชาญ 3 ฝาย คอื ผูเ ชย่ี วชาญดา น ภาษา HTML หรอื โปรแกรมสรา งเว็บเพจ ผูเช่ียวชาญดานการออกแบบและตกแตงภาพ และผูเชย่ี วชาญดานเนือ้ หา หรอื บรรณาธกิ าร - งบประมาณ เปน การกำหนดคา ใชจาย อุปกรณหรอื เครื่องมือชว ยงาน เชน เคร่อื งคอมพิวเตอร เคร่อื งสแกนเนอรและรูปภาพประกอบเว็บเพจ เปนตน ปญหาและอปุ สรรค 2. การรวบรวมและวเิ คราะหโครงสรา ง เปน ข้ันตอนหนง่ึ ทีต่ อจากการวางแผน เปนการแผนงานไปปฏิบตั ิ โดยการรวบรวมขอมลู ทจ่ี ำเปน ตองใชในการ สรา งเวบ็ ตามหัวขอทเี่ ลอื กไว ท้งั เนอ้ื หา ภาพ เสยี งและภาพเคล่ือนไหว เกบ็ รวบรวมเปน ไฟลขอ มูล หรอื ใสแฟม แยก เปน หมวดหมู เพอื่ ความสะดวกในการนำมาใชง าน

3. การออกแบบและการสรางเว็บไซต เปนขั้นตอนการนำขอมลู ทั้งหมดมาสรา งเปน เวบ็ ไซตดว ยภาษา HTML หรอื เคร่อื งมอื ในการสรางเว็บอื่นๆ หลกั สำคัญในการออกแบบและสรา งเวบ็ คือ - กำหนดจดุ ประสงคเว็บไซต โดยวางเปา หมายของผูเขา ชมวา จะเปน กลุมใด - เลือกเว็บเบราวเซอร เปนการเลือกเวบ็ เบราวเ ซอรทีใ่ ชแ สดงผลเวบ็ ไซต จะไดกำหนดขนาดกวาง ยาว และ ลกั ษณะการวางองคประกอบเว็บใหสวยงามและแสดงผลไดเร็ว วางโครงรา งของเว็บไซต กำหนดโครงรา งวา มีทัง้ หมดกเี่ ว็บเพจ แตละเวบ็ เพจมีเน้อื หาอะไรบา ง ควรเขยี นเปนแผนผัง เวบ็ ไซตอ อกมาบนกระดาษ ออกแบบหนาตาเว็บ เปนขัน้ ตอนในการลงมอื สรา งเวบ็ เพจแตล ะหนาตามที่ไดออกแบบไว พรอมกบั ทดสอบผา นเว็บ เบราวเ ซอร (แบบ Offline) 4. ทดสอบและปรบั ปรงุ เว็บไซต หมายถงึ การทดสอบแบบออฟไลน โดยทย่ี ังไมไ ดน ำเวบ็ ไซตเขาสูอินเทอรเน็ต แตก็สามารถแสดงผลไดเ หมอื น จรงิ ผา นเวบ็ เบราวเ ซอร เชน IE เพื่อตรวจสอบตัวอยางเว็บท่สี รางไว เชน ขนาดตวั อักษร ขนาดภาพ การใชส ี ตาราง ฯลฯ วาเหมาะสมหรือไม พรอมกบั การปรับปรงุ จนเปน ที่นาพอใจ 5. เผยแพรผ า นเว็บไซต เปนการเผยแพรใหค นทว่ั ไปไดรูจ ัก หรือเรยี กวาการอัพโหลด (Upload) โดยเจาของเวบ็ จะตอ งจดทะเบยี น โดเมนเนม และเชาพ้นื ที่โฮสต ก็สามารถนำเว็บเพจอัพโหลดขึ้นสอู ินเทอรเน็ต และประชาสัมพันธใหคนท่ัวไปได รจู กั การท่ีจะทำใหค นรบั รู และเขามาใชบ ริการเวบ็ ไซตไดม ากน้นั จะตองมีการประชาสัมพนั ธอ ยา งตอเนื่องและใชเ วลา พอสมควร และถา จะใหดคี วรมเี คานเตอร (Counter) หรอื ตัวจดสถติ ิผเู ขาชม ก็จะชวยใหประเมนิ ไดวา เว็บไซตของเรา ไดรบั ความสนใจมากนอ ยเพียงใด 6. การพัฒนาเวบ็ ไซต เปน การปรับปรุงเนอื้ หา ภาพประกอบหรืออัพเดท (Update) เว็บไซต ถอื เปน ขนั้ ตอนสำคญั เพราะในโลกของ อินเทอรเ นต็ มกี ารเปลี่ยนแปลงอยางรวดเรว็ อยตู ลอดเวลา ผชู มเว็บมกั จะใชเ วลาในการคน หาและเปดผานเว็บไซตตา ง ๆ อยา งรวดเรว็ หากพบวา เว็บไซตข องเราไมไดเ ปลีย่ นแปลงหรือมีขอ มลู ใหมๆ เพม่ิ ข้ึนเลย ผูเขาชมเวบ็ ก็จะลดจำนวนลงไป เรอื่ ย ๆ จนกลายเปน เว็บที่ไมมผี คู นเขามาเลยหรอื เปนเว็บท่ีตายแลว การออกแบบโครงสรางเว็บไซต สามารถทำไดห ลายแบบ ข้นึ อยูก บั ลกั ษณะของขอ มูล ความถนัดของผอู อกแบบตลอดจนกลุม เปา หมายที่ ตองการนำเสนอ โครงสรางของเว็บไซตประกอบไปดว ย 3 ลักษณะดงั นี้ 1. แบบเชิงเสน เปนโครงสรางแบบธรรมดา งายตอการจัดระบบขอมูล ขอมูลที่นิยมจัดดวยโครงสรางแบบนี้มักเปน ขอมูลท่ีมีลกั ษณะเปนเรือ่ งราว ตามลำดบั โครงสรา งแบบนี้ เหมาะกบั เวบ็ ไซตท ี่มีขนาดเลก็ เน้อื หาไมซ บั ซอ นใช การลิงค (Link) ไปทีละหนา ทิศทางของการเขาสูเนื้อหา ภายในเว็บจะเปนการดำเนนิ เรื่องในลกั ษณะเสนตรง โดยมี ปมุ เดินหนา -ถอยหลงั เปนเครอื่ งมือหลักในการกำหนดทศิ ทาง ขอ เสียของโครงสรางระบบน้ีคอื ผูใชไมสามารถกำหนด ทศิ ทางการเขา สเู น้ือหาของตนเองไดทำใหเ สยี เวลา ในการเขาสูเน้ือหา รูปภาพ แสดงโครงสรางของเวบ็ ไซตแบบเชิงเสน

2. แบบลำดับชน้ั เปนโครงสรา งท่ีมีความซับซอ นของขอ มลู โดยแบงเนื้อหา ออกเปนสว นตาง ๆ และมรี ายละเอยี ด ยอย ๆ ในแตล ะสว นลดหลนั่ กันมาในลักษณะแนวคิดเดียวกบั แผนภมู อิ งคก ร จงึ เปนการงา ยตอการทำความเขาใจกบั โครงสรา ง ของเนื้อหา ลกั ษณะเดน คอื การมีจุดเร่ิมตนท่ีจดุ รว มจดุ เดยี ว นน่ั คือ โฮมเพจ (Homepage) และเช่อื มโยงไปสู เนื้อหาในลกั ษณะเปนลำดบั จากบนลงลา ง เรียงลำดับเปน กง่ิ กานแตกแขนงตอเน่อื ง เปรียบไดกับตนไมกลบั หวั รปู ภาพ แสดงโครงสรา งของเว็บไซตแ บบลำดับชั้น 3. แบบผสม เปน การจดั เรยี งหนาเอกสารเวบ็ ไซต โดยผสมผสานระหวา งแบบลำดบั ชน้ั และแบบเชิงเสน โครงสรางประเภทนีจ้ ะมคี วามยดื หยนุ มากท่ีสุด ทุกหนาในเวบ็ สามารถจะเช่ือมโยงไปถงึ กันไดหมด เปน การสรา งรปู แบบ การเขาสูเ นอื้ หาทีเ่ ปนอิสระ ผูใชสามารถกำหนดวิธีการเขาสูเนอ้ื หาไดด วยตนเอง รูปภาพ แสดงโครงสรางของเว็บไซตแ บบผสม

การกำหนดไฟลและโฟลเดอร การกำหนดโฟลเดอรก อนทีจ่ ะทำการสรางชุดเอกสารเว็บเพจนน้ั เปน ลำดับขนั้ ตอนท่ีควรกระทำทกุ ครง้ั เพ่ือให เอกสาร เว็บแตล ะชดุ นนั้ มีระบบการจดั เกบ็ ทีเ่ ปน ระบบ สามารถคน หาเรียกใชง านและแกไ ขขอ มูลภายหลังได โดยสะดวก โดยท่ี ในการสรา งชดุ เอกสารเว็บแตละชุดน้ันจะประกอบไปดว ยแฟมขอ มูลจำนวนมาก ทงั้ เอกสารเอชทีเอ็ม แอล แฟมขอมลู รูปภาพ เสัยง ภาพเคลอื่ นไหว และอ่ืน ๆ ท่เี กยี่ วขอ งกบั เวบ็ เพจ ดังนัน้ แฟม ขอมลู ท้ังหมดนี้ควรจัดเก็บ ไวอ ยางเปน หมวด หมู โดยอาจสรางเปนโฟลเดอรย อยเพ่ือทำการแยกกลมุ แฟมขอ มูล แตจะตองสรางภายใตโฟลเดอร หลกั ของโปรแกรม ทง้ั หมด ไมควรแยกไวคนละตำแหนง กัน เพราะจะทำใหก ารจัดการเกี่ยวกบั เวบ็ เพจนั้นมปี ญหา ยุงยากได โดยทำการ สรางโฟลเดอร 1 โฟลเดอร ตอเวบ็ ไซต 1 เวบ็ ไซต ตัวอยาง การสรางโฟลเดอรช อ่ื WEB-SITE ไวท ่ี desktop ของ Windows - ท่ีหนาจอของคอมพิวเตอรจะแสดง Desktop ของ Windows - นำเมาสไ ปช้ีตรงตำแหนงพน้ื ทีว่ า งบน Desktop จากน้ันใหกดปุมเมาสทางดา นขวาเพ่ือแสดงเมนูลัด - ทำการเลอื กคำสัง่ New จากนัน้ เลอื ก Folder - ปรากฏไอคอนของโฟลเดอรวาง - ใหท ำการพมิ พช่อื ของโฟลเดอร ในทีนีค้ ือ WEB-SITE จากนนั้ ทำการกดปมุ ENTER จะปรากฏโฟลเดอรชือ่ WES-SITE การจัดเตรยี มภาพท่ีเกี่ยวของกับเนื้อหาเว็บ เอกสารเว็บโดยท่วั ไปแลวจะตองเก่ยี วขอ งกับรูปภาพโดยตรง เพือ่ ใชในการสื่อสารความหมายกับผูใชงานได ชัดเจนมากกวา การสอ่ื ความหมายดวยตัวอักษรเพยี งอยางเดียว อีกทง้ั เปน การดงึ ดูดคสามสนใจของผใู ชงาน ดังนนั้ เม่ือ ทำการสรางรปู ภาพหรอื จดั หารปู ภาพเปน ทเ่ี รยี บรอยแลว ควรท่จี ะทำการคดั ลอกมาเก็บไวใ นโฟลเดอร ทไี่ ดจัดเตรียมไว เพ่อื ใหส ะดวกในการเรียกใชงานรูปภาพนน้ั และสะดวกตอการบริหารเวบ็ ไซตในอนาคต แฟมขอมูลรปู ภาพทน่ี ำมาใชใน การทำเว็บเพจน้ัน ปจจบุ นั นิยมใชอยู 2 รปู แบบคือ - ไฟลฟอรแ มต JPEG (Joint Photographer's Experts Group File) - ไฟลฟ อรแมต GIF (Graphics Interlace File) การจัดหารูปภาพที่นำมาใชในการจดั ทำเว็บเพจน้ัน สามารถจัดเตรยี มไดห ลายวธิ ี เชน - สรา งรปู ภาพโดยโปรแกรมกราฟฟกตา ง ๆ เชน Photoshop, Corel Draw เปน ตน ในการสรางแฟมขอมลู รูปภาพซง่ึ จะไดภาพทตี่ รงกบั ความตอ งการ แตใชเวลาในการสรางภาพมากข้ึน - เลอื กรปู ภาพจากชุดภาพสำเร็จรปู ท่มี ีการวางจำหนา ยในลักษณะคลงั รปู ภาพสำหรับทำเว็บเพจ (Web ClipArt) ซึง่ สะดวกรวดเรว็ และงายตอ การใชงาน แตอาจจะไดภาพท่ีไมต รงกับความตอ งการมากนัก - นำรูปภาพจากโปรแกรมอน่ื หรอื เวบ็ เพจอ่นื มาใชงาน ซ่ึงสะดวกรวดเรว็ ตอ การใชง านเชนกันแตอ าจเกดิ ปญหาทางดานลิขสทิ ธข์ิ องภาพ

ใบความรู หนวยท่ี 2 ชือ่ วชิ า การสรา งเว็บเพจดวยภาษาเอชทีเอม็ แอล รหสั วชิ า 20901-2004 ช่อื หนวย ความรเู บื้องตน เกยี่ วกับการสรา งเวบ็ เพจ สปั ดาหท ี่ 2-5 ชือ่ เรอ่ื ง หลกั การออกแบบเวบ็ เพจ / ขน้ั ตอนการพัฒนาเวบ็ เพจ / เรม่ิ ตนการเขยี นภาษา HTML / โครงสรางของภาษา HTML / โครงสรางของภาษา XHTML รูจ ักกบั ภาษา HTML HTML ยอมาจากคำวา Hypertext Markup Language เปนภาษาหลักที่ใชในการสรางไฟลเว็บเพจ โดยมี แนวคิดจากการสรา งเอกสารไฮเปอรเ ทก็ ซ (Hypertext Document : ขอความในเอกสารทีเ่ ชอ่ื มโยงถงึ ขอมลู ตาง ๆ ได) ซึ่งพัฒนาขึ้นมาจากภาษา SGML (Standard Generalized Markup Language) โดย Tim Berners-Lee ในป ค.ศ. 1990 ซึ่งใชในระบบของ CERN (Conseil European pour la Recherche Nuclearize) เบื้องตนไดเริ่มใชที่ สวิตเซอรแลนด จากนั้นกไ็ ดแ พรขยายออกไป ระบบนีไ้ ดถ กู ตั้งชอื่ วา World Wide Web : WWW ท่ีเรารูจักกนั จนมาถึง ยคุ ปจจบุ นั HTML = Hypertext+SGML HTML เกิดจากการสรางเอกสาร Hypertext โดยพัฒนาจากภาษา SGML ภาษา HTML ไดรับการพัฒนาและถูกนำไปใชอยางแพรห ลาย จงึ ทำใหเกิดมาตรฐานในเวอรชน่ั ตาง ๆ ดงั นี้ HTML 1.0 เกิดขน้ึ ในป 1993 โดย Tim Berners-Lee และ Dave Raggett ไดก ำหนดให เอกสาร HTML ท่ีไดพฒั นาขนึ้ แมจะเขยี นดว ยมาตรฐานใด ๆ กต็ าม ตองไมท ำใหเอกสารทสี่ รางน้ันอา นไมไ ด \"Any standard must not make existing documents (as far as possible) unreadable.\" HTML 2.0 เกิดขนึ้ ในป 1995 ถูกพฒั นาขึ้นโดย IETF (Internet Engineering Task ForceX) ซ่งึ มุงหวงั ใหส ามารถเปด แสดงผลกับบราวเซอรท ่ีใชง านทัว่ ไปได HTML 3.0 ในป 1995 ไดพฒั นา HTML ใหม ีความสามารถเพิ่มขน้ึ โดยการเพิม่ การทำงานเกยี วกบั ตาราง การปรับ ขอความลอ มรอบภาพ และแสดงสวนท่ีมคี วามซับซอ นไดด ขี ึน้ รวมทงั้ ชวยใหบราวเซอรย อนกลบั ไปดูเว็บเพจหนาท่ีเคย ชมมากอนไดดีกวา เวอรชัน่ 2.0 หรือทเี่ รียกวา Backward HTML 3.2 ในป 1996 ไดมีการเพิ่ม Element และ Attribute ท่ีสามารถทำงานรว มกบั หลายๆ บราวเซอรไดมากขนึ้ และ มชี อ่ื เรียกโคด แบบน้วี า \"Wilbur\" HTML 4.0 ในป 1997 ไดมีการพัฒนาและดูแลมาตรฐานของ HTML ดวยองคก รกลางที่ชอ่ื วา W3C (The World Wide Web Consortium) เพ่ือพฒั นาเทคโนโลยี WWW ใหล้ำหนา ย่ิงขึน้ โดยไดมีการเพม่ิ ประสทิ ธิภาพในการทำงานดวย Style sheet, Frame, การฝง ออบเจ็กตข องโปรแกรมเสรมิ เพอ่ื แสดงและเสียง การสรางฟอรม และการใชง านรวมกับ ภาษา Script แบบตา ง ๆ HTML 4.01 ในป 1997 เชนเดียวกันไดป รบั การทำงานท่ีผดิ พลาดใหสมบูรณย ่งิ ข้นึ (หลังจาก HTML 4.01 องคกร W3C ได หยดุ พัฒนา HTML โดยเปลี่ยนไปพัฒนาภาษามาตรฐานใหมท ี่ชอ่ื วา XHTML มาใชในการสรา งเว็บ เพือ่ จะขยายการใช เว็บไปสูอุปกรณต า ง ๆ ไดเพ่มิ มากขนึ้ แตก ็ยังคงใหบราวเซอรใ ชง านโปรแกรมภาษา HTML ไดเ ชน เดิม

ใบความรู หนวยท่ี 2 ชือ่ วชิ า การสรางเวบ็ เพจดวยภาษาเอชทเี อ็มแอล รหสั วิชา 20901-2004 ชอ่ื หนวย ความรูเ บื้องตน เกีย่ วกบั การสรา งเว็บเพจ สัปดาหท่ี 2-5 ช่ือเร่อื ง หลกั การออกแบบเวบ็ เพจ / ขนั้ ตอนการพฒั นาเว็บเพจ / เรมิ่ ตนการเขียนภาษา HTML / โครงสรางของภาษา HTML / โครงสรางของภาษา XHTML โครงสรา งของภาษา HTML การเขยี นโฮมเพจดวยภาษา HTML นัน้ เอกสาร HTML จะประกอบดวยสว นประกอบ 2 สวน ดงั นี้ 1. สวน Head คอื สว นทจ่ี ะเปนหัว (Header) ของหนาเอกสารท่ัวไป หรอื สว นชอ่ื เร่อื ง (Title) ของหนา ตา งการ ทำงานในระบบ Windows 2. สว น Body จะเปนสว นเนอื้ หาของเอกสารนัน้ ๆ ซงึ่ จะประกอบดว ย Tag คำส่งั ในการจดั รปู แบบ หรือ ตกแตงเอกสาร HTML ในทง้ั สองสว นนี้จะอยภู ายใน Tag <HTML>…</HTML> ดงั นี้ <html> <head> <title> สว นชื่อเอกสาร </title> </head> <body> tag คำสัง่ </body> </html> คำส่ัง หรือ Tag ท่ใี ชในภาษา HTML ประกอบไปดว ยเครือ่ งหมายนอยกวา \"<\" ตามดว ย ชอื่ คำสงั่ และปด ทาย ดวยเครื่องหมายมากกวา \">\" เปน สวนทที่ ำหนาที่ตกแตง ขอ ความ เพ่ือ การแสดงผลขอ มลู โดยทวั่ ไปคำส่ังของ HTML สวนใหญจะอยูเปนคู มีเพยี งบาง คำสั่งเทา นั้น ที่มีรปู แบบคำสง่ั อยเู พียงตัวเดียว ในแตล ะคำสั่ง จะมีคำสัง่ เปดและปด คำสงั่ ปดของแตละ คำส่ังจะมี รปู แบบเหมือนคำสั่งเปด เพียงแตจะเพิม่ \"/\" (Slash) นำหนาคำสงั่ ปดใหด ู แตกตาง เทาน้นั และในคำสง่ั เปด บางคำสง่ั อาจมสี ว นขยายอืน่ ผสมอยูดวย ในการเขยี นคำส่ังภาษา HTML สามารถเขยี น ดว ยตัวอกั ษร เลก็ หรอื ใหญ ท้งั หมดหรือเขียนคละกันได เชน <HTML> หรือ <Html> หรือ <html> ซ่งึ จะใหผ ลเหมือนกนั คำสัง่ เรม่ิ ตนของเอกสาร HTML <HTML>..........</HTML> คำสง่ั <HTML> เปนคำสัง่ เริ่มตน ในการเขียนโปรแกรมและคำส่งั </HTML> เปน การสิน้ สุดโปรแกรม HTML คำส่ังน้ีจะไมแสดงผลในโปรแกรมเวบ็ เบราเซอร แตตองเขียนเพือ่ ใหเ กิดความเปนระบบของงาน และเพื่อจะใหร ูวา เอกสารน้ีเปน เอกสารของภาษา HTML สวนหวั เรื่องเอกสารเวบ็ (Head Section) <HEAD>..........</HEAD> Head Section เปนสวนท่ีใชอ ธิบายเกย่ี วกับขอ มูลเฉพาะของหนาเวบ็ นนั้ ๆ เชน ชือ่ เรอ่ื งของหนา เวบ็ (Title), ช่อื ผจู ัดทำเว็บ (Author), คยี เวิรด สำหรบั การคนหา (Keyword) โดยมี Tag สำคญั คือ <TITLE>..........</TITLE > ขอ ความท่ีใชเปน TITLE ไมควรพมิ พเกนิ 64 ตวั อกั ษร, ไมตองใสลักษณะ พิเศษ เชน ตวั หนา เอยี ง หรือสี และควรใชภาษาท่มี ีความหมายครอบคลมุ ถงึ เนือ้ หาของเวบ็ เพจ นัน้ หรือเปน คำสำคญั ในการคน หา (Keyword)

<BODY>..........</BODY> Body Section เปนสวนเน้อื หาหลักของหนาเวบ็ ซง่ึ การแสดงผลจะตอ งใช Tag จำนวนมาก ขนึ้ อยูกับลักษณะ ของขอ มูล เชน ขอ ความ, รปู ภาพ, เสยี ง, วดี โิ อ หรือไฟลต า งๆสวนเนอื้ หาเอกสารเวบ็ เปนสว นการทำงานหลกั ของหนา เว็บ ประกอบดวย Tag มากมายตามลกั ษณะของขอ มลู ท่ีตอ งการนำเสนอ การปอ นคำสงั่ ในสวนนี้ ไมม ีขอ จำกัด สามารถปอนตดิ กัน หรือ 1 บรรทัดตอ 1 คำส่งั กไ็ ด แตสว นใหญจ ะยึดรูปแบบทีอ่ านงาย คือ การทำยอหนาในชุดคำสง่ั ที่ เกยี่ วของกนั ทั้งน้ีใหปอ นคำส่ังทั้งหมดภายใต Tag <BODY> … </BODY> ในบทเรียนนี้ไดท ำการจดั เนือ้ หาสำหรับการสรา งโฮมเพจดวยภาษา HTML สำหรบั กลุม คำส่งั ไดดงั น้ี 1. กลมุ คำส่ังจดั รูปแบบตวั อักษร 2. กลมุ คำส่งั การจดั รปู แบบเอกสาร 3. กลุม คำสั่งจดั การรปู ภาพ 4. กลุม คำสงั่ การจัดรูปแบบฉากหลงั 5. กลมุ คำสงั่ จดั การตาราง 6. กลมุ คำส่งั เกยี่ วกับการเชือ่ มโยง

ใบความรู หนวยที่ 2 ชอื่ วชิ า การสรางเว็บเพจดวยภาษาเอชทีเอ็มแอล รหัสวิชา 20901-2004 ชือ่ หนว ย ความรเู บ้อื งตนเกี่ยวกับการสรางเวบ็ เพจ สัปดาหท ี่ 2-5 ช่อื เรอ่ื ง หลกั การออกแบบเว็บเพจ / ขนั้ ตอนการพัฒนาเวบ็ เพจ / เร่มิ ตน การเขยี นภาษา HTML / โครงสรางของภาษา HTML / โครงสรางของภาษา XHTML โครงสรา งของภาษา XHTML XHTML ยอมาจากคำวา Extensible Hyper Text Markup Language คือภาษาโปรแกรมคอมพิวเตอร ประเภท Markup Language ที่รวมเอาภาษา HTML และภาษา XML เขาไวดวยกัน และไดกลายเปนมาตรฐานใหม ของ HTML ประโยชนข องมนั คือการสรางเว็บไซตเพื่อการสง ขอมูลทว่ั ๆ ไป และเพมิ่ ขีดความสามารถในการสรางแท็ก (Tag) ใหมๆ ไดอีกดวย โดยที่เรากำหนดไดดวยวาจะใหแท็กเหลานั้นแสดงผลอยางไร ทั้งยังรองรับภาษาอื่น ๆ ที่ใช XML เปน ฐาน เชน SVG, MathML, chemML, SMIL และในภาษา XHTML คำสงั่ ตาง ๆ น้ันก็ยงั เหมือนกบั HTML แต จะมีความเขม งวดในเรอื่ งโครงสรางทางภาษามากกวา และมีการตดั Tag และ Attribute ที่ลา สมยั ออกไป เนื่องมาจากขอเสียของ HTML ที่เมื่อแสดงผลผานบราวเซอรที่ตางกัน เชน Internet Explorer, Firefox, Netscape, Opera, Chrome และอื่น ๆ ก็จะไดผลที่แตกตางกัน ที่เราเสียแรงออกแบบเว็บไซตมาอยางดี อาจดู สวยงามถูกตอ งใน Firefox แตอาจจะมอี าการผิดเพ้ียนไปเม่ือเปดดูดวย Chrome ดังนัน้ จึงไดมีการนำภาษา XHTML มาใชเพื่อแกปญหาดังกลาว โดย XHTML เปนผลจากการนำภาษา HTML 4.0 มาปรับปรุงใหมใหสามารถใชกับแอพ พลเิ คชนั ตา ง ๆ ใหไดมากขึ้น เปนการเปล่ียนกรอบของ HTML ใหเปน XML สมาคมเวลิ ดไวดเว็บ (World Wide Web Consortium หรือ W3C) จึงประกาศรับรองคุณสมบัติ XHTML เพื่อชวยใหการใชงานเว็บไซต ไมไดจำกัดอยูแคเพยี ง บนเครื่องคอมพิวเตอรอีกตอไป แตสามารถขยายการใชงานออกไปไดกวางขึ้น โดยเฉพาะบนอุปกรณไรสายไดดวย ดังน้ัน ตอ ไปไมว า จะแสดงเว็บเพจของเราในบราวเซอรคายใด ก็สามารถแสดงผลไดเ หมือนกนั อยางถกู ตอ ง สรุปก็คือภาษา XHTML เปนภาษาที่ถูกกำหนดโดย W3C ใหเปนภาษามาตรฐานใหมที่จะใชในการสราง เว็บไซตตอ ไปในอนาคต เว็บบราวเซอรของทกุ คา ยจะสามารถรองรบั การใชงานภาษา XHTML ได และในอนาคตปญหา การแสดงผลที่ไมเ หมือนกนั ในเว็บบราวเซอรท ่ีตา งกันก็จะหมดไป ดงั น้นั จงึ เปน เร่อื งดี และสำคญั สำหรบั นกั พัฒนา และ ออกแบบเวบ็ ไซต ทจ่ี ะเริม่ เรียนรู และสรา งเวบ็ ไซตใหไดม าตรฐาน