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.

0

Share

Download to read offline

Lernning 15

Download to read offline

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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>

Views

Total views

459

On Slideshare

0

From embeds

0

Number of embeds

3

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×