Embed Size (px)
DESCRIPTION
กระบวนวิชา 25 3208 การพัฒนาโปรแกรมบนเว็บ Web Applications Development. HTML. สิ่งที่ต้องเตรียมเมื่อต้องการเขียนโฮมเพจ. - PowerPoint PPT Presentation
Citation preview
กระบวนวชา 25 3208 การพฒนาโปรแกรมบนเวบ
Web Applications Development
HTML
สงทตองเตรยมเมอตองการเขยนโฮมเพจ
• ไฟลของโปรแกรม HTML เปนแทกซ ไฟลธรรมดา ทใช นามสกลวา .htm หรอ .html โดย เมอเรา
เขยน คำาสงตาง ๆ ลงใน โปรแกรม Notepad แลว เรา จะ Save ใหเปน นามสกลดงกลาว ถาไมเชนนน เรา จะไมสามารถ แสดงผล ได ทาง เบราเซอร และ
ถามการแกไข หรอ เขยนโปรแกรม เรากสามารถ ใชโปรแกรม Notepad นเปนตวแกไขไดเลย
โครงสรางพนฐานของ HTML • โครงสรางของ HTML จะประกอบไปดวยสวนของคำาสง 2 สวน คอ
สวนทเปน สวนหว (Head) และสวนทเปนเนอหา (Body) โดยมรปแบบคำาสงดงน
<HTML><HEAD><TITLE> ชอโปรแกรมหรอขอมลทตองการแสดงในสวนหว </TITLE></HEAD><BODY>คำาสงหรอขอความทตองการใหแสดง</BODY></HTML>
การจดโครงสรางแฟมเอกสาร•
ในความงายของภาษา HTML นนเพราะภาษานไมมโครงสรางใด ๆ มากำาหนดนอก จากโครงสรางพนฐานเทานน หรอ แมแตจะไมม
โครงสราง พนฐานอย โปรแกรมทเขยนขนมานนกสามารถทำางานได เสมอนม โครงสรางทงนเปนเพราะ วาตวโปรแกรม เวบเบราเซอร จะ
มองเหนทกสงทกอยางในโปรแกรม HTML เปนสวนเนอหาทงสน
ยกเวนใน สวนหว ทตอง มการกำาหนด แยกออกไปให เหนชดเทานน จะเขยน คำาสง หรอ ขอความท ตองการ ใหแสดง อยางไรกได เปน
เสมอนพมพงานเอกสารทว ๆ ไปเพยง แต ทำาตำาแหนง ใดมการ ทำา ตำาแหนง พเศษขนมา เวบเบราเซอรถงจะแสดงผล ออกมาตามท
ถกกำาหนด โดยใชคำาสงใหตรงกบ รหสทกำาหนดเทานน
การแสดงผลทเวบเบราเซอร• หลงจากมการพมพโปรแกรมนเสรจเรยบรอยแลว ใหบนทกเปน ไฟลทม
นามสกล .htm หรอ .html จากนนใหเรยกโปรแกรมเวบเบราเซอรขนมา ทำาการทดสอบ ขอมลทเราสรางจะถก นำามาทออกมาแสดงทจอภาพ ถา ไมเขยนอะไรผด บนจอภาพกจะแสดงผลตามนน ถาเรามการปรบปรง
แกไขขอมลในโปรแกรมเดม ใหอยในรปของ โปรแกรมใหม กจำา เปนตอง โหลดโปรแกรมขนมาใหม เพยงแตเลอนเมาสไปคลกทปม Refresh
โปรแกรมกจะทำาการ ประมวลผลและแสดงผลออกมาใหม ในคำาสงHTML สวนใหญใชตวเปด เปนเครองหมาย นอยกวา < ตามดวยคำาสง
และปดทายดวยเครองหมายมากกวา > และมตวปดทมรปแบบเหมอน ตวเปดเสมอ เพยงแตจะมเครอง หมาย / อยหนาคำาสงนน ๆ เชน คำาสง
<BODY> จะม </BODY> เปนคำาสงปด เมอใดทผเขยนลมหรอพมพคำาสง ผด จะสงผลใหการทำางานของโปรแกรมผดพลาดทนท
คำาสงเรมตนสำาหรบ HTML
• คำาสงหรอ Tag ทใชในภาษา HTML ประกอบไปดวย เครองหมายนอยกวา < ตามดวย ชอคำาสงและปดทายดวย
เครองหมายมากกวา> เปนสวนททำาหนาทตกแตงขอความ เพอ การแสดงผลขอมล โดยทวไปคำาสงของ HTML สวนใหญ
จะอยเปนค มเพยงบาง คำาสงเทานน ทมรปแบบคำาสงอย เพยงตวเดยว ในแตละคำาสง จะมคำาสงเปดและปด คำาสงปด
ของแตละ คำาสงจะม รปแบบเหมอนคำาสงเปด เพยงแตจะเพม/(Slash) นำาหนาคำาสง ปดใหด แตกตาง เทานน และในคำาสง
เปดบางคำาสง อาจมสวนขยายอนผสมอยดวย ในการเขยน ดวยตวอกษร เลกหรอใหญ ทงหมดหรอเขยนปนกนกได ไมม
ผลอะไร
คำาสงเรมตน• รปแบบ <HTML>.....</HTML>
คำาสง <HTML> เปนคำาสงเรมตนในการเขยน โปรแกรม และ </HTML>เปนคำาสงจดสนสด
โปรแกรมเหมอนคำาสง Beign และ End ใน Pascal
คำาสงการทำาหมายเหต• รปแบบ <!-- ..... -->ตวอยาง <!-- END WEBSTAT CODE -->ขอความทอยในคำาสงจะปรากฎอยในโปรแกรมแต
ไมถกแสดง บนจอภาพ
สวนหว • รปแบบ <HEAD>.....</HEAD>
ใชกำาหนดขอความ ในสวนทเปน ชอเรอง ภายในคำา สงน จะมคำาสงยอย อกหนงคำาสง คอ <TITLE>
กำาหนดขอความในไตเตลบาร• รปแบบ <TITLE>.....</TITLE>
ตวอยาง <TITLE> บทเรยน HTML </TITLE> เปนสวนแสดงชอของเอกสาร จะปรากฎ ขณะท
ไฟล HTML ทำางานอย ขอความ ทกำาหนด ในสวนน จะไมถกนำาไปแสดง ผลของ เวบเบราเซอรแตจะ
ปรากฎในสวนของไตเตบาร (Title bar) ทเปนชอ ของวนโดวขางบนไมควรใหยา เกนไป เพยงใหรวา
เวบเพจทกำาลง ใชงานอยเกยวของกบอะไร
สวนของเนอหา• รปแบบ <BODY>.....</BODY>
สวนเนอหาของโปรแกรมจะเรมตนดวย คำาสง<BODY> และจบลงดวย </BODY> ภายในคำาสงน
คอ สวนทจะ แสดงทางจอภาพ
การเตมสสนใหเอกสาร• ผลการแสดง ทเกดขน บน เวบเพจ เราจะพบวาเอกสาร ทวไป
แลวตวอกษร ทปรากฎ บนจอภาพ จะเปน ตวอกษรสดำา บนพน สเทา ถาเรา ตองการ ทจะ เปลยนส ของตวอกษร
หรอ สของ จอภาพ เราสามารถ ทำา ไดโดย การกำาหนด แอตทรบวต (Attribute) ของตวอกษร สงทตองการน จะเปน
กลมตว เลขฐาน 16 จำานวน 3 ชด โดยชดท หนง ทำาหนาท แทนคาสแดง ชดทสอง ทำาหนาท แทนสเขยว และชดทสาม ทำาหนาทแทนส นำาเงน ขอมล ในตาราง ตอไปนจะแสดง สพน
ฐาน และรหสส ทสามารถแสดงไดทกเวบเพจ
ส รหสส
• ขาว• #FFFFFF• ดำา• #000000• เทา• #BBBBBB• แดง• #FF0000• เขยว• #00FF00• นำาเงน• #0000FF
สของพนฉากหลง• รปแบบ BGCOLOR=#สทตองการ
ตวอยาง <BODY BGCOLOR="#FF0000"> เราใช BGCOLOR=# สทตองการ ใหเปนสวนหนง
ของ <BODY> ซงจะทำาใหเกดสตามทเราเลอก ลกษณะเปนฉากสอยขางหลง
สของตวอกษรเฉพาะท• รปแบบ <FONT
COLOR="#สทตองการ">...</FONT> ตวอยาง <font
color="#FF0000">สแดง</font> คำาสงนเราใชในการเปลยนสของตวอกษรในสวนท
เราตองการใหเกดสสนแตกตางไปจากสตวอกษร อน ๆ เชน <FONT
COLOR="#FF0000">สแดง</FONT>ตวหนงสอ คำาวาสแดงกจะเปนสแดงตามทเราตองการทนท
สของตวอกษรทเปนจดคลกเมาส• รปแบบ LINK="#รหสส" ALINK="#รหสส"
VLINK"#รหสส"ตวอยาง <BODY BGCOLOR="000000" TEXT="#F0F0F0" LINK="#FFFF00" ALIGN="#0077FF" VLINK="#22AA22">
กำาหนดอยในสวนของ BODY โดยกำาหนดใหLINK = สของตวอกษรกอนมการคลกALIGN = สของตวอกษรขณะถกคลกVLINK = สของอกษรหลงจากคลกแลว
การจดรปแบบโฮมเพจ• ในการเขยนคำาสงเพอใหแสดงผลดวยเวบเบรา
เซอรการกด ปม Enter ทแปนพมพเพอขนบรรทด ใหมในขณะทสราง ไฟลนนยงไมมโปรแกรมเวบเบ
ราเซอรตวใดรจกคำาสงทขนบรรทดใหมทเกดจาก การกดแปนพมพเลยดงนน เราจง ตองม การ
เขยนคำาสงขนซงในบทนเราจะมารถงคำาสงทใชใน การกำาหนด รปแบบตางเพอให เวบเพจ มความ
สวยงามมากยงขน
การขนบรรทดใหม• รปแบบ <BR>เปนคำาสงสำาหรบการสงใหแสดงผลในบรรทดใหม
ใหใสคำาสงน ในตำาแหนงทเราตองการ ใหการแสดง ผลขอมลนนขนบรรทดใหม
ยอหนาใหม• รปแบบ <P ALIGN=align type>ขอความ</P>
เราจะใชคำาสงนเมอตองการ ขนบรรทดใหมเหมอน<BR> แตจะทำาการ เวนบรรทดใหมใหอก
หนงบรรทด จะใชคำาสง<P> อยางเดยว กได โดยไม ตอง มคำาสง ปด จะไวหนาหรอ หลงขอความท
ตองการขนกได แตถาใชคำาสง <P ALIGN=align type> ตองมคำาสง ปด</P> ดวย โดย align type
สามารถ ใช CENTER,LEFT หรอ RIGHT กได เชน<P ALIGN=CENTER> ขอความน กจะอยตรงกลาง</P>
เสนคน • รปแบบ <HR ALIGN=xx COLOR=xx SIZE=xx
WIDTH=xx NOSHADE> เราสามารถกำาหนดตำาแหนง , ส , ขนาดของความหนา ,
ความยาว หรอกำาหนดแบบเสนทบ กได โดย โดย X = คาตาง ๆ เหลาน
<ALIGN> = CENTER , LEFT , RIGHTCOLOR = ตามสทเราตองการ เปนรหสส R-G-BSIZE = เปนตวเลข บอกขนาด 1 ถง 7 และ -1 ถง -7WIDTH = กำาหนด ความหนา ของเสนเปน เปอรเซนตNOSHADE = กำาหนด ใหเสน เปน เสนทบ
การสรางแบบฟอรม• สำาหรบฟอรมใน HTML ถอวาเปน สงทโตตอบกบผใช ในแบบ interactive
คอ เราสามารถ ใชฟอรม ในการตอบโต กบผอานไซต ของเราได ทนท เมอ พดถง ฟอรมกคง ตองพด ถงคำาวา CGI (Common Gateway Interface) ซงกคอ โปรแกรม หรอ สครปทตวหนง ทคอยตรวจสอบ และจดการ กบ
แบบฟอรม รวมทง การประมวลผล ตาม แบบทเจาของ ไซตตองการ โดย มากมก เขยนขนดวยภาษา C หรอ Perl แตในการใช CGI น เปนเรองทยง
ยาก กลาวคอ ถาเราไมใช ผดแลระบบ แลวถอว าไมมสทธ ซงกหมาย ความวา เราตอง ตดคณสมบต แบบ Interactive ออกไป แลวเรา หนมาใช
Mailto: แทน ซงเรากยง สามารถท จะสรางฟอรม ไดเชนเดม หรอไม กใช ภาษ าจาวาสครปท มาชวย โดยเรา ตองเขยน สครปทขนมา แลวปะตด ไป
กบไฟล HTML การประมวลผล ตาง ๆ ไมจำาเปน ตองสงไปท เซรฟเวอร แตสามารถ ประมวลผล บนเครอง ของผชม ไซตได ทนท แตในทน ผมจะ
ขอกลาว ในสวน ของการใช mailto:
รปแบบของฟอรม• รปแบบ < FORM METHOD="..." ACTION="..."
ENCTYPE"..."></FORM>METHOD=GET/POST โดย GET จะสงไดไมเกน 255 ตวอกษร สวนใหญใช
สงคาตวแปรและ URL และ POST จะสงขอความไปไดไมจำากด ซงนยมใช มากกวา GET
ACTION="mailto:[email protected]" ซงเปนรปแบบของการสงขอมลจากฟอรมไปยงเมลบอกซของเราENCTYPE= "application/x-www-form-urlencoded" เปนการกำาหนด รป
แบบการเกบขอมลของฟอรม เพอทจะสงขอมลไปยงเซรฟเวอร จะใสหรอ ไมใสกได แตถาใส จะทำาใหโปรแกรม mailto: สามารถใชโปรแกรมเมล บาง
โปรแกรมอานขอมลทถกเกบในรปแบบนไดทนท เชน<FORM METHOD=POST ACTION="mailto:[email protected]" ENCTYPE= "application/x-www-form-urlencoded"> </FORM>
Tip
• ถาผกรอกแบบฟอรมใชบราวเซอรจาก Netscape หวขอหรอ Subject ของเมลทสงมายง เมลบอกซนน
จะมหวขอวา"Form posted from Mozilla" แตถาเปน ตวอนจะเปน "Form Response" ถาคณไมชอบก
สามารถเปลยนไดในสวนของ ACTION ดงน<FORM METHOD=POST ACTION="mailto:[email protected]?subject="Answer from Product Questonaire"> โดย
ในสวนของ Subject นนสามารถเปลยนไดตามใจเรา
การสรางแบบฟอรม• รปแบบ < INPUT TYPE=TEXT NAME="..." SIZE=n
MAXLENGTH=n VALUE="...">• TYPE=TEXT เปนการกำาหนดคาใหแสดงตวรบขอมลแบบ TEXT • NAME="..." ชอหวขอ เพอบอกใหรวา คาทไดรบกลบมานน
เกยวกบอะไร • SIZE=n เปนจำานวนขนาดของชองรบขอความคาปกต 20 ตว
อกษร • MAXLENGTH=n เปนจำานวนตวอกษรทรบไดสงสดในชองรบ
นน ๆ • VALUE="..." ขอความทอยระหวางเครองหมายคำาพดจะ ปราก
ฎอยในชอรบขอมลใหโดยอตโนมต
ชองปอนรหสผาน• รปแบบ < INPUT TYPE=PASSWORD
NAME="..." SIZE=n MAXLENGTH=n VALUE="...">
รปแบบคลายกบกบการ INPUT ดวย TEXT ตางกน เพยงแค เปลยนคำาวา TEXT ใหเปน PASSWORD
เทานน ในชองทกรอกรหสหนาจอ จะแสดงเปน สญลกษณ "*" เครองหมายดอกจนแทน เพอ
ปองกนไมใหคนอนมองเหนPassword :
ปม Radio Botton
• รปแบบ <INPUT TYPE=RADIO NAME="..." VALUE="..." CHECKED>
ปมเลอกแบบนสามารถเลอกไดเพยง ปมเดยว เทานน คำาสง CHECKED นนมไว เพอกำาหนด ใหตว
เลอก ถกเลอก ไวกอนแลว โดยเปนตวเลอกทเรา คดวาผกรอกแบบฟอรมนาจะเลอก สามารถ
กำาหนดไดตำาแหนงเดยวชายหญง
เชคบอกซ• รปแบบ < INPUT TYPE=CHECKBOX NAME="..." VALUE="..."
CHECKED> ปมเลอก แบบน สามารถเลอก หลายปม คำาสง CHECKED สามารถ
กำาหนด ไดหลายตว สวนการตงคาอน ๆ เหมอนแบบ Radio Botton คาของ name และ value ไมมรปแบบ กำาหนดตายตว วาเปนแบบใด
จะกำาหนดname ใหเหมอนกนแต value ตางกนหรอ กำาหนด name ตางกน สวน value เหมอนกน อยางไรกได ขอใหเราเขาใจและประเมน
ผล ขอมลทสงมาไดเทานนเองคณตศาสตรฟสกสชววทยาเคม
ตวรบขอมลแบบ TEXTAREA • รปแบบ
< TEXTAREA NAME="..." ROWS=n COLS=n WRAP=OFF/VIRTUAL/SOFT/PHYSICAL/HARD >.........TEXT.........TEXT</TEXTAREA> เราสามารถกำาหนดขนาดของกรอบรบขอความไดดวยตวเอง
• • ROWS=n n หมายถง จำานวนบรรทดทตองการ • COLS=n n หมายถง จำานวนความกวางของกรอบรบขอความ มหนวยเปน 50 ตวอกษร • รปแบบการปดคำา(Wrap) ปกตไมไดตงไวเราสามารถกำาหนดได 3 วธ คอ
1. WRAP=OFF คาปกต ไมมการปดคำาขนบรรทดใหม ขอความจะถกพมพไปเรอย ๆ จนกวาผกรอกจะ กด Enter
2. WRAP=VITUAL หรอ WRAP=SOFT ปดคำาเมอสนสดกรอบขอความ แตเปนการปดคำาแบบหลอก ๆ เฉพาะตอหนาผกรอกเทานน
3. WRAP=PHYSICAL หรอ WRAP=HARD ปกคำาเมอสนสดกรอบรบขอความ ซงเปนการปดจรง ๆ
การใชงานเบราเซอรบางรนไมสนบสนน VITUAL และ PHYSICAL ฉะนนทางแกคอใหใช SOFT และ HARD จะดกวา
ปมยกเลก และ ตกลง• รปแบบ
< INPUT TYPE=SUBMIT VALUE="..." >< INPUT TYPE=RESET VALUE="..." >
• Submit มหนาทไวสงแบบฟอรมกลบไปยงเจาของฟอรม • Reset มไวสำาหรบเคลยรคาฟอรมทงหมดใหกลบอยในรป
แบบเดมกอนมการกรอก • Vaule เปนการกำาหนดคำาอธบายปมแทนคาปกตคอ Submit
Query กบ Reset จะมหรอไมมกได
การแสดงผลแบบรายการ
• ในการแสดงขอมลบนเวบเพจนอกจากการแสดงผลแบบปกตทวไปแลวบางครงเราอาจมความ
จำาเปนตองจด รปการแสดงผลใหเปนแบบของรายการ(list) คอ มการ แสดงขอมลในลกษณะท
เปนหวขอซงอาจ มคำาอธบายหรอ ไมมกได การ แสดงขอมลแบบรายการจะมรายการแบบลำาดบ
( ใชหมายเลข กำากบ) หรอ รายการแบบไมมลำาดบ( ใชสญลกษณ กำากบ) แตไมวา จะเลอกใหม
การ แสดงผลรายการ แบบใด กตามทง 2 ลกษณะ กมลกษณะ การทำางาน ทเหมอนกน
รายการแบบใชสญลกษณกำากบ (Bullet lists)
• รปแบบ<UL> ตวเปด<LI> ขอมลทนำามาแสดง<LI> ขอมลทนำามาแสดง</UL> ตวปด
เปนการแสดงผลโดยใชสญลกษณในการกำากบรายการตาง ๆ และเราสามารถกำาหนดลกษณะของ สญลกษณไดโดยใชคำาสง Type=N ซง N=circle=วงกลม,disc= วงกลมทบ หรอ square= สเหลยม
โดยอยในคำาสง ของ <UL> ถาตองการ ใหสญลกษณ เหมอนกน ทกรายการ แต ถาตองการ ให แตละรายการ ไมเหมอนกนใหใสในสวนของ <LI> เชน
<UL><LI Type=disc> รายการท 1<LI Type=circle> รายการท 2<LI Type=square> รายการท 3</UL>
เวบเบราเซอร จะแสดง ออกมา เปน รายการท 1 • รายการท 2 • รายการท 3
รายการแบบใชตวเลขกำากบ (Numbered lists)
• รปแบบ<OL> ตวเปด<LI> ขอมลทนำามาแสดง<LI> ขอมลทนำามาแสดง</OL> ตวปด
เปนการกำาหนดรายการโดยใชตวเลขกำากบเชน 1 หรอ i และเราสามารถกำาหนดคาเรมตนไวท <OL> โดยใสคา START=n โดย n= ตวเลขทตองการเรม และ TYPE=n โดย n= a , A , i , I ซง
เปนชนดของคาเรมตน ตามตวอยางจะเรม ตนท 3 ชนดเปน a เชน<OL START=3 TYPE=a><LI> รายการท 1<LI> รายการท 2<LI> รายการท 3</OL>
เวบเบราเซอร จะแสดง ออกมาเปน รายการท 1 • รายการท 2 • รายการท 3
รายการแบบใชตวเลขกำากบ (Numbered lists)
• เรายงสามารถใชคำาสง TYPE=n ในสวนของ <LI> ได แตคาเรมตนตองเปนไปตามคาดงกลาวขางตนให สงเกตตามตวอยาง <OL>
<LI TYPE=1> รายการท 1<LI> รายการท 2<LI> รายการท 3</OL>
<OL> <LI TYPE=a> รายการท 1<LI> รายการท 2<LI> รายการท 3</OL>
เวบเบราเซอร จะแสดง ออกมา เปน รายการท 1 • รายการท 2 • รายการท 3 • รายการท 1 • รายการท 2 • รายการท 3
รายการแบบกลม (Preformatted Text)
• รปแบบ <PRE>....</PRE> การใช คำาสงนไมสามารถใชกบภาษาไทยได ใชได
แตภาษาองกฤษอยางเดยวขอความทอยภายใน คำาสง จะมขนาดเทากน ทกตว แสดงขอมลทอยใน
รปของตารางหรอรายงานแผนผงอยางงาย ๆ-------------------------------------------------------- Date Time Note -------------------------------------------------------- 20 08.52 - 25 09.50 - 26 10.00 - 28 12.00 - ---------------------------------------------------------
รายการแบบ Extended Quotations• รปแบบ <BLOCKQUOTE>......</BLOCKQUOTE>
คำาสงนสามารถแกไขปญหาการใชภาษาไทย ไดการแสดงผลขอความจะ เยองขวาและจดขอความใหตวอกษรตวแรก ของบรรทดเรมทตำาแหนง
เดยวกนเชน<BLOCKQUOTE> <P>Omit needless world.</P> <P>Vigorous writeing is concise.A sentence should contain no annecessary words.</P> ------Willian Strunk,------- </BLOCKQUOTE>
เวบเบราเซอร จะแสดงผลเปนOmit needless world.
• Vigorous writeing is concise.A sentence should contain no annecessary words.
• ------Willian Strunk,-------
การแสดงผลแบบ Address
• รปแบบ <ADDRESS>....</ADDRESS> ใชเมอ ตองการ จะพมพ ทอยของเราเพอใหผทเขา
มาใชเวบเพจสามารถตดตอกบเราได รปแบบตว อกษรเปนตวเอน เชน
Liberta Co.,Ltd. 215/12 ถนนรามคำาแหง ซอยรามคำาแหง 24
หวหมาก บางกะป 10310 Tel & Fax : 02 2541241 E-Mail : [email protected]
การใสรปภาพลงในเวบเพจ
• เมอเรม เขาไป ยงโฮมเพจ ของ เวบไซต แตละแหง บนอนเตอรเนต สงแรก ทมก เปนท ตดตา ของผ ใช บรการ กคอ การท แตละ โฮมเพจ จะม รปภาพ สวย ๆ แสดง ออกมา มการ จดรปภาพ และขอความ ทเปน ระเบยบ ทำาใหอาน งาย เขาใจ เนอหา ทตองการ ไดอยาง รวดเรว
กอนท เราจะ มาร ถงคำาสง ในการ ใสรปภาพ ลงใน เวบเพจ นน เราตอง มาร จก เกยวกบ รปภาพ ทเรา จะนำา มา ใส ใน เวบเพจ เสยกอน รปภาพ ทจะ นำามา ใชใส ลง ในเวบเพจ นน สวนมาก มนามสกล เปน GIF และ JPG
ไฟล
รปภาพ แบบ GIF ยอมาจาก Graphics Interchange Format เปนไฟล ชนดบตแมป (Bitmap) เปนเทคนค การเกบภาพ โดยให จดส(pixet) ตาง ๆ เรยง ตอกน จนเกด เปนภาพ ไฟล GIF น สวนใหญ จะนยม ใชกบ
ภาพถาย และภาพการตน แสดงผลเปน ภาพนง แตใน ปจจบนม โปรแกรม สำาหรบทำา หนาท รวบรวม ภาพGIF หลาย ๆ ภาพ เขาเปน ไฟลเดยวกน เมอนำา ภาพมา แสดง ทำาใหเกด เปนภาพ เคลอนไหวขน
ไฟลรปแบบ JPG ยอมาจาก Joint Photographic Expers Group เปนไฟลใน รปแบบ ทผาน กระบวน การบบยอย ขอมล มากอน มการ นำาเอา ขอมล สวนท ไมสำาคญ ออกไป แลวทำาการ บบอด ขอมล ในอตรา สวน 10:1 โดยขนาด ของไฟล ทเรา นำามา ใชงาน นน อาจมขนาด เหลอ
เพยง 10 - 30 % ของขนาดไฟล กอนจะมการ บบ ยอ ขอมล ขนาดของ การบบ ขอมล มได 3 ระดบ(Hight,Middle,Low Compression) ไฟลท มการ บบยอ ขอมล มากทสด จะได ไฟลทมขนาด เลกทสด แต
คณภาพ กลดลง ตาม ไปดวย หากตองการ ภาพทม คณภาพด ทสด ขนาดของ ไฟลกจะ ใหญ ทสดเชนกน
การใสรปภาพลงในเวบเพจ• รปแบบ <IMG ALIGN=align-type BORDER=n HEIGHT=n WIDTH=n HSPACE=n VSPACE=n SRC=address
ALT=text>ALIGN=align-type(ตำาแหนง) เปนการ กำาหนด ตำาแหนง รปภาพ ถาภาพไม ใหญ ขอความ นนจะ อย ท
ตำาแหนง สวนลาง ของภาพ ทางขวา มอเสมอ เราสามารถ กำาหนดได โดยใชคำาตาง ๆ เหลานLEFT = วางภาพทตำาแหนงทางซายRIGHT = วางภาพทตำาหนงทางขวาTOP = วางภาพ ทตำาแหนง ดานบนMIDDLE = วางภาพ ทตำาหนง กงกลางBOTTOM= วางภาพ ทตำาแหนง ดานลางBORDER=n เปนการ กำาหนด กรอบให รปภาพ n มคามาก กรอบจะ มความหนา มากขนHEIGHT=n เปนการ กำาหนด ความสง ของภาพWIDTH=n เปนการ กำาหนด ความกวาง ของภาพ ถาตองการ ใหภาพได สดสวน ใหกำาหนด เปนเปอรเซนต
โดยไม จำากด ความสงVSPACE=n กำาหนด ระยะ หางบน ลางของ ภาพHSPACE=n กำาหนด ระยะ หาง ซาย - ขวา ของภาพSRC =ใสรปภาพทตองการลงไปALT =text ใสขอ ความ เพอเปน คำาอธบาย รปภาพ ทนำามาวาง สำาหรบ ผใช อนเตอรเนต แบบเทกซขอสงเกต ALIGN ไมสามารถ กำาหนดให รปภาพ ไปปรากฎยงกงกลาง ของจอภาพ ได ถาตอง การให อย
ตำาแหนงดงกลาว ใหใชคำาสง <CENTER>...<CENTER>
การแสดงภาพฉากหลง• รปแบบ BACKGROUND="picture"
กำาหนด แอตทรบวต BACKGROUND="picture" ในคำาสงของ <BODY> เชน <BODY
BACKGROUND="hot.gif">
การเชอมโยงขอมล (Link)
• เปนท ทราบด อย แลววา การท อนเตอรเนต ไดรบความนยม อยางกวางขวางอย ทวโลกนนเป ผลมาจากความ สามารถในการเชอมโยงขอมล จากฐานขอมล หนง ไป
ยงอก ฐานขอ มลหนง ไดอยางรวดเรว โดยสามารถ เชอมโยงขอความ ไดทง จาก ภายใน แฟมเอกสาร ขอมลของตวเอง และแฟมเอกสารขอมลภายนอกทตาง
เวบไซตกน
ขอความ ทถกกำาหนดใหเชอมโยงกบฐานขอมลอน ๆ บนเวบเบราเซอรจะแสดงผล เปนตวอกษร ทมสแตกตางจากอกษรทวไป และอาจจะม ขดเสนใตขอความนนดวย
โดยทวไป ตวอกษรทแสดง ผลอยบน เวบเบราเซอร จะมสดำา ปนขาว (หรอสเทา) แต สำาหรบ ขอความ ทใชเปนตวเชอมขอมลนนจะเปนตวอกษร สนำาเงน หรอ อยางอน
ตาม ทสรางขนมาเมอเลอน เมาส ไปชท ขอความ ซ มการเชอมโยงของรปแบบ ตวช จะเปลยนจาก สญลกษณ ลกศร ไปเปนรป มอแทน และทบรเวณแถบแสดงสถานะ
ดานลาง จะแสดงถงตำาแหนงของจด หมายท ขอความจะเชอมโยงไปใหเราเหน
ประเภทการเชอมโยง• - การเชอมโยงภายในเวบไซต
- การเชอมโยงขอมลนอกเวบไซต- การเชอมโยงขอมล FTP- การเชอมโยงขอมล E-Mail
การเชอมโยงภายในเวบไซต• รปแบบ <A HREF="ทอยไฟล">ขอความ</A>
ตวอยาง <A HREF="tipcomputer.asp">ทปคอมพวเตอร</A>*** หมายเหต ถาลงคอยคนละโฟลเดอร <A HREF="../tipcomputer.asp">ทปคอมพวเตอร</A>
การเชอมโยงขอมลนอกเวบไซต• รปแบบ <A
HREF=" http://www..........">ขอความ</A> ตวอยาง <A
HREF=" http://www.bcoms.net">บคอม</A>*** หมายเหต คณสามารถสงใหเบราเซอรเปด
หนาใหมไดโดยกำาหนด target="_blank" ตวอยาง <a
href="http://www.driverzone.com" target="_blank"> Driver Zone </a>
การเชอมโยงขอมล FTP
• รปแบบ<FTP://HOSTNAME/FOLDER>ขอความ</A>HOSTNAME คอ ชอของศนยบรการ FTP Server FOLDER คอ ชอไฟลและไดเรกทอรทผเขารบบรการสามารถเขาไปใชงานได
ตวอยาง <A HREF=FTP://bcoms.net/download> Download </a>
การเชอมโยงขอมล E-Mail
• รปแบบ <A HREF="MAILTO:USERNAME@DOMAINNAME">ขอความ</A>
ตวอยาง <a href="mailto: [email protected]">[email protected]</a>
การสรางตาราง
• การสรางตาราง ลงใน เวบเพจมประโยชนมหาศาล เรา สามารถ ประยกต นำาไปใชไดหลายอยาง เพอเปนการเพม
สสนความสวยงามของเวบเพจ การสรางตาราง ในเวบเพจ กไมแตกตางจากการสรางตารางบนแผนกระดาษทว ๆ ไป
เราเคยทำาตารางอยางไร กสามารถสงใหเวบเพจของเรา ทำาอยางนนได เชนกน ตางกนทวาในเวบเพจเราไมสามารถ
ทจะ นำาเอาปากกา ดนสอ ไมบรรทด หรออปกรณ สำาหรบ เขยนตารางเขาไปเขยนบนจอภาพได เราใช นวมอของเรา
เปนผพมพคำาสง สำาหรบสรางตารางขนมา
โครงสรางตาราง• <TABLE>
<TR><TH>หวขอตาราง<TD>รายละเอยดยอย<TR><TH>หวขอตาราง<TD>รายละเอยดยอย</TABLE>
คณสมบตของตาราง• <TABLE>
ALIGN=align-typeBACKGROUND=urlBGCOLOR=colorBORDER=nCELLPADDING=nCELLSPACING=nWIDTH=nHEIGHT=n
<TR>
•ALIGN=align-typeBACKGROUND=urlBGCOLOR=colorBORDERCOLOR=colorVALIGN=align-type
<TH>
• ALIGN=align-typeBACKGROUND=urlBGCOLOR=colorBORDERCOLOR=colorCOLSPAN=nROWSPAN=nVALIGN=align-type
ตารางซอนตาราง•
มอย บอยครง ทเรา จำาเปน ทจะตอง สรางตาราง ให มลกษณะ ของตาราง ทบซอน กนได เพอ ผล
ทางการ แสดงผล ขอมล ขอมล ใหแบบ ละเอยด ของขอมล ไดมาก ทสด รปแบบ การเขยน ก
เหมอน กบเมอ สราง list ซอน list นนคอ ในสวน ของ บรรทด <TR> จะม การสราง ตาราง ใหม
<TABLE>.....</TABLE> กอนท จะม ตวเปด </TR> ในบรรทด นน ๆ เชน
ซงมโคดดงน•
<HTML><HEAD><TITLE>Table with and Neted tables</HEAD></TITLE><BODY><H1>Table with and Neted tables</H1><TABLE BORDER WIDTH=50%><TR><TD>A</TD><TD>B</TR></TR><TR><TD><TABLE BORDER WIDTH=100%><TR><TD>C</TD><TD>D</TR></TR></TABLE><TD><TD>E</TD></TR></TABLE ></BODY></HTML>
สรางเสยงดนตรบนเวบเพจ• แบบ Background Sound
รปแบบ <BGSOUND SRC="......." LOOP=n> เปนการใสเสยงเพลง ทำาเปน Background ใหกบโฮมเพจ เมอผ
เยยมชมเปดเขามา มนจะทำาการ โหลดเพลง ใหโดย อตโนมต โดย • BGSOUND เปนรปแบบการใสเสยงเพลงของ Microsoft
Internet Explorer • SRC ใส ตำาแหนง ทอย ของไฟลเสยง เพลงทตองการ
• LOOP จำานวนรอบทตองการใหเลน ถาตองการใหเลนไปเรอย ๆ ใหใส Infinite
ตวอยาง <BGSOUND SRC="sound.mid" LOOP=5>
แบบ EMBED • รปแบบ <EMBED SRC="......" HIDDEN=TRUE HIGHT=n WIDTH=n
CONTROLS=COLSOLE/SMALLCONSOLE AUTOSTART=TRUE LOOP=TRUE/n> เปนการใสเสยงเพลง ทำาเปน background ใหกบโฮมเพจของ Netscape Navigator โดย
• EMBED เปนรปแบบการใสเสยงเพลงของ Netscape Navigator • SRC ใส ตำาแหนง ทอย ของไฟลเสยง เพลงทตองการ
• HIDDEN เปนการซอนปมควบคมการเลนเพลง ถาไมตองการกไมตองใสเขาไปเลย เมอใสคำาสงน แลว คำาสงอนคอ hight,width,controls กไมตองใสเขาไป
• HIGHT เปนการกำาหนดความสงใหกบแผงควบคม • WIDTH เปนการกำาหนดความกวางใหแผงควบคม • CONTROLS กำาหนดรปแบบแผงควบคม โดย smallconsole เปนแบบอยางยอ สวน console เปน
เตมรปแบบ • - AUTOSTART กำาหนดการเลนเพลงโดยอตโนมต (TRUE) ถาไมตองการให ลบทงไปไดเลย • LOOP จำานวนรอบทตองการใหเลน ถาตองการใหเลนไปเรอย ๆ ใหใส TRUE แตถาตองการ กำาหนด
จำานวนรอบกใสเปนตวเลขเขาไป เมอไมตองการไมใหวนใหใส FALSE ( ไมจำาเปนตองใสกได เพราะคา ปกตเปน FALSE อยแลว) ตวอยาง
<EMBED SRC="sound.mid" HIGHT=60 WIDTH=144 CONTROLS=COLSOLE AUTOSTART=TRUE LOOP=TRUE>
แบบกำาหนดตวเชอม• รปแบบ < A HREF="......">คำาอธบาย</A>
เปนการใสเพลงโดยการกำาหนดตวเชอม ในชองวาง ๆใหใสตำาแหนงไฟลเสยง ลงไป สวนตรง "คำาอธบาย" ใหใสขอความทสอความหมายใหรวา ตวเชอมน เปนไฟลเพลง เชน "เพลงแสนสนก"
ตวอยาง < A HREF="sound.mid"> ฟงเพลงกดตรงนจา</A>
แบบ META รปแบบ < META HTTP-EQUIV="Refresh" CONTENT="1;URL=........"> ใชคำาสง meta เพอเปนการโหลดไฟลออดโอและ เลนเพลงนน ๆ โดยอตโนมต ทนทเมอเวบเพจ
ถกโหลดขนมา ใชไดทง IE และ NS โดย คำาสง• <META> ใสอยระหวาง คำาสง <HEAD>......</HEAD>
• HTTP-EQUIV="Refresh" กำาหนดการโหลดไฟลเพลงโดยอตโนมต • CONTENT="1;URL=...." เปนการกำาหนดเวลาทจะโหลดเพลงเมอเวบเพจถกโหลดขนมา โดย
URL เปนชอเพลงทตองการใหโหลด เชน<HEAD><META HTTP-EQUIV="Refresh" CONTENT="1;URL=sound.mid"></HEAD>
ใสไฟลวดโอใหเวบเพจ(IE) • รปแบบ <IMG DYNSRC="....." SRC="......" ALT="......" LOOP=n
START=FILEOPEN/MOUSEOVER CONTROLS> เปนรปแบบการใสไฟลวดโอของ Internet Explorer โดยมลกษณะคำาสงดงน
• DYNSRC="......" ใหใสชอไฟลวดโอลงไป เชน video.avi • SRC="......" ใหใสไฟลรปภาพ ไว เปนตวแทน ไฟลวดโอนน ๆ เมอบราวเซอร ผใชไมสนน
สนน • ALT="......" ใสขอความใด ๆ กไดลงไปเพอ ใหผใชท ไมสามารถดวดโอ สามารถรขอมลได • LOOP=n กำาหนดจำานวนครงทจะใหวดโอเลน ใสเปนตวเลขหรอ infinite กได • START=FILEOPEN/MOUSEOVER โดย fileopen เปนการกำาหนด ใหเรมเลนทนท ทไล
วดโอโหลดเสรจ ( ปกตแลววดโอจะถกเลน ทนททดาวนโหลดเสรจ ดงนน -STRAT=FILEOPEN จงไมตองใสกได) mouseover เปนการกำาหนด ใหเลนวดโอ เมอเอาเมาส
ไปวางบนวดโอนน ๆตวอยาง < IMG DYNSRC="SPORT.AVI" SRC=PICTURE.GIF ALT="ทดสอบการใชไฟลวดโอ(IE)" LOOP="2" >
การแบงจอภาพเปนสวน ๆ• การแบงจอภาพออกเปนสวน ๆ หรอ ทเรยกวา เฟรม(frame)
เฟรมถอวาเปนคำาสงหนงใน การเขยน HTML โดยเฟรมจะชวยให สามารถ แสดง ผลไฟล HTML หลาย ๆ ไฟลไดพรอม ๆ กน ภายใต เวบเพจ เดยวกน ตามปกต
แลว หนงเวบเพจ เราจะมไฟล HTML อยไฟลเดยว แตถาเราตองการ แบงหนาจอ ของเวบเพจ ใหเปน 3 - 4 สวน โดยแตละสวน มความเปนอสระ ของตวเอง ใช
HTML ของตวเอง คำาสง เฟรม จะฃวยในการจดงานดงกลาว
ในปจจบน เฟรมเปนคำาสง ทไดรบความนยม อยางมาก ในการนำามาใช ตกแตง เอกสาร HTML โฮมเพจ สวนใหญ จะนำาดฟรม มาเพมใส
ใน HTML เพอปรบแตง ใหพอดดขน อยาง เชน การนำาเฟรมมาใช ในการลอคให โฮมเพจ ของเรา มสวนหว และสวนทาย เหมอน ๆ กนทก หนาจอ คลาย ๆ กบ
การพมพ จดหมาย ทมหว กระดาษ ทานกระดาษ หรอการ นำาเฟรม มาทำา เปนเมน ซงเราสามารถ บงคบใหเฟรม ทบรรจ เมน อยโดย ไมเปลยนแปลง สวนอก เฟรม
หนง กแสดง เนอหากนไป
ระบบโครงสราง• คำาสง แรกทเรา ตองใช ในการสราง เฟรม กคอ <FRAMSET> คำาสงนเปนคำาสง
ทใชใน การกำาหนด ขนาดและ รปแบบของเฟรม ทคณ ตองการ คำาสง<FRAMSET> เปนคำาสง ทมาแทน คำาสง <BODY> ในไฟล HTML โดยม
โครงสรางดงน<HTML><HEAD><TITLE>.....</TITLE></HEAD><FRAMESET>...</FRAMESET></HTML>
FRAMESET
• คำาสง<FRAMESET> ม คำาสง 3 คำาสงยอย คอ1. <FRAME SRC= ชอไฟลทตองการแสดง> เปนการกำาหนด
คาตาง ๆ ทจะแสดงในพนทจอภาพ ไมวาจะเปน .htm, .html หรอ .gif, .jpg กไดทงหมด
2. <NOFRAME> คำาสงนจะถกแสดง เมอถกเรยกใชโดย เวบเพจรนเกา ทแสดงผลแบบเฟรมไมได
3. <FRAMESET> ใชในการซอนเฟรม มรปแบบคอ
• <FRAMESET ROWS="pixels,%,*"> หรอ • <FRAMESET COLS="pixels,%,*"> หรอ • <FRAMESET ROWS="pixels,%,*" COLS="pixels,%,*">
FRAMESET• <HTML>
<HEAD><TITLE>Frame Set</TITLE></HEAD><FRAMESET COLS=50%,*"><FRAME SRC="TABLE1.HTM"><FRAME SRC="TABLE2.HTM"></FRAMESET><NOFRAME><a href=http:://www.bcoms.net>HOME PAGE</a></NOFRAME></HTML>
การกำาหนดขนาดขอบหรอพนทวางรอบ ๆเฟรม
• รปแบบ <FRAME SRC="picture.gif" MARGINWIDTH="50" MARGINHEIGHT="50">
เราใชคำาสง MARGINWIDTH="pixels" และ MARGINHEIGHT="pixels" แทรก เขาไปในคำาสง <FRAME> เชน
<HTML><HEAD><TITLE>My First Frame </TITLE></HEAD><FRAMESET COLS=*,*"><FRAME SRC="picture.gif"><FRAME SRC="picture.gif" MARGINWIDTH="50" MARGINHEIGHT="50"></FRAMESET></HTML>
การกำาหนดคาตวเลอน• รปแบบ <FRAME SCROLLING="no/yes/auto">
โดยปกตแลว ตวเลอนทางดานขวาหรอดานลาง ของเฟรมจะปรากฎขนมาเอง โดยอตโนมต โดยด
จากขนาด ของพนทวา แสดงผลภายในเฟรมนน ๆ พอหรอไม คาปกต"auto" ถาไมตอง การให ตว
เลอน ปรากฎ ขนมา กำาหนดเปน "no" เรานำาลก เลนนมาลอคเมน หรอเฟรมไมให เคลอนไหว ไปมา
โดยตวเลอนได
หยดการเปลยนขนาดเฟรมโดยผใช• รปแบบ <FRAME NORESIZE>
ในเฟรมทว ๆ ไป ผใชสามารถเปลยนแปลง ขนาด ของเฟรม ไดโดยเลอนเมาสไป ยงบรเวณเสนขอบ
ของเฟรมนน ๆ จากนน ตวชจะเปลยนจากลกศร พรอมทจะปรบขนาด ถาเราไมตองการให ผใชปรบ
เรากใสคำาสงนลงไป
การตงชอใหเฟรม• รปแบบ <FRAME NAME=ชอเฟรม">
เราสามารถตงชอ ไดตามใจชอบ เพอประโยชน ในการเลนตวเชอม เราสามารถพบได ตาม ไซตตาง ๆ ทวไป ทใชเฟรมในการแบง หนาจอระหวาง เมนหรอตวเลอก กบ
เนอหา เชน เฟรมดานซาย เปนเมน ดานขวาเปน ตวแสดงขอมล โดยขอมลจะเปลยน เฉพาะดานขวาเทานน เชน
<HTML><HEAD><TITLE>My First Frame </TITLE></HEAD><FRAMESET COLS=20,*"><FRAME SRC="menu.htm"><FRAME SRC="result.htm" NAME="show"></FRAMESET></HTML>
• <HTML><HEAD><TITLE>Click One Please </TITLE></HEAD><BODY><H3>Click One Please</H3> < A HREF=NO1.HTM TARGET="SHOW">1</A>< A HREF=NO2.HTM TARGET="SHOW">2</A>< A HREF=NO3.HTM TARGET="SHOW">3</A>< A HREF=NO4.HTM TARGET="SHOW">4</A>< A HREF=NO5.HTM TARGET="SHOW">5</A>< A HREF=NO6.HTM TARGET="SHOW">6</A>< A HREF=NO7.HTM TARGET="SHOW">7</A>< A HREF=NO8.HTM TARGET="SHOW">8</A>< A HREF=NO9.HTM TARGET="SHOW">9</A>< A HREF=NO10.HTM TARGET="SHOW">10</A></BODY></HTML>
ตวเชอมตาง ๆ จะทำาการเชอมไปยงไฟล ปลายทาง เพอจะแสดงผผลไฟลนน ๆ ภายในเฟรมท 2 ทเปนเชนนเพราะวา มการใสคำาสง TARGET="SHOW" เขาไปในคำาสง <A HREF> ดวยเพอกำาหนด ปลายทาง แสดงผล ใหกบไฟล HTML
การลบกรอบของเฟรม•
รปแบบ <FRAMESET FRAMEBORDER=yes-no">
ปกตถาเรา ใชคำาสง <FRAMESET> ตรงสวนตอ ระหวางเฟรม จะมลกษณะของ <BORDER> ถาเรา
ไมตองการสามารถกำาหนดไดดวยคำาสงขางตน
