is216...

การสรางเวบเพจโดยใช HTML5 และ CSS ขนตน Part I เร*อง หลกภาษา HTML และ tag พ <นฐาน

ผศ.วนชย ขนต [email protected] คณะพาณชยศาสตรและการบญช มธ.

http://www.bus.tu.ac.th/usr/wanchai/IS216 หรอเขาดวยชอยอ bit.ly/tbsis216

IS216 การพฒนาโปรแกรมประยกตโดยผใช IS281 เคร*องมอสงเสรมความสาเรจของผใช

หวขอ

2

แนะนำการเรยน• วตถประสงค

– เพ*อใหนกศกษาเขาใจหลกภาษาสาหรบเขยนเวบ สามารถคนควาเพ*มเรยนรดวยตนเอง และสามารถเขยนเวบเพจดวยภาษา HTML และ CSS ได

• บรรยายและฝกปฏบต

– ควรหาเวลาคนควาเพ*มเตมและฝกฝนนอกเวลาเรยนดวย • assignment

– ใหเขยนเวบเพจ แนะนาตวนกศกษาและนาเสนอสาระความร ท*เปนประโยชนตอผชมท*วไป เวบท*นกศกษาเขยนจะนาเสนอผานเวบเซรฟเวอรของคณะ

– โจทยและเง*อนไขดในเวบ www.bus.tu.ac.th/usr/wanchai/is216 • การสอบ

– Quiz

– สอบกลางภาค สอบภาคปฏบตดวยเคร*องคอมพวเตอร (open book)

3การตดตออาจารยและขอรหสผานเพอการ 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

ขอความหลายมตขอความหลายมต (Hypertext) เปนกลไกทางซอฟตแวร

สาหรบเช*อมโยงเอกสารหน*งไปยงเอกสารอ*นท*สมพนธกนซ*งเอกสารท*เช*อมโยงถงกนน <นอาจอยในเคร*องเดยวกนหรออยตางเคร*องกนแตเช*อมถงกนโดยเครอขาย

เอกสารท*ถกเช*อมโยงถงสามารถบรรจตวเช*อมท*จะ เช*อมโยงไปสเอกสารอ*น ๆ อกกได

8

ลงค(Link)ลงคโดยท*วไปหมายถงรปภาพหรอขอความในเอกสาร

HTML ท*ผชมสามารถคลกได เม*อคลกแลวนาไปสเอกสารใหมในระบบ World Wide Web หรอทาใหกระโดดไปสวนอ*นของเอกสารเดม

9

Hypermedia Web

Hypermedia

ขอความ รปภาพ เสยง ภาพเคล*อนไหว

10

หนาเวบ หรอ เวบเพจ

เวบเพจ (web page) หมายถงหนาเอกสารท*ใหบรการผานระบบเวลดไวดเวบ ผอานจะตองใชโปรแกรมสาหรบอานท*เรยกวาเวบเบราวเซอร(web browser)

11

โฮมเพจโฮมเพจ (home page) หมายถงเวบ

เพจหนาแรกขององคกร เปนหนา

เอกสารท*ใชตอนรบผใชท*แวะเขา

มาชม ไดรบการออกแบบอยาง

สวยงาม มกมภาพประกอบและมหวขอเลอกท*จะเช*อมโยงไปยง

เอกสารหนาอ*นท*มรายละเอยด

ในแตละเร*องมากข <น

ในกรณท*เปนเวบเพจสวนบคคล

มกเปนหนาท*แนะนาตวเจาของเวบเพจ

12

เวบไซต (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

เบราวเซอรกบการทำงานแบบ Offlineนอกจากเบราวเซอรจะประสานการถายโอนขอมลกบเวบ

เซรฟเวอรโดยใชโปรโทคอล HTTP แลว เบราวเซอรสวนใหญยงสามารถอานเอกสาร HTML ท*เกบอยในเคร*องเดยวกน(กบท*เบราวเซอรกาลงทางาน) ไดดวย ซ*งการเขยนเวบเพจสวนใหญแลวจะเขยนเกบไวในเคร*องท*เรากาลงทางานกอน และใชเบราวเซอรอานข <นมาตรวจสอบจนเปนท*พอใจแลวจงทาการบรรจข <น (upload) ไปยงเคร*องบรการเวบ (Web Server)เพ*อใหผ อ*นเรยกไปอานไดตอไป

16

การสรางเวบเพจ• การสรางเวบเพจปจจบนสามารถทาไดหลายวธ มโปรแกรมและเคร*องมอทาง

ซอฟตแวรมากมายท*ชวยใหสรางเวบไดงายกวาแตกอน แตอยางไรกตาม ไมวาจะสรางเวบดวยวธใด ทายท*สดแลวหนาเวบน <นตองไปถงเบราวเซอรในรปของภาษา 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)

องคกรทกำหนดมาตรฐานคอ http://www.w3.org

XHTML เปนภาษาทปรบปรงมาจาก HTML เพอใหเปนไปตามมาตรฐานของภาษา XML (eXtensible Markup Language)

HTML กบ XHTML มหลกการใชทแตกตางกนเลกนอย

19

CSS คออะไร• CSS เปนภาษาสาหรบอธบายลกษณะแสดงผลของหนาเวบ

สามารถกาหนดรายละเอยดไดดกวาภาษา HTML โดยเฉพาะอยางย*งในเร*องของการจดวางตาแหนงตาง ๆ (Layout) และฟอนต

• CSS กบ HTML สามารถใชรวมกนได • CSS จะเรยนชวงทายตอจาก HTML

20

การกำกบเพม (Markup)การกากบเพ*ม (markup) หมายถงลาดบของอกขระหรอสญลก

ษณท*เราแทรกเขาไปในขอความเพ*อบงบอกวาตองการใหแสดงผลอยางไร หรออาจใชในการอธบายโครงสรางทางตรรกะของเอกสาร

ตวท*บงบอกถงการกากบเพ*มเราเรยกวาปายระบ (tag)

ตวอยาง เชน <p> เปนปายระบท*ใชสาหรบบอกจดเร*มตนของพารากราฟ ซ*งเวลาแสดงผล เบราวเซอรจะข <นพารากราฟใหมกอนท*จะแสดงขอความท*เขยนไวหลง <p>

ปายระบ จะตองเขยนไวในวงเลบ < >

21

ตวอยางกำกบเพมอยางงาย

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 ตาง ๆ

ท*จะควบคมรปแบบของการแสดง และการเช*อมโยงไปยงเอกสารอ*น

โครงสรางของเอกสาร HTML

23

<!DOCTYPE html>

<html>

...

...

...

...

...

</html>

โครงสรางของเอกสาร HTML5

HTML แตละ version จะเขยน DOCTYPE ไวตรงบรรทดแรกตางกน version 5 เขยนงายสด

24

<!DOCTYPE html>

<html>

<head>

...แทกทเปนสวนประกอบในสวนหวของเอกสาร ...

</head>

<body>

...ขอความและแทกสาหรบจดรปแบบการแสดง...

</body>

</html>


ทอนบนเปน head ทอนลางเปน body

25

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

Hello

</body>

</html>


26

การเขยนเอกสารตนฉบบ HTML• HTML files หรอ documents

– เขยนในรป source-code โดยใช text editor เชน Notepad

– Notepad: Start-Programs-Accessories

– ใชสกลเปน .htm หรอ .html

– ควรต <งช*อแฟมใหส*อความหมาย

– ช*อแฟมสาหรบโฮมเพจควรใชช*อ index.html ซ*งจะทาใหผชมระบเพยงช*อเวบไซตไมตองระบช*อแฟม ถาผชมไมระบช*อแฟม web server จะหาแฟมช*อน <สงไปใหเบราวเซอร

27

ฝกปฏบตเขยนเวบดวย notepad• เปดโปรแกรม notepad

• พมพ html ตามตวอยางในสไลดท*แลวลงใน notepad

• save file โดยใหสกลของแฟมเปน .htm หรอ .html(ดวธ save ในสไลดถดไป)

• ใชเวบเบราวเซอรเปดดแฟม html ท*เซฟไว โดยไมตองปดโปรแกรม notepad

• ทดลองปรบแกขอความใน notepad แลวเซฟ

• เรยกเวบเพจท*แกไขข <นมาดโดยไมตองเปดใหมโดยการคลกท*ป ม refresh หรอ reload

28วธ save เปนสกล html

ระบสกลของแฟมเปน htm หรอ htmlเปล7ยนจาก Text Documents เปน All Files (*.*)

ปกต Notepad จะเซฟไฟลเปนสกล .txt แตเราจะเซฟเปนสกล .html จงตองเปลยนจงตองเปลยน File Type กอนเซฟ

29The <title> Tag

• แทก <title> ใชสาหรบต <งช*อเอกสาร ช*อน <จะปรากฏท* title bar ของเบราวเซอร • search engine จะนาช*อเอกสารไปแสดง จงควรใสช*อเอกสารทกคร <งท*เขยน

เวบเพจ

30

การดเอกสารตนฉบบเบราวเซอรตาง ๆ มกใหเราดเอกสารตนฉบบได

• กรณท*ใช 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

การเขยนคำอธบายหรอหมายเหต• สวนทDเปนคาอธบาย หมายเหต หรอความเหน

(Comment) เบราวเซอรจะไมนาไปแสดงผล • คาอธบายจะใสไวระหวาง  เชน

33

Syntax of HTML Tags• แทกทกตวจะประกอบดวยช*อเขยนอยในเคร*องหมายวงเลบ <

และ > ช*อแทกจะตองอยตดกบเคร*องหมาย <

• แทกบางตวอาจมตวระบคณลกษณะเฉพาะ (attribute) ประกอบอยดวย

• attribute (ถาม) จะตามหลงช*อแทก ถามหลายตวจะค*นดวย white spaces ลาดบกอนหลงท*ปรากฎของแตละ attribute ไมมความสาคญแต อยางใด

• คาของ attribute จะตามหลงเคร*องหมายเทากบ (=) ซ*งอยหลงช*อ attribute

• อาจใส white spaces ไวกอนหรอหลงเคร*องหมายเทากบดวยกได

• คาของ attribute จะตองใสไวในเคร*องหมายคาพด (") เสมอ

34

ตวอยาง

35

ตวอยางเพมเตม<tag attribute1="2" attribute2="4">

<tag attribute2="4" attribute1="2" >

<tag attribute1 = "2" attribute2="4">

สามารถใช white space ค*นระหวาง • ช*อ tag กบ attribute

• Attribute กบ attribute

• เคร*องหมาย = กบ ช*อ หรอคาของ attribute

อยาลมปดเครองหมายคำพด

36

สญญลกษณสทใชในสไลด• น =าเงน ช*อ 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 EntitiesHTML entities คอลาดบของกลมอกขระซ*งผลตอกขระพเศษ

บนหนาจอของ browser ม ¥ ลกษณะคอ • อกขระสงวน (Reserved character) < > " & • อกขระท*ไมใชภาษาองกฤษ เชนอกขระลาตน HTML entity แตละตวข <นตนดวย & และจบดวย ; เชน > นอกจากน < ยงสามารถระบอกขระโดยใชคาเลขฐานสบของรหสตว

อกษรตามมาตรฐาน ASCII ไดอกดวย เชนตว ท มคาเปน �� สามารถเขยนเปน entity ไดดงน <คอ · การระบ entity วธน <เหมาะสาหรบใสตวอกษรพเศษบางตวท*ไมปรากฎบนแผงแปนพมพ

42

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

การแสดงขอความในพารากราฟ• เบราวเซอรจะแสดงขอความในพารากราฟใหเหมาะสมกบความ

กวางของวนโดวของเบราวเซอรโดยอตโนมต ถาบรรทดท*เขยนในเอกสาร 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> H2O

<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

ฝกปฏบตลองเขยนเวบตกแตงขอความโดยใชแทกตาง ๆ ท*ไดเรยนไปแลว ถาทาแลวไมไดผล หรอสงสยประการใด ใหยกมอเรยกอาจารย

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

เสยดายไมมเลขไทย

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:

ชอคำศพท

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ถกอางถง



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 ท*จะใชสงเอาไวแลว จงจะเปดโปรแกรมสงเมลได