Download - HTML5 และ CSS ขั้นต้น•ท *ต
การสรางเวบเพจโดยใช HTML5 และ CSS ขนตนPart I เร*อง หลกภาษา HTML และ tag พ <นฐาน
ผศ.วนชย ขนต [email protected] คณะพา&ชยศาสต,และการ1ญ3 มธ.
http://www.bus.tu.ac.th/usr/wanchai/IS216 หรอเขาดวยชอยอ bit.ly/tbsis216
IS216 การพฒนาโปรแกรมประยกตโดยผใช
IS281 เคร*องมอสงเสรมความสาเรจของผใช
หวขอ
2
แนะ7การเ9ยน• วตถประสงค
– เพ*อใหนกศกษาเขาใจหลกภาษาสาหรบเขยนเวบ สามารถคนควาเพ*มเรยนรดวยตนเอง และสามารถเขยนเวบเพจดวยภาษา HTML และ CSS ได
• บรรยายและฝกปฏบต
– ควรหาเวลาคนควาเพ*มเตมและฝกฝนนอกเวลาเรยนดวย • assignment
– ใหเขยนเวบเพจ แนะนาตวนกศกษาและนาเสนอสาระความร ท*เปนประโยชนตอผชมท*วไป เวบท*นกศกษาเขยนจะนาเสนอผานเวบเซรฟเวอรของคณะ
– โจทยและเง*อนไขดในเวบ www.bus.tu.ac.th/usr/wanchai/is216 • การสอบ
– จะสอบปฏบตกบเคร*องคอมพวเตอร
– open book
3การ:ด<ออาจาร?และขอรAสBานเCอการ upload assignment
• Facebook: https://www.facebook.com/wanchai.khanti
• โทร: |}~ �ÄÅ ÄÄ|}
• อเมล: [email protected] ระบ subject ของอเมลข <นตอนดวย IS216#เลขทะเบยนนกศกษา (เขยนตดกนไมเวนวรรค) เชน IS216#5802686506 แจงสง assignment (ขอใหเขยนตามรปแบบท*กาหนดอยางเครงครด)
เพ*อความสะดวกในการตดตอส*อสาร แจงขาวดวน และแจงรหสผานสาหรบ upload เวบข =น server ของคณะ ใหนกศกษาสงอเมลถงอาจารย ระบใน เน <อจดหมาย แจงช*อ เลขทะเบยน และ section ใหอาจารยทราบภายในวนนK
4
World Wide Web❖ กลมของเวบเพจท*กระจายและโยงใยอยท*วโลก
❖ เวบเพจเปนหนาเอกสาร ท*เขยนดวยภาษา HTML
❖ เอกสารแตละหนาจะมท*อยท*ไมซ <ากน
❖ เบราวเซอร (browser) ทาหนาท*ในการนาเอกสารท*เขยนดวยภาษา HTML มาจดวางและแสดงผล
❖ ทางานแบบ Client/Server architecture
5
World-Wide Web 6
Tim Berners-Lee : The World Wide Web inventor
1989 Proposes global hypertext project called "World Wide Web" 1991 The Web debuts on the Internet 1993 University of Illinois releases Mosaic browser 1994 Joins M.I.T. to direct the W3 consortium 1999 Today nearly 150 million people log on to the Internet
7
DอความหลายG:ขอความหลายมต (Hypertext) เปนกลไกทางซอฟตแวร
สาหรบเช*อมโยงเอกสารหน*งไปยงเอกสารอ*นท*สมพนธ
กนซ*งเอกสารท*เช*อมโยงถงกนน <นอาจอยในเคร*องเดยวกนหรออยตางเคร*องกนแตเช*อม
ถงกนโดยเครอขาย เอกสารท*ถกเช*อมโยงถงสามารถบรรจตวเช*อมท*จะ
เช*อมโยงไปสเอกสารอ*น ๆ อกกได
8
HงJ(Link)ลงคโดยท*วไปหมายถงรปภาพหรอขอความในเอกสาร
HTML ท*ผชมสามารถคลกได เม*อคลกแลวนาไปส
เอกสารใหมในระบบ World Wide Web หรอทาใหกระ
โดดไปสวนอ*นของเอกสารเดม
9
Hypermedia Web
Hypermedia
ขอความ รปภาพ เสยง ภาพเคล*อนไหว
10
หKาเLบ หNอ เLบเพจเวบเพจ (web page) หมาย
ถงหนาเอกสารท*ใหบรการ
ผานระบบเวลดไวดเวบ
ผอานจะตองใชโปรแก
รมสาหรบอานท*เรยกวาเวบ
เบราวเซอร(web browser)
11
โฮมเพจโฮมเพจ (home page) หมายถงเวบ
เพจหนาแรกขององคกร เปนหนา
เอกสารท*ใชตอนรบผใชท*แวะเขามาชม ไดรบการออกแบบอยาง
สวยงาม มกมภาพประกอบและ
มหวขอเลอกท*จะเช*อมโยงไปยง
เอกสารหนาอ*นท*มรายละเอยด
ในแตละเร*องมากข <น
ในกรณท*เปนเวบเพจสวนบคคล
มกเปนหนาท*แนะนาตวเจาของ
เวบเพจ
12
เLบไซS (Web Site)• ท*ต <งในระบบเวลดไวดเวบ
• แตละท*จะบรรจเวบเพจและมโฮมเพจ
เปนหนาแรก
• แตละท*อาจบรรจเอกสารหรอแฟมขอมล
ชนดอ*นท*ไมใชเวบเพจดวยกได
• แตละท*จะมเจาของและจดการโดย
บคคล บรษท หรอองคกร
13
Client/Server Architectureof The Web
Internet
HTMLDocuments
Web Browser
HTTP HTTP
Web Server
Client Server
14
HTTPHypertext Transfer Protocol (HTTP) เปนโปรโทคอลประยกต
สาหรบแพรกระจาย หรอประสานการแลกเปล*ยนขอมล hypermedia ผานทางเครอขายอนเทอรเนต
http://www.tbs.tu.ac.th/
โปรโทคอล
ชLอเวบไซตประกอบดวยชLอเครLองแมขายและชLอโดเมน
โปรโทคอลหมายถงกฎเกณฑทQใชในการควบคมการสQอสาร
15
เบราTเซอ,UบการVงานแบบ Offlineนอกจากเบราวเซอรจะประสานการถายโอนขอมลกบเวบ
เซรฟเวอรโดยใชโปรโทคอล HTTP แลว เบราวเซอรสวนใหญ
ยงสามารถอานเอกสาร HTML ท*เกบอยในเคร*องเดยวกน(กบท*
เบราวเซอรกาลงทางาน) ไดดวย ซ*งการเขยนเวบเพจสวนใหญ
แลวจะเขยนเกบไวในเคร*องท*เรากาลงทางานกอน และใช
เบราวเซอรอานข <นมาตรวจสอบจนเปนท*พอใจแลวจงทากา
รบรรจข <น (upload) ไปยงเคร*องบรการเวบ (Web Server)เพ*อ
ใหผ อ*นเรยกไปอานไดตอไป
16
การสWางเLบเพจ• การสรางเวบเพจปจจบนสามารถทาไดหลายวธ มโปรแกรมและเคร*องมอทาง
ซอฟตแวรมากมายท*ชวยใหสรางเวบไดงายกวาแตกอน แตอยางไรกตาม ไมวา
จะสรางเวบดวยวธใด ทายท*สดแลวหนาเวบน <นตองไปถงเบราวเซอรในรปของ
ภาษา HTML ซ*งเปนมาตรฐานท*ทกเบราวเซอรเขาใจและสามารถนาไปแส
ดงผลบนหนาเวบเบราวเซอรได
• ส*งท*เราจะเรยนในวชาน <คอพ <นฐานของการสรางเวบดวย HTML
• ปจจบนมโปรแกรมหรอเคร*องมอชวยในการสรางเวบเปนจานวนมาก ไมวา
จะเปนโปรแกรมใด หนาท*ของมนคอผลต HTML ไฟลเพ*อใหใชเบราวเซอรเปด
อานไดน*นเอง
• ในชวงแรกจะเรยนการเขยนเวบแบบดบ ๆ กอนเพ*อใหนกศกษาเขาใจหลก
ภาษา HTML และจะแนะนาโปรแกรมและเคร*องมอชวยสรางในลาดบตอไป
17
เปนภาษาสาหรบกาหนดรปแบบการจดวางสวนตาง ๆ ของเอกสารเวบและกาหนดการเช*อมโยงไปยงเอกสารอ*น มการกาหนดไวยากรณสาหรบ จดวางขอความ รปภาพและสวนประกอบตาง ๆ
ของเอกสารเพ*อบงคบใหเบราวเซอร แสดงผลตามแบบท*ตองการ
Hypertext Markup Language (HTML)
18
HTML Standard• HTML 0 (1989)
• HTML 1 (early 1990s)
• HTML 2.0 (1994)
• HTML 3.0 (1995)
• HTML 3.2 (May 1996)
• HTML 4.0 (Dec 1997)
• HTML 4.1 (Dec 1999)
• XHTML 1.0 (Jan 2000)
• XHTML 1.1 (May 2001)
• HTML 5 (Oct 2014)
องJกรXYหนดมาตรฐาน[อ http://www.w3.org
XHTML เ\นภาษาXป`บปaงมาจาก HTML เCอใcเ\นไปตามมาตรฐานของภาษา XML (eXtensible Markup Language)
HTML Uบ XHTML dหeกการใfXแตก<างUนเgกKอย
19
CSS [ออะไร• CSS เปนภาษาสาหรบอธบายลกษณะแสดงผลของหนาเวบ
สามารถกาหนดรายละเอยดไดดกวาภาษา HTML
โดยเฉพาะอยางย*งในเร*องของการจดวางตาแหนงตาง ๆ
(Layout) และฟอนต
• CSS กบ HTML สามารถใชรวมกนได
• CSS จะเรยนชวงทายตอจาก HTML
20การYUบเhม (Markup)การกากบเพ*ม (markup) หมายถงลาดบของอกขระหรอสญลก
ษณท*เราแทรกเขาไปในขอความเพ*อบงบอกวาตองการใหแสดงผลอยางไร หรออาจใชในการอธบายโครงสรางทางตรรกะของเอกสาร
ตวท*บงบอกถงการกากบเพ*มเราเรยกวาปายระบ (tag)
ตวอยาง เชน <p> เปนปายระบท*ใชสาหรบบอกจดเร*มตนของพารากราฟ ซ*งเวลาแสดงผล เบราวเซอรจะข <นพารากราฟใหมกอนท*จะแสดงขอความท*เขยนไวหลง <p>
ปายระบ จะตองเขยนไวในวงเลบ < >
21
iวอjางYUบเhมอjางkายThis is an <i>italic</i> text.
แสดงผลเปน
This is an italic text.
This is a <b>bold</b> text.
แสดงผลเปน
This is a bold text.
22
เอกสาร HTML ประกอบดวย
• ขอความ(text) - กาหนดเน <อหาของเอกสาร
• ปายระบ (tag) - กาหนดโครงสรางและลกษณะท*ปรากฎใหเหน
ของเอกสาร แตละเอกสารจะมหว(head) และ แกนราง (body)
• head – เปนสวนท*ใสขอมลตาง ๆ ท*เปนประโยชนตอ browser
ในการแสดงเอกสาร จะไมแสดงในวนโดวของเบราวเซอร
• body - เปนสวนท*ใสเน <อหาจรงของเอกสารรวมท <ง tag ตาง ๆ
ท*จะควบคมรปแบบของการแสดง และการเช*อมโยงไปยง
เอกสารอ*น
โครงสWางของเอกสาร HTML
23
<!DOCTYPE html>
<html>
...
...
...
...
...
</html>
โครงสWางของเอกสาร HTML5
HTML แตละ version จะเขยน DOCTYPE ไวตรงบรรทดแรกตางกน version 5 เขยนงายสด
24
<!DOCTYPE html>
<html>
<head>
...แทกทเปนสวนประกอบในสวนหวของเอกสาร ...
</head>
<body>
...ขอความและแทกสาหรบจดรปแบบการแสดง...
</body>
</html>
โครงสWางของเอกสาร HTML5
ทอนบนเปน head ทอนลางเปน body
25
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
Hello
</body>
</html>
โครงสWางของเอกสาร HTML5 26
การเlยนเอกสารmนฉ1บ HTML• HTML files หรอ documents
– เขยนในรป source-code โดยใช text editor เชน Notepad – Notepad: Start-Programs-Accessories
– ใชสกลเปน .htm หรอ .html
– ควรต <งช*อแฟมใหส*อความหมาย
– ช*อแฟมสาหรบโฮมเพจควรใชช*อ index.html ซ*งจะทาใหผ
ชมระบเพยงช*อเวบไซตไมตองระบช*อแฟม ถาผชมไม
ระบช*อแฟม web server จะหาแฟมช*อน <สงไปใหเบราว
เซอร
27
oกปp1:เlยนเLบqวย notepad• เปดโปรแกรม notepad
• พมพ html ตามตวอยางในสไลดท*แลวลงใน notepad
• save file โดยใหสกลของแฟมเปน .htm หรอ .html(ดวธ save ในสไลดถดไป)
• ใชเวบเบราวเซอรเปดดแฟม html ท*เซฟไว โดยไมตองปด
โปรแกรม notepad
• ทดลองปรบแกขอความใน notepad แลวเซฟ
• เรยกเวบเพจท*แกไขข <นมาดโดยไมตองเปดใหมโดยการคลก
ท*ป ม refresh หรอ reload
28rs save เ\นสtล html
ระบสกลของแฟมเปน htm หรอ htmlเปล7ยนจาก Text Documents เปน All Files (*.*)
ปกต Notepad จะเซฟไฟลเปนสกล .txt แตเราจะเซฟเปนสกล .html จงตองเปลยนจงตองเปลยน File Type กอนเซฟ
29The <title> Tag
• แทก <title> ใชสาหรบต <งช*อเอกสาร ช*อน <จะปรากฏท* title bar ของเบราวเซอร
• search engine จะนาช*อเอกสารไปแสดง จงควรใสช*อเอกสารทกคร <งท*เขยน
เวบเพจ
30
การuเอกสารmนฉ1บเบราวเซอรตาง ๆ มกใหเราดเอกสารตนฉบบได
• กรณท*ใช IE ดไดโดยเลอกเมนView ! Source IE จะเปดตนฉบบใหดโดยใช Notepad
• กรณท*ใช Firefox ดไดโดยเลอกเมน View ! Page Source หรอคลกเมาสป มขวาในหนาตางแลวเลอกเมน View Page Source หรอ Ctrl+U
• กรณใช Chrome คลกเมาสป มขวาในหนาตางแลวเลอกเมนView Page Source หรอ Ctrl+U
• กรณใช Safari คลกเมาสป มขวาในหนาตางแลวเลอกเมนView Source หรอ Ctrl+Alt+U
31
White Spaceswhite space หมายถงท*ซ*งเกดจากอกขระ
• Space (เคาะ space bar)
• Tab (เคาะป ม tab)
• Carriage Return (เคาะป ม Enter/Return) ซ*งไมมรปรางใหเหน แตทาใหเกดพ <นท*วาง (วรรค) เพยง ~ ท* เบราวเซอรจะถอวา tab และ Carriage Return เปน space ไมทาให
เวนวรรคหลายตาแหนง หรอข <นบรรทดใหมเหมอนท*เหนใน Editor Extra white spaces is ignored.
เบราวเซอรจะสนใจ white space ตวแรกหลงอกขระเทาน Bน white space ตวอDนทDตามมาถอวาเปนสวนเกน เบราวเซอรจะไมไมนาไปใช น Dนหมายความวา ถาเราใส white space หลายตวตดกน เบราวเซอรจะเวนวรรคใหเพยง S ทDเทาน Bน
32
การเlยนvอwบายหNอหมายเหx• สวนทDเปนคาอธบาย หมายเหต หรอความเหน
(Comment) เบราวเซอรจะไมนาไปแสดงผล • คาอธบายจะใสไวระหวาง <!-- และ --> เชน
<!-- Example by Wanchai -->
<!-- The content of a comment is not displayed to the user, and is not processed by browser -->
33
Syntax of HTML Tags• แทกทกตวจะประกอบดวยช*อเขยนอยในเคร*องหมายวงเลบ <
และ > ช*อแทกจะตองอยตดกบเคร*องหมาย <
• แทกบางตวอาจมตวระบคณลกษณะเฉพาะ (attribute) ประกอบอยดวย
• attribute (ถาม) จะตามหลงช*อแทก ถามหลายตวจะค*นดวย white spaces ลาดบกอนหลงท*ปรากฎของแตละ attribute ไมมความสาคญแต อยางใด
• คาของ attribute จะตามหลงเคร*องหมายเทากบ (=) ซ*งอยหลงช*อ attribute
• อาจใส white spaces ไวกอนหรอหลงเคร*องหมายเทากบดวยกได
• คาของ attribute จะตองใสไวในเคร*องหมายคาพด (") เสมอ
34
iวอjาง
35
iวอjางเhมเ:ม<tag attribute1="2" attribute2="4">
<tag attribute2="4" attribute1="2" >
<tag attribute1 = "2" attribute2="4">
สามารถใช white space ค*นระหวาง
• ช*อ tag กบ attribute
• Attribute กบ attribute
• เคร*องหมาย = กบ ช*อ หรอคาของ attribute
อjาyมzดเค{องหมายv|ด
36
}ญญeกษ~�XใfในสไลÄ• น =าเงน ช*อ tag
• เขยวเขม ช*อ attribute
• สน =าตาล คาของ attribute
ตวอยางเชน
<p align="right">
37
• Container Tags จะมแทกคกนปดทายขนาบเน <อหา(มกเปนขอความ) เอาไวเชน <i>Italics</i> เแทกเปด แทกปด
แทกปด จะมช*อเดยวกบแทกเปด แตนาหนาดวยเคร*องหมายทบ (/) แทกปดจะไมม attribute • Stand-Alone Tags
เปนแทกวาง (empty tag) ไมมแทกท*เขาคกนปดทาย เปนแทกท*ไมจาเปนตองบรรจขอความใด ๆ ไว แทกประเภทน <อาจใสเคร*องหมายทบ (/) ไวทายสดกอนปดวงเลบ เชน <br />
ประเภทของ Tags 38
Tag and Elementสวนยอย (element) เปนสวนประกอบของหนาเวบ ประกอบดวย แทกเปด แทกปด และเน <อหา (content) ท*อยระหวางแทกเปดกบแทกปด
เน <อหา แทกเปด แทกปด
<i>Italics</i> element
Element consists of start tag, optional content and an end tag
39
Block and Inline Elementการแสดง content ท*บรรจในแทกประเภท container ม £ แบบคอ • Block Element เปน element ท*ทางานเปนบลอกจะเร*มตนแสดงท*บรรทด
ใหมเสมอและ content พยายามกนพ <นท*เตมความกวางท*ม • Inline Element เปน element ท*แสดง content ตอเน*องจาก content ของ
แทกกอนหนาน <โดยไมข <นบรรทดใหม และกนพ <นท*เทาท*จาเปน
• Block Element สามารถบรรจไดท <ง Block Element และ Inline Element • Inline Element สามารถบรรจไดเฉพาะ Inline Element ตวอ*นเทาน <น
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>
รายชLอ tag ทLทางานเปนบลอก (ไวอางอง เรยนไมครบทกตว)
40
สามารถใสแทกซอนไวในแทกอ3นไดเพ3อใหมผลหลายอยาง จะตองปดแทกท3ซอนอยในสดกอนตามลาดบยอนหลง
<i>This is some <b>very strong</b> text</i>
<i>This is some <b>very strong</i> text</b>
แÇกÉอน (Tag Nesting)
☑
!
แทกทLอยในตองปดกอนแทกทLอยนอก
41
HTML Entities
HTML entities คอลาดบของกลมอกขระซ*งผลตอกขระพเศษบนหนาจอของ browser ม £ ลกษณะคอ
• อกขระสงวน (Reserved character) < > " & • อกขระท*ไมใชภาษาองกฤษ เชนอกขระลาตน HTML entity แตละตวข <นตนดวย & และจบดวย ; เชน > นอกจากน < ยงสามารถระบอกขระโดยใชคาเลขฐานสบของรหสตว
อกษรตามมาตรฐาน ASCII ไดอกดวย เชนตว ท มคาเปน ~}Å สามารถเขยนเปน entity ไดดงน <คอ · การระบ entity วธน <เหมาะสาหรบใสตวอกษรพเศษบางตวท*ไมปรากฎบนแผงแปนพมพ
42
iวอjาง Entity Entity อกขระท)แสดงผล> เคร%องหมายมากกวา (>) < เคร%องหมายนอยกวา (<) " เคร%องหมายคาพด (")
& Ampersand (&)
© เคร%องหมายลขสทธ; (Copyright ©) ® เคร%องหมายการคาจดทะเบยน (®) ™ เคร&องหมายการคา (™) Non-breaking space
เวนวรรคแตไมยอมใหตดขอความท%น%เพ%อขGน บรรทดใหม (บางท%เรยกวา hard space หรอ fixed space)
43
แ"ก$าง ๆ (ควร,-ก
44
The <p> TagFunction:
กาหนดจดเร*มตนหรอขอบเขตของพารากราฟ (paragraph) Attributes:
align=left|center|right End tag:
</p> ภาษา HTML อนญาตให ละไมใสแทกปดได แตควรใสใหครบ
Contains: text
45
The align attribute of tag <p>
แทกจ <p> มตวระบ สาหรบบอกลกษณะในการแสดง พารากราฟดงน <
align=left|center|right
ตวอยาง
<p align="right">
This paragraph should be right justified.
</p>
46
The <p> Tag(ตอ)
• ใชบอกจดเร3มตนของพารากราฟ เบราวเซอรจะแสดงขอความท3ตามหลง tag นNโดยเวนระยะหางจากพารากราฟกอนเลกนอย แตจะไมเวนวรรคหนาพารากราฟให ถงแมวาเราจะใส space ไวตอนตนของพารากราฟกตาม
47
การแสดงDอความในพารากราฟ• เบราวเซอรจะแสดงขอความในพารากราฟใหเหมาะสมกบความ
กวางของวนโดวของเบราวเซอรโดยอตโนมต ถาบรรทดท*เขยนใน
เอกสาร HTML ยาวมาก เบราวเซอรจะตดข <นบรรทดใหมใหพอดกบ
ความกวางของวนโดว
• ถามการเวนวรรคในเอกสาร HTML โดยการใส space ไวหลายตาแหนง เบราวเซอรจะเวนใหตาแหนงเดยว
• ถามการเปล*ยนขนาดวนโดวของเบราวเซอร เบราวเซอรจะจดแส
ดงขอความในพารากราฟน <นใหเหมาะสมกบความกวางของวนโดว
อกคร <ง
48
The <br /> Tag
เปน tag ชนด stand-alone ใชบงคบใหขอความท*
อยหลง tag น <แสดงในบรรทดใหม(line break) ตวอยาง
Happy birthday to you!<br /> Happy birthday to you!<br> Happy birthday, dear Somchai!<br> Happy birthday to you!
49
The <wbr /> Tag
เปน tag ชนด stand-alone ใชแนะนาใหเบราเซอรตด
คาเพ*อข <นบรรทดใหมท*น*ถาจาเปน (Word Break
Opportunity) เหมาะสาหรบแทรกในคายาว ๆ เพ*อ
ใหเบราเซอรตดคาไดอยางเหมาะสมถาจาเปน
ตองมการตดคาเพ*อข <นบรรทดใหม ตวอยาง
พระนคร<wbr>ศรอยธยา
50
Formatting Text
ระบลกษณะการแสดงขอความในระดบตวอกษรท*อยใน
บลอก แบงเปน £ ประเภทคอ
• Physical Style Text Markup Tags • Logical Style Text Markup Tags
ท <ง £ กลมน <เปน tag ประเภท container จงตองมตวปด
ดตวอยางในเวบ http://www.bus.tu.ac.th/usr/wanchai/html/สามารถเขาดวยช*อยอ j.mp/html_ex
(ควรเปดเวบหนาน <คางไวเพ*อดตวอยางตาง ๆ)
51
Physical Style Text Markup Tags
แทกท*อยในกลมน <มการกาหนดคณสมบตลกษณะตายตว เบราวเซอร
ทกคาย จะแปลความหมายของแทกเหลาน <เหมอนกนหมด เวบเพจท*
ไดจงเหมอนกน
เชน <b> หมายถง ขอความแบบตวหนา
52Physical Style Text Markup Tags
Tag Effect
<b> Boldface
<i> Italics
<big> Renders text in a large font (deprecated)
<small> Renders text in a small font
<strike> Strikethrough text (deprecated)
<sub> Subscript
<sup> Superscript
<tt> Typewriter text (fixed-width font) (deprecated)
<u> Underlined text (deprecated)
<mark> Highlight text
Tag <font> เปน tag ประเภท Physical Style Text Markup แตม attribute จงยกไปอธบายแยกตางหาก
(deprecated) หมายถงจะยกเลกการใชในอนาคต จงไมควรใช tag เหลานGหมายเหต
53
This will display in <b>Bold</b>. This will display in Bold.
E = mc<sup>2</sup> E = mc2
<i>H<sub>2</sub>O</i> H
2O
<strike>This text has been cancelled</strike>
This text has been cancelled
<u>underlined text</u> underlined text
ตวอยางการใช Physical Styles
ผลลพธ
ผลลพธ
ผลลพธ
ผลลพธ
ผลลพธ
54
Logical Style Text Markup Tags
แทกท*อยในกลมน <จะใชช*อส*อความหมาย ซ*งเบราวเซอรแตละคาย/ย*หอ
อาจจะแปลความหมายแทกเหลาน <ตางกน ซ*งจะทาใหการแสดงผลในหนา
เวบมหนาตาตางกน (ตางกนไมมากนก) โดยคงใหผลใกลเคยงกบช*อของ
แทกน <น ๆ เชน <em> หมายถง ขอความท*ตองการเนนเปนพเศษซ*ง เบราว
เซอรอาจจะแสดงเปนตวหนา หรอ เอยง กไดข <นอยกบการแปลความหมาย
ของแตละคายของเบราวเซอร
55
Logical Style Text Markup Tags
Style Name Tag Typical Rendering
Definition <dfn> Bold or bold italics
Emphasis <em> Italics
Strong emphasis <strong> Bold
Citation <cite> Italics
Code <code> Fixed-width font
Keyboard input <kbd> Fixed-width font
Sample text <samp> Fixed-width font
Variable <var> Italics
หมายเหต ท7เบราวเซอรจะตองมการกาหนด Fixed –width font ไวดวยจงจะสามารถ
แสดง fixed-width font ได
56
oกปp1:ลองเขยนเวบตกแตงขอความโดยใชแทกตาง ๆ ท*ไดเรยนไปแลว
ถาทาแลวไมไดผล หรอสงสยประการใด ใหยกมอเรยกอาจารย
57
Web colors• สท*แสดงบนจอภาพเกดจากการผสมสบวก(additive color) ของแมสทาง
แสง Å สคอ แดง(Red) เขยว (Green) และ น <าเงน (Blue) นยมเรยกวา RGB
58
The <font> tagFunction:
ใชกาหนดช*อ ขนาด และสของฟอนตท*ใชแสดงขอความ
Attribute:
color face
size
End tag:
</font>
Contains:
text
(deprecated)
tag น Jจะยกเลกใชในอนาคต
ตองการใหรจกแตไมควรใช
ใหใช tag <span> รวมกบ
style sheet แทน
59
The Attribute colorบอกสได £ วธ วธแรกบอกสวนผสมของแมส วธท*สองบอกช*อส บอกโดย
ใชสวนผสมของแมสของแสง (Red, Green, Blue - RGB) แตละส
บอกดวยเลขฐาน สบหก £ หลกซ*งใชบอกความเขมของสได £Æ�
ระดบ ต <งแต || ซ*งมดสนทจนถง FF ซ*งมความเขมสงสด ตวอยางcolor="#FF0000" สแดงcolor="#00FF00" สเขยว color="#0000FF" สนG าเงน
color="#000000" สดา color="#FFFFFF" สขาว color="#D9D919" สทอง
60
The Attribute color (cont)ใชช%อส ซ% ง HTML 3.2 ไดกาหนดช%อสไว 16 สดงนG aqua black blue fuchsia
gray green lime maroon
navy olive purple red
silver teal white yellow
ตวอยาง <font color="#FF0000">Red</font>
<font color="navy">NavyBlue</font>
ดตวอยางสไดท http://www.bus.tu.ac.th/usr/wanchai/html/ color.htm
61
The attribute face
ใชสาหรบกาหนดช3อฟอนตท3ตองการใหแสดง เชน
<font face="AngsanaUPC, CordiaUPC, JusmineUPC">มหาวทยาลยธรรมศาสตร</font>
การแสดงผลจะขNนอยกบวาเบราวเซอรมฟอนตตามท3ระบไวหรอไม เบราวเซอรจะใชฟอนตแรกท3ม ถาเบราวเซอรไมมฟอนตใดตามท3ระบไวเลย จะใช default font ตามท3เลอกใน preference ของเบราวเซอร
62
The Attribute sizeใชบอกขนาดเสมอน (virtual font size) ของฟอนตซDง
กาหนดดวยตวเลข S ถง d ถาไมระบ default คอ f
ตวอยาง <font size="5">T</font>hammasat
เราอาจบอกขนาดแบบสมพทธกได โดยใชเครDองหมายบวก (+) หรอ ลบ (-) นาหนาตวเลข ซDงหมายถงการเพDมหรอลด ขนาดของ font จากขนาดปจจบนไปอกกD step
ตวอยาง <font size="+2">Biger</font> <font size="-1">Smaller</font>
63
ตวอยางการใช <font>
โดยระบ attribute หลายตวใน tag เดยวกน
<font size="5" color="blue" face="verdana"> This text should appear in blue with verdana typeface</font>
64
Heading Tags<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Function:
กาหนดสวนหวของขอความ มใหเลอก � ระดบ Attributes:
align=left|center|right End tag:
</h1>, </h2>, </h3>, </h4>, </h5>, </h6>
Contains:
text
65ตวอยาง heading<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>
<h2 align="right"> Right over here!</h2>
<h3 align="center"> Smack in the middle</h3>
heading เทยบเทาขJนพารากราฟใหม จงมผลใหพารากราฟ กอนหนา (ถาม)ปดไปกอนโดยปรยาย
Ex
66
The <pre> tagFunction: preformatted text
บอกใหเบราวเซอรแสดงบลอกของขอความตามแบบท*ผ เขยนจดไวแลว เบราวเซอรจะเวนวรรคและข <นบรรทดใหมใหตามตนฉบบท*ผ เขยนเขยน จะแสดงผลโดยใช fixed width font
Attributes:
width=number (ความกวางนบเปนจานวนอกษรท%ตองการใหเบราวเซอรจดแสดงใน 1 บรรทด) (ยกเลกการใช)
End tag:
</pre>; never omitted
Contains: preformatted_content, ไมควรม tag ใดบรรจอยภายใน
67
<pre> Tag Example
<pre> Flight Destination Departing
TG233 Hat Yai 06:25 am
TG245 Hat Yai 07:45 pm
TG257 Trang 06:45 am
</pre>
68
The <hr /> tagFunction: ค*นขอความดวยเสนในแนวนอน Attributes:align=left|center|right (มกใชในกรณท%ระบความยาวของเสน)
noshade = "noshade" (ใหใชเสน 2 มต ไมมความลก)
size (ความหนาของเสน หนวยเปน pixel)
width (ความยาวของเสน หนวยเปน pixel หรอ ความยาวสมพทธเปน %)
End tag: None Contains: Nothing
69
Formatted Lists
ประเภทของ list tag ท7เก7ยวของ
Unordered Lists <ul> , <li>
Ordered Lists <ol> , <li>
Definition Lists <dl>, <dt>, <dd>
70
The <ul> tagFunction: Define an unordered list Attributes: type=disc|circle|square End tag: </ul>
Contains: <li>
71
The <li> tag
Function: Define an item within an ordered, unordered
Attributes: type=disc|circle|square value=number ใชเปล%ยนคาตวเลขหนาหวขอรายการ
End tag: </li>
Contains: list-content
72
ตวอยางการใช unordered list<ul>
<li>First</li> <li>Second</li> <li>Third</li>
</ul>
•First •Second •Third
73The <ol> tag
Function: Define an ordered list
Attributes: start กาหนดคาเร*มตนใหกบเลขหวขอของรายการ
default คอ ~type กาหนดประเภทของเลขหวขอรายการ default คอเลขอารบค
reversed ถาระบจะแสดงคาจากมากไปหานอย
End tag: </ol>
Contains: <li>
‹#›
Type Value for Numbering Ordered Lists
เ�ยดายไÖdเลขไทย
75
ตวอยางการใช ordered list<ol>
<li>First</li> <li>Second</li> <li>Third</li>
</ol>
1. First 2. Second 3. Third
76
The <dl> tagFunction: define a definition list (รายการนยามคาศพท)
Attributes: compact="compact" (ยกเลกการใชแลว)
End tag: </dl>
Contains: <dt> และ <dd>
77
The <dt> tagFunction: Define a definition list term (กาหนดคาศพท)
Attributes: None
End tag: </dt>
Contains: Üอváพà
78
The <dd> tagFunction: Define a definition list description (กาหนดคา
อธบายศพท)
Attributes: None
End tag: </dd>
Contains: ขอความอธบายศพท อาจแสดงไดหลายบรรทด
79
ตวอยางการใช definition list<dl> <dt>HTML</dt> <dd>HTML is a kind of ... </dd> <dt>XHTML</dt> <dd>XHTML is another kind of... </dd> </dl>
HTML
HTML is a kind of ...
XHTML
XHTML is another kind of ...
Ex
การเชLอมโยงเอกสาร Hypertext
81
Uniform Resource Locator (URL)URL ใชสาหรบระบแหลงท*อยของทรพยากรหรอแหลงขอมล (มกเปน
แฟมขอมล) ท*เช*อมตอกบอนเทอรเนต
ในระบบ World Wide Web เบราวเซอรจะหาแฟมขอมลหรอบรการ ตางๆ ตามแหลงท*ระบใน URL
URL ประกอบดวย
■ Protocol (วธการเขาถงแหลงทรพยากร – ไฟล) ■ Server name (ช&อเคร&องแมขายท&เปนแหลงเกบทรพยากร)
■ Port (ชองทางเขาส server มกละไวไมตองบอก)
■ Path (เสนทางท&นาไปสจดหมาย อาจประกอบดวย ช&อโฟลเดอร ช&อไฟล ช&อตาแหนงในไฟล)
ตวอกษรองกฤษใหญ/เลกทLใชใน URL ถอวาเปนคนละตวกน(case sensitive)
‹#›
Common Internet Protocols
83
รปแบบของ URLprotocol://server-name[:port-number]/path
สวนท*อยภายในเคร*องหมาย [ ... ] หมายถงสามารถละไมเขยนกได
โดยท*วไปแลว URL จะ case sensitive ยกเวนช*อเซรฟเวอร
Path เปนเสนทางท*นาไปสทรพยากรท*ตองการโดยท*วไปคอช*อไฟล
บางคร <งระบโฟลเดอรตาง ๆ ท*จะผานเขาไปถงไฟลท*ตองการ
ถาตองการอางถงสวนในสวนหน*งของของเอกสาร html ท*เจาะจงมาก
ข <น เราอาจบอกสวนยอยของเอกสารน <นไดโดยปดปลายของ URL
ดวยเคร*องหมาย # แลวตามดวยช*อท*ระบตาแหนงในเอกสาร
ตวอยาง http://www.bus.tu.ac.th/usr/wanchai/index.html#grossary
84
URL แบบสมบรณ (Absolute URLs)URL แบบสมบรณ (absolute URL) เปน URL ท*เขยนอยางครบ
ถวนหรอยาวเพยงพอในการนาไปสแหลงทรพยากร ไดอยาง
สมบรณ ประกอบดวย ช*อโปรโทคอล ช*อเซรฟเวอร (หมายเลข
พอรท ถาจาเปน)และdirectory path และช*อแฟม
ตวอยาง http://www.bus.tu.ac.th/usr/is216/index.html
85
URL แบบสมพทธ (Relative URL)URL แบบสมพทธ (relative URL) เปน URL ท*ระบท*อยของ
ทรพยากรเชงเปรยบเทยบ โดยเทยบกบเอกสารปจจบนกบเอกสารท*ถกอางถง โดยท*เอกสารท <งคตางกเกบไวในเคร*องเดยวกน จงไมจาเปนตองบอกโปรโทคอลและช*อเซรฟเวอรแตอยางใด
เชน second.html
mim/mimbroc.html เปน URL แบบสมพทธ
86
เม*อไหรควรใช URL แบบใด?
URL แบบสมพทธมประโยชนในการอางถง เอกสารหรอทรพยากรท*อยในเคร*องเดยวกน สวนการอางถงเอกสารท*อยในเคร*องอ*นตองใช
URL แบบสมบรณเพ*อบอกช*อเซรฟเวอรดวย
เอกสารปจจบน
เอกสารปจจบนเอกสารอQน ทQถกอางถง
เอกสารอQน ทQถกอางถง
เอกสารอQน ทQถกอางถง
เอกสารอQน ทQถกอางถง
87
The <a> tagFunction: ใสลXงคลงในเอกสาร HTML เพ&อเช&อมโยงไปยงขอความหรอเอกสารอ&น
Attributes: href ระบ URL ของเอกสารท*ตองการเช*อมโยงไปถง name ใชต <งช*อตาแหนงในเอกสาร สาหรบเช*อมโยงโดย href target ระบวนโดวหรอเฟรมท*ตองการใหแสดงผลหนาท*ล <งค [_self|_blank|frame_name] _self แสดงหนาทลงคทบหนาเดม
_blank แสดงหนาทลงคในวนโดวใหม End tag: </a>
Contains: hypertext anchor
88
ตวอยางการใช <a> เพ&อสรางลงค
<a href="second.html">Click here</a>
Opening tag Closing tag
Attribute Hyperlink ขอความนGคลกได
ถาตองการใหขอความตอไปน <
สามารถคลกตรง Annual Report แลวใหนาเอกสาร report.html มาแสดงแทนท จะ markup ไดดงน
ขอความ Annual Report ซ*งบรรจอยระหวาง tag <a> … </a>จะเปน hypertext anchor เม*อผใชคลกท*ขอความน < เบราวเซอร จะเรยกเอกสาร report.html มาแสดง
89
การเช*อมโยงเอกสารอ*นซ*งเกบอยท*เดยวกน
Take a look at <a href="report.html">Annual Report</a>.
Take a look at Annual Report.
90
ฝกปฏบตการสรางลงคโยงไปเอกสารอ&น
• ใหสรางเอกสาร HTML 2 แฟม เกบไวใน directory เดยวกน ใชช*อแฟมเปน page1.html และ page2.html ตามลาดบ (เพ*อความรวดเรว นกศกษาอาจ save จากตวอยางในหนา … มาใชไดเลย)
• ใหสรางลงคเช*อมโยงจากเอกสารท*หน*ง ไปยงเอกสารท*สอง โดยใหในแฟม page1.html มขอความดงน <click here to see my second page
• ใหทาคา here เปน hypertext link ถาคลกท*น* จะเปดเอกสารท*สอง(ไฟล page2.html) ข <นมาแสดง
ฝกปฏบต
91
View <a href="#sec3">Section 3</a> … … … … … … … …
… <a name="sec3"><h2>Section 3</h2></a>
การเช*อมโยงภายในเอกสารเดยวกน
ช%อตาแหนงในเอกสาร ท%ตGงขGนเพ%อการอางอง
ช%อตาแหนงของเอกสารท% ตองการเช%อมโยงไปถง
92
ฝกปฏบตสรางลงคโยงในเอกสารเดยวกน
• เปดเวบ http://www.bus.tu.ac.th/ usr/wanchai/html/internallink.html
หรอเขาดวยช*อยอ bit.ly/1tb4sMU แลว save ลงใน disk (ไมควร save ดวย
IE โดยตรง ให view source เพ*อเปดดวย notepad กอนแลวจง save ดวย
note pad)
• ให markup แฟมท* save เพ*อสรางลงคเช*อมโยงเพ*อใหคลกท*หวขอใน
table of contents แลวกระโดดไปยงหวขอน <น ๆ ซ*งอยทายแฟม
เดยวกน
93
การเช*อมโยงเอกสารซ*งเกบอยท*serverอ*น
Visit <a href="http://www.tu.ac.th"> my university’s homepage</a>
94
ฝกปฏบตสรางลงคภายนอก
• ใหนกศกษาเขยนเวบและสรางลงคโยงไปยงโฮมเพจของธรรม
ศาสตรท* http://www.tu.ac.th แนะนา
เพQอใหแนใจวามเวบหนาทQเราจะลงคไปควรใชเบราวเซอรเปดเวบ
หนาน|นข|นมากอน แลว copy url จากเบราวเซอรมา pasteลงใน
attribute href ทQนกศกษาเขยน การทาอยางน|จะปองกนการเขยน url ผดและพสจนใหมQนใจ กอนวาหนาเวบทQเราจะลงคไปหาน|นมอยจรง
95
การเช*อมโยงกบ emailIf you have a comment please
<a href="mailto:[email protected]">mail to me.</a>
คาวา mail to me จะเปน hypertext anchor เม*อผใชคลกท*คาน < เบราวเซอรเปดโปรแกรมสงเมล (เชน outlook) ข <นมาใหผใชสง email พรอมท <งนา email address ตามท*ระบไวใน href ไปใสในชองท*อยของผ รบโดยอตโนมต
หมายเหต เคร*องคอมพวเตอรท*ใชจะตองมการต <งคาโปรแกรมท*จะใชสงเมล และช*อ mail server ท*จะใชสงเอาไวแลว จงจะเปดโปรแกรมสงเมลได