วชิ าการพัฒนาเว็บไซตท์ างธุรกิจเบอ้ื งต้น BC10203 1 บทท่ี 1 HTML (Hyper Text Markup Language) ภาษา HTML (Hyper Text Markup Language) เป็นภาษาท่ีใช้ในการเขยี นโปรแกรมข้อมูล ท่ีใช้แสดงผลบนเครือข่ายอินเตอร์เน็ตในลักษณะของข้อความ รูปภาพ เสียง และภาพเคลื่อนไหว ต่างๆ ภาษา HTML เป็นภาษาท่ีง่ายตอ่ การเรยี นรู้ สามารถกาหนดรปู แบบและโครงสร้างได้ง่าย ทาให้ ได้รบั ความนิยม และมีการพฒั นาอยา่ งตอ่ เน่อื งเพอื่ ให้ใชง้ านง่ายขน้ึ และตอบสนองต่องานด้านกราฟิก มากยิ่งขึ้น และสนับสนุนการแสดงผลในเว็บบราวเซอร์มากมาย และบันทึกในรูปของไฟล์นามสกุล htm หรอื html ในการพัฒนาเว็บเพจในปัจจุบันมีเคร่ืองมือช่วยอานวยความสะดวกมากมายแต่ผู้สร้าง สามารถใช้เคร่ืองมือพ้ืนฐานที่มีอยู่แล้วให้เป็นประโยชน์มากท่ีสุด โดยไม่ต้องลงทุนอะไรมากมาย เม่ือ ทาความเข้าใจและเขียนโคด๊ ไดถ้ ูกตอ้ งแม่นยาค่อยหาเครอ่ื งมือมาช่วยอานวย ความสะดวกอีกที เคร่อื งมือเขียนคาสั่ง เราจะใช้ Notepad เป็นหลักเพราะมีเปน็ มาตรฐานอยแู่ ล้วในวนิ โดว์ ทุกเวอรช์ น่ั เคร่อื งมือแสดงผล หรือบราวเซอร์นี่ก็มพี ร้อมแลว้ ในวนิ โดวก์ เ็ ป็น Internet Explorer หรอื Firefox
วิชาการพัฒนาเวบ็ ไซต์ทางธุรกิจเบอื้ งต้น BC10203 2 โครงสร้างหลักของภาษา HTML (Hyper Text Markup Language) ในการเขียนภาษา HTML น้ัน จะมรี ปู แบบโครงสร้างการเขียนแบง่ ออกเปน็ 3 สว่ น โดยจะ แสดงในรปู แบบของสี ดังน้ี <html> ((1) สว่ นประกาศ (2) สว่ นหวั <head> <title> ขอ้ ความนีจ้ ะแสดงบนไตเต้ิลบาร์ของบราวเซอร์ </title> </head> <body> (3) สว่ นเนอ้ื หา ส่วนเนื้อหาของเวบ็ เพจ ประกอบด้วย - ขอ้ ความ - รูปภาพ - สือ่ มัลติมเี ดีย ------------- ------------- ------------- </body> </html> (1) ปิดส่วนประกาศ 1. สว่ นประกาศ เป็นสว่ นที่กาหนดให้บราวเซอร์ทราบว่า น่ีคือภาษา HTML และจะต้องทาการ แปรผลอยา่ งไรมคี าสั่งคเู่ ดียวคือ <html> และ </html> ปรากฏท่หี ัวและทา้ ยไฟล์ 2. ส่วนหัวเร่ือง (head) เป็นส่วนที่แสดงผลข้อความบนไตเติ้ลบาร์ของบราวเซอร์ และอาจมี คาสั่งสาหรับกาหนดรายละเอียดด้านเทคนิคอื่นๆ อีก แทรกอยู่ระหว่างคาส่ัง <head> และ </head> 3. ส่วนเนื้อหา (body) เป็นส่วนท่ีมีความซับซ้อนมากที่สุด และสามารถใส่เทคนิคลูกเล่นเพื่อ ดึงดูดความสนใจจากผู้ชมได้มาก ความแตกต่างระหว่างเว็บไซต์ต่างๆ แสดงความมีฝีมือของ ผู้จัดทา ศิลปะในการออกแบบจะอยู่ในส่วนนี้ท้ังหมด ซึ่งจะแทรกอยู่ระหว่างคาส่ัง <body> และ </body>
วิชาการพัฒนาเวบ็ ไซตท์ างธุรกิจเบอื้ งตน้ BC10203 3 HEAD : รายละเอียดคาสัง่ ในสว่ นหวั คาสัง่ ทีอ่ ยู่ในสว่ นหวั นจ้ี ะอยรู่ ะหว่างคาสั่ง <head> ... </head> เราสามารถมองเหน็ ผา่ น บราวเซอร์ไดเ้ ฉพาะข้อความบนไตเติ้ลบาร์ คาส่งั อืน่ ๆ นั้นจะทางานในสว่ นเบอ้ื งหลัง แต่กม็ สี ่วนสาคญั เปน็ อย่างยิ่งท่ีไม่ควรละเลย ประกอบดว้ ยคาสง่ั ต่างๆ ดงั นี้ 1. หวั เรอ่ื งบนไตเต้ิลบาร์ เป็นส่วนสาคัญท่ีจะบอกรายละเอียดของหน้าเว็บเพจนั้นๆ อยู่ภายใน คาส่ัง <title> ... </title> จะต้องกาหนดเสมอและควรใช้ภาษาอังกฤษนา สามารถใช้ ภาษาไทยเป็นคาตามได้ แต่ต้องไม่ยาวเกิน 64 ตัวอักษร เช่น Make a home with HTML : สร้างเว็บสวยด้วยภาษา HTML (การนับตัวอักษรในคาภาษาไทยต้องนับสระบน/ ล่าง/วรรณยกุ ตด์ ว้ ย) ช่ือเรียกเว็บไซต์ท่ีปรากฏบนไตเต้ิลบาร์ นอกจากจะนามาใช้แสดงชื่อเร่ืองของเว็บไซต์น้ันๆ แล้ว ยังเป็นข้อความที่จะถูกนามาใช้เป็นคาสาคัญ (Keyword) ในการสืบค้นข้อมูลจาก Search Engine เสมอ 2. การระบุอักขระภาษา เป็นส่วนสาคัญและจาเป็นสาหรับเว็บเพจภาษาไทย ทาให้ผู้ชม สามารถอ่านขอ้ ความบนเว็บเพจเป็นภาษาไทยได้ทันที โดยเฉพาะการสร้างเว็บจากเคร่ืองมือ สาเร็จรูปหลายๆ โปรแกรมที่มักจะทาการกาหนดให้เว็บเป็นภาษาของผู้พัฒนาโปรแกรม (อาจเป็นภาษาในยุโรป/อเมริกา/หรือภาษาอื่นๆ) ทาให้ผู้ชมไม่สามารถอ่านภาษาไทยได้ ดังนั้นผู้สร้างเว็บจะต้องทาการกาหนดค่าการถอดรหัสภาษาไทยไว้เลยในทุกๆ ไฟล์โดยใช้ คาสง่ั Meta ระบไุ ว้ทสี่ ่วน Head เชน่ เดียวกนั กับไตเตลิ้ ดงั น้ี <meta http-equiv=\"Content-Type\" content=\"text/html; charset=TIS-620\"> หรอื <meta http-equiv=\"Content-Type\" content=\"text/html; charset=Windows- 874\"> ใหเ้ ลือกใช้อย่างใดอยา่ งหนงึ่ เวบ็ เพจท่สี รา้ งข้ึนกจ็ ะสามารถแสดงผลภาษาไทยได้อย่าง ถูกต้อง 3. ประกาศใหโ้ ลกรู้ ถึงแม้ว่าระบบการค้นหาของ Search Engine จะนาชื่อเรื่องของเว็บไซต์ไป เป็นคาหลักโดยอัตโนมัติแล้วก็ยังไม่เพียงพอ เพราะด้วยข้อจากัดของจานวนตัวอักษรและคา ที่ใส่ลงไป ดังนั้นจึงต้องมีการกาหนดคาหลักให้กับหน้าเว็บเพจนั้นๆ โดยใช้คาส่ังท่ีมีรูปแบบ เฉพาะไว้ในส่วน Head ถัดจาก Title เรียกว่าการใช้คาส่ัง Meta (ซ่ึงจะไม่แสดงผลใน หนา้ ตา่ งบราวเซอร)์ ดังน้ี <Meta name=\"X\" content=\"Y\"> (x และ y จะถูกแทนคา่ ด้วยข้อความ) ถา้ X แทนคา่ ด้วยคาว่า Keyword ในส่วน Y จะแทนคา่ ด้วยคาหลกั ทเ่ี ก่ยี วข้องกับ เวบ็ ไซต์นน้ั คาหลักควรเป็นภาษาองั กฤษ (ใช้ภาษาไทยได)้ สามารถกาหนดได้
วชิ าการพัฒนาเว็บไซตท์ างธรุ กิจเบอื้ งตน้ BC10203 4 มากกว่า 1 คา แต่ละคาจะคน่ั ดว้ ยเครอ่ื งหมายจลุ ภาค (,) เช่น <Meta name=\"keyword\" content=\"html, web, page, website, home.\"> ถา้ X แทนค่าดว้ ยคาว่า Description ในส่วน Y จะแทนค่าดว้ ยคาอธบิ ายที่ เกย่ี วข้องกบั เวบ็ ไซตน์ ั้น ควรเป็นภาษาอังกฤษ เขียนในรปู ประโยคบอกเล่าสื่อความ หมายถงึ เน้ือหาในเวบ็ นน้ั ๆ เชน่ <Meta name=\"Description\" content=\"HTML is a wonderful language for internet communication.\"> ถา้ X แทนค่าดว้ ยคาวา่ Author ในสว่ น Y จะแทนคา่ ดว้ ยชอ่ื ของเจ้าของเวบ็ ไซต์ หรอื หน่วยงาน อาจระบชุ อื่ อเี มล์ไว้เพ่ือใหส้ ะดวกในการติดต่อกับผ้รู ับผิดชอบ โดยตรง เชน่ <Meta name=\"Author\" content=\"[email protected]\"> 4. เทคนิคพิเศษ เราสามารถใส่เทคนิคพเิ ศษตา่ งๆ เพม่ิ เติมในส่วนนไ้ี ด้ เชน่ สคริปต์พิเศษแสดง วันเวลา การแสดงผลพเิ ศษ (เราจะได้ศกึ ษาเพ่ิมเตมิ ในบทต่อๆ ไป) น่ีคอื ตวั อย่างของการแทรกคาสงั่ ต่างๆ ในส่วน head สามารถเอาไปประยกุ ต์แกไ้ ขใหเ้ หมาะสม กับเวบ็ เพจของได้เลย <head> <title> Make a home with HTML : สรา้ งเว็บด้วยภาษา HTML</title> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=TIS-620\"> <meta name=\"keyword\" content=\"html, web, page, website, home.\"> <meta name=\"description\" content=\"HTML is a easy language for make website.\"> <meta name=\"author\" content=\"[email protected]\"> <link href=\"htmlstyle.css\" rel=\"stylesheet\" type=\"text/css\"> </head> BODY : การนาเสนอในสว่ นเนอื้ หา โดยปกตเิ มือ่ ไม่มกี ารกาหนดอะไรเปน็ พเิ ศษในคาส่ัง body บราวเซอร์จะแสดงผลหน้าเวบ็ เพจเป็นพ้ืนหลงั สีขาว ตวั อกั ษรสดี าเสมอ ในคาส่งั body เราสามารถระบุค่าสีของพืน้ หลัง ตวั อกั ษร และจุดเชอื่ มโยงไดต้ ามต้องการ ดังน้ี <body bgcolor=\"#000099\" text=\"#FFFFFF\" link=\"#00FFFF\" alink=\"#00FF00\" vlink=\"#FF99FF\"> bgcolor = การกาหนดสีพื้นหลงั
วชิ าการพฒั นาเวบ็ ไซตท์ างธุรกิจเบือ้ งต้น BC10203 5 link = การกาหนดสีของจดุ เชอ่ื มโยง (link) background = การกาหนดรปู ภาพพ้นื หลัง (ใช้ภาพสกุล .jpg, .gif) alink = การกาหนดสีของจุดเชอ่ื มโยงขณะนาเมาท์ไปชี้ (active link) text = การกาหนดสตี ัวอักษรในหนา้ เวบ็ เพจทงั้ หมด (ยกเวน้ ส่วนที่กาหนดพเิ ศษ) vlink = การกาหนดสีของจุดเช่อื มโยงเมอ่ื คลิกไปเยย่ี มชมมาแลว้ (visited link) การกาหนดค่าสีน้ันสามารถกาหนดโดยระบุชื่อสีโดยตรง เช่น black, white, blue, green,... เป็นตน้ แต่การกาหนดแบบนี้จะไม่สามารถระบุความเขม้ แบบไล่เฉดสีได้ จึงได้ใช้ค่าสีเป็นตัว เลขฐานสิบหก (hexadecimal format) โดยกาหนดเป็นค่าสีของแสง RGB แต่ละสีประกอบด้วยเลข 2 หลกั ในแต่ละสีจะมีค่าของสจี ากมืดไปสว่างดังน้ี 0 1 2 3 4 5 6 7 8 9 A B C D E F เลข 2 หลกั ของแตล่ ะสจี ึงมีค่าไดต้ งั้ แต่ 00 – FF หรอื แปลงค่าเป็นตวั เลขไดต้ ง้ั แต่ 0 – 255 ดงั น้นั เมื่อเรา กาหนดค่าสีเปน็ 00FF00 (red=0, green=255, blue=0) ดังน้ันผลลัพธท์ ี่ได้คือ สีเขียวสด แสดงการกาหนดสี พ้นื หลงั ตวั อักษร และการเช่อื มโยงในหน้าเว็บเพจ ในตัวอยา่ งนี้ได้เพิ่มเติมการใช้ ภาพเปน็ พื้นหลงั ด้วยคาสง่ั Background และระบุช่ือรปู ภาพท่ีใชน้ น้ั ช่อื bgimage.gif <html> <head> <title> Example of Body : ไฟลต์ ัวอย่างคาสง่ั BODY </title> </head> <body background=\"bgimage.gif\" bgcolor=\"#ffffff\" text=\"#000099\" link=\"#ff0000\" vlink=\"#990099\" alink=\"#009900\"> ขอ้ ความที่แสดงในสว่ นเนอ้ื หา </body> </html>
วิชาการพฒั นาเวบ็ ไซตท์ างธุรกิจเบื้องต้น BC10203 6 สรปุ คาส่งั TAGS รายละเอียด <html> ... </html> กาหนดชนิดของไฟล์ให้ html <head> ... </head> กาหนดสว่ นหวั ของไฟล์ เพื่อจัดเก็บรายละเอยี ดและชอ่ื ไฟล์ <title> ... </title> การกาหนดชอื่ ไฟลเ์ พ่ือแสดงผลบนไตเต้ิลบาร์ของบราวเซอร์ <meta> การกาหนดรายละเอยี ดของเว็บไซตเ์ กยี่ วกบั การแสดงผลภาษาและ คาอธิบายรายละเอียด คาคน้ หาของเว็บไซต์ <body>...</body> คาส่ังกาหนดการแสดงผลในส่วนเน้อื หาของเวบ็ เพจ
วชิ าการพฒั นาเว็บไซต์ทางธุรกจิ เบ้อื งตน้ BC10203 7 บทที่ 2 การกาหนดรปู แบบตัวอักษร การกาหนดรูปแบบตวั อักษร เพ่อื ใหเ้ กดิ ความแตกตา่ งของข้อความทตี่ ้องการนาเสนอในเว็บ เพจ มีดงั นี้ 1. การทาตวั อักษรหนา,เอียง,ขีดเส้นใต้ รปู แบบคาสง่ั : <B> ...ข้อความ..... </B> :คาส่งั ตัวหนา <I> ...ขอ้ ความ..... </I> :คาส่งั ตวั เอียง <U> ...ขอ้ ความ..... </U> :คาส่งั ขดี เสน้ ใต้ คาอธบิ าย : เมื่อเราตอ้ งการทาให้ตวั อักษรหนา เอียง หรือขีดเส้นให้ ให้นาคาสง่ั ข้างต้นไปคร่อม ขอ้ ความน้นั ไว้ เช่น ตอ้ งการแต่งคาว่า \"การเขียนเว็บเพจด้วยภาษา HTML \" ใหเ้ อียงและหนา ให้ทาดังน้ี <I><B> การเขียนเวบ็ เพจดว้ ยภาษา HTML</B></I> ผลลัพธท์ ่ีไดค้ ือ การเขียนเวบ็ เพจดว้ ยภาษา HTML ตัวอยา่ ง : ทดสอบการทาตวั อักษรหนา,เอียง,ขดี เสน้ ใต้ รูปแบบคาส่งั <HTML> <HEAD> <TITLE>การใสส่ อี กั ษร</TITLE> </HEAD> <BODY bgcolor=white> <font size=2 face=\"ms sans serif\"> <B>ข้อความหนา</B><br> <I>ขอ้ ความเอียง</I><br> <U>ขอ้ ความขดี เสน้ ใต้<U><br> <B><I>ขอ้ ความหนา+เอียง</I></B><br> <B><I><U>ข้อความหนา+เอยี ง+ขีดเส้นใต้</U></i></B> <br> <I><U>ขอ้ ความเอยี ง+ขดี เส้นใต้</U></I><br> <U><B>ขอ้ ความขีดเส้นใต้+หนา</B></U><br> </font>
วิชาการพฒั นาเวบ็ ไซตท์ างธรุ กิจเบ้อื งต้น BC10203 8 </BODY> </HTML> การแสดงผล 2. การใส่สอี กั ษร รูปแบบคาส่ัง : <font color=ชอ่ื สหี รือ#รหัสสี > .....ข้อความ.....</font> คาอธิบาย : เป็นคาสงั่ ท่ีใชใ้ นการตกแต่งอักษรให้เปน็ สตี า่ งๆ ตามชอ่ื สีหรอื รหัสสี โดยนาคาสั่ง น้ไี ปคร่อมข้อความที่จะตกแต่ง ตัวอยา่ ง : การตกแต่งสีอกั ษร รูปแบบคาส่ัง <HTML> <HEAD> <TITLE> การใส่สอี ักษร</TITLE> </HEAD> <BODY bgcolor=white> <font color=red> อักษรสีแดง </font> <br> <font color=blue> อกั ษรสีนา้ เงนิ </font> <br> <font color=#66CCFF> อักษรสีฟา้ </font> <br> </BODY> </HTML>
วชิ าการพัฒนาเว็บไซตท์ างธุรกิจเบอ้ื งต้น BC10203 9 การแสดงผล 3. การใส่ขนาดอักษร รูปแบบคาสง่ั : <font size=ขนาดอักษร> .....ข้อความ...... </font>. คาอธบิ าย : เปน็ คาส่ังท่ีใชใ้ นการตกแตง่ อักษรใหเ้ ป็นมีขนาดตา่ ง ๆ โดยทข่ี นาดอกั ษรย่ิงมาก อักษรกจ็ ะมีขนาดใหญ่ตามลาดบั โดยนาคาส่งั นไ้ี ปคร่อมข้อความทจ่ี ะตกแต่ง ตวั อย่าง : การตกแต่งขนาดอักษร รปู แบบคาสงั่ <HTML> <HEAD> <TITLE> การใส่ขนาดอกั ษร</TITLE> </HEAD> <BODY bgcolor=white> <font size=10> อกั ษรขนาด=10 </font> <br><br> <font size=3> อกั ษรขนาด=3 </font> <br><br> <font size=1> อกั ษรขนาด=1 </font> </BODY> </HTML>
วชิ าการพฒั นาเวบ็ ไซต์ทางธรุ กจิ เบอ้ื งตน้ BC10203 10 การแสดงผล 4. การใส่รปู แบบอกั ษร รูปแบบคาสง่ั : <font face=\"ชอื่ รูปแบบอักษร\" > .....ข้อความ...... </font>. คาอธบิ าย : เป็นคาส่งั ที่ใชใ้ นการตกแตง่ อักษรให้เปน็ มีรปู แบบต่าง ๆ ตาม font ที่กาหนด เช่น AngsanaUPC, MS sans serif Cordia New, โดยนาคาสง่ั นี้ไปครอ่ มขอ้ ความท่ีจะ ตกแต่ง ตวั อย่าง : การตกแตง่ รูปแบบอกั ษร รปู แบบคาสั่ง <HTML> <HEAD> <TITLE>การใสร่ ูปแบบอักษร</TITLE> </HEAD> <BODY bgcolor=white> <font face=\"MS sans serif\" > อกั ษรแบบ Ms sans serif </font> <br> <font face=\"AngsanaUPC\"> อกั ษรแบบ AngsanaUPC </font> <br> <font face=\"Cordia New\" > อักษรแบบ Cordia New </font> <br> </BODY> </HTML> การแสดงผล
วชิ าการพัฒนาเว็บไซต์ทางธรุ กิจเบอ้ื งต้น BC10203 11 5. การประยุกตก์ ารกาหนดรปู แบบอกั ษร ตัวอยา่ ง : การตกแตง่ รปู แบบอักษร+ใส่ส+ี ใส่ขนาด+หนา+เอียง+ขีดเส้นใต้ รปู แบบคาสง่ั <HTML> <HEAD> <TITLE> การตกแตง่ อักษร</TITLE> </HEAD> <BODY bgcolor=white> <font face=\"MS sans serif\" color=red size=2> อักษรแบบ Ms sans serif ,สีแดง, ขนาด=2</font> <br><br> <font face=\"AngsanaUPC\" color=blue> อกั ษรแบบ AngsanaUPC ,สนี ้าเงิน </font> <br> <br> <U> <font face=\"Cordia New\" size=3> อักษรแบบ Cordia New ,ขนาด=3,ขีดเสน้ ใต้ </font> </U> <br><br> <B><font size=4 color=red > อกั ษรหนา, ขนาด=4,สีแดง </font> </B> <br><br> <B><I> <font face=\"Ms sans serif\" color=red > อักษร ms sans serif ,หนา+เอยี ง,สี แดง </font> </B></I> </BODY> </HTML> การแสดงผล
วิชาการพฒั นาเว็บไซต์ทางธุรกจิ เบือ้ งต้น BC10203 12 6. Lists : หวั ข้อแบบรายการ ในบางครั้งการปอ้ นข้อความในหน้าเว็บเพจ เราอาจมีความต้องการในการจดั ขอ้ ความย่อย เพื่อ การอธิบาย หรอื แยกความสาคญั ให้เหน็ แตกตา่ งชดั เจน การทาหัวข้อย่อยในภาษา HTML ก็สามารถ ทาได้ โดยแบ่งออกเปน็ 2 รปู แบบดังนี้ 1. หวั ข้อย่อยแบบเรยี งลาดับ (Order List) เปน็ การกาหนดความสาคญั ของหัวข้อย่อยท่ี ตอ่ เนือ่ งกนั เป็นลาดับข้อ 1, 2, 3,... จะมรี ูปแบบคาสั่งดงั นี้ รปู แบบคาสงั่ <OL> <LI>ขอ้ ย่อยลาดับท่ี 1</LI> <LI>ขอ้ ย่อยลาดบั ที่ 2</LI> <LI>ข้อย่อยลาดบั ท่ี 3</LI> </OL> การแสดงผล
วชิ าการพฒั นาเว็บไซต์ทางธรุ กิจเบ้อื งต้น BC10203 13 เรายงั สามารถเปลยี่ นลาดบั จากตัวเลข 1, 2, 3,... เป็นตัวอักษร A, B, C,... หรือตัวเลขแบบ โรมัน i, ii, iii,... ได้ด้วยการกาหนดลักษณะ Type ตอ่ จากคาส่ัง OL ดงั น้ี รูปแบบคาส่งั <OL TYPE=\"A\"> <LI>ข้อย่อยลาดับที่ 1</LI> <LI>ขอ้ ย่อยลาดบั ที่ 2</LI> </OL> การแสดงผล คาส่งั TYPEรปู แบบอนื่ ๆ การเรยี งลาดับเปน็ ตัวเลข 1, 2, 3, 4,... กาเรียงลาดบั เปน็ ตัวอักษร A, B, C, D,... TYPE=\"1\" หรือไม่ระบุ การเรยี งลาดับเป็นตัวอักษร a, b, c, d,... TYPE=\"A\" การเรียงลาดับเป็นตัวเลขโรมันใหญ่ I, II, III, IV,... TYPE=\"a\" การเรียงลาดบั เปน็ ตัวเลขโรมันเล็ก i, ii, iii, iv,... TYPE=\"I\" TYPE=\"i\"
วชิ าการพัฒนาเว็บไซตท์ างธุรกิจเบ้อื งตน้ BC10203 14 2. หัวข้อย่อยแบบไม่เรียงลาดับ (Unorder List) เปน็ การสรา้ งหัวข้อย่อยชนิดไมเ่ รยี งลาดับ ความสาคญั ในแตล่ ะขอ้ ในเอกสารทั่วๆ ไปจะเรยี กว่า Bullet ซ่งึ จะมรี ปู แบบคาสง่ั และ รปู แบบตามตวั อย่าง รูปแบบคาสัง่ <UL TYPE=\"disc\"> <LI>ข้อย่อยที่ 1</LI> <LI>ขอ้ ย่อยที่ 2</LI> </OL> การแสดงผล คาสงั่ TYPEรูปแบบอ่นื ๆ รปู แบบของบุลเล็ตจะเปน็ วงกลมทบึ รปู แบบของบลุ เล็ตจะเป็นสเี่ หลยี่ มทึบ TYPE=\"disc\" รูปแบบของบลุ เล็ตจะเปน็ วงกลมโปรง่ TYPE=\"square\" TYPE=\"circle\"
วิชาการพฒั นาเวบ็ ไซต์ทางธรุ กจิ เบ้อื งต้น BC10203 15 7. การกาหนดหัวเรื่อง หวั เรอ่ื ง (Heading) ของเวบ็ เพจสามารถกาหนดไดด้ ว้ ยการใช้คาส่ัง <Hx> ... </Hx> เม่ือ x คอื ค่าตัวเลขตง้ั แต่ 1 - 7 ซง่ึ จะกาหนดให้ตัวอกั ษรท่ีอยู่ภายในคาสง่ั น้มี ีขนาดใหญ่ไปจนถึงเลก็ เรยี ง ตามลาดับ จากตวั เลข 1 มขี นาดใหญ่สดุ และ ตวั เลข 7 จะมีขนาดเลก็ ทส่ี ดุ (คาสงั่ น้ีจะทาใหค้ าหรอื ขอ้ ความน้ีเปน็ ตวั หนา และตัดคาข้นึ บรรทดั ใหมเ่ สมอ) ดังตัวอยา่ ง รปู แบบคาส่งั <H1>ขนาดหวั เรือ่ ง 1</H1> <H2>ขนาดหัวเร่อื ง 2</H2> <H3>ขนาดหวั เร่อื ง 3</H3> <H4>ขนาดหวั เรอื่ ง 4</H4> <H5>ขนาดหัวเร่ือง 5</H5> <H6>ขนาดหวั เร่ือง 6</H6> <H7>ขนาดหัวเรื่อง 7</H7> การแสดงผล
วชิ าการพัฒนาเวบ็ ไซต์ทางธุรกิจเบื้องต้น BC10203 16 8. Horizontal Separator Rule : เสน้ แบ่งก้ันหนา้ เพจตามแนวนอน เมือ่ มีการบรรจขุ ้อความ/รปู ภาพลงในเว็บเพจจานวนมาก บางครง้ั เรากม็ ีความจาเปน็ อยาก แบ่งเน้ือหาออกเป็นสว่ นๆ ดว้ ยเส้นก้ันตามแนวนอน เราสามารถใช้คาส่งั <HR> แทรกในตาแหน่งท่ี แบ่งเนอ้ื หานัน้ รูปแบบคาสงั่ <BODY> เนอ้ื หาสว่ นที่ 1 <HR> เน้อื หาส่วนท่ี 2 </BODY> การแสดงผล เรายงั สามารถกาหนดคุณสมบัติของเส้นไดเ้ พิม่ เติม เช่น กาหนดความยาว ความหนา สี และ การวางตาแหนง่ ของเส้นได้ ดว้ ยการแทรกคณุ สมบตั ลิ งไปหลังคาส่งั <HR> ดังตวั อยา่ ง กาหนดความกว้างเป็นเปอร์เซนต์ <HR WIDTH=\"80%\"> กาหนดความกวา้ งเปน็ พกิ เซล <HR WIDTH=\"300\"> กาหนดความหนาของเส้น (หน่วยพกิ เซล) <HR WIDTH=\"70%\" size=\"5\">
วิชาการพัฒนาเว็บไซตท์ างธรุ กจิ เบอ้ื งต้น BC10203 17 กาหนด shade สีของเสน้ ใหท้ บึ <HR WIDTH=\"90%\" size=\"5\" noshade> กาหนดสีของเส้นตามต้องการ <HR WIDTH=\"400\" color=\"#ff0000\"> กาหนดตาแหน่งของเสน้ ชิดดา้ นซา้ ย <HR WIDTH=\"300\" color=\"#ff0000\" align=\"left\"> กาหนดตาแหนง่ ของเสน้ กงึ่ กลาง <HR WIDTH=\"400\" color=\"#ff0000\" align=\"center\"> กาหนดตาแหน่งของเส้นชิดดา้ นขวา <HR WIDTH=\"300\" color=\"#ff0000\" align=\"right\"> 9. Line Break : การตัดคาขึ้นบรรทดั ใหม่ ในบททผ่ี ่านมาจากไฟล์ตวั อย่าง จะพบว่าหากพิมพ์ข้อความยาวๆ เมอื่ ต้องการจะตดั คาขึ้น บรรทดั ใหมต่ ้องใช้คาสัง่ <br> แทรก ณ ตาแหน่งที่ตอ้ งการให้ข้นึ บรรทัดใหม่ ดงั ตัวอย่าง ตวั อย่าง การเขียนข้อความท่ีตอ้ งการตัดคาขน้ึ บรรทัดใหมส่ ามารถทาได้ด้วยการใช้คาสั่ง Break (br) แทรก<br>ตัวอย่างบรรทดั นจี้ ะถกู ตัดลงบรรทดั ถดั ไป
วิชาการพฒั นาเวบ็ ไซต์ทางธุรกจิ เบื้องต้น BC10203 18 ผลทไี่ ด้ นอกจากน้ันเรายงั สามารถแบ่งขอ้ ความในรปู ของย่อหนา้ (Paragraph) สาหรับกล่มุ ขอ้ ความ จานวนมากได้ ด้วยการใช้คาสั่ง <P> ... </P> ผลท่ไี ด้จะแตกตา่ งจากการใช้คาส่ัง <br> นน่ั คอื จะมี การเว้นชอ่ งว่างหนงึ่ บรรทัดก่อนและหลงั ย่อหน้า ดังตวั อย่าง ตวั อย่าง <P>นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าทใี่ ช้คาส่งั Paragraph กากับ น่คี ือ ยอ่ หนา้ แรก</P> <P>นค่ี อื ตัวอย่างของการจัดกลมุ่ ข้อความแบบย่อหนา้ ทีใ่ ช้คาสัง่ Paragraph กากบั นคี่ ือ ย่อหนา้ ทส่ี อง</P> ประโยคใหมท่ ี่ไม่มีคาสง่ั กากับ ผลทีไ่ ด้
วิชาการพฒั นาเวบ็ ไซตท์ างธุรกจิ เบอ้ื งต้น BC10203 19 10. Space between texts : การกาหนดชอ่ งว่างระหว่างข้อความ บราวเซอรจ์ ะไมส่ นบั สนุนการแสดงผลการเคาะเว้นวรรคมากเกนิ กวา่ 1 เคาะ (จะเวน้ วรรค 10 ชอ่ งก็แสดงเพียงชอ่ งเดยี ว) และการกดป่มุ เย้ืองย่อหนา้ ก็จะแสดงเพยี ง 1 ชอ่ งวา่ งเท่าน้นั เรา สามารถกาหนดใหแ้ สดงชอ่ งว่างได้มากกวา่ 1 ช่องว่างไดด้ ้วยการแทรกอักขระพเิ ศษลงไป คือ แทน 1 ชดุ ตอ่ 1 ช่องว่างตวั อักษร ดงั ตวั อยา่ ง ตวั อยา่ ง การแทรกช่องวา่ งเกนิ กว่า 1 ช่องว่าง เช่น นายวันฉลอง เศรษฐบุตร (เวน้ 5 ช่อง ระหว่างชอ่ื - นามสกุล) ผลทไี่ ด้ 11. Indented Text : การจดั เยอ้ื งยอ่ หน้าข้อความ ถา้ เราตอ้ งการให้ขอ้ ความมีการเยื้องจากขอบท้ังสองข้างของหนา้ เว็บเพจ สามารถใชค้ าสั่ง <BLOCKQUOTE> ... </BLOCKQUOTE> ได้ ข้อความท่ีอยรู่ ะหว่างคาสั่งดังกล่าวจะเยื้องระยะจาก ขอบทั้งสองดา้ นดังตัวอยา่ ง ตัวอยา่ ง <BLOCKQUOTE> ข้อความนีต้ ้องการเยอ้ื งใหห้ ่างจากขอบทง้ั สองข้าง เพื่อใหเ้ กิดกลุ่มข้อความที่ดู สวยงามอา่ นงา่ ย ด้วยการใชค้ าส่งั <BLOCKQUOTE> </BLOCKQUOTE>
วิชาการพัฒนาเวบ็ ไซต์ทางธุรกิจเบือ้ งตน้ BC10203 20 ผลทีไ่ ด้ แตถ่ ้าหากตอ้ งการเยื้องย่อหน้าในบรรทัดแรกเพยี งบรรทดั เดยี ว สามารถใช้การแทรก ตัวอักษรวา่ งลงไปเท่ากบั จานวนเคาะวรรคท่ีต้องการไดโ้ ดยตรง หรอื จะกาหนดในคาสัง่ ย่อหน้า <p style=\"text-indent: 30\"> ก็ได้ (ใช้ได้ดกี ับบราวเซอร์ IE บราวเซอร์อื่นอาจไม่แสดงผล) ดังตวั อย่าง ตวั อยา่ ง การเยอื้ งย่อหน้าด้วยการแทรกอักษรว่างลงไป 6 ชุด (ตัวอกั ษร) <p style=\"text-indent: 30\">การเยอ้ื งย่อหนา้ ด้วยการกาหนดสไตล์ใหก้ บั คาสงั่ ย่อหน้า คา่ ตัวเลข 30 คอื หน่วยพกิ เซล </p> ผลทไ่ี ด้
วิชาการพฒั นาเว็บไซตท์ างธุรกจิ เบอ้ื งตน้ BC10203 21 12. Alignments : การจัดวางตาแหนง่ ของข้อความ เราสามารถจัดวางตาแหนง่ ข้อความหรอื รูปภาพในหนา้ เว็บเพจได้ ท้ังการกาหนดให้ตัวอักษร ขอ้ ความหรอื รปู ภาพชดิ ด้านซ้าย/กลาง/ขวาของหน้าเว็บเพจ (ปกติข้อความจะถูกจัดชดิ ซา้ ยอยแู่ ล้ว ด้วย) ดว้ ยการใชค้ าส่ัง <DIV ALIGN=\"LEFT/CENTER/RIGHT\"> ... </DIV> ครอบข้อความ/ รูปภาพนนั้ ตัวอย่าง <DIV ALIGN=\"LEFT\">ข้อความนจี้ ดั ชดิ ซา้ ย</DIV><br> <DIV ALIGN=\"CENTER\">ข้อความนจี้ ดั ก่ึงกลาง</DIV><br> <DIV ALIGN=\"RIGHT\">ข้อความนี้จดั ชดิ ขวา</DIV> ผลทไี่ ด้
วชิ าการพัฒนาเว็บไซต์ทางธุรกจิ เบอื้ งต้น BC10203 22 สรปุ คาส่ัง รายละเอยี ด TAGS คาสัง่ กาหนดการแสดงผลในส่วนเนือ้ หาของเวบ็ เพจ <body> ... </body> <b> ... </b>, การกาหนดรปู แบบตัวอักษรเป็นตัวหนา <i> ... </i>, ตวั เอยี ง <u> ... </u> และขดี เส้นใต้ <Hx> ... </Hx> การกาหนดขนาดตวั อักษรหัวเรอื่ ง เม่ือ x คอื ตัวเลข 1-7 เป็นขนาด <font size=\"n\"> เรยี งลาดับจากใหญส่ ุดไปเลก็ สุด การกาหนดขนาดตัวอักษร เม่ือ n คือ ตวั เลข 1-7 เปน็ ขนาด <font face=\"name\"> เรียงลาดับจากเล็กสุดไปใหญ่สดุ <font color=\"name\"> การกาหนดชอ่ื แบบตวั อักษรใหแ้ ตกต่างจากข้อความส่วนอื่น <div align=\"ตาแหน่ง\"> ...</div> การกาหนดสีของตัวอักษรให้แตกต่างจากข้อความสว่ นอนื่ ใชไ้ ดท้ ั้ง <p align=\"ตาแหน่ง\">...</p> แบบระบชุ ่ือสี หรือกาหนดค่าตัวเลขฐาน 16 (Hexadecimal) <br> <BLOCKQUOTE> ... สาหรบั จัดวางตาแหน่งข้อความหรอื รปู ภาพในหน้าเวบ็ </BLOCKQUOTE> เพจ ประกอบด้วย LEFT/CENTER/RIGHT สาหรบั จดั ยอ่ หน้าข้อความ สาหรับตดั คาข้ึนบรรทัดใหม่ สาหรับจดั เยอ้ื งหน้าข้อความ
วชิ าการพัฒนาเวบ็ ไซต์ทางธรุ กิจเบอื้ งตน้ BC10203 23 บทท่ี 3 การทางานกบั รูปภาพ ประเภทของไฟลร์ ูปภาพ การสร้างเวบ็ เพจนั้นสามารถนารปู ภาพมาประกอบบนหน้า เว็บเพจได้ เช่น แทรกภาพในเว็บ เพจ ใส่เส้นกรอบเป็นรูปภาพ และการแสดงภาพให้เป็นพื้นหลังของเว็บเพจ ชนิดของภาพท่ีจะนามา ประกอบบนเว็บเพจ ควรจะต้องมีขนาดเล็ก เพ่ือนาไปเรียกใช้บนเว็บเพจได้อย่างรวดเร็ว เช่น GIF, JPEG และ PNG ซึ่งในการเลือกใช้ฟอร์แมตภาพได้ย่างเหมาะสมเราควรต้องทาความเข้าใจลักษณะ การ บีบอัดข้อมูลของแต่ละฟอร์แมต เพราะแต่ละแบบจะบีบอัดข้อมูลได้อย่างมีประสิทธิภาพสูงสุด เมื่อนามาใชก้ บั ภาพ ทีเ่ หมาะสม รจู้ กั กบั ชนิดของภาพกราฟิกบนเว็บ 1. ไฟล์สกลุ JPG (Joint Photographer’s Experts Group) เปน็ ไฟล์หนึ่งที่นิยมใชบ้ น Internet มคี วามละเอียดสูง และ ใช้สีจานวนมาก (สนบั สนุนถงึ 24 bit color) ไฟลช์ นิดนม้ี ักจะใช้ กับภาพถ่ายที่นามาสแกน และต้องการนาไปใชบ้ นอินเทอร์เนต็ เพราะใหค้ วามคมชัดและความละเอยี ดของภาพสงู จุดเดน่ - สนบั สนุนสไี ดถ้ ึง 24 bit - สามารถกาหนดค่าการบบี ไฟลไ์ ดต้ ามทีต่ ้องการ - มรี ะบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Progressive - มีโปรแกรมสนบั สนุนการสร้างจานวนมาก - เรียกดูได้กบั Graphics Browser ทกุ ตวั - ตง้ั คา่ การบีบไฟล์ได้ (compress files) จดุ ด้อย - ทาให้พน้ื ของรปู โปรง่ ใสไม่ได้
วชิ าการพฒั นาเว็บไซต์ทางธรุ กิจเบื้องตน้ BC10203 24 2. ไฟลส์ กลุ GIF (Graphics Interlace File) พฒั นาโดยบรษิ ทั CompuServe จดั เปน็ ไฟลภ์ าพสาหรับการเผยแพรผ่ า่ นอินเทอร์เนต็ ตง้ั แตย่ คุ แรก จุดเด่น - สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า คอมพวิ เตอร์ทุกระบบ ไมว่ ่าจะใช้ ระบบปฏิบตั กิ ารใดก็สามารถเรยี กใช้ไฟล์ภาพสกลุ นไี้ ด้ - มีขนาดไฟล์ตา่ จากเทคโนโลยกี ารบบี อัดภาพ ทาใหส้ ามารถส่งไฟล์ภาพไดร้ วดเร็ว - สามารถทาพืน้ ของภาพใหเ้ ป็นพ้นื แบบโปร่งใสได้ (Transparent) - มรี ะบบแสดงผลแบบหยาบและคอ่ ยๆ ขยายไปสูล่ ะเอยี ดในระบบ Interlace - มโี ปรแกรมสนบั สนุนการสร้างจานวนมาก - เรยี กดูได้กับ Graphics Browser ทกุ ตวั - ความสามารถด้านการนาเสนอแบบภาพเคลอื่ นไหว (GIF Animation) จดุ ดอ้ ย ไฟล์ชนิดนี้ก็มีจุดด้อยในเรื่องของการแสดงสี ซง่ึ แสดงได้เพยี ง 256 สี ทาให้ การ นาเสนอภาพถ่าย หรือภาพที่ตอ้ งการความคมชดั หรือภาพสดใส จะต้องอาศัยฟอร์แมต อื่น 3. ไฟลส์ กลุ PNG (Portable Network Graphics) ไฟล์สกลุ ล่าสุดที่นาจดุ เด่นของไฟล์ GIF และ JPEG มาพัฒนาร่วมกนั ทาให้ภาพในสกลุ น้แี สดงผลสไี ด้มากกวา่ 256 สี และยังสามารถทาพนื้ ภาพให้โปร่งใสได้ จงึ เป็นไฟลภ์ าพที่ ไดร้ ับความนิยมมากในปัจจบุ ันด้วยอีกสกุลหนง่ึ คุณสมบัติของภาพคือ 1. สามารถใชง้ านข้ามระบบ (Cross Platform) หมายความว่า ระบบคอมพวิ เตอรท์ ุกระบบ ไม่ วา่ จะใช้ Windows, Unix ก็สามารถเรียกใชไ้ ฟลภ์ าพสกุลนี้ได้ 2. ขนาดไฟลเ์ ล็ก ดว้ ยเทคนิคการบีบอัดคงสญั ญาณ LZW 3. สามารถทาภาพโปรง่ ใสจากสีพ้ืน 256 ระดับ 4. แสดงภาพแบบสอดประสานเชน่ เดยี วกับ GIF โดยมคี วามคมชัดที่ดีกวา่ 5. มีคณุ สมบตั ิ Gamma ทาให้ภาพสามารถปรับตวั เองได้ตามจอภาพ และปรบั ระดับความสว่าง ทแ่ี ท้จรงิ ตามทีค่ วรจะเป็น จุดเดน่ - สนับสนนุ สไี ด้ถึงตามค่า True color (16 bit, 32 bit หรอื 64 bit)
วชิ าการพฒั นาเว็บไซต์ทางธุรกจิ เบ้ืองตน้ BC10203 25 - สามารถกาหนดค่าการบบี ไฟล์ไดต้ ามท่ตี ้องการ - มรี ะบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสลู่ ะเอยี ด (Interlace) - สามารถทาพ้ืนโปรง่ ใสได้ จดุ ด้อย - หากกาหนดคา่ การบบี ไฟลไ์ วส้ งู จะใช้เวลาในการคลายไฟล์สงู ตามไปดว้ ย แตข่ นาดของ ไฟลจ์ ะมีขนาดตา่ - ไม่สนับสนุนกบั Graphic Browser ร่นุ เก่า สนบั สนนุ เฉพาะ IE 4 และ Netscape 4 ความละเอียดของภาพและจานวนสขี ้ึนอยกู่ บั Video Card - โปรแกรมสนบั สนนุ ในการสร้างมนี อ้ ย การแทรกรูปภาพในเว็บเพจ คาส่ัง <IMG SRC=\"ชื่อรูปภาพ\"> คือ คาสั่งในการแทรกรปู ภาพในหน้าเว็บเพจ โดยทีต่ าแหน่งท่ี จดั เก็บไฟลเ์ วบ็ กับตาแหน่งไฟล์รูปภาพ อยู่ในโฟลเดอร์เดียวกัน รปู แบบคาสัง่ <html> <head> <title> Insert Images : การแทรกภาพ </title> </head> <body > ขอ้ ความท่ีแสดงในส่วนเนือ้ หา<br> <img src=\"chicklittle.gif\"> </body> </html> การแสดงผล
วชิ าการพัฒนาเวบ็ ไซต์ทางธรุ กิจเบอ้ื งตน้ BC10203 26 จะสังเกตไดว้ ่าคาส่ัง IMG นีเ้ ปน็ คาสั่งเดี่ยวไมต่ ้องมคี าส่ังปิด เมอ่ื มีการเกบ็ รูปภาพไวใ้ น โฟลเดอรใ์ ดเปน็ การเฉพาะ จะตอ้ งกาหนดเส้นทางช้ีไปยังรูปภาพให้ถูกตอ้ งด้วย เช่น เมอ่ื เกบ็ รูปภาพ ไวใ้ นโฟลเดอรช์ ื่อ images เราจะต้องอา้ งในคาสั่งเป็น <IMG SRC=\"images/name.gif\"> หากอ้าง ผิดไฟล์ภาพนน้ั กจ็ ะไม่แสดงดังตวั อยา่ งภาพนี้ เพราะไมม่ รี ปู นอ้ี ยู่จริง หากเราต้องการแสดงรปู ใหม้ ีขนาดต่างจากขนาดจรงิ ของภาพ ก็สามารถทาไดด้ ้วยการ กาหนดเพ่ิมในสว่ นของความกวา้ ง ความยาวของรูปภาพ ดังตัวอย่าง ภาพแรกคือภาพขนาดจริง ภาพ ทสี่ องเปน็ การลดขนาดลง และภาพที่สามเปน็ การเพมิ่ ขนาดขนึ้ <html> <head> <title> Insert Images : การกาหนดขนาดภาพ </title> </head> <body> <div align=\"center\"><b>ตวั อยา่ งการแสดงผลจากคาส่ัง</b>< br><br> <img src=\" chicklittle.gif \"> <img src=\" chicklittle.gif width=\"80\" height=\"66\"> <img src=\" chicklittle.gif \" width=\"160\" height=\"133\"></div> </body> </html> ตัวอยา่ งการแสดงผลจากคาส่งั แสดงการกาหนดขนาดภาพ
วิชาการพฒั นาเว็บไซต์ทางธุรกิจเบอื้ งต้น BC10203 27 สรุปคาสงั่ รายละเอยี ด TAGS คาส่งั การแทรกรูปภาพในตาแหน่งตา่ งๆ name คอื ชอื่ <img src=\"ช่อื ไฟล์รูปภาพ และสถานท่รี ปู นน้ั อยู่ โดยรปู ภาพชนิด JPG, GIF, PNG width=\"x\" hight=\"y\" > width กาหนด ความกวา้ งของรปู ภาพ ( x แทนคา่ ตวั เลข หน่วย pixel) hight กาหนด ความสงู ของรูปภาพ ( y แทนคา่ ตัวเลข หน่วย pixel)
วิชาการพฒั นาเวบ็ ไซต์ทางธุรกิจเบ้ืองตน้ BC10203 28 การจดั วางตาแหน่งของรูปภาพ คาสง่ั <IMG SRC = \"ช่อื รูปภาพ\" ALIGN=\"ตาแหนง่ \" > align=left หรือ center หรือ Right หรือ top หรอื bottom : เป็นการกาหนดตาแหนง่ ของรปู วา่ จะให้อยู่ดา้ นซา้ ย ขวา หรือ ตรงกลาง สว่ น top กบั bottom ใช้จดั ตาแหน่งอักษร เชน่ จัดรูปใหอ้ ยู่ด้านขวา <img src=\"sura.jpg\" align=right> ตารางแสดงคาส่ังการจัดตาแหน่งของภาพ การแสดงผล คาสงั่ ท่ใี ชก้ าหนดตาแหนง่ ข้อความ ตาแหน่งทแ่ี สดงผลข้อความ 1. แบบแนวต้งั เปน็ คาสัง่ ALIGN = \"LEFT\" ตาแหน่งซา้ ยของจอภาพ ตาแหนง่ ขวาของจอภาพ ทีใ่ ชก้ ับรูปภาพ ALIGN = \"RIGHT\" ALIGN = \"TOP\" ตาแหนง่ บนสุดของรปู ภาพ 2. แบบแนวนอนเป็น ALIGN = \"MIDDLE\",\"ABSMIDDLE\" ตาแหนง่ กึ่งกลางของรปู ภาพ คาสั่งทใี่ ชก้ บั ขอ้ ความ ALIGN = ตาแหน่งลา่ งสดุ ของรูปภาพ \"BOTTOM\",\"BASELINE\",\"ABSBOTTOM\" <HTML> <HEAD> <TITLE> การจดั ตาแหน่งภาพ</TITLE> </HEAD> <BODY bgcolor=white> <div align=\"center\"><strong>การวางตาแหน่งของภาพ</strong>< /div> <p> <font size=\"2\" face=\"ms sans serif\"><img src = \"images/cl_breakdance.gif\" align = \"TOP\"> ข้อความนี้อยู่ส่วนบนของรูปภาพ (align = top) </font></p> <hr> <p> <font size=\"2\" face=\"ms sans serif\"><img src = \"images/cl_breakdance.gif\" align = \"MIDDLE\"> ข้อความนี้อยู่สว่ นกลางของรูปภาพ (align = middle) </font></p> <hr> <p> <font size=\"2\" face=\"ms sans serif\"><img src = \"images/cl_breakdance.gif\" align = \"BOTTOM\"> ขอ้ ความนอ้ี ยู่สว่ นลา่ งของรปู ภาพ (align = bottom) </font></p> <hr> <p> <font size=\"2\" face=\"ms sans serif\"><img src =
วิชาการพฒั นาเวบ็ ไซต์ทางธรุ กจิ เบื้องตน้ BC10203 29 \"images/cl_breakdance.gif\" align = \"LEFT\"> เปน็ การกาหนดรปู ภาพให้ชดิ ซ้าย (align = left) </font></p> <p><br> <br> <br> </p> <p> </p><hr> <p align=\"right\"> <font size=\"2\" face=\"ms sans serif\"><img src = \"images/cl_breakdance.gif\" align = \"RIGHT\"> เป็นการกาหนดรูปภาพใหช้ ดิ ขวา (align = right) และ ข้อความนี้อยสู่ ว่ นบนของ รปู ภาพ </font></p> <p></p> <div align=\"center\"> <p> </p> <p> </p> <br> <hr> </BODY> </HTML> border size for images : เส้นขอบรูปภาพในเวบ็ เพจ การจดั วางตาแหนง่ รปู ภาพจะใช้คาส่งั เดยี วกนั กบั การวางตาแหนง่ ตวั อักษร และยงั สามารถ กาหนดเสน้ ขอบรอบรูปภาพด้วยการเพิม่ คาสงั่ คุณสมบตั เิ ส้นขอบ border ตอ่ จากชอื่ รูปภาพไดด้ งั ตัวอยา่ ง <html> ตัวอย่างการแสดงผลจากคาสงั่ <head> ดา้ นซ้ายมอื <title> Insert Images : เสน้ ขอบรูปภาพ เสน้ ขอบรูปภาพ </title> </head> <body> <div align=\"center\"> ตาแหนง่ และเสน้ ขอบรปู ภาพ<br> <img src=\"images/babydance01.gif\" border=\"3\"> </div> </body> </html>
วชิ าการพฒั นาเวบ็ ไซต์ทางธรุ กิจเบ้ืองต้น BC10203 30 คาอธิบายรปู ภาพ นอกจากน้ีแลว้ เรายงั สามารถกาหนดให้มีการแสดงชอื่ รปู ภาพ หรอื คาบรรยาย หรอื รายละเอยี ดของรูปภาพไดเ้ มื่อนาเมาท์ไปชบี้ นรูปนัน้ หรอื ในกรณีที่ผูช้ มบางคนกาหนดให้บราวเซอร์ ไมต่ ้องแสดงผลรูปภาพเพื่อความรวดเรว็ ในการชมเวบ็ รปู จะถูกแทนที่ดว้ ยช่อื ทเ่ี รียกวา่ Alternative text โดยใชว้ ิธกี ารเพ่ิมคุณสมบัติลงไปในคาสั่งแทรกรปู ภาพดังตวั อย่าง <img src=\"images/babydance01.gif\" border=\"3\" alt=\"เด็กเตน้ \"> ทดสอบนาเมาสม์ าวางเหนือรูปภาพ สรปุ คาสงั่ ทใ่ี ช้ในบทน้ี รายละเอียด TAGS คาสง่ั การแทรกรูปภาพในตาแหน่งตา่ งๆ name คอื ชอ่ื และสถานที่ <img src=\"name\" รูปนั้นอยู่ โดยรูปภาพชนิด JPG, GIF, PNG border=\"n\" alt =\" text\"> border คือ แสดงเส้น (n คือ ขนาดของเว้น) | alt ใชแ้ สดงขอ้ ความ กากบั รปู ภาพ (text คอื ข้อความ)
วชิ าการพัฒนาเว็บไซต์ทางธุรกิจเบื้องตน้ BC10203 31 บทท่ี 4 การทางานร่วมกับตาราง การสร้างตาราง ตาราง (Tables ) จะควบคุมการแสดงผลของข้อความ รูปภาพ ปุ่มเมนู ต่างๆ ใหร้ วมเป็น กลมุ่ ในเว็บเพจท่ีใช้เทคนิคนี้แม้ว่าเราจะมองไมเ่ ห็นเสน้ ขอบตาราง (เพราะกาหนดใหซ้ ่อนเสน้ ขอบไว้) แตเ่ ราสามารถมองเห็นขอบเขตของตารางชอ่ งต่างๆ ได้ ซึ่งเราจะได้ศกึ ษาเทคนคิ วิธกี ารในบทนีแ้ ละ บทตอ่ ๆ ไป รปู แบบคาสั่ง คาอธิบาย <TABLE>...............................</TABLE> คาสง่ั ท่ีกาหนดให้บราวเซอร์สร้างตาราง <CAPTION>..........................</CAPTION> คาสั่งที่ใชต้ ้ังช่อื หรือหัวข้อเรอื่ งใหก้ ับตาราง <TR>........................................</TR> คาสั่งสาหรับสรา้ งแถวในตาราง (ROW) <TH>........................................</TH> คาสงั่ สาหรับกาหนดขอ้ มูลส่วนหวั ของตาราง <TD>........................................</TD> คาสั่งสาหรับสร้างแถวในตาราง (ROW) ตัวอยา่ งเปน็ การสร้างตาราง 2 แถว 2 คอลมั น์ การแสดงผล รปู แบบคาสัง่ ชอื่ ตาราง ข้อมูลสว่ นหัว1 ข้อมูลสว่ นหัว2 <TABLE> ช่องที่ 1 ชอ่ งที่ 2 <CAPTION>ช่ือตาราง</CAPTION> ช่องที่ 3 ช่องท่ี 4 <TR> <TH> ข้อมลู สว่ นหวั 1</TH> <TH> ข้อมลู สว่ นหวั 2</TH> <TR> <TD>ช่องท่ี 1</TD><TD>ช่องที่ 2</TD> </TR> <TR> <TD>ชอ่ งที่ 3</TD><TD>ชอ่ งที่ 4</TD> </TR> </TABLE> ถ้าดูจากการแสดงผลฝัง่ ขวาแล้วจะเหน็ ว่าไมเ่ หน็ มตี ารางอะไรเลย เห็นเพียงข้อความ 4 ชดุ ใน สองแถวเทา่ นนั้ เอง แตใ่ นความเป็นจรงิ มีตารางอยู่แต่ไม่แสดงเส้นขอบ ซ่ึงในคาสง่ั <TABLE> เองเรา
วิชาการพฒั นาเวบ็ ไซต์ทางธรุ กจิ เบื้องตน้ BC10203 32 สามารถเพิ่มคุณสมบัติการแสดงเสน้ ขอบดว้ ยการเพ่ิม border=\"x\" เมื่อ x เปน็ ตัวเลขขนาดพกิ เซล (ปกตถิ ้าไม่กาหนดจะมคี ่าเปน็ 0) รปู แบบคาสง่ั การแสดงผล <TABLE BORDER=\"1\" > ช่อื ตาราง <CAPTION>ชือ่ ตาราง</CAPTION> ข้อมูลสว่ นหัว1 ข้อมูลสว่ นหวั 2 <TR> ช่องท่ี 1 ช่องที่ 2 <TH> ขอ้ มูลส่วนหวั 1</TH> ชอ่ งท่ี 3 ชอ่ งท่ี 4 <TH> ข้อมลู ส่วนหวั 2</TH> <TR> <TD>ช่องท่ี 1</TD><TD>ชอ่ งท่ี 2</TD> </TR> <TR> <TD>ช่องท่ี 3</TD><TD>ช่องที่ 4</TD> </TR> </TABLE> หมายเหตุ คาสั่ง <CAPTION>............</CAPTION> และ <TH>..............</TH> อาจไม่ จาเป็นตอ้ งใส่ก็ได้ การกาหนดตาแหนง่ การจัดวางตาราง เราสามารถกาหนดตาแหน่งการวางตารางได้ 3 รปู แบบ รปู แบบคาสงั่ การแสดงผล <TABLE BORDER=\"1\" WIDTH=\"90%\"> ช่องท่ี 1 ชอ่ งท่ี 2 <TR> ช่องท่ี 3 ช่องที่ 4 <TD>ชอ่ งที่ 1</TD><TD>ช่องท่ี 2</TD> </TR> <TR> <TD>ชอ่ งที่ 3</TD><TD>ช่องที่ 4</TD> </TR> </TABLE>
วิชาการพัฒนาเวบ็ ไซต์ทางธุรกิจเบอื้ งต้น BC10203 33 Specifying table sizes : การกาหนดความกว้างของตาราง เราสามารถกาหนดความกว้างของตารางดว้ ยการกาหนดคา่ ในหน่วยเปอรเ์ ซนต์ของหนา้ จอ (ความกว้างจะขยายตามขนาดบราวเซอร)์ และในหน่วยพิกเซล (ความกว้างจะคงที่ไมข่ ยายตาม บราวเซอร์) ดว้ ยการเพม่ิ สว่ นขยาย WIDTH=\"x\" เขา้ ไปภายในคาสงั่ <TABLE> เช่นเดยี วกับการแสดง เสน้ ขอบ รปู แบบคาสงั่ ชอ่ งท่ี 1 การแสดงผล ช่องที่ 3 <TABLE BORDER=\"1\" WIDTH=\"90%\"> ช่องที่ 2 <TR> ช่องที่ 1 ช่องที่ 4 <TD>ช่องที่ 1</TD><TD>ชอ่ งท่ี 2</TD> ช่องท่ี 3 </TR> ช่องที่ 2 <TR> ช่องท่ี 4 <TD>ชอ่ งท่ี 3</TD><TD>ช่องที่ 4</TD> </TR> </TABLE> <TABLE BORDER=\"1\" WIDTH=\"260\" HEIGHT=\"100\"> <TR> <TD>ช่องท่ี 1</TD><TD>ชอ่ งท่ี 2</TD> </TR> <TR> <TD>ชอ่ งที่ 3</TD><TD>ช่องท่ี 4</TD> </TR> </TABLE> เราสามารถกาหนดความสงู ของตารางไดเ้ ชน่ เดยี วกนั ดว้ ยการระบสุ ่วนขยายเปน็ HEIGHT=\"x\" แตค่ า่ x ตอ้ งเปน็ หน่วยพกิ เซลเท่านั้น จากตวั อยา่ งดา้ นบนจะเห็นวา่ ในตารางแตล่ ะแถวและแต่ละคอลัมน์ จะแบ่งออกเปน็ สองส่วน เท่ากันโดยอตั โนมัติ แต่อยา่ งไรก็ตาม ความกวา้ งและความสูงของตารางอาจจะขยายออกไปให้พอดีกบั จานวนตัวอักษร หรือขนาดของรปู ท่ใี หญ่เกินกวา่ ขนาดของตารางได้ (ควรระวงั ในการกาหนดขนาด) Text alignment in table cells : การกาหนดการจัดวางขอ้ ความ โดยปกตเิ ม่ือป้อนข้อความในตารางเราจะเหน็ ข้อความปรากฏทางดา้ นซา้ ยของตาราง เรา สามารถกาหนดให้ข้อความอยใู่ นตารางตามแนวนอน โดยใชส้ ่วนขยาย ALIGN=\"LEFT/CENTER/RIGHT\" (เลอื กตาแหน่งตามที่ต้องการจากคาท้ัง 3) ถา้ ไม่กาหนดตาแหน่ง
วิชาการพฒั นาเวบ็ ไซต์ทางธรุ กิจเบอ้ื งตน้ BC10203 34 ค่าปกตจิ ะเปน็ ซ้าย (left) <TD ALIGN=\"LEFT\"> หรอื <TD ALIGN=\"CENTER\"> หรือ <TD ALIGN=\"RIGHT\"> นอกจากการกาหนดตาแหน่งขอ้ ความในแนวนอนแล้ว ยังสามารถกาหนดตาแหน่งตามแนวตั้งได้ เชน่ กนั โดยใช้สว่ นขยาย VALIGN=\"TOP/MIDDLE/BOTTOM\" (เลือกตาแหนง่ ตามทต่ี ้องการจากคา ทง้ั 3) ถา้ ไม่กาหนดตาแหน่ง คา่ ปกติจะเปน็ ซา้ ย (middle) <TD VALIGN=\"TOP\"> หรือ <TD VALIGN=\"MIDDLE\"> หรอื <TD ALIGN=\"BOTTOM\"> รูปแบบคาสั่ง <TABLE BORDER=\"1\" WIDTH=\"95%\" HEIGHT=\"100\"> <TR> <TD align=\"left\" valign=\"top\">ซ้ายบน</TD> <TD align=\"right\" valign=\"middle\">ขวากลาง</TD> </TR> <TR> <TD align=\"center\" valign=\"bottom\">กลางล่าง</TD> <TD align=\"right\" valign=\"top\">ขวาบน</TD> </TR> </TABLE> การแสดงผล ซ้ายบน ขวากลาง กลางล่าง ขวาบน Images in table cells : การแทรกภาพในตาราง อย่างท่ีบอกไว้แลว้ ว่า ตาราง สามารถที่จะควบคุมตาแหน่งของรปู ภาพและข้อความให้อยใู่ น ทท่ี ี่เราต้องการได้ การแทรกรูปภาพเราจะแทรกเข้าไปในเซลใดๆ กไ็ ดต้ ามต้องการ โดยยังใช้คาส่งั <IMG> แทรกระหวา่ ง <TD> ... lt;/TD> รปู แบบคาส่งั <HTML> <HEAD> <TITLE>Images in Table : แทรกรปู ภาพในตาราง</TITLE> </HEAD> <BODY>
วชิ าการพฒั นาเวบ็ ไซตท์ างธุรกิจเบอื้ งตน้ BC10203 35 <TABLE BORDER=\"1\"> <TR> <TD> <IMG SRC=\"mages/chickenlittle01.gif\"> </TD> <TD> รปู ด้านขา้ งน้ีคอื chickenlittle </TD> </TR> </TABLE> </BODY> </HTML> การแสดงผล รูปดา้ นขา้ งน้คี ือ chickenlittle ในบทนี้เป็นการเร่ิมตน้ สรา้ งตารางแบบงา่ ยๆ ไมซ่ บั ซอ้ น ในหวั ข้อถดั ไป ไปเราจะเพม่ิ รายละเอียดเพอ่ื การตกแตง่ จดั การแสดงผลของตารางให้ดดู ี เพอ่ื ใหก้ ารศึกษาในบทต่อไปทาได้งา่ ยขึ้น สรุปคาส่งั รายละเอียด TAGS <TABLE> ... </TABLE> คาส่งั กาหนดการสรา้ งตาราง ซง่ึ ในคาส่ังนส้ี ามารถเพ่มิ เติมส่วน ขยายใหก้ บั ตารางไดอ้ ีกมาก เชน่ เส้นขอบ สพี ื้นตาราง การจัด <TR> ... </TR> ข้อความท้ังในแนวตง้ั และแนวนอน <TD> ... </TD> คาส่ังกาหนดการสรา้ งแถว (Table Row) <TH> ... </TH> คาสั่งกาหนดช่องตารางหรือเซล หรอื คอลัมน์ (Table Data) สาหรบั บรรจุข้อมูล ตวั อักษร ภาพ คาส่งั กาหนดช่องตารางหรือเซล หรอื คอลัมน์ท่เี ป็นหวั ตาราง (Table Heading) เหมอื นกับ <TD> แต่ข้อความที่บรรจุ ระหว่างคาสง่ั นจ้ี ะเปน็ ตวั หนาและจัดกึ่งกลางเสมอ
วชิ าการพัฒนาเวบ็ ไซตท์ างธรุ กจิ เบ้ืองตน้ BC10203 36 Cell padding : ระยะหา่ งจากเสน้ ขอบของตาราง เราสามารถกาหนดระยะหา่ ง ทัง้ แนวตั้งและแนวนอนของข้อความและรปู ภาพจากเสน้ ขอบ ภายในชอ่ งตารางได้ ดว้ ยการกาหนดคา่ CELLPADDING=\"x\" เมื่อ x มีหน่วยเป็นพกิ เซล (คา่ ปกติถา้ ไม่คา่ padding จะมีค่าเป็น 1 เสมอ) ถ้าเราต้องการให้ไม่มีการเว้นระยะจากขอบสามารถกาหนดค่า ใหเ้ ป็น 0 ได้ รปู แบบคาส่งั <TABLE BORDER=\"1\" WIDTH=\"450\" CELLPADDING=\"10\"> <TR> <TD>ข้อความภายในตารางท่ีกาหนดระยะห่างจากเสน้ ขอบ padding ไวใ้ นตาราง</TD> <TD><IMG SRC=\"chicklittle.gif\" border=\"1\"></TD> </TR> <TR> <TD>ขอ้ ความในตารางทร่ี ะยะหา่ งเทา่ กับ 10 พิกเซล</TD> <TD>chicklittle</TD> </TR> </TABLE> Cell spacing : ระยะหา่ งระหวา่ งช่องตาราง ในการสรา้ งตารางขนาด 2 แถว 2 คอลมั น์ (4 ช่อง) น้ัน ถา้ เราจินตนาการถึงรปู สี่เหลีย่ มใหญ่ทีม่ รี ูป ส่ีเหล่ียมเล็ก 4 รูปวางซอ้ นกนั อยู่จะทาให้เรามองเห็นวา่ ในตารางจะมีเส้นขอบอยู่ 2 เส้นคือ เส้นขอบ ของสีเ่ หลี่ยมใหญ่ภายนอก และเสน้ ขอบของส่เี หล่ียมเล็กที่อย่ภู ายใน ระยะหา่ งระหวา่ งเสน้ ขอบทัง้ สองนเ้ี ราเรยี กวา่ Cell spacing ค่าปกติของระยะห่างของเส้นขอบตารางคือ 2 ถา้ เราต้องการเสน้ ขอบที่บางมากๆ สามารถกาหนดเป็นคา่ 0 ได้ รปู แบบคาส่ัง <TABLE BORDER=\"3\" WIDTH=\"450\" CELLSPACING=\"10\"> <TR> <TD>ขอ้ ความภายในตารางที่กาหนดระยะห่างจากเส้นขอบ padding ไว้ในตาราง</TD> <TD><IMG SRC=\"chicklittle.gif\" border=\"1\"></TD>
วิชาการพัฒนาเว็บไซต์ทางธุรกจิ เบ้อื งต้น BC10203 37 </TR> <TR> <TD>ขอ้ ความในตารางทีร่ ะยะหา่ งเท่ากบั 10 พกิ เซล</TD> <TD>kero</TD> </TR> </TABLE> Tables and Images : ตารางและรูปภาพ ในบทเรยี นที่ผา่ นมาเราเคยใช้รปู ภาพสาหรบั ทาเป็นจดุ เชอ่ื มโยงไปยงั หน้าเว็บไซต์ต่างๆ มาแลว้ และเราคงเคยพบว่ามีหลายเวบ็ เซตใ์ ช้รูปภาพเดียวกันแต่สามารถคลิกท่ตี าแหน่งต่างๆ บน ภาพแลว้ จะนาไปสู่เวบ็ ไซตท์ ่ีแตกตา่ งกนั เทคนิคง่ายๆ ท่ที าไดค้ ือการตดั ซอยรูปออกเป็นสว่ นๆ นาไป บรรจุในตาราง แล้วสร้างจุดเช่อื มโยงไปยังหนา้ เวบ็ ไซตต์ ่างๆ ได้ นอกจากนแ้ี ล้ว ตารางยงั ใชป้ ระโยชน์ในการนาเสนอรูปภาพขนาดใหญบ่ นหน้าเว็บเพจได้ เนอื่ งจาก การนาภาพขนาดใหญ่ 1 ภาพมาแสดงในหนา้ เวบ็ เพจนนั้ จะใช้เวลาในการแสดงผลนาน (จากการ โหลดไฟลจ์ ากเครื่องแมข่ ่ายมายังเคร่อื งผู้ชม) จงึ ตอ้ งใชเ้ ทคนคิ ในการตดั ซอยรูปภาพออกเปน็ สว่ นๆ ดว้ ยโปรแกรมตกแต่งภาพ จากน้ันนาภาพขนาดเลก็ มาบรรจุลงในชอ่ งตาราง และเพื่อให้การแสดงผล เปน็ ภาพเพียงภาพเดียวตอ่ กันเราจะต้องกาหนดระยะห่างระหว่างภาพและขอบตาราง ดังตัวอยา่ ง สรปุ คาส่งั รายละเอียด TAGS คาส่งั กาหนดระยะห่างระหวา่ งตัวอกั ษรหรือขอบรปู ภาพกบั เสน้ CELLPADDING=\"x\" ขอบตาราง มีหนว่ ยเป็นพิกเซล CELLSPACING=\"x\" คาสงั่ กาหนดระยะห่างระหว่างช่องตารางแต่ละชอ่ งกบั เสน้ ขอบ มหี นว่ ยเป็นพกิ เซล
วิชาการพัฒนาเวบ็ ไซต์ทางธรุ กิจเบ้อื งต้น BC10203 38 Table background color : ตารางและสีพ้นื หลัง เราสามารถใชส้ ีเป็นพ้นื หลังของตารางได้ ด้วยการกาหนดเพ่ิมคุณสมบตั ิ BGCOLOR=\"color name\" ภายในคาสงั่ <TABLE> ซ่งึ จะมผี ลกับทุกชอ่ งในตารางนน้ั รูปแบบคาส่งั การแสดงผล <TABLE WIDTH=\"250\" BGCOLOR=\"#FF0000\" HEIGHT=\"100\"> <TR> <TD WIDTH=\"50%\">A</TD> <TD WIDTH=\"50%\">B</TD> A B </TR> C D <TR> <TD>C</TD> <TD>D</TD> </TR> </TABLE> ในตัวอยา่ งข้างบนเปน็ การกาหนดสขี องตารางทง้ั หมด เราสามารถกาหนดสีใหแ้ ต่ละแถวมคี วาม แตกต่างกนั ได้ด้วยการเพิม่ คุณสมบตั ิ BGCOLOR=\"color name\" ใหก้ ับคาสั่ง <TR> ดงั ตัวอยา่ ง รูปแบบคาสง่ั การแสดงผล B D <TABLE WIDTH=\"250\" A BGCOLOR=\"#ffff00\" HEIGHT=\"100\"> C <TR BGCOLOR=\"#66ff00\"> <TD WIDTH=\"50%\">A</TD> <TD WIDTH=\"50%\">B</TD> </TR> <TR BGCOLOR=\"#ff99ff\"> <TD>C</TD> <TD>D</TD> </TR> </TABLE>
วชิ าการพฒั นาเว็บไซตท์ างธรุ กจิ เบือ้ งตน้ BC10203 39 ในทานองเดยี วกัน หากเราตอ้ งการเปล่ียนสีเฉพาะชอ่ งใดชอ่ งหนงึ่ กส็ ามารถทาได้ ด้วยการนา คุณสมบัติ BGCOLOR= \"color name\" ไปเพ่ิมให้กับคาส่งั <TD> กจ็ ะเกิดผลตามท่ีเราต้องการได้ เชน่ เราต้องการใหช้ ่อง B เปน็ สีขาว และชอ่ ง C เปน็ สเี ทาก็สามารถเปลีย่ นได้ดงั ตวั อย่าง รปู แบบคาสั่ง การแสดงผล B D <TABLE WIDTH=\"250\" A BGCOLOR=\"#ffff00\" HEIGHT=\"100\"> C <TR BGCOLOR=\"#66ff00\"> <TD WIDTH=\"50%\">A</TD> <TD WIDTH=\"50%\" BGCOLOR=\"white\">B</TD> </TR> <TR BGCOLOR=\"#ff99ff\"> <TD BGCOLOR=\"#808080\">C</TD> <TD>D</TD> </TR> </TABLE> สรุปการใชค้ าส่ัง BGCOLOR เป็นคุณสมบัติเพ่มิ เตมิ ขยายให้กบั ตารางจะมีผลแตกต่างกัน เมื่อนาไป เพ่มิ ณ คาสงั่ ตา่ งๆ ดงั นี้ เมอ่ื นาไปขยาย <TABLE> จะมีผลทาให้ตารางนน้ั ท้ังตารางเปลี่ยนสีไปตามค่าสีที่กาหนดไว้ เมอ่ื นาไปขยาย <TR> จะมผี ลทาให้เฉพาะแถวน้นั มคี ่าสเี ปลยี่ นไปตามท่ีกาหนดไว้ เม่ือนาไปขยาย <TD> จะมผี ลทาใหเ้ ฉพาะช่อง (หรือเซล) นั้นมคี า่ สเี ปลย่ี นไปตามท่ีกาหนด ไว้ Column Span : การผนวกชอ่ งเซล (คอลัมน์) ในบางครงั้ เรามคี วามจาเปน็ ที่จะต้องรวมเซลภายในแถวเข้าด้วยกัน อยา่ งตัวอย่างนี้ เรามี ตารางชนดิ 2*3 จานวน 6 ชอ่ ง ถ้าเราต้องการผนวกช่อง A และ B เขา้ ด้วยกนั ในการสรา้ งตารางก็จะ เหลือแถวบนเพียง 2 ช่อง แถวล่างมี 3 ชอ่ ง ดังภาพ
วชิ าการพัฒนาเวบ็ ไซตท์ างธรุ กิจเบ้อื งต้น BC10203 40 รูปแบบคาสงั่ การแสดงผล C F E <TABLE WIDTH=\"250\" BORDER=\"1\" AB BGCOLOR=\"#ffff00\"> D <TR> <TD>AB</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> จากตวั อย่างโคีดคาส่ังดา้ นบนจะเห็นวา่ การแสดงผลของแถวแรกผดิ พลาด เพราะช่อง AB ไม่ขยาย ออกไป และช่อง C กไ็ ม่ได้อยู่ทีต่ าแหน่งริมขอบตาราง (เหนือชอ่ ง F) วธิ กี ารแกไ้ ขเราจะต้องมีการสง่ั ให้มีการขยายช่อง AB ออกไปเพอ่ื ให้ผนวกเซลทงั้ สองเขา้ ดว้ ยกัน โดยใช้คาสั่ง COLSPAN=\"x\" ขยาย ในคาส่ัง <TD> เมอ่ื x คือจานวนชอ่ งทผ่ี นวกเข้าด้วยกนั ดังตัวอย่างข้างลา่ งนี้ รปู แบบคาสง่ั การแสดงผล C F <TABLE WIDTH=\"250\" BORDER=\"1\" AB BGCOLOR=\"#ffff00\"> DE <TR> <TD COLSPAN=\"2\">AB</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> Row Span : การผนวกแถวในตาราง
วิชาการพัฒนาเว็บไซต์ทางธุรกจิ เบอื้ งต้น BC10203 41 เช่นเดยี วกับหัวขอ้ ทผี่ ่านมา ในบางครั้งเรากม็ คี วามจาเปน็ ในการรวมเซลข้ามแถวเขา้ ดว้ ยกนั อยา่ งตัวอย่างนี้ เรามีตารางชนดิ 2*3 จานวน 6 ช่อง ถ้าเราตอ้ งการผนวกช่อง A และ D ซงึ่ อยูค่ นละ แถวเขา้ ดว้ ยกนั ในการสรา้ งตารางก็จะเหลือแถวบน 3 ชอ่ ง โดยช่องแรกจะต้องขยายไปคลุมพน้ื ท่ใี น แถวท่สี องดว้ ย ดังนนั้ แถวทส่ี องจงึ มีเพยี ง 2 ชอ่ ง ดังภาพ การขยายแถวลงไปต้องใชค้ าสั่ง ROWSPAN=\"x\" ขยายช่องเซล A ในคาสั่ง <TD> เช่นเดียวกัน รูปแบบคาสงั่ การแสดงผล B C AD E F <TABLE WIDTH=\"250\" BORDER=\"1\" BGCOLOR=\"#ff00ff\"> <TR> <TD ROWSPAN=\"2\">AD</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> </TR> </TABLE> จากตัวอยา่ งท่ผี า่ นมาท้ังสองกรณีเราสามารถจะนามารวมกันเพ่อื สรา้ งตารางท่ีมีความซับซ้อนได้ เช่น การสร้างตารางบรรจุข้อมูลและรูปภาพให้มีความสวยงามอาจจะมกี ารผนวกเซล และผนวกแถว ภายในตารางเดียวกนั จึงควรหมน่ั ฝกึ ฝนในการสร้างตารางที่พิเศษออกไปกวา่ ปกติ ลองคลกิ ดูท่ี ตัวอย่างแลว้ ปฏบิ ตั ิดู Nested Tables : ตารางซอ้ นในตาราง ในบางคร้งั การออกแบบหนา้ เว็บเพจ เราอาจจะมคี วามประสงค์ในการควบคุมการแสดงผลท่ี สลบั ซับซอ้ นลงไป เชน่ เราต้องการสรา้ งเน้ือหาทีม่ ีเสน้ กรอบรอบตารางแสดงขอบเขต ใน ขณะเดยี วกนั เราก็ต้องการแทรกรปู ภาพและข้อความลงไปภายในเซลของตาราง และต้องการจะตรึง
วิชาการพัฒนาเว็บไซต์ทางธุรกจิ เบ้ืองต้น BC10203 42 ภาพและข้อความนั้นไว้ แต่ไม่ต้องการแสดงเสน้ ตารางให้ผูช้ มเห็น ดังในภาพข้างล่างน้ีนามาจาก เวบ็ ไซต์ www.cnn.com จากภาพด้านบนจะเหน็ ว่ามกี ารแบง่ ตารางบรรจรุ ปู ภาพและข้อความเป็น 3 คอลมั น์ และมหี ลายแถว เรียงลาดับลงไป (ตดั มาใหเ้ ห็น 2 แถว) ถ้าพจิ ารณาเฉพาะแถวบนจะมี 3 ชอ่ งตาราง คือ OFFBEAT NEWS, BUSINESS NEWS, MORE REPORTS ถ้าเราพิจารณาเฉพาะส่วน OFFBEAT NEWS ทว่ี าดเส้นสเี ขียวน้ันคอื ตารางย่อย 1 ตารางมี 2 แถว 3 ชอ่ ง แถวบนมีเพยี งหนงึ่ ช่องใหญ่ จะมีตารางบรรจเุ สน้ สแี ดงและข้อความ TOP DOG และรปู ภาพ หวั ข้อ OFFBEAT NEWS ในแถวที่สองจะมี 2 ช่อง ชอ่ งดา้ นซา้ ยมือจะมีข้อความ และชอ่ งขวามือจะ บรรจภุ าพสุนขั ไว้ ในกรณเี ชน่ นีก้ ารนาเอาตารางเขา้ ไปแทรกภายในตารางอีกครั้งหนง่ึ จงึ เป็นทางออกท่มี ีการนามาใชก้ ัน มาก และตารางก็เปน็ เคร่ืองมือที่ทรงพลงั ในการจดั หน้าตาเว็บเพจน้ันให้ดดู อี ีก ดว้ ย ลองดตู วั อย่าง โคด๊ คาส่งั น้ีเป็นการแทรกตารางในตารางแบบงา่ ยๆ สรปุ คาสัง่ รายละเอียด TAGS BGCOLOR=\"color name\" คุณสมบัติของการกาหนดสพี ื้นหลังของตารางที่ใหผ้ ลแตกต่างกัน เม่ืออย่หู ลังคาสงั่ ต่างกนั อยู่ในคาสั่ง TABLE สที ก่ี าหนดจะมีผลกบั ท้ังตาราง อยู่ในคาสัง่ TR สีทกี่ าหนดจะมผี ลกบั แถวน้นั แถวเดียว อยู่ในคาส่ัง TD สที ่กี าหนดจะมผี ลกับชอ่ งเซลน้ันชอ่ ง เดยี ว COLSPAN=\"x\" คาสง่ั ผนวกเซลเขา้ ดว้ ยกัน (ในแถวเดยี วกนั ) คา่ x คือจานวนเซล ROWSPAN=\"x\" ทรี่ วมกันตามแนวนอน คาส่ังผนวกแถวเขา้ ด้วยกัน ค่า x คือจานวนแถวที่ผนวกรวมกัน ตามแนวต้งั
วิชาการพัฒนาเวบ็ ไซตท์ างธรุ กจิ เบ้ืองตน้ BC10203 43 บทที่ 5 การเช่อื มโยงเว็บเพจ ความรู้เกย่ี วกบั การเชือ่ มโยง การเชอ่ื มโยงหนา้ เวบ็ เพจ คือ การกาหนดสว่ นของข้อความหรอื รูปภาพท่ตี ้องการ เพื่อเป็นจดุ เชอ่ื มโยงไปยังเน้ือหาจุดอ่นื ๆ ซ่งึ เนื้อหาท่ีจะเช่อื มโยงไปอาจจะอยภู่ ายในหน้าเดยี วกนั , คนละหน้ากัน กไ็ ด้ หรอื อาจจะอยู่คนละเวบ็ ไซตเ์ ลยก็ได้ การเชอ่ื มโยงหน้าเวบ็ เพจ ประกอบด้วยสว่ นประกอบท่ี สาคญั 2 สว่ น คอื 1. จุดที่ใช้สาหรบั เช่ือมโยง (Link) เป็นส่วนที่ใชเ้ ป็นจดุ เช่ือมโยง ไปยังเป้าหมายปลายทาง ซง่ึ อาจจะเปน็ รูปภาพ หรือข้อความก็ได้ 2. เปา้ หมาย (Target) เป็นส่วนปลายทางหรอื จดุ ที่ต้องการให้เช่ือมโยงมาถึง จะอยู่ส่วนใดของ เอกสารก็ได้แล้วแตผ่ ู้เขียนเวบ็ ไซตจ์ ะกาหนด ดังรูป รปู แบบการสรา้ งจุดเชื่อมโยงแบบต่างๆ ดังน้ี การลงิ คภ์ ายในเวบ็ เพจเดยี วกัน (Name Anchor) ในกรณีทห่ี นา้ เว็บเพจยาวหรอื มีหลายหวั ขอ้ ท่นี า่ สนใจต้องการให้ผ้ชู มไปถึงหัว ข้อนนั้ โดยสะดวกรวดเร็ว ดงั ขน้ั ตอน ตอ่ ไปน้ี กาหนดเป้าหมาย (Target) - คาสงั่ <A NAME=ชอื่ เป้าหมาย>....ขอ้ ความทีใ่ ช้เปน็ จดุ เชอ่ื มโยง....</A> เชน่ <A NAME=intro >ความร้เู บอ้ื งต้น</A>
วชิ าการพัฒนาเว็บไซตท์ างธุรกิจเบ้อื งต้น BC10203 44 กาหนดจุดเช่อื มโยง (Link) - คาสง่ั <A HREF=#ช่อื จุดเช่อื มโยงในข้อ 1>.....ข้อความ.....</A> เชน่ <A HERF=#intro>คลกิ ไปท่ีความรูเ้ บ่อื งต้น</A> คลกิ ดตู วั อย่าง การลงิ คภ์ ายในเว็บไซต์ (Web Page/File) เป็นการเช่ือมโยงไปยังหนา้ เวบ็ เพจอื่นภายใน ไซต์เดยี วกนั - คาสง่ั <A HERF=\"ชื่อแฟ้ม\" >.....ข้อความที่ใช้เป็นจุดเช่อื มโยง.....</A> เช่น <A HERF=chapter3.htm>คลกิ ตัวอย่าง</A> คลกิ ตวั อยา่ ง การลงิ ค์ไปยังเว็บไซต์อน่ื (URL/Website) เป็นการเช่อื มโยงไปยังหนา้ เวบ็ เพจหรือเว็บไซต์ อ่นื ดังตัวอยา่ งในหวั ข้อขา้ งล่างนี้ ดว้ ยการระบชุ ือ่ โดเมนเต็ม - คาส่ัง <A HERF=ชือ่ เว็บไซต์ >.....ขอ้ ความท่ีใชเ้ ป็นจุดเชื่อมโยง.....</A> เชน่ <A HERF=http://www.google.co.th>google</A> คลกิ ดูตัวอยา่ ง การลงิ คอ์ เี มล์ (e-Mail Link) เปน็ การสรา้ งจดุ เช่ือมโยงพิเศษที่ต้องการให้ผู้ชมคลิกเพื่อเปดิ โปรแกรมรบั ส่งอีเมลท์ ีม่ ใี นเคร่ืองเพ่ือเขียนข้อความ คลิกดรู ายละเอียด หรอื อาจจะแบง่ ประเภทการเชือ่ มโยง เปน็ ได้ ดังนี้ Text Links : ข้อความเปน็ จุดเช่ือมโยง การสร้าง ข้อความเป็นจุดเช่ือมโยงทาไดง้ ่ายๆ ด้วยการใชค้ าสั่ง <A src=\"ตาแหนง่ ว็บเพจ หรอื ชื่อเวบ็ เพจ\"> ข้อความ </A> ครอบข้อความน้ัน โดยในคาสงั่ เปดิ จะต้องมีการระบเุ ปา้ หมาย เวบ็ ไซต์ดงั ตวั อย่างด้านลา่ ง <html> ตวั อยา่ งการแสดงผลจาก <head> คาสัง่ ดา้ นซ้ายมือ <title> Text Links : การสรา้ งจุดเชื่อมโยง </title> </head> ตวั อย่างข้อความเชื่อมโยง <body> ตัวอยา่ งข้อความเช่ือมโยง<br><br> เชือ่ มโยงภายในเว็บไซต์ เชือ่ มโยงภายในเว็บไซต์<br> <A HREF=\"chapter3.htm\">คลกิ ทนี่ กี่ ลับไปบทที่ คลิกท่ีนกี่ ลบั ไปบทที่ 3 3</A><br> เชื่อมโยงภายนอกเว็บไซต์<br> เชือ่ มโยงภายนอกเว็บไซต์
วิชาการพฒั นาเวบ็ ไซต์ทางธุรกจิ เบือ้ งตน้ BC10203 45 <A HREF=\"http://www.kroocom.th.gs\">เวบ็ ไซตค์ รู เว็บไซต์ครวู นั ฉลอง วนั ฉลอง</A> </body> </html> ตัวอย่างขา้ งบนเมื่อนาเมาท์ไปช้ที ่ีข้อความจะปรากฏวา่ ลูกศรเปลย่ี นเปน็ รูปมือช้ี เมื่อคลกิ ที่ข้อความ น้ันกจ็ ะนาทางไปส่หู นา้ เวบ็ ไซตใ์ หม่คือบทที่ 3 ทนั ที ถ้าต้องการให้ช้ไี ปยงั เวบ็ ไซต์อน่ื ก็เปล่ียนแปลง จาก chapter3.htm เปน็ ช่อื เวบ็ ไซต์ได้เลย เชน่ <A HREF=\"http://www.kroocom.th.gs\">เวบ็ ไซตค์ รูวันฉลอง</A> Image Links : รูปภาพเป็นจุดเช่ือมโยง เราสามารถใชร้ ูปภาพแทนข้อความในการใชเ้ ป็นจดุ เช่ือมโยง โดยนาคาสั่ง <A> และ </A> ครอบที่คาสั่งแสดงรูปภาพ <IMG> เมื่อนาเอาเมาท์ไปวางบนรปู ภาพกจ็ ะเปลี่ยนเปน็ รปู มือช้ี และจะ สังเกตเหน็ เส้นขอบรอบรูป ถ้าไมต่ ้องการใหม้ เี สน้ ขอบต้องกาหนด border=\"0\" ดงั ตวั อยา่ ง ตวั อย่าง 1 : <A HREF=\"http://www.google.co.th\"><IMG SRC=\"images/chickenlittle_mojo1.gif\"></A> ตัวอยา่ ง 2 : <A HREF=\"chapter3.htm><IMG SRC=\"images/chickenlittle_mojo1gif\" border=\"0\"></A> ตวั อย่าง 1 : ตัวอย่าง 2 : e-Mail Links : เช่ือมโยงไปยังอีเมล์
วชิ าการพัฒนาเว็บไซตท์ างธรุ กจิ เบื้องต้น BC10203 46 ถ้าคณุ ท่องเน็ตบ่อยๆ จะพบวา่ บางจดุ เช่ือมโยงในหนา้ เว็บเพจเม่ือเราคลิกจะปรากฏว่า หนา้ ตา่ งโปรแกรม รบั -สง่ อีเมล์อย่าง Outlook Express พร้อมกับ New Message ถ้าสังเกตใหด้ จี ะพบว่าในช่อง To: จะมที ี่อยู่อเี มลข์ องจุดเช่ือมโยงมาปรากฏแลว้ โดยอตั โนมตั ิ โดยไม่ต้องปอ้ น ดว้ ยมอื เพยี งแต่เขยี นหัวเรอ่ื ง (subject) และเนือ้ ความในจดหมายให้ครบถ้วนแล้ว สามารถสง่ ออกไปได้ทนั ที การสร้างจุดเชือ่ มโยงแบบน้ีเปน็ ที่นยิ มสาหรบั ไว้รบั คาแนะนา ต/ิ ชมจากผเู้ ขา้ ชมเว็บไซต์ เพื่อ การนาไปพฒั นาให้ดยี ่ิงๆ ขึน้ ไป คาสง่ั ท่ีใช้เหมือนกบั คาสง่ั เช่อื มโยงอืน่ ๆ เพยี งแต่เปล่ยี นเป้าไปหาชื่ออีเมลโ์ ดยมีคา emailto:name@domain จะใชเ้ ปน็ ข้อความหรือรูปภาพเชื่อมโยงกไ็ ด้ ดังตวั อย่าง ลงิ ค์โดยใชข้ ้อความ : <A HREF=\"mailto:[email protected]\">ผจู้ ัดทา</A> ผจู้ ดั ทา ลงิ ค์โดยใช้รปู ภาพ : <A HREF=\"mailto:[email protected]\"><IMG SRC=\"images/email.gif\" border=\"0\"></A> Tip! คุณสามารถกาหนดหัวขอ้ อีเมล์โดยอัตโนมัติไปกบั จุดเชื่อมโยงโดยเพ่ิมเตมิ คา ส่งั เพียงเลก็ น้อย ดังนี้ <A HREF=\"mailto:[email protected]?subject=แนะนาเว็บ\">ผู้ดูแลเวบ็ ไซต์</A> ในหัวข้อจดหมายจะปรากฏข้อความ Subject : แนะนาเว็บ ใหโ้ ดย อตั โนมตั ิ ตวั อยา่ งเช่น ผูด้ แู ลเว็บไซต์
วชิ าการพฒั นาเว็บไซตท์ างธรุ กจิ เบื้องตน้ BC10203 47 บรรณานุกรม HTML เบอื้ งต้น. เข้าถึงจาก http://school.obec.go.th/phusing/html/
Search
Read the Text Version
- 1 - 47
Pages:
