Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
RASLAPAT SIRIWAT
HTMLWeb Programming
วตถประสงควตถประสงค
• สามารถทราบและอธบายความเปนมาการพฒนาภาษาเวบ
• สามารถบอกองคประกอบของภาษา HTML ได
• สามารถบอกประโยชนของการเขยน HTML ได
• สามารถอธบายมาตรฐานเวบได
• ในยคเร*มแรกของการใชงานเครอขายมความมงแนนท*จะแจกจายเน.อหาในลกษณะของเอกสาร (document) ซ* งเอกสารในยคน.นเปนในลกษณะของขอความเปลา (plain text)– ขอความเปลาคอ ไฟลท*มนามสกล .txt ท*ใชอยในปจจบน
– ขอความเปลามขอดอยคอ ยากตอการอาน เพราะไมมการจดรปแบบ เชน ส หรอการเนนคา
– ไมมโครงสรางเอกสารท*ชดเจน (non-formal)
ท�มาของ HTMLท�มาของ HTML
• ในป ค.ศ. 1980 นกฟสกส ช*อ Tim Berners-Lee ตองการท*จะสรางเอกสารงานวจยสาหรบหองปฏบตการ CERN (European Organization for Nuclear Research) โดยสามารถแจกจายผานเครอขายได โดยต.งช*อโครงการของเขาวา Enquire– Enquire ถอไดวาเปนโครงการท*สราง web browser ตวแรกของโลก โดยต.งช*อ
โปรแกรมตวน.วา Enquire ตามช*อโครงการ– Enquire เปนโครงการท*กาหนดโพรโตคอล HTTP (HyperText Transfer
Protocol)– Enquire เปนตนกาเนดของโครงการ WWW (World Wide Web) ซ* งถอกาเนด
ในป 1989
การถอกาเนดของ HTMLการถอกาเนดของ HTML
การถอกาเนดของ HTML (cont.)การถอกาเนดของ HTML (cont.)
A screen in an Enquire scheme
http://http://www.w3.org/History/1989/p
roposal.html
• Tim Berners-Lee ไดคดคนวธเขยนเอกสารข.นมาโดยใชวธการท*เรยกวา markup เพ*อบอกสวนประกอบตางๆของเอกสาร และการจดรปแบบ รวมถงการเช*อมโยงอยางสลบซบซอนไปยงเอกสารอ*นๆ (hyperlink)
• และไดต.งช*อวธการเขยนเอกสารวา HTML (HyperText Markup Language)– วธการน.ไดรบอทธพลมาจาก SGML (Standard Generalized Markup Language)
– มาตรฐาน HTML อางองมาตรฐาน SGML จนถง HTML 4.01
– ในป ค.ศ. 1993 HTML ไดถกต.งข.นเปนมาตรฐานโดยจดอยในมาตรฐาน IETF (Internet Engineering Task Force) ซ* งไดกาหนดรหสมาตรฐานของ HTML 2.0 IETF RFC 1866
การถอกาเนดของ HTML (cont.)การถอกาเนดของ HTML (cont.)
• ในชวง ค.ศ. 1990 – 2000 การใช Internet ขยายตวอยางรวดเรว จนเขาไปสระบบธรกจ ซ*งรปแบบเอกสารท*แจกจายบน Internet จะใช HTML เปนสวนใหญ– แตเดม HTML ถกใชแคในโครงการ WWW– ในป ค.ศ. 1992 ไดม web browser ท*ใช Graphic UI เกดข.นคอ NCSA Mosaic
ซ* งทางานบน Unix's X Window System ย*งทาใหมความตองการใชเอกสาร HTML มากย*งข.น• ภายหลง NCSA Mosaic ไดกลายเปน Netscape
– ในป ค.ศ. 1995 Microsoft ไดสราง web browser ข.นใชช*อวา Internet Explorer โดยอาศย Graphic UI จาก NCSA Mosaic
การเปล�ยนแปลงของมาตรฐานการเปล�ยนแปลงของมาตรฐาน
• จากการขยายตวของ Internet และความตองการใชเอกสาร HTML ทาให web browser ตางๆ เพ*มความสามารถของ HTML ข.นมาเองจน IETF ไมสามารถควบคมมาตรฐาน HTML ไดอกตอไป– มาตรฐาน HTML 3 กลบมาส WWW และถกกาหนดข.นโดย W3C
Recommendation (World Wide Web Consortium Recommendation)• สงเกตไดวาเปนเพยงขอแนะนาเทาน.น ไมไดเปนขอกาหนดท*ตายตว
– ในชวงน.นไดเกด tag HTML ท*ไมไดเปนไปตามมาตรฐานมากมาย เชน Internet Explorer ม tag marquee หรอ Netscape ม tag blink
– รวมถงไดเกด script ท*ทางานรวมกบ HTML เชน vbscript ของ Microsoft• มาตรฐานของ W3C จะใช ECMAScript
การเปล�ยนแปลงของมาตรฐาน (cont.)การเปล�ยนแปลงของมาตรฐาน (cont.)
• web browser ตางไดเพ*มความสามารถใหแก web browser เพ*อหวงชกจงโปรแกรมเมอรใหพฒนา HTML ตามแนวทางของ web browser น.น และจะไดเปนผกาหนดมาตรฐานของ HTML โดยปรยาย– แตการแขงขนของ web browser สงเสยจน ไมม web browser ใดสามารถเปน
ศนยกลางของมาตรฐาน HTML ได
– ภาระจงตกอยกบโปรแกรมเมอรท*จะตองสรางเอกสาร HTML เพ*อใหสามารถใชไดกบทก web browser ท*มภายในตลาด• โดยปกตแลวการสรางเอกสาร HTML ใหกบองคกรใด มกจะมการจากด web browser ท*สามารถทางานไดไวเสมอ
การเปล�ยนแปลงของมาตรฐาน (cont.)การเปล�ยนแปลงของมาตรฐาน (cont.)
• HTML 1.0 รนเร*มแรกของ HTML– ไมม doctype
• HTML 2.0<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
– HTML เขาสมาตรฐานของ IETF และมการใช doctype
– เพ*ม tag file upload ใน tag form
– เพ*ม tag table
– สนบสนน i18n (internationalization)
สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTMLสรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML
• HTML 3.2<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
– มาตรฐานกลบมาส WWW และถกดแลและกาหนดโดย W3C
– แยก tag สาหรบคณตศาสตรออกมาเปนสวนเพ*มเตม (Extensions) ของ HTML แทน เรยกวา MahtML
– มการระบอยางชดเจนวาไมรองรบ tag บางสวนท* web browser เพ*มเตมข.นมาเอง เชน marquee หรอ blink (เน*องจากไมสามารถตกลงมาตรฐานไดกบ web browser เจาของ tag)
สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)
• HTML 4.01– เน*องในชวงของการกาหนดมาตรฐานน. มเอกสาร HTML จานวนมากบน
Internet และมความตองการจดหมวดหมเอกสารโดย search engine ซ* งตองการโครงสรางขอมลในแบบ semantic (ขอมลเชงความหมาย) จงไดตด tag ท*ใชจดรปแบบ เชน <font> หรอ <center> ออกไปเพ*อใหเอกสารเหลอแต tag ท*ใชแสดงโครงสรางของขอมลจรง• การม tag การจดรปแบบจะทาใหเอกสารมความซบซอน ยากแกการกาหนดวาสวนใดเปนขอมลหรอสวนใดเปนการจดรปแบบ ทาใหโครงสรางของ HTML ไมสามารถส*อความหมายของขอมลได
• การจดรปแบบจะปลอยใหเปนหนาท*ของ CSS แทน
สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)
• HTML 4.01 (cont.)– ยกเลกการใช tag frameset จากเหตผล ของความตองการขอมลแบบ semantic– แตการตด tag จดรปแบบออก กระทบตอโปรแกรมเมอรโดยตรง ซ* งยงไมคนเคยกบ CSS จงทาให
HTML 4.01 แตกออกเปน 3 มาตรฐานคอ• HTML 4.01 frameset (ยงคงการใช tag frameset ไว)
– <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">• HTML 4.01 transitional (คง tag การจดรปแบบไว แตมสถานะเปน deprecated)
– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">• HTML 4.01 strict (ตด tag การจดรปแบบออก)
– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
– สามารถตรวจสอบ tag ถกยกเลกไดจาก• http://www.w3.org/TR/html401/index/elements.html• http://www.w3schools.com/tags/default.asp
สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)
• XHTML 1.0– มการใชการเปดปด tag ตามมาตรฐานของ XML
• สาหรบ tag เด*ยวเดม เชน <br> สามารถเขยนไดเปน– <br /> (มชองวางกอน />)
• ไมยนยอมใหมการเขยน tag ครอมกน (overlap) เชน– <p>here is an emphasized <em>paragraph.</p></em>
• การเขยนผดเง*อนไขจะใหถอวาเกด error ข. น และไมสามารถแสดงผลได ซ* งกระบวนการเชนน. เปนไปตามมาตรฐานของ XML
สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)
• XHTML 1.0 (cont.)– สามารถเขยนสวนบนของเอกสารตามรปแบบของ XML ได
• <?xml version="1.0" encoding="UTF-8"?>
– tag HTML ใหใชตาม HTML 4.01 โดยตด attribute ของบาง tag ท*ไมสอดคลองกบมาตรฐาน XML ออกไป
– แตกออกเปน 3 มาตรฐาน ตาม HTML 4.01 คอ• XHTML 1.0 frameset (ยงคงการใช tag frameset ไว)
– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
• XHTML 1.0 transitional (คง tag การจดรปแบบไว แตมสถานะเปน deprecated)– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• XHTML 1.0 strict (ตด tag การจดรปแบบออก)– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)
• HTML5 draft<!DOCTYPE html>
– HTML5 เปนการเปล*ยนแปลงคร. งใหญของ มาตรฐาน HTML
– ไมไดอางองมาตรฐาน SGML อกตอไป
– เปนมาตรฐานท*รวมกนออกโดย W3C และ WHATWG (Web Hypertext Application Technology Working Group)
– ตด tag สาหรบการจดรปแบบเอกสารออกไปอยางถาวร
– เพ*ม tag สาหรบ semantic HTML ข.นมา เชน <section>, <article> หรอ <email>
– สามารถใช mathML และ svg (Scalable Vector Graphics) ในเอกสารไดโดยตรง
สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)
• HTML5 draft (cont.)– เพ*ม tag <canvas> เพ*อนามาใชแทน flash
– เพ*ม tag <video> และ <audio> สาหรบแสดงวดโอและเสยง
– รองรบการทางานแบบ drag-and-drop• สงเกตการณทางานของ gmail ซ* งสามารถแนบไฟล (attach file) โดยใชการลากและวางได
สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)
• HTML5 draft (cont.)– HTML5 ยงเปนเพยงโครงราง (draft) อยยงไมถกประกาศใชอยางเปนทางการ
แต web browser หลายรายสามารถรองรบ HTML5 ไดแลว เชน• Google chrome• Firefox 3.6+• IE 9+
– ขอกาหนดของ HTML5 (25/05/2011)• http://www.w3.org/TR/2011/WD-html5-20110525/
– ขอแตกตางระหวาง HTML5 และ HTML 4.01 (25/05/2011)• http://www.w3.org/TR/2011/WD-html5-diff-20110525/
สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)
• HTML5 draft (cont.)
สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)
ความแตกตางระหวางส*งท* computer เหนกบส*งท*มนษยเหน ซ* งเปนเหตผลของการทา semantic HTMLhttp://www.w3.org/TR/2008/NOTE-xhtml-rdfa-primer-20081014/
• คอการอางองท*อยของเอกสาร HTML หรอทรพยากร (resource) อยางอ*นURI ประกอบดวย– URL (Uniform Resource Locator) คอตาแหนงของ เอกสาร HTML เชน
• http://www.camt.cmu.ac.th/mmit• file:///D:/document/file• โดย http หรอ file เปนโพรโตคอลสาหรบการเรยกเอกสาร HTML
– URN (Uniform Resource Name) คอช*อของเอกสาร HTML เชน index.html
• สงเกตวา URI ของเอกสาร html มกจะข.นตนดวย www เน*องจาก แตเดมน.นเอกสาร HTML ถกแจกจายจากโครงการ WWW ซ*งมช*อ server วา www ดงน.น www จงกลายเปนช*อ server ท*ใหบรการไฟล HTML ไปโดยปรยาย
URI - Uniform Resource IdentifierURI - Uniform Resource Identifier
• เปนขอกาหนดสาหรบการรบสงเอกสาร HTML ผานเครอขาย
• WWW เปนผกาหนดมาตรฐานของโพรโตคอลน. และไดเขาสระบบมาตรฐานของ IEFT ซ*งไดรหสมาตรฐานดงน.– HTTP/1.0 IETF RFC 1945 http://tools.ietf.org/html/rfc1945
– HTTP/1.1 IETF RFC 2616 http://tools.ietf.org/html/rfc2616
HTTP - HyperText Transfer ProtocolHTTP - HyperText Transfer Protocol
HTTP - HyperText Transfer Protocol (cont.)HTTP - HyperText Transfer Protocol (cont.)
Request
Response
• ข.นตอนการทางานของ HTTP– เคร*องลกขาย (client) รองของทรพยากรจากเคร*องแมขาย (server) เรยก
กระบวนการน.วา request• ตามมาตรฐาน HTTP ขอมลการรองขอแบงออกเปน 2 สวนคอ header กบ content ในบางกรณจะเรยกสวน content วา body หรอ data
– เคร*องแมขายตอบรบการรองขอของเคร*องลกขายโดยสงทรพยากรท*เคร*องลกขายตองการกลบมาเรยกกระบวนการน.วา response• ตามมาตรฐาน HTTP ขอมลการตอบรบแบงออกเปน 2 สวนคอ header กบ content ในบางกรณจะเรยกสวน content วา body หรอ data
HTTP - HyperText Transfer Protocol (cont.)HTTP - HyperText Transfer Protocol (cont.)
• ขอมลสวน header ของ request– ในสวนน.ของการ request จะใหขอมลของประเภทการ request ตาแหนงและ
ช*อของทรพยากรท*รองขอ และรนของมาตรฐาน HTTP ท*ใชตดตอGET /index.html HTTP/1.1
– หากเปนการรองขอจาก web browser จะใหขอมลอ*นๆประกอบดวย เชน ช*อของโปรแกรม web browser และขอมล cookie ซ* งขอมลในสวนน.จะใชรปแบบ ช*อขอมลตามดวย : และตามดวยคา
HTTP - HyperText Transfer Protocol (cont.)HTTP - HyperText Transfer Protocol (cont.)
• ขอมลสวน body ของ request– ขอมลสวนน.จะถกสงมาในบางประเภทของ request เทาน.น
• ถาเปนประเภท GET จะไมสงขอมลสวนน.
• ถาเปนประเภท POST จะสงขอมลสวนน.ไปดวย
– โดยท*วไปขอมลในสวนน.จะตองเลอกวธเขารหส เพ*อใหเหมาะสมกบขอมลท*ตองการสง การบอกวธเขารหสจะใช MIME type เปนวธการบอก เชน• application/x-www-form-urlencoded
• multipart/form-data
• text/plain
HTTP - HyperText Transfer Protocol (cont.)HTTP - HyperText Transfer Protocol (cont.)
• ขอมลสวน header ของ response– สวนน.จะบอกรายละเอยดเก*ยวกบขอมลท*จะถกสงตามมากบสวน content ของ
response รายละเอยดท*สาคญในสวนน.ไดแก• สถานะของการรองขอ จะออกมาเปนรหสเพ*อบอกวาการรองขอน.นไดผลเปนเชนไร เชน
– 200 หมายถง การรองขอประสบความสาเรจ
– 404 หมายถง ไมพบทรพยากรท*ตองการรองขอ
– รหสอ*นดไดจากมาตรฐาน HTTP/1.1 IETF RFC 2616
• Content-Type ซ* งเปน MIME type ของ response เพ*อใหผรองขอเตรยมกระบวนการสาหรบประมวลผล content ท*จะตามมา
HTTP - HyperText Transfer Protocol (cont.)HTTP - HyperText Transfer Protocol (cont.)
• ขอมลสวน header ของ response (cont.)– วนท*ท*ทรพยากรน. ถกสรางข.นมา และวนหมดอายของทรพยากรน. เพ*อใหผ
รองขอทราบวา ในการรองขอคร. งตอไปจะใชขอมลเดม (cache) ไดหรอไม
HTTP - HyperText Transfer Protocol (cont.)HTTP - HyperText Transfer Protocol (cont.)
• ขอมลสวน content ของ response– หากเปนเอกสาร HTML กคอ เอกสาร HTML ท*ผพฒนาเขยนข.นมาน.นเอง
– หากเปนทรพยากรอ*น กคอ ขอมลภายในไฟลท*รองขอ
HTTP - HyperText Transfer Protocol (cont.)HTTP - HyperText Transfer Protocol (cont.)
HTTP - HyperText Transfer Protocol (cont.)HTTP - HyperText Transfer Protocol (cont.)
ภาพรวมของขอมลท*รบสงโดย HTTP
http://en.wikipedia.org/wiki/Http
• จากท*ไดศกษามาแลววาการรบสงขอมล จะตองมการกาหนดชนดขอมลท*อกฝ*งจะไดรบ
• โพรโตคอล HTTP จะใช MIME type สาหรบการบอกประเภทของขอมล– MIME คอมาตรฐานของ IETF ท*ใชระบประเภทของเน.อหา (content) ท*จะ
สงผานเครอขาย เพ*อใหฝ*งรบเตรยมการสาหรบประมวลผลเน.อหาท*จะไดรบน.น
MIME - Multipurpose Internet Mail ExtensionsMIME - Multipurpose Internet Mail Extensions
• แตเดมน.น MIME ถกใชกบโพรโตคอลในการรบสง e-mail– สวน message ของ e-mail อาจเปนไดหลายรปแบบ เชน ขอความ หรอ รปภาพ
– MIME จะใช MIME type ในการบอกรปแบบของ message
• MIME type จะอยในรปของ type/subtype– โดยมาตรฐานของ MIME น.นระบเพยงแต type เทาน.น สวน subtype จะข.นอย
กบมาตรฐานอ*น ซ* งกแลวแต ผออกมาตรฐานของ subtype น.นๆ
MIME - Multipurpose Internet Mail Extensions (cont.)MIME - Multipurpose Internet Mail Extensions (cont.)
• ตวอยาง MIME type– text/html
– text/plain
– image/gif
– image/jpeg
• บอยคร. งท*จะพบวา MIME type จะถกเรยกวา Content Type เน*องจาก header ของ HTTP จะสง MIME type ผาน header ท*ช*อวา Content-Type
MIME - Multipurpose Internet Mail Extensions (cont.)MIME - Multipurpose Internet Mail Extensions (cont.)
• web browser สวนใหญมกจะเตรยมการประมวลผลสาหรบ MIME type แบบท*ใชท*วไปบน Internet อยแลว แตหากเปน MIME type เฉพาะ อาจตองตดต.งโปรแกรมเสรมเพ*อใหสามารถประมวลผล MIME type น.นได
• สาหรบเอกสาร HTML จะม MIME type เปน– text/html สาหรบ HTML
– applicaton/xml สาหรบ XML
– application/xhtml+xml สาหรบ XHTML
MIME - Multipurpose Internet Mail Extensions (cont.)MIME - Multipurpose Internet Mail Extensions (cont.)
มาตรฐาน HTMLมาตรฐาน HTML
• ช*อ tag เปดจะถกลอมรอบโดย < และ > เชน <html>
• ช*อ tag ปดจะถกลอมรอบโดย </ และ > เชน </html>
• tag เด*ยวสามารถเขยนแบบยอตามมาตรฐาน XML ได– เชน tag <br> สามารถเขยนเปน <br />
– tag เด*ยวคอ tag ท*ไมตองการขอความระหวาง tag เปด และ tag ปด เชน tag <br> ท*หมายถงการข.นบรรทดใหม
ขอกาหนดการเขยน tag ของเอกสาร HTMLขอกาหนดการเขยน tag ของเอกสาร HTML
• tag เปลา (empty tag) สามารถเขยนโดยใช tag เปด แลวตามดวย tag ปด ไมอนญาตใหเขยนแบบส.นตามมาตรฐาน XML– การเขยนท*ถกตอง
• <script type="text/javascript" src="web.js"></script>
– การเขยนท*ไมถกตอง• <script type="text/javascript" src="web.js" />
ขอกาหนดการเขยน tag ของเอกสาร HTML (cont.)ขอกาหนดการเขยน tag ของเอกสาร HTML (cont.)
• attribute หรอคณสมบตของ tag จะถกเขยนอยใน tag เปด ค*นดวยชองวาง คาของ attribute ถกกาหนดดวยเคร*องหมาย =– เชน <textarea name="address" cols="80" rows="25">…</textarea>
– สาหรบมาตรฐาน XHTML แลวบงคบวา คาของ attribute ตองอยภายในเคร*องหมาย " แตมาตรฐาน HTML ไมไดบงคบ
• ช*อ tag และ attribute สามารถเขยนไดท.งแบบตวพมพเลกและตวพมพใหญ หรอเขยนผสมกนกได (case-insensitive)– สาหรบมาตรฐาน XHTML ใหเขยนช*อ tag และ attribute ดวยตวพมพเลก
ขอกาหนดการเขยน tag ของเอกสาร HTML (cont.)ขอกาหนดการเขยน tag ของเอกสาร HTML (cont.)
• white space หมายถง ส*งท*ใชแบงคาภาษาองกฤษและไมสามารถมองเหนได เชน– ชองวาง (space) ท*ไดจาการกดแปน space bar
– tab
– enter (การข.นบรรทดใหม)
• สาหรบทก white space ท*อยตดกนจะถกตความเปนชองวางเพยงชองเดยวเทาน.น
ขอกาหนด white space ของเอกสาร HTMLขอกาหนด white space ของเอกสาร HTML
• ตวอยางการแสดงผลของเอกสาร HTML ท*ม white space– code HTML
<h1>I love Web
Programming
very much</h1>
– จะแสดงผลเปนI love Web Programming very much
ขอกาหนด white space ของเอกสาร HTML (cont.)ขอกาหนด white space ของเอกสาร HTML (cont.)
• จากลกษณะการเขยน tag HTML ท*จะใชเคร*องหมาย < ในการบอกช*อ tag จะเหนไดวาจากลกษณะน. ถาผพฒนาตองการแสดงอกขระ < ออกมาในการแสดงผลจะไมสามารถทาไดเพราะ จะถกตความวาเปนช*อ tag เชน– <a href="page2.html"> <click here> </a>
– สงเกตวา web browser จะตความ <click here> วาเปน tag ของ HTML และทาใหการแสดงผลผดพลาด
การ escape ของ tag HTMLการ escape ของ tag HTML
• การท*จะทาใหเอกสาร HTML แสดงอกขระ < ไดน.นตองอาศยการทา escape ในท*น. จะใชการแทนท*อกขระโดยใชรหสแทน ซ* งรหสของอกขระ < คอ <– เคร*องหมาย & (ampersand) เปนเคร*องหมายพเศษของภาษา markup โดยเปน
การบอกวาใหแสดงอกขระตามรหสท*อยระหวาง & กบ ;
– ในกรณเดยวกนหากตองการแสดงอกขระ & ในเอกสาร HTML ใหใชรหส & ในการแสดงอกขระ &
– นกศกษาสามารถตรวจสอบรหส escape ของ HTML ไดท*• http://www.escapecodes.info/
การ escape ของ tag HTML (cont.)การ escape ของ tag HTML (cont.)
• ในกรณเดยวกนกบอกขระ < หากคาของ attribute ใน tag HTML มอกขระ เชน " จะทาให web browser ตความผด จาเปนตองใชรหส escape เชนเดยวกน– การแสดงผลท*ผดพลาด (คาท*ตองการคอ 8" x 4")
• <input type="text" name="product_size" value="8" x 4"" />
– การแสดงผลท*ถกตอง• <input type="text" name="product_size" value="8" x 4"" />
• จากขอกาหนดเร*อง white space หากตองการใหแสดงผลโดยเวนชองวางมากวา 1 ชองวาง ใหใชรหส escape แทนการเวนชองวางธรรมดา
การ escape ของ tag HTML (cont.)การ escape ของ tag HTML (cont.)