Embed Size (px)
Citation preview
1
HTML [#2]
HyperText Markup Language
2
ความหมายของ HTML
HTMLหรอ HyperText Markup Language เปนภาษาคอมพวเตอรรปแบบหนง ทมโครงสรางการเขยนโดยอาศยตวก ากบ (Tag) ควบคมการแสดงผลขอความ, รปภาพ หรอวตถอนๆ ผานโปรแกรมเบราเซอร
แตละ Tag อาจจะมสวนขยายทเรยกวา Attribute ส าหรบระบ หรอควบคมการแสดงผล ของเวบไดดวย
HTML เปนภาษาทถกพฒนาโดย World Wide Web Consortium (W3C) จากแมแบบของภาษา SGML (Standard Generalized Markup Language) โดยตดความสามารถบางสวนออกไป
เพอใหสามารถท าความเขาใจและเรยนรไดงาย และดวยประเดนดงกลาว ท าใหบรการ WWW เตบโตขยายตวอยางกวางขวางตามไปดวย Tag
3
Tag
Tag เปนลกษณะเฉพาะของภาษา HTML ใชในการระบรปแบบค าสง หรอการลงรหสค าสง HTML ภายในเครองหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยท Tag HTML แบงได 2 ลกษณะ คอ Tag เดยว
เปน Tag ทไมตองมการปดรหส เชน <P>, <BR> เปนตน Tag เปด/ปด
เปน Tag ทประกอบดวย Tag เปด และ Tag ปด โดย Tag ปด จะมเครองหมาย slash ( / ) น าหนาค าสงใน Tag นนๆ เชน <B>…</B>, <BLINK>…</BLINK> เปนตน
4
Attributes Attributes เปนสวนขยายความสามารถของ Tag จะตองใสภายในเครองหมาย < > ในสวน
Tag เปดเทานน Tag ค าสง HTML แตละค าสง จะม Attribute แตกตางกนไป มจ านวนไมเทากน การระบ
Attribute มากกวา 1 Attribute ใหใชชองวางเปนตวคน เชน Attributes ของ Tag เกยวกบการจดพารากราฟ คอ <P> ประกอบดวย ALIGN="Left/Right/Center/Justify" ซงสามารถเขยนไดดงน <P ALIGN="Left">...</P> หรอ <P ALIGN="Right">...</P> หรอ <P ALIGN="Center">...</P>
5
โครงสรางเอกสาร HTML
ไฟลเอกสาร HTML ประกอบดวยสวนประกอบสองสวนคอ Head กบ Body โดยสามารถเปรยบเทยบไดงายๆ กคอ สวน Head จะคลายกบสวนทเปน Header ของหนาเอกสารทวไป หรอบรรทด Title ของหนาตางการท างานในระบบ Windows
ส าหรบสวน Body จะเปนสวนเนอหาของเอกสารนนๆ โดยทงสองสวนจะอยภายใน Tag <HTML>…</HTML>
6
สวนหวเรองเอกสารเวบ (Head Section)
<HEAD> <TITLE>ขอความอธบายชอเรอง</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=TIS-620"> <META NAME="Author" CONTENT="ชอผพฒนาเวบ"> <META NAME="KeyWords" CONTENT="ขอความ 1, ขอความ 2, …">
</HEAD>
Head Section เปนสวนทใชอธบายเกยวกบขอมลเฉพาะของหนาเวบนนๆ เชน ชอเรองของหนาเวบ (Title), ชอผจดท าเวบ (Author), คยเวรดส าหรบการคนหา (Keyword) โดยม Tag ส าคญ คอ
7
ขอความทใชเปน TITLE ไมควรพมพเกน 64 ตวอกษร, ไมตองใสลกษณะพเศษ เชน ตวหนา, เอยง หรอส และควรใชเฉพาะภาษาองกฤษทมความหมายครอบคลมถงเนอหาของเอกสารเวบ หรอมลกษณะเปนค าส าคญในการคนหา (Keyword)
การแสดงผลจาก Tag TITLE บนเบราเซอรจะปรากฏขอความทก ากบดวย Tag TITLE ในสวนบนสดของกรอบหนาตาง (ใน Title Bar ของ Window นนเอง)
Tag META จะไมปรากฏผลบนเบราเซอร แตจะเปนสวนส าคญ ในการท าคลงบญชเวบ ส าหรบผใหบรการสบคนเวบ (Search Engine) และคาอนๆ ของการแปลความหมาย
การพมพชดค าสง HTML สามารถพมพไดทงตวพมพเลก ตวพมพใหญ หรอผสม การยอหนา เวนบรรทด หรอชองวาง สามารถกระท าไดอสระ โปรแกรมเบราเซอรจะไมสนใจเกยวกบระยะเวนบรรทดหรอยอหนา หรอชองวาง
8
สวนเนอหาเอกสารเวบ (Body Section)
Body Section เปนสวนเนอหาหลกของหนาเวบ ซงการแสดงผลจะตองใช Tag จ านวนมาก ขนอยกบลกษณะของขอมล เชน ขอความ, รปภาพ, เสยง, วดโอ หรอไฟลตางๆ
สวนเนอหาเอกสารเวบ เปนสวนการท างานหลกของหนาเวบ ประกอบดวย Tag มากมายตามลกษณะของขอมล ทตองการน าเสนอ การปอนค าสงในสวนน ไมมขอจ ากดสามารถปอนตดกน หรอ 1 บรรทดตอ 1 ค าสงกได แตมกจะยดรปแบบทอานงาย คอ การท ายอหนาในชดค าสงทเกยวของกน
9
สวนเนอหาเอกสารเวบ (Body Section) ตอ..
ทงนใหปอนค าสงทงหมดภายใต Tag <BODY> … </BODY> และแบงกลมค าสงไดดงน กลมค าสงเกยวกบการจดการพารากราฟ กลมค าสงจดแตง/ควบคมรปแบบตวอกษร กลมค าสงการท าเอกสารแบบรายการ (List) กลมค าสงเกยวกบการท าลงค กลมค าสงจดการรปภาพ กลมค าสงจดการตาราง (Table) กลมค าสงควบคมเฟรม กลมค าสงอนๆ
10
เรมสรางเวบเพจดวย NotePad
<HTML> <HEAD> <TITLE>...............</TITLE> </HEAD> <BODY> ............... ............... </BODY> </HTML>
เปดโปรแกรม NotePad <Start, Progra, Accessories, NotePad>
11
ค าสงในการเรมตนในการสรางเวบเพจ ค าสงเรมตน
<HTML>..........</HTML> ค าสง <HTML> เปนค าสงเรมตนในการเขยนโปรแกรมและค าสง
</HTML> เปนการสนสดโปรแกรม HTML ค าสงนจะไมแสดงผลในโปรแกรมเวบเบราเซอร แตตองเขยนเพอใหเกดความเปน
ระบบของงาน และเพอจะใหรวาเอกสารนเปนเอกสารของภาษา HTML
12
สวนหวของโปรแกรม <HEAD>..........</HEAD>
ค าสง <HEAD> เปนค าสงทใชก าหนดขอความในสวนทเปนชอเรองของไฟล
HTML และภายในค าสง <HEAD>...</HEAD> จะมค าสงยอยอกค าสงหนงคอ <TITLE>........</TITLE>
13
ก าหนดขอความในสวนหวของโปรแกรมหรอไตเตลบาร <TITLE>..........</TITLE >
ค าสง <TITLE> เปนค าสงทแสดงชอของเอกสาร หรอชอเรองของไฟล
HTML ซงขอความภายในค าสงจะปรากฎหรอแสดงผลในสวนของไตเตลบาร (Title Bar) ของโปรแกรมเวบเบราเซอร แตจะไมแสดงในสวนของการแสดงผลในโปรแกรมเวบเบราเซอร
14
สวนเนอหาของโปรแกรม
<BODY>..........</BODY>ค าสงนเปนสวนทส าคญในการแสดงผลในเวบเบราเซอร ซงจะประกอบไปดวยตวอกษร รปภาพกราฟกตางๆ
15
การก าหนดสของพนหลงของตวอกษร
<HTML> <HEAD> <TITLE>การก าหนดสพนหลงโดยการก าหนดส</TITLE> </HEAD> <BODY BGCOLOR="yellow"> การก าหนดสพนหลงโดยการก าหนดส </BODY> </HTML>
จะท าการเขยนในสวนของค าสง <BODY> โดยเราจะใชแอตทรบวตมาเปนตวก าหนด การก าหนดสของพนหลง - การก าหนดสพนหลงนน เราสามารถมรปแบบการก าหนดสพนหลงไดอย 2 รปแบบ ระบชอของสทตองการ อาทเชน red, green, yellow, blue เปนตน
16
การก าหนดสของพนหลงของตวอกษร แบบท 2
<HTML> <HEAD> <TITLE>การก าหนดสพนหลงโดยการก าหนดส</TITLE> </HEAD> <BODY BGCOLOR="#FF66FF"> การก าหนดสพนหลงโดยใชหลก "#RBG" </BODY> </HTML>
การระบแบบตวเลขโดยจะใชคาสในระบบฐาน 16 หรอเรยกวาหลกการผสมสแบบ RBG
17
ตวอยางคาสในระบบเลขฐาน 16
RGB (Red Green Blue)
FF0000 คอ สแดง
18
การก าหนดสของตวอกษร
<HTML> <HEAD> <TITLE>การก าหนดสตวอกษร</TITLE> </HEAD> <BODY BGCOLOR="yellow" text="blue" > การก าหนดสตวอกษร </BODY> </HTML>
รปแบบ :: <BODY TEXT="#RGB หรอ ก าหนดชอสทตองการ">
19
การก าหนดสของตวอกษร
<HTML> <HEAD> <TITLE>การก าหนดสตวอกษร</TITLE> </HEAD> <BODY BGCOLOR="yellow" text="#FF0066" > การก าหนดสตวอกษร </BODY> </HTML>
การระบแบบตวเลขโดยจะใชคาสในระบบฐาน 16 หรอเรยกวาหลกการผสมสแบบ RBG
20
ขอความลกษณะหวเรอง (Heading)
<HTML> <HEAD> <TITLE>การก าหนด Heading</TITLE> </HEAD> <BODY> Computer - Default Size <H1>Computer - H1</H1> <H2>Computer - H2</H2> <H3>Computer - H3</H3> <H4>Computer - H4</H4> <H5>Computer - H5</H5> <H6>Computer - H6</H6> </BODY> </HTML>
รปแบบ :: <Hn>....Heading Text ... </Hn>
คาของ n นนเปนตวเลข 1 - 6 n = 1 ขนาดใหญสด n = 6 ขนาดเลกสด
21
หมายเหต ปจจบนการพฒนาเวบไซตมกจะก าหนดขนาดของตวอกษร (Font size) ใหมขนาดคงท เชน 1 หรอ 14-16 Point
เพอใหแสดงผลไดสวยงาม ไดสดสวนเดยวกน จงไมนยมใชแทก <Hn> ควบคม แตจะเปลยนไปใชในลกษณะการมารค (Mark) เพอควบคมกบโปรแกรมมง เชน XML หรอ CSS แทน
22
การตกแตงขอความ
แทกทใชตกแตงขอความเพอเนนค า หรอขอความสนๆ หรอใหดสวยงาม มาตรฐาน HTML 4.0 มแทกส าหรบใชตกแตงขอความมากมาย ท าไดแทบจะครบทกรปแบบ และสามารถแบงออกเปน 2 กลมใหญ คอ Logical Format - เปนแทกทมชอทสอความหมาย ซงเบราเซอรแตละยหอจะแปล
แทกเหลานตางกน Fixical Format - แทกทก าหนดลกษณะตายตว ทกเบราเซอรจะแปลความหมายแทก
เหลานเหมอนกนหมด
23
การก าหนดตวอกษรใหมความหนา,ขดเสนใต, การเอน
<HTML> <HEAD> <TITLE>การก าหนดตว….</TITLE> </HEAD> <BODY> ตวอกษรปรกต COMPUTER ตวอกษรหนา <B>COMPUTER</B>
ตวอกษรทขดเสนใต <U>COMPUTER</U>
ตวอกษรเอน <i>COMPUTER</i> </BODY> </HTML>
รปแบบ :: <B>..........</B>, <U>..........</U> , <I>..........</I>
หมายเหต แทก U ไมนยมใชเนองจากอาจกอใหเกดความสบสนกบขอความทเปนจดลงกได
24
การก าหนดตวอกษรกระพรบ
<HTML> <HEAD> <TITLE>การก าหนดตวอกษรกระพรบ</TITLE> </HEAD> <BODY text="red"> <Blink>COMPUTER</Blink> แสดงผลไดเฉพาะบน Netscape </BODY> </HTML>
รปแบบ:: <BLINK>..........</BLINK>
หมายเหต ในการก าหนดตวอกษรกระพรบนน เราไมสามารถเปดในโปรแกรมเวบเบราเซอรทเปน Internet Explorer ได
25
การก าหนดรปแบบของตวอกษร
<HTML> <HEAD> <TITLE>FONT FACE </TITLE> </HEAD> <BODY> ชนดของฟอนตปกต<BR> <FONT FACE="MS Sans Serif">ฟอนตชอ MS Sans Serif</Font> </BODY>
</HTML>
รปแบบ :: <FONT FACE="font name หรอ typeface">..........</FONT>
•ฟอนตส าหรบขอความภาษาไทย/องกฤษ ทเหมาะสมไดแก MS Sans Serif, Microsoft Sans Serif, Thonburi •ฟอนตส าหรบขอความภาษาองกฤษทเหมาะสม คอ Arial, Helvetica, sans-serif
26
การก าหนดสของตวอกษร , ขนาด
<HTML> <HEAD> <TITLE>FONT COLOR </TITLE> </HEAD> <BODY text="yellow"> Computer <FONT COLOR=“Red” >Computer</FONT> Computer </BODY> </HTML>
<FONT COLOR="#RGB หรอ ก าหนดชอสทตองการ">..........</FONT> <FONT SIZE="คาก าหนดขนาดของตวอกษร">..........</FONT>
27
การก าหนดขนาดของตวอกษร
<HTML> <HEAD> <TITLE>FONT SIZE </TITLE> </HEAD> <BODY text="Red"> <FONT SIZE="1">Computer</Font> <FONT SIZE="2">Computer</Font> <FONT SIZE="3">Computer</Font> <FONT SIZE="4">Computer</Font> <FONT SIZE="5">Computer</Font> <FONT SIZE="6">Computer</Font> <FONT SIZE="7">Computer</Font> </BODY> </HTML>
<FONT SIZE="คาก าหนดขนาดของตวอกษร">..........</FONT>
ก าหนดเปนตวเลขซงจะมคา 1 - 7 โดยคามาตรฐานจะมคาจะอยท 3
28
การก าหนดตวอกษรเคลอนท
<HTML>
<HEAD>
<TITLE>MARQUEE</TITLE>
</HEAD>
<BODY>
<Marquee><FONT SIZE="4" color="green">
Computer</Font></Marquee>
</BODY>
</HTML>
รปแบบ <MARQUEE>..........</MARQUEE>
ค าสง < MARQUEE > นนจะก าหนดการเคลอนทของตวอกษร โดยปกตการเคลอนทของตวอกษรนนจะเคลอนทจากขวามาซาย ค าสงนสามารถแสดงผลไดอยางถกตองเมอใชเบราเซอร Internet Explorer เทานน
หมายเหต ใช Attribute direction เพอควบคมทศทาง โดยม left,right,up,down
เชน direction ="right"
29
ค าสงลดขนาดตวอกษรลง 1 ระดบ
<HTML> <HEAD> <TITLE>SMALL </TITLE> </HEAD> <BODY> <FONT SIZE="4" color="green" >Computer</Font> <Small>Computer</Small> <FONT SIZE="4" color="green">Computer</Font> </BODY> </HTML>
รปแบบ <SMALL>..........</SMALL>
ค าสง < SMALL > เปนค าสงทสามารถลดขนาดของตวอกษรลง 1 ระดบจากขนาดของอกษรปจจบนไดทนท โดยไมตองไประบดวยค าสง < font size >
30
ค าสงเพมขนาดของตวอกษร 1 ระดบ
<HTML> <HEAD> <TITLE>BIG </TITLE> </HEAD> <BODY> <FONT SIZE="2" color="green" >Computer</Font> <Big>Computer</Big> <FONT SIZE="2" color="green">Computer</Font> </BODY> </HTML>
รปแบบ <BIG>..........</BIG>
ค าสง <BIG> เปนค าสงทสามารถเพมขนาดของตวอกษรขน 1 ระดบจากตวอกษรปจจบนไดทนท โดยไมตองใชค าสง <font size>
31
ค าสงทก าหนดตวอกษรยกระดบ
<HTML> <HEAD> <TITLE>SUPERSCRIPT</TITLE> </HEAD> <BODY> <FONT SIZE="4" color="green" >Computer</Font> A<Sup>2</Sup> =4 <FONT SIZE="4" color="green">Computer</Font> </BODY> </HTML>
รปแบบ <SUP>..........</SUP> ค าสง < SUP > ยอมาจาก (superscript) เปนค าสงทจะก าหนดใหตวอกษร หรอขอความยกระดบสงขนกวาระดบปกตและมขนาดเลก
32
ค าสงทก าหนดตวอกษรพวงทาย (ตวหอย)
ค าสง < SUB > ยอมาจาก (subscript) เปนค าสงทจะก าหนดใหตวอกษร หรอขอความพวงทายจะมลกษณะต ากวาระดบปกตและมขนาดเลก
<HTML>
<HEAD>
<TITLE>SUBSCRIPT</TITLE>
</HEAD>
<BODY>
<FONT SIZE="4" color="green" >Computer</Font>
H<Sub>2</Sub>0 = Water
<FONT SIZE="4" color="green">Computer</Font>
</BODY>
</HTML>
รปแบบ <SUB>..........</SUB>
