ค่านิยม12ประการ

วันอังคารที่ 23 กุมภาพันธ์ พ.ศ. 2559


IP address


IP address คือ หมายเลขประจำเครื่องที่ต้องกำหนดให้กับเครื่องคอมพิวเตอร์ทุกเครื่องและอุปกรณ์ทุกชิ้น ในเครือข่ายเน็ตเวิร์ค โดยมีข้อแม้ว่าหมายเลข IP Address ที่จะกำหนดให้กับคอมพิวเตอร์ทุกเครื่องหรืออุปกรณ์ต่างๆ จะต้องไม่ซ้ำซ้อนกัน ซึ่งเมื่อกำหนดหมายเลข IP Address ได้อย่างถูกต้องจะช่วยให้คอมพิวเตอร์ทุกเครื่องและ อุปกรณ์ต่างๆในเครือข่าย รู้จักกันรวมถึงสามารถรับส่งข้อมูลไปมาระหว่างกันได้อย่างถูกต้อง โดย IP Address จะเป็น ตัวอ้างอิงชื่อที่อยู่ของคอมพิวเตอร์แต่ละเครื่อง ตัวอย่างเช่น หากคอมพิวเตอร์ A ต้องการส่งไฟล์ข้อมูลไปให้ คอมพิวเตอร์ B คอมพิวเตอร์ A จะต้องรู้จักหรือมองเห็นคอมพิวเตอร์ B เสียก่อน โดยการอ้างอิงหมายเลข IP Address ของคอมพิวเตอร์ B ให้ถูกต้อง จากนั้นจึงอาศัยโปรโตคอลเป็นตัวรับส่งข้อมูลระหว่างทั้ง 2 เครื่อง
IP Address จะประกอบไปด้วยตัวเลขจำนวน 4 ชุด ระหว่างตัวเลขแต่ละชุดจะถูกคั่นด้วยจุด “.” เช่น 10.106.59. โดยคอมพิวเตอร์จะแปลงค่าตัวเลขทั้ง 4 ชุดให้กลายเป็นเลขฐาน 2 ก่อนจะนำค่าที่แปลงได้ไปเก็บลง เครื่องทุกครั้ง และนอกจากนี้หมายเลข IP Address ยังแบ่งออกเป็น 2 ส่วนดังนี้
1.ส่วนที่ใช้เป็นหมายเลขเครือข่าย (Network Address)

2.ส่วนที่ใช้เป็นหมายเลขเครื่อง (Host Address) ซึ่งหมายเลขทั้ง 2 ส่วนนี้สามารถแบ่งออกตามลักษณะการใช้งานได้ 5 Class ด้วยกันได้แก่ Class A, B, C, D และ E สำหรับ Class D และ E ทางหน่วยงาน InterNIC (Internet Network Information Center: หน่วยงานที่ ได้รับการจัดตั้งจากรัฐบาลสหรัฐ ซึ่งทำหน้าที่เกี่ยวกับการออกมาตรฐานและจัดสรรหมายเลข IP Address ให้กับ คอมพิวเตอร์ในเครือข่ายทั่วโลก) ได้มีการประกาศห้ามใช้งาน
-Class A หมายเลข IP Address จะอยู่ในช่วง 0.0.0.0 ถึง 127.255.255.255 มีไว้สาหรับจัดสรรให้กับ องค์กรขนาดใหญ่ที่มีคอมพิวเตอร์เชื่อมต่อภายในเครือ ข่ายจำนวนมากๆ
-Class B หมายเลข IP Address จะอยู่ในช่วง 128.0.0.0 ถึง 191.255.255.255 มีไว้สำหรับจัดสรรให้กับ องค์กรขนาดกลาง ซึ่งสามารถเชื่อมต่อคอมพิวเตอร์ในเครือข่ายได้มากถึง 65,534 เครื่อง
-Class C หมายเลข IP Address จะอยู่ในช่วง 192.0.0.0 ถึง 223.255.255.255 มีไว้สำหรับจัดสรรให้กับ องค์กรขนาดเล็กและใช้กับคอมพิวเตอร์ส่วนใหญ่ในเครือ ข่ายอินเตอร์เน็ตสามารถต่อเชื่อมกับคอมพิวเตอร์ใน เครือข่ายได้ 254 เครื่อง
-Class D หมายเลข IP Address จะอยู่ในช่วง 224.0.0.0 ถึง 239.255.255.255 สำหรับหมายเลข IP Address ของ Class นี้มีไว้เพื่อใช้ในเครือข่ายแบบ Multicast เท่านั้น

-Class E หมายเลข IP Address จะอยู่ในช่วง 240.0.0.0 ถึง 254.255.255.255 สำหรับหมายเลข IP Address ของ Class นี้จะเก็บสำรองไว้ใช้ในอนาคต ปัจจุบันจึงยังไม่ได้มีการนำมาใช้งาน

Public IP และ Private IP แตกต่างกัน?
บนเครือข่ายอินเตอร์เน็ตเราจะได้รับการจัดสรร IP Address จากผู้ให้บริการอินเตอร์เน็ต (ISP: Internet Service Providers) ที่ใช้อยู่ ซึ่งเป็น IP Address ของจริงหรือที่เรียกว่า “Public IP” แต่สำหรับการต่อเครือข่าย เพื่อใช้งานภายในบ้านหรือออฟฟิศต่างๆ เราจะใช้ IP Address ของปลอม หรือที่เรียกว่า “Private IP” ซึ่ง Class ที่ นิยมใช้กันก็คือ Class C ที่อยู่ในช่วง 192.168.0.0 ถึง 192.168.255.0 โดยผู้ใช้หรือ ผู้ดูแลระบบจะสามารถเป็นผู้ กำหนดหมายเลข IP Address แบบ Private IP ด้วยตนเองได้


โครงสร้างพื้นฐานของ HTML

โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head)  และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้
การจัดโครงสร้างแฟ้มเอกสาร                
ในความง่ายของภาษา HTML นั้นเพราะภาษานี้ไม่มีโครงสร้างใด ๆ มากำหนดนอก จากโครงสร้างพื้นฐานเท่านั้น หรือแม้แต่จะไม่มีโครงสร้าง พื้นฐานอยู่ โปรแกรมที่เขียนขึ้นมานั้นก็สามารถทำงานได้เสมือนมี โครงสร้างทั้งนี้เป็นเพราะว่าตัวโปรแกรมเว็บเบราเซอร์ จะมองเห็นทุกสิ่งทุกอย่างในโปรแกรม HTML เป็นส่วนเนื้อหาทั้งสิ้น  ยกเว้นใน ส่วนหัว ที่ต้อง มีการกำหนด แยกออกไปให้ เห็นชัดเท่านั้น จะเขียน คำสั่ง หรือ ข้อความที่ ต้องการ ให้แสดง อย่างไรก็ได้ เป็นเสมือนพิมพ์งานเอกสารทั่ว ๆ ไปเพียง แต่ ทำตำแหน่ง ใดมีการ ทำตำแหน่ง พิเศษขึ้นมา เว็บเบราเซอร์ถึงจะแสดงผล ออกมาตามที่ถูกกำหนด โดยใช้คำสั่งให้ตรงกับ รหัสที่กำหนดเท่านั้น

การแสดงผลที่เว็บเบราเซอร์               
หลังจากมีการพิมพ์โปรแกรมนี้เสร็จเรียบร้อยแล้ว ให้บันทึกเป็น ไฟล์ที่มีนามสกุล .htm หรือ .htmlจากนั้นให้เรียกโปรแกรมเว็บเบราเซอร์ขึ้นมาทำการทดสอบ ข้อมูลที่เราสร้างจะถูก นำมาที่ออกมาแสดงที่จอภาพ ถ้าไม่เขียนอะไรผิด บนจอภาพก็จะแสดงผลตามนั้น
ถ้าเรามีการปรับปรุงแก้ไขข้อมูลในโปรแกรมเดิม ให้อยู่ในรูปของ โปรแกรมใหม่ ก็จำ เป็นต้องโหลดโปรแกรมขึ้นมาใหม่ เพียงแต่เลื่อนเมาส์ไปคลิกที่ปุ่ม Refresh โปรแกรมก็จะทำการ ประมวลผลและแสดงผลออกมาใหม่ ในคำสั่ง HTML ส่วนใหญ่ใช้ตัวเปิด เป็นเครื่องหมายน้อยกว่า ตามด้วยคำสั่ง และปิดท้ายด้วยเครื่องหมายมากกว่า และมีตัวปิดที่มีรูปแบบเหมือนตัวเปิดเสมอ เพียงแต่จะมีเครื่อง หมาย / อยู่หน้าคำสั่งนั้นๆ เช่น คำสั่ง <BODY> จะมี </BODY> เป็นคำสั่งปิด เมื่อใดที่ผู้เขียนลืมหรือพิมพ์คำสั่งผิด จะส่งผลให้การทำงานของโปรแกรมผิดพลาดทันที

คำสั่งเริ่มต้นสำหรับ HTML
คำสั่งหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า <ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้นที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม /  (Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย ในการเขียน ด้วยตัวอักษรเล็กหรือใหญ่ ทั้งหมดหรือเขียนปนกันก็ได้ ไม่มีผลอะไร
 
คำสั่งเริ่มต้น
รูปแบบ   <HTML>.....</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beign และ End ใน Pascal

คำสั่งการทำหมายเหตุ
รูปแบบ <!-- ..... -->
ตัวอย่าง <!-- END WEBSTAT CODE -->   ข้อความที่อยู่ในคำสั่งจะปรากฏอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ

ส่วนหัว
รูปแบบ <HEAD>.....</HEAD>
ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>

กำหนดข้อความในไตเติลบาร์
รูปแบบ <TITLE>.....</TITLE>
ตัวอย่าง <TITLE> บทเรียน HTML </TITLE>
เป็นส่วนแสดงชื่อของเอกสาร จะปรากฏขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้ จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฏในส่วนของไตเติลบาร์ (Title bar) ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไร

ส่วนของเนื้อหา
รูปแบบ <BODY>.....</BODY>
ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY> และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ

 

การเติมสีสันให้เอกสาร

ผลการแสดง ที่เกิดขึ้น บน เว็บเพจ เราจะพบว่าเอกสาร ทั่วไปแล้วตัวอักษร ที่ปรากฏบนจอภาพ จะเป็น ตัวอักษรสีดำ บนพื้น สีเทา ถ้าเราต้องการที่จะเปลี่ยนสี ของตัวอักษร หรือ สีของจอภาพ เราสามารถ ทำ ได้โดย การกำหนด แอตทริบิวต์ (Attribute) ของตัวอักษร สิ่งที่ต้องการนี้ จะเป็นกลุ่มตัวเลขฐาน 16 จำนวน 3 ชุด โดยชุดที่หนึ่ง ทำหน้าที่ แทนค่าสีแดง ชุดที่สอง ทำหน้าที่ แทนสีเขียว และชุดที่สาม ทำหน้าที่แทนสี น้ำเงิน ข้อมูล ในตาราง ต่อไปนี้จะแสดงสีพื้นฐาน และรหัสสี ที่สามารถแสดงได้ทุกเว็บเพจ

     ขาว
#FFFFFF
ดำ
#000000
เทา
#BBBBBB
แดง
#FF0000
เขียว
#00FF00
น้ำเงิน
#0000FF


       ในบางครั้งถ้าเราไม่ต้องการใส่รหัสสีเป็นเลขฐานเราก็สามารถใส่ชื่อ สีลงไปได้เลย ตัวอย่างต่อไปนี้ แสดงชื่อสีที่ Internet Explorer สนับสนุนแต่ Netscape ไม่สนับสนุน
AQUA
BULE
GRAY
LIME
NAVY
PURPLE
SILVER
WHITE (สีขาว)
BLACK
FUCHSIA
GREEN
MAROON
OLTVE
RED
TEAL
YELLOW
สีของพื้นฉากหลัง 
รูปแบบ BGCOLOR=#สีที่ต้องการ
ตัวอย่าง <BODY BGCOLOR="#FF0000"> 
เราใช้ BGCOLOR=#สีที่ต้องการ ให้เป็นส่วนหนึ่งของ <BODY> ซึ่งจะทำให้เกิดสีตามที่เราเลือก ลักษณะเป็นฉากสีอยู่ข้างหลัง 

สีของตัวอักษรบนเว็บ 
รูปแบบ Text=#รหัสสี
ตัวอย่าง <BODY TEXT="#00FF00">
เรากำหนดเช่นเดียวกับการทำสีของพื้นฉากหลังโดยให้เป็นส่วน หนึ่งของ <BODY> แต่ในการใส่รหัสสีนั้นเราต้องดู ให้เหมาะสมกับฉากหลังด้วยเช่น <BODY TEXT="#00FF00"> ในการ ทำสีของ ตัวอักษรนี้สีจะปรากฎบนเว็บเปราเซอร์ เป็นสีเดียวตลอด
สีของตัวอักษรเฉพาะที่ 
รูปแบบ <FONT COLOR="#สีที่ต้องการ">...</FONT>
ตัวอย่าง <font color="#FF0000">สีแดง</font>
คำสั่งนี้เราใช้ในการเปลี่ยนสีของตัวอักษรในส่วนที่เราต้องการให้เกิดสีสันแตกต่างไปจากสีตัวอักษร อื่น ๆ เช่น <FONT COLOR="#FF0000">สีแดง</FONT>ตัวหนังสือคำว่าสีแดงก็จะเป็นสีแดงตามที่เราต้องการทันที

สีของตัวอักษรที่เป็นจุดคลิกเมาส์
รูปแบบ LINK="#รหัสสี" ALINK="#รหัสสี" VLINK"#รหัสสี"
ตัวอย่าง <BODY BGCOLOR="000000" TEXT="#F0F0F0" LINK="#FFFF00" ALIGN="#0077FF" VLINK="#22AA22">
กำหนดอยู่ในส่วนของ BODY โดยกำหนดให้
     LINK       =    สีของตัวอักษรก่อนมีการคลิก
     ALIGN    =    สีของตัวอักษรขณะถูกคลิก
     VLINK    =    สีของอักษรหลังจากคลิกแล้ว

ตัวอย่างโค้ดสี
#FFFFFF#FFFFCC#FFFF99#FFFF66#FFFF33#FFFF00
#FFCCFF#FFCCCC#FFCC99#FFCC66#FFCC33#FFCC00
#FF99FF#FF99CC#FF9999#FF9966#FF9933#FF9900
#FF66FF#FF66CC#FF6699#FF6666#FF6633#FF6600
#FF33FF#FF33CC#FF3399#FF3366#FF3333#FF3300
#FF00FF#FF00CC#FF0099#FF0066#FF0033#FF0000
#CCFFFF#CCFFCC#CCFF99#CCFF66#CCFF33#CCFF00
#CCCCFF#CCCCCC#CCCC99#CCCC66#CCCC33#CCCC00
#CC99FF#CC99CC#CC9999#CC9966#CC9933#CC9900
#CC66FF#CC66CC#CC6699#CC6666#CC6633#CC6600
#CC33FF#CC33CC#CC3399#CC3366#CC3333#CC3300
#CC00FF#CC00CC#CC0099#CC0066#CC0033#CC0000
#99FFFF#99FFCC#99FF99#99FF66#99FF33#99FF00
#99CCFF#99CCCC#99CC99#99CC66#99CC33#99CC00
#9999FF#9999CC#999999#999966#999933#999900
#9966FF#9966CC#996699#996666#996633#996600
#9933FF#9933CC#993399#993366#993333#993300
#9900FF#9900CC#990099#990066#990033#990000
#66FFFF#66FFCC#66FF99#66FF66#66FF33#66FF00
#66CCFF#66CCCC#66CC99#66CC66#66CC33#66CC00
#6699FF#6699CC#669999#669966#669933#669900
#6666FF#6666CC#666699#666666#666633#666600
#6633FF#6633CC#663399#663366#663333#663300
#6600FF#6600CC#660099#660066#660033#660000
#33FFFF#33FFCC#33FF99#33FF66#33FF33#33FF00
#33CCFF#33CCCC#33CC99#33CC66#33CC33#33CC00
#3399FF#3399CC#339999#339966#339933#339900
#3366FF#3366CC#336699#336666#336633#336600
#3333FF#3333CC#333399#333366#333333#333300
#3300FF#3300CC#330099#330066#330033#330000
#00FFFF#00FFCC#00FF99#00FF66#00FF33#00FF00
#00CCFF#00CCCC#00CC99#00CC66#00CC33#00CC00
#0099FF#0099CC#009999#009966#009933#009900
#0066FF#0066CC#006699#006666#006633#006600
#0033FF#0033CC#003399#003366#003333#003300
#0000FF#0000CC#000099#000066#000033#000000
รูปแบบ ของตัวอักษร
หัวเรื่อง
รูปแบบ <Hx>ข้อความ</Hx>
       ตัวอย่าง <H1>หัวข้อใหญ่สุด</H1>
ในการกำหนดขนาดให้หัวเรื่องนั้นมีการกำหนด ไว้ 6 ระดับตั้งแต่ 1 - 6 โดย x แทนตัวเลขแต่ละลำดับโดย H1 มีขนาดใหญ่ที่สุด H6 เล็กที่สุดเมื่อต้องการใช้หัวเรื่องที่มีขนาดตัวอักษรเท่าใดเขียนอยู่ระหว่าง <Hx>....</Hx>
 
ขนาดตัวอักษร
รูปแบบ <FONT SIZE=x>ข้อความ</FONT>
      ตัวอย่าง <FONT SIZE=2>bcoms.net</FONT>
เราสามารถกำหนดขนาดของตัวอักษรให้แตกต่างกันได้ ภายในบรรทัดเดียวกัน โดยเราใช้ <FONT SIZE=value> มากำหนด โดยที่ value เป็นตัวเลขแสดงขนาด ตัวอักษร 7 ขนาด ตัวเลขยิ่งมาก ยิ่งมีขนาด ใหญ่ ตั้งแต่ -ไปจนถึง +7

ตัวหนา (Bold)
รูปแบบ <B>ข้อความ</B>
     ตัวอย่าง <B>bcoms.net</B>

ตัวเอน (Itatic)
รูปแบบ <I>ข้อความ</I>     ตัวอย่าง <I>bcoms.net</I>

ตัวขีดเส้นใต้ (Underline)
รูปแบบ <U>ข้อความ</U>     ตัวอย่าง <U>bcoms.net</U>

ตัวอักษรมีขนาดคงที่ (Typewriter text)
รูปแบบ <TT>ข้อความ</TT>     ตัวอย่าง <TT>bcoms.net</TT>

แบบของตัวอักษร
รูปแบบ <FONT FACE="font name>ข้อความ</FONT>
c <FONT FACE="Angsana UPC">bcoms.net</FONT>
Font name เป็นชื่อของ Font ที่เราต้องการให้เป็น เช่น <FONT FACE="AngsanaUPC"> bcoms.net</FONT> และเราสามารถใส่ชื่อ Font หลาย ๆ ตัวได้เพื่อบางครั้ง Browser ไม่มี Font ตามต้องการโดยให้คั้นด้วยตัว (,)

ขนาด Font ทั้งเอกสาร
รูปแบบ Basefont size="X">     ตัวอย่าง <Basefont size=3>
     เป็นการกำหนดขนาดของตัวอักษรในโฮมเพจให้มีขนาด เท่ากันทั้งเอกสาร เพื่อสะดวกเราจะได้ไม่ต้องกำหนดบ่อย ๆ ปกติแล้วจะกำหนดขนาดเป็น 3 โดยไม่ต้องมีตัวปิดเหมือนคำสั่งอื่น ๆ (แทนตัวเลข)

ตัวอักษรแบบพิเศษ      
 
รูปแบบ
           
 <      แทนด้วย     &lt;
          >     แทนด้วย     &gt;
          &     แทนด้วย     &amp;
          "      แทนด้วย     &quot;
     เว้นวรรค แทนด้วย &nbsp;
ตัวอย่างเช่น &quot;bcoms.net&quot; จะเป็น "bcoms.net" 
การจัดรูปแบบโฮมเพจ
ในการเขียนคำสั่งเพื่อให้แสดงผลด้วยเว็บเบราเซอร์การกด ปุ่ม Enter ที่แป้นพิมพ์เพื่อขึ้นบรรทัดใหม่ในขณะที่สร้าง ไฟล์นั้นยังไม่มีโปรแกรมเว็บเบราเซอร์ตัวใดรู้จักคำสั่งที่ขึ้นบรรทัดใหม่ที่เกิดจาก การกดแป้นพิมพ์เลยดังนั้น เราจึง ต้องมี การเขียนคำสั่งขึ้นซึ่งในบทนี้เราจะมารู้ถึงคำสั่งที่ใช้ใน การกำหนด รูปแบบต่างเพื่อให้ เว็บเพจ มีความสวยงามมากยิ่งขึ้น
การขึ้นบรรทัดใหม่
รูปแบบ <BR>
เป็นคำสั่งสำหรับการสั่งให้แสดงผลในบรรทัดใหม่ให้ใส่คำสั่งนี้ ในตำแหน่งที่เราต้องการ ให้การแสดงผลข้อมูลนั้นขึ้นบรรทัดใหม่
ย่อหน้าใหม่
รูปแบบ <P ALIGN=align type>ข้อความ</P>
เราจะใช้คำสั่งนี้เมื่อต้องการ ขึ้นบรรทัดใหม่เหมือน<BR> แต่จะทำการ เว้นบรรทัดใหม่ให้อีกหนึ่งบรรทัด จะใช้คำสั่ง<P>อย่างเดียว ก็ได้ โดยไม่ต้อง มีคำสั่ง ปิด จะไว้หน้าหรือ หลังข้อความที่ต้องการขึ้นก็ได้ แต่ถ้าใช้คำสั่ง <P ALIGN=align type>ต้องมีคำสั่ง ปิด</P> ด้วย โดย align type สามารถ ใช้CENTER,LEFT หรือ RIGHT ก็ได้ เช่น <P ALIGN=CENTER> ข้อความนี้ ก็จะอยู่ตรงกลาง</P>
เส้นคั่น
รูปแบบ <HR ALIGN=xx COLOR=xx SIZE=xx WIDTH=xx NOSHADE>
เราสามารถกำหนดตำแหน่ง สี ขนาดของความหนา ความยาว หรือกำหนดแบบเส้นทึบ ก็ได้
โดย X = ค่าต่าง ๆ เหล่านี้
<ALIGN> = CENTER , LEFT , RIGHT
COLOR = ตามสีที่เราต้องการ เป็นรหัสสี R-G-B
SIZE = เป็นตัวเลข บอกขนาด 1 ถึง 7 และ -1 ถึง -7
WIDTH = กำหนด ความหนา ของเส้นเป็น เปอร์เซนต์
NOSHADE = กำหนด ให้เส้น เป็น เส้นทึบ

การใส่รูปภาพลงในเว็บเพจ
         เมื่อเริ่ม เข้าไป ยังโฮมเพจ ของ เว็บไซต์ แต่ละแห่ง บนอินเทอร์เนต สิ่งแรก ที่มัก เป็นที่ ติดตา ของผู้ ใช้ บริการก็คือ การที่แต่ละโฮมเพจ จะมี รูปภาพสวย ๆ แสดงออกมา มีการจัดรูปภาพ และข้อความ ที่เป็นระเบียบ ทำให้อ่านง่าย เข้าใจเนื้อหาที่ต้องการได้อย่างรวดเร็ว ก่อนที่ เราจะมารู้ถึงคำสั่งในการใส่รูปภาพ ลงในเว็บเพจ นั้น เราต้องมารู้จัก เกี่ยวกับ รูปภาพ ที่เราจะนำมาใส่ในเว็บเพจเสียก่อน รูปภาพที่จะนำมาใช้ใส่ลงในเว็บเพจ นั้น ส่วนมาก มีนามสกุล เป็น GIF และ JPG ไฟล์รูปภาพ แบบ GIF ย่อมาจาก Graphics Interchange Format เป็นไฟล์ ชนิดบิตแมป (Bitmap) เป็นเทคนิค การเก็บภาพ โดยให้ จุดสี(pixet) ต่าง ๆ เรียง ต่อกัน จนเกิด เป็นภาพ ไฟล์ GIF นี้ ส่วนใหญ่ จะนิยม ใช้กับ ภาพถ่าย และภาพการ์ตูน แสดงผลเป็น ภาพนิ่ง แต่ใน ปัจจุบันมี โปรแกรม สำหรับทำ หน้าที่ รวบรวม ภาพ GIF หลาย ๆ ภาพ เข้าเป็น ไฟล์เดียวกัน เมื่อนำ ภาพมา แสดง ทำให้เกิด เป็นภาพ เคลื่อนไหวขึ้น ไฟล์รูปแบบ JPG ย่อมาจาก Joint Photographic Expers Group เป็นไฟล์ใน รูปแบบ ที่ผ่าน กระบวน การบีบย่อย ข้อมูล มาก่อน มีการ นำเอา ข้อมูล ส่วนที่ ไม่สำคัญ ออกไป แล้วทำการ บีบอัด ข้อมูล ในอัตรา ส่วน 10:1 โดยขนาด ของไฟล์ ที่เรา นำมา ใช้งาน นั้น อาจมีขนาด เหลือเพียง 10 - 30 % ของขนาดไฟล์ ก่อนจะมีการ บีบ ย่อ ข้อมูล ขนาดของ การบีบ ข้อมูล มีได้ 3 ระดับ (Hight,Middle,Low Compression) ไฟล์ที่ มีการ บีบย่อ ข้อมูล มากที่สุด จะได้ ไฟล์ที่มีขนาด เล็กที่สุด แต่คุณภาพ ก็ลดลง ตาม ไปด้วย หากต้องการ ภาพที่มี คุณภาพดี ที่สุด ขนาดของ ไฟล์ก็จะ ใหญ่ ที่สุดเช่นกัน
การใส่รูปภาพลงในเว็บเพจ
รูปแบบ  <IMG ALIGN=align-type BORDER=n HEIGHT=n WIDTH=n HSPACE=n VSPACE=n SRC=address ALT=text>

ALIGN = align-type(ตำแหน่ง) 
        เป็นการกำหนดตำแหน่งรูปภาพ ถ้าภาพไม่ใหญ่ข้อความนั้นจะอยู่ที่ตำแหน่ง ส่วนล่างของภาพ ทางขวา มือเสมอ เราสามารถ กำหนดได้ โดยใช้คำต่างๆ เหล่านี้
LEFT =  วางภาพที่ตำแหน่งทางซ้าย
RIGHT =  วางภาพที่ตำหน่งทางขวา
TOP =  วางภาพ ที่ตำแหน่ง ด้านบน
MIDDLE =  วางภาพ ที่ตำหน่ง กึ่งกลาง
BOTTOM =  วางภาพ ที่ตำแหน่ง ด้านล่าง
BORDER =  เป็นการ กำหนด กรอบให้ รูปภาพ มีค่ามาก กรอบจะ มีความหนา มากขึ้น
HEIGHT =  เป็นการ กำหนด ความสูง ของภาพ
WIDTH =  เป็นการ กำหนด ความกว้างของภาพ ถ้าต้องกา ให้ภาพได้สัดส่ว ให้กำหน เป็นเปอร์เซนต์ โดยไม จำกัดความสูง
VSPACE =  กำหนด ระยะ ห่างบน ล่างของ ภาพ
HSPACE =  กำหนด ระยะ ห่าง ซ้าย - ขวา ของภาพ
SRC =  ใส่รูปภาพที่ต้องการลงไป
ALT =  text  ใส่ข้อความ เพื่อเป็นคำอธิบายรูปภาพที่นำมาวางสำหรับผู้ใช้อินเตอร์เน็ตแบบเท็กซ์
ข้อสังเกต ALIGN ไม่สามารถ กำหนดให้ รูปภาพ ไปปรากฏยังกึ่งกลาง ของจอภาพ ได้ ถ้าต้อง การให้ อยู่ตำแหน่งดังกล่าว ให้ใช้คำสั่ง <CENTER>...<CENTER>

การแสดงภาพฉากหลัง
รูปแบบ BACKGROUND="picture"
กำหนด แอตทริบิวต์ BACKGROUND="picture" ในคำสั่งของ <BODY> เช่น <BODY BACKGROUND="hot.gif">

การเชื่อมโยงข้อมูล (Link)
เป็น ที่ทราบดีอยู่แล้วว่าการที่อินเตอร์เน็ต ได้รับความนิยมอย่างกว้างขวางอยู่ทั่วโลกนั้นเป็น ผลมาจากความ สามารถในการเชื่อมโยงข้อมูลจากฐานข้อมูลหนึ่งไปยังอีกฐานข้อมูลหนึ่งได้ อย่างรวดเร็ว โดยสามารถเชื่อมโยงข้อความ ได้ทั้งจากภายในแฟ้มเอกสารข้อมูลของตัวเอง และแฟ้มเอกสารข้อมูลภายนอกที่ต่างเว็บไซต์กัน     ข้อความที่ถูกกำหนดให้เชื่อมโยงกับฐานข้อมูลอื่นๆ บนเว็บเบราเซอร์จะแสดงผลเป็นตัวอักษร ที่มีสีแตกต่างจากอักษรทั่วไปและอาจจะมี ขีดเส้นใต้ข้อความนั้นด้วย โดยทั่วไป ตัวอักษรที่แสดง ผลอยู่บน เว็บเบราเซอร์ จะมีสีดำ ปนขาว (หรือสีเทา) แต่สำหรับข้อความที่ใช้เป็นตัวเชื่อมข้อมูลนั้นจะเป็นตัวอักษร สีน้ำเงิน หรือ อย่างอื่น ตาม ที่สร้างขึ้นมาเมื่อเลื่อน เมาส์ไปชี้ที่ข้อความ ซึ่งมีการเชื่อมโยงของรูปแบบ ตัวชี้ จะเปลี่ยนจาก สัญลักษณ์ ลูกศร ไปเป็นรูปมือแทน และที่บริเวณแถบแสดงสถานะด้านล่าง จะแสดงถึงตำแหน่งของจุด หมายที่ ข้อความจะเชื่อมโยงไปให้เราเห็น
ประเภทการเชื่อมโยง      
-   การเชื่อมโยงภายในเว็บไซต์
การเชื่อมโยงข้อมูลนอกเว็บไซต์
-   การเชื่อมโยงข้อมูล FTP
-   การเชื่อมโยงข้อมูล E-Mail
การเชื่อมโยงภายในเว็บไซต์
รูปแบบ <A HREF="ที่อยู่ไฟล์">ข้อความ</A>
ตัวอย่าง <A HREF="tipcomputer.asp">ทิปคอมพิวเตอร์</A>
*** หมายเหตุ ถ้าลิงค์อยู่คนละโฟลเดอร์ <A HREF="../tipcomputer.asp">ทิปคอมพิวเตอร์</A>

การเชื่อมโยงข้อมูลนอกเว็บไซต์
รูปแบบ <A HREF="http://www..........">ข้อความ</A>
ตัวอย่าง <A HREF="http://www.bcoms.net">บีคอม</A>
*** หมายเหตุ คุณสามารถสั่งให้เบราเซอร์เปิดหน้าใหม่ได้โดยกำหนด target="_blank"
ตัวอย่าง <a href="http://www.driverzone.com" target="_blank"> Driver Zone </a>

การเชื่อมโยงข้อมูล FTP
รูปแบบ <FTP://HOSTNAME/FOLDER>ข้อความ</A>
HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server
FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้
ตัวอย่าง <A HREF=FTP://bcoms.net/download> Download </a>

การเชื่อมโยงข้อมูล E-Mail
รูปแบบ <A HREF="MAILTO:USERNAME@DOMAINNAME">ข้อความ</A>
ตัวอย่าง <a href="mailto: bcoms_net@hotmail.com">bcoms_net@hotmail.com</a>

การสร้างตาราง
การสร้างตาราง ลงใน เว็บเพจมีประโยชน์มหาศาล เราสามารถ ประยุกต์ นำไปใช้ได้หลายอย่าง เพื่อเป็นการเพิ่มสีสันความสวยงามของเว็บเพจ การสร้างตาราง ในเว็บเพจก็ไม่แตกต่างจากการสร้างตารางบนแผ่นกระดาษทั่ว ๆ ไป เราเคยทำตารางอย่างไร ก็สามารถสั่งให้เว็บเพจของเรา ทำอย่างนั้นได้ เช่นกัน ต่างกันที่ว่าในเว็บเพจเราไม่สามารถที่จะ นำเอาปากกา ดินสอ ไม้บรรทัด หรืออุปกรณ์ สำหรับเขียนตารางเข้าไปเขียนบนจอภาพได้ เราใช้ นิ้วมือของเรา เป็นผู้พิมพ์คำสั่ง สำหรับสร้างตารางขึ้นมา
โครงสร้างตาราง
      <TABLE>
      <TR>
      <TH>หัวข้อตาราง
      <TD>รายละเอียดย่อย
      <TR>
      <TH>หัวข้อตาราง
      <TD>รายละเอียดย่อย
      </TABLE>

คำสั่ง
คุณสมบัติ
<TABLE>...</TABLE>
เป็นคำสั่งเปิดปิดตาราง
<TR>...</TR>
ตารางตามแนวนอน เป็นการกำหนดแถวในตาราง
<TH>...</TH>
หัวข้อ ของ ตาราง ข้อความ ที่อยู่ใน คำสั่ง จะถูก จัดให้เป็น ตัวหนา
และกึ่งกลาง โดย อัตโนมัติ
<TD>...</TD>
เป็นราย ละเอียด ของตาราง เป็นการ กำหนดจำนวน คอร์ลัม ของตาราง

คุณสมบัติของตาราง
<TABLE>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDER=n
CELLPADDING=n
CELLSPACING=n
WIDTH=n
HEIGHT=n
โดย
ALIGN
กำหนด ตำแหน่งตาราง โดย
LEFT   = กำหนดตารางให้อยู่ทางซ้าย
RIGHT = กำหนดตารางให้อยู่ทางขวา
BACKGROUND
ใส่ภาพกราฟฟิก เป็นพื้นหลังตาราง url เป็น ตำแหน่ง ภาพ
BGCOLOR
กำหนดสีให้ตาราง
BORDER
เส้นขอบ ตาราง เป็นค่า ความหนาของ ขอบตาราง
BORDERCOLOR
กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER
CELLPADDING
กำหนดระยะ ห่างระหว่าง ตัวหนังสือและเส้นแบ่งตาราง
CELLSPACING
กำหนดขนาดของเส้นตาราง
WIDTH
กำหนดความกว้างของตาราง เป็นตัวเลขและเป็น %
HEIGHT
กำหนดความสูงของตารางเป็นตัวเลขและเป็น %
<TR>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
VALIGN=align-type
โดย
ALIGN
กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT=อยู่ทางซ้าย
CENTER=อยู่ตรงกลาง
RIGHT=อยู่ทางขวา
BACKGROUND
ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ
BGCOLOR
กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR
กำหนดสีให้ขอบตาราง
COLSPAN
ปรับขนาดของคอร์ลัมให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอร์ลัมที่มี
ROWSPAN
ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี
VALIGN
จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่ข้างบน
MIDDLE = จัดอยู่ตรงกลาง
BOTTOM = จัดอยู่ข้างล่าง
ตารางซ้อนตาราง
มีอยู่ บ่อยครั้งที่เราจำเป็นที่จะต้องสร้างตารางให้มีลักษณะของตารางทับซ้อนกันได้ เพื่อผลทางการแสดงผลข้อมูล
ข้อมูลให้แบบละเอียดของข้อมูลได้มากที่สุด รูปแบบ การเขียน ก็เหมือน กับเมื่อ สร้าง list ซ้อน listนั่นคือ ในส่วน ของ บรรทัด <TR> จะมี การสร้าง ตาราง ใหม่ <TABLE>.....</TABLE> ก่อนที่ จะมี ตัวเปิด</TR> ในบรรทัด นั้น ๆ เช่น
ซึ่งมีโค้ดดังนี้
<HTML>
<HEAD><TITLE>Table with and Neted tables</HEAD></TITLE>
<BODY>
<H1>Table with and Neted tables</H1>
<TABLE BORDER WIDTH=50%>
<TR><TD>A</TD><TD>B</TR></TR>
<TR><TD><TABLE BORDER WIDTH=100%>
<TR><TD>C</TD><TD>D</TR></TR>
</TABLE><TD>
<TD>E</TD></TR>
</TABLE >
</BODY>
</HTML>

การใส่รูปภาพลงในตาราง          
เรา สามารถ นำรูปภาพ ที่มี อยู่บรรจุ ลงใน ตาราง ที่สร้าง ขึ้นได้ โดย การ บรรจุคำสั่ง สำหรับการ แสดงรูปภาพ <IMG SRC=รูปภาพ>เข้าไป ในส่วน หนึ่งของ ตาราง เช่น<TABLE BORDER="2"CELLPADDING="5" CELLSPACING="5" WIDTH="60%">
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="Aq.gif" WIDTH="108" HEIGHT="108"></TD>
<TD WIDTH="30%"><IMG SRC="34.gif" WIDTH="20" HEIGHT="20"></TD>
<TR>
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="direc.gif" WIDTH="200" HEIGHT="44"></TD>
<TD WIDTH="30%"><IMG SRC="pencil.gif" WIDTH="50" HEIGHT="50"></TD>
<TR>
</TABLE>
การปรับขนาดรูปภาพให้พอดีกับตาราง  เราเคยเรียน มาแล้ว ว่า เรานั้น สามารถ ปรับขนาด รูปภาพได้ ในการนำ รูปภาพ ใส่เข้า ไปในตาราง เราก็ กำหนด ขนาดของ รูปภาพ กว้าง ยาว ให้เท่ากัน ทุกด้าน จะทำให้ภาพ ที่แสดง ออกมา มีขนาด เท่ากัน เช่น<TABLE BORDER="2" CELLPADDING="5"CELLSPACING="5" WIDTH="60%">
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="Aq.gif" WIDTH="80" HEIGHT="80"></TD>
<TD WIDTH="30%"><IMG SRC="34.gif" WIDTH="80" HEIGHT="80"></TD>
<TR>
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="direc.gif" WIDTH="80" HEIGHT="80"></TD>
<TD WIDTH="30%"><IMG SRC="pencil.gif" WIDTH="80" HEIGHT="80"></TD>
<TR>
</TABLE>

การเชื่อมโยงข้อมูลในตาราง
เหมือนกับ ข้อมูลที่อยู่ นอกตาราง ข้อมูลที่อยู่ในตาราง ก็สามารถ ไปเชื่อม โยงกับข้อ มูล จากแหล่ง ข้อมูล อื่นได้ เช่น เดียวกัน เมื่อเรานำ ส่วนเชื่อม โยงข้อมูล ทั้งตัว อักษร รูปภาพ หรือผสมกัน ก็ได้ มาบรรจุในตารางเท่านั้น เช่น
<table border=2 cellpadding=5 cellspacing=5 width="50%">
<tbody>
<tr>
<td width="50%"><a href="../index.asp"><img height=20 src="34.gif" width=20 border=0></a></td>
<td width="50%"><a href="../index.asp">กลับไปหน้าแรก</a></td>
</tr>
</tbody>
</table>