หน่วยที่ 10 การสร้างสรรค์งาน ......page) เป...

หนวยท 10 การสรางสรรคงานสารสนเทศ การสรางเวบเพจดวยภาษา HTML

ภาษา HTML

Client Server

W W W

- HTML- Style Sheet- JavaScript- VB Script- Java Applet

- PHP- ASP- JSP- PERL- CGI

รปท 1 การตดตอสอสารผาน เวลดไวดเวบ

ภาษา HTML (HyperText Markup Language) เปนภาษาหลกทใชในการสรางเวบเพจ (Web Page) เปนภาษาประเภท Markup Language เกดขนจากการพฒนาระบบ World Wide Web ในเดอนมนาคม 1989 โดยนกวจยจากสถาบน CERN (Conseil European Pour La Recherche Nucleaire) ซงเปนหองทดลองในเมองเจนวา ประเทศสวสเซอรแลนด ชอ ทม เบอรเนอร - ล (Tim Berners - Lee) ซง ทม เบอรเนอร - ล ไดน าแนวความคดในเรอง Hypertext ของ Vannevar Bush และ Ted Nelson มาใชเพอกระจายขอมลในองค ตอมามการพฒนาและก าหนดมาตรฐานโดยองคกรทชอวา W3C (World Wide Web Consortium)

ภาษา HTML เปนภาษาทมลกษณะของขอมลทเปนตวอกษรในมาตรฐานของรหสแอสก (ASCII Code) โดยเขยนอยในรปของเอกสารขอความ (Text Document) จงก าหนดรปแบบและโครงสรางไดงาย ภาษา HTML ไดถกพฒนาขนอยางตอเนองตงแต HTML Level 1 (รนดงเดม), HTML 2.0, HTML 3.0, HTML 3.2 และ HTML 4.0 ซงเปนรนทนยมเขยนกนในปจจบน (ขณะน W3C ไดพฒนา HTML 4.01 ออกมาแลว เพอลองรบมาตรฐานภาษา XML) จงท าใหภาษา HTML ในปจจบนสามารถแสดงภาพทางกราฟฟกและระบบเสยงได เพอตอบสนองในการท างานในปจจบน

ภาษา HTML สามารถสรางขนไดจากโปรแกรมสรางไฟลขอความ (Text Editor) ทว ๆ ไป เชน Notepad หรอ Word Processing ได อกทงงายตอการเรยนรเพราะภาษา HTML ไมมโครงสรางความเปน Programming เลยแมแตนอย และไฟลทไดจากการสรางเอกสาร HTML ยงมขนาดเลกอกดวย

นามสกลของไฟล HTML จะเปนไฟลนามสกล .htm หรอ .html ซงใชในทงระบบปฏบตการยนกซ (UNIX) และระบบปฏบตการ Windows และเรยกใชงานไดจากเวบบราวเซอร (Web Browser)

เอกสารประกอบการท าเวบเพจ

เทคโนโลยสารสนเทศเพอการเรยนร

2

รปท 2 ตวอยางการเขยนภาษา HTML ดวยโปรแกรม Notepad

รปท 3 ตวอยางการเปดดเอกสาร HTML ดวยโปรแกรม Internet Explorer

โครงสรางภาษา HTML ค าสงในภาษา HTML เรยกวา แทก (Tag) จะเขยนอยในเครองหมาย < และ > แทกจะแบงไดเปน

สองกลม คอ แทกแบบเปด และแทกแบบปด โดยปกตแลวแทกของภาษา HTML จะเปดและปด โดยมรปแบบดงน



3

รปแบบ <TAG> .... </TAG>

เชน <HTML> .... </HTML>, <B> .... </B>

การปดแทกจะใชเครองหมาย / (Slash) เปนตวก าหนดในแทกทปด สวนแทกอกประเภทหนงจะ

เปนแทกในลกษณะเปด คอ ไมตองมแทกเปดทาย เชน <IMG>, <BR>, <WBR> เปนตน เพอความเขาใจงายในการก าหนดโครสรางภาษา HTML เราจงควรก าหนดแทกเปดและเปดให

เหมาะสมเพอสรางความสมดล เชน เมอเราตองการใชก าหนดใหตวอกษรเปนตวหนาโดยใชแทก <B> และใหมการขดเสนใตโดยใชแทก <U> เราควรทจะก าหนดการเปดและปดแทกโดยเมอขนตนดวยแทก <B> และตามดวยแทก <U> ควรจะปดดวยแทก </U> กอน แลวตามดวยแทก </B> ดงน

<B><U> .... </U></B>

โครงสรางหลก รปแบบมาตรฐานในการสรางเวบเพจประกอบดวยค าสงหลกอย 4 ค าสง ดงน <HTML> .... </HTML> เปนค าสงทท าหนาทบอกจดเรมตนและจดสนสดของเวบเพจ <HEAD> .... </HEAD> เปนค าสงในสวนของการก าหนดสวนหวเรองของเวบเพจ โดยในค าสง

HEAD จะมค าสง <TITLE> .... </TITLE> อยดวย ซงท าหนาทก าหนดขอความทแสดงบน Title Bar โดยสามารถก าหนดความยาวของขอความได 64 ตวอกษร

<BODY> .... </BODY> เปนค าสงในสวนเนอหาของเวบเพจทงหมด รปแบบการเขยนมดงตอไป <HTML> <HEAD>

<TITLE> Title Bar </TITLE> </HEAD>

<BODY>

. .

. .

</BODY>

</HTML>

การจดรปแบบเอกสาร ค าสงในการก าหนดหวเรอง (Headding) การก าหนดหวเรองเราจะใชค าสง Headding <H> เพอแสดงอตราอกษรขนาดใหญกวาปกต เชน ชอ

บท, ชอหวขอ เปนตน ค าสง heading มดวยกน 6 ระดบ โดยทระดบ 1 จะมขนาดใหญสด และระดบ 6 จะมขนาดเลกทสด มรปแบบค าสงดงน



4

<H1> .... </H> <H2> .... </H>

<H3> .... </H> <H4> .... </H>

<H5> .... </H>

<H6> .... </H>

ตวอยางท 1 head.html <HTML>

<HEAD><TITLE> Heading </TITLE></HEAD> <BODY>

<H1> Heading Levle 1 </H> <H2> Heading Levle 2 </H>

<H3> Heading Levle 3 </H> <H4> Heading Levle 4 </H>

<H5> Heading Levle 5 </H>

<H6> Heading Levle 6 </H>

</BODY>

ค าสงขนบรรทดใหม (Line Break) โดยปกตในการพมพเอกสารทว ๆ ไป เราจะขนบรรทดใหมโดยใชการกด Enter แตในการสราง

เอกสาร HTML เวบบราวเซอรจะถอเปนการเวนวรรค 1 ชอง และใชเปนจดตดค าขนบรรทดใหมถายาวเกนขนาดบรรทด แตถาเราตองการใหเวบบราวเซอรตดขอความ ณ ต าแหนงทก าหนดเราจะใชค าสง Line Break <BR> โดยมรปแบบดงน

ขอความ..... <BR>

ตวอยางท 2 break_rule.htm l <HTML>

<HEAD><TITLE> Break Rule </TITLE></HEAD> <BODY>

<P> Microsoft ถกตดสนโดยศาลสหรฐแลว

โดยศาลสงให Microsoft แยกบรษทออกเปนบรษทยอย ๆ

<I>(ในยอหนาขางบนน แมจะมการกด Enter ขนบรรทดใหม แต HTML จะตความเปนบรรทดเดยว)</I>

<P> Microsoft ถกตดสนโดยศาลสหรฐแลว<BR>

โดยศาลสงให Microsoft แยกบรษทออกเปนบรษทยอย ๆ <BR> <I>(สวนยอหนานใชค าสง <BR> จงขนบรรทดใหม)</I>

</BODY>

</HTML>

http://se-ed.net/htmlbasic/example/head.html

http://se-ed.net/htmlbasic/example/break_rule.html



5

ค าสงยกเลกการขนบรรทดใหม (No Break Rule) เมอเราตองการยกเลกคณสมบตการตดค าของเวบบราวเซอร เราสามารท าไดโดยใชค าสง <NOBR>

โดยมรปแบบดงน <NOBR>

.... ขอความ ....

</NOBR>

ตวอยางท 3 no_break.html <HTML> <HEAD><TITLE> Break Rule </TITLE></HEAD> <BODY>

<NOBR> "The fist step toward success is identifying you own leadership strengths"<BR>

(กาวแรกสความส าเรจ คอการระบคณสมบตเดนของการเปนผน าทมอยในตวคณ)

</NOBR> </BODY>

</HTML>

ถาเราเปดตวอยางขางตน แลวยอเวบบราวเซอรด จะเหนไดวาบรรทดแรกจะไมมการตดค าแมจะ

เวนวรรตคไว จนเวบบราวเซอรพบค าสง <BR> จงท าการตดค าขนบรรทดใหม ค าสงการจดต าแหนงของขอความ (Paragraph Break) เราจะใชค าสง <P> ในการจดยอหนาของขอความในเวบเพจ ซงค าสง <P> นน จะม Attributes เปน

ค าสงเสรมชวยในการจดต าแหนงของยอหนาคอ Alignment โดยมรปแบบดงน <P Align = "ต าแหนง" > .... ขอความ .... </P>

ต าแหนงทใชในการจดยอหนามดวยกนสามลกษณะคอ

Left จดขอความชดซายบรรทด Center จดขอความกงกลางบรรทด Right จดขอความชดขวาบรรทด

โดยปกตคาเรมตนของ Alignment จะอยท Left คอจดขอความชดซายของบรรทด

ตวอยางท 4 paragraph.html <HTML> <HEAD><TITLE> Paragraph </TITLE></HEAD>

<BODY>

http://se-ed.net/htmlbasic/example/no_break.html

http://se-ed.net/htmlbasic/example/paragraph.html



6

<H4>การจดยอหนาในเวบเพจ</H4><BR>

<P ALIGN="Left"> ขอความชดซายบรรทด

</P> <P ALIGN="Center">

ขอความกงกลางบรรทด

</P> <P ALIGN="Right">

ขอความชดขวาบรรทด </P>

</BODY>

</HTML>

ค าสงจดวางขอความกงกลางบรรทด (Center) ในการจดวางต าแหนงของขอความดวยภาษา HTML นอกจากจะใชค าสง <P Align= "ต าแหนง">

แลว เรายงสามารถก าหนดกลมขอความหรอรปภาพใหอยกงกลางไดดวยค าสง <CENTER> ทมรปแบบกระชบกวา โดยมรปแบบดงน

<CENTER> .... ขอความ .... </CENTER>

ซงขอความทไดจะอยกงกลางบรรทด เหมาะกบการสรางขอความทเปนหวเรอง ตวอยางท 5 center.html <HTML> <HEAD><TITLE> Center </TITLE></HEAD>

<BODY> <H1><CENTER>การฝกอบรมเชงปฏบตการ เรอง</CENTER></H1>

<H2><CENTER>การสรางเวบเพจเบองตน</CENTER></H2> <H3><CENTER>วทยากร อ.จกรภพ ใหมเสน</CENTER></H3>

</BODY>

</HTML>

การตเสนแนวนอน (Horizontal Line) ภาษา HTML มค าสงชวยในการตเสนแนวนอน เพอแยกเอกสารออกเปนสวน ๆ ใหงายตอการด

รปแบบเอกสารมากขน โดยมรปแบบดงน <HR>

ส าหรบค าสง <HR> นจะไมมแทกปด เปนค าสงในลกษณะทเรยกวาแทกเปด ซงถาเปนค า default

จะแสดงเสนขนาด 2 pixels เตมจอภาพ แตค าสง <HR> ยงม Attributes ชวยในการก าหนดความหนา, ความยาว, การจดต าแหนง และการก าหนดความทบของเสน โดยมรปแบบดงน

<HR Size = "ความหนาของเสน" Width = "ความยาวของเสน" Align = "ต าแหนงการจดวาง"

Noshade>

http://se-ed.net/htmlbasic/example/center.html



7

Size เปนการก าหนดความหนาใหกบเสน ขนาดปกต คอ 2 pixels Width เปนการก าหนดความยาวใหกบเสน สามารถก าหนดเปนทง pixels และ % โดยปกต

ถาไมก าหนด เสนจะยาวเตมจอภาพ Align เปนการก าหนดต าแหนงการจดวางของเสน ประกอบดวย Left คอ การจดเสนชดซายของบรรทด

Center คอ การจดเสนอยกงกลางบรรทด Right คอ การจดเสนชดขาวของบรรทด

Noshade เปนการก าหนดแสดงเสนทบไมมการแรงเงาของเสน ตวอยางท 6 horizontal_line.html

<HTML>

<HEAD><TITLE> Horizontal Line </TITLE></HEAD>

<BODY> เสนขนาดปกต

<HR> เสนความหนา 5

<HR Size="5"> เสนความหนา 20

<HR Size="20">

เสนความยาว 200 <HR Width="200">

เสนความยาว 50% ของจอภาพ <HR Width="50%">

เสนความหนา 20 ความยาว 20%

<HR Szie="20" Width="20%"> เสนความหนา 10 ความยาว 20% และอยชดซายของบรรทด

<HR Szie="10" Width="20%" Align="Left"> เสนความหนา 10 และแสดงเสนทบโดยไมมการแรเงาของเสน

<HR Szie="10" Noshade>

</BODY>

</HTML>

การจดรปแบบตวอกษร และการใชส

ค าสงในการก าหนดแบบตวอกษร (Font Type) ค าสงในการก าหนดแบบตวอกษรนน เราใชแทก <FONT> ซงแทกนสามารถทจะก าหนดไดตงแต

แบบตวอกษร (Font Face), ขนาดของตวอกษร (Font Size) และสของตวอกษร (Font Color) การก าหนดแบบตวอกษร หรอทเรยกวา ฟอนต (Font) โดยปกตคาเรมตนของเวบบราวเซอรจะ

ก าหนดเปนแบบ Time New Roman เพอความหลากหลายของรปแบบตวอกษรมากกวา 1 รปแบบบนจอภาพของบราวเซอร เราสามารถใชค าสง <FONT> ตามดวย Attributes "FACE" เพอก าหนดรปแบบการ

http://se-ed.net/htmlbasic/example/horizontal_line.html



8

แสดงผลภาษาไทยใหกบตวอกษรของเวบเพจของเราได ซงการแสดงผลภาษาไทยนนมฟอนตใหเลอกหลายแบบตวอยางเชน AngsanaUPC, CordiaUPC, BrowalliaUPC, MS Sans Serif เปนตน แตส าหรบฟอนตทเหมาะสมกบการแสดงผลภาษาไทยในเวบบราวเซอร คอ MS Sans Serif โดยมรปแบบดงน

<FONT Face = "ชอฟอนต"> ... ขอความ ... </FONT>

ถาตองการระบมากกวา 1 ฟอนต ใหก าหนดรปแบบดงน <FONT Face = "ชอฟอนต1",ชอฟอนต2",...> ... ขอความ ... </FONT>

ขอดของการก าหนดฟอนตไวมากกวา 1 ฟอนต กคอ เมอเวบบราวเซอรหาฟอนตท 1 ไมเจอกจะหา

ฟอนตท 2 ตอไปตามล าดบ ตวอยางท 7 font_face.html <HTML> <HEAD><TITLE> Font Face </TITLE></HEAD>

<BODY>

<FONT Face="AngsanaUPC"> แบบตวอกษรแบบ AngsanaUPC

</FONT> <BR>

<FONT Face="Ms Sans Serif">

แบบตวอกษรแบบ Ms Sans Serif </FONT>

<BR>

<FONT Face="Comic Sans MS">

Font Style Comic Sans MS </FONT>

<BR>

<FONT Face="Bookman Old Style">

Font Style Bookman Old Style </FONT>

<BR>

</BODY>

</HTML>

เราสามารถก าหนดขนาดของตวอกษรในค าสง <FONT> โดยใช Attributes "Size" ในภาษา HTML

ก าหนดขนาดของตวอกษรได 7 ขนาด โดยใชตวเลข 1-7 เปนตวก าหนด คาเรมตนจะมขนาดเปน 3 <FONT Size = "ขนาด"> ... ขอความ ... </FONT>

http://se-ed.net/htmlbasic/example/font_face.html



9

ตวอยางท 8 font_size.html <HTML> <HEAD><TITLE> Font Face </TITLE></HEAD> <BODY>

<FONT Size="1">Font Size 1</FONT><BR>

<FONT Size="2">Font Size 2</FONT><BR> <FONT Size="3">Font Size 3</FONT><BR>



</BODY>

</HTML>

การก าหนดสใหกบตวอกษรเราใช Attributes "Color" ในการก าหนดสของตวอกษรท าได 2 วธ คอ

1. ก าหนดจากชอของสมาตรฐาน เปนการก าหนดจากชอสมาตรฐานโดยตรง เชน Black, Red เปนตน

2. ก าหนดจากรหสเลขฐาน 16 จะใชการอางองเลขฐาน 16 ในระบบของหมายเลขส RGB (Red, Green, Blue) ซงมรปแบบของรหสสเปน #RRGGBB โดยใชแทนรหสดวยเลขฐาน 16 ในชวง 0, 1,2,3,4,5,6,7,8,9,A,B,C,D,E,F ตามล าดบ

โดยมรปแบบดงน <FONT Color = "ชอสมาตรฐาน"> ... ขอความ ... </FONT>

หรอ

<FONT Color = "#RRGGBB"> ... ขอความ ... </FONT>

ตวอยางสมาตราฐานในการแสดงผลบนเวบบราวเซอร (ในทนขอใช Internet Explorer เปนหลก) ทงชอของส และรหสเลขฐาน 16 มดงน

ชอมาตรฐาน ตวเลขฐาน 16 ในระบบส

#RRGGBB

สทปรากฏบน

จอภาพ สทได

Black #000000 สด า

Blue #0000FF สน าเงนเขม

Cyan #00FFFF สคราม

Darkgray #A9A9A9 สเทาเขม

Gray #808080 สเทา

Green #008000 สเขยว

Lightgray #D3D3D3 สเทาออน

Magenta #FF00FF สมวงออน

Orange #FFA500 สสม

Pink #FFC0CB สชมพ

Red #FF0000 สแดง

White #FFFFFF สขาว

Yellow #FFFF00 สเหลอง

http://se-ed.net/htmlbasic/example/font_size.html



10

ตวอยางท 9 font_color.html <HTML> <HEAD><TITLE> Font Color</TITLE></HEAD> <BODY>

<FONT color="Blue">This is Blue Color</FONT><BR> <FONT color="Green">This is Green Color</FONT><BR>

<FONT color="#FFA500">This is #FFA500</FONT><BR>

</BODY>

</HTML>

ค าสงในการก าหนดลกษณะตวอกษร (Style) ในภาษา HTML มค าสงทชวยในการก าหนดลกษณะตวอกษรใหมความเดนชด เพอความเหมาะสม

กบงานในลกษณะตาง ๆ โดยมรปแบบตาง ๆ ดงน

การก าหนดตวอกษรตวหนา (Bold) ใชแทก <B> การก าหนดตวอกษรตวเอยง (Italic) ใชแทก <I> การก าหนดขดเสนใตตวอกษร (Underline) ใชแทก <U> การก าหนดตวอกษรตวพมพดด (Typewriter) ใชแทก <TT> การก าหนดขดเสนพาดทบกลางตวอกษร (Strikethrough) ใชแทก <S> การก าหนดตวอกษรตวหอย (Subscript) ใชแทก <SUB> การก าหนดตวอกษรตวยก (Superscript) ใชแทก <SUP> การก าหนดตวอกษรตวโต (Big) ใชแทก <BIG> การก าหนดตวอกษรตวเลก (Small) ใชแทก <SMALL>

<B> ... ขอความ ... </B> <I> ... ขอความ ... </I>

<U> ... ขอความ ... </U> <TT> ... ขอความ ... </TT>

<S> ... ขอความ ... </S>

<SUB> ... ขอความ ... </SUB> <SUP> ... ขอความ ... </SUP>

<BIG> ... ขอความ ... </BIT>

<SMALL> ... ขอความ ... </SMALL>

ตวอยางท 10 style.html <HTML> <HEAD><TITLE> Font Face </TITLE></HEAD> <BODY>

แบบตวอกษรปกต แบบตวอกษรหนา <B>Bold</B><BR>

แบบตวอกษรเอยง <I>Italic</I><BR> แบบตวอกษรขดเสนใต <U>Underline</U><BR>

http://se-ed.net/htmlbasic/example/font_color.html

http://se-ed.net/htmlbasic/example/style.html

11

แบบตวอกษรตวพมพดด <TT>Typewriter</TT><BR>

แบบตวอกษรขดเสนพาดทบกลางตวอกษร <S>Strikethrough</S><BR> แบบตวอกษรตวหอย <SUB>Subscript</SUB><BR>

แบบตวอกษรตวยก <SUP>Superscript</SUP><BR> แบบตวอกษรตวโต <BIG>Big</BIG><BR>

แบบตวอกษรตวเลก <SMALL>Small</SMALL>

</BODY>

</HTML>

การก าหนดสพนหลง การก าหนดสพนหลงของเวบเพจเราสามารถท าไดจากแทก <BODY> โดยก าหนดจาก Attributes

"BGColor" โดยมรปแบบดงน ก าหนดสพนหลงจากชอสมาตรฐาน <BODY BGColor = "สพนหลง">

....

</BODY>

ก าหนดสพนหลงจากเลขฐาน 16 <BODY BGColor = "#RRGGBB">

....

</BODY>

ตวอยางท 11 bgcolor.html <HTML> <HEAD><TITLE> BGColor </TITLE></HEAD>

 <BODY BGColor="#FFFF00">

The Internet is a collection of information stored in computers physically located throughout the world.<BR>

Much of the information on the Internet is organized onto electronic pages. You'll

bring one page to your computer screen, discover its contents, and have the option of bringing more pages of information.

</BODY>

</HTML>

การก าหนดสใหกบตวอกษรทงเอกสาร การก าหนดสใหกบตวอกษรทงเวบเพจเราสามารถท าไดจากแทก <BODY> โดยก าหนดจาก

Attributes "Text" โดยมรปแบบดงน ก าหนดสพนหลงจากชอสมาตรฐาน <BODY Text = "สพนหลง">

.... </BODY>

ก าหนดสพนหลงจากเลขฐาน 16 <BODY Text = "#RRGGBB">

....

</BODY>

http://se-ed.net/htmlbasic/example/bgcolor.html

12

ตวอยางท 12 body_text.html <HTML> <HEAD><TITLE> Heading </TITLE></HEAD>



<BODY Text="#FF0000"> The Internet is a collection of information stored in computers physically located

throughout the world.<BR> Much of the information on the Internet is organized onto electronic pages. You'll

bring one page to your computer screen, discover its contents, and have the option of bringing more pages of information.

</BODY>

</HTML>

การก าหนดเครองหมายหวขอและเลขล าดบ ค าสงในการแสดงรายการแบบไมมล าดบ (Unordered List) Unordered List หรอ Bullet List นน ในภาษา HTML ไดก าหนดค าสงในการอ านวยความสะดวก

ในการสราง Bullet ขนไวดวย เพอแสดงเครองหมายหนาหวขอเรองหรอล าดบของรายการตาง ๆ โดยไมมการเรยงล าดบ โดยมรปแบบดงน

<UL> <LI> ... ขอความ ... <LI> ... ขอความ ...

<LI> ... ขอความ ... ... ...........

</UL>

ตวอยางท 13 bullet1.html <HTML> <HEAD><TITLE> List Item </TITLE></HEAD> <BODY>

<UL>Viewing the Navigator Window <LI>Window and frames

<LI>Colors and underlining

<LI>Company logo <LI>Progress bar

<LI>Status message area </UL>

</BODY>

</HTML>

เรายงสามารถระบชนดของเครองหมายไดดวย Attributes "Type" ในแทก <UL> หรอ <LI> โดยม

รปแบบดงน <UL Type = "ชนดของเครองหมาย">

<LI Type = "ชนดของเครองหมาย">

http://se-ed.net/htmlbasic/example/body_text.html

http://se-ed.net/htmlbasic/example/bullet1.html



13

ชนดของเครองหมายมดวยกน 3 แบบ ดงน ชนดของเครองหมาย สญญาลกษณทปรากฏ

Disc

Circle o

Square

ตวอยางท 14 bullet2.html <HTML> <HEAD><TITLE> List Item </TITLE></HEAD>

<BODY>

<UL Type="Circle">การศกษาวชาพนฐานของคณะวทยาศาสตร สาขาวทยาการคอมพวเตอร

ไดแก <LI>วชาการออกแบบโปรแกรม

<UL> <LI Type="Disc">(CT211)

</UL>

<LI>วชาวทยาการคอมพวเตอรเบองตน <UL>

<LI Type="Disc">(CT105) </UL>

<LI>วชาโครงสรางไมตอเนอง <UL>

<LI Type="Disc">(CT203)

</UL> </UL>

</BODY>

</HTML>

ค าสงในการแสดงรายการแบบเปนล าดบ (Ordered List) เราสามารถแสดงรายการแบบเปนล าดบ คอ Ordered List หรอ Number List ได โดยการใชตวเลข

หรอตวอกษรเปนตวก าหนดแสดงล าดบ โดยมรปแบบดงน <OL Type = "ชนดของตวเลข" Start = "ตวเลขเรมตน"> <LI> ... ขอความ ... <LI> ... ขอความ ...

<LI> ... ขอความ ... ... ...........

</OL>

http://se-ed.net/htmlbasic/example/bullet2.html



14

ชนดของ Type ก าหนดเลขล าดบไดดงน ชนดของ Type สงทปรากฏ

A แสดงตวอกษรพมพใหญ (Caplital letters)

a แสดงตวอกษรพมพเลก (Small letters)

I แสดงตวเลขโรมนตวพมพใหญ (Large Roman numerals)

i แสดงตวเลขโรมนตวพมพเลก (Small Roman numerals)

1 แสดงตวเลขอารบก (Small Roman numerals)

* เปนคา default *

ตวอยางท 15 order_list.html <HTML> <HEAD><TITLE> Order List </TITLE></HEAD>

<BODY>

<OL Type="I">My computer in my dream

<LI>Inter Pentium 4 processor 2.0 GHz <LI>RDRAM 256 MB

<LI>Harddisk 50 GB ATA-100 <LI>52X CD-Rom Drive

<LI>Speakers (Labtec) 160 Watt

<LI>Asus GeForce3 64 MB <LI>Creative Sound Baster

<LI>Monitor Sony Wega 20" </OL>

</BODY>

</HTML>

การสรางตาราง ค าสงในการสรางตาราง (Table) การสรางเวบเพจในปจจบนมการน าตารางเขามาเกยวของกบหลาย ๆ สวน ตงแตการสรางตาราง

เพอแสดงความสมพนธในลกษณะแถว (Row) และคอลมน (Column) รวมถงการแบงขอบเขตใหกบขอความเพอการจ ากดและควบคมขอความใหอยในสวนทเราตองการ

ค าสงส าหรบสรางตารางประกอบดวยค าสงดงน Tag ค าอธบาย

<TABLE> ... </TABLE> ค าสงในการสรางตาราง

<CAPTION> ... </CAPTION> ค าสงในการก าหนดขอความก ากบตาราง

<TR> ... </TR> ค าสงในการก าหนดแถวของตาราง 1 แถว

<TH> ... </TH> ค าสงในการก าหนดสวนหวของตารางแถวแรก

<TD> ... </TD> ค าสงในการก าหนดสวนของขอมลในแถว หรอท าคอลมน

http://se-ed.net/htmlbasic/example/order_list.html



15

ส าหรบโครงสรางของค าสงในการสรางตารางมดงน <TABLE> <CAPTION> ขอความก ากบตาราง </CAPTION>

<TR> <TH> ขอความสวนหว </TH>

....................

.................... </TR>

<TR> <TD> ขอความสวนของขอมล </TD>

........................ ........................

</TR>

<TR>

<TD> ขอความสวนของขอมล </TD>

........................ ........................

</TR> ........................

........................

........................

</TABLE>

ตวอยางท 16 table1.html <HTML> <HEAD><TITLE> Table Tag </TITLE></HEAD> <BODY>

<CENTER> Example Data

<H2>Report Sale 2001</H2>

<TABLE> <TR>

<TH>Month</TH> <TH>Sale A</TH>

<TH>Sale B</TH>

<TH>Sale C</TH> </TR>

<TR> <TD>January</TD>

<TD>500</TD> <TD>800</TD>

<TD>700</TD>

</TR> <TR>

<TD>February</TD> <TD>1200</TD>

<TD>1000</TD>

<TD>300</TD> </TR>

<TR> <TD>Mar</TD>

http://se-ed.net/htmlbasic/example/table1.html



16

<TD>900</TD>

<TD>400</TD> <TD>600</TD>

</TR> </TABLE>

</CENTER>

</BODY>

</HTML>

เรายงสามารถใช Attributes เพอใหเวบบราวเซอรแสดงตารางใหชดเจนยงขน Attributes ตาง ๆ ม

ดงน Attributes ค าอธบาย

Align

ก าหนดการวางต าแหนงตางราง ม 3 ลกษณะ

- Left ก าหนดจดวางชดซาย (เปนคา default) - Right ก าหนดจดวางชดขวา

- Center ก าหนดจดวางกงกลาง

Border ก าหนดแสดงความหนาของเสนตาราง มหนวยเปน Pixel

Height ก าหนดความสงของตาราง มหนวยเปน Pixel และ Percent

Width ก าหนดความกวางของตาราง มหนวยเปน Pixel และ

Percent

CellSpacing ก าหนดชองวางระหวางตาราง

CellPadding ก าหนดชองวางระหวางบรรทดของตาราง

การก าหนดคาตาง ๆ ของ Attributes ทกลาวมาแลว ความแตกตางของการก าหนดคาเปน pixel และ

เปน percent นนมความแตกตางกนดงน

พกเซล (Pixel) การก าหนดคาเปนแบบพกเซล เมอการลดขนาดของเวบบราวเซอรตารางจะไมลดขนาดตามความกวาง หรอยาวของเวบบราวเซอร

เปอรเซนต (Percent หรอ %) ถาก าหนดคาในลกษณะของ Percent เมอบราวเซอรมการลดขนาดลง ขนาดของตารางจะลดสดสวนตามขนาดของตวเวบบราวเซอรดวย

ตวอยางท 17 table2.html <HTML> <HEAD><TITLE> Table Tag </TITLE></HEAD> <BODY>

<CENTER>

Example Data <H2>Report Sale 2001</H2>

<TABLE Border="3" CellSpacting="5" CellPadding="3"> <TR>

<TH>Month</TH>

<TH>Sale A</TH> <TH>Sale B</TH>


<TR> <TD>January</TD>




17

<TD>500</TD>

<TD>800</TD> <TD>700</TD>

</TR> <TR>

<TD>February</TD>

<TD>1200</TD> <TD>1000</TD>

<TD>300</TD> </TR>

<TR> <TD>Mar</TD>

<TD>900</TD>

<TD>400</TD> <TD>600</TD>

</TR> </TABLE>

</CENTER>

</BODY>

</HTML>

ค าสงในการก าหนดส และการจดต าแหนงของขอมลในตาราง ในการสรางตารางในภาษา HTML ม Attributes ทชวยเพมสสนและความเหมาะสมใหกบตาราง คอ

Align ใชก าหนดการจดต าแหนงของขอมลในตางราง ไมวาจะเปนขอความหรอภาพ ก าหนดได 3 ลกษณะ Left ก าหนดการจดวางแบบชดขอบซายของตาราง Right ก าหนดการจดวางแบบชดขอบขาวของตาราง Center ก าหนดการจดวางแบบกงกลางของตาราง

BGColor เปนการก าหนดพนสภายในตารางทอยในแถวนน

ตวอยางท 18 table3.html <HTML>

<HEAD><TITLE> Table Tag </TITLE></HEAD> <BODY>

<CENTER> <H2>Report Sale 2001</H2>

<TABLE Border="3" CellSpacting="5" CellPadding="3"> <CAPTION Aling="Bottom">

Summation Sale Report

</CAPTION> <TR Aling="Center" BGColor="Whitegreen">

<TH>Month</TH> <TH>Sale A</TH>

<TH>Sale B</TH>


<TR Align="Center" BGColor="Yellow"> <TD>January</TD>




18

<TD>500</TD>

<TD>800</TD> <TD>700</TD>

</TR> <TR Align="Center" BGColor="Skyblue">

<TD>February</TD>

<TD>1200</TD> <TD>1000</TD>

<TD>300</TD> </TR>

<TR Align="Center" BGColor="Pink"> <TD>Mar</TD>

<TD>900</TD>

<TD>400</TD> <TD>600</TD>

</TR> </TABLE>

</CENTER>

</BODY>

</HTML>

การน ารปภาพมาใชกบเวบเพจ ชนดของรปภาพ การน ารปภาพมาใสในเวบเพจเปนสวนหนงทสรางความนาสนใจใหกบเวบเพจเปนอยางมาก

โดยเฉพาะการสรางเวบเพจในปจจบนกาวไปถงขนมการตอบโตกบผทเขาชมเวบเพจ หรอทเรยกกวา อนเตอรแอคทฟ (Interactive) การน ารปภาพในใชในเวบเพจยงมความจ าเปนมากยงขน

ในการแสดงผลในเวบเพจนน ภาพในแบบทเหมาะสมคอภาพในแบบ GIF หรอ JPEG เนองจากภาพทไดจะมขนาดเลก ท าใหแสดงผลไดอยางรวดเรว

1. Graphics Interchange Format (GIF) เปนภาพทมการบบอดขอมล ภาพจงมขนาดเลก แตสทรปภาพในแบบ GIF นนสามารถแสดงผลไดเพยง 256 ส จงเหมาะกบภาพในลกษณะภาพวาด ไฟลภาพแบบ GIF มอยดวยกน 2 ชนด คอ

- GIF87a เปนไฟล GIF ทวไป - GIF89a เปนไฟล GIF ทสามารถเคลอนไหวได หรอทเรยกวา GIF Animation

ไฟลภาพแบบ GIF ทงสองชนดสามารถปรบการแสดงผลได 3 แบบ ไดแก - แบบ Interlaced จะท าการแสดงภาพออกเปนชวง ๆ แทนทจะแสดงไลลงมาจากบนลงลาง

ตามปกต - แบบ Progressive จะท าการแสดงภาพแบบหยาบ ๆ กอน แลวคอย ๆ ชดขน - แบบ Transparent Background จะแสดงภาพโดยไมมพนฉากหลง



19

2. Joint Photographic Experts Group (JPEG หรอ JPG) เปนรปภาพทถกบบอดขอมลไว โดยใชเทคนค Lossy ซงคณภาพของภาพทไดจะมคณภาพลดลงตามขนาดทบบอดขอมล แตไมจ ากดจ านวนส ไฟลภาพแบบ JPEG เหมาะส าหรบภาพในลกษณะภาพถาย

ค าสงในการใสรปภาพในเวบเพจ (Image) เราจะใชแทก <IMG> ในการน าภาพเขามาแสดงผลในเวบเพจ โดยมรปแบบดงน <IMG SRC = "ไฟลภาพ">

ส าหรบ Attributes ทใชระบต าแหนงของรปภาพคอ SRC หรอ Source เราสามารถทจะชต าแหนงทเกบภาพได เชน <IMG SRC="http://www.north.rit.ac.th/image/logo.gif"> เปนตน

ตวอยางท 19 image1.html <HTML> <HEAD><TITLE> Image </TITLE></HEAD> <BODY>

<CENTER>

<IMG SRC="mypic.jpg"> </CENTER>

</BODY>

</HTML>

ถาเราตองการใสค าอธบายภาพ ภาษา HTML ม Attributes ทชวยท าในสวนน คอ ALT (Alternative

Text) ประโยชนส าหรบ Attributes นคอ เมอผใชเวบบราวเซอรทไมรองรบการแสดงผลในแบบกราฟฟค ในสวนของภาพจะมขอความขนมาอธบายในสวนนน โดยมรปแบบดงน

<IMG SRC = "ไฟลภาพ" ALT = "ค าอธบาย">

ตวอยางท 20 image2.html <HTML> <HEAD><TITLE> Image </TITLE></HEAD>

<BODY> <CENTER>

<IMG SRC=" mypic.jpg" ALT="รปใครเอย"> </CENTER>

</BODY>

</HTML>

การน ารปภาพท าเปนพนหลง เราสามารถน ารปภาพไปประกอบเปนพนหลงหรอทเรยกวาวอลลเปเปอร (Wall Paper) ของเวบเพจ

ได โดยก าหนดในสวนของแทก Body ซงใช Attributes Background โดยมรปแบบดงน <BODY Background = "ไฟลภาพ">

http://se-ed.net/htmlbasic/example/image1.html

http://se-ed.net/htmlbasic/example/image2.html



20

ตวอยางท 21 image_background.html <HTML> <HEAD><TITLE> Wall Paper </TITLE></HEAD> <BODY Background="logo_bg.gif">

<CENTER>

We are students </CENTER>

</BODY>

</HTML>

การเชอมโยงเวบเพจ (Link) การเชอมโยงเวบเพจ หรอทเรยกวาลงค (Link) ถอวาเปนคณสมบตทส าคญของภาษา HTML ดงจะ

เหนไดจากเวบเพจทว ๆ ไป จดเชอมโยงเวบเพจอาจจะเปนขอความหรอรปภาพกได การสรางจดเชอมโยงขอความ (Text Link) ในการเชอมโยงเวบเพจเราจะใชแทก <A> โดยการก าหนดขอความในเอกสาร HTML เปนจด

เชอมโยง โดยมรปแบบดงน <A HREF = "URL"> ขอความ </A>

A HREF หมายถง Hypertext Reference สวน URL (Uniform Resource Location) คอ รปแบบ

มาตรฐานทเปนแหลงทขอใชบรการอนเทอรเนต โดยเขยนอยในรปแบบดงน โปรโตคอล://ชอโฮส.โดเมน/ชอไฟล ตวอยางเชน

http://www.microsoft.com/ ftp://ftp.nectec.or.th/

http://www.north.rit.ac.th/index.html

ตวอยางท 22 link1.html <HTML> <HEAD><TITLE>Link</TITLE></HEAD> <BODY>

<CENTER><H2>สภาบนการศกษา</H2></CENTER><BR> <A HREF="http://www.north.rit.ac.th/">สถาบนเทคโนโลยราชมงคล วทยาเขตภาคพายพ

</A><BR>

<A HREF="http://www.ru.ac.th/">มหาวทยาลยรามค าแหง</A><BR> <A HREF="http://www.cu.ac.th/">จฬาลงกรณมหาวทยาลย</A><BR>

<A HREF="http://www.tu.ac.th/">มหาวทยาลยธรรมศาสตร</A><BR> </BODY>

</HTML>

http://se-ed.net/htmlbasic/example/image_background.html

http://se-ed.net/htmlbasic/example/link1.html



21

การสรางจดเชอมโยงกบรปภาพ (Graphic Link) เปนการก าหนดใหรปภาพเปนจดเชอมโยง โดยมรปแบบดงน <A HREF = "URL"><IMG SRC = "ชอไฟล"></A>

ตวอยางท 23 link2.html <HTML> <HEAD><TITLE>Link</TITLE></HEAD> <BODY>

<CENTER>

<H2>หนงสอพมพไทย</H2> <P>

<A HREF="http://www.komchadluek.com/"> <IMG SRC="komchadluek.gif" BORDER="0">

</A>

<P> <A HREF="http://www.thairath.com/">

<IMG SRC="thairath.gif" BORDER="0"> </A>

</CENTER> </BODY>

</HTML>

การก าหนดสใหกบจดเชอมโยงเวบเพจ การสรางเวบเพจดวยภาษา HTML นน จดเชอมโยงขอความทเราสรางขนจะมสทแตกตางจากปกต

พรอมทงมเสนใตบงบอกจดเชอมโยงดวย เราจะก าหนดสของ Link ในเวบเพจจากแทก Body โดยมรปแบบดงน

<BODY Attributes = "ชอสมาตราฐาน">

หรอ

<BODY Attributes = "#RRGGBB">

Attributes ทใชในการก าหนดสมดวยกนดงน

BGCOLOR ก าหนดสพนหลงใหกบเวบเพจ

TEXT ก าหนดสตวอกษรปกต

LINK ก าหนดสตวอกษรทเปนจดเชอมโยง

VLINK (Visited Link) ก าหนดสตวอกษรทท าการคลกเพอไปยงเปาหมายแลว

ALINK (Active Link) ก าหนดสตวอกษรทก าลงคลกไปยงเปาหมาย




22

ตวอยางท 24 link3.html <HTML> <HEAD><TITLE>Link</TITLE></HEAD> <BODY TEXT="RED" LINK="BLUE" VLINK="GREEN" ALINK="ORANGE">

<CENTER><H2>สภาบนการศกษา</H2></CENTER><BR> <A HREF="http://www.north.rit.ac.th/">สถาบนเทคโนโลยราชมงคล วทยาเขตภาคพายพ

</A><BR>

<A HREF="http://www.ru.ac.th/">มหาวทยาลยรามค าแหง</A><BR> <A HREF="http://www.cu.ac.th/">จฬาลงกรณมหาวทยาลย</A><BR>

<A HREF="http://www.tu.ac.th/">มหาวทยาลยธรรมศาสตร</A><BR> </BODY>

</HTML>

การเชอมโยงระหวางเวบเพจ

ในการระบต าแหนงทอยส าหรบลงคนน ถาอยตางเวบไซตกนจะตองระบไวใหครบถวน ตามตวอยางท 22-24 ทผานมา แตถาเปนไฟล HTML ในเวบไซตเดยวกนเราสามารถละชอเวบไซตได เหลอเพยงชอไฟลกพอ ตวอยางท 25 link3.html

<HTML> <HEAD><TITLE>Link</TITLE></HEAD>

<BODY> <CENTER><H2>สภาบนการศกษา</H2></CENTER><BR>

<A HREF="head.html">ตวอยางท 1</A><BR> <A HREF="paragraph.html">ตวอยางท 4</A><BR>

<A HREF=" font_size.html">ตวอยางท 8</A><BR>

<A HREF=" order_list.html">ตวอยางท 15</A><BR> <A HREF=" table3.html">ตวอยางท 18</A><BR>

</BODY>

</HTML>



http://se-ed.net/htmlbasic/example/paragraph.html




หน่วยที่ 10 การสร้างสรรค์งาน ......page) เป...

Documents