Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lernning 15

385 views

Published on

  • Be the first to comment

  • Be the first to like this

Lernning 15

  1. 1. ใบความรู้ ที 15 เรือง การสร้ างตารางและการเชือมโยง การสร้างเวบเพจใน ปั จจุบนมีการนําตารางเข้ามาเกียวข้องกับหลาย ๆ ส่วน ตังแต่การสร้างตารางเพือแสดง ัความสัมพันธ์ในลักษณะแถว (Row) และคอลัมน์ ั ่(Column) รวมถึงการแบ่งขอบเขตให้กบข้อความเพือการจํากัดและควบคุมข้อความให้อยูในส่วนทีเราต้องการ คําสังสําหรับสร้างตารางประกอบด้วยคําสังดังนี Tag คําอธิบาย <TABLE> ... </TABLE> คําสังในการสร้างตาราง <CAPTION> ... </CAPTION> คําสังในการกําหนดข้อความกํากับตาราง <TR> ... </TR> คําสังในการกําหนดแถวของตาราง 1 แถว <TH> ... </TH> คําสังในการกําหนดส่วนหัวของตารางแถว แรก <TD> ... </TD> คําสังในการกําหนดคอลัมน์ของข้อมูลในแถว ตัวอย่ าง การสร้างตาราง 5 แถว 3 คอลัมน์ ภาพแสดงการใช้คาสังสร้างตาราง ํ ภาพแสดงผลของการใช้คาสังสร้างตาราง ํ
  2. 2. จากภาพมีการใช้คาสัง <tr> จํานวน 5 ชุด แสดงว่าเป็ นการสร้างตาราง 5 แถว และในแต่ละแถว มีการใช้ ํคําสัง <td> จํานวน 3 ชุด แสดงว่าในแต่ละแถว แบ่งออกเป็ น 3 คอลัมน์ ในการสร้างตาราง จําเป็ นต้องมาการตกแต่งตาราง เช่น ขนาดของตาราง สี เส้นขอบ หรื อสี พนในตาราง เป็ นต้น ซึง ืคําสังทีใช้ในการตกแต่งตาราง มีดงนี ั 1. เส้ นขอบ เป็ นการกําหนดเส้นขอบให้ กับตารางคือเส้นขอบภายนอกและเส้นภายในหากไม่มีการกําหนดเส้นขอบจะไม่แสดงที เบราเซอร์ จะกําหนดไว้ในคําสังTABLE คือคําสัง BORDER รู ปแบบ <TABLE BORDER = ความหนาของเส้นขอบ > ความหนาของเส้นขอบทังภายในและภายนอกโดยกําหนดเป็ นตัวเลขและมีหน่วยเป็ นพิก เซล เช่น 1, 2, 3 เป็ นต้น หากไม่กาหนดจะมีค่าเป็ น 0 เสมอ คือไม้มีเส้นขอบของตาราง ถ้าต้องการมีเส้นขอบตอรางหนา ให้กาหนดเป็ นค่าตัวเลข ํ ํมาก ๆ ตัวอย่ าง การกําหนดเส้นขอบมีขนาดเท่ากับ 1 ภาพแสดงการใช้คาสัง BORDER ํ 2. สีของเส้ นขอบ ั ํ เป็ นการเปลียนสี ให้กบเส้นขอบภายในและภายนอกของตาราง หากไม่กาหนดจะเป็ นสี ดาในการกําหนดสี ํต้องกําหนดเส้นขอบของตารางก่อน โดยใช้คาสัง BORDERCOLOR ํ
  3. 3. รู ปแบบ <TABLE BORDERCOLOR = สี ของเส้นขอบ> ตัวอย่ าง การกําหนดสี เส้นเป็ นสี นาเงิน ํ ภาพแสดงการใช้คาสัง BORDERCOLOR ํ 3. ขนาดของตาราง เป็ นการกําหนดความกว้าง (WIDTH) และความสูง (HEIGHT) ของตารางต้องทําการกําหนดเส้นขอบก่อน ในการกําหนดขนาดมีหน่วย เป็ นเปอร์เซ็นต์หรื อพิกเซลได้ รู ปแบบ <TABLE WIDTH = " ขนาดความกว้าง " HEIGHT = " ขนาดความสูง "> เช่น <table border=1 width = "300" height = "180"> เป็ นการสร้างตารางทีมีเส้นขอบหนาเท่ากับ 1กว้าง 300 พิกเซล สูง 180 พิกเซล <table border=3 width = "90%" height="200" > เป็ นการสร้างตารางทีมีเส้นขอบหนาเท่ากับ 3 กว้าง90% สูง 200 พิกเซล
  4. 4. ตัวอย่ าง การสร้างตารางกว้าง 300 พิกเซล สูง 200 พิกเซล ภาพแสดงการกําหนดขนาดของ ตาราง ภาพแสดงผลลัพธ์การกําหนด ขนาดของตาราง 4. สีพนตาราง ื= กําหนดสี พืนของตาราง สามารถกําหนดทังตาราง ทังแถว หรื อเฉพาะเซลล์ใดเซลล์หนึงโดยใช้คาสัง ํBGCOLOR 4.1 การกําหนดสี ทงตาราง ใช้คาสัง <table bgcolor="ชือสี พืนตาราง"> เช่น <table bgcolor = "green"> ั ํ 4.2 การกําหนดสี ทงแถวเป็ นสี เดียวกัน ใช้คาสัง bgcolor กําหนดไว้ในส่วน <tr> เช่น <tr bgcolor = ั ํ"green"> 4.3 การกําหนดสี เฉพาะเซลล์ทีต้องการ ใช้คาสัง bgcolor กําหนดไว้ในส่วน <td> เช่น <td bgcolor = ํ"green"> 5. การจัดตําแหน่ งตาราง เป็ นการกําหนดตําแหน่งของตารางๆบนเบราเซอร์ โดยใช้คาสัง ALIGN กําหนดไว้ในคําสัง <TABLE> ํ ํ ่ ้หากไม่กาหนดตารางจะอยูดานซ้ายของจอเบราเซอร์ รู ปแบบ <TABLE ALIGN = "ตําแหน่ง"> ตําแหน่งในการจัดวางตารางบนหน้าจอเบราเซอร์ มีชิดซ้าย (LEFT), ชิดขวา (RIGHT) และกึงกลาง(CENTER)
  5. 5. 6. การกําหนดตําแหน่ งข้ อความในตาราง 6.1 จัดตําแหน่งข้อความตามแนวนอน จะมี 3 ตําแหน่ง คือ ซ้าย (left) , กึงกลาง (center) และ ขวา (right)ตัวอย่างเช่น - จัดกึงกลางทังแถว ใช้คาสัง <tr align="center"> ํ - จัดชิดขวาเฉพาะช่องใดช่องหนึง ใช้คาสัง <td align="right"> ํ 6.2 จัดตําแหน่งข้อความตามแนวตัง ประกอบด้วย ชิดขอบบน (TOP) , ชิดขอบล่าง (BOTTOM) , กึงกลาง(Middle) - การจัดตําแหน่งข้อความชิดขอบบน ่ ํ ในการจัดข้อความอยูชิดขอบบนทังแถว ให้กาหนดไว้ในคําสัง <TR> เช่น <TR VALIGN ="TOP"> ่ ํ ในการจัดข้อความอยูชิดขอบบน เฉพาะเซลล์ ให้กาหนดไว้ในคําสัง <TD> เช่น <TD VALIGN= "TOP"> ความหมาย การลิงค์ เป็ นการเชือมโยงข้อมูลเอกสารบนเว็บเพจ จากจุดหนึงไปยังจุดทีต้องการ หรื อจากเว็บไซต์หนึงไปยัง ํ อีกเว็บไซต์หนึง ลักษณะตัวอักษรแตกต่างไปจากเดิม หากไม่กาหนดการเชือมโยงข้อความทีเป็ นตัวเชือมโยงตัวอักษรจะ เป็ นสี นาเงิน และมีขีดเส้นใต้ หรื อเชือมโยงด้วยรู ปภาพก็ได้ เมือเลือนเมาส์มาชีบริ เวณข้อความหรื อรู ปภาพ ทีมีการ ํ เชือมโยงจะเป็ นรู ปนิวมือ หากเชือมโยงเสร็ จแล้วกลับมาทีเดิม สี ของข้อความจะเปลียนไปจากสี นาเงิน แสดงว่าข้อความ ํ นันผ่านการเชือมโยงมาแล้ว ประเภทของการลิงค์ การกําหนดลิงค์ในภาษา HTML มี 2 ประเภท ดังนี 1. ลิงค์ภายใน (Internal Link) เป็ นการเชือมโยงเอกสาร ภายในเว็บไซต์เดียวกัน ไม่ได้เชือมโยงข้ามเว็บไซต์อืน โดยการใช้คาสัง <A ํ HREF= "ชือเว็บเพจ"> เช่น <A HREF="student.html">ข้อมูลนักเรี ยน </A>
  6. 6. 2. ลิงค์ภายนอก (External Link) เป็ นการเชือมโยงเอกสาร ข้ามเว็บไซต์ต่าง ๆ ในระบบเครื อข่ายอินเทอร์เน็ต (URL) โดยการใช้คาสัง <A ํHREF= "ชือเว็บไซต์">เช่น <A HREF="http://www.hotmail.com">รับ-ส่งจดหมาย</A> ํ คําสัง <A> เป็ นคําสังทีใช้กาหนดการเชือมโยง สามารถใช้เชือมโยงข้อมูลภายในเว็บเพจเดียวกัน ประกอบด้วย แอตทริ บิวต์ NAME และ HREF ่ NAME เป็ น แอตทริ บิวต์ในการกําหนดชือส่วนต่าง ๆ ทีอยูใน หน้าเอกสารทีต้องการเชือมโยง เพือสะดวกในการใช้ คําสังเชือมโยงข้อมูลภายในเอกสาร รู ปแบบคําสัง <A NAME = Label>.....ข้อความ.....</A> โดยที Label คือ ชือของข้อมูลในตําแหน่งของเอกสารทีต้องการกําหนด เพือให้ทราบว่า ต้องการเชือมโยงไปยัง ตําแหน่งใด ็ ํ ◌HREF เป็ นแอตทริ บิวต์ทีใช้กาหนดเป้ าหมายทีต้องการเชือมโยงไป โดยการใส่ Label ของข้อมูลทีต้องการเชือมโยง และใส่ขอความทีแสดงให้ทราบว่าได้เชือมโยง ไปยังส่วนใดของหน้าเอกสาร ้ รู ปแบบ คําสัง <A HREF =#Label>.....ข้ อความ.....</A> โดยที Label คือชือตําแหน่งข้อมูลในเอกสารทีกําหนดไว้ เพือใช้ในการเชือมโยงข้อมูลทีต้องการ โดยการกําหนดชือ ตําแหน่งทีต้องการจะเชือมโยงจะต้องใส่เครื องหมาย # นําหน้าเพือให้ทราบว่าเป็ นการเชือมโยงในเอกสารหน้า เดียวกัน
  7. 7. ตัวอย่าง <html> <head> <title> การเชือมโยงภายในเว็บเพจเดียวกัน </title> </head> <body> <b> ผลงานดีเด่น 3 ปี การศึกษา</b><br><br> <a name="top"> <a href="#2550">ผลงานดีเด่นปี การศึกษา 2550</a><br> <a href="#2551">ผลงานดีเด่นปี การศึกษา 2551</a><br> <a href="#2552">ผลงานดีเด่นปี การศึกษา 2552</a><br> <a name="2550"> <b>ผลงานดีเด่นปี การศึกษา 2550</b><br> 1. ................................... <br><br><br> 2. ................................... <br><br><br> 3. ................................... <br><br><br> 4. ................................... <br><br><br> 5. ................................... <br><br><br> <a href="#top">กลับบนสุด</a><br> <a name="2551"> <b>ผลงานดีเด่นปี การศึกษา 2551</b><br> 1. ................................... <br><br><br> 2. ................................... <br><br><br> 3. ................................... <br><br><br> 4. ................................... <br><br><br> 5. ................................... <br><br><br> <a href="#top">กลับบนสุด</a><br> <a name="2552"> <b>ผลงานดีเด่นปี การศึกษา 2552</b><br> 1. ................................... <br><br><br> 2. ................................... <br><br><br> 3. ................................... <br><br><br>
  8. 8. 4. ................................... <br><br><br> 5. ................................... <br><br><br> <a href="#top">กลับบนสุด</a><br> </body> </html> จากตัวอย่างมีการใช้ <br> หลายครัง เพือให้เห็นผลลัพธ์ชดเจน ซึงการเชือมโยงลักษณะนี จะเหมาะสําหรับเอกสารทีมีความยาวมาก ัเพือให้ดูขอมูลได้สะดวกไม่ตองเลือน Scrollbar มาก ้ ้
  9. 9. คําสัง <A HREF> เป็ นคําสังทีใช้ในการเชือมโยงเอกสาร โดยมีแอตทริ บิวต์ HREF ในการเชือมโยงไปยังไฟล์อืน จะต้องระบุชือหน้าเว็บเพจทีต้องการด้วย .HTMLหรื อ .HTM (เอกสารนันเป็ น HTML) รู ปแบบคําสัง <A HREF = /Path/Filename.html >.....ข้อความ.....</A> โดยที HREF คือ แอตทริ บิวต์ทีใช้ในการเชือมโยงข้อมูล Path คือ การระบุตาแหน่งของไฟล์ทีต้องการเชือมโยงถึง ํ Filename.html คือ ชือของไฟล์ทีต้องการเชือมโยงไปถึงตัวอย่างการลิงค์ต่างเว็บเพจ (กรณี แต่ละเว็บเพจอยูในโฟล์เดอร์เดียวกัน จึงไม่ตองใส่ Path) ่ ้ <html> <head> <title> การเชือมโยงต่างเว็บเพจ</title> </head> <body> <b> อาหารชาวอีสาน </b><br><br> <a href="food1.html">ส้มตํา</a><br> ่ <a href="food2.html">ไก่ยาง</a><br> <a href="food3.html">ปลาเผา</a><br> </body> </html> บันทึกชือ menu.html ตัวอย่างข้างบนเป็ นการเชือมโยงไปยังเว็บเพจอืนหรื อไฟล์อืน จากตัวอย่างเป็ นการเชือมโยงไปยัง ่ เว็บเพจส้มตํา (food1.html) ไก่ยาง (food2.html) และปลาเผา (food3.html)
  10. 10. <html><head> <title>ส้มตํา</title></head><body><b> ส้มตํา </b><br><br> ส้มตําเป็ นxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br><br><a href="menu.html">กลับเมนู</a><br></body></html> บันทึกชือ food1.html ตัวอย่างข้างบนเป็ นเว็บเพจส้มตํา โดยให้รายละเอียดเกียวกับส้มตํา ตอนท้ายของเว็บเพจมีการเชือมโยงกลับไปยังหน้าเมนู (menu.html)<html><head> ่ <title>ไก่ยาง</title></head><body> ่<b> ไก่ยาง </b><br><br> ่ ไก่ยาง เป็ นxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  11. 11. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br><br><a href="menu.html">กลับเมนู</a><br></body></html> บันทึกชือ food2.html ่ ่ ตัวอย่างข้างบนเป็ นเว็บเพจไก่ยาง โดยให้รายละเอียดเกียวกับไก่ยาง ตอนท้ายของเว็บเพจมีการเชือมโยงกลับไปยังหน้าเมนู (menu.html)<html><head> <title>ปลาเผา</title></head><body><b> ปลาเผา </b><br><br> ปลาเผาเป็ นxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br><br><a href="menu.html">กลับเมนู</a><br></body></html> บันทึกชือ food3.html
  12. 12. จุดเชือมโยงนอกจากจะใช้ขอความแล้วยังสามารถใช้รูปภาพหรื อสัญลักษณ์เป็ นจุด เชือมโยงได้ เพือให้เว็บเพจมี ้ ่ความน่าสนใจและสื อความหมายได้ดียงขึน จุดสังเกตคือเมือเลือนเมาส์ผานไปยังตําแหน่งจุดเชือมโยง Mouse Pointer จะ ิเปลียนเป็ นรู ปมือ รู ปแบบคําสัง <A HREF = URL> <IMG SRC = Filename> </A> โดยที HREF คือ แอตทริ บิวต์ทีใช้ในการเชือมโยงข้อมูล URL คือ ชือของเว็บไซต์ หรือ IP Address ของเว็บไซต์ทีต้องการเชือมโยงถึง หรื อ ตําแหน่งทีเชือมโยง IMG SRC คือ คําสังทีใช้ในการแทรกรู ปภาพ Filename ่ คือ ชือของไฟล์รูปภาพ จะต้องระบุตาแหน่งของภาพว่าอยูในโฟลเดอร์ใด เป็ นไฟล์นามสกุลอะไร ํตัวอย่าง <html> <head> <title> การเชือมโยงด้วยรู ปภาพ</title> </head> <body> <center> <b>เว็บไซต์สาหรับสื บค้นข้อมูล</b><br><br> ํ คลิกทีรู ปภาพ search engine ทีท่านต้องการ <br> <a href="http://www.google.com"><img src="google.jpg"></a><br> <a href="http://www.yahoo.com"><img src="yahoo.jpg"></a><br> <a href="http://www.bing.com"><img src="bing.png"></a><br> </center> </body> </html>
  13. 13. จากตัวอย่าง จะได้เว็บเพจทีมีรูปของ Search Engine ทีสําคัญ คือ รู ป google , yahoo และ bing เมือเรานําเมาไปคลิกก็จะเชือมโยงไปยังเว็บไซต์นนได้ ัดังภาพ การเชือมโยง แบบอีเมล์ เป็ นการเชือมโยงโดยมีจุดหมาย ในการส่งจดหมายอิเล็กทรอนิกส์ โดยจะเปิ ดโปรแกรม Outlook Express และโป ่กําหนดทีอยูของผูรับให้อตโนมัติ ้ ั รู ปแบบคําสัง <A HREF="mailto:E-mai Address"> ข้อความ </A> โดยที mailto คือการกําหนดการเชือมโยงโดยการใช้อีเมล :E-mai Address คือ อีเมลทีต้องการเชือมโยงตัวอย่าง
  14. 14. <html> <head> <title> การเชือมโยงไปอีเมล์</title> </head> <body> <center> <b>การเชือมโยงไปอีเมล์</b><br><br> <a href="mailto:krusomrin@hotmail.com">ติดต่อผูดูแลระบบ</a> ้ </center> </body> </html>คําสัง <BODY Link> เป็ นคําสังทีใช้ในการกําหนดสี ของตัวอักษรก่อนทีจะมีการคลิก เพือเชือมโยงไปยังข้อมูลทีต้องการการกําหนดสี ของตัวอักษรทีใช้ในการเชือมโยงข้อมูล และการจะให้มีการขีดเส้นใต้ตวอักษร ั รู ปแบบคําสัง <BODY LINK = "#Color" ALINK = "#Color" VLINK = "#Color"> โดยที LINK ํ คือ แอตทริ บิวต์ทีใช้กาหนดสี ของตัวอักษร ก่อนการคลิก
  15. 15. ALINK คือ แอตทริ บิวต์ทีใช้ในการกําหนดสี ของตัวอักษรใน ขณะทีมีการคลิก VLINK คือ แอตทริ บิวต์ทีใช้ในการกําหนดสี ของตัวอักษรทีใช้ในการเชือมโยงข้อมูล หลังจากการ คลิก #Color คือ สี ของตัวอักษรก่อนทีจะคลิกเพือเชือมโยงข้อมูล โดยกําหนดเป็ นชือสี หรื อกําหนดเป็ น เลขฐานสิ บหกซึงจะต้องมีเครื องหมาย # นําหน้าตัวอย่าง <HTML> <HEAD> <TITLE> การกําหนดสี ตวอักษรทีใช้เชือมโยง</TITLE> ั </HEAD> <BODY LINK=#33FF00 VLINK=#3300FF ALINK=#FF0000> <CENTER> <B>การกําหนดสี ตวอักษรทีใช้เชือมโยง</B> <BR><BR> ั <B> ภาพอาหารไทยอีสาน</B> <BR><BR> <A HREF="somtam.html">ส้มตํา</A><BR> ่ <A HREF="kaiyang.html">ไก่ยาง</A><BR> <A HREF="fish.html">ปลาเผา</A><BR> </CENTER> </BODY> </HTML>

×