43 หน วยท 2 หล กการเข ยนเว บเพจด วย HTML ห วข อเร อง 1. ความหมายของภาษาHTML 2. ประว ต ความเป นมาของภาษาHTML 3. องค ประกอบของภาษาHTML 4. ร ปแบบท ด ของภาษาHTML 5. โปรแกรมส าเร จร ปส าหร บเข ยนเว บเพจด วยภาษาHTML 6. โปรแกรมส าเร จร ปส าหร บแสดงข อม ลเอกสารของภาษาHTML 7. ปฏ บ ต การเร มต นการเข ยนเว บเพจด วยHTML จ ดประสงค การเร ยนร 1. บอกความหมายภาษา HTML ได 2. บอกประว ต ความเป นมาของภาษาHTML ได 2. อธ บายองค ประกอบของภาษาHTML 3. ระบ ร ปแบบท ด ของภาษา HTMLได ครบถ วน 4. เล อกโปรแกรมส าเร จร ปส าหร บเข ยนเว บเพจด วยภาษาHTML ได 5. ปฏ บ ต การเร มต นการเข ยนเว บเพจด วยภาษาHTML ได สมรรถนะอาช พประจ าหน วย(ส งท ต องการให เก ดการประย กต ใช ความร ท กษะ ค ณธรรม เข าด วยก น) 1. เข ยนเว บเพจ ตามร ปแบบท ด ของเอกสารHTML ด วยโปรแกรม Notepad 2. ม ล กษณะก จน ส ยท ด ในการปฏ บ ต งาน ม ความร บผ ดชอบ ม ระเบ ยบว น ย ตรงต อเวลา สนใจใฝ ร และม ใจร กในว ชาช พ ม ความค ดร เร มสร างสรรค
44 แบบทดสอบก อนเร ยน หน วยท 2 หล กการเข ยนเว บเพจด วยภาษา HTML ค าช แจง เล อกค าตอบท ถ กเพ ยงข อเด ยวลงในกระดาษค าตอบ 1. ค าว า HTML ย อมาจากค าในข อใด ก. Hyper Text Mark Language ข. Hyper Text Markup Language ค. Hyper Text Marking Language ง. Hyper Text Marketing Language 2. ข อใดเข ยนส วนขยายของไฟล HTML ได ถ กต อง ก. webpage.mht ข. webpage.hml ค. webpage.tml ง. webpage.html 3. ข อใดค อหล กการใช ค าส งแท กได ถ กต อง ก. ค าส งของภาษา HTML จะต องอย ภายในเคร องหมาย < และ> ข. ค าส งของภาษา HTML ม แท ก มาตรฐาน 2 ค าส งแท กค อ html และ body ค. ค าส งของภาษา HTML ม ค ณสมบ ต เพ มเต มของค าส งแท ก เร ยกว า การก าหนดค า ง. ค าส งของภาษา HTML ท ก าหนดค าส าค ญส าหร บการค นหา ค อ <body> 4. เอกสาร HTML ประกอบด วยส วนประกอบสองส วนค อข อใด ก. head ก บ html ข. head ก บ title ค. html ก บ body ง. head ก บ body 5. ค าส งแท กท ใช ก าหนด การท าคล งบ ญช เว บ ส าหร บผ ให บร การส บค นเว บ (Search Engine) ก. title ข. head ค. meta ง. body 6. ข อใดค อค ณสมบ ต ของข อความท ใช ก าหนดในค าส งแท ก <Title> ก. ข อความต องไม เก น 64 ต วอ กษร ข. อ กษรท ใช ต องเป นอ กษรภาษาอ งกฤษเท าน น ค. สามารถบรรจ ภาพเคล อนไหว ภาพสามม ต ได ง. สามารถก าหนดขนาดต วอ กษรได
45 7. ข อใดค อค ณสมบ ต ของโปรแกรม Edit plus ส าหร บเข ยนเว บเพจ ก. เป นโปรแกรมท ต ดต องพร อมก บระบบปฏ บ ต การว นโดว ข. โปรแกรมท สามารถใช งานง ายและม การท างานไม ซ าซ อน ค. เป นโปรแกรมท ม ความสามารถให แสดงภาพเคล อนไหว ภาพสามม ต ง. สามารถรองร บการเข ยนโปรแกรมต าง ๆ ได แก JAVA, PHP, Perl, HTML 8. โปรแกรมเว บเบราว เซอร ท น ยมใช ก นรองจากโปรแกรม Internet Explorer ค อข อใด ก. โปรแกรมเว บเบราว เซอร Avant Explorer ข. โปรแกรมเว บเบราว เซอร Windows Explorer ค. โปรแกรมเว บเบราว เซอร Mozilla Firefox ง. โปรแกรม Safari Web Browser 9. ข อใดกล าวถ งข นตอนการบ นท กไฟล ภาษา HTML ด วยโปรแกรม Notepad ก. การก าหนดช อไฟล ท ม สก ลเป น.html และต องบ นท กลงในช อง File name ข. เล อก เมน file> new การก าหนดช อไฟล ท ม สก ลเป น.html และบ นท กลงในช อง Filename ค. เล อก เมน file> open การก าหนดช อไฟล ท ม สก ลเป น.html และบ นท กลงในช อง Filename ง. เล อก เมน file> save as การก าหนดช อไฟล ท ม สก ลเป น.html และบ นท กลงในช อง Filename 10. ข อใดกล าวถ งข นตอนการเป ดไฟล เอกสารHTMLได ถ กต อง ก. เล อก เมน file> open >browse>lookin ไฟล ท ม สก ลเป น.html คล กป ม new ข. เล อก เมน file> new การก าหนดช อไฟล ท ม สก ลเป น. และเป ดช อง Filename คล กป ม Open ค. เล อก เมน file> open> browse> ช อง Look in> ไฟล ท ม สก ลเป น.>คล กป ม Open ง. เล อก เมน file> open> browse> ไฟล ท ม สก ลเป น. ช อง Filename คล กป ม Open
46 หน วยท 2 หล กการเข ยนเว บเพจด วยHTML HTML เป นภาษาเฉพาะของคอมพ วเตอร ร ปแบบหน ง ส าหร บสร างเอกสารเว บเพจ ประส ทธ ภาพของภาษาHTM การน าเสนอข อม ลให ถ กต องสวยงามน าสนใจ ตามหล กการ ม ร ปแบบท ด ตามองค ประกอบโครงสร างพ นฐานของภาษา ม แท กท เป นค าส งใช ในการก าหนดร ปแบบของ ข อความเอกสาร โปรแกรมส าเร จร ปส าหร บเข ยนเว บเพจแสดงเอกสารHTML และน าเสนอข อม ล ข าวสารผ านโปรแกรมเว บเบราว เซอร 1. ค าศ พท ท เก ยวข อง 1.1 ทบทวนค าศ พท หน วยการเร ยนท ผ านมา ได แก Tag, Web browser,http 1.2 ค าศ พท ใหม 1.2.1 แอททร บ วท (Attribute) ค อ ส วนขยายของค าส งหร อการก าหนดค ณสมบ ต เฉพาะค าส ง 1.2.2 W3C ย อมาจาก World Wide Web Consortium องค กรระหว างประเทศ ท าหน าท จ ดระบบมาตรฐานท ใช งานบนเว ลด ไวด เว บ (ย อว า WWW หร อ W3) โดยม จ ดม งหมาย ท จะ เป นแกนน าทางด านพ ฒนาโพรโทคอล และว ธ การใช งานส าหร บเว ลด ไวด เว บท งหมด 1.2.3 เอเลเมนต (Element) ค อ องค ประกอบของภาษา HTML 1.2.4 เท กซ ไฟล หร อ โปรแกรมเท กซ อ ด เตอร (Text Editor) ค อโปรแกรมท ใช ส าหร บ สร างและแก ไขข อความในการสร างเว บเพจด วยภาษา HTML น นต องม เคร องม อท ใช ในการเข ยน และ แก ไขต วอ กษรซ งเป นค าส งต าง ๆ 1.2.5 แอททร บ วท (Attibute) ค อ ค ณสมบ ต ท สามารถก าหนดเพ มเต มเพ อเพ ม ประส ทธ ภาพการท างานให ก บแท กต างๆ ของภาษา HTML 1.2.6 ค าท ก าหนด (Value) ค อ ค าท ก าหนดในแอททร บ วท 1.2.7 บ คมาร ค (Bookmark) ค อการเก บท อย เว บไซต ไว เข าชมภายหล งโดยไม ต อง พ มพ ช อเว บไซต อ ก 2. ความหมายและประว ต ความเป นมาของภาษาHTML 2.1 ความหมายของภาษาHTML HTML เป นภาษาคอมพ วเตอร โดยม การสร างเอกสาร (Hyper Text Document : ข อความในเอกสารท เช องโยงถ งข อม ลต าง ๆ) เป นภาษาส าหร บก าหนดร ปแบบของการแสดงข อความ ท ม โครงสร างการเข ยนโดยอาศ ยต วก าก บ เร ยกว าแท ก (ควบค มการแสดงผลข อความ, ร ปภาพ แสดง ภาพเคล อนไหว ภาพสามม ต หร อว ตถ อ น ๆ ผ านโปรแกรมเว บเบราว เซอร ซ งแต ละแท กอาจจะม ส วน ขยายท เร ยกว า แอททร บ วท ส าหร บระบ ค ณล กษณะ หร อควบค มการแสดงผลของเว บเพจ และ สามารถเช อมโยงการแสดงข อความได ท งไฟล เอกสารเด ยวก นและไฟล เอกสารอ น ๆ ในระบบ เคร อข ายอ นเทอร เน ต
47 โครงสร างการเข ยนโดยอาศ ย ต วก าก บแท ก (Tag) ภาพท 2.1 แสดงการท างานของภาษาHTML แสดงภาพและข อความผ าน โปรแกรมเว บเบราว เซอร 2.2 ประว ต ความเป นมาของภาษาHTML ภาษาHTML ม ต นแบบมาจากภาษาเอสจ เอ มแอล (SGML ย อมาจาก Standard Generalized Markup Language) ซ งเป นภาษาท ใช ได เฉพาะ ก บประเภท ของคอมพ วเตอร ส งท HTML ร บมาจาก เอสจ เอ มแอล ค อ การประกาศค า และ การก าหนดร ปแบบเอกสาร (DTD: Document Type Definition) ในป พ.ศ.2533 (ค.ศ.1990) นาย ท ม เบอร เนอร ส-ล (Tim Berners- Lee) แห งศ นย ปฏ บ ต การว จ ยทางอน ภาคฟ ส กส ของย โรป (CERN: Conseil Europeen Pour La Recherche Nucleaire) ซ งต งอย ท กร งเจน วา สว ตเซอร แลนด ได ก าหนดไว ว า เพ อสร างส อท น กว ทยาศาสตร สามารถจะเผยแพร ผลงาน และใช อ างอ ง ได ตลอด 24 ช วโมง และสร าง ภาษาคอมพ วเตอร ท รองร บภาษาท องถ น ท ไม ข นก บระบบของเคร องคอมพ วเตอร (Platform) หร อ ระบบเคร อข ายใด ๆ จากน นได แพร ขยายออกไประบบน จ งได ต งช อท เป นท ร จ กก นค อ เว ลด ไวด เว บ จนถ งป จจ บ น พ.ศ.2533 (ค.ศ. 1991) อ นเทอร เน ตได เก ดและเต บโตข น พร อมก บภาษาคอมพ วเตอร และโพรโทคอล จ านวนมากเพ อรองร บก บ การเต บโตอย างรวดเร วของอ นเทอร เน ต หน งใน ภาษาคอมพ วเตอร และโปรโตคอลน นค อ ภาษาHTMLและ ท งน ถ งแม ว าเว ลด ไวด เว บจะเป นเพ ยงส วน หน งของอ นเทอร เน ต แต ได ร บความน ยมอย างส งและรวดเร ว โพรโทคอลHttp ซ งเป นส วนย อยของ โพรโทคอล TCP/IP จ งได ร บการพ ฒนาเพ อสน บสน นภาษาHTML ซ งใช ในการจ ดเก บเอกสารบน เว ลด ไวด เว บ ได ร บการพ ฒนาและถ กน าไปใช อย างแพร หลาย จ งท าให เก ดมาตรฐานในก าหนด ร ปแบบเวอร ช นต างๆ ด งต อไปน 2.2.1 HTML 1.0 เก ดข นในป พ.ศ.2536 (ค.ศ.1993) นาย ท ม เบอร เนอร ส-ล (Tim Berners-Lee) และ นายเดป แรคเก ต (Dave Raggett) ได ก าหนดให เอกสารภาษา HTMLท พ ฒนาข นต องไม ท าให เอกสารท สร างข นน นอ านไม ได Any standard must not make exiting documents (As Far As Possible)
48 2.2.2 HTML 2.0 เก ดข นในป พ.ศ.2538 (ค.ศ.1995)พ ฒนาโดย IETF (International Engineering Task ForceX) ซ งม งหว งให สามารถเป ดแสดงผลก บเว บเบราว เซอร ท ใช งานท วไปได ได ร บการยอมร บเป นมาตรฐานท สมบ รณ แต อย างไรก ด บร ษ ท Netscape และบร ษ ท Microsoft ต างก เพ มค าส งใหม ๆ ลงในโปรแกรมของตนเอง เพ อให ผ ให ออกแบบเพจสามารถใช ฟ งก ช นอ น นอกเหน อไปจาก HTML 2.0 2.2.3 HTML 3.0 เก ดข นในป พ.ศ 2538 (ค.ศ 1995) ได พ ฒนาภาษา HTML ให ม ความสามารถเพ มข น โดยการเพ มการท างานเก ยวก บตาราง ปร บข อความล อมรอบภาพ และ แสดง ส วนท ม ความซ บซ อนได ด ข น รวมท งช วยให เว บเบราว เซอร ย อนกล บไปด เว บเพจหน าท เคยเข าไปชมมา ก อนแล วได ด กว า HTML 2.0 หร อเร ยกป มเคร องม อน นว า Backward 2.2.4 HTML 3.2 เก ดข นในป พ.ศ 2539 (ค.ศ 1996) ได ม การเพ มองค ประกอบย อย ( Element) และ ค ณล กษณะ (Attribute) ท สามารถท างานร วมก บหลาย ๆ เว บเบราว เซอร 2.2.5 HTML 4.0 เก ดข นในป พ.ศ 2540 (ค.ศ 1997) ความต องการของน กออกแบบ ท เพ มมากข น ท าให องค กร W3C ตกลงประกาศใช โดยม ความสามารถใช ค าส งใหม ๆช วยให ผ ออกแบบเพจ สามารถควบค มร ปแบบเอกสาร การเพ มประส ทธ ภาพในการท างานด วยซ เอสเอส (CSS ย อมาจาก Cascading Style Sheets) การฝ งออบเจคของโปรแกรมเสร มเพ อแสดง ร ปภาพ และเส ยง การสร างฟอร ม ได ด ข นและใช ร วมก บภาษาสคร ปต (Scripting Language ) ค อ การเข ยน ค าส งส นๆ ท เร ยกว า สคร ปต (Script) แบบต าง ๆ เพ อให เว บเพจสามารถโต ตอบก บ ผ ใช งานได มาก ข น โดยสคร ปต ท เข ยนข นน น ต องน าไปแทรกในไว ภาษา HTML แต ท งน เว บเบราว เซอร น นจะต อง สน บสน นฟ งก ช นของ HTML 4.0 ด วยความสามารถในการจ ดการก บ Object Model โดย HTML 4.0 ถ กแบ งออกเป น 3 ประเภทได แก 1) แบบเคร งคร ด (Strict HTML 4.0) เป นเอกสาร Hypertext ท เข ยนด วย ภาษา HTML 4.0 ตามมาตรฐานอย างเคร งคร ด แท กใดท คณะกรรมการช ดน น ยามว า ล าสม ย (Deprecate) หร อ ให เล กใช (Obsolete) ก จะไม ใช ค าส งน นในการเข ยนเอกสาร ซ งในความเป นจร ง ในขณะน ย งคงไม ม เว บเบราว เซอร ใด สน บสน นภาษา HTML 4.0 อย างเคร งคร ด แต คาดว าใน อนาคต อ นใกล น าจะม ความเป นไปได 2) แบบค อยเป นไป (Transitional/ Loose HTML 4.0) เป นเอกสารท สร าง ด วยภาษา HTML 4.0 โดยใช ร วมก บค าส งใน HTML เวอร ช น 3.2 เพ อให เอกสารท สร างข นม ร ปแบบ และใช งานได ตามจร ง แม ว าจะใช ก บเว บเบราว เซอร ระบบเคร อข าย และประเภท คอมพ วเตอร ท หลากหลายก ตาม และแน นอนว าเอกสารท สร างข นจะถ กจ ดให อย ในเป นประเภทน 3) แบบเฟรมเซ ท (Frameset HTML 4.0) เป นเอกสารท รวมเอาประเภท Transitional เข าก บค าส งแท ก ประเภทเฟรม ได แก Frame, Frameset, Noframes และ Iframe ซ งเป นแท ก ใหม เพ งจะม ในเวอร ช น 4.0 น 2.2.6 HTML 4.01 เก ดข นในป พ.ศ. 2540 (ค.ศ.1997) ได พ ฒนาปร บปร งท ผ ดพลาด ให สมบ รณ ม การท างานประส ทธ ภาพส งมากข น ในป จจ บ นทาง W3C ผล กด น ร ปแบบของHTML แบบใหม โดยเปล ยนไป พ ฒนาภาษามาตรฐานใหม ท ช อว า XHTML ย อมาจากค าว า Extensible Hyper Text Markup
49 Language มาใช ในการสร างเว บเพจ เพ อขยายการใช เว บเพจไปส อ ปกรณ ต าง ๆ ได เพ มมาข น ซ ง เป นล กษณะของโครงสร าง XML (extensible Markup Language) ท ม หล กเกณฑ ในการก าหนด โครงสร างท มาตรฐานด กว า มาใช ทดแทน HTML ร น 4.01 ท ใช ก นอย ในป จจ บ น 2.2.7 HTML 5.0 เป นมาตรฐานของภาษาHTML ท อย ในระหว างการพ ฒนาภาษา มาร กอ ป ส าหร บ ร นต อไป ได ออกเผยแพร การใช งานเม อว นท 22 มกราคม พ.ศ.2551 โดยภาษา HTML 5.0 ม ร ปแบบสองแบบท ร วมก นค อ แบบด งเด ม และแบบท สองค อ XHTML ท ใช ในการจ ด โครงสร างและการแสดงผลของเน อหาส าหร บเว ลด ไวด เว บ มาตรฐานใหม จะม ค ณล กษณะเด นท ส าค ญ ได แก 1) การใช งานว ด โอ 2) การแสดงต าแหน งทางภ ม ศาสตร 3) การเก บไฟล ในล กษณะออฟไลน 4) การแสดงกราฟ กส 5) ชน ดของการป อนข อม ล แบบใหม เช น search, number, range, color, tel, url, email, date, month, week, time, datetime, datetime-local โดยค ณสมบ ต เด นหลายอย างไม จ าเป นต องต ดต งซอฟต แวร เพ ม เช น เก ยรส แฟลช หร อ ซ ลเวอร ไลต เหม อนท ผ านมาในการใช งาน HTML 4.0 HTML 5.0 ได ม การแนะน า องค ประกอบของ HTML ใหม หลายต วเพ อตอบสนองการ ใช งานของเว บไซต ร นใหม โดยส วนหน งเป นซ แมนต ก ค อ ว ธ การท จะท าให คอมพ วเตอร สามารถ เข าถ งเว บไซต ท ส มพ นธ ก นได โดยอ ตโนม ต และย งสามารถด งข อม ลท เก ยวข องก นออกมาจาก ฐานข อม ลแบบสเปรดช ต (Spreadsheet) หร อ ไฟล ร ปภาพได ด วย ในขณะท ภาษา HTML ร นก อน เพ ยงแสดงข อม ลผ านทางเว บเบราว เซอร เท าน น คอมพ วเตอร จะไม สามารถร ว าข อม ลเหล าน น ค อ อะไรและม ความส มพ นธ ก นอย างไร ผ ใช จะต องเป นผ ต ดส นใจเล อกว าจะเข าไปท เว บไซต ใด จ งจะได ข อม ลท ต องการโดยอาศ ยการคล กไปตามการเช อมโยงต างๆ (http://ninjayoru.exteen.com/ 20090813/semantic-web, 2554) และองค ประกอบบางต วท ตกร นถ กทดแทนด วยการท างานด วย ค าส งซ เอสเอส 2.3 ความส าค ญของHTML 2.3.1 พ ฒนาข นเพ อใช งานก บเว บเพจโดยเฉพาะ และใช รห สข อม ลแบบธรรมดา ท าให ไฟล เอกสารHTML สามารถใช ได ก บท กโปรแกรม ในขณะท ไฟล ของโปรแกรมอ น จะใช งานได เฉพาะ ก บโปรแกรมของต วเอง เช น ไฟล ข อม ลของเว ร ดโปรเซสเซอร (Word Precesser) ไม สามารถเร ยกใช จากโปรแกรมเท กซ อ ด เตอร (Text Editor) ท วไป 2.3.2 เป นภาษามาตรฐานเป ด ท กคนสามารถน าไปใช งานได โดยไม จ าเป นต องเส ย ค าใช จ ายใด ๆ ไม ได เป นของใครคนใดคนหน ง แม แต องค กรท ก าหนดมาตรฐานของภาษาน W3C ก เป นองค กรท ต งข นโดยไม หว งผลก าไรใดๆ 2.3.3 เป นไฟล ท สามารถอ านเข าใจน ค อจ ดประสงค ข อหน งในการพ ฒนาข นมา ซ ง แตกต างจากโปรแกรมภาษาอ น ๆ ค าส งของ HTML น นเข าใจง ายเหม อนเอกสารท วไป
50 2.3.4 สามารถใช งานระบบไฮเปอร เท ก ได ค ณสมบ ต ข อน อาจจะเป นข อท ส าค ญท ส ด การม จ ดล งค อย ภายในเว บเพจท าให สามารถเช อมโยงเอกสารไปย งแหล งข อม ลต างๆได ท วโลก เพ ยง แค คล กเมาส ท จ ดล งค เท าน น 1.3.5 สามารถท างานก บม ลต ม เด ย เช น ข อความ ร ปภาพ เส ยง หร อ ภาพเคล อนไหว เป นต น ค ณสมบ ต ข อน ท าให เว บแตกต างไปจากการส อสารประเภทอ น เช น หน งส อพ มพ หร อแม แต อ เมล 3. ร ปแบบท ด ของภาษาHTML 3.1 ร ปแบบไฟล เอกสารHTML ร ปแบบไฟล โดยท วไปว าไฟล เว บเพจ จะม ส วนขยายของไฟล เป น.html หร อ *.htm เช น sample.html ด งต วอย างภาพท 2.2 โดยท วไป ไฟล ภาษาHTMLจะเป นไฟล ชน ดเท กซ ไฟล (Text File) ด งต วอย างท ภาพท 2.3 เป นข อม ลในไฟล ท สามารถเป ดอ านได ด วยโปรแกรมเท กอ ด เตอร ท วไปของระบบปฏ บ ต การ ภาพท 2.2 ส วนขยายของไฟล เป น.html หร อ.htm ภาพท 2.3 ต วอย างไฟล ชน ดเท กซ ไฟล
51 3.2 องค ประกอบของภาษา HTML(HTML Element) เอกสารประกอบไปด วยด งน 3.2.1 เท กซ (Text) หมายถ ง ข อความท ว ๆ ไปท อย ระหว างค าส งแท ก ส วนของ เอกสารท ต องการแสดงผลออกทางเว บเบราว เซอร 3.2.2 แท ก (Tag) หมายถ ง ค าส งท ใช ในการก าหนดร ปแบบของแท กโดยค าส ง ของภาษา HTML จะต องอย ภายในเคร องหมาย <และ> โดยแท กเร มต นและแท กจบท าย จะใช ต วอ กษรพ มพ เล กหร ออ กษรพ มพ ใหญ ม ผลเหม อนก น 3.3 หล กการเข ยนเอกสารHTML (HTML Document) 3.3.1 ค าส งแท ก โดยช อค าส งจะต องอย ภายในเคร องหมาย < > เท าน น 3.3.2 ช อค าส ง ใช อ กษรภาษาอ งกฤษ ต วพ มพ เล ก ต วพ มพ ใหญ หร อพ มพ ผสม การย อ หน า เว นบรรท ด หร อช องว าง สามารถกระท าได อ สระ เว บเบราว เซอร จะไม สนใจเก ยวก บระยะเว น บรรท ดหร อย อหน า หร อช องว าง ม ความหมายเด ยวก น เช น <body> หร อ <BODY> หร อ< Body> ส าหร บเอกสารประกอบการเร ยนเล มน จะใช อ กษรภาษาอ งกฤษต วพ มพ เล ก 3.3.3 ค าส งแท กท วไปจะประกอบด วยแท กเป ดและแท กป ด แท กเป ดช อค าส งจะอย ระหว างเคร องหมาย < และ > แท กป ด จะม เคร องหมาย Slash (/) อย หน าช อค าส ง และอย ระหว าง เคร องหมาย < และ > 3.3.4 ระหว างแท กเป ดและแท กป ด ค อข อความท แสดงผลด วยค าส งแท กน น 3.3.5 บางค าส งอาจม เพ ยงแท กเป ด แต ไม ม แท กป ด เช นค าส ง <br> หร อ <p> 3.3.6 บางค าส งแท กจะม ค ณสมบ ต เพ มเต ม ซ งค ณล กษณะเพ มเต มของค าส งแท ก เร ยกว า แอททร บ วท (ค ณสมบ ต ค ณสมบ ต ท สามารถก าหนดเพ มเต ม) โดยแอททร บ วท จะก าหนดท แท กเป ดเท าน น จะการเข ยนแอททร บ วท แล วตามด วยเคร องหมาย ( = ) และใส ค าท ก าหนด (Value) ค าส งแท กค อ <font> เป นค าส งให แสดงต วอ กษรโดย <font> ค อ แท กเป ด และ </font> ค อแท กป ด <font> ม การก าหนดค ณสมบ ต เฉพาะ color = "green" อก าหนดให แสดงข อความเป น ส เข ยว ส าหร บข อความท ต องการแสดงอย ระหว าง<font> และ </font> ค อ ว ทยาล ยเกษตรและ เทคโนโลย เช ยงใหม ภาพท 2.4 ต วอย าง ค าส งแท กท ม การก าหนดแอททร บ วท
52 3.4 ร ปแบบท ด ของภาษาHTML ร ปแบบเอกสารHTMLท ด ต องม การพ มพ ช ดค าส งโดยสามารถพ มพ ได ท งต วพ มพ เล ก ต วพ มพ ใหญ หร อพ มพ ผสม การย อหน า เว นบรรท ด หร อช องว าง สามารถกระท าได ตามอ สระของ เว บเบราว เซอร จะไม สนใจเก ยวก บระยะเว นบรรท ดหร อย อหน า หร อช องว าง โดยม รายละเอ ยดด งน <html> <head> <title>ข อความแสดงท แถบห วเร อง (Title bar) </title> </head> <body> ข อความหร อค าส งแท ก ต าง ๆ </body> </html> ภาพท 2.5 ร ปแบบท ด ของภาษาHTML 3.4.1 ส วนท ก าหนดให เว บเบราว เซอร ทราบว าเป นเอกสารชน ดHTML ซ งจะม แท ก <html> ก าก บอย ท จ ดเร มต น และแท ก </html> จ ดส นส ดของเอกสารHTML 3.4.2 ส วนห วเร องเอกสารเว บเพจ (Head Section) เป นส วนท ใช อธ บายเก ยวก บ ข อม ลเฉพาะของหน าเว บน นๆ เช น ช อเร องของหน าเว บ (Title), ช อผ จ ดท าเว บ (Author), ค ย เว ร ด ส าหร บการค นหา (Keyword) โดยม ค าส งแท กส าค ญ ค อ 1) ค าส งแท ก <head> เป นค าส งท ใช ก าหนดข อความส วนท เป นห วเร อง เอกสาร เพ อให ทราบว าเอกสารเว บเพจน นเก ยวก บอะไร โดยม ค าส งแท กเป ดค อ <head> และค าส ง แท กป ดค อ</head> ภายใน จะประกอบด วย ค าส งแท ก < title> และค าส งแท ก <meta> ม ร ปแบบด งต อไปน ร ปแบบค าส ง <head> <title > ข อความช อเร อง <title > <meta> </head> 2) ค าส งแท ก title เป นค าส งแท กท ใช แสดงช อเอกสารเว บเพจหร อ รายละเอ ยดท เก ยวก บเอกสารเว บเพจในหน าน น โดยม ค าส งแท กเป ดค อ <title> และค าส งแท กป ด ค อ </title> โดยม ร ปแบบการพ มพ แท กค าส งม ด งน ร ปแบบค าส ง <title > ข อความช อเร อง </title >
53 จากร ปแบบค าส งแท ก <title> การพ มพ ข อความช อเร องม เง อนไขการ พ มพ ด งต อไปน (1) ข อความท ใช เป นไม ควรพ มพ เก น 64 ต วอ กษร ไม ต องใช ล กษณะพ เศษ เช น เอ ยง, ต วหนา,ต วบางหร อส และควรใช เฉพาะภาษาอ งกฤษท ม ความหมายครอบคล มถ งเน อหา ของเอกสารเว บ หร อม ล กษณะเป นค าส าค ญ (Keyword) ในการค นหา แต ป จจ บ นสามารถใช อ กษร ภาษาไทยในการพ มพ ไตเต ลแต ต องม ความหมายตรงก บเว จเพจท จ ดท าด วย (2) การแสดงผลจากค าส งแท ก<title> บนเว บเบราว เซอร จะปรากฏ ข อความท ก าก บด วยค าส งแท ก title ในส วนบนส ดของกรอบหน าต าง ใน Title Bar ของว นโดว 3) ค าส งแท ก <meta> ไม ปรากฏผลบนเว บเบราว เซอร แต จะเป นส วนส าค ญ ในการท าคล งบ ญช เว บ ส าหร บผ ให บร การส บค นเว บ (Search Engine) และค าอ นๆ ของการแปล ความหมาย ซ งม ค ณสมบ ต เฉพาะ ซ งอาจเปร ยบเท ยบได ว า เว บเพจต างๆ น นเปร ยบเสม อนห องสม ด โลกขนาดใหญ ด วยเหต ผลน เองจ งได ม แนวความค ดในการน าค าส งแท ก <meta>ไปประย กต ใช ก บ เว บเพจต าง ๆ ได (1) ค าส งค ณสมบ ต เฉพาะส าหร บใช งาน 4 ค าส ง (มาล ย ม วงเทศและ คณะ, 2549: 15) ด งน ก. http-equiv เป นค าส งท ใช ส าหร บก าหนดข อความท จะน าไปสร าง การก าหนดส วนห วเร องเอกสารเว บเพจ ข. name ใช ส าหร บให ข อม ลเพ มเต มท เป นค ณสมบ ต ของเอกสาร เม อ ม การค นหาค าในห วข อท ต องการ โดยข อม ลท น ามาใช ก าหนดค ณสมบ ต ของเอกสารน น จะต องม ความเก ยวข องก บเน อเร องในเอกสาร ค. content ใช ส าหร บก าหนดค าค ณสมบ ต ของเอกสารให ก บ name เป นการก าหนดค ณสมบ ต ของเอกสารท ต องการส งให ก บ Server หร อเป นการก าหนดค าใช ช อเฉพาะ ง. scheme ใช ส าหร บก าหนดร ปแบบของข อม ลเพ อใช ความหมายของ ข อม ลท อย ในแอทร บ วต ว าข อม ลน อ านอย างไร (2) การประย กต ใช ค าส งแท ก <meta > สามารถน าไปใช มาประย กต ใช ก บเว บเพจต าง ๆ ได แก ก. ใช ก าหนดชน ดต วอ กษร เช น การระบ ช ดต วอ กษรท ใช ก บ ภาษาไทย ให Browser ใช ช ดต วอ กษร utf-8 ส าหร บเป ดเว บเพจ ต วอย าง <meta http-equiv ="content-type" content="text/html;charset=utf-8"> ข. บอกรายละเอ ยดของเว บเพจส าหร บ Search Engine บอกค าท เก ยวข องก บเว บเพจหน าน เป นค าท ใช ในการค นหาหน าน ค นด วยส ญล กษณ (, ) จะบอกรายละเอ ยด ของเว บเพจแบบคร าว ๆ
54 ต วอย าง <meta name ="keywords" content ="ออกแบบเว บไซต, เว บด ไซต "> <meta name ="description" content ="ร บออกแบบเว บไซต ค ณภาพด "> การสร างเว บเพจหน าน ค. ส าหร บบอกช อผ เข ยนหน าน และผ เป นเจ าของล ขส ทธ ต วอย าง <meta name ="author" content ="อภ ว นท จ กรค า ">ผ เข ยนหน าน <meta name ="copyright" content ="ร านหน งส ออ กค ว">ผ เป นเจ าของล ขส ทธ ง. ส าหร บบอกเคร องม อท ใช สร างเว บเพจน เช น ได ใส โปรแกรมท ใช ใน ต วอย าง <meta name ="generator" content ="Dreamweaver"> จ. ส าหร บส งให refresh หน าเว บเพจท แสดงผลอย refresh อ ตโนม ต ต วอย าง <meta http-equiv="refresh" content ="5; url=index.html "> - เลข 5 ค อ ใส เลข 5 ค อให refresh ท ก 5 ว นาท - index.html ค อ หน าท แสดงผลอย (หน าท ต องการให refresh) ฉ. ส าหร บส งไม ให Search engine แสดงผลหน าน (ก) all ค อ การก าหนดค าให สามารถจ ดท าดรรชน ค าในเน อหา ได ท กหน าท เช อมโยงถ ง เพ อน าไปจ ดเก บบ นท กลงฐานข อม ล Search Engine (ข) Noindex ค อ การก าหนดไม ให จ ดท าดรรชน ค าในเน อหา ส าหร บหน าท ก าหนดไว แต ให ตามส วนท เช อมโยงได และน าเน อหาไปจ ดท าดรรชน ได ไปลงฐานข อม ล Search Engine (ค) nofollow ค อ การก าหนดให จ ดท าดรรชน ค าในเน อหา ใน หน าท ปรากฏได แต ไม ให ตามส วนท เช อมโยงเพ อจ ดท าดรรชน ค าในเน อหา น าไปลงฐานข อม ล "NONE" ค อ การห ามไม ให spider จ ดเก บเว บเพจท ปรากฏไปท าดรรชน เน อหา และห ามตามส วน เช อมโยงเพ อท าดรรชน ในเน อหาด วยเช นก น ต วอย าง <meta name ="robots" content ="noindex,nofollow"> ต วอย าง ช. ส าหร บส งให Search engine กล บมาท เว บไซต <meta name ="revisit-after" content ="7 Days"> ซ. ส าหร บบอกว นท เวลาว นหมดอาย ให ลบออกจากฐานข อม ล ต วอย าง <meta name ="expires" content ="Never" >
55 ต วอย าง ต วอย าง ต วอย าง ต วอย าง ฌ. บอกระด บการเผยแพร ของเว บไซต <meta name ="distribution" content ="Global"> ญ. ใส อ เมล ส าหร บให คนต ดต อกล บ <meta name ="contact_addr" content ="apichak@gmail.com"> ฎ. ระบ กล มคนเข าด <meta name ="rating" content ="General"> ฏ. บอกภาษาท ใช ในเว บ <meta name ="language" content ="en-th"> 3.4.3 ส วนเน อหาเอกสารเว บ (Body Section) เป นส วนเน อหาหล กของหน าเว บ ซ ง การแสดงผลจะต องใช ค าส งแท ก จ านวนมาก ข นอย ก บล กษณะของข อม ล เช น ข อความ, ร ปภาพ, เส ยง, ว ด โอ หร อไฟล ต าง ๆ ส วนเน อหาเอกสารเว บ เป นส วนการท างานหล กของหน าเว บ ประกอบด วย ค าส งแท กมากมายตามล กษณะของข อม ล ท ต องการน าเสนอ การป อนค าส งในส วนน ไม ม ข อจ าก ด สามารถป อนต ดก น หร อ 1 บรรท ดต อ 1 ค าส งก ได แต ม กจะย ดร ปแบบท อ านง าย ค อ การท าย อหน า ในช ดค าส งท เก ยวข องก น ท งน ให ป อนค าส งท งหมดภายใต ค าส งแท ก <body>... </body> และโดย ม ค าส งแท กเป ดค อ <body> และค าส งแท กป ดค อ </body> ร ปแบบค าส ง <body ล กษณะประจ า = ค าท ก าหนด> ค าส งแท กต าง ๆ </body> ส าหร บค าส งแท ก<body> จะประกอบด วยค ณสมบ ต เฉพาะท ใช ส าหร บการก าหนด ร ปแบบต าง ๆ ของเน อหาภายในเอกสารด งต วอย างเช น <html> <head><title>การเข ยนเว บเพจด วยภาษา HTML</title></head> <body text = " pink" > </table><tr> <td><img src = "logoapiwan.jpg" width="1000" height="150" border="1"></br> </td> <font size = " 5" >การจ ดการเร ยนร คร อภ ว นท </font></br> </tr> </table> </body> เม อแสดงผ านโปรแกรมเว บเบราว เซอร ด งภาพท 2.6
56 ภาพท 2.6 ผลการแสดงบนเว บเบราว เซอร 4. โปรแกรมส าเร จร ปส าหร บเข ยนเว บเพจด วยภาษา HTML เคร องม อท ใช ส าหร บการเข ยนภาษา HTML จะต องใช โปรแกรมเท กอ ด เตอร ซ งเป น โปรแกรมส าหร บแก ไขไฟล ข อม ลต างๆ โปรแกรมท น ยมน ามาใช ในการเข ยนเว บเพจ ได แก 4.1 โปรแกรม Notepad โปรแกรม Notepad เป นโปรแกรมท ต ดต งมาก บโปรแกรมระบบ ปฏ บ ต การว นโดว โดยจ ดเป นโปรแกรม เท กอ ด เตอร ซ งสามารถน ามาใช สร างไฟล หร อเข ยนภาษาHTML เพราะเป น โปรแกรมท สามารถใช งานง ายและม การท างานไม ซ าซ อน ล กษณะของโปรแกรมม ด งน ภาพท 2.7 ต วอย างโปรแกรม Notepad 4.2 โปรแกรม Edit Plus โปรแกรม EditPlus เป นโปรแกรมท ช วยเพ มความสะดวกให แก น กเข ยนโปรแกรม มากกว าโปรแกรม Notepad ม ข อด สามารถรองร บการเข ยนโปรแกรมต าง ๆ ได แก ภาษาจาวา, ภาษาพ เอชพ, ภาษาเพ ร ล, ภาษา HTML เป นต น โดยโปรแกรมน จะม ความเข าใจในต วภาษาแต ละ ต ว และม การใช ส ส นท แตกต างก นเพ อแยกค าส าค ญหร อค าเฉพาะในแต ละภาษาด งภาพท 2.8 แต โปรแกรม EditPlus ไม สะดวกในการใช งานเท าก บโปรแกรมโน ตแพด ค อ ไม ใช โปรแกรมท ต ดมาก บ
57 ระบบปฏ บ ต การว นโดว เป นโปรแกรมท ม ล ขส ทธ ถ าจะน ามาใช จร งจะต องซ อต วโปรแกรมฉบ บ สมบ รณ พร อมส ทธ การใช งานซอฟต แวร (License) มาใช หร อดาวน โหลดจากเว บไซต ท บร การใช ดาวน โหลด ซ งเม อดาวโหลดแล วสามารถน ามาต ดต งใช งานได ท นท แต สามารใช ได เพ ยง 30 ว นเท าน น เน องจากเป นโปรแกรมช ดทดลอง (Evaluation Version) ภาพท 2.8 ต วอย างโปรแกรม EditPlus 4.3 โปรแกรม Microsoft Word โปรแกรม Microsoft Word เป นโปรแกรมท ต ดต งมาก บโปรแกรม Microsoft Office ข นอย ว าแต ละผ ใช จะต ดต งโปรแกรมMicrosoft Office ร นอะไร ส าหร บต วอย างด งร ปท 2.9 ค อ ต วอย าง โปรแกรม Microsoft Word 2010 โปรแกรมน เหมะส าหร บการพ มพ เอกสารแต สามารถ น ามาใช ในการเข ยนภาษา HTML ได สะดวกในการใช งาน แต ต องระม ดระว งในการบ นท กไฟล เน องจากโปรแกรมจะบ นท กเป นไฟล ชน ด.docx ต องเปล ยนร ปแบบการบ นท กท กคร งเป นไฟล เอกสาร HTML ร ปท 2.9 โปรแกรม Microsoft word 2010
58 4.4 โปรแกรม WordPad โปรแกรม WordPad เป นโปรแกรมท ต ดต งมาก บโปรแกรมระบบปฏ บ ต การว นโดว และการใช งานเช นเด ยวก บโปรแกรม Notepad แต ต องระม ดระว งในการบ นท กไฟล เน องจาก โปรแกรมจะบ นท กเป นไฟล ชน ด rtf (Rich Text Format) ต องเปล ยนร ปแบบการบ นท กท กคร งใน การบ นท กไฟล ชน ดเอกสาร HTML ภาพท 2.10 โปรแกรม Microsoft WordPad 5. โปรแกรมส าเร จร ปส าหร บแสดงข อม ลเอกสารของภาษาHTML โปรแกรมส าเร จร ปส าหร บแสดงข อม ลเอกสารของภาษาHTML หร อ โปรแกรมเว บ เบราว เซอร ท ใช ในการเป ดด ข อม ลต างๆ บนอ นเทอร เน ต ถ อได ว าเป นเอกสารข อม ลท ถ กเข ยนด วย ภาษาHTML ค ณสมบ ต ของโปรแกรมเว บเบราว เซอร ท าหน าท ต ดต อก บเคร องบร การเว บ เพ อด เอกสารในเว ลด ไวด เว บ แล วน าข อม ลน นมาแสดงบนจอภาพ ซ งสามารถท จะอ านข อม ลท เป นภาพ 2 ม ต และ 3 ม ต แสดงภาพเคล อนไหว ข อม ลเส ยงและว ด โอโปรแกรมเว บเบราว เซอร ม ด งต อไปน 5.1 โปรแกรม Netscape Navigator โปแกรม Netscape Navigator เป นโปรแกรมเว บเบราว เซอร ท ได ร บความน ยมมา อย างต อเน อง โดยม Marc Andressen ก บ James H.Clark ร วมก นก อต งบร ษ ท Mosaic Communication Corporationซ งต อมาเปล ยนช อเป น NetscapeCommunications Corporation เป นโปรแกรมยอดน ยมท เป นค แข งส าค ญของ บร ษ ทไมโครซอฟต ม การพ ฒนาให สามารถร บร ค าส งแท กใหม ๆท ม อย ในภาษาHTMLร นใหม และสน บสน นภาษาจาวา และจาวาสคร ปต ช วยในการเข าส เว บไซต ต าง ๆ ซ งม จ ดเด น ค อสน บสน นเอกสารเว บเพจแบบเปล ยนแปลงข อม ล ง าย ต อการใช งาน และม ระบบความปลอดภ ยของข อม ลท ด ข น
59 ภาพท 2.11 ส ญล กษณ Netscape Navigator ภาพท 2.12 ต วอย าง โปรแกรม Netscape Navigator 5.2 โปรแกรม Internet Explorer โปรแกรม Internet Explorer ผล ตโดยบร ษ ทไมโครซอฟท ผ ผล ตโปรแกรม ระบบปฏ บ ต การต าง จ งเก ดจากการซ อล ขส ทธ จากโปรแกรม NCSA Mosaic มาพ ฒนาต อเป น Internet Explorer โดยม ช อย อว า ไออ (IE) ใช งานได ก บระบบปฏ บ ต การไมโครซอฟท ว นโดว (Windows) ท กร น เพ มข ดความสามารถให แสดงภาพเคล อนไหว ภาพสามม ต ได ม การออกค าส ง เอกสารHTML ใหม ๆ ท ใช งานได ก บเว บเบราว เซอร ของตน ส าหร บระบบปฏ บ ต การไมโครซอฟท ว นโดวส และระบบปฏ บ ต การแมค ป จจ บ นโปรแกรม Internet Explorer เป นเว บเบราว เซอร ท อย ในส วนหน งของระบบปฏ บ ต การไมโครซอฟท ว นโดวส ท น ยมใช มากท ส ดต งแต ป พ.ศ. 2542 ภาพท 2.13 ส ญล กษณ ไอคอนโปรแกรม Internet Explorer
60 ภาพท 2.14 ต วอย างโปรแกรม Internet Explorer 8 5.3 โปรแกรม Mozilla Firefox ร จ กในช อไฟร ฟอกซ เป นเว บเบราว เซอร และไคลเอนต ส าหร บโกเฟอร และเอฟท พ ท สามารถใช ได ในหลายระบบปฏ บ ต การ พ ฒนาโดยม ลน ธ มอซ ลลาและ อาสาสม ครอ กหลายร อยคน ป จจ บ นอย ใต การด าเน นงานของบร ษ ทมอซ ลลา จ าก ด และโปรแกรมเว บ เบราว เซอร ท น ยมอ นด บ 2 รองจากโปรแกรม Internet Explorer ภาพท 2.15 ส ญล กษณ ไอคอน Mozila Firefox ท มา: www. Mozila, 2553 ภาพท 2.16 ต วอย างโปรแกรม Mozilla Firefox
61 5.4 โปรแกรม Avant Browser โปรแกรม Avant Browser เป นโปรแกรมเว บเบราว เซอร ท ม ค ณสมบ ต ช วงเวลาการ จ ดเร ยงการส งส ญญาณ (Batch) และฟ งก ช นท งหมดของโปรแกรม Internet Explorer โปรแกรมน เป นเว บเบราว เซอร ท ม ความเร วท ส ด และม การต ดต อระบบการส อสาร ท สามารถใช งานได ง าย สามารถเล นอ นเทอร เน ตได อย างราบร นและม ประส ทธ ภาพมากข น และสามารถอ พเกรดได อย าง สม าเสมอเพ อเพ มความเช อถ อได ของม นให เท ยงตรงอย เสมอและสามารถรองร บของภาษาท วโลก ได มากถ ง 41 ภาษา นอกจากน โปรแกรม Avant Browser ย งม ความสามารถในการกรอง ภาพเคล อนไหว แฟรชแอน เมช น (Flash Animation) เพราะว า ส วนใหญ น ามาใช ส าหร บท าโฆษณา และน าเสนอบนเว บเพจขนาดใหญ มากถ งร อยละ 90 ของหน า โปรแกรมม ค ณสมบ ต เพ อช วยให สามารถประหย ด เวลาในการร บส งส ญญาณ โดยการบล อกไฟล เอกสารแฟรช เหล าน ในการคล กเมาส คร งเด ยวและสามารถท จะท าการบล อก การดาวน โหลด ร ปภาพ, ว ด โอ, เส ยง และ Active X เพ อให สามารถควบค มแบนว ช และเพ มความเร วในการโหลดหน าต างเว บเพจ อ นได เร วข น ๆ ภาพท 2.17 ส ญล กษณ ไอคอน Avant Browser ท มา : www.avant.com, 2553 ภาพท 2.18 ต วอย างโปรแกรม Avant Browser
62 5.5 โปรแกรมโอเปร า (Opera) ค อช อซอฟต แวร ท รวมเว บเบราว เซอร และโปรแกรม ส าหร บใช งานอ นเทอร เน ตอ น ๆ พ ฒนาโดยบร ษ ทโอเปร า ประเทศนอร เวย ในป จจ บ นโอเปร าเป นผ น า ในตลาดเว บเบราว เซอร ส าหร บโทรศ พท ม อถ อ และพ ด เอ(PDA : Personal Digital Assistants) เป น อ ปกรณ ท สามารถพกพาน าต ดต วได นอกจากน ย งถ กน าไปใช ในระบบโทรท ศน ท ม การโต ตอบระหว าง ผ ชม (Interactive Television, itv) ในบางประเทศ เม อไม นานน บร ษ ทโอเปร าได ร วมม อก บ บร ษ ทอะโดบ ซ สเต มส ผ ผล ตซอฟต แวร ด านการสร างสรรค ส อ เพ อรวมโอเปร าก บโปรแกรมในช ด อะ โดบ คร เอท ฟสว ท และเม อ 20 ก นยายน พ.ศ.2548 ทางบร ษ ท โอเปร า จ าก ด (Opera Software ASA) ได เป ดให โอเปร าเบราว เซอร เป นซอฟแวร ท สามารถโหลดใช งานได ฟร และไม ม การเพ มค าบร การใด ๆ ในต วโปรแกรม สามารถใช งานได เต มร ปแบบช ดโอเปร าประกอบไปด วย 5.6.1 โปรแกรมค นด เว บ (Web browser) 5.6.2 โปรแกรมอ เมล (E-mail Client) 5.6.3 โปรแกรมไออาร ซ (IRC Client) 5.6.4 โปรแกรมสม ดท อย (Address Book) 5.6.5 โปรแกรมอ านข าวจากแหล งข อม ลอ น (News Aggregator) 5.6.6 โปรแกรมโอเปร าว จ ท (Opera Widget) ภาพท 2.19 ส ญล กษณ ไอคอน Opera ท มา : www.opera.com, 2553 ภาพท 2.20 ต วอย างโปรแกรม Opera Browser
63 5.6 โปรแกรมซาฟาร (Safari) ค อโปรแกรมเว บเบราว เซอร ท พ ฒนาโดยบร ษ ทแอปเป ล คอมพ วเตอร ส าหร บเคร องแมคอ นทอช โดยมาพร อมก บระบบปฏ บ ต การ Mac OS X ร น 10.3 เป น ต นไป และสต ฟ จอบส ได ประกาศในว นท 11 ม ถ นายน พ.ศ. 2553 เป ดต วซาฟาร ส าหร บว นโดวส 2000 หน าตาของซาฟาร ม ล กษณะส เง นวาว (brush metal) เหม อนก บล กษณะของ ซอฟต แวร เล น เพลง ซาฟาร ร นท สองเร ยกว า Safari RSS ใช ได ก บ Mac OS X ร น 10.4 ข นไป ซาฟาร ใช ต ววาดหน า เว บช อ WebCore ซ งพ ฒนามาจากต ววาดหน าเว บช อ เว บค ต ท พ ฒนาต อมาจาก KHTML ซ งเป น ส วนหน งของโครงการซอฟต แวร เสร KDE ด งร ปภาพท 2.31 ภาพท 2.21 ส ญล กษณ ไอคอน safari ท มา : www.safari.com, 2553 ภาพท 2.22 ต วอย างโปรแกรม Safari Browser 5.7 โปรแกรม Google Chrome ก เก ลโครม (Google Chrome) เร ยกก นส น ๆ ว าโครม ค อโปรแกรมเว บเบราว เซอร แบบโอเพนซอร ซ ท พ ฒนาโดยบร ษ ท ก เก ล โครมม ให ดาวน โหลดเพ อใช งานส าหร บว นโดวส และม ภาษาท ให ใช ได มากกว า 50 ภาษารวมถ งภาษาไทย ความสามารถของโครม ออกแบบมาให ท างานได อย างรวดเร วในท กว ถ ทางเท าท จะเป นไปได หน าต างเบราว เซอร ม ขนาดเหมาะสม สะอาดตา และ เร ยบง าย สามารถปร บการต งค า และเพ มแอปพล เคช น รวมท งธ ม (Theme) ต าง ๆ จาก ท เก บเว บ ของโครมได การลงช อเข าใช จะเป นการน าบ กมาร ค ประว ต การเข าชม และการต งค าอ น ๆ ท งหมดลง ในคอมพ วเตอร ท กเคร องของเรา และย งสามารถลงช อเข าใช บร การต าง ๆ ท งหมดของก เก ล ท ช นชอบ
64 ให โดยอ ตโนม ต ม การปร บปร งอ ตโนม ต ท าให ม นใจได ว าได ร บการแก ไขข อบกพร องด านความปลอดภ ย ล าส ด ( http://www.google.com/intl/th/chrome/browser/features.html, 2554) ภาพท 2.23 ส ญล กษณ ไอคอนก เก ลโครม ท มา: Google.,Inc, 2553 ภาพท 2.24 ต วอย างโปรแกรมก เก ลโครม 6. ปฏ บ ต การเร มต นการเข ยนเว บเพจด วยHTML ส าหร บเอกสารประกอบการเร ยนน การเร มต นปฏ บ ต การเข ยนเว บเพจด วยภาษา HTMLจะ ใช โปรแกรม Notepad ใช เป นโปรแกรมสร างไฟล เอกสาร ส วนโปรแกรมเว บเบราว เซอร ค อ โปรแกรม Internet explorer โดยม ข นตอนในการเข ยน ด งต อไปน 6.1 การเร ยกใช โปรแกรม Notepad 6.1.1 เร มต นด วยการคล กป มเมน Start 6.1.2 คล กเล อก program 6.1.3 คล กเล อก Accessories 6.1.4 คล กเล อก Notepad ซ งม ข นตอนการเร ยกใช โปรแกรม Notepad ด งร ปภาพท 2.23
65 2 3 4 1 ภาพท 2.25 ข นตอนการเร ยกใช โปรแกรม Notepad 6.2 การบ นท กไฟล ภาษา HTML สามารถบ นท กไฟล ข อม ล จากโปรแกรม Notepad ซ งจะท าการบ นท กเป นไฟล เอกสาร HTML ม ข นตอนการบ นท กด งน 6.2.1 คล กท เมน File 6.2.2 เล อกแถบเมน Save หร อ Save As 6.2.3 การก าหนดช อไฟล ท ต องการบ นท กลงในช อง File Name การบ นท กไฟล เอกสารHTML โดยในการก าหนดช อไฟล จะต องก าหนดส วนขยายเป น. html หร อจะบ นท กเป น.htm เช น sample.html ด งร ปท 2.36 6.2.4 ก าหนดท อย ท ต องการเก บไฟล อาท เช น บ นท กไว บนฮาร ดด สก ท อย ในเคร อง คอมพ วเตอร (ไดร ฟ C:, D:, E: ) หร อ ย เอสบ แฟลชไดรฟ ถ าต องการให การเก บแฟ มเป นส ดส วน ไม ให แฟ มข อม ลระจาย ก สามารถด าเน นการบ นท กไว โดยการสร าง โฟว เดอร ไว ในส อบ นท กข อม ลก ได ตามต วอย างน จะบ นท กข อม ลไว ท โฟลเดอร ช อ html_webpage ในฮาร ดด สก ไดร ฟ E: จากน น ก ท าการบ นท กไฟล คล กเล อกป ม Save
66 6.2.1 6.2.2 6.2.3 6.2.4 ภาพท 2.26 การบ นท กไฟล ภาษา HTML 6.3 การเป ดไฟล เอกสารHTML เม อเข ยนไฟล เอกสารHTML และได ท าการบ นท กไฟล เร ยบร อยแล ว การเป ดไฟล เอกสารเพ อน าเสนอโดยการเป ดจากโปรแกรมเว บเบราว เซอร ตามต องการหร อตามท เคร อง คอมพ วเตอร ได ลงโปรแกรมเว บเบราว เซอร ต าง ๆ ไว เช น ต วอย างภาพท 2.25 โปรแกรมเว บ เบราว เซอร ต าง ๆ ท ม อย ในระบบปฏ บ ต การว นโดว ของเคร องคอมพ วเตอร จ านวน 7 โปรแกรม ส ญล กษณ ไอคอน Internet Explorer ส ญล กษณ ไอคอน Opera ส ญล กษณ ไอคอน Avant Browser ส ญล กษณ ไอคอน Google Chrome ส ญล กษณ ไอคอน Mozila Firefox ส ญล กษณ ไอคอน Netscape Navigator B ส ญล กษณ ไอคอน Safari ภาพท 2.25 โปรแกรมเว บเบราว เซอร ต าง ๆ ท ม อย ในระบบปฏ บ ต การว นโดว ส าหร บข นตอนการเป ดไฟล เอกสารHTML ด วยโปรแกรม Internet Explorer เวอร ช น 8.0 สามารถท าได ด งน
67 6.3.1 เป ดโปรแกรม Internet Explorer ข นมาโดยการว ธ การด งน 1) ด บเบ ลคล กท ไอคอนบนหน าจอ เดสทอป (Desktop ) หร อ 2) เล อกเมน แล วคล กซ าย 1 คร ง 3) เล อกแถบค าส ง Program 4) เล อนแถบมาเล อก คล กซ าย 1 คร งด งภาพท 2.26 1 3 4 2 ต องการเป ด ภาพท 2.26 ข นตอนเป ดโปรแกรม Internet Explorer 6.3.2 เม อเป ดโปรแกรมแล วจะปรากฏหน าต างของโปรแกรมข นมา จากน นให 1) คล กเล อกคล กเม าส ซ ายท เมน File 2) เล อกคล กเม าส ซ ายท ค าส ง Open จะปรากฏหน าต างด งภาพท 2.26 3) เล อกป ม Browse เพ อท าการค นหาสถานท ท เก บไฟล เอกสารHTML ท 1 3 2 ภาพท 2.27 ข นตอนการเป ดไฟล เอกสารHTMLด วยโปรแกรม อ นเทอร เน ตเอกซ พลอเรอร 6.3.3 เม อเล อกสถานท ท เก บไฟล ท ต องการเป ดยกต วอย างเช น เป ดไฟล ช อ sample.html โดยท ม สถานท ท เก บไฟล ค อโฟลเดอร ช อhtml_webpage อย ในไดร ฟ E:\html_webpage\ sample.html โดยม ข นตอนการเล อกไฟล เม อเล อกป ม Browse เพ อท าการ ค นหาสถานท ท เก บไฟล เอกสารHTML ต องการเป ด ด งน
68 2 1 3 4 5 ภาพท 2.28 ข นตอนการเล อกไฟล จากสถานท เก บไฟล 1) ช อง Look in ให กดป ม เพ อเล อกสถานท ท เก บไฟล 2) เล อกไดร ฟท เก บไฟล ในท น ค อ ไดร ฟ E:\ 3) เล อกเล อกโฟล เดอร ท เก บไฟล ในท น ค อ ไดร ฟ E:\html_webpage 4) เล อกไฟล ในท น ค อ ไดร ฟ E:\html_webpage\sample.html 5) เล อกป มค าส ง Open 6.3.4 เม อคล กค าส ง Open โปรแกรมเว บเบราว เซอร จะแสดงผลเอกสารเว บเพจ ด ง ภาพท 2.31 ซ งส งเกตได จากช อง Address จะปรากฏ E:\html_webpage\sample.html ภาพท 2.29 การแสดงผลเอกสารเว บเพจด วยโปรแกรม Internet Explorer
69 สร ปท ายหน วย HTML มาจากค าว า Hyper Text Markup Language เป นภาษาคอมพ วเตอร ร ปแบบหน ง โดยม แนวค ดจากการสร างเอกสาร (Hypertext Document) ข อความในเอกสารท เช อมโยงถ งข อม ลต าง ๆ ได ส งท ส าค ญค อเคร องม อท ใช ในการสร างเอกสารเว บเพจ เคร องม อน าเสนอ ข อม ลเอกสารเว บเพจ เพ อให การเข ยนเว บเพจเป นไปตามหล กการเข ยนเว บเพจท ม โครงสร างโดยการ ใช โปรแกรมส าเร จร ปส าหร บเข ยนเว บเพจด วยภาษา HTML และโปรแกรมส าเร จร ปส าหร บแสดง เอกสาร HTML
70 แบบทดสอบหล งเร ยน หน วยท 2 หล กการเข ยนเว บเพจด วยHTML ค าช แจง เล อกค าตอบท ถ กเพ ยงข อเด ยวลงในกระดาษค าตอบ 1. ค าว า Hyper Text Document ม ความหมายตรงก บข อใด ก. แท กม ส วนขยายท เร ยกว า แอททร บ วต ข. โปรแกรมเว บเบราว เซอร ค. ข อความในเอกสารท เช องโยงถ งข อม ลต าง ๆ ได ง. ภาษาส าหร บก าหนดร ปแบบของการแสดงข อความ 2. ข อใดค อความหมายค าว า แท ก ได ถ กต อง ก. ค าส งของภาษา HTMLจะต องอย ภายในเคร องหมาย < และ> ข. ค าส งของภาษา HTMLม แท ก มาตรฐาน 2 ค าส งแท กค อ <HTML> และ<body> ค. ค าส งของภาษา HTMLท ก าหนดเว ร ดส าหร บการค นหา (Keyword) ค อ <body> ง. ค าส งของภาษา HTMLม ค ณสมบ ต เพ มเต มของค าส งแท ก เร ยกว า ค าก าหนด(Value) 3. ข อใดค อหล กการเข ยน ภาษา HTMLได ถ กต อง ก. ช อค าส ง จะใช อ กษรภาษาอ งกฤษต วพ มพ ใหญ เท าน น ข. ช อค าส ง จะใช อ กษรภาษาอ งกฤษต วพ มพ เล กเท าน น ค. แท กเป ดช อค าส งอย ระหว างเคร องหมาย < และ > แท กป ด จะม เคร องหมาย Slash (/) ง. แท กเป ดจะช อค าส งอย ระหว างเคร องหมาย < และ > แท กป ด จะม เคร องหมาย backslash (\) 4. โครงสร างเอกสาร HTMLจะต องม ค าส งแท กอย ภายใต ค าส งในข อใดท งส น ก. <head> ค าส งแท ก </head> ข. <title> ค าส งแท ก </title> ค. <body> ค าส งแท ก </body> ง. <HTML> ค าส งแท ก </HTML> 5. ค าส งแท กท ใช ก าหนด เพ อให ทราบว าเอกสารเว บเพจน นเก ยวก บอะไรตรงก บข อใด ก. Title ข. head ค. Meta ง. body 6. ข อใดกล าวถ งค าส งแท ก <meta>ได ถ กต อง ก. ค าส งส าหร บก าหนดห วเร องของเว บเพจ ข. เป นค าส งแท กก าหนดส วนเน อหาหล กของหน าเว บ ค. เป นค าส งแท กก าหนดส วนเป ดและส วนป ดของภาษา HTML ง. เป นค าส งแท กก าหนดการท าคล งบ ญช เว บ ส าหร บผ ให บร การส บค นเว บ (Search Engine)
71 7. ข อใดค อค ณสมบ ต ของโปรแกรม Notepad ส าหร บเข ยนเว บเพจ ก. เป นโปรแกรมท ต ดต งพร อมก บระบบปฏ บ ต การว นโดว ข. โปรแกรมท สามารถใช งานง ายและม การท างานไม ซ าซ อน ค. เป นโปรแกรมท ม ความสามารถให แสดงภาพเคล อนไหว ภาพสามม ต ง. สามารถรองร บการเข ยนโปรแกรมต าง ๆ ได แก ภาษาจาวา, ภาษาพ เอชพ, ภาษาเพ ร ล 8. โปรแกรมเว บเบราว เซอร ท น ยมใช ก นมากท ส ดค อข อใด ก. โปรแกรมเว บเบราว เซอร Internet Explorer ข. โปรแกรมเว บเบราว เซอร windows Explorer ค. โปรแกรมเว บเบราว เซอร Mozilla Firefox ง. โปรแกรม Safari Webbrowser 9. ข อใดกล าวถ งข นตอนการบ นท กไฟล ภาษา HTMLด วยโปรแกรม Notepad ก. การก าหนดช อไฟล ท ม สก ลเป น.html และต องบ นท กลงในช อง Filename > คล กป ม Save ข. เล อก เมน file > new >sample. html และบ นท กลงในช อง Filename>คล กป ม Save ค. เล อก เมน file > open> sample. html และบ นท กลงในช อง Filename>คล กป ม Save ง. เล อก เมน file > save as> sample.html และบ นท กลงในช อง Filename >คล กป ม Save 10. ข อใดกล าวถ งการเป ดไฟล ภาษา HTMLด วยโปรแกรมเว บบราว เซอร ได ถ กต อง ก. เล อก เมน file > open>browse> Lookin> index.html คล กป ม new ข. เล อก เมน file > new> index.html และเป ดช อง Filename คล กป ม Open ค. เล อก เมน file > open>browse> Lookin> index.html > คล กป ม Open ง. เล อก เมน file > open>browse> Lookin> index.htmlและ เป ดช อง Filename คล กป ม Open
72 เฉลยแบบทดสอบก อนเร ยน หน วยท 2 หล กการเข ยนเว บเพจด วยHTML ข อท 1 ข ข อท 6 ก ข อท 2 ง ข อท 7 ง ข อท 3 ก ข อท 8 ค ข อท 4 ค ข อท 9 ง ข อท 5 ค ข อท 10 ค เฉลยแบบทดสอบหล งเร ยน ข อท 1 ค ข อท 6 ง ข อท 2 ก ข อท 7 ก ข อท 3 ค ข อท 8 ก ข อท 4 ง ข อท 9 ง ข อท 5 ก ข อท 10 ง หมายเหต น กศ กษาต องได คะแนนไม น อยกว า 6 คะแนน (ร อยละ 60) ถ อว าผ านเกณฑ
73 แบบฝ กห ด หน วย 2 หล กการเข ยนเว บเพจด วยภาษาHTML ช อ นามสก ล รห สน กศ กษา ค าช แจง จงตอบค าถามต อไปน 1. HTML ย อมาจากค าว า 2. Hypertext Document หมายถ ง 3. ส วนขยายของไฟล ภาษา HTMLค อ 4. เท กซ หมายถ ง 5. แท ก หมายถ ง 6. ค าส งแท กเป ดของภาษา HTMLค อ 7. ค าส งแท กป ดของภาษา HTML ค อ 8. การเข ยนค าส งแอททร บ วต แล วตามด วยเคร องหมาย 9. ข อความท ใช เป นไตเต ลไม ควรพ มพ เก นก ต วอ กษร 10. ค าส งท ใช ก าหนดข อความส วนท เป นห วเร องของภาษา HTMLค อ 11. ค าส งแท กท ใช ในการท าคล งบ ญช เว บ ส าหร บผ ให บร การส บค นเว บ (Search Engine) ค อ 12. <META NAME="keywords" CONTENT="ออกแบบเว บไซต, เว บด ไซต "> เป นค าส งแท ก Meta tags ท จ าเป นส าหร บ 13. ค าส งแท กท แสดงส วนเน อหาของเอกสาร ค อ 14. เป นค าส งท ใช ในการก าหนดส ของข อความท ใช เป นต วเช อมโยงภายในเอกสารเว บเพจ ค อ 15. โปรแกรมเว บเบราว เซอร ท ต ดต งมาก บโปรแกรมระบบ ปฏ บ ต การว นโดว ค อ 16. โปรแกรมสามารถรองร บการเข ยนโปรแกรมต าง ๆ ได แก JAVA, PHP, Perl, HTML ค อ 17. ค าส งไฟร ฟอกซ เป นซอฟต แวร ท เป ดให โปรแกรมเมอร ท เร ยกว า 18. จ ดเด นของโปรแกรมท จะสน บสน น Dynamic HTML ค อ 19. โปรแกรมเว บเบราว เซอร ท น ยมใช ก นมากท ส ดค อ 20. ระบ ต าแหน งท เก บไฟล exam02.html ใน โฟลเดอร exam_html บนฮาร ดด สก ไดร ฟ D:\ ค อ
74 เฉลยแบบฝ กห ด หน วยท 2 หล กการเข ยนเว บเพจด วยภาษาHTML ค าช แจง จงตอบค าถามต อไปน ข อท 1 ตอบ HTML ย อมาจากค าว า HyperText Markup Language ข อท 2 ตอบ Hypertext Document หมายถ ง ข อท. ความในเอกสารท เช องโยงถ งข อม ลต าง ๆ ได ข อท 3 ตอบ ส วนขยายของไฟล ภาษา HTML ค อ.HTML หร อ.htm ข อท 4 ตอบ เท กซ (Text) หมายถ ง ข อท. ความท ว ๆ ไป ข อท 5 ตอบ แท ก (tag) หมายถ ง ค าส งท ใช ในการก าหนดร ปแบบของแท ก ข อท 6 ตอบ ค าส งแท ก เป ดของภาษาHTML ค อ ช อค าส งจะอย ระหว างเคร องหมาย < และ > ข อท 7 ตอบ ค าส งแท กป ดของภาษาHTML ค อ จะม เคร องหมาย Slash (/) อย หน าช อค าส ง และ อย ระหว างเคร องหมาย < และ > ข อท 8 ตอบ การเข ยนค าส งแอททร บ วต แล วตามด วยเคร องหมาย ( = ) และใส ค าท ต องการก าหนด ข อท 9 ตอบ ข อความท ใช เป นไตเต ลไม ควรพ มพ เก น 64 ต วอ กษร ข อท 10 ตอบ ค าส งท ใช ก าหนดข อท. ความส วนท เป นห วเร องของภาษาHTML ค อ <Hn> ข อท 11 ตอบ ค าส งแท กท ใช ในการท าคล งบ ญช เว บ ส าหร บผ ให บร การส บค นเว บ (Search Engine) ค อ ค าส งแท ก meta ข อท 12 ตอบ <META NAME="keywords" CONTENT="ออกแบบเว บไซต, เว บด ไซต "> เป นค าส ง แท ก Meta tags ท จ าเป นส าหร บ Search Engine ข อท 13 ตอบ ค าส งแท กท แสดงส วนเน อหาของเอกสาร ค อ <body> ข อท 14 ตอบ เป นค าส งท ใช ในการก าหนดส ของข อความท ใช เป นต วเช อมโยงภายในเอกสารเว บเพจ ค อ < body link = red > ข อท 15 ตอบ โปรแกรมท ต ดต งมาก บโปรแกรมระบบ ปฏ บ ต การว นโดว ค อ โปรแกรม Notepad ข อท 16 ตอบ โปรแกรมสามารถรองร บการเข ยนโปรแกรมต าง ๆ ได แก JAVA, PHP, Perl, HTML ค อ โปรแกรม Edit Plus ข อท 17 ตอบ ค าส งไฟร ฟอกซ เป นซอฟต แวร ท เป ดให โปรแกรมเมอร ท เร ยกว า "แอด-ออนส " ข อท 18 ตอบ จ ดเด นของโปรแกรมท จะสน บสน น Dynamic HTML, ActiveX ค อ โปรแกรม Netscape Navigator ข อท 19 ตอบ โปรแกรมเว บบราวเซอร ท น ยมใช ก นมากท ส ดค อ internet Explorer ข อท 20 ตอบ ระบบสถานท เก บไฟล exam02.html ใน โฟว เดอร exam_html บนฮาร ดด สก ไดร ฟ D:\ ค อ d:\exam_html\exam02.html
75 ใบงานท 2 ว ชาการเข ยนเว บเพจด วยภาษา HTML (3204-2201) หน วยท 2 ช อหน วย หล กการเข ยนเว บเพจด วยเอกสารHTML สอนคร งท 2 ช องานเร อง หล กการเข ยนเว บเพจด วยเอกสารHTMLเบ องต น ช วโมงรวม 4 ช วโมง จ ดประสงค การเร ยนร 1. เพ อให น กศ กษาม ความร ความเข าใจเก ยวก บร ปแบบท ด ของภาษาHTML 2. เพ อให น กศ กษาม ความค ดร เร มสร างสรรค จ ดประสงค เช งพฤต กรรม 1. ปฏ บ ต การเข ยนร ปแบบท ด ของภาษา HTML ให ครบองค ประกอบ 2. ใช โปรแกรมส าเร จร ปส าหร บเข ยนเว บเพจด วยภาษา HTML ด วยโปรแกรม Notepad 3. ใช โปรแกรมส าเร จร ปส าหร บแสดงข อม ลเอกสารของภาษา HTMLด วยโปรแกรม Internet Explorer 4. ร จ กใช ว สด อ ปกรณ อย างประหย ดค มค า 5. จ ดสรรเวลาในการปฏ บ ต ใบงานได อย างรอบคอบและเหมาะสม ส อการเร ยนการสอน 1. เคร องคอมพ วเตอร ส วนบ คคล, เคร องโน ตบ ค, พ อกเก ตพ ซ, แท บเล ตพ ซ 2. ระบบเคร อข ายอ นเทอร เน ต 3. โปรแกรม Internet Explorer และ โปรแกรม Notepad ว สด อ ปกรณ 1. ใบงานท 2 2. แบบฟอร มก จกรรมท กษะท 2 3. แบบประเม นผลก จกรรมท กษะท 2 4. แบบประเม นค ณธรรม จร ยธรรม ค าน ยมและค ณล กษณะท พ งประสงค การบ รณการ ตามหล กของเศรษฐก จพอเพ ยงและค ณล กษณะ 3 D ล าด บข นตอนการปฏ บ ต 1. น กศ กษาปฏ บ ต เป นรายบ คคล ตามก จกรรมท กษะท 2 ฝ กปฏ บ ต การเข ยนเว บเพจ ด วยโปรแกรม Notepad โดยม ข อม ลท เป นเอกสารHTML เก ยวก บเร องปร ชญาเศรษฐก จพอเพ ยงท ก าหนดให 2. ให ท าการบ นท กไฟล ข อม ล ค อ ช อน กศ กษาตามด วย work2 เช น apiwan_work2.html 3. การจ ดเก บไฟล ให เก บไว ท โฟลเดอร std_work 4. ใช โปรแกรม Internet Explorer ท าการเป ดไฟล ข อม ล apiwan_work2.html
76 5. ผลท ได จากการแสดงโปรแกรม Internet Explorer ให ท าการ Print Screen หน าจอภาพผลงานน กศ กษา วางในเอกสารไมโครซอฟต เวอร ด ช อไฟล ค อช อน กศ กษาตามด วย Unit2.doc เช น apiwan_unit2.doc 6. ให ส งไฟล เอกสารจ านวน 2 ไฟล ผ านอ เมลของคร ผ สอน ช อ apichak@hotmail.com ท ายช วโมง 7. ข อม ลท ได ส บค นมาให ระบ แหล งท มาด วยด ต วอย างการเข ยนแหล งท มา http://apiwan.cmcat.ac.th/dataapiwan/subject/bb.pdf ข อเสนอแนะ 1. ให อย ท ด ลพ น จของผ สอน 2. ก อนฝ กปฏ บ ต การเข ยน ควรตรวจสอบความพร อมการท างานของอ ปกรณ ได แก เคร อง คอมพ วเตอร ส วนบ คคล, เคร องโน ตบ ค, พ อกเก ตพ ซ, แท บเล ตพ ซ 3. ตรวจสอบการใช งานของโปรแกรม Notepad 4. ตรวจสอบการใช งานผ านโปรแกรมเว บเบราว เซอร การประเม นผล 1. ส งเกตพฤต กรรมขณะปฏ บ ต งาน 2. ตรวจก จกรรมท ปฏ บ ต จากผลงานก จกรรมท กษะท 2 3. ประเม นผลงานเป นรายกล ม ภาคผนวก ก 4. ประเม นค ณธรรม จร ยธรรม ค าน ยมและค ณล กษณะท พ งประสงค การบ รณการตาม หล กของเศรษฐก จพอเพ ยงและค ณล กษณะ 3 D เกณฑ ประเม นผลงานก จกรรมท 2 1. ร ปแบบการน าเสนอผลงาน 5 คะแนน 2. ล กษณะการเข ยนเป นระเบ ยบ อ านง าย สะอาด 5 คะแนน 3. เน อหาถ กต อง ครอบคล ม ช ดเจน ครบถ วน 5 คะแนน 4. ร บผ ดชอบส งงานตรงตามเวลาท ก าหนด 5 คะแนน รวม 20 คะแนน
77 ก จกรรมท กษะท 2 เร อง หล กการเข ยนเว บเพจด วยHTML ช อ นามสก ล รห สน กศ กษา ระด บคะแนน ผ าน ไม ผ าน 1. ช อโฟลเดอร 2. ช อไฟล เอกสารHTML 3. ช อไฟล เอกสารไมโครซอฟต เวอร ด 4. ช ออ เมล 5. ปฏ บ ต การเข ยนเว บเพจ ด วยโปรแกรม Notepad โดยม ข อม ลท เป นภาษา HTML เก ยวก บเร อง ปร ชญาเศรษฐก จพอเพ ยงท ก าหนดให <html> <head><title> ก จกรรมหน วยท 2 </title> <meta name ="contact_addr" content ="apichak@gmail.com"> <body text = " blue" > <center> <br>...ค าว าพอก เพ ยงพอ เพ ยงน ก พอ ด งน นเอง <br> คนเราถ าพอในความต องการ ก ม ความโลภน อย<br> เม อม ความโลภน อย ก เบ ยดเบ ยนคนอ นน อย<br> ถ าท กประเทศม ความค ด อ นน ไม ใช เศรษฐก จ<br> ม ความค ดว าท าอะไรต องพอเพ ยง หมายความว า<br> พอประมาณ ไม ส ดโต ง ไม โลภอย างมาก<br> คนเราก อย เป นส ข พอเพ ยงน อาจจะม มาก อาจจะม <br> ของหร หราก ได แต ว าต องไม ไปเบ ยดเบ ยนคนอ น<br> ต องให พอประมาณ ตามอ ตภาพ พ ดจาก พอเพ ยง<br> ท าอะไรก พอเพ ยง ปฏ บ ต ตนก พอเพ ยง <br> <font color ="#8a2be2">พระราชด าร สเน องในโอกาสว นเฉล มพระชนมพรรษา <br></font> <font color ="#8a2be2">5 ธ นวาคม 2541<br></font > </center> </body> </html>
78 ใบงานท 3 ว ชาการเข ยนเว บเพจด วยภาษา HTML (3204-2201) หน วยท 2 ช อหน วย หล กการเข ยนเว บเพจด วยเอกสารHTML สอนคร งท 3 ช องานเร อง เป ดประต ส โลกเว ลด ไวด เว บ ช วโมงรวม 4 ช วโมง จ ดประสงค การเร ยนร 1. เพ อให น กศ กษาม ความร ความเข าใจเก ยวก บโปรแกรมแสดงผลข อผ านอ นเตอร เน ต 2. เพ อให น กศ กษาม ความค ดร เร มสร างสรรค จ ดประสงค เช งพฤต กรรม 1. ปฏ บ ต การลงโปรแกรมเว บเบราว เซอร 2. ใช โปรแกรมส าเร จร ปส าหร บแสดงผลเอกสารHTML ได อย างเป นข นตอน 3. ใช โปรแกรมส าเร จร ปส าหร บแสดงข อม ลเอกสารของภาษา HTML ด วยโปรแกรมเว บ เบราว เซอร ได 4. ร จ กใช ว สด อ ปกรณ อย างประหย ดค มค า 5. จ ดสรรเวลาในการปฏ บ ต ใบงานได อย างรอบคอบและเหมาะสม ส อการเร ยนการสอน 1. เคร องคอมพ วเตอร ส วนบ คคล, เคร องโน ตบ ค, พ อกเก ตพ ซ, แท บเล ตพ ซ 2. ระบบเคร อข ายอ นเทอร เน ต 3. เว บไซต http://www.softpedia.com/dyn-postdownload.php?p=19345&t=0&i=1 4. เว บไซต http://www.downloaddd.com/ ว สด อ ปกรณ 1. ใบงานท 3 2. แผ น CD โปรแกรมเว บเบราว เซอร 3. แบบฟอร มก จกรรมท กษะท 3 4. ประเม นผลงานเป นรายกล ม ภาคผนวก ก 5. ประเม นค ณธรรม จร ยธรรม ค าน ยมและค ณล กษณะท พ งประสงค การบ รณการตาม หล กของเศรษฐก จพอเพ ยงและค ณล กษณะ 3 D ล าด บข นตอนการปฏ บ ต 1. น กศ กษาปฏ บ ต เป นรายบ คคล ตามก จกรรมท กษะท 3 2. ให ท าการฝ กปฏ บ ต การว ธ การลงโปรแกรมเว บเบราว เซอร จากแผ น CD หร อน กศ กษา ต องการโปรแกรมเว บเบราว เซอร ร นใหม ก สามารถดาวโหลดน จากช อเว บไซต ท ก าหนดให หร ออาจจะ ดาวโหลดน จากช อเว บไซต ท น กศ กษาร จ ก ด งน
79 2.1 โปรแกรม Firefox 2.2 โปรแกรม netscape-navigator 2.3 โปรแกรม Opara 3.4 โปรแกรม Avant Browser 3.5 โปรแกรม Safari 3.6 โปรแกรม Internet Explorer 4. ให น าไฟล เอกสาร HTML จากก จกรรมท กษะท 2 น ามาใช ในการทดลองเป ดโปรแกรม เว บเบราว เซอร ท กโปรแกรมแกรม 5. น าผลท ได จากการแสดงโปรแกรมเว บเบราว เวอร ต าง ๆ ท าการ Print Screen หน าจอภาพผลงาน วางในเอกสารไมโครซอฟต เว ร ด ช อไฟล ค อช อน กศ กษาตามด วย Unit22.doc เช น apiwan_unit22.doc 6. ให ส งไฟล เอกสารจ านวน 2 ไฟล ผ านอ เมลของคร ผ สอน ช อ apichak@hotmail.com ท ายช วโมง ข อเสนอแนะ 1. ให อย ท ด ลพ น จของผ สอน 2. ก อนฝ กปฏ บ ต การเข ยน ควรตรวจสอบความพร อมการท างานของอ ปกรณ ได แก เคร อง คอมพ วเตอร ส วนบ คคล, เคร องโน ตบ ค, พ อกเก ตพ ซ, แท บเล ตพ ซ 3. ตรวจสอบการใช งานของเคร องคอมพ วเตอร ส อบ นท กข อม ล และหน วยความจ า 4. ตรวจสอบการใช งานระบบเคร อข ายอ นเทอร เน ต การประเม นผล 1. ส งเกตพฤต กรรมขณะปฏ บ ต งาน 2. ตรวจก จกรรมท ปฏ บ ต จากผลงานก จกรรมท กษะท 3 3. ประเม นผลงานเป นรายกล ม ภาคผนวก ก 4. ประเม นค ณธรรม จร ยธรรม ค าน ยมและค ณล กษณะท พ งประสงค การบ รณการตาม หล กของเศรษฐก จพอเพ ยงและค ณล กษณะ 3 D เกณฑ ประเม นผลงานก จกรรมท 2 1. ร ปแบบการน าเสนอผลงาน 5 คะแนน 2. ล กษณะการเข ยนเป นระเบ ยบ อ านง าย สะอาด 5 คะแนน 3. เน อหาถ กต อง ครอบคล ม ช ดเจน ครบถ วน 5 คะแนน 4. ร บผ ดชอบส งงานตรงตามเวลาท ก าหนด 5 คะแนน รวม 20 คะแนน
80 ก จกรรมท กษะท 3 เร อง หล กการเข ยนเว บเพจด วยHTML ช อ นามสก ล รห สน กศ กษา ระด บคะแนน ผ าน ไม ผ าน 1. ช อโฟลเดอร 2. ช อไฟล เอกสารHTML 3. ช อไฟล เอกสารไมโครซอฟต เวอร ด 4. ช ออ เมล 5. ผลการแสดงผ านโปรแกรมเว บเบราว เซอร