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) เบราวเซอรจะไมนาไปแสดงผล • คาอธบายจะใสไวระหวาง  เชน

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>





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



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