บทท่ี 4 การพฒั นาเวบ็ เพจเบื้องต้นด้วยภาษา HTML การสร้างเว็บไซต์ให้ตอบสนองการทางานตามความต้องการของผูใ้ ช้น้ัน ผูพ้ ัฒนา เวบ็ ไซตต์ อ้ งใช้เทคโนโลยีในการสร้างเวบ็ ไซตท์ ่ีหลากหลาย รวมท้งั ภาษาท่ีใชพ้ ฒั นาก็ตอ้ งมีความ หลากหลายเพ่ือให้สามารถทางานตามที่ต้องการได้ ภาษา HTML เป็ นภาษาประเภทมาร์คอัพ (Markup) คือมีการแสดงขอ้ มูลและรูปแบบการแสดงผลเขา้ ดว้ ยกนั สามารถสร้างและพฒั นาไดง้ ่าย โดยผูใ้ ช้ไม่จาเป็ นตอ้ งมีความรู้ทางด้านการเขียนโปรแกรมมาก่อน หากเขียน TAG HTML การ แสดงผลอาจจะไม่เป็ นไปตามท่ีตอ้ งการ ปัจจุบนั น้ีภาษา HTML ถูกพฒั นาให้สามารถรองรับการ ทางานไดห้ ลากหลายอุปกรณ์โดยเฉพาะอุปกรณ์เคลื่อนท่ีอยา่ ง สมาร์ทโฟน แทปเล็ต นนั่ คือ HMTL เวอร์ช่ัน 5.0 ในบทน้ีผูเ้ รียนจะได้เรียนรู้เกี่ยวกับการใช้ภาษา HTML เบ้ืองต้น ซ่ึงประกอบด้วย รายละเอียดดงั น้ี 1. ลกั ษณะทว่ั ไปของภาษา HTML ภาษา HTML ย่อมาจากคาว่า Hyper Text Markup Language เป็ นภาษาที่ใช้ในการ กาหนดการแสดงผลขอ้ มูลภายในหน้าเวบ็ เพจ เพ่ือแสดงผลบนโปรแกรมบราวเซอร์ ประกอบดว้ ย คาส่ังที่อยู่ภายในเครื่องหมายวงเล็บ < > เรียกว่า TAG เป็ นส่วนควบคุมให้โปรแกรมบราวเซอร์ แสดงผลข้อมูลตามชื่อ TAG การเปิ ดการควบคุมคาสั่ง HTML ด้วย <TAG name>และปิ ดการ ควบคุมคาสั่ง </ TAG name>ใน TAG จะประกอบดว้ ย Attribute ซ่ึงเป็ นส่วนขยายของ TAG เป็ น การเพ่มิ คุณสมบตั ิของการแสดงผล TAG HTMLใหเ้ ป็นไปตามท่ีกาหนด 1.1 โครงสร้างภาษา HTML การสร้างเวบ็ เพจดว้ ยภาษา HTML ประกอบดว้ ยโครงสร้าง 3 ส่วน คือ 1) <HTML>...</HTML> กาหนดจุดเริ่มตน้ และจุดสิ้นสุดเวบ็ เพจภาษา HTML 2) <HEAD>…</HEAD> ส่วนหวั ของเวบ็ เพจ ประกอบดว้ ย TAG ดงั น้ี 2.1) <META> กาหนดขอ้ มูลเก่ียวกบั เวบ็ เพจ เช่น คาคน้ (KEYWORD) คาอธิบาย เว็บเพจ (Description) ชื่อผู้จัดทาเว็บไซต์ (Author) กาหนดอักขระภาษาของเว็บเพจและ กาหนดเวลารีเฟรชหนา้ เวบ็ เพจ (Refresh page) เป็นตน้ TAG META เป็น TAG เด่ียว ไมม่ ี TAG ปิ ด 2.2) <TITLE>…</TITLE> กาหนดชื่อของเวบ็ เพจ 2.3) <STYLE>…</STYLE> กาหนดรูปแบบ CSS การแสดงผลของเวบ็ เพจ 2.4) <LINK>…</LINK> เชื่อมโยงไฟล์ CSS จากภายนอก
74 2.5) <SCRIPT>…</SCRIPT> ควบคุมเวบ็ เพจดว้ ยภาษา JavaScript 3) <BODY>….</BODY> แสดงขอ้ มูลตา่ งๆ บนเวบ็ เพจอยภู่ ายใน TAG HTML โครงสร้างภาษา HTML แสดงดงั ตวั อยา่ งรูปที่ 4.1 <HTML> <HEAD> <TITLE>การสร้างเวบ็ เพจดว้ ย HTML</TITLE> <META NAME=\"KEYWORDS\" CONTENT=\"HTML, เวบ็ เพจ\"> <META NAME=\"DESCRIPTION\" CONTENT=\"มหาวทิ ยาลยั ราชภฏั เชียงราย\"> <META NAME=\"AUTHOR\" CONTENT=\"มหาวทิ ยาลยั ราชภฏั เชียงราย\"> <META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"TEXT/HTML; CHARSET=UTF-8\"> </HEAD> <BODY> ……………..TAG NAME และขอ้ มลู ต่างๆ ที่แสดงผลบนบราวเซอร์……………. </BODY> </HTML> รูปท่ี 4.1 โครงสร้างภาษา HTML จากรูปที่ 4.1 โครงสร้างภาษา HTML ประกอบดว้ ย TAG ดงั น้ี - <HTML>...</HTML> กาหนดจุดเริ่มตน้ และสิ้นสุดของเวบ็ เพจ - <HEAD>…</ HEAD> กาหนดส่วนรายละเอียดให้กบั เวบ็ เพจ อธิบายรายละเอียดแตล่ ะ TAG ในหวั ขอ้ การใชง้ าน TAG HEAD - <BODY>…. </BODY> ส่วนแสดงเน้ือหาต่างๆ ของเอกสาร HTML บนบราวเซอร์ จากรูปที่ 4.1 เม่ือแสดงผลบนบราวเซอร์จะไดด้ งั รูปที่ 4.2 รูปที่ 4.2 การแสดงผลบนบราวเซอร์โครงสร้างภาษา HTML จากรูปที่ 4.1
75 1.2 กฎการใช้ภาษา HTML กฎการใชภ้ าษา HTML ในการพฒั นาเวบ็ ไซตท์ ี่ผใู้ ชค้ วรทราบ มีดงั น้ี 1) คาสงั่ TAG HTML ตอ้ งอยภู่ ายใตเ้ คร่ืองหมาย < > เท่าน้นั 2) ช่ือ TAG HTML สามารถใช้ตวั อกั ษรตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ก็ได้ เช่น <title>, <Title>, <TITLE> เป็นตน้ 3) รูปแบบ TAG HTML จะแบ่งออกเป็ น 2 ส่วน คือ ส่วนเริ่มตน้ TAG เรียกว่า TAG เปิ ด และ ส่วนปิ ด TAG เรียกว่า TAG ปิ ด โดยจะมีเครื่องหมาย Slash (/) และ TAG HTML เป็ น TAG ตายตวั ดงั น้นั ผใู้ ชจ้ ะตอ้ งใชค้ าสั่งใหถ้ ูกตอ้ ง 4) บาง TAG อาจไม่มี TAG ปิ ด เรียกวา่ TAG เดี่ยว เช่น <BR>ใชส้ าหรับกาหนดใหม้ ี การข้ึนบรรทดั ใหม่ และ <HR> ใช้สาหรับสร้างเส้นคน่ั แนวนอนเพ่ือความสวยงามและช่วยจดั ระเบียบของเน้ือหา เป็นตน้ 1.3 ข้นั ตอนการพฒั นาเวบ็ ไซต์ด้วยภาษา HTML การพฒั นาเวบ็ ไซตด์ ว้ ยภาษา HTML มีข้นั ตอนการพฒั นาดงั น้ี 1) สร้างไฟลเ์ วบ็ เพจของเวบ็ ไซตด์ ว้ ยภาษา HTML สามารถสร้างไดห้ ลายวธิ ี เช่น - สร้างจากโปรแกรม Text Editor ต่างๆ เช่น ตวั อย่างเช่น Notepad, Notepad++, Atom, Vim, Sublime Text, Editplus, Brackets, Visual Studio Code เป็ นต้น จากน้ันบันทึกไฟล์ นามสกุลเป็ น HTML ไวท้ ่ีเครื่องคอมพิวเตอร์ โดยสร้าง Folder เพื่อจดั เก็บ เนื่องจากการพฒั นา เวบ็ ไซต์จะมีจานวนเวบ็ เพจหลายๆ หน้า ดงั น้ันเพื่อสามารถเรียกใช้ไฟล์ไดส้ ะดวก จึงควรสร้าง Folder ท่ีสื่อความหมายถึงเวบ็ ไซตท์ ่ีกาลงั จะพฒั นา - สร้างจากโปรแกรมสาเร็จรูปที่มีไวส้ าหรับสร้างเวบ็ เพจ วธิ ีน้ีผูใ้ ชไ้ ม่จาเป็ นตอ้ งมี ความรู้ภาษา HTML เนื่องจากมีการติดต่อกบั ผใู้ ชใ้ นลกั ษณะท่ีเป็นกราฟิ ก สามารถแสดงผลลพั ธ์ให้ เห็นทนั ทีโดยไม่ตอ้ งแสดงผลผ่านทางโปรแกรมบราวเซอร์ เรียกโปรแกรมประเภทน้ีวา่ WHAT YOU SEE IS WHAT YOUR GET หรื อ WYSIWYG ตัวอย่างเช่น Adobe Dreamweaver, Adobe Golive, WYSIWYG Web Builder, Microsoft Expression Web, Mobirise เป็นตน้ - ส ร้ างจาก เว็บ ไซ ต์ท่ี ให้ บ ริ ก ารส ร้ างเว็บ ตัวอ ย่างเช่ น www.wix.com, www.jimdo.com, www.weebly.com, www.boldgrid.com เป็นตน้ 2) ทดสอบการแสดงผลเวบ็ เพจบนบราวเซอร์ ดว้ ยการเปิ ดโปรแกรมบราวเซอร์จากน้นั เลือกเมนู File เลือก open คลิกเลือกไฟลท์ ่ีตอ้ งการใน Folder ของเวบ็ ไซต์
76 1.4 การแทรกคาอธิบายในภาษา HTML การพฒั นาเวบ็ ไซตด์ ว้ ยภาษา HTML ในบางกรณีจาเป็ นตอ้ งแทรกคาอธิบาย เพ่ืออธิบาย คาส่ัง เพ่ือคร้ังต่อไปจะไดเ้ ขา้ ใจไดง้ ่ายข้ึน คาอธิบายในเอกสาร HTML จะไม่ถูกมาแสดงบนเวบ็ เพจ โดยใช้สัญลกั ษณ์ <!--เพื่อกาหนดจุดเร่ิมตน้ คาอธิบาย และใชส้ ัญลกั ษณ์ --> เพื่อกาหนดจุดสิ้นสุด คาอธิบาย แสดงตวั อยา่ งการแทรกคาอธิบายดงั รูปที่ 4.3 <META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"TEXT/HTML; CHARSET=UTF-8\"> <!--สาหรับกาหนดการแสดงผลภาษาไทย--> รูปที่ 4.3 ตวั อยา่ งการแทรกคาอธิบายในภาษา HTML 1.5 การกาหนดสีในภาษา HTML การพฒั นาเว็บไซต์การกาหนดสีให้กับเว็บเพจเป็ นส่ิงสาคัญที่ทาให้เว็บเพจมีความ น่าสนใจ ดึงดูดผชู้ มให้เยย่ี มชม การกาหนดสีในภาษา HTML จะเกี่ยวขอ้ งกบั สีตวั อกั ษรที่แสดงบน หน้าเวบ็ เพจ สีตวั อกั ษรสาหรับการเชื่อมโยง สีตวั อกั ษรหลงั จากคลิกการเชื่อมโยง สีพ้ืนหลงั เวบ็ เพจ สีพ้ืนหลงั ตาราง สีเส้นขอบของตาราง สีพ้ืนหลงั ขอ้ ความ เป็ นตน้ โดยการกาหนดสีสามารถ กาหนดได้ 3 ลกั ษณะ คือ 1) ระบุชื่อสีในภาษาองั กฤษ เช่น RED, GREEN, BLUE, BLACK, WHITE เป็นตน้ 2) ใช้ฟังก์ช่ัน rgb( ) ซ่ึงเป็ นฟังก์ช่ันการผสมสีของสีหลัก 3 สี ได้แก่ สีแดง, สีเขียว และสีน้าเงิน โดยมีรูปแบบการใชง้ าน คือ rgb(red,green,blue) โดยคา่ ของ สี red คือสีแดง มีค่าระหวา่ ง 00-255 หรือ 0%-100% สี green คือสีเขียว มีค่าระหวา่ ง 00-255 หรือ 0%-100% สี blue คือสีน้าเงิน มีค่าระหวา่ ง 00-255 หรือ 0%-100% ตวั อยา่ งการใชง้ านเช่น rgb(255,0,0) คือสีแดง, rgb(0%,0%,100%) คือสีน้าเงิน 3) ระบุในรูปแบบเลขฐานสิบหก ประกอบด้วยตวั เลข 3 ชุดชุดละ 2 ตวั คือชุดที่ 1 แทนค่าสีแดง ชุดท่ี 2 แทนค่าสีเขียวและชุดท่ี 3 แทนค่าสีน้าเงิน โดยนาหน้าด้วยเครื่องหมาย # ตวั อย่างการใชง้ านเช่น #000000 คือสีดา, #FFFFF คือสีขาว, #00FF00 คือสีเขียว และ #0000FF คือ สีน้าเงิน
77 1.6 การแทรกอกั ขระพเิ ศษในภาษา HTML ในการแสดงขอ้ ความของเอกสาร HTML บางคร้ังจาเป็นตอ้ งแสดงอกั ขระบางตวั ท่ีตรงกบั TAG HTML ดงั น้นั ภาษา HTML จึงกาหนดรูปแบบการแสดงอกั ขระพเิ ศษดงั ตารางที่ 4.1 ตารางที่ 4.1 แสดงอกั ขระพิเศษในภาษา HTML อกั ขระ สัญลกั ษณ์ทใ่ี ช้แทน อกั ขระ สัญลกั ษณ์ทใ่ี ช้แทน < < ± > > · · \" " £ £ ช่องวา่ ง € € & & ¥ ¥ © © « « ® ® » » ¢ ¢ é é ÷ 1.7 การอ้างองิ ทอ่ี ยู่ไฟล์ การพฒั นาเวบ็ ไซตจ์ าเป็ นอยา่ งย่งิ ท่ีจะตอ้ งนารูปภาพ ท่ีเป็ นภาพนิ่ง ภาพเคล่ือนไหว ไฟล์ วดิ ีโอ หรือเสียงต่างๆ มาประกอบในเวบ็ ไซต์ รวมถึงการเชื่อมโยงหนา้ เวบ็ เพจหน่ึงไปยงั อีกหน้า เวบ็ เพจหน่ึงของเวบ็ ไซต์ โดยไฟล์ท่ีนามาประกอบเหล่าน้ีจะตอ้ งถูกจดั เก็บไวใ้ น Folder เดียวกนั กบั เวบ็ ไซต์ และการนาไปใช้ประกอบในเวบ็ ไซต์จะมีการอา้ งอิงท่ีอยไู่ ฟล์ ซ่ึงการอา้ งอิงที่อยู่ไฟล์ หรือเรียกวา่ Path สามารถอา้ งอิงได้ 2 แบบคือ 1) การอา้ งอิง แบบ Absolute Path เป็ นการอา้ งอิงที่อยู่ File โดยตรง เริ่มจาก Folder Root ใชเ้ ครื่องหมาย Slash (/) ระบุตาแหน่ง Folder ท่ีตอ้ งการเขา้ ถึงไฟล์ เช่นไฟล์ Page1.HTML อยู่ ใน Folder C:\\website\\content การอา้ งอิงคือ website/content/Page1.HTML 2) การอา้ งอิงแบบ Relative Path เป็ นการอา้ งอิงในลกั ษณะท่ีสัมพนั ธ์กบั Path อื่นๆ โดยใชส้ ัญลกั ษณ์ในการเปรียบเทียบตาแหน่ง 2 แบบ คือ แบบท่ี 1 จุดหน่ึงจุด . ใชแ้ ทนตาแหน่ง Folder ปัจจุบนั
78 แบบท่ี 2 จุดสองจุด .. ใช้แทนตาแหน่ง Folder ก่อนหน้า เช่น Folder content เก็บที่ C:\\website\\content การอา้ งถึงจะระบุ .. เพ่ือเป็ นการอา้ งอิง Folder website หากตอ้ งการระบุ ไฟล์รูปภาพ Pic1.png ที่อยู่ใน Folder C:\\website\\img เพ่ือนาไฟล์มาใช้ในไฟล์ท่ีเก็บอยู่ใน Folder C:\\website\\content สามารถอา้ งอิงแบบ Relative Path คือ ../img/Pic1.png 2. การใช้งาน TAG HEAD TAG HEAD เป็ นส่วนหัวเว็บเพจ ใช้สาหรับกาหนดรายละเอียดให้กับเว็บเพจ โดย ประกอบดว้ ย TAG ที่อยภู่ ายใต้ TAG HEAD มีดงั น้ี 2.1 TAG META กาหนดขอ้ มูลเกี่ยวกบั เวบ็ เพจ โดยมีรูปแบบการใชง้ านดงั น้ี <META NAME=\"ชื่อ TAG Meta\" CONTENT=\"รายละเอียด TAG Meta\"> สามารถกาหนดลกั ษณะการใชง้ าน ดงั ตารางท่ี 4.2 ตารางท่ี 4.2 กาหนดลกั ษณะใหก้ บั TAG META Attribute ค่าทกี่ าหนดให้ คาอธิบาย NAME KEYWORD กาหนดคาคน้ ของเวบ็ เพจ DESCRIPTION กาหนดคาอธิบายของเวบ็ เพจ AUTHOR กาหนดขอ้ มูลผพู้ ฒั นาเวบ็ ไซต์ CONTENT ชนิดตวั อกั ษร กาหนดรายละเอียดขอ้ มูลเกี่ยวกบั เวบ็ เพจ HTTP-EQUIV ชนิดตวั อกั ษร Refresh กาหนดการรีเฟรชหน้าเว็บเพจ, content-type กาหนดอกั ขระภาษาของเวบ็ เพจ จากตารางที่ 4.2 สามารถนาไปใชง้ านไดด้ งั น้ี - <META NAME=\"KEYWORDS\" CONTENT=\"HTML, เวบ็ เพจ\"> กาหนดคาคน้ ของ เวบ็ เพจเป็ นคาวา่ HTML และเวบ็ เพจ เพื่อให้เวบ็ ไซตเ์ ครื่องมือสืบคน้ ขอ้ มูล (Search Engine) นาไป จดั เก็บในฐานขอ้ มูล หากคาคน้ มากกวา่ หน่ึงคา จะคน่ั ดว้ ยเคร่ืองหมาย , - <META NAME=\"DESCRIPTION\" CONTENT=\"มหาวิทยาลัยราชภัฏเชียงราย\"> กาหนดคาอธิบายเวบ็ เพจเป็นคาวา่ “มหาวทิ ยาลยั ราชภฏั เชียงราย” - <META NAME=\"AUTHOR\" CONTENT=\"มหาวิทยาลยั ราชภฏั เชียงราย\"> กาหนด ช่ือผจู้ ดั ทาเวบ็ เพจเป็นคาวา่ “มหาวทิ ยาลยั ราชภฏั เชียงราย”
79 - <META HTTP-EQUIV=\"REFRESH\" CONTENT=\"5\"> กาหนดให้มีการรีเฟรชเว็บ เพจทุกๆ 5 วนิ าที - <META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"TEXT/HTML; CHARSET = UTF-8\"> กาหนดอกั ขระภาษาของเวบ็ เพจเป็นภาษาไทย รหสั UTF-8 2.2 TAG TITLE กาหนดช่ือเร่ืองของเวบ็ เพจ โดยมีรูปแบบการใชง้ านดงั น้ี <TITLE>ชื่อเรื่องเวบ็ เพจ</ TITLE> เช่น ต้องการกาหนดชื่อเร่ื องของเว็บเพจเป็ นคาว่า “สานักวิชาคอมพิวเตอร์และ เทคโนโลยสี ารสนเทศ” สามารถเขียนคาสงั่ ไดด้ งั น้ี <TITLE>สานกั วชิ าคอมพวิ เตอร์และเทคโนโลยสี ารสนเทศ</ TITLE> 2.3 TAG STYLE กาหนดรูปแบบ CSS ในการแสดงผลของเวบ็ เพจ โดยมีรูปแบบการใชง้ านดงั น้ี <STYLE> CSS ควบคุมการแสดงผล </STYLE> เช่น ตอ้ งการกาหนดรูปแบบ CSS ให้กบั เอกสาร โดยกาหนดให้สีตวั อกั ษรในเวบ็ เพจเป็ น สีน้าเงิน สามารถเขียนคาสัง่ ไดด้ งั น้ี <STYLE>BODY{COLOR:BLUE;}</STYLE> 2.4 TAG LINK สาหรับเช่ือมโยงไฟล์ CSS จากภายนอกโดยมีรูปแบบการใชง้ านดงั น้ี <LINK REL=\"STYLESHEET\" HREF=\"ช่ือไฟล/์ URL\"> เช่น ตอ้ งการอา้ งอิงไฟล์ TOP.CSS ที่อยใู่ น Folder CSS สามารถเขียนคาส่งั ไดด้ งั น้ี <LINK REL=\"STYLESHEET\" HREF=\"CSS/TOP.CSS\"> 2.5 TAG SCRIPT สาหรับการควบคุมเวบ็ เพจดว้ ยภาษา JavaScript โดยมีรูปแบบการใชง้ านดงั น้ี <SCRIPT> คาสั่ง JavaScript ควบคุมเวบ็ เพจ</SCRIPT> ตวั อยา่ งเช่น เม่ือเปิ ดเวบ็ เพจใหแ้ สดงขอ้ ความ “ยนิ ดีตอ้ นรับ” สามารถเขียนคาสง่ั ไดด้ งั น้ี <SCRIPT> alert(\"ยนิ ดีตอ้ นรับ\");</SCRIPT> ถา้ เป็ นการอา้ งอิงไฟล์ JavaScript ท่ีจดั เกบ็ ขา้ งนอกเวบ็ เพจ เช่นไฟล์ ชื่อ MIN.JS ท่ีจดั เก็บ ไวใ้ น Folder JS สามารถเขียนคาสง่ั ไดด้ งั น้ี <SCRIPT SRC=\"JS/MIN.JS\"></SCRIPT>
80
81 3. การใช้งาน TAG <BODY> TAG <BODY> ใชส้ าหรับกาหนดคุณลกั ษณะของเน้ือหาต่างๆ ที่แสดงบนเวบ็ เพจ เช่น สี พ้นื หลงั ของเวบ็ เพจ ภาพพ้นื หลงั ของเวบ็ เพจ ระยะห่างจากขอบบราวเซอร์ของเน้ือหาในเวบ็ เพจ ซ่ึง สามารถกาหนดไดเ้ ฉพาะระยะห่างจากขอบทางดา้ นซ้าย และดา้ นบนเท่าน้นั สีของขอ้ ความทวั่ ไป ภายในเวบ็ เพจ สีของขอ้ ความที่ใชส้ าหรับการเช่ือมโยงเวบ็ เพจ โดยมีรูปแบบการใชง้ านดงั น้ี <BODY BGCOLOR=\"สี \" BACKGROUND=\"ช่ื อไฟล์/URL\" TEXT=\"สี \" LINK=\"สี \" VLINK=\"สี\" ALINK=\"สี\" > ...เน้ือหาท่ีอยใู่ นเวบ็ เพจ … </BODY> สามารถกาหนดลกั ษณะใหก้ บั TAG <BODY> ไดด้ งั ตารางท่ี 4.3 ตารางที่ 4.3 การกาหนดลกั ษณะ ใหก้ บั TAG <BODY> Attribute ค่าทกี่ าหนดให้ คาอธิบาย BGCOLOR สี กาหนดสีพ้ืนหลงั ของเวบ็ เพจ BACKGROUND กาหนดภาพพ้ืนหลงั ของเวบ็ เพจ็ LEFTMARGIN ช่ือไฟล/์ URL กาหนดระยะห่ างของเน้ื อหาในเว็บเพจจากขอบ ระยะห่าง บราวเซอร์ดา้ นซา้ ย ค่าเป็นตวั เลขหรือ % TOPMARGIN กาหนดระยะห่ างของเน้ื อหาในเว็บเพจจากขอบ ระยะห่าง บราวเซอร์ดา้ นบน คา่ เป็นตวั เลขหรือ % TEXT กาหนดสีใหก้ บั ขอ้ ความทว่ั ไปภายในเวบ็ เพจ LINK สี กาหนดสีขอ้ ความก่อนการคลิกการเช่ือมโยง VLINK สี กาหนดสีขอ้ ความหลงั จากท่ีมีการคลิกการเช่ือมโยง ALINK สี กาหนดสีขอ้ ความขณะที่คลิกการเช่ือมโยง สี จากตารางท่ี 4.3 สามารถนาไปใชง้ านไดด้ งั น้ี - <BODY BGCOLOR= \"yellow\">…</BODY> กาหนดสีพ้ืนหลงั เป็นสีเหลือง - <BODY BGCOLOR= \"#FF0000\">…</BODY> กาหนดสีพ้นื หลงั เป็นสีแดง - <BODY BGCOLOR= \"rgb(0,255,255)\">…</BODY> กาหนดสีพ้นื หลงั เป็นสีฟ้า
82 - <BODY BACKGROUND=\"PIC1.JPG\">…</BODY> ก าห น ด รู ป ภ าพ ไ ฟ ล์ ชื่ อ PIC1.JPG เป็นพ้นื หลงั เวบ็ เพจ - <BODY LEFTMARGIN=\"100PX\" TOPMARGIN=\"100PX\">…</BODY> กาหนด ระยะห่างเน้ือหาจากขอบบราวเซอร์ดา้ นซา้ ย 100PX และจากขอบบราวเซอร์ดา้ นบน 100PX - <BODY TEXT=\"BLACK\">…</BODY>กาหนดสีขอ้ ความในเวบ็ เพจเป็นสีดา - <BODY TEXT=\"BLACK\" LINK=\"PINK\" VLINK=\"GRAY\" ALINK=\"RED\">… </BODY> กาหนดสีขอ้ ความเวบ็ เพจเป็ นสีดา กาหนดสีขอ้ ความสาหรับการเชื่อมโยงเป็ นสีชมพู กาหนดขอ้ ความสาหรับการเช่ือมโยงหลงั จากคลิกเช่ือมโยงเป็ นสีเทา และกาหนดสีขอ้ ความสาหรับ การเช่ือมโยงขณะคลิกเป็นสีแดง รายละเอียดการสร้างการเช่ือมโยงจะกล่าวในหวั ขอ้ การเชื่อมโยง ตวั อยา่ งการกาหนดลกั ษณะใหก้ บั TAG <BODY> ดงั รูปท่ี 4.4 <HTML><HEAD><TITLE>มหาวทิ ยาลยั ราชภฏั เชียงราย</TITLE> <META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"TEXT/HTML; CHARSET=UTF-8\"></HEAD> <BODY TEXT=\"#000000\" BGCOLOR=\"#FFFFFF\" LINK=\"#0000FF\" VLINK=\"#00FFFF\" ALINK=\"#FFFFFF\" BACKGROUND=\"bg.JPG\"> <h1>วสิ ยั ทศั นข์ องมหาวทิ ยาลยั ราชภฏั เชียงราย</h1> <h2>เป็ นสถาบนั อุดมศึกษาช้นั นาเพอื่ การพฒั นาทอ้ งถ่ินและอนุภมู ิภาคลุ่มน้าโขง</h2> <A HREF=\"http://www.crru.ac.th\">เวบ็ ไซตม์ หาวทิ ยาลยั ราชภฏั เชียงราย</A> </BODY></HTML> รูปที่ 4.4 ตวั อยา่ งการกาหนดลกั ษณะใหก้ บั TAG <BODY> จากรูปที่ 4.4 เม่ือแสดงผลบนบราวเซอร์จะไดด้ งั รูปที่ 4.5 รูปท่ี 4.5 การแสดงผลบนบราวเซอร์ตวั อยา่ งการกาหนดลกั ษณะใหก้ บั TAG <BODY> จากรูปที่ 4.4
83 จากรูปท่ี 4.5 เว็บเพจมีพ้ืนหลงั เป็ นรูปภาพ สีขอ้ ความโดยทว่ั ไปของเว็บเพจเป็ นสีดา ขอ้ ความ “เวบ็ ไซตม์ หาวทิ ยาลยั ราชภฏั เชียงราย” เป็นสีน้าเงิน เมื่อคลิกเลือกขอ้ ความจะเปล่ียนเป็นสี ขาว หลงั จากขอ้ ความถูกคลิกเลือกไปแลว้ จะถูกเปลี่ยนเป็นสีฟ้า 4. การจัดการข้อความ ขอ้ ความมีไวส้ าหรับนาเสนอเร่ืองราวต่างๆ บนเวบ็ ไซต์ การจดั การขอ้ ความด้วยภาษา HTML สามารถกระทาไดห้ ลากหลายวธิ ี ดงั น้ี 4.1 การกาหนดตวั อกั ษรหัวเรื่องขนาดใหญ่ การใชต้ วั อกั ษรขนาดใหญ่เพ่ือกาหนดใหเ้ ป็นหวั เรื่องของเน้ือหาน้นั จะช่วยทาใหเ้ น้ือหามี ความน่าสนใจยงิ่ ข้ึน ในภาษา HTML คาส่ังท่ีใชใ้ นการกาหนดตวั อกั ษรหวั เร่ืองขนาดใหญ่ คือ TAG Hn โดย n แทนตวั เลข 1 –6 โดยที่ 1 คือขนาดใหญ่สุด และ 6 คือขนาดเล็กสุด รูปแบบคาสง่ั ดงั น้ี <Hn Align = \"ตาแหน่ง\"> … Heading Text … </Hn> โดยท่ี Align เป็ นการกาหนดตาแหน่งการจัดวางหัวเรื่องบนเว็บเพจ ได้แก่ LEFT, CENTER หรือ RIGHT ตวั อยา่ งการใชง้ านดงั รูป 4.6 <HTML><HEAD><TITLE>การสร้างเวบ็ เพจดว้ ย HTML</TITLE> <META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"TEXT/HTML; CHARSET=UTF-8\"><HEAD> <BODY TEXT=\"#000066\" BGCOLOR=\"#FFCC99\" LINK=\"#0000FF\" VLINK=\"#00FFFF\" ALINK=\"#FFFFFF\"> <H1 ALIGN=\"CENTER\">COMPUTER</H1> <H2 ALIGN=\"LEFT\">COMPUTER</H2> <H3 ALIGN=\"RIGHT\">COMPUTER</H3> <H4 ALIGN=\"CENTER\">COMPUTER</H4> <H5 ALIGN=\"LEFT\">COMPUTER</H5> <H6 ALIGN=\"RIGHT\">COMPUTER</H6> </BODY></HTML> รูปท่ี 4.6 ตวั อยา่ งการกาหนดตวั อกั ษรหวั เรื่องขนาดใหญ่และการจดั วาง จากรูปท่ี 4.6 เม่ือแสดงผลบนบราวเซอร์จะไดด้ งั รูปที่ 4.7
84 รูปที่ 4.7 แสดงผลตวั อยา่ งการกาหนดตวั อกั ษรหวั เรื่องขนาดใหญ่และการจดั วางจากรูปที่ 4.6 4.2 การกาหนดรูปแบบอกั ษร การกาหนดรูปแบบตวั อกั ษรใหก้ บั เวบ็ เพจถือวา่ เป็นอีกหน่ึงปัจจยั ท่ีสาคญั ท่ีทาให้ เวบ็ ไซตม์ ีความน่าสนใจยง่ิ ข้ึน เช่น การกาหนดชนิดตวั อกั ษร ขนาด และสี ซ่ึงในภาษา HTML สามารถกระทาได้ โดยใช้ TAG Font โดยมีรูปแบบการใชง้ านดงั น้ี <FONT FACE=\"ชนิดตวั อกั ษร\" SIZE =\"ขนาด\" COLOR=\"สี\"> ขอ้ ความ </FONT> สามารถกาหนดลกั ษณะในการแสดงผลใหก้ บั TAG Font ดงั ตารางที่ 4.4 ตารางท่ี 4.4 การกาหนดลกั ษณะในการแสดงผลใหก้ บั TAG Font Attribute ค่าทก่ี าหนดให้ คาอธิบาย FACE ชนิดตวั อกั ษร กาหนดชนิดตวั อกั ษร เช่น tahoma, AngsanaUPC SIZE กาหนดขนาดตัวอักษรตัวเลขระหว่าง 1-7 โดย 1 คือ ขนาด ขน าดเล็กท่ี สุ ด แล ะ 7 คือขน าดให ญ่ ที่ สุ ด โดย COLOR บราวเซอร์กาหนดค่าเริ่มตน้ ขนาดตวั อกั ษรเท่ากบั 3 สี กาหนดสีใหก้ บั ตวั อกั ษร จากตารางที่ 4.4 สามารถนาไปใชง้ านไดด้ งั น้ี
85 - <FONT FACE=\"TAHOMA\">ข้ อ ค ว า ม </FONT> ก าห น ด ช นิ ด ตัว อัก ษ ร เป็ น TAHOMA - <FONT SIZE =\"7\"> ขอ้ ความ</FONT> กาหนดขนาดตวั อกั ษรใหญ่ 7 - <FONT COLOR=\"PINK\">ขอ้ ความ</FONT> กาหนดสีตวั อกั ษรเป็นสีชมพู - <FONT FACE=\"MS Sans Serif\" SIZE =\"1\" COLOR=\"BLUE\">ข้อ ค วาม </FONT> กาหนดชนิดตวั อกั ษรเป็น MS Sans Serif ขนาดตวั อกั ษรเลก็ ท่ีสุด สีตวั อกั ษรเป็นสีน้าเงิน 4.3 การกาหนดลกั ษณะตัวอกั ษร การกาหนดลกั ษณะตวั อกั ษรในภาษา HTML ประกอบดว้ ย TAG ต่างๆ ดงั น้ี - <I>…</I> กาหนดตวั อกั ษรตวั เอียง - <B>…</B> กาหนดตวั อกั ษรตวั หนา - <U>…</U>กาหนดตวั อกั ษรขีดเส้นใต้ - <SUP>…</SUP> กาหนดตวั อกั ษรตวั ยก - <SUB>…</SUB> กาหนดตวั อกั ษรตวั หอ้ ย - <S>…</S> หรือ <STRIKE>…</STRIKE> กาหนดตวั อกั ษรขีดเส้นทบั - <PRE></PRE> กาหนดตาแหน่งการแสดงผลขอ้ ความตามที่กาหนด - <BLOCKQUOTE>...</BLOCKQUOTE> จัดกลุ่มข้อความ ให้มีระยะห่างจากขอบ ดา้ นซา้ ยและดา้ นขวา เพอ่ื ใหข้ อ้ ความมีความน่าสนใจ - <P>…</P> ย่อหน้าใหม่โดยเวน้ 1 บรรทดั กาหนดตาแหน่งการจดั วางข้อความด้วย ลกั ษณะ Align มีค่าเท่ากบั LEFT, RIGHT, CENTER หรือ JUSTIFY - <DIV>…</DIV> จดั ตาแหน่งการจดั วางขอ้ ความด้วยการกาหนดลกั ษณะ Align เป็ น LEFT, RIGHT หรือ CENTER - <BR> ข้ึนบรรทดั ใหม่ - <CENTER>...</CENTER> จดั วางองค์ประกอบต่างๆ ไวก้ ่ึงกลางหน้าบราวเซอร์ เช่น ขอ้ ความ รูปภาพ ตาราง ฯลฯ ตวั อยา่ งการใชง้ าน TAG กาหนดลกั ษณะตวั อกั ษรในภาษา HTML ดงั รูปที่ 4.8
86 <HTML><HEAD> <TITLE>การสร้างเวบ็ เพจดว้ ย HTML</TITLE> <META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"TEXT/HTML; CHARSET=UTF-8\"></HEAD> <BODY BGCOLOR=\"GHOSTWHITE\"> <FONT COLOR=\"BLUE\" SIZE=\"6\" FACE=\"CORDIAUPC\"><B><U>สารคดีน่ารู้:</U></B></FONT> <I>เร่ืองไผไ่ มพ้ ้นื บา้ นมีค่าดุจทองควรตอ้ งถนอมรักษา </I> <DIV ALIGN=\"RIGHT\">เรื่องไผไ่ มพ้ ้ืนบา้ นมีคา่ ดุจทองควรตอ้ งถนอมรักษา </DIV> <PRE> ราไพพรรณ แกว้ สุริยะ</PRE> <CENTER>ไมไ้ ผบ่ างคนนิยมเรียกส้นั ๆ วา่ <SUP>ไผ่ เพยี งคาเดียวโดดๆ </SUP> </CENTER> <BLOCKQUOTE> นบั เป็ นพรรณไมท้ ่ีมคี วามผกู พนั และเก่ียวกบั วถิ ีวชิ ีวติ ของคนไทยอยา่ งใกลน้ านปั การ กล่าวไดว้ า่ เกือบ ทุกคน ทุกวนั ตอ้ งหยบิ จบั ไมไ้ ผข่ ้นึ มาใชส้ อย นบั แตช่ ิ้นอนั นอ้ ยกระจ๋ิวหลิวจนถึงของใหญโ่ ต มโหฬาร </BLOCKQUOTE> <P ALIGN=\"CENTER\"> <SUB>หยบิ ยกคนเดียวไม่ไหว คุณเช่ือไหม? </SUB> <BR> <STRIKE>ฉะน้นั หากจะเปรียบคุณค่าของไผม่ ีค่ายง่ิ ประดุจทองน้นั สมค่าไดท้ ีเดียว</STRIKE> </P> </BODY></HTML> รูปที่ 4.8 ตวั อยา่ งการใชง้ าน TAG กาหนดลกั ษณะตวั อกั ษรในภาษา HTML จากรูปที่ 4.8 เมื่อแสดงผลบนบราวเซอร์จะไดด้ งั รูปที่ 4.9 รูปท่ี 4.9 แสดงผลตวั อยา่ งการใชง้ าน TAG กาหนดลกั ษณะตวั อกั ษรในภาษา HTML จากรูปท่ี 4.8
87 4.4 การใช้เส้นค่ันระหว่างบรรทดั การใชเ้ ส้นคนั่ ระหวา่ งบรรทดั เพ่ือแบ่งเขตขอ้ ความในภาษา HTML สามารถกระทาได้ โดยใช้ TAG <HR> หรือเรียกวา่ เส้นขีดคนั่ แนวนอน (Horizontal Rule) มีรูปแบบการใชง้ านดงั น้ี <HR ALIGN=\"ตาแหน่ง\" SIZE=\"ความหนา\" WIDTH=\"ความกวา้ ง\" COLOR=\"สี\"> สามารถกาหนดลกั ษณะในการแสดงผล ใหก้ บั TAG HR ดงั ตารางที่ 4.5 ตารางท่ี 4.5 การกาหนดลกั ษณะในการแสดงผลใหก้ บั TAG HR Attribute ค่าทกี่ าหนดให้ คาอธิบาย ALIGN ตาแหน่ง กาหนดตาแหน่งการจดั วางหนา้ เวบ็ เพจ ไดแ้ ก่ CENTER, LEFT หรือ RIGHT NOSHADE ความหนา ไม่แสดงเป็ นสามมิติ SIZE ความกวา้ ง กาหนดความหนาใหก้ บั เส้น คา่ เป็นตวั เลขหรือ % WIDTH กาหนดคา่ ความกวา้ งของเส้น คา่ เป็นตวั เลขหรือ % COLOR สี กาหนดสีใหก้ บั เส้น ตวั อยา่ งการกาหนดลกั ษณะในการแสดงผลใหก้ บั TAG HR ดงั รูปท่ี 4.10 <HR SIZE=\"2PX\" WIDTH=\"50%\" COLOR=\"DarkSlateBlue\"> <HR ALIGN=\"RIGHT\" SIZE=\"2PX\" WIDTH=\"200PX\" COLOR=\"Green\" NOSHADE> <HR ALIGN=\"LEFT\" SIZE=\"1PX\" WIDTH=\"200PX\" COLOR=\"Pink\" NOSHADE> รูปที่ 4.10 ตวั อยา่ งการกาหนดลกั ษณะในการแสดงผลใหก้ บั TAG HR จากรูปท่ี 4.10 เมื่อแสดงผลบนบราวเซอร์จะไดด้ งั รูปท่ี 4.11 รูปที่ 4.11 แสดงผลตวั อยา่ งการกาหนดลกั ษณะในการแสดงผลใหก้ บั TAG HR จากรูปท่ี 4.10
88 4.5 การกาหนดรูปแบบข้อความแบบลาดบั รายการ การแสดงขอ้ ความในรูปแบบของรายการ จะช่วยทาให้เวบ็ เพจมีความเป็ นระเบียบและมี ความน่าสนใจมากข้ึน โดยการกาหนดรูปแบบขอ้ ความแบบรายการแบ่งออกเป็น 3 รูปแบบ ดงั น้ี 1) Ordered List เป็ นการแสดงรายการแบบเรียงลาดับ มีรูปแบบการใช้งาน TAG ดงั น้ี <OL TYPE= \"ชนิดของการเรียงลาดบั \" START=\"คา่ เริ่มตน้ ของลาดบั \"> <LI>รายการท่ีแสดงในลิสต์ </LI> </OL> โดยที่ ชนิดของการเรียงลาดบั ประกอบดว้ ย - \"1\" เป็นลาดบั แบบตวั เลข 1,2,3,…หากไมร่ ะบุจะถูกกาหนดใชร้ ูปแบบน้ี - \"A\" เป็นลาดบั แบบ A,B,C,…(ตวั พมิ พใ์ หญ)่ - \"a\" เป็นลาดบั แบบ a,b,c,... (ตวั พิมพเ์ ล็ก) - \"I\" เป็นลาดบั แบบ I,II,III,IV,… (เลขโรมนั แบบตวั พิมพใ์ หญ่) - \"i\"เป็นลาดบั แบบ i,ii,iii,iv,… (เลขโรมนั แบบตวั พมิ พเ์ ล็ก) ตวั อยา่ งการใชง้ าน TAG OL ดงั รูปที่ 4.12 <HTML><HEAD><TITLE>การสร้างเวบ็ เพจดว้ ย HTML</TITLE> <META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"TEXT/HTML; CHARSET=UTF-8\"></HEAD> <BODY BGCOLOR=\"GHOSTWHITE\"> <OL TYPE=\"1\" START=\"1\">เคลด็ ลบั ที่ 1 วธิ ีทาใหห้ นา้ ใส <LI>ลา้ งหนา้ ใหส้ ะอาด แลว้ เช็ดใหแ้ หง้ </LI> <LI>จากน้นั ก็ใช้ \"โยเกิร์ต\"พอกที่หนา้ บางๆ</LI> </OL> <OL TYPE=\"i\" START=\"1\">เคลด็ ลบั ที่ 2 สูตรหนา้ ใสไร้สิว <LI>น้าผ้งึ 1 ชอนโตะ๊ </LI> <LI>ใข่ไก่ (เฉพาะใข่ขาว 1 ชอ้ นโต๊ะ)</LI> </OL></BODY></HTML> รูปท่ี 4.12 ตวั อยา่ งการใชง้ าน TAG OL
89 จากรูปที่ 4.12 เมื่อแสดงผลบนบราวเซอร์จะไดด้ งั รูปท่ี 4.13 รูปท่ี 4.13 แสดงผลตวั อยา่ งการใชง้ าน TAG OL จากรูปที่ 4.12 2) Unordered List หรือ เป็ นการแสดงรายการแบบที่ไม่ได้เรียงลาดับ นั่นคือการ แสดงสัญญลกั ษณ์แสดงหวั ขอ้ ยอ่ ยกากบั อยขู่ า้ งหนา้ ขอ้ ความ โดยมีรูปแบบการใชง้ าน TAG ดงั น้ี <UL TYPE= \"ชนิดสญั ลกั ษณ์แสดงหวั ขอ้ ยอ่ ย\"> <LI>รายการที่แสดงในลิสต์ </LI> </UL> โดยท่ี ชนิดสญั ลกั ษณ์แสดงหวั ขอ้ ยอ่ ยประกอบดว้ ย - \"DISC\" รูปวงกลมทึบ หากไมร่ ะบุจะถูกกาหนดใหใ้ ชร้ ูปแบบน้ีโดยอตั โนมตั ิ - \"SQUARE\" รูปส่ีเหลี่ยมทึบ - \"CIRCLE\" รูปวงกลมโปร่งใส ตวั อยา่ งการใชง้ าน TAG UL ดงั รูปท่ี 4.14 <HTML><HEAD><TITLE>การสร้างเวบ็ เพจดว้ ย HTML</TITLE> <META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"TEXT/HTML; CHARSET=UTF-8\"></HEAD> <BODY BGCOLOR=\"GhostWhite\"> <UL TYPE=\"CIRCLE\">เคลด็ ลบั ที่ 1 สูตรหนา้ ใสไร้สิว <LI>ลา้ งหนา้ ใหส้ ะอาด แลว้ เช็ดใหแ้ หง้ </LI> <LI TYPE=\"SQUARE\">นาผา้ ท่ีชุบน้าอุ่นโป๊ ะท่ีบริเวณใบหนา้ </LI> </UL> <UL TYPE=\"DISC\">เคลด็ ลบั ท่ี 2 สูตรหนา้ ใสไร้สิว <LI>น้าผ้งึ 1 ชอนโต๊ะ</LI> <LI TYPE=\"CIRCLE\">ใข่ไก่ (เฉพาะใข่ขาว 1 ชอ้ นโตะ๊ )</LI> </UL></BODY></HTML>
90 รูปท่ี 4.14 ตวั อยา่ งการใชง้ าน TAG UL จากรูปที่ 4.14 เม่ือแสดงผลบนบราวเซอร์จะไดด้ งั รูปท่ี 4.15 รูปที่ 4.15 แสดงผลตวั อยา่ งการใชง้ าน TAG UL จากรูปท่ี 4.14 3) Definition List หรือ รายการแบบมีคานิยาม เป็ นการแสดงรายการแบบท่ีมีหัวขอ้ ใหญ่ หรือช่ือเรื่องก่อน แลว้ หลงั จากน้นั จะมีคาอธิบายรายละเอียดสาหรับชื่อเร่ืองหรือหัวขอ้ น้นั ๆ โดยมีรูปแบบการใชง้ าน TAG ดงั น้ี <DL> <DT>หวั เร่ืองของแตล่ ะรายการยอ่ ย</DT> <DD>รายละเอียดในรายการยอ่ ย</DD> </DL> ตวั อยา่ งการใชง้ าน TAG UL ดงั รูปที่ 4.16 <HTML><HEAD><TITLE>การสร้างเวบ็ เพจดว้ ย HTML</TITLE> <META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"TEXT/HTML; CHARSET=UTF-8\"></HEAD> <BODY BGCOLOR=\"GhostWhite\"> <DL> ขอ้ ผดิ พลาดในการดาเนินธุรกิจ ของ SMEs <DT>ชอบทาตามคนอ่ืน</DT> <DD>เร่ิมตน้ ต้งั แต่เร่ืองการคน้ หาศกั ยภาพ SMEs ส่วนใหญ่มกั ไม่คน้ หาศกั ยภาพที่แทจ้ ริงแลว้ ดงั น้นั สินคา้ และ/หรือ บริการของ SMEs ไทย จึงไม่สามารถสร้างความแตกตา่ งได<้ /DD> <DT>ขาดการวเิ คราะห์ความเป็ นไปได<้ /DT> <DD>ไมว่ เิ คราะห์ถึงความเป็ นไปได้ ทาใหธ้ ุรกิจเกิดความเสี่ยง</DD> </DL></BODY></HTML> รูปที่ 4.16 ตวั อยา่ งการใชง้ าน TAG DL
91 จากรูปที่ 4.16 เมื่อแสดงผลบนบราวเซอร์จะไดด้ งั รูปท่ี 4.17 รูปท่ี 4.17 แสดงผลตวั อยา่ งการใชง้ าน TAG DL จากรูปที่ 4.16 5. การแทรกรูปภาพ รูปภาพในการตกแต่งเวบ็ ไซตน์ ้นั ถือวา่ เป็ นส่ิงสาคญั อีกอยา่ งในการทาใหเ้ วบ็ ไซตม์ ีความ น่าสนใจและสามารถส่ือความหมายไดช้ ดั เจนมากกวา่ ตวั อกั ษร การนารูปภาพมาแสดงในเอกสาร HTML มีรูปแบบการใชง้ านดงั น้ี <IMG SRC=\"ช่ือไฟล/์ URL\"> โดยสามารถกาหนดลกั ษณะใหก้ บั TAG IMG ไดด้ งั ตารางท่ี 4.6 ตารางที่ 4.6 การกาหนดลกั ษณะใหก้ บั TAG IMG Attribute ค่าทก่ี าหนดให้ คาอธิบาย SRC ช่ือไฟล/์ URL กาหนดช่ือไฟลห์ รือ URL ของภาพ ALT กาหนดคาอธิบายเมื่อนาเมาส์ไปวางเหนือภาพ BORDER ขอ้ ความ กาหนดความหนาของเส้นขอบรูปภาพ ค่าเป็ นตวั เลข ความหนา โดย 0 หมายถึงไมม่ ีเส้นขอบ ALIGN กาหนดตาแหน่งการจดั วางรูปภาพกบั ขอ้ ความไดแ้ ก่ ตาแหน่ง TOP, BOTTOM, MIDDLE, LEFT หรือRIGHT WIDTH กาหนดคา่ ความกวา้ งของรูปภาพ คา่ เป็นตวั เลขหรือ % HEIGHT ความกวา้ ง กาหนดคา่ ความสูงของรูปภาพ ค่าเป็นตวั เลขหรือ % ความสูง ตวั อยา่ งการใชง้ าน TAG IMG ดงั รูปท่ี 4.18
92 <HTML><HEAD><TITLE>การสร้างเวบ็ เพจดว้ ย HTML</TITLE> <META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"TEXT/HTML; CHARSET=UTF-8\"> </HEAD> <BODY> <P><IMG SRC=\"IMG/0.JPG\" ALT=\"LOGO\" ALIGN=\"TOP\" WIDTH=\"50\"> โลโก<้ /p> <P><IMG SRC=\"IMG/1.JPG\" ALT=\"WATRONGKHUN\" ALIGN=\"BOTTOM\" WIDTH=\"20%\"> วดั ร่องข่นุ </P> <P><IMG SRC=\"IMG/2.JPG\" ALT=\"WATRONGKHUN\" ALIGN=\"MIDDLE\" HEIGHT=\"50\"> วดั ร่องขนุ่ </P> <P><IMG SRC=\"IMG/3.JPG\" ALT=\"DOITUNG\" ALIGN=\"RIGHT\" HEIGHT=\"20%\">ดอยตุง</p> <P><IMG SRC=\"IMG/4.JPG\" ALT=\"DOITUNG\" ALIGN=\"LEFT\" HEIGHT=\"20%\">ดอยตงุ </p> </BODY> </HTML> รูปที่ 4.18 ตวั อยา่ งการใชง้ าน TAG IMG จากรูปที่ 4.18 เมื่อแสดงผลบนบราวเซอร์จะไดด้ งั รูปที่ 4.19 รูปที่ 4.19 แสดงผลตวั อยา่ งการใชง้ าน TAG IMG จากรูปท่ี 4.18
93 6. การเชื่อมโยง การเชื่อมโยงเอกสารจากที่หน่ึงไปยงั อีกที่หน่ึง เป็ นสิ่งสาคัญอย่างย่ิงของการพฒั นา เวบ็ ไซต์ อาจจะเป็นการเช่ือมโยงจากเวบ็ เพจท่ีอยใู่ นหนา้ เดียวกนั จากจุดหน่ึงไปยงั จุดหน่ึง หรือจาก เวบ็ เพจหน่ึงไปยงั อีกเวบ็ เพจในเวบ็ ไซตเ์ ดียวกนั หรือจากเวบ็ เพจไปยงั เวบ็ ไซตอ์ ื่นที่ตอ้ งการ จึงเป็ น ที่มาของการเช่ือมโยงกนั ทว่ั โลก โดยการเช่ือมโยงสามารถเช่ือมโยงจากขอ้ ความ รูปภาพ เมนูการ ทางานตา่ งๆ โดยมีรูปแบบการใชง้ านดงั น้ี <A HREF=\"URL หรือ ปลายทาง\"> ขอ้ ความหรือรูปภาพหรือป่ ุมท่ีใชเ้ ชื่อมโยง </A> โดยสามารถกาหนดลกั ษณะใหก้ บั TAG A ไดด้ งั ตารางที่ 4.7 ตารางท่ี 4.7 การกาหนดลกั ษณะใหก้ บั TAG A Attribute ค่าทก่ี าหนดให้ คาอธิบาย HREF ตาแหน่งปลายทาง HREF ย่อมาจาก Hypertext Reference ใช้ระบุตาแหน่งปลาย ทางการเช่ือมโยง เป็นช่ือไฟลห์ รือช่ือเวบ็ ไซต์ TARGET _BLANK เปิ ดหนา้ เวบ็ เพจปลายทางในหนา้ ต่างบราวเซอร์ใหม่ _PARENT เปิ ดหนา้ เวบ็ เพจปลายทางในเฟรมเดียวกบั ที่เช่ือมโยง _SELF เปิ ดหนา้ เวบ็ เพจปลายทางในเฟรมหลกั _TOP เปิ ดเวบ็ เพจปลายทางในหนา้ ต่างบราวเซอร์เดิมแบบเตม็ หนา้ การเชื่อมโยงสามารถเชื่อมโยงโดยใชข้ อ้ ความ หรือ รูปภาพ หรือป่ ุม เพ่ือเป็ นสัญลกั ษณ์ บ่งบอกถึงการเช่ือมโยง ประเภทของการเช่ือมโยงสามารถแบ่งเป็ น 4 รูปแบบ คือการเช่ือมโยง ภายในเวบ็ ไซตเ์ ดียวกนั การเช่ือมโยงภายนอกเวบ็ ไซต์ การเช่ือมโยงไปยงั อีเมล์และการเช่ือมโยง เพ่ือดาวน์โหลดไฟลโ์ ดยมีรายละเอียดดงั น้ี 1) การเช่ือมโยงภายในเว็บไซต์เดียวกัน คือการเชื่อมโยงไฟล์ต่างๆ ที่อยู่ภายใน เว็บไซต์เดียวกัน ซ่ึงแบ่งออกเป็ น สองประเภทย่อย คือการเช่ือมโยงต่างแฟ้มเอกสาร และการ เช่ือมโยงภายในแฟ้มเอกสาร โดยแตล่ ะประเภทมีรายละเอียดดงั น้ี
94 1.1) การเช่ือมโยงต่างแฟ้มเอกสาร เป็ นการเชื่อมโยงไปยงั ไฟล์อ่ืนๆ ท่ีอยู่ใน เวบ็ ไซตเ์ ดียวกนั โดยมีรูปแบบการใชง้ านดงั น้ี <A HREF=\"ชื่อไฟลท์ ี่ทาการเชื่อมโยง\" TARGET=\"รูปแบบการเปิ ดเวบ็ เพจ\"> ขอ้ ความหรือรูปภาพหรือป่ ุมท่ีใชเ้ ชื่อมโยง </A> การเช่ือมโยงแบบน้ีจะใชว้ ธิ ีการอา้ งอิง Path แบบ Absolute Path หรือ Relative Path ก็ได้ ข้ึนอยกู่ บั วา่ ในเวบ็ ไซตจ์ ะมีการจดั การไฟล์อยา่ งไร เช่นตอ้ งการเชื่อมโยงขอ้ ความ CRRU ไปยงั ไฟล์ ชื่อ PAGE1.HTML เขียนคาสัง่ ไดด้ งั น้ี <A HREF=\"PAGE1.HTML\" TARGET=\"BODY1\"> CRRU </A> 1.2) การเชื่อมโยงภายในแฟ้มเอกสาร เป็ นการเช่ือมโยงไปยงั ส่วนอื่นๆ ของ เอกสาร ส่วนใหญ่จะใชก้ รณีที่ไฟลเ์ อกสาร HTML มีความยาวมาก โดยมีรูปแบบการใชง้ านดงั น้ี <A HREF=\"#ช่ือที่ตอ้ งการเชื่อมโยงไป\"> ขอ้ ความเช่ือมโยง </A> หลกั การคือตอ้ งมีการกาหนด NAME ใหก้ บั ขอ้ มูลท่ีจะทาการเช่ือมโยงปลายทางก่อน จึง สร้างจุดเชื่อมโยงการต้งั ชื่อมีรูปแบบดงั น้ี <A NAME=\"ชื่อท่ีต้งั ไวเ้ พอ่ื ที่จะทาการเช่ือมโยงมาหา\"> ขอ้ ความ </A> ตวั อยา่ งการเช่ือมโยงภายในเวบ็ ไซตเ์ ดียวกนั ดงั รูปที่ 4.20 <HTML><HEAD><TITLE>ประเภทของคอมพวิ เตอร์</TITLE> <META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"TEXT/HTML; CHARSET=UTF-8\"></HEAD><BODY> <H1><A href=\"PAGE1.HTML\">ส่วนประกอบของคอมพิวเตอร์</A></H1><H1>ประเภทของคอมพิวเตอร์</H1> <ul>คอมพวิ เตอร์ตามขนาดและประสิทธิภาพของการประมวลผลของเคร่ือง ไดเ้ ป็น 4 ประเภท <li><A href=\"#TYPE1\">ซูเปอร์คอมพวิ เตอร์</A></li> <li><A href=\"#TYPE2\">เมนเฟรมคอมพิวเตอร์</A></li> <li><A href=\"#TYPE3\">มนิ ิคอมพวิ เตอร์</A></li> <li><A href=\"#TYPE4\">ไมโครคอมพิวเตอร์</A></li> </ul><IMG SRC=\"IMG/c4.JPG\" WIDTH=\"50%\"> <DIV WIDTH=\"40%\"> <IMG ALIGN=\"LEFT\" SRC=\"IMG/c1.JPG\" WIDTH=\"30%\"> <H2><A NAME=\"TYPE1\">ซูเปอร์คอมพิวเตอร์ (Supercomputer) </A></H2>
95 รูปที่ 4.20 ตวั อยา่ งการเช่ือมโยงภายในเวบ็ ไซตเ์ ดียวกนั <P>เป็ นคอมพิวเตอร์ท่ีมีขนาดใหญ่ มีประสิทธิภาพในการประมวลผลและมีความเร็วสูง ตลอดจนราคาแพงมาก ปกติ ซูเปอร์คอมพิวเตอร์จะถูกพฒั นาข้ึนโดยเฉพาะ และมกั จะถูกนาไปใช้ในงานวิจัยและพฒั นาทางวิทยาศาสตร์และ เทคโนโลยีท่ีสาคญั ตลอดจนการประมวลผลและการควบคุมงานท่ีมีความซับซ้อน ต้องการความถูกตอ้ งและความ ละเอียดอ่อนสูง</P></DIV> <DIV WIDTH=\"50%\"><IMG ALIGN=\"RIGHT\" SRC=\"IMG/c2.JPG\" WIDTH=\"28%\"> <H2><A NAME=\"TYPE2\">เมนเฟรมคอมพวิ เตอร์ (MainFRAME Computer)</A></H2> <P>เป็ นคอมพิวเตอร์ท่ีมีหน่วยความจาและระบบประมวลผลขอ้ มูลขนาดใหญ่ สามารถต่อเขา้ กบั อุปกรณ์รับ-ส่งขอ้ มูล ไดเ้ ป็ นจานวนมาก เนื่องจากมีศกั ยภาพสูง และมีความสามารถในการทางานท่ีซับซอ้ นในเวลาท่ีรวดเร็ว ปกติเมนเฟรม จะถูกนาไปใชใ้ นหน่วยงานขนาดใหญ่ที่ทางานแบบรวมศูนย์ ต้องการความถูกตอ้ งและแน่นอนในการประมวลผล ขอ้ มูล เช่น ธนาคาร ธุรกิจทางการเงิน โรงงานอุตสาหกรรมขนาดใหญ่ หน่วยงานราชการท่ีตอ้ งประมวลผลข้อมูล จ า น ว น ม า ก เ ป็ น ต้ น </P></DIV><DIV WIDTH=\"40%\"><IMG ALIGN=\"LEFT\" SRC=\"IMG/C3.JPG\" WIDTH=\"50%\"> <H2><A NAME=\"TYPE3\">มนิ ิคอมพวิ เตอร์ (Minicomputer)</A></H2> <P>เป็ นคอมพิวเตอร์ท่ีมีประสิทธิภาพเหมาะสมกบั งานสารสนเทศ สาหรับองคก์ รท่ีตอ้ งการการประมวลผลขอ้ มูลใน ระดับปานกลาง ประกอบกับราคาที่ต่ากว่าเมนเฟรมคอมพิวเตอร์ ทาให้องค์กรขนาดกลางถึงขนาดใหญ่นิยมนา มนิ ิคอมพวิ เตอร์ไปใชง้ าน</P></DIV> <DIV WIDTH=\"40%\"><IMG ALIGN=\"RIGHT\" SRC=\"IMG/C4.JPG\" WIDTH=\"50%\"> <H2><A NAME=\"TYPE4\">ไมโครคอมพวิ เตอร์ (Microcomputer)</A></H2> <P>หรือคอมพวิ เตอร์ส่วนบุคคล (Personal Computer) เป็ นระบบคอมพวิ เตอร์ที่มีขนาดเลก็ มากเม่ือเปรียบเทียบ กบั ท้งั 3 ระบบที่กล่าวมา ในระยะแรกคอมพิวเตอร์ส่วนบุคคลจะมีศกั ยภาพค่อนขา้ งต่า ทาให้ไม่สามารถนาไป ประยกุ ตใ์ นงานทางธุรกิจที่ซบั ซอ้ นและหลากหลายทางไดอ้ ยา่ งมีประสิทธิภาพ คอมพิวเตอร์ส่วนบุคคลมกั จะ ถูกนาไปใชเ้ ล่นเกมต่างๆ ทาตารางเวร และประมวลผลงานส่วนบุคคล แต่เนื่องจากความสะดวกในการใชง้ าน ทาใหเ้ ครื่องคอมพวิ เตอร์ขนาดเลก็ ไดร้ ับความนิยมเพ่ิมข้ึนเรื่อยๆ โดยคอมพิวเตอร์ส่วนบุคคลไดก้ ระตุน้ ใหเ้ กิด การเปล่ียนแปลงอยา่ งมากในการใชง้ านคอมพิวเตอร์ ซ่ึงความพิวเตอร์ส่วนบุคคลมีส่วนทาให้บุคคลทว่ั ไปมี ความคุน้ เคยและเห็นประโยชนจ์ ากการใชง้ านคอมพิวเตอร์</P></DIV></BODY></HTML> รูปท่ี 4.20 (ต่อ) ตวั อยา่ งการเชื่อมโยงภายในเวบ็ ไซตเ์ ดียวกนั จากรูปที่ 4.20 ตวั อย่างการเชื่อมโยงภายในเวบ็ ไซต์เดียวกนั เมื่อแสดงผลบนบราวเซอร์ แสดงดงั รูปท่ี 4.21
96 รูปท่ี 4.21 แสดงผลตวั อยา่ งการเช่ือมโยงภายในเวบ็ ไซตเ์ ดียวกนั โดยการใชง้ าน TAG A จากตวั อยา่ ง รูปที่ 4.20 จากรูปท่ี 4.21 ประกอบดว้ ยขอ้ ความที่ใชส้ าหรับการเชื่อมโยงดงั น้ี - “ส่วนประกอบของคอมพิวเตอร์” เช่ือมโยงไปยงั เวบ็ เพจ PAGE1.HTML เป็ นการ เชื่อมโยงตา่ งแฟ้มเอกสาร - “ซูเปอร์คอมพิวเตอร์”, “เมนเฟรมคอมพิวเตอร์”, “มินิคอมพิวเตอร์” และ “ไมโค คอมพิวเตอร์” เป็ นการเช่ือมโยงภายในแฟ้มเอกสาร โดยเม่ือคลิกขอ้ ความบราวเซอร์จะดึงเน้ือหาท่ี ภายในเว็บเพจเดียวกนั ท่ีเกี่ยวขอ้ งมาแสดงให้เห็นบนจอบราวเซอร์ จากตวั อย่างเพ่ือให้เห็นการ เช่ือมโยงอย่างชัดเจน จึงแสดงบราวเซอร์แบบย่อขนาด เม่ือคลิกเลือก “ซูปเปอร์คอมพิวเตอร์” เน้ือหาที่เกี่ยวขอ้ งกบั ซูปเปอร์คอมพิวเตอร์จะถูกดึงมาแสดงบนจอบราวเซอร์ตวั อยา่ งดงั รูปท่ี 4.22
97 รูปที่ 4.22 แสดงผลตวั อยา่ งเม่ือคลิกเลือกขอ้ ความ “ซูเปอร์คอมพิวเตอร์” จากรูปที่ 4.21 2) การเช่ือมโยงภายนอกเว็บไซต์ คือการเช่ือมโยงไปยงั เอกสารอื่นๆ หรือเว็บเพจ อ่ืนๆ ที่อยู่ภายนอกเว็บไซต์ โดยจะตอ้ งระบุโปรโตคอลท่ีใช้ในการเช่ือมโยงคือ HTTP โดยมี รูปแบบการใชง้ านดงั น้ี <A HREF=\"HTTP://URLที่ตอ้ งการจะเชื่อมโยงไป\"> ขอ้ ความหรือรูปภาพ </A> ตวั อยา่ งการเช่ือมโยงภายนอกเวบ็ ไซต์ ดงั รูปที่ 4.23 <HTML><HEAD> <TITLE>การสร้างเวบ็ เพจดว้ ย HTML</TITLE> <META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"TEXT/HTML; CHARSET=UTF-8\"></HEAD> <BODY BGCOLOR=\"GHOSTWHITE\"> <A HREF=\"HTTP://WWW.GOOGLE.COM\"><IMG SRC=\"GOOGLE.png\" width=\"10%\"></A> <A HREF=\"HTTP://WWW.YAHOO.COM\"><IMG SRC=\"yahoo.jpg\" width=\"10%\"></A> <BR><A HREF=\"HTTP://WWW.CRRU.AC.TH\">มหาวทิ ยาลยั ราชภฏั เชียงราย</A></BODY></HTML> รูปท่ี 4.23 ตวั อยา่ งการเชื่อมโยงภายนอกเวบ็ ไซต์
98 จากรูปท่ี 4.23 เม่ือแสดงผลบนบราวเซอร์แสดงดงั รูปท่ี 4.24 รูปที่ 4.24 แสดงผลตวั อยา่ งการเชื่อมโยงภายนอกเวบ็ ไซตโ์ ดยการใชง้ าน TAG A ในรูปที่ 4.23 จากรูปท่ี 4.24 ตวั อยา่ งการเช่ือมโยงภายนอกเวบ็ ไซต์ - เม่ือคลิกเลือกรูปท่ี 1 จะเชื่อมโยงไปยงั เวบ็ ไซต์ WWW.GOOGLE.COM - เมื่อคลิกเลือกรูปท่ี 2 จะเชื่อมโยงไปยงั เวบ็ ไซต์ WWW.YAHOO.COM - เมื่อคลิกข้อความ “มหาวิทยาลัยราชภัฏเชียงราย” จะเชื่อมโยงไปยงั เว็บไซต์ WWW.CRRU.AC.TH 3) การเชื่อมโยงไปยงั อีเมล์ เป็ นการเช่ือมโยงไปยงั อีเมล์ผูท้ ี่ต้องการติดต่อ โดยมี รูปแบบการใชง้ านดงั น้ี <A HREF=\"MAILTO:ชื่อ E-MAIL ADDRESS ของผทู้ ่ีตอ้ งการติดต่อ\"> ขอ้ ความหรือรูปภาพ </A> ตวั อยา่ งการเช่ือมโยงไปยงั อีเมล์ ดงั รูปที่ 4.25 <HTML><HEAD> <TITLE>การสร้างเวบ็ เพจดว้ ย HTML</TITLE> <META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"TEXT/HTML; CHARSET=UTF-8\"></HEAD> <BODY BGCOLOR=\"GHOSTWHITE\"> <A HREF=\"MAILTO:[email protected]\">ส่ง E-Mail ติดต่อผสู้ อน</A></BODY></HTML> รูปท่ี 4.25 ตวั อยา่ งการเชื่อมโยงไปยงั อีเมล์โดยการใชง้ าน TAG A จากรูปท่ี 4.25 เม่ือแสดงผลบนบราวเซอร์แสดงดงั รูปท่ี 4.26
99 รูปท่ี 4.26 แสดงผลตวั อยา่ งการเช่ือมโยงไปยงั อีเมล์ โดยการใชง้ าน TAG A ในรูปที่ 4.25 จากรูปท่ี 4.26 โดยเมื่อผูใ้ ช้คลิกเลือกข้อความ “ส่ง E-Mail ติดต่อผู้สอน” จะปรากฏ หนา้ ตา่ งโปรแกรม Microsoft Outlook เพ่อื ส่งเมลถ์ ึงอีเมลท์ ี่ระบุไว้ 4) การเช่ือมโยงเพ่ือดาวน์โหลดไฟล์ เป็ นการเช่ือมโยงไปยงั ไฟล์ท่ีตอ้ งการให้ผูใ้ ช้ ดาวน์โหลด อาจจะเป็ นไฟล์ที่สร้างจากโปรแกรม Microsoft word, Microsoft Power point, Microsoft Excel เป็ นต้น ซ่ึงจะเป็ นไฟล์ที่ไม่สามารถแสดงผลด้วยโปรแกรมบราวเซอร์ โดยมี รูปแบบการใชง้ านดงั น้ี <A HREF=\"ไฟลท์ ี่ตอ้ งการใหด้ าวนโ์ หลด\"> ขอ้ ความหรือรูปภาพ </A> ตวั อยา่ งการเชื่อมโยงเพือ่ ดาวน์โหลดไฟล์ ดงั รูปที่ 4.27 <HTML><HEAD> <TITLE>การสร้างเวบ็ เพจดว้ ย HTML</TITLE> <META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"TEXT/HTML; CHARSET=UTF-8\"></HEAD> <BODY BGCOLOR=\"GHOSTWHITE\"> <ul>ไฟลเ์ น้ือหารายวชิ า CP3707 การพฒั นาเวบ็ ไซต์ <li><A HREF=\"file1.docx\">เอกสาร บทที่ 1</A> <A HREF=\"file2.PPTX\">ตวั อยา่ ง บทที่ 1</A></li> <li><A HREF=\"file2.xls\">เอกสาร บทที่ 2</A></li> <li><A HREF=\"file3.docx\">เอกสาร บทที่ 3</A></li> </ul></BODY></HTML> รูปที่ 4.27 ตวั อยา่ งการเช่ือมโยงเพ่อื ดาวน์โหลดไฟล์ โดยการใชง้ าน TAG A จากรูปท่ี 4.27 เม่ือแสดงผลบนบราวเซอร์แสดงดงั รูปท่ี 4.28
100 รูปที่ 4.28 แสดงผลตวั อยา่ งการเช่ือมโยงเพ่ือดาวนโ์ หลดไฟล์ โดยการใชง้ าน TAG A ในรูปที่ 4.27 จากรูปที่ 4.28 เมื่อคลิกเลือกขอ้ ความ “เอกสาร บทท่ี 1” จะปรากฏหน้าต่างดงั รูปที่ 4.29 โดยคลิกเลือก Open เพื่อเปิ ดไฟล์ หรือคลิกเลือก Save หรือ Save as เพ่ือบนั ทึกไฟล์จดั เก็บไวใ้ น เคร่ืองคอมพวิ เตอร์ รูปท่ี 4.29 หนา้ ตา่ งใหเ้ ลือกเปิ ดไฟลห์ รือบนั ทึกไฟลท์ ่ีเช่ือมโยง 7. การสร้างตาราง ในการออกแบบเวบ็ ไซต์เพ่ือให้มีความสวยงามและน่าสนใจ จาเป็ นต้องมีการจดั วาง ขอ้ ความ รูปภาพ ต่างๆ ให้อยใู่ นตาแหน่งที่เหมาะสม ซ่ึงการสร้างตารางจะเป็ นประโยชน์อยา่ งมาก การสร้างตารางมีรูปแบบการใช้ TAG Table ดงั น้ี <TABLE> <TR><TD>.........</TD><TD>.........</TD></TR> <TR><TD>.........</TD><TD>.........</TD></TR> </TABLE> สามารถกาหนดลกั ษณะใหก้ บั TAG Table ดงั ตารางที่ 4.8
101 ตารางที่ 4.8 การกาหนดลกั ษณะใหก้ บั TAG Table Attribute ค่าทก่ี าหนดให้ คาอธิบาย ALIGN ตาแหน่ง กาหนดตาแหน่งการจดั วางตารางให้อยู่ในตาแหน่ง LEFT, CENTER หรือ RIGHT ของบราวเซอร์ BGCOLOR สี กาหนดสีพ้ืนหลงั ของตาราง BORDER ความหนา กาหนดขนาดความหนาของเส้นขอบตาราง ค่าเป็ น ตวั เลข โดย 0 หมายถึงไม่มีเส้นขอบ BORDERCOLOR สี กาหนดสีเส้นขอบของตาราง CELLPADDING ระยะห่าง กาหนดระยะห่างระหว่างขอบเซลล์กับเน้ือหาใน เซลล์ คา่ เป็นตวั เลขหรือ % CELLSPACING ระยะห่าง กาหนดระยะห่างระหวา่ งเซลล์ ค่าเป็นตวั เลขหรือ % WIDTH ความกวา้ ง กาหนดความกวา้ งของตาราง กาหนดเป็ นค่าตวั เลข หรือเป็น % ตามขนาดความกวา้ งของบราวเซอร์ HEIGHT ความสูง กาหนดความสูงของตาราง สามารถกาหนดเป็ นค่า ตวั เลข หรือเป็น % ตามขนาดความสูงของบราวเซอร์ ตารางจะประกอบด้วยแถวและคอลัมน์ การสร้างแถวจะใช้ TAG TR ซ่ึงจะอยู่ภายใต้ TAG Table โดยสามารถกาหนดลกั ษณะใหก้ บั TAG TR ดงั ตารางที่ 4.9 ตารางท่ี 4.9 การกาหนดลกั ษณะใหก้ บั TAG TR Attribute ค่าทก่ี าหนดให้ คาอธิบาย ALIGN ตาแหน่ง กาหนดตาแหน่งการจดั วางเน้ือหาในแถวให้อยชู่ ิดขอบ ของเซลล์ LEFT, CENTER, RIGHT หรือ JUSTIFY BGCOLOR สี กาหนดสีพ้นื หลงั ของแถวในตาราง VALIGN ตาแหน่ง กาหนดตาแหน่งเน้ือหาในแนวต้ังของเซลล์ TOP, MIDDLE หรือ BOTTOM HEIGHT ความสูง กาหนดความสูงของแถวในตารางเป็นคา่ ตวั เลข
102 การสร้างคอลมั น์ในตารางจะใช้ TAG TD ซ่ึงจะอยภู่ ายใต้ TAG TR โดยสามารถกาหนด ลกั ษณะใหก้ บั TAG TD ดงั ตารางท่ี 4.10 ตารางที่ 4.10 การกาหนดลกั ษณะใหก้ บั TAG TD ใน TAG TR Attribute ค่าทก่ี าหนดให้ คาอธิบาย ALIGN ตาแหน่ง กาหนดตาแหน่งการจดั วางเน้ือหาในเซลล์ให้อยูช่ ิดขอบของ เซลล์ LEFT, CENTER, RIGHT หรือ JUSTIFY BGCOLOR สี กาหนดสีพ้ืนหลงั ของเซลล์ VALIGN ตาแหน่ง กาหนดตาแหน่งเน้ือหาในแนวต้งั ของเซลล์ TOP, MIDDLE หรือ BOTTOM COLSPAN จานวนเซลล์ กาหนดจานวนเซลลท์ ่ีตอ้ งการผสานเซลล์ ROWSPAN จานวนเซลล์ กาหนดจานวนแถวที่ตอ้ งการผสานเซลล์ HEIGHT กาหนดความสูงของเซลล์ค่าเป็ นตวั เลขหรือ % ตามขนาด ความสูง ความสูงของตาราง WIDTH กาหนดความกวา้ งของเซลล์ สามารถกาหนดเป็ นค่าตวั เลข ความกวา้ ง หรือเป็น % ตามขนาดความกวา้ งของตาราง ตวั อยา่ งการใชง้ าน TAG TABLE ดงั รูปท่ี 4.30 <TABLE BORDER=\"5\" BGCOLOR=\"FFFFFF\" ALIGN=\"CENTER\" CELLPADDING=\"5\" CELLSPACING=\"5\" WIDTH=\"20%\" HEIGHT=\"20%\"> <TR><TD ALIGN=\"CENTER\">มหาวทิ ยาลยั ราชภฏั เชียงราย</CENTER> </TD></TR> <TR><TD ALIGN=\"CENTER\"><IMG SRC=\"IMG/0.JPG\" WIDTH=\"100\" HEIGHT=\"100\"></TD></TR> <TR><TD ALIGN=\"CENTER\">สีประจามหาวิทยาลยั </TD></TR> <TR><TD ALIGN=\"CENTER\">สีเทา-เเสด</TD></TR> <TR><TD ALIGN=\"CENTER\"><IMG SRC=\"IMG/9.JPG\" WIDTH=\"100%\" HEIGHT=\"50%\"></CENTER></TD></TR></TABLE> รูปท่ี 4.30 ตวั อยา่ งการใชง้ าน TAG Table จากรูปท่ี 4.30 เมื่อแสดงผลบนบราวเซอร์จะไดด้ งั รูปที่ 4.31
103 รูปท่ี 4.31 การแสดงผลการใชง้ าน TAG Table จากรูปท่ี 4.30 จากรูปที่ 4.31 ดา้ นซ้ายตารางจะอยูก่ ่ึงกลางบราวเซอร์ เนื่องจากใน TAG TABLE กาหนด ลกั ษณะ ALIGN=CENTER โดยตารางมีความกวา้ งเท่ากบั 20% ของจอบราวเซอร์ ถึงแมจ้ ะปรับ ขนาดจอบราวเซอร์ใหเ้ ล็กลงดงั รูปดา้ นขวาขนาดของตารางก็จะปรับตาม เนื่องจากกาหนดความสูง และความกวา้ งของตารางในรูปแบบของ % นอกจากน้ีในบางกรณี เพ่ือให้การจดั วางหน้าเว็บเพจมีความสวยงาม อาจจะตอ้ งมีการ ผสานเซลลข์ องตาราง ดงั ตวั อยา่ งในรูปท่ี 4.32 การผสานเซลลข์ องตาราง <TABLE BORDER=\"2\" BORDERCOLOR=\"BLUE\" CELLPADDING=\"10\" CELLSPACING=\"5\" ALIGN=\"CENTER\"> <TR ALIGN=CENTER><TD COLSPAN=3>AAAAAA </TD></TR> <TR ALIGN=CENTER> <TD ROWSPAN=3>BBBB<BR><IMG SRC=\"PIC1.PNG\" WIDTH=\"220\" HEIGHT=\"230\"></TD> <TD>CCCC</TD><TD>DDDD</TD></TR> <TR ALIGN=CENTER><TD>EEEE</TD><TD>FFFF</TD></TR> <TR ALIGN=CENTER><TD COLSPAN=2>GGGG</TD> </TR> </TABLE> รูปท่ี 4.32 ตวั อยา่ งการผสานเซลลต์ าราง จากรูปที่ 4.32 เม่ือแสดงผลบนบราวเซอร์จะไดด้ งั รูปท่ี 4.33
104 รูปท่ี 4.33 แสดงผลตวั อยา่ งการผสานเซลลต์ าราง จากรูปท่ี 4.32 8. การแบ่งพืน้ ทจ่ี อบราวเซอร์ ในการสร้างเวบ็ เพจเพ่ือให้สามารถใช้งานไดง้ ่ายและสดวก ในบางกรณีอาจมีการแบ่ง พ้ืนที่จอบราวเซอร์ให้แสดงไฟล์เว็บเพจหลายๆ เวบ็ เพจ ซ่ึงช่วยทาให้ผูเ้ ย่ียมชมเวบ็ ไซต์มีความ เพลิดเพลินในการใชง้ าน เพราะเกิดความรู้สึกเหมือนยงั อยใู่ นเวบ็ เพจเดิมท้งั ๆ ที่มีการเชื่อมโยงไปยงั เวบ็ เพจอ่ืน การแบ่งจอบราวเซอร์สามารถกระทาได้ 2 วธิ ี คือการสร้างเฟรม ปัจจุบนั ไม่นิยมใช้ และ การสร้างไอเฟรม ดงั น้นั จึงขอกล่าวถึงเฉพาะการสร้างไอเฟรม รายละเอียดดงั น้ี การสร้างไอเฟรม (IFRAME) คือการแบ่งพ้ืนท่ีจอบราวเซอร์เพียงบางส่วนให้สามารถ แสดงไฟล์เวบ็ เพจหรือเว็บไซต์อื่นได้ เสมือนอยูใ่ นหน้าเวบ็ เพจเดียวกนั แตกต่างจากการแบ่งจอ บราวเซอร์โดยการสร้างเฟรม เพราะการสร้างเฟรมจะตอ้ งมีการสร้างไฟลค์ วบคุมการแบ่งพ้ืนท่ีจอ บราวเซอร์ ซ่ึงไฟล์น้นั จะไม่สามารถแสดงขอ้ ความใดๆ ส่วนการสร้างไอเฟรมสามารถกระทาการ แบ่งพ้ืนท่ีจอบราวเซอร์และแสดงผลในไฟล์เดียวกนั นนั่ คือการสร้างไอเฟรมเป็ นการแบ่งพ้ืนท่ีจอ บราวเซอร์ในไฟล์เวบ็ เพจหลกั เพียงบางส่วนให้แสดเน้ือหาท่ีต้องการให้มีการเปล่ียนแปลง ซ่ึง สามารถนาไอเฟรมไปวางไวส้ ่วนใดกไ็ ดข้ องเวบ็ เพจ การสร้างไอเฟรมมีรูปแบบดงั น้ี <IFRAME SRC=\"ช่ือไฟล/์ URL \" NAME=\"=ช่ือไอเฟรม\" ></IFRAME> สามารถกาหนดลกั ษณะใหก้ บั TAG IFRAME ดงั ตารางที่ 4.11
105 ตารางท่ี 4.11 การกาหนดลกั ษณะใหก้ บั TAG IFRAME Attribute ค่าทก่ี าหนดให้ คาอธิบาย SRC ช่ือไฟล/์ URL กาหนดช่ือไฟล์ หรือ URLท่ีแสดงในไอเฟรม ALIGN กาหนดตาแหน่งการจดั วางขอ้ ความรอบไอเฟรม คา่ เป็น ตาแหน่ง LEFT, RIGHT, TOP, MIDDLE หรือ BOTTOM WIDTH กาหนดความกวา้ งไอเฟรมค่าเป็นตวั เลขหรือ % HEIGHT ความกวา้ ง กาหนดความสูงไอเฟรมค่าเป็นตวั เลขหรือ % FRAMEBORDER ความสูง กาหนดสถานะการแสดงเส้นขอบเฟรมค่าเป็น Yes หรือ สถานะการ 1 คือแสดงเส้นขอบ, No หรือ 0 คือไมแ่ สดงเส้นขอบ แสดงเส้นขอบ การประยุกต์ใช้งานไอเฟรม เนื่องจากในการพฒั นาเวบ็ ไซต์ดว้ ยการสร้างเฟรม จะตอ้ ง สร้างไฟล์เวบ็ เพจอยา่ งน้อยสองไฟล์ เพื่อเป็ นไฟล์ควบคุมการแบ่งหน้าจอบราวเซอร์และไฟล์เวบ็ เพจที่ถูกนาไปใช้ในไฟล์ควบคุม หากต้องการแก้ไขหรือปรับปรุงไฟล์เว็บเพจจะต้องเข้าไป ตรวจสอบท้งั สองไฟล์ทาให้ยุ่งยาก หากเปล่ียนวิธีการแบ่งหน้าจอบราวเซอร์มาเป็ นสร้างไอเฟรม สามารถสร้างได้จากไฟล์เวบ็ เพจเพียงไฟล์เดียว ด้วยการสร้าง TAG IFRAME ในเวบ็ เพจที่แสดง เน้ือหาหลกั ไดเ้ ลย จากน้นั กาหนดลกั ษณะ TARGET ของ TAG A ให้เชื่อมโยงไปยงั ชื่อไอเฟรมท่ี สร้างข้ึน ตวั อยา่ งการแบง่ พ้ืนท่ีจอบราวเซอร์โดยการสร้างไอเฟรม ดงั รูปที่ 4.34
106 <HTML><HEAD><TITLE>ประเภทของคอมพวิ เตอร์</TITLE> <META HTTP-EQUIV=\"CONTENT-TYPE\" CONTENT=\"TEXT/HTML; CHARSET=UTF-8\"><HEAD> <BODY> <TABLE WIDTH=\"100%\" CELLPADDING=\"5PX\" CELLSPACING=\"10PX\"> <TR><TD valign=\"top\" WIDTH=\"30%\"><H1>ประเภทของคอมพวิ เตอร์</H1> <ul>คอมพวิ เตอร์ตามขนาดและประสิทธิภาพของการประมวลผลของเครื่อง ไดเ้ ป็ น 4 ประเภท <li><A href=\"FILE2.HTML\" TARGET=\"CONTENT\">ซูเปอร์คอมพวิ เตอร์</A></li> <li><A href=\"https://en.wikipedia.org/wiki/Mainframe_computer\" TARGET=\"CONTENT\">เมนเฟรมคอมพวิ เตอร์</A></li> <li><A href=\"https://eurotempest.net/2013/04/24/tempest-mini-computer/\" TARGET=\"CONTENT\">มินิคอมพิวเตอร์ </A></li> <li><A href=\"https://en.wikipedia.org/wiki/Microcomputer\" TARGET=\"CONTENT\">ไมโครคอมพิวเตอร์</A></li></ul> <IMG SRC=\"IMG/c4.JPG\" WIDTH=\"100%\"></TD><TD><h1>รายละเอียดประเภทคอมพิวเตอร์</h1> <IFRAME SRC=\"FILE2.HTML\" NAME=\"CONTENT\" WIDTH=\"100%\" HEIGHT=\"400PX\"></IFRAME> </TD></TR><TR><TD COLSPAN=\"2\" ALIGN=\"CENTER\"> <IMG SRC=\"IMG/c1.JPG\" WIDTH=\"15%\"><IMG SRC=\"IMG/c2.JPG\" WIDTH=\"15%\"> <IMG SRC=\"IMG/c3.JPG\" WIDTH=\"15%\"></TD></</TR> </TABLE> </BODY></HTML> รูปที่ 4.34 ตวั อยา่ งการแบ่งพ้ืนที่จอบราวเซอร์โดยการสร้างไอเฟรม จากรูปท่ี 4.34 เม่ือแสดงผลบนบราวเซอร์จะไดด้ งั รูปที่ 4.35 ส่วนที่ 1 ส่วนที่ 2 รูปที่ 4.35 แสดงผลตวั อยา่ งการแบง่ พ้ืนที่จอบราวเซอร์โดยการสร้างไอเฟรม จากรูปท่ี 4.34 จากรูปท่ี 4.35 จอบราวเซอร์จะถูกแบ่งออกเป็น 2 ส่วน คือ
107 - ส่วนท่ี 1 คือเน้ือหาท่ีอยภู่ ายในเวบ็ เพจหลกั ท่ีเชื่อมโยง ดว้ ยการใช้ TAG A ระบุลกั ษณะ TARGET ของ TAG A ไปท่ีส่วนที่ 2 - ส่วนท่ี 2 คือ พ้ืนท่ีการแบ่งจอบราวเซอร์ดว้ ยการสร้างไอเฟรม ซ่ึงเป็ นพ้ืนที่บางส่วน ของเว็บเพจหลัก ใช้สาหรับแสดงเน้ือหาท่ีเช่ือมโยงจากส่วนที่ 1 ทาให้เน้ือหาในส่ วนท่ี 2 เปล่ียนแปลงตามการเลือกการเชื่อมโยงในส่วนที่ 1 ดงั น้นั เม่ือเลือกขอ้ ความ “ไมโครคอมพิวเตอร์” จะทาใหเ้ น้ือหาในส่วนที่ 2 เปล่ียนแปลงไปดงั รูปท่ี 4.36 ส่วนท่ี 1 ส่วนท่ี 2 รูปที่ 4.36 แสดงผลตวั อยา่ งเมื่อคลิกเลือกขอ้ ความ “ไมโครคอมพวิ เตอร์” จากรูปที่ 4.35 9. บทสรุป การพฒั นาเวบ็ ไซต์ดว้ ยการใชง้ านภาษา HTML ปัจจยั สาคญั เพยี งใชง้ าน TAG HTML ให้ ถูกตอ้ ง เน่ืองจากบราวเซอร์จะแสดงผลตามลกั ษณะท่ีกาหนดให้กบั TAG HTML เท่าน้นั รูปแบบ คาส่ังภาษา HTML จะอยู่ภายใต้เคร่ืองหมาย < > ซ่ึงเรียกว่า TAG ประกอบด้วย TAG เปิ ด และ TAG ปิ ด บาง TAG อาจไม่มี TAG ปิ ด เรียกว่า TAG เด่ียว ภาษา HTML สามารถควบคุมการ แสดงผลขอ้ มูลต่างๆ บนเวบ็ เพจ เช่น ขอ้ ความ รูปภาพ การเช่ือมโยงเวบ็ เพจ การสร้างตาราง และ การแบ่งพ้ืนที่จอบราวเซอร์เพื่อให้สามารถแสดงผลเวบ็ เพจหรือเวบ็ ไซตอ์ ื่น เสมือนอยู่ในหนา้ เวบ็ เพจเดียวกนั
108 10. แบบฝึ กหดั ท้ายบท 1. จงสร้างเวบ็ เพจแสดงขอ้ มูล 2014 Lamborgihini Gallardo LP570-4 Squadra Corse ประกอบดว้ ยขอ้ ความและรูปภาพ ดงั รูปที่ 4.37 บนั ทึกช่ือไฟลเ์ ป็น PAGE1.HTML รูปที่ 4.37 ตวั อยา่ งเวบ็ เพจ PAGE1.HTML 2. จงสร้างเวบ็ เพจแสดงแกลอร่ีรถในรูปแบบตารางและแสดงรูปภาพในตาราง ตวั อยา่ ง ดงั รูปที่ 4.38 บนั ทึกไฟลเ์ ป็น PAGE2.HTML รูปท่ี 4.38 ตวั อยา่ งเวบ็ เพจแสดงแกลอรี่รถ PAGE2.HTML
109 3. จงสร้างเวบ็ เพจเพื่อเชื่อมโยงเวบ็ เพจ โดยเชื่อมโยงขอ้ ความ “2014 Lamborghini Gallardo LP570-4 Squadra Corse” ไปยงั เวบ็ เพจ PAGE1.HTML และเชื่อมโยงขอ้ ความ “รูปภาพ Lamborghini” ไปยงั เวบ็ เพจ PAGE2.HTML บนั ทึกไฟลเ์ ป็น MENU.HTML ตวั อยา่ งดงั รูปที่ 4.39 รูปท่ี 4.39 ตวั อยา่ งเวบ็ เพจเช่ือมโยง MENU.HTML 4. จงสร้างเวบ็ เพจเพ่ือแบง่ จอบราวเซอร์ออกเป็ น 2 ส่วน ดว้ ยการใช้ IFRAME แบง่ แนวต้งั โดยที่ ส่วนท่ี 1 แสดงไฟล์ MENU.HTML ส่วนที่ 2 แสดงไฟล์ PAGE1.HTML1 เมื่อคลิก เลือกการเช่ือมโยงในส่วนที่ 1 ใหน้ าขอ้ มูลแสดงในส่วนท่ี 2 ตวั อยา่ งดงั รูปที่ 4.40 ส่วนท่ี 1 ส่วนที่ 2 รูปท่ี 4.40 ตวั อยา่ งเวบ็ เพจแบ่งหนา้ จอบราวเซอร์ โดยการใช้ IFRAME แบ่งแนวต้งั
110 5. จงสร้างเวบ็ เพจเพื่อแบง่ จอบราวเซอร์ออกเป็ น 2 ส่วน ดว้ ยการใช้ IFRAME โดยท่ีเม่ือ คลิกเลือกการเช่ือมโยงในส่วนที่ 1 ใหน้ าขอ้ มูลแสดงในส่วนท่ี 2 ตวั อยา่ งดงั รูปท่ี 4.41 ส่วนที่ 1 ส่วนท่ี 2 รูปท่ี 4.41 ตวั อยา่ งเวบ็ เพจแบ่งหนา้ จอบราวเซอร์ โดยการใช้ IFRAME แบง่ แนวนอน
111
Search
Read the Text Version
- 1 - 39
Pages:
