การสรางเวบ เพจดวยภา ษา HTML โดย กานต คงบรรทด ศนยสารสนเทศและประกนคณภาพ

การสรางเวบ เพจดวยภา ษา HTML โดย. กานต คงบรรทด ศนยสารสนเทศและประกนคณภาพ คณะเกษตรศาสตร มหาวทยาลยเชยงใหม Web Programming 1

การสรางเวบ เพจดวยภา ษา HTML uโครงสรางของภาษา HTML uการจดรปแบบของขอคว ามในเอกสาร uการสรางจดเชอมโยงภ ายในเอกสาร(Hyper. Link( Web Programming 2

โครงสรางของภาษา HTML >HTML< สวนหว สวนเนอหา >HEAD> <TITLE></TITLE> </HEAD< >BODY< ภาษา HTML </BODY> </HTML>Programming Web 3

โครงสรางของภาษา HTML - ภาษา HTML ใช TAG ในการกำหนดรปแบบ - ขอความใน TAG จะไมมการแสดงผลบนจอ <CENTER> Open Tag </CENTER> Close Tag Web Programming 4

การจดรปแบบของขอค วามในเอกสาร u>BR> ขนบรรทด u>P> ยอหนาใหม u>CENTER>…</CENTER> กลางบรรทด u>HR> เสนคนแนวนอน Web Programming 5

การจดรปแบบของขอค วามในเอกสาร u>H 1> </H 1>. . <H 6> </H 6> หวเรอง 1(ใหญสด ) ถง 6 เลกสด u>B>. . </B> ตวหนา u>I>. . </I> ตวเอยง u>U>. . </U> ขดเสนใต Web Programming 6

การจดรปแบบของขอค วามในเอกสาร u>STRIKE> </STRIKE> ขดเสนทบขอความ u>BLINK> </BLINK> ขอความกระพรบ u>PRE> </PRE> จดขอความเหมอนในเอกสาร u>LISTING> </LISTING> แสดง Web Programming 7

การแสดงผลแบบรายการ u>UL> … </UL> รายการใชจดกำกบ u>OL>. . . </OL> รายการแบบตวเลขกำกบ u>LI> สมาชกของรายการ ตองใชอยภายใน <UL> หรอ <OL< Web Programming 8

การแสดงผลแบบรายการ <OL> A girl in my dream: <LI>Tall <LI>White <LI>Neat and Cute </OL> Programming Web 9

การสราง Hyper. Link ใช Tag ดงน <A HREF=“URL”> ขอความ หรอ สงทใชเปนจดเชอ มโยง </A> Web Programming 10

การสราง Hyper. Link 1. Link ภายในเอกสารเดยวกน <A HREF=“#ชอเปาหมาย ”>. . . </A> ใช <A NAME=“ชอเปาหมาย Web Programming ”> 11

การสราง Hyper. Link 2. Link เอกสารภายนอก <A HREF=“URL เปาหมาย ”>. . . </A> เชน <A HREF=“http: //www. kku. ac. th/”> KKU Programming Web </A> 12

การสรางเวบ เพจดวยภา ษา HTML u. Multimedia uการแทรกรปภาพ และ เสยง uการใสสสนใหกบเอกสาร uการแมป ภาพ (Image Map( Web Programming 13

Multimedia (1( สงหนงทจะทำให Web มจดเดน และ ไดรบความสนใจ คอ Web Page ทมทงภาพ , เสยง จนถงภาพเคลอนไหวตาง ๆ ซงจะทำให Web. Page Web Programming มชวต ชวา 14

Multimedia (2( ปญหาทสำคญของ Multimedia บน Web คอ ขนาดของไฟล ซงปกตไฟล Multidia เชน ไฟลเสยง หรอ VDO จะมขนาดใหญ มาก Web Programming ซงอาจจะทำใหผใชต 15

Multimedia (3( ปญหา ความหลากหลายของคอมพวเต อรและโปรแกรมของผใช : จะตองแนใจวาไฟลทเ ราเลอกใช Web Programming จะตองสามารถด หรอ 16

การสรางภาพ ภาพนงตองเปนภาพ JPG, JPEG หร เนองจากเปนรปแบบไฟลทมขนาดเลก สามารถสรางโดยใชโปรแกรมเชน Ph โดยการวาด ออกแบบ, การถายจากกลอง , การใช Scanner Web Programming 17

การแทรกรปภาพ (1( ตองเปนภาพ JPG, JPEG หรอ GIF >IMG src=“ไฟล หรอ url ภาพ”> - ALT=“text” ขอความจะแสดงเมอภาพ - WIDTH=x HEIGHT=y ความกวาง - LOWSRC=“ไฟลภาพ ” ภาพความละ - BORDER=n เสนขอบ Web Programming 18

การแทรกรปภาพ (2( การจดตำแหนงขอความร อบ Image -ALIGN=left ใหภาพอยดานซาย -ALIGN=right ใหภาพอยดานขวา เวนระยะรอบ Programming Image Web 19

การแทรกรปภาพ (3( การจดตำแหนง Image -ALIGN=“option” top, middle, absmiddle, bottom, absbottom Web Programming 20

SOUND (1( การสรางไฟลเสยง - เสยงพดปกตจะ Save เปนไฟล. WAV, . AU - เพลงทมความยาว จะใช เปน. RA (Real Player) หรอ. MP 3 Web Programming 21

SOUND (2( การแทรกดนตรใน Web - สำหรบ Net. Scape <EMBED SRC=“sound url”> controls= form | console | smallconsole | playbutton | Web volumelever Programming 22

SOUND (3( - สำหรบ Net. Scape (ตอ ) LOOP = n จำนวน loop หรอ LOOP = True วนไปเรอยๆ จนกวาจะ click stop ใชไดกบไฟล AIFF, WAV, AU, Web Programming 23

SOUND (4( - สำหรบ Internet Explorer <BGSOUND SRC=“sound url” Loop=n หรอ Loop=infinite ใชไดกบไฟล MIDI WAV, AU และ Web Programming 24

การใสสสนใหกบเอก uการกำหนดปกตสของต สาร (1( วอกษร < BODY • TEXT=#RRGGBB ขอความปกต • LINK=#RRGGBB • VLINK=#RRGGBB link เคยทไปแลว Web Programming 25

การใสสสนใหกบเอก สาร (2( uการกำหนดสพน ภาพ Background u< BODY และ • BGCOLOR=#RRGGBB • BACKGROUND=“Image url” Web Programming 26

การแมป ภาพ (Image uใน Graphics Interface : Map) click (1( จะใหผใช เลอกทรปภาพ หรอ ICon uปกตเราทำไดโดยการใช <A HREF=”… ประกอบกบ <IMG SRC…“= Web Programming 27

การแมป ภาพ (Image uการทำ Map) (2( Image Map จะทำใหผใชเลอกกด ในสวนตางๆ ของ Image โดยแตละสวนของภาพ จะมการ Link ไปยง Page ทตางกนได –Client-Side Image Map *** Web Programming 28

การแมป ภาพ (Image Map) (3( u 1. การแสดงภาพ ใช <IMG SRC=“image url” … ประกอบดวย USEMAP=“#ชอ MAP” ปดทายดวย ISMAP> uชอ Map Web Programming 29

การแมป ภาพ (Image Map) (4( uการกำหนด พนทของ MAP รปแบบ >MAP NAME=”ชอ map<" >AREA SHAPE=“type" HREF=”url" COORDS=”ตำ แหนง ” < Web Programming 30

การแมป ภาพ (Image Map) (5( SHAPE TYPE - rect สเหลยม (x 1, y 1, x 2, y 2) - circle วงกลม (x, y, r) - poly หลายเหลยม (x 1, y 1, x 2, y 2, x 3, y 3) Web Programming 31

การแมป ภาพ (Image >IMG SRC=“logo. jpg” Map) (6( USEMAP=“#logo” ISMAP< >MAP Name=“logo<” >AREA SHAPE=“rect” COORDS=“ 10, 100, 20 ” HREF=“http: //www. kku. ac. th<” >AREA SHAPE=“rect” COORDS=“ 10, 21, 100, 40 ” HREF=“http: //science. kku. ac. th” Web Programming 32

การสรางเวบ เพจดวยภา ษา HTML uการสรางตาราง (Table( uการจดแบงจอภาพ (Frame( uการสรางแบบฟอรมการรบ ขอมลจากผใช (Form( Web Programming 33

การสราง Table (1( uการแสดงผลโดยใชตาราง จะชวยจดรปแบบของเอก สารใหเปนระเบยบ และ ดเขาใจงาย u. Table สามารถชวยในการจดตำแ หนงของภาพ และ Web Programming 34

การสราง Table (2( u<TABLE> –>TR> Row • <TD> … </TD> Column –/>TR< –/>TABLE< Web Programming 35

การสราง Table (2( u. Simple Table 1 2 3 4 u<TABLE> –<TR><TD>1</TD><TD>2< /TD></TR> <TR><TD>3</TD><TD>4 </TD></TR> Web Programming 36

การสราง Table (3( uการกำหนดส ดวย BGCOLOR –<TABLE BGCOLOR=#rrggbb> สตาราง –<TR Web Programming 37

การสราง Table (4( uการกำหนดระยะ ใน Cell <TABLE cellspacing=”n” ระยะระหวาง cellpadding=“n” ระยะภายในcell Web Programming 38

การสราง Table (5( uการทำ Column Span xxx aaa bbbb <TABLE> <TR><TD COLSPAN=2>xxxx</TD></ <TR><TD>aaaa</TD><TD>bbbb</TD </TABLE> Web Programming 39

การสราง Table (6( uการทำ Row Span aaa xxx bbbb <TABLE> <TR><TD ROWSPAN=2>xxxx</TD> <TD>aaaa</TD></TR> <TR><TD>bbbb</TD></TR> </TABLE> Web Programming 40

การสราง Table (7( uการทำ Row&Column Span aaa xxx aaa bbb ccc จงเขยน HTML สำหรบสราง TABLE ดงรป Web Programming 41

การสราง Table (8( <TABLE cellpadding=6 border=1> ccc <TR ><TD rowspan=2 >xxx</TD> <TD colspan=3>aaa</TD></TR> <TD>aaa</TD><TD>bbb</TD </TR> </TABLE> xxx aaa Web Programming aaa bbb 42

การจดแบงจอภาพ u. Frame (Frame( ใชในการแบงจอภาพ การแสดงผล ทำใหสามารถแสดง Web. Page จากหลายไฟล HTML ในหนาจอเดยวกน uโดยการแบงจอเปนสวนๆ Web Programming 43

การจดแบงจอภาพ (Frame( uแตละ Frame จะมขอมลของตนเอง uสามารถแบง Frame ไดทงแนวตงและแนว นอน uมหลาย Frame ในหนาเดยวกนได Web Programming 44

การจดแบงจอภาพ (Frame( PARENT FILE FRAME 1 FRAME 2 1 FRAME n file FRAME 2 FRAME 3 Web Programming 45

Frame : คำสงในการแบง uแบงตามแนวนอน Frame > FRAMESET ROWS=“T%, B%”>. . . บน ลาง </FRAMSET< uแบงตามแนวตง <FRAMESET ซาย ขวา COLS=“L%, R%”>. . . Web Programming 46

Frame : ตวอยาง <FRAMESET ROWS="20%, 80%"> <FRAME SRC="top. html" NAME="topfram <FRAMESET COLS="20%, 80%"> <FRAME SRC="left. html" NAME="le <FRAME SRC="body. html" NAME=" </FRAMESET> File ทใชแสดงใน Frame </FRAMESET> Web Programming 47

Frame : ตวอยางผลลพธ Top. html 20% Left. html Body. html 80% 20% 80% Web Programming 48

การสรางแบบฟอรมการร uบขอมลจากผใช สงหนงททำให Web นาสนใจมากขนคอ การเปดโอกาสใหมการร บขอมลจากผอาน ซงทำไดโดยการสรางแ บบ Form ใน Web Page ใหผอานกรอกขอมล Web Programming 49

การสรางแบบฟอรมการร บขอมลจากผใช uซงเราสามารถเขยนโปรแ กรมท Server เพอ ประมวลผลขอมลทถกส งมาจาก Form ได เรยกวาโปรแกรม CGI ซงจะกลาวในบทตอๆ ไป Web Programming 50

การสรางแบบฟอรมการร บขอมลจากผใช uตวอยางการใชแบบ Form เชน หนาจอคนหาขอมล Web Board, หนาจอสมครสมาชก หรอ ใน Web Mail uปจจบนมการใช Web Programming , 51

FORM : คำสง <FORM Method=“GET หรอ POST” Action = “URL” > Method คอ. . วธทใชสงขอ </FORM> มล Action คอ Web Programming 52

FORM : คำสงสราง Control <INPUT > Textbox, Checkbox, Radiobox, Button <SELECT> List Box <TEXTAREA> ชองปอนขอความแบบหลายบร รทด (Memo) Web Programming 53

FORM : คำสง INPUT <INPUT TYPE = “ชนดของ INPUT” NAME = “ชอของ INPUT” VALUE = “คาขอมล ” SIZE = “ความกวางของชอง ” MAXLENGTH=“จำนวนตวอ Web Programming 54

FORM : INPUT TYPE u. TEXT ชองขอความ u. PASSWORD ชองขอความสำหรบรหสผ าน u. CHECKBOX ชองทำเครองหมาย u. RADIO Web Programming 55

FORM : ตวอยาง INPUT User Name : <INPUT TYPE=“TEXT” Name=“User. Name” Size=“ 16”> <BR> Password : <INPUT TYPE=“Password” Name=“passwd” Web Programming 56

FORM : การสราง Drop Down List Combo Box ใชแสดงตวเลอก <SELECT name=“ชอ ”> <OPTION value=“คาขอมล ” >ตวเลอก 1 <OPTION value=“คาขอมล ” Web Programming 57

FORM : การสราง List BOX Combo Box ใชแสดงตวเลอก <SELECT name=“ชอ ” MULTIPLE> MULTIPLE <OPTION value=“คาขอมล ” >ตวเลอก 1 <OPTION Web Programming 58

FORM : การสราง TEXT AREA <TEXTAREA name=“ชอ ” ROWS=“จำนวน row” COLS =“จำนวน column”> ขอความเรมตนภายในกล องขอความ Programming Web 59