HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B...

42
RASLAPAT SIRIWAT HTML Web Programming

Transcript of HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B...

Page 1: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

RASLAPAT SIRIWAT

HTMLWeb Programming

Page 2: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

วตถประสงควตถประสงค

• สามารถทราบและอธบายความเปนมาการพฒนาภาษาเวบ

• สามารถบอกองคประกอบของภาษา HTML ได

• สามารถบอกประโยชนของการเขยน HTML ได

• สามารถอธบายมาตรฐานเวบได

Page 3: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• ในยคเร*มแรกของการใชงานเครอขายมความมงแนนท*จะแจกจายเน.อหาในลกษณะของเอกสาร (document) ซ* งเอกสารในยคน.นเปนในลกษณะของขอความเปลา (plain text)– ขอความเปลาคอ ไฟลท*มนามสกล .txt ท*ใชอยในปจจบน

– ขอความเปลามขอดอยคอ ยากตอการอาน เพราะไมมการจดรปแบบ เชน ส หรอการเนนคา

– ไมมโครงสรางเอกสารท*ชดเจน (non-formal)

ท�มาของ HTMLท�มาของ HTML

Page 4: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• ในป ค.ศ. 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

Page 5: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

การถอกาเนดของ HTML (cont.)การถอกาเนดของ HTML (cont.)

A screen in an Enquire scheme

http://http://www.w3.org/History/1989/p

roposal.html

Page 6: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• 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.)

Page 7: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• ในชวง ค.ศ. 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

การเปล�ยนแปลงของมาตรฐานการเปล�ยนแปลงของมาตรฐาน

Page 8: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• จากการขยายตวของ 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.)

Page 9: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• web browser ตางไดเพ*มความสามารถใหแก web browser เพ*อหวงชกจงโปรแกรมเมอรใหพฒนา HTML ตามแนวทางของ web browser น.น และจะไดเปนผกาหนดมาตรฐานของ HTML โดยปรยาย– แตการแขงขนของ web browser สงเสยจน ไมม web browser ใดสามารถเปน

ศนยกลางของมาตรฐาน HTML ได

– ภาระจงตกอยกบโปรแกรมเมอรท*จะตองสรางเอกสาร HTML เพ*อใหสามารถใชไดกบทก web browser ท*มภายในตลาด• โดยปกตแลวการสรางเอกสาร HTML ใหกบองคกรใด มกจะมการจากด web browser ท*สามารถทางานไดไวเสมอ

การเปล�ยนแปลงของมาตรฐาน (cont.)การเปล�ยนแปลงของมาตรฐาน (cont.)

Page 10: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• 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

Page 11: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• 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.)

Page 12: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• HTML 4.01– เน*องในชวงของการกาหนดมาตรฐานน. มเอกสาร HTML จานวนมากบน

Internet และมความตองการจดหมวดหมเอกสารโดย search engine ซ* งตองการโครงสรางขอมลในแบบ semantic (ขอมลเชงความหมาย) จงไดตด tag ท*ใชจดรปแบบ เชน <font> หรอ <center> ออกไปเพ*อใหเอกสารเหลอแต tag ท*ใชแสดงโครงสรางของขอมลจรง• การม tag การจดรปแบบจะทาใหเอกสารมความซบซอน ยากแกการกาหนดวาสวนใดเปนขอมลหรอสวนใดเปนการจดรปแบบ ทาใหโครงสรางของ HTML ไมสามารถส*อความหมายของขอมลได

• การจดรปแบบจะปลอยใหเปนหนาท*ของ CSS แทน

สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)

Page 13: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• 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.)

Page 14: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• 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.)

Page 15: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• 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.)

Page 16: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• 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.)

Page 17: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• HTML5 draft (cont.)– เพ*ม tag <canvas> เพ*อนามาใชแทน flash

– เพ*ม tag <video> และ <audio> สาหรบแสดงวดโอและเสยง

– รองรบการทางานแบบ drag-and-drop• สงเกตการณทางานของ gmail ซ* งสามารถแนบไฟล (attach file) โดยใชการลากและวางได

สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)

Page 18: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• 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.)

Page 19: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• HTML5 draft (cont.)

สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)สรปการเปล�ยนแปลงท�สาคญของเอกสาร HTML (cont.)

ความแตกตางระหวางส*งท* computer เหนกบส*งท*มนษยเหน ซ* งเปนเหตผลของการทา semantic HTMLhttp://www.w3.org/TR/2008/NOTE-xhtml-rdfa-primer-20081014/

Page 20: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• คอการอางองท*อยของเอกสาร 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

Page 21: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• เปนขอกาหนดสาหรบการรบสงเอกสาร 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

Page 22: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

HTTP - HyperText Transfer Protocol (cont.)HTTP - HyperText Transfer Protocol (cont.)

Request

Response

Page 23: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• ข.นตอนการทางานของ 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.)

Page 24: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• ขอมลสวน 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.)

Page 25: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• ขอมลสวน 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.)

Page 26: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• ขอมลสวน 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.)

Page 27: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• ขอมลสวน header ของ response (cont.)– วนท*ท*ทรพยากรน. ถกสรางข.นมา และวนหมดอายของทรพยากรน. เพ*อใหผ

รองขอทราบวา ในการรองขอคร. งตอไปจะใชขอมลเดม (cache) ไดหรอไม

HTTP - HyperText Transfer Protocol (cont.)HTTP - HyperText Transfer Protocol (cont.)

Page 28: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• ขอมลสวน content ของ response– หากเปนเอกสาร HTML กคอ เอกสาร HTML ท*ผพฒนาเขยนข.นมาน.นเอง

– หากเปนทรพยากรอ*น กคอ ขอมลภายในไฟลท*รองขอ

HTTP - HyperText Transfer Protocol (cont.)HTTP - HyperText Transfer Protocol (cont.)

Page 29: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

HTTP - HyperText Transfer Protocol (cont.)HTTP - HyperText Transfer Protocol (cont.)

ภาพรวมของขอมลท*รบสงโดย HTTP

http://en.wikipedia.org/wiki/Http

Page 30: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• จากท*ไดศกษามาแลววาการรบสงขอมล จะตองมการกาหนดชนดขอมลท*อกฝ*งจะไดรบ

• โพรโตคอล HTTP จะใช MIME type สาหรบการบอกประเภทของขอมล– MIME คอมาตรฐานของ IETF ท*ใชระบประเภทของเน.อหา (content) ท*จะ

สงผานเครอขาย เพ*อใหฝ*งรบเตรยมการสาหรบประมวลผลเน.อหาท*จะไดรบน.น

MIME - Multipurpose Internet Mail ExtensionsMIME - Multipurpose Internet Mail Extensions

Page 31: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• แตเดมน.น 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.)

Page 32: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• ตวอยาง 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.)

Page 33: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• 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.)

Page 34: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

มาตรฐาน HTMLมาตรฐาน HTML

Page 35: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• ช*อ tag เปดจะถกลอมรอบโดย < และ > เชน <html>

• ช*อ tag ปดจะถกลอมรอบโดย </ และ > เชน </html>

• tag เด*ยวสามารถเขยนแบบยอตามมาตรฐาน XML ได– เชน tag <br> สามารถเขยนเปน <br />

– tag เด*ยวคอ tag ท*ไมตองการขอความระหวาง tag เปด และ tag ปด เชน tag <br> ท*หมายถงการข.นบรรทดใหม

ขอกาหนดการเขยน tag ของเอกสาร HTMLขอกาหนดการเขยน tag ของเอกสาร HTML

Page 36: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• 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.)

Page 37: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• 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.)

Page 38: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• white space หมายถง ส*งท*ใชแบงคาภาษาองกฤษและไมสามารถมองเหนได เชน– ชองวาง (space) ท*ไดจาการกดแปน space bar

– tab

– enter (การข.นบรรทดใหม)

• สาหรบทก white space ท*อยตดกนจะถกตความเปนชองวางเพยงชองเดยวเทาน.น

ขอกาหนด white space ของเอกสาร HTMLขอกาหนด white space ของเอกสาร HTML

Page 39: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• ตวอยางการแสดงผลของเอกสาร 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.)

Page 40: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• จากลกษณะการเขยน tag HTML ท*จะใชเคร*องหมาย < ในการบอกช*อ tag จะเหนไดวาจากลกษณะน. ถาผพฒนาตองการแสดงอกขระ < ออกมาในการแสดงผลจะไมสามารถทาไดเพราะ จะถกตความวาเปนช*อ tag เชน– <a href="page2.html"> <click here> </a>

– สงเกตวา web browser จะตความ <click here> วาเปน tag ของ HTML และทาใหการแสดงผลผดพลาด

การ escape ของ tag HTMLการ escape ของ tag HTML

Page 41: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• การท*จะทาใหเอกสาร HTML แสดงอกขระ < ไดน.นตองอาศยการทา escape ในท*น. จะใชการแทนท*อกขระโดยใชรหสแทน ซ* งรหสของอกขระ < คอ &lt;– เคร*องหมาย & (ampersand) เปนเคร*องหมายพเศษของภาษา markup โดยเปน

การบอกวาใหแสดงอกขระตามรหสท*อยระหวาง & กบ ;

– ในกรณเดยวกนหากตองการแสดงอกขระ & ในเอกสาร HTML ใหใชรหส &amp; ในการแสดงอกขระ &

– นกศกษาสามารถตรวจสอบรหส escape ของ HTML ไดท*• http://www.escapecodes.info/

การ escape ของ tag HTML (cont.)การ escape ของ tag HTML (cont.)

Page 42: HTML - Chiang Mai Universitymyweb.cmu.ac.th/wijit.a/954242/week2/HTML2.pdf · ' XHTML 1.0 (cont.) B ˛$ , ˛ ˙ % E ˛ ˙ XML ˜ ! '  B

• ในกรณเดยวกนกบอกขระ < หากคาของ 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&quot; x 4&quot;" />

• จากขอกาหนดเร*อง white space หากตองการใหแสดงผลโดยเวนชองวางมากวา 1 ชองวาง ใหใชรหส escape &nbsp; แทนการเวนชองวางธรรมดา

การ escape ของ tag HTML (cont.)การ escape ของ tag HTML (cont.)