หน วยท 2 หล กการเข ยนเว บเพจด วย HTML

Transcription

1 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. ม ล กษณะก จน ส ยท ด ในการปฏ บ ต งาน ม ความร บผ ดชอบ ม ระเบ ยบว น ย ตรงต อเวลา สนใจใฝ ร และม ใจร กในว ชาช พ ม ความค ดร เร มสร างสรรค

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 ต วอ กษร ข. อ กษรท ใช ต องเป นอ กษรภาษาอ งกฤษเท าน น ค. สามารถบรรจ ภาพเคล อนไหว ภาพสามม ต ได ง. สามารถก าหนดขนาดต วอ กษรได

3 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

4 46 หน วยท 2 หล กการเข ยนเว บเพจด วยHTML HTML เป นภาษาเฉพาะของคอมพ วเตอร ร ปแบบหน ง ส าหร บสร างเอกสารเว บเพจ ประส ทธ ภาพของภาษาHTM การน าเสนอข อม ลให ถ กต องสวยงามน าสนใจ ตามหล กการ ม ร ปแบบท ด ตามองค ประกอบโครงสร างพ นฐานของภาษา ม แท กท เป นค าส งใช ในการก าหนดร ปแบบของ ข อความเอกสาร โปรแกรมส าเร จร ปส าหร บเข ยนเว บเพจแสดงเอกสารHTML และน าเสนอข อม ล ข าวสารผ านโปรแกรมเว บเบราว เซอร 1. ค าศ พท ท เก ยวข อง 1.1 ทบทวนค าศ พท หน วยการเร ยนท ผ านมา ได แก Tag, Web browser,http 1.2 ค าศ พท ใหม แอททร บ วท (Attribute) ค อ ส วนขยายของค าส งหร อการก าหนดค ณสมบ ต เฉพาะค าส ง W3C ย อมาจาก World Wide Web Consortium องค กรระหว างประเทศ ท าหน าท จ ดระบบมาตรฐานท ใช งานบนเว ลด ไวด เว บ (ย อว า WWW หร อ W3) โดยม จ ดม งหมาย ท จะ เป นแกนน าทางด านพ ฒนาโพรโทคอล และว ธ การใช งานส าหร บเว ลด ไวด เว บท งหมด เอเลเมนต (Element) ค อ องค ประกอบของภาษา HTML เท กซ ไฟล หร อ โปรแกรมเท กซ อ ด เตอร (Text Editor) ค อโปรแกรมท ใช ส าหร บ สร างและแก ไขข อความในการสร างเว บเพจด วยภาษา HTML น นต องม เคร องม อท ใช ในการเข ยน และ แก ไขต วอ กษรซ งเป นค าส งต าง ๆ แอททร บ วท (Attibute) ค อ ค ณสมบ ต ท สามารถก าหนดเพ มเต มเพ อเพ ม ประส ทธ ภาพการท างานให ก บแท กต างๆ ของภาษา HTML ค าท ก าหนด (Value) ค อ ค าท ก าหนดในแอททร บ วท บ คมาร ค (Bookmark) ค อการเก บท อย เว บไซต ไว เข าชมภายหล งโดยไม ต อง พ มพ ช อเว บไซต อ ก 2. ความหมายและประว ต ความเป นมาของภาษาHTML 2.1 ความหมายของภาษาHTML HTML เป นภาษาคอมพ วเตอร โดยม การสร างเอกสาร (Hyper Text Document : ข อความในเอกสารท เช องโยงถ งข อม ลต าง ๆ) เป นภาษาส าหร บก าหนดร ปแบบของการแสดงข อความ ท ม โครงสร างการเข ยนโดยอาศ ยต วก าก บ เร ยกว าแท ก (ควบค มการแสดงผลข อความ, ร ปภาพ แสดง ภาพเคล อนไหว ภาพสามม ต หร อว ตถ อ น ๆ ผ านโปรแกรมเว บเบราว เซอร ซ งแต ละแท กอาจจะม ส วน ขยายท เร ยกว า แอททร บ วท ส าหร บระบ ค ณล กษณะ หร อควบค มการแสดงผลของเว บเพจ และ สามารถเช อมโยงการแสดงข อความได ท งไฟล เอกสารเด ยวก นและไฟล เอกสารอ น ๆ ในระบบ เคร อข ายอ นเทอร เน ต

5 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 ซ งใช ในการจ ดเก บเอกสารบน เว ลด ไวด เว บ ได ร บการพ ฒนาและถ กน าไปใช อย างแพร หลาย จ งท าให เก ดมาตรฐานในก าหนด ร ปแบบเวอร ช นต างๆ ด งต อไปน HTML 1.0 เก ดข นในป พ.ศ.2536 (ค.ศ.1993) นาย ท ม เบอร เนอร ส-ล (Tim Berners-Lee) และ นายเดป แรคเก ต (Dave Raggett) ได ก าหนดให เอกสารภาษา HTMLท พ ฒนาข นต องไม ท าให เอกสารท สร างข นน นอ านไม ได Any standard must not make exiting documents (As Far As Possible)

6 HTML 2.0 เก ดข นในป พ.ศ.2538 (ค.ศ.1995)พ ฒนาโดย IETF (International Engineering Task ForceX) ซ งม งหว งให สามารถเป ดแสดงผลก บเว บเบราว เซอร ท ใช งานท วไปได ได ร บการยอมร บเป นมาตรฐานท สมบ รณ แต อย างไรก ด บร ษ ท Netscape และบร ษ ท Microsoft ต างก เพ มค าส งใหม ๆ ลงในโปรแกรมของตนเอง เพ อให ผ ให ออกแบบเพจสามารถใช ฟ งก ช นอ น นอกเหน อไปจาก HTML HTML 3.0 เก ดข นในป พ.ศ 2538 (ค.ศ 1995) ได พ ฒนาภาษา HTML ให ม ความสามารถเพ มข น โดยการเพ มการท างานเก ยวก บตาราง ปร บข อความล อมรอบภาพ และ แสดง ส วนท ม ความซ บซ อนได ด ข น รวมท งช วยให เว บเบราว เซอร ย อนกล บไปด เว บเพจหน าท เคยเข าไปชมมา ก อนแล วได ด กว า HTML 2.0 หร อเร ยกป มเคร องม อน นว า Backward HTML 3.2 เก ดข นในป พ.ศ 2539 (ค.ศ 1996) ได ม การเพ มองค ประกอบย อย ( Element) และ ค ณล กษณะ (Attribute) ท สามารถท างานร วมก บหลาย ๆ เว บเบราว เซอร 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 น HTML 4.01 เก ดข นในป พ.ศ (ค.ศ.1997) ได พ ฒนาปร บปร งท ผ ดพลาด ให สมบ รณ ม การท างานประส ทธ ภาพส งมากข น ในป จจ บ นทาง W3C ผล กด น ร ปแบบของHTML แบบใหม โดยเปล ยนไป พ ฒนาภาษามาตรฐานใหม ท ช อว า XHTML ย อมาจากค าว า Extensible Hyper Text Markup

7 49 Language มาใช ในการสร างเว บเพจ เพ อขยายการใช เว บเพจไปส อ ปกรณ ต าง ๆ ได เพ มมาข น ซ ง เป นล กษณะของโครงสร าง XML (extensible Markup Language) ท ม หล กเกณฑ ในการก าหนด โครงสร างท มาตรฐานด กว า มาใช ทดแทน HTML ร น 4.01 ท ใช ก นอย ในป จจ บ น HTML 5.0 เป นมาตรฐานของภาษาHTML ท อย ในระหว างการพ ฒนาภาษา มาร กอ ป ส าหร บ ร นต อไป ได ออกเผยแพร การใช งานเม อว นท 22 มกราคม พ.ศ.2551 โดยภาษา HTML 5.0 ม ร ปแบบสองแบบท ร วมก นค อ แบบด งเด ม และแบบท สองค อ XHTML ท ใช ในการจ ด โครงสร างและการแสดงผลของเน อหาส าหร บเว ลด ไวด เว บ มาตรฐานใหม จะม ค ณล กษณะเด นท ส าค ญ ได แก 1) การใช งานว ด โอ 2) การแสดงต าแหน งทางภ ม ศาสตร 3) การเก บไฟล ในล กษณะออฟไลน 4) การแสดงกราฟ กส 5) ชน ดของการป อนข อม ล แบบใหม เช น search, number, range, color, tel, url, , date, month, week, time, datetime, datetime-local โดยค ณสมบ ต เด นหลายอย างไม จ าเป นต องต ดต งซอฟต แวร เพ ม เช น เก ยรส แฟลช หร อ ซ ลเวอร ไลต เหม อนท ผ านมาในการใช งาน HTML 4.0 HTML 5.0 ได ม การแนะน า องค ประกอบของ HTML ใหม หลายต วเพ อตอบสนองการ ใช งานของเว บไซต ร นใหม โดยส วนหน งเป นซ แมนต ก ค อ ว ธ การท จะท าให คอมพ วเตอร สามารถ เข าถ งเว บไซต ท ส มพ นธ ก นได โดยอ ตโนม ต และย งสามารถด งข อม ลท เก ยวข องก นออกมาจาก ฐานข อม ลแบบสเปรดช ต (Spreadsheet) หร อ ไฟล ร ปภาพได ด วย ในขณะท ภาษา HTML ร นก อน เพ ยงแสดงข อม ลผ านทางเว บเบราว เซอร เท าน น คอมพ วเตอร จะไม สามารถร ว าข อม ลเหล าน น ค อ อะไรและม ความส มพ นธ ก นอย างไร ผ ใช จะต องเป นผ ต ดส นใจเล อกว าจะเข าไปท เว บไซต ใด จ งจะได ข อม ลท ต องการโดยอาศ ยการคล กไปตามการเช อมโยงต างๆ ( /semantic-web, 2554) และองค ประกอบบางต วท ตกร นถ กทดแทนด วยการท างานด วย ค าส งซ เอสเอส 2.3 ความส าค ญของHTML พ ฒนาข นเพ อใช งานก บเว บเพจโดยเฉพาะ และใช รห สข อม ลแบบธรรมดา ท าให ไฟล เอกสารHTML สามารถใช ได ก บท กโปรแกรม ในขณะท ไฟล ของโปรแกรมอ น จะใช งานได เฉพาะ ก บโปรแกรมของต วเอง เช น ไฟล ข อม ลของเว ร ดโปรเซสเซอร (Word Precesser) ไม สามารถเร ยกใช จากโปรแกรมเท กซ อ ด เตอร (Text Editor) ท วไป เป นภาษามาตรฐานเป ด ท กคนสามารถน าไปใช งานได โดยไม จ าเป นต องเส ย ค าใช จ ายใด ๆ ไม ได เป นของใครคนใดคนหน ง แม แต องค กรท ก าหนดมาตรฐานของภาษาน W3C ก เป นองค กรท ต งข นโดยไม หว งผลก าไรใดๆ เป นไฟล ท สามารถอ านเข าใจน ค อจ ดประสงค ข อหน งในการพ ฒนาข นมา ซ ง แตกต างจากโปรแกรมภาษาอ น ๆ ค าส งของ HTML น นเข าใจง ายเหม อนเอกสารท วไป

8 สามารถใช งานระบบไฮเปอร เท ก ได ค ณสมบ ต ข อน อาจจะเป นข อท ส าค ญท ส ด การม จ ดล งค อย ภายในเว บเพจท าให สามารถเช อมโยงเอกสารไปย งแหล งข อม ลต างๆได ท วโลก เพ ยง แค คล กเมาส ท จ ดล งค เท าน น สามารถท างานก บม ลต ม เด ย เช น ข อความ ร ปภาพ เส ยง หร อ ภาพเคล อนไหว เป นต น ค ณสมบ ต ข อน ท าให เว บแตกต างไปจากการส อสารประเภทอ น เช น หน งส อพ มพ หร อแม แต อ เมล 3. ร ปแบบท ด ของภาษาHTML 3.1 ร ปแบบไฟล เอกสารHTML ร ปแบบไฟล โดยท วไปว าไฟล เว บเพจ จะม ส วนขยายของไฟล เป น.html หร อ *.htm เช น sample.html ด งต วอย างภาพท 2.2 โดยท วไป ไฟล ภาษาHTMLจะเป นไฟล ชน ดเท กซ ไฟล (Text File) ด งต วอย างท ภาพท 2.3 เป นข อม ลในไฟล ท สามารถเป ดอ านได ด วยโปรแกรมเท กอ ด เตอร ท วไปของระบบปฏ บ ต การ ภาพท 2.2 ส วนขยายของไฟล เป น.html หร อ.htm ภาพท 2.3 ต วอย างไฟล ชน ดเท กซ ไฟล

9 องค ประกอบของภาษา HTML(HTML Element) เอกสารประกอบไปด วยด งน เท กซ (Text) หมายถ ง ข อความท ว ๆ ไปท อย ระหว างค าส งแท ก ส วนของ เอกสารท ต องการแสดงผลออกทางเว บเบราว เซอร แท ก (Tag) หมายถ ง ค าส งท ใช ในการก าหนดร ปแบบของแท กโดยค าส ง ของภาษา HTML จะต องอย ภายในเคร องหมาย <และ> โดยแท กเร มต นและแท กจบท าย จะใช ต วอ กษรพ มพ เล กหร ออ กษรพ มพ ใหญ ม ผลเหม อนก น 3.3 หล กการเข ยนเอกสารHTML (HTML Document) ค าส งแท ก โดยช อค าส งจะต องอย ภายในเคร องหมาย < > เท าน น ช อค าส ง ใช อ กษรภาษาอ งกฤษ ต วพ มพ เล ก ต วพ มพ ใหญ หร อพ มพ ผสม การย อ หน า เว นบรรท ด หร อช องว าง สามารถกระท าได อ สระ เว บเบราว เซอร จะไม สนใจเก ยวก บระยะเว น บรรท ดหร อย อหน า หร อช องว าง ม ความหมายเด ยวก น เช น <body> หร อ <BODY> หร อ< Body> ส าหร บเอกสารประกอบการเร ยนเล มน จะใช อ กษรภาษาอ งกฤษต วพ มพ เล ก ค าส งแท กท วไปจะประกอบด วยแท กเป ดและแท กป ด แท กเป ดช อค าส งจะอย ระหว างเคร องหมาย < และ > แท กป ด จะม เคร องหมาย Slash (/) อย หน าช อค าส ง และอย ระหว าง เคร องหมาย < และ > ระหว างแท กเป ดและแท กป ด ค อข อความท แสดงผลด วยค าส งแท กน น บางค าส งอาจม เพ ยงแท กเป ด แต ไม ม แท กป ด เช นค าส ง หร อ บางค าส งแท กจะม ค ณสมบ ต เพ มเต ม ซ งค ณล กษณะเพ มเต มของค าส งแท ก เร ยกว า แอททร บ วท (ค ณสมบ ต ค ณสมบ ต ท สามารถก าหนดเพ มเต ม) โดยแอททร บ วท จะก าหนดท แท กเป ดเท าน น จะการเข ยนแอททร บ วท แล วตามด วยเคร องหมาย ( = ) และใส ค าท ก าหนด (Value) ค าส งแท กค อ เป นค าส งให แสดงต วอ กษรโดย ค อ แท กเป ด และ ค อแท กป ด ม การก าหนดค ณสมบ ต เฉพาะ color = "green" อก าหนดให แสดงข อความเป น ส เข ยว ส าหร บข อความท ต องการแสดงอย ระหว าง และ ค อ ว ทยาล ยเกษตรและ เทคโนโลย เช ยงใหม ภาพท 2.4 ต วอย าง ค าส งแท กท ม การก าหนดแอททร บ วท

10 ร ปแบบท ด ของภาษาHTML ร ปแบบเอกสารHTMLท ด ต องม การพ มพ ช ดค าส งโดยสามารถพ มพ ได ท งต วพ มพ เล ก ต วพ มพ ใหญ หร อพ มพ ผสม การย อหน า เว นบรรท ด หร อช องว าง สามารถกระท าได ตามอ สระของ เว บเบราว เซอร จะไม สนใจเก ยวก บระยะเว นบรรท ดหร อย อหน า หร อช องว าง โดยม รายละเอ ยดด งน <html> <head> <title>ข อความแสดงท แถบห วเร อง (Title bar) </title> </head> <body> ข อความหร อค าส งแท ก ต าง ๆ </body> </html> ภาพท 2.5 ร ปแบบท ด ของภาษาHTML ส วนท ก าหนดให เว บเบราว เซอร ทราบว าเป นเอกสารชน ดHTML ซ งจะม แท ก <html> ก าก บอย ท จ ดเร มต น และแท ก </html> จ ดส นส ดของเอกสารHTML ส วนห วเร องเอกสารเว บเพจ (Head Section) เป นส วนท ใช อธ บายเก ยวก บ ข อม ลเฉพาะของหน าเว บน นๆ เช น ช อเร องของหน าเว บ (Title), ช อผ จ ดท าเว บ (Author), ค ย เว ร ด ส าหร บการค นหา (Keyword) โดยม ค าส งแท กส าค ญ ค อ 1) ค าส งแท ก <head> เป นค าส งท ใช ก าหนดข อความส วนท เป นห วเร อง เอกสาร เพ อให ทราบว าเอกสารเว บเพจน นเก ยวก บอะไร โดยม ค าส งแท กเป ดค อ <head> และค าส ง แท กป ดค อ</head> ภายใน จะประกอบด วย ค าส งแท ก < title> และค าส งแท ก <meta> ม ร ปแบบด งต อไปน ร ปแบบค าส ง <head> <title > ข อความช อเร อง <title > <meta> </head> 2) ค าส งแท ก title เป นค าส งแท กท ใช แสดงช อเอกสารเว บเพจหร อ รายละเอ ยดท เก ยวก บเอกสารเว บเพจในหน าน น โดยม ค าส งแท กเป ดค อ <title> และค าส งแท กป ด ค อ </title> โดยม ร ปแบบการพ มพ แท กค าส งม ด งน ร ปแบบค าส ง <title > ข อความช อเร อง </title >

11 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 บอกค าท เก ยวข องก บเว บเพจหน าน เป นค าท ใช ในการค นหาหน าน ค นด วยส ญล กษณ (, ) จะบอกรายละเอ ยด ของเว บเพจแบบคร าว ๆ

12 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" >

13 55 ต วอย าง ต วอย าง ต วอย าง ต วอย าง ฌ. บอกระด บการเผยแพร ของเว บไซต <meta name ="distribution" content ="Global"> ญ. ใส อ เมล ส าหร บให คนต ดต อกล บ <meta name ="contact_addr" content ฎ. ระบ กล มคนเข าด <meta name ="rating" content ="General"> ฏ. บอกภาษาท ใช ในเว บ <meta name ="language" content ="en-th"> ส วนเน อหาเอกสารเว บ (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"> </td> การจ ดการเร ยนร คร อภ ว นท </tr> </table> </body> เม อแสดงผ านโปรแกรมเว บเบราว เซอร ด งภาพท 2.6

14 56 ภาพท 2.6 ผลการแสดงบนเว บเบราว เซอร 4. โปรแกรมส าเร จร ปส าหร บเข ยนเว บเพจด วยภาษา HTML เคร องม อท ใช ส าหร บการเข ยนภาษา HTML จะต องใช โปรแกรมเท กอ ด เตอร ซ งเป น โปรแกรมส าหร บแก ไขไฟล ข อม ลต างๆ โปรแกรมท น ยมน ามาใช ในการเข ยนเว บเพจ ได แก 4.1 โปรแกรม Notepad โปรแกรม Notepad เป นโปรแกรมท ต ดต งมาก บโปรแกรมระบบ ปฏ บ ต การว นโดว โดยจ ดเป นโปรแกรม เท กอ ด เตอร ซ งสามารถน ามาใช สร างไฟล หร อเข ยนภาษาHTML เพราะเป น โปรแกรมท สามารถใช งานง ายและม การท างานไม ซ าซ อน ล กษณะของโปรแกรมม ด งน ภาพท 2.7 ต วอย างโปรแกรม Notepad 4.2 โปรแกรม Edit Plus โปรแกรม EditPlus เป นโปรแกรมท ช วยเพ มความสะดวกให แก น กเข ยนโปรแกรม มากกว าโปรแกรม Notepad ม ข อด สามารถรองร บการเข ยนโปรแกรมต าง ๆ ได แก ภาษาจาวา, ภาษาพ เอชพ, ภาษาเพ ร ล, ภาษา HTML เป นต น โดยโปรแกรมน จะม ความเข าใจในต วภาษาแต ละ ต ว และม การใช ส ส นท แตกต างก นเพ อแยกค าส าค ญหร อค าเฉพาะในแต ละภาษาด งภาพท 2.8 แต โปรแกรม EditPlus ไม สะดวกในการใช งานเท าก บโปรแกรมโน ตแพด ค อ ไม ใช โปรแกรมท ต ดมาก บ

15 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

16 โปรแกรม 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ร นใหม และสน บสน นภาษาจาวา และจาวาสคร ปต ช วยในการเข าส เว บไซต ต าง ๆ ซ งม จ ดเด น ค อสน บสน นเอกสารเว บเพจแบบเปล ยนแปลงข อม ล ง าย ต อการใช งาน และม ระบบความปลอดภ ยของข อม ลท ด ข น

17 59 ภาพท 2.11 ส ญล กษณ Netscape Navigator ภาพท 2.12 ต วอย าง โปรแกรม Netscape Navigator 5.2 โปรแกรม Internet Explorer โปรแกรม Internet Explorer ผล ตโดยบร ษ ทไมโครซอฟท ผ ผล ตโปรแกรม ระบบปฏ บ ต การต าง จ งเก ดจากการซ อล ขส ทธ จากโปรแกรม NCSA Mosaic มาพ ฒนาต อเป น Internet Explorer โดยม ช อย อว า ไออ (IE) ใช งานได ก บระบบปฏ บ ต การไมโครซอฟท ว นโดว (Windows) ท กร น เพ มข ดความสามารถให แสดงภาพเคล อนไหว ภาพสามม ต ได ม การออกค าส ง เอกสารHTML ใหม ๆ ท ใช งานได ก บเว บเบราว เซอร ของตน ส าหร บระบบปฏ บ ต การไมโครซอฟท ว นโดวส และระบบปฏ บ ต การแมค ป จจ บ นโปรแกรม Internet Explorer เป นเว บเบราว เซอร ท อย ในส วนหน งของระบบปฏ บ ต การไมโครซอฟท ว นโดวส ท น ยมใช มากท ส ดต งแต ป พ.ศ ภาพท 2.13 ส ญล กษณ ไอคอนโปรแกรม Internet Explorer

18 60 ภาพท 2.14 ต วอย างโปรแกรม Internet Explorer โปรแกรม Mozilla Firefox ร จ กในช อไฟร ฟอกซ เป นเว บเบราว เซอร และไคลเอนต ส าหร บโกเฟอร และเอฟท พ ท สามารถใช ได ในหลายระบบปฏ บ ต การ พ ฒนาโดยม ลน ธ มอซ ลลาและ อาสาสม ครอ กหลายร อยคน ป จจ บ นอย ใต การด าเน นงานของบร ษ ทมอซ ลลา จ าก ด และโปรแกรมเว บ เบราว เซอร ท น ยมอ นด บ 2 รองจากโปรแกรม Internet Explorer ภาพท 2.15 ส ญล กษณ ไอคอน Mozila Firefox ท มา: www. Mozila, 2553 ภาพท 2.16 ต วอย างโปรแกรม Mozilla Firefox

19 โปรแกรม Avant Browser โปรแกรม Avant Browser เป นโปรแกรมเว บเบราว เซอร ท ม ค ณสมบ ต ช วงเวลาการ จ ดเร ยงการส งส ญญาณ (Batch) และฟ งก ช นท งหมดของโปรแกรม Internet Explorer โปรแกรมน เป นเว บเบราว เซอร ท ม ความเร วท ส ด และม การต ดต อระบบการส อสาร ท สามารถใช งานได ง าย สามารถเล นอ นเทอร เน ตได อย างราบร นและม ประส ทธ ภาพมากข น และสามารถอ พเกรดได อย าง สม าเสมอเพ อเพ มความเช อถ อได ของม นให เท ยงตรงอย เสมอและสามารถรองร บของภาษาท วโลก ได มากถ ง 41 ภาษา นอกจากน โปรแกรม Avant Browser ย งม ความสามารถในการกรอง ภาพเคล อนไหว แฟรชแอน เมช น (Flash Animation) เพราะว า ส วนใหญ น ามาใช ส าหร บท าโฆษณา และน าเสนอบนเว บเพจขนาดใหญ มากถ งร อยละ 90 ของหน า โปรแกรมม ค ณสมบ ต เพ อช วยให สามารถประหย ด เวลาในการร บส งส ญญาณ โดยการบล อกไฟล เอกสารแฟรช เหล าน ในการคล กเมาส คร งเด ยวและสามารถท จะท าการบล อก การดาวน โหลด ร ปภาพ, ว ด โอ, เส ยง และ Active X เพ อให สามารถควบค มแบนว ช และเพ มความเร วในการโหลดหน าต างเว บเพจ อ นได เร วข น ๆ ภาพท 2.17 ส ญล กษณ ไอคอน Avant Browser ท มา : ภาพท 2.18 ต วอย างโปรแกรม Avant Browser

20 โปรแกรมโอเปร า (Opera) ค อช อซอฟต แวร ท รวมเว บเบราว เซอร และโปรแกรม ส าหร บใช งานอ นเทอร เน ตอ น ๆ พ ฒนาโดยบร ษ ทโอเปร า ประเทศนอร เวย ในป จจ บ นโอเปร าเป นผ น า ในตลาดเว บเบราว เซอร ส าหร บโทรศ พท ม อถ อ และพ ด เอ(PDA : Personal Digital Assistants) เป น อ ปกรณ ท สามารถพกพาน าต ดต วได นอกจากน ย งถ กน าไปใช ในระบบโทรท ศน ท ม การโต ตอบระหว าง ผ ชม (Interactive Television, itv) ในบางประเทศ เม อไม นานน บร ษ ทโอเปร าได ร วมม อก บ บร ษ ทอะโดบ ซ สเต มส ผ ผล ตซอฟต แวร ด านการสร างสรรค ส อ เพ อรวมโอเปร าก บโปรแกรมในช ด อะ โดบ คร เอท ฟสว ท และเม อ 20 ก นยายน พ.ศ.2548 ทางบร ษ ท โอเปร า จ าก ด (Opera Software ASA) ได เป ดให โอเปร าเบราว เซอร เป นซอฟแวร ท สามารถโหลดใช งานได ฟร และไม ม การเพ มค าบร การใด ๆ ในต วโปรแกรม สามารถใช งานได เต มร ปแบบช ดโอเปร าประกอบไปด วย โปรแกรมค นด เว บ (Web browser) โปรแกรมอ เมล ( Client) โปรแกรมไออาร ซ (IRC Client) โปรแกรมสม ดท อย (Address Book) โปรแกรมอ านข าวจากแหล งข อม ลอ น (News Aggregator) โปรแกรมโอเปร าว จ ท (Opera Widget) ภาพท 2.19 ส ญล กษณ ไอคอน Opera ท มา : ภาพท 2.20 ต วอย างโปรแกรม Opera Browser

21 โปรแกรมซาฟาร (Safari) ค อโปรแกรมเว บเบราว เซอร ท พ ฒนาโดยบร ษ ทแอปเป ล คอมพ วเตอร ส าหร บเคร องแมคอ นทอช โดยมาพร อมก บระบบปฏ บ ต การ Mac OS X ร น 10.3 เป น ต นไป และสต ฟ จอบส ได ประกาศในว นท 11 ม ถ นายน พ.ศ เป ดต วซาฟาร ส าหร บว นโดวส 2000 หน าตาของซาฟาร ม ล กษณะส เง นวาว (brush metal) เหม อนก บล กษณะของ ซอฟต แวร เล น เพลง ซาฟาร ร นท สองเร ยกว า Safari RSS ใช ได ก บ Mac OS X ร น 10.4 ข นไป ซาฟาร ใช ต ววาดหน า เว บช อ WebCore ซ งพ ฒนามาจากต ววาดหน าเว บช อ เว บค ต ท พ ฒนาต อมาจาก KHTML ซ งเป น ส วนหน งของโครงการซอฟต แวร เสร KDE ด งร ปภาพท 2.31 ภาพท 2.21 ส ญล กษณ ไอคอน safari ท มา : ภาพท 2.22 ต วอย างโปรแกรม Safari Browser 5.7 โปรแกรม Google Chrome ก เก ลโครม (Google Chrome) เร ยกก นส น ๆ ว าโครม ค อโปรแกรมเว บเบราว เซอร แบบโอเพนซอร ซ ท พ ฒนาโดยบร ษ ท ก เก ล โครมม ให ดาวน โหลดเพ อใช งานส าหร บว นโดวส และม ภาษาท ให ใช ได มากกว า 50 ภาษารวมถ งภาษาไทย ความสามารถของโครม ออกแบบมาให ท างานได อย างรวดเร วในท กว ถ ทางเท าท จะเป นไปได หน าต างเบราว เซอร ม ขนาดเหมาะสม สะอาดตา และ เร ยบง าย สามารถปร บการต งค า และเพ มแอปพล เคช น รวมท งธ ม (Theme) ต าง ๆ จาก ท เก บเว บ ของโครมได การลงช อเข าใช จะเป นการน าบ กมาร ค ประว ต การเข าชม และการต งค าอ น ๆ ท งหมดลง ในคอมพ วเตอร ท กเคร องของเรา และย งสามารถลงช อเข าใช บร การต าง ๆ ท งหมดของก เก ล ท ช นชอบ

22 64 ให โดยอ ตโนม ต ม การปร บปร งอ ตโนม ต ท าให ม นใจได ว าได ร บการแก ไขข อบกพร องด านความปลอดภ ย ล าส ด ( ) ภาพท 2.23 ส ญล กษณ ไอคอนก เก ลโครม ท มา: Google.,Inc, 2553 ภาพท 2.24 ต วอย างโปรแกรมก เก ลโครม 6. ปฏ บ ต การเร มต นการเข ยนเว บเพจด วยHTML ส าหร บเอกสารประกอบการเร ยนน การเร มต นปฏ บ ต การเข ยนเว บเพจด วยภาษา HTMLจะ ใช โปรแกรม Notepad ใช เป นโปรแกรมสร างไฟล เอกสาร ส วนโปรแกรมเว บเบราว เซอร ค อ โปรแกรม Internet explorer โดยม ข นตอนในการเข ยน ด งต อไปน 6.1 การเร ยกใช โปรแกรม Notepad เร มต นด วยการคล กป มเมน Start คล กเล อก program คล กเล อก Accessories คล กเล อก Notepad ซ งม ข นตอนการเร ยกใช โปรแกรม Notepad ด งร ปภาพท 2.23

23 ภาพท 2.25 ข นตอนการเร ยกใช โปรแกรม Notepad 6.2 การบ นท กไฟล ภาษา HTML สามารถบ นท กไฟล ข อม ล จากโปรแกรม Notepad ซ งจะท าการบ นท กเป นไฟล เอกสาร HTML ม ข นตอนการบ นท กด งน คล กท เมน File เล อกแถบเมน Save หร อ Save As การก าหนดช อไฟล ท ต องการบ นท กลงในช อง File Name การบ นท กไฟล เอกสารHTML โดยในการก าหนดช อไฟล จะต องก าหนดส วนขยายเป น. html หร อจะบ นท กเป น.htm เช น sample.html ด งร ปท ก าหนดท อย ท ต องการเก บไฟล อาท เช น บ นท กไว บนฮาร ดด สก ท อย ในเคร อง คอมพ วเตอร (ไดร ฟ C:, D:, E: ) หร อ ย เอสบ แฟลชไดรฟ ถ าต องการให การเก บแฟ มเป นส ดส วน ไม ให แฟ มข อม ลระจาย ก สามารถด าเน นการบ นท กไว โดยการสร าง โฟว เดอร ไว ในส อบ นท กข อม ลก ได ตามต วอย างน จะบ นท กข อม ลไว ท โฟลเดอร ช อ html_webpage ในฮาร ดด สก ไดร ฟ E: จากน น ก ท าการบ นท กไฟล คล กเล อกป ม Save

24 ภาพท 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 สามารถท าได ด งน