ระบบสื่อสารข้อมูลสำหรับคอมพิวเตอร์

ระบบสื่อสารข้อมูลสำหรับเครือข่ายคอมพิวเตอร์

ความหมาย ระบบการโอนถ่ายข้อมูลหรือการแลกเปลี่ยนข้อมูลระหว่างต้นทางหรือปลายทางโดยใช้อุปกรณ์อิเล็กทรอนิกส์ เช่น โทรศัพท์ โทรสาร โมเด็ม คอมพิวเตอร์ อุปกรณ์เครือข่ายต่างๆ ดาวเทียม ควบคุมการส่งและการไหลของข้อมูลจากต้นทางไปยังปลายทาง

องค์ประกอบระบบสื่อสารข้อมูลสำหรับเครือข่ายคอมพิวเตอร์ 

1 - ข่าวสาร (Message) เป็นข้อมูลรูปแบบต่างๆ

2 - ผู้ส่งหรืออุปกรณ์ส่งข้อมูล (Sender)

3 - สื่อหรือตัวกลาง (Media) เป็นสื่อหรือช่องทาง ที่ใช้ในการนำข้อมูลจากต้นทางไปยังปลายทาง

4 - ผู้รับหรืออุปกรณ์รับข้อมูล (Receiver)

5 - กฎ ข้อตกลง ระเบียบวิธีการรับส่ง(protocol)

สื่อหรือตัวกลางของระบบสื่อสารข้อมูลสำหรับคอมพิวเตอร์

1.สื่อหรือตัวกลางประเภทมีสาย

1.1 สายคู่บิดเกลียว (twisted pair) มี 2 ชนิด คือ
– สายคู่บิดเกลียวไม่มีฉนวนหุ้ม (Unshielded Twisted Pair : UTP)

– สายคู่บิดเกลียวมีฉนวนหุ้ม (Shielded Twisted Pair : STP)

1.2 สายโคแอกเชียล (Coaxial Cable) เป็นสื่อกลางที่มีส่วนของสายส่งข้อมูลเป็นลวดทองแดงอยู่ตรงกลาง หุ้มด้วยพลาสติก ส่วนชั้นนอกหุ้มด้วยโลหะหรือฟอยล์ถักเป็นร่างแหเพื่อป้องกันสัญญาณรบกวน

1.3 สายใยแก้วนำแสง (Fiber-optic cable) เป็นสื่อกลางที่ใช้ส่งข้อมูลในรูปแบบของแสง

2.สื่อหรือตัวกลางประเภทไร้สาย
2.1 คลื่นไมโครเวฟ (Microwave) เป็นสื่อกลางในการสื่อสารที่มีความเร็วสูง
ส่งข้อมูลโดยอาศัยสัญญาณไมโครเวฟซึ่งเป็นสัญญาณคลื่นแม่เหล็กไฟฟ้า
เหมาะกับการส่งข้อมูลในพื้นที่ห่างไกลกันมากๆ หรือพื้นที่ทุรกันดาร

2.2 ดาวเทียม (Satellite) ในการส่งสัญญาณดาวเทียมนั้น จะต้องมีสถานี
ภาคพื้นดินคอยทำหน้าที่รับและส่งสัญญาณขึ้นไปบนดาวเทียม

2.3 แอคเซสพอยต์ (Access Point)

ความหมายเครือข่ายคอมพิวเตอร์

ระบบการสื่อสารระหว่างคอมพิวเตอร์จำนวนตั้งแต่สองเครื่องขึ้นไป และอุปกรณ์คอมพิวเตอร์ต่างๆเพื่อแลกเปลี่ยนข้อมูลและสารสนเทศ รวมถึงใช้อุปกรณ์คอมพิวเตอร์ร่วมกัน

ประโยชน์ของเครือข่ายคอมพิวเตอร์

1. การใช้ทรัพยากรร่วมกัน (Resources Sharing) หมายถึง การใช้อุปกรณ์ต่างๆ เช่น เครื่องพิมพ์ร่วมกัน

2. การแชร์ไฟล์ เมื่อคอมพิวเตอร์ถูกติดตั้งเป็นระบบเน็ตเวิร์กแล้ว การใช้ไฟล์ข้อมูลร่วมกันหรือการแลกเปลี่ยนไฟล์ทำได้อย่างสะดวกรวดเร็ว

3. สามารถบริหารจัดการทำงานคอมพิวเตอร์ทุกเครื่องได้จากศูนย์กลาง (Centralized Management)

4. สามารถทำการสื่อสารกันในเครือข่าย (Communication) ได้หลายรูปแบบ

5. มีระบบรักษาความปลอดภัยของข้อมูลบนเครือข่าย (Network Security)

ประเภทของระบบเครือข่ายคอมพิวเตอร์

1. เครือข่ายท้องถิ่น (Local Area Network : LAN)

2. เครือข่ายเมือง  (Metropolises Area Network :MAN)

3. เครือข่ายระดับประเทศ (Wide Area Network : WAN)

4. เครือข่ายอินเทอร์เน็ต (Internet)

รูปแบบการเชื่อมต่อของระบบเครือข่าย (network topologyX

1.การเชื่อมต่อเครือข่ายแบบบัส (bus network) เป็นการเชื่อมต่อคอมพิวเตอร์ ทุกเครื่องบนสายสัญญาณหลักเส้นเดียว ที่ปลายทั้งสองด้านปิดด้วยอุปกรณ์ที่เรียกว่า Terminator ไม่มีคอมพิวเตอร์เครื่องใด เครื่องหนึ่ง เป็นศูนย์กลางในการเชื่อมต่อ คอมพิวเตอร์เครื่องใดหยุดทำงาน ก็ไม่มีผลกับคอมพิวเตอร์เครื่องอื่น ๆ ในเครือข่าย การรับส่งสัญญาณบนสายสัญญาณต้องตรวจสอบสายสัญญาณ BUS ให้ว่างก่อน จึงจะสามารถส่งสัญญาณไปบนสาย BUS ได้

2. การเชื่อต่อเครือข่ายแบบวงแหวน (ring network) การเชื่อมต่อแบบวงแหวน เป็นการเชื่อมต่อจากเครื่องหนึ่งไปยังอีกเครื่องหนึ่ง จนครบวงจร ในการส่งข้อมูลจะส่งออกที่สายสัญญาณวงแหวน โดยจะเป็นการส่งผ่านจากเครื่องหนึ่ง ไปสู่เครื่องหนึ่งจนกว่าจะถึงเครื่องปลายทาง ปัญหาของโครงสร้างแบบนี้คือ ถ้าหากมีสายขาดในส่วนใดจะทำ ให้ไม่สามารถส่งข้อมูลได้

3. การเชื่อมต่อเครือข่ายแบบดาว (Star network)  เป็นการเชื่อมต่อสายสื่อสารจากคอมพิวเตอร์หลายๆเครื่องไปยังฮับ (hub) หรือ สวิตช์ (switch) ซึ่งเป็นอุปกรณ์สลับสายกลางแบบจุดต่อจุดเป็นศูนย์กลางของการเชื่อมต่อ วงจรเชื่อมโยงระหว่างเครื่องคอมพิวเตอร์ให้ติดต่อสื่อสารถึงกัน

4. เครือข่ายแบบ Hybrid เป็นการเชื่อมต่อที่ผสมผสานเครือข่ายย่อยๆ หลายส่วนมารวมเข้าด้วยกัน เช่น นำเอาเครือข่ายระบบ Bus, ระบบ Ring และ ระบบ Star มาเชื่อมต่อเข้าด้วยกัน เหมาะสำหรับบางหน่วยงานที่มีเครือข่ายเก่าและใหม่ให้สามารถทำงานร่วมกัน

อุปกรณ์เครือข่าย

1. ฮับ (hub) เป็นอุปกรณ์ที่ทวนและขยายสัญญาณเพื่อส่งต่อไปยังอุปกรณ์อื่นให้ได้ระยะทางที่ยาวไกลขึ้นไม่มีการเปลี่ยนแปลงข้อมูลก่อนและหลังการรับส่งและไม่มีการใช้ซอฟแวร์ใด ๆ มาเกี่ยวข้องกับอุปกรณ์ชนิดนี้ การติดตั้งทำได้ง่าย

2. โมเด็ม (modem) เป็นฮาร์ดแวร์ที่ทำหน้าที่แปลงสัญญาณอนาล็อก (Analog signal) ให้เป็นสัญญาณดิจิทัล (Digital Signal)และในทางกลับกันก็แปลงสัญญาณดิจิทัลให้เป็นสัญญาณอนาล็อก

3. การ์ด LAN (Network Interface Card – NIC) เป็นการ์ดสำหรับต่อเครื่องพีซีเข้ากับสาย LAN

4. สวิตช์ (Switching) เป็นอุปกรณ์ที่ทำหน้าที่กระจายช่องทางการสื่อสารข้อมูลหลายช่องทางการสื่อสารข้อมูลหลายช่องทางในระบบเครือข่ายคล้ายHubแต่ต่างกันในเรื่องของกรทำงานและความเร็ว คือ แต่ละช่องสัญญาณ (port) จะใช้ความเร็วเป็นอิสระต่อกันตามมาตรฐานความเร็ว

5. เราท์เตอร์ (router) เป็นอุปกรณ์ในระบบเครือข่ายคอมพิวเตอร์ที่ทำหน้าที่เป็นตัวเชื่อมโยงให้เครือข่ายหลายเครือข่ายที่มีขนาดต่างกันหรือใช้มาตรฐานการส่งผ่านข้อมูล (Transmission) ต่างกันสามารถติดต่อแลกเปลี่ยนข้อมูลระหว่างกันได้

โปรโตคอล (Protocol)

โปรโตคอล คือ ข้อกำหนดหรือข้อตกลงที่ใช้ควบคุมการสื่อสารข้อมูลในเครือข่ายคอมพิวเตอร์ หรืออุปกรณ์เครือข่ายที่ใช้โปรโตคอลชนิดเดียวกันซึ่งสามารถติดต่อสื่อสารระหว่างกันได้เหมือนกับมนุษย์ที่ใช้ภาษาเดียวกันในการสื่อสาร เพื่อให้เกิดความเข้าใจร่วมกันนั่นองค์กรที่เกี่ยวข้องได้กำหนดโปรโตคอลที่เรียกว่ามาตรฐานการจัดการระบบการเชื่อมต่อสื่อสารระหว่างระบบเปิด(Open System International :OSI)

ชนิดของโปรโตคอล

1.ทีซีพีหรือไอพี (TCP/IP)

2.เอฟทีพี (FTP)

3.เอชทีทีพี (HTTP)

4.เอสเอ็มทีพี (SMTP)

5.พีโอพีทรี (POP3)

การถ่ายโอนข้อมูล

1.การถ่ายโอนข้อมูลแบบขนาน (Parallel transmission)
ทำได้โดยการส่งข้อมูลออกมาทีละ 1 ไบต์ หรือ 8 บิต จากอุปกรณ์ส่งไปยังอุปกรณ์รับ ตัวกลางระหว่างสองเครื่องจึงต้องมีช่องทางให้ข้อมูลเดินทางอย่างน้อย 8 ช่องทาง เพื่อให้กระแสไฟฟ้าผ่านโดยมากจะเป็นสายสัญญาณแบบขนาน ระยะทางของสายสัญญาณแบบขนานระหว่างสองเครื่องไม่ควรยาวเกิน 100 ฟุต

2. การถ่ายโอนข้อมูลแบบอนุกรม (Serial transmission)

การถ่ายโอนข้อมูลแบบนุกรม
อาจจะแบ่งตามรูปแบบรับ-ส่ง ได้ 3 แบบคือ

1) สื่อสารทางเดียว (simplex) ข้อมูลส่งได้ทางเดียวเท่านั้น บางครั้งก็เรียกว่า การส่งทิศทางเดียว (unidirectional data bus) เช่น การส่งข้อมูลไปยังเครื่องพิมพ์ การกระจายเสียงของสถานีวิทยุ เป็นต้น

2) สื่อสารสองทางครึ่งอัตรา (half duplex) ข้อมูลสามารถส่งได้ทั้งสองสถานี แต่จะต้องผลัดกันส่งและผลัดกันรับ จะส่งและรับพร้อมกันไม่ได้ เช่น วิทยุสื่อสารของตำรวจ เป็นต้น

3) สื่อสารสองทางเต็มอัตรา (full duplex) ทั้งสองสถานีสามารถรับและส่งได้ในเวลาเดียวกัน เช่น การสนทนาทางโทรศัพท์เป็นต้น

ส่วนประกอบและหลักการทำงานของคอมพิวเตอร์

ส่วนประกอบและหลักการทำงานของคอมพิวเตอร์

           คอมพิวเตอร์เป็นอุปกรณ์ที่มนุษย์ประดิษฐ์ขึ้นมาเพื่อช่วยอำนวยความสะดวกในด้านต่างๆ ไม่ว่าจะเป็นการคำนวณ การเก็บข้อมูล การตัดสินใจ การสร้างงานที่ยุ่งยากซับซ้อนและอื่นๆ ในอดีตคอมพิวเตอร์ถูกนำมาใช้ในงานด้านวิทยาศาสตร์เป็นส่วนใหญ่แต่ปัจจุบันคอมพิวเตอร์ได้พัฒนาและขยายขีดความสามารถสูงขึ้น มีการนำไปประยุกต์ใช้งานในหน่วยงานต่างๆ มากมาย เช่น งานราชการ ธุรกิจ การแพทย์ บันเทิง การทหาร เป็นต้น ซึ่งการเรียนรู้ขั้นตอนการทำงานของคอมพิวเตอร์จะช่วยทำให้เราสามารถเลือกใช้คอมพิวเตอร์ได้ตรงความต้องการและมีประโยชน์มากที่สุด

หลักการทำงานของคอมพิวเตอร์

หลักการทำงานของคอมพิวเตอร์จะเป็นไปตามที่โปรแกรมได้กำหนดไว้โดยตัวเครื่องคอมพิวเตอร์หรือที่เรียกว่าฮาร์ดแวร์ จะมีส่วนประกอบสำคัญขั้นพื้นฐาน 4 หน่วย คือ

  1.หน่วยรับข้อมูล (input unit)

  2.หน่วยประมวลผลกลาง (central processing unit)

  3.หน่วยความจำ (memory unit)

  4.หน่วยแสดงผล (output unit)

หน่วยรับข้อมูล (input unit)

       หน่วยรับข้อมูล (input unit) ทำหน้าที่รับข้อมูลจากผู้ใช้เข้าสู่คอมพิวเตอร์ เช่น ตัวอักษร ตัวเลข สัญลักษณ์ เป็นต้น โดยจะแปลงข้อมูลให้อยู่ในรูปแบบของสัญญาณไฟฟ้าที่คอมพิวเตอร์เข้าใจ นำมาจัดเก็บที่หน่วยความจำหลักและใช้ประมวลผลได้ อุปกรณ์หน่วยรับข้อมูลที่นิยมใช้ในปัจจุบัน มีดังนี้

1.แป้นพิมพ์ (keyboard)

         ทำหน้าที่รับข้อมูลโดยการกดแป้นพิมพ์ ซึ่งมีลักษณะแป้นพิมพ์ของเครื่องพิมพ์ดีดประกอบด้วยปุ่มสำหรับพิมพ์อักขระ ตัวเลข เรียกใช้ฟังก์ชั่นของซอร์ฟแวร์และควบคุมการทำงานร่วมกับปุ่มอื่นๆ

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

3.สแกนเนอร์ (scanner)

        เป็นอุปกรณ์ที่ใช้หลักการของการส่องแสงไปยังข้อความ สัญลักษณ์ หรือภาพที่ต้องการ ทำสำเนาภาพ จากนั้นข้อมูลที่ถูกอ่านจะถูกแปลงเป็นสัญญาณทางไฟฟ้าและเก็บเป็นไฟล์ภาพ 

4.อุปกรณ์จับภาพ (image capturing devices)

  เป็นอุปกรณ์ที่ใช้เก็บภาพต้นฉบับในรูปแบบดิจิตอล อุปกรณ์จับภาพมี 2 ชนิด คือ

  4.1 กล้องถ่ายภาพดิจิตอล

  4.2 กล้องถ่ายวิดีโอดิจิตอล

5.อุปกรณ์รับเสียง (audio-input devices)

         ทำหน้าที่รับข้อมูลเสียงทั้งเสียงพูด เสียงเพลง และเสียงอื่นๆ จากนั้นอุปกรณ์จะแปลงสัญญาณเสียงที่มนุษย์เขาใจให้อยู่ในรูปสัญญาณไฟฟ้า ที่คอมพิวเตอร์นำไปประมวลผลได้

หน่วยประมวลผลกลาง (central processing unit)

       หน่วยประมวลผลกลางเรียกอีกอย่างว่า ซีพียูทำหน้าที่ควบคุมการทำงานและประมวลผลข้อมูลที่ได้รับจากอุปกรณ์รับข้อมูลตามคำสั่งต่างๆ ในโปรแกรมที่เตรียมไว้และส่งต่อไปยังอุปกรณ์แสดงผลเพื่อสามารถเก็บหรืออ่านผลลัพธ์ได้หน่วยประมวลผลกลางเปรียบเสมือนเป็นสมองของคอมพิวเตอร์ในการทำหน้าที่ตัดสินใจหรือคำนวณจากคำสั่งที่ได้รับมา เช่น การเปรียบเทียบ การกระทำการทางคณิตศาสตร์ ฯลฯ

หน่วยประมวลผลกลาง ประกอบด้วยส่วนสำคัญ 3 ส่วน คือ

1.หน่วยคำนวณและตรรกะ (Arithmetic & Logical Unit : ALU)

2.หน่วยควบคุม (Control Unit)

3.หน่วยความจำหลัก (Main Memory)

หน่วยความจำ (memory unit)

           หน่วยความจำ(Memory Unit) เป็นที่เก็บโปรแกรมข้อมูลและผลลัพธ์ไว้ในคอมพิวเตอร์ รวมถึงสื่อข้อมูลที่ช่วยในการจดจำ  เช่น แผ่นบันทึกข้อมูล หน่วยความจำแบ่งออกเป็น 2 ประเภท คือ             
 1.หน่วยความจำหลัก (Main Memory Unit)
          อยู่ภายในตัวเครื่องจะทำงานเชื่อมต่อกับหน่วยประมวลผลกลางและหน่วยประมวลผลกลางสามารถใช้งานได้โดยตรงหน่วยความจำชนิดนี้จะเก็บข้อมูลและชุดคำสั่ง ในระหว่างการประมวลผลและมีกระแสไฟฟ้าสารกึ่งตัวนำหน่วยความจำชนิดนี้มีขนาดเล็กราคาถูกและสามารถให้หน่วยประมวลผลกลางนำข้อมูลมาเก็บ และเรียกค้นได้อย่างรวดเร็วหน่วยความจำของคอมพิวเตอร์ประกอบด้วยวงจรอิเล็กทรอนิกส์ที่รับและส่งสัญญาณไฟฟ้าในรูปแบบของรหัส ความจุไม่ใหญ่มาก นักโดยมีหน้าที่สำคัญ คือ เรียกใช้และเก็บชุดคำสั่งต่างๆ ที่ใช้ในการประมวลจากหน่วยความจำสำรอง หน่วยความจำหลักแบ่งตามสภาพการใช้งานเป็น 2 ประเภท แบ่งออกเป็น
        
         - ROM (Read Only memory   
           หมายถึง  หน่วยความจำที่จะถูกอ่านได้อย่างเดียวเท่านั้น โดยจะเก็บคำสั่งหรือโปรแกรมไว้อย่างถาวร แม้ปิดเครื่องก็จะไม่ถูกลบไม่ต้องไฟฟ้าเลี้ยง
         - RAM (Random access memory)   
           หมายถึง  หน่วยความจำที่ใช้ในการจดจำข้อมูลหรือคำสั่งขณะที่เครื่องทำงานความจำประเภทนี้ต้องอาศัยไฟฟ้าในการทำงานเพื่อไม่ให้ข้อมูลสูญหาย ซึ่งหากไฟฟ้าดับข้อมูลที่อยู่ในหน่วยความจำจะหายไป

  2.หน่วยความจำสำรอง (Secondary Storage)
          เปรียบเสมือนสมุดบันทึกสำหรับเก็บโปรแกรมและข้อมูลไว้ใช้ใน โอกาสต่อไป หน่วยความจำสำรองหรือหน่วยความจำรอง (Secondary Storage Unit)  ทำหน้าที่เก็บข้อมูลตามคำสั่งของผู้ใช้ ซึ่งจะมีพื้นที่หรือความจุมากกว่าหน่วยความจำหลัก ลักษณะในการเก็บข้อมูลจะเป็นแบบถาวร คือ ข้อมูลจะไม่สูญหายไปเมื่อไม่มีกระแสไฟฟ้าหรือปิดเครื่องคอมพิวเตอร์ จึงเหมาะสำหรับการเก็บข้อมูลที่มีขนาดใหญ่และเก็บข้อมูลไว้ใช้ในภายหลังฮาร์ดแวร์ที่ทำหน้าที่ในหน่วยความจำสำรองที่ใช้ในปัจจุบันมีหลายประเภท

ฮาร์ดดิสก์

ออปติคัลดิสก์

เอ็กซ์เทอร์นอล

แฟลชไดร์ฟ

หน่วยแสดงผล (output unit)

หน่วยแสดงผล(output unit) เป็นอุปกรณ์ที่ใช้ในการแสดงผลลัพธ์หรือสารสนเทศที่ผ่านการประมวลผลโดยจะแปลงผลลัพธ์จากสัญญาณไฟฟ้าของเครื่องคอมพิวเตอร์ให้กลายเป็นรูปแบบที่มนุษย์เข้าใจได้ เช่น ตัวอักษร ตัวเลข สัญลักษณ์พิเศษ รูปภาพ ภาพเคลื่อนไหว และเสียง เป็นต้น

อุปกรณ์หน่วยแสดงผลที่นิยมใช้ในปัจจุบันมี ดังนี้

1.จอภาพ (monitor)

         เป็นอุปกรณ์ที่ใช้ในการแสดงผลลัพธ์ในรูปแบบตัวอักษร ตัวเลข ภาพนิ่งและภาพเคลื่อนไหวได้ในขณะที่เปิดเครื่องคอมพิวเตอร์เท่านั้นแต่เมื่อปิดเครื่องคอมพิวเตอร์จะไม่สามารถเห็นผลลัพธ์ได้

2.เครื่องพิมพ์ (printer) 

           เป็นอุปกรณ์ที่แสดงผลลัพธ์ในรูปข้อมูล รายงาน รูปภาพลงบนกระดาษสามารถสัมผัสและเก็บรักษาไว้ได้นาน

3.ลำโพง (speaker) เป็นอุปกรณ์ที่แสดงผลลัพธ์รูปแบบเสียง

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

โครงสร้างพื้นฐานของ 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

รูปแบบของตัวอักษร

หัวเรื่อง 
รูปแบบ <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 ไปจนถึง +7 
ตัวหนา (Bold)
รูปแบบ <B>ข้อความ</B>
ตัวอย่าง <B>bcoms.net</B>จะทำให้ข้อความที่อยู่ใน <B>....</B> มีความหนาเกิดขึ้น เช่น bcoms.net
ตัวเอน (Itatic)รูปแบบ <I>ข้อความ</I>ตัวอย่าง <I>bcoms.net</I>ทำให้ข้อความที่อยู่ใน<I>....</I> เกิดเป็นตัวเอนขึ้น เช่น bcoms.net

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

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

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

ตัวอักษรแบบพิเศษ 
รูปแบบ 
          <      แทนด้วย     &lt;
          >      แทนด้วย     &gt;
          &     แทนด้วย     &amp;
          "      แทนด้วย     &quot;

เว้นวรรค แทนด้วย &nbsp;ตัวอย่างเช่น &quot;bcoms.net&quot; จะเป็น "bcoms.net"

การจัดรูปแบบโฮมเพจ

การขึ้นบรรทัดใหม่
รูปแบบ <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    =    n  เป็นการกำหนดกรอบให้ รูปภาพ n มีค่ามาก กรอบจะ มีความหนา มากขึ้น
HEIGHT      =    n  เป็นการกำหนดความสูงของภาพ
WIDTH        =    n  เป็นการกำหนดความกว้างของภาพถ้าต้องกาให้ภาพได้สัดส่วให้กำหนดเป็น                                     เปอร์เซนต์โดยไม่จำกัดความสูง
VSPACE     =     n  กำหนด ระยะห่างบน-ล่างของภาพ
HSPACE     =     n  กำหนด ระยะห่าง ซ้าย - ขวา ของภาพ
SRC            =     ใส่รูปภาพที่ต้องการลงไป
ALT             =      text ใส่ข้อความเพื่อเป็นคำอธิบายรูปภาพที่นำมาวางสำหรับผู้ใช้อินเตอร์เน็ตแบบ                                เท็กซ์

ข้อสังเกต ALIGN ไม่สามารถ กำหนดให้ รูปภาพ ไปปรากฎยังกึ่งกลาง ของจอภาพ ได้ ถ้าต้อง การให้ อยู่ตำแหน่งดังกล่าว ให้ใช้คำสั่ง <CENTER>...<CENTER>

การเชื่อมโยงข้อมูล (Link)

การเชื่อมโยงภายในเว็บไซต์
รูปแบบ <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>