โปรแกรมระบบHTML

แนะนำก่อนเขียนภาษา HTML
สิ่งที่ต้องเตรียมเมื่อต้องการเขียนโฮมเพจ
ก่อนที่จะลงมือเขียนโปรแกรมภาษา HTML เพื่อสร้างเว็บเพจ หรือ โฮมเพจ ได้นั้น ต้อง เช็ค พร้อม ของอุปกรณ์ เครื่องมือ สำหรับการ สร้าง ก่อนว่า มีครบหรือไม่
1. เครื่องคอมพิวเตอร์ ขนาดตั้งแต่ 486 หรือ pentium ขึ้นไป
2. หน่วยความจำไม่น้อยกว่า 8 MB
3. พื้นที่ฮาร์ดดิสต์ขนาดไม่น้อยกว่า 20 MB
4. Mouse
5. โปรแกรม Internet Explorer Version 3.0 ขึ้นไป
6. โปรแกรม Netscape Navigator Version 3.0 ขึ้นไป
7. โปรแกรม Notepad

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

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

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

ตัวเปิด

• ข้อมูลที่นำมาแสดง
  
• ข้อมูลที่นำมาแสดง
  

ตัวปิด
เป็นการแสดงผลโดยใช้สัญลักษณ์ในการกำกับรายการต่าง ๆ และเราสามารถกำหนดลักษณะของสัญลักษณ์ได้โดยใช้คำสั่ง Type=N ซึ่ง N=circle=วงกลม,disc=วงกลมทึบ หรือ square=สี่เหลี่ยม โดยอยู่ในคำสั่ง ของ

ถ้าต้องการ ให้สัญลักษณ์ เหมือนกัน ทุกรายการ แต่ ถ้าต้องการ ให้แต่ละรายการ ไม่เหมือนกันให้ใส่ในส่วนของ
• เช่น
  
  
  
  • รายการที่ 1
    
  • รายการที่ 2
    
  • รายการที่ 3
    
  
  เว็บเบราเซอร์ จะแสดง ออกมา เป็น
  รายการที่ 1
  รายการที่ 2
  รายการที่ 3
  รายการแบบใช้ตัวเลขกำกับ (Numbered lists)
  รูปแบบ
  
  ตัวเปิด
  
  1. ข้อมูลที่นำมาแสดง
     
  2. ข้อมูลที่นำมาแสดง
     
  ตัวปิด
  เป็นการกำหนดรายการโดยใช้ตัวเลขกำกับเช่น 1 หรือ i และเราสามารถกำหนดค่าเริ่มต้นไว้ที่
  โดยใส่ค่า START=n โดย n= ตัวเลขที่ต้องการเริ่ม และ TYPE=n โดย n= a , A , i , I ซึ่งเป็นชนิดของค่าเริ่มต้น ตามตัวอย่างจะเริ่ม ต้นที่ 3 ชนิดเป็น a เช่น
  
  
  
  3. รายการที่ 1
     
  4. รายการที่ 2
     
  5. รายการที่ 3
     
  
  
  เว็บเบราเซอร์ จะแสดง ออกมาเป็น
  รายการที่ 1
  รายการที่ 2
  รายการที่ 3
  เรายังสามารถใช้คำสั่ง TYPE=n ในส่วนของ
  1. ได้ แต่ค่าเริ่มต้นต้องเป็นไปตามค่าดังกล่าวข้างต้นให้สังเกตตามตัวอย่าง
     
     
     1. รายการที่ 1
        
     2. รายการที่ 2
        
     3. รายการที่ 3
        
     
     
     1. รายการที่ 1
        
     2. รายการที่ 2
        
     3. รายการที่ 3
        
     
     
     เว็บเบราเซอร์ จะแสดง ออกมา เป็น
     รายการที่ 1
     รายการที่ 2
     รายการที่ 3
     รายการที่ 1
     รายการที่ 2
     รายการที่ 3
     รายการแบบกลุ่ม (Preformatted Text)
     รูปแบบ

     ....

     
     การใช้ คำสั่งนี้ไม่สามารถใช้กับภาษาไทยได้ ใช้ได้แต่ภาษาอังกฤษอย่างเดียวข้อความที่อยู่ภายใน คำสั่ง จะมีขนาดเท่ากัน ทุกตัว แสดงข้อมูลที่อยู่ในรูปของตารางหรือรายงานแผนผังอย่างง่าย ๆ
     --------------------------------------------------------
     Date Time Note
     --------------------------------------------------------
     20 08.52 -
     25 09.50 -
     26 10.00 -
     28 12.00 -
     ---------------------------------------------------------
     
     รายการแบบ Extended Quotations
     รูปแบบ

     ......

     
     คำสั่งนี้สามารถแก้ไขปัญหาการใช้ภาษาไทย ได้การแสดงผลข้อความจะเยื้องขวาและจัดข้อความให้ตัวอักษรตัวแรก ของบรรทัดเริ่มที่ตำแหน่งเดียวกันเช่น
     

     Omit needless world.

     Vigorous writeing is concise.A sentence should contain no annecessary words.

     ------Willian Strunk,-------

     
     
     เว็บเบราเซอร์ จะแสดงผลเป็น
     
     Omit needless world.
     
     Vigorous writeing is concise.A sentence should contain no annecessary words.
     
     ------Willian Strunk,-------
     
     การแสดงผลแบบ Address
     รูปแบบ
     ....
     
     ใช้เมื่อ ต้องการ จะพิมพ์ ที่อยู่ของเราเพื่อให้ผู้ที่เข้ามาใช้เว็บเพจสามารถติดต่อกับเราได้ รูปแบบตัวอักษรเป็นตัวเอน เช่น Liberta Co.,Ltd.
     การใส่รูปภาพลงในเว็บเพจ
     เมื่อเริ่ม เข้าไป ยังโฮมเพจ ของ เว็บไซต์ แต่ละแห่ง บนอินเตอร์เนต สิ่งแรก ที่มัก เป็นที่ ติดตา ของผู้ ใช้ บริการ ก็คือ การที่ แต่ละ โฮมเพจ จะมี รูปภาพ สวย ๆ แสดง ออกมา มีการ จัดรูปภาพ และข้อความ ที่เป็น ระเบียบ ทำให้อ่าน ง่าย เข้าใจ เนื้อหา ที่ต้องการ ได้อย่าง รวดเร็ว
     
     ก่อนที่ เราจะ มารู้ ถึงคำสั่ง ในการ ใส่รูปภาพ ลงใน เว็บเพจ นั้น เราต้อง มารู้ จัก เกี่ยวกับ รูปภาพ ที่เรา จะนำมา ใส่ ใน เวบเพจ เสียก่อน รูปภาพ ที่จะ นำมา ใช้ใส่ ลง ในเวบเพจ นั้น ส่วนมาก มีนามสกุล เป็น GIF และ JPG ไฟล์
     
     รูปภาพ แบบ GIF ย่อมาจาก Graphics Interchange Format เป็นไฟล์ ชนิดบิตแมป (Bitmap) เป็นเทคนิค การเก็บภาพ โดยให้ จุดสี(pixet) ต่าง ๆ เรียง ต่อกัน จนเกิด เป็นภาพ ไฟล์ GIF นี้ ส่วนใหญ่ จะนิยม ใช้กับ ภาพถ่าย และภาพการ์ตูน แสดงผลเป็น ภาพนิ่ง แต่ใน ปัจจุบันมี โปรแกรม สำหรับทำ หน้าที่ รวบรวม ภาพ GIF หลาย ๆ ภาพ เข้าเป็น ไฟล์เดียวกัน เมื่อนำ ภาพมา แสดง ทำให้เกิด เป็นภาพ เคลื่อนไหวขึ้น
     ไฟล์รูปแบบ JPG ย่อมาจาก Joint Photographic Expers Group
     เป็นไฟล์ใน รูปแบบ ที่ผ่าน กระบวน การบีบย่อย ข้อมูล มาก่อน มีการ นำเอา ข้อมูล ส่วนที่ ไม่สำคัญ ออกไป แล้วทำการ บีบอัด ข้อมูล ในอัตรา ส่วน 10:1 โดยขนาด ของไฟล์ ที่เรา นำมา ใช้งาน นั้น อาจมีขนาด เหลือเพียง 10 - 30 % ของขนาดไฟล์ ก่อนจะมีการ บีบ ย่อ ข้อมูล ขนาดของ การบีบ ข้อมูล มีได้ 3 ระดับ (Hight,Middle,Low Compression) ไฟล์ที่ มีการ บีบย่อ ข้อมูล มากที่สุด จะได้ ไฟล์ที่มีขนาด เล็กที่สุด แต่คุณภาพ ก็ลดลง ตาม ไปด้วย หากต้องการ ภาพที่มี คุณภาพดี ที่สุด ขนาดของ ไฟล์ก็จะ ใหญ่ ที่สุดเช่นกัน
     
     การใส่รูปภาพลงในเว็บเพจ
     รูปแบบ
     ALIGN=align-type(ตำแหน่ง) เป็นการ กำหนด ตำแหน่ง รูปภาพ ถ้าภาพไม่ ใหญ่ ข้อความ นั้นจะ อยู่ ที่ตำแหน่ง ส่วนล่าง ของภาพ ทางขวา มือเสมอ เราสามารถ กำหนดได้ โดยใช้คำต่าง ๆ เหล่านี้
     LEFT = วางภาพที่ตำแหน่งทางซ้าย
     RIGHT = วางภาพที่ตำหน่งทางขวา
     TOP = วางภาพ ที่ตำแหน่ง ด้านบน
     MIDDLE = วางภาพ ที่ตำหน่ง กึ่งกลาง
     BOTTOM= วางภาพ ที่ตำแหน่ง ด้านล่าง
     BORDER=n เป็นการ กำหนด กรอบให้ รูปภาพ n มีค่ามาก กรอบจะ มีความหนา มากขึ้น
     HEIGHT=n เป็นการ กำหนด ความสูง ของภาพ
     WIDTH=n เป็นการ กำหนด ความกว้าง ของภาพ ถ้าต้องการ ให้ภาพได้ สัดส่วน ให้กำหนด เป็นเปอร์เซนต์ โดยไม่ จำกัด ความสูง
     VSPACE=n กำหนด ระยะ ห่างบน ล่างของ ภาพ
     HSPACE=n กำหนด ระยะ ห่าง ซ้าย - ขวา ของภาพ
     SRC =ใส่รูปภาพที่ต้องการลงไป
     ALT =text ใส่ข้อ ความ เพื่อเป็น คำอธิบาย รูปภาพ ที่นำมาวาง สำหรับ ผู้ใช้ อินเตอร์เนต แบบเท็กซ์
     ข้อสังเกต ALIGN ไม่สามารถ กำหนดให้ รูปภาพ ไปปรากฎยังกึ่งกลาง ของจอภาพ ได้ ถ้าต้อง การให้ อยู่ตำแหน่งดังกล่าว ให้ใช้คำสั่ง ...
     การแสดงภาพฉากหลัง
     รูปแบบ BACKGROUND="picture"
     กำหนด แอตทริบิวต์ BACKGROUND="picture" ในคำสั่งของ เช่น
     การเชื่อมโยงข้อมูล (Link)
     เป็นที่ ทราบดี อยู่ แล้วว่า การที่ อินเตอร์เนต ได้รับความนิยม อย่างกว้างขวางอยู่ทั่วโลกนั้นเป็ ผลมาจากความ สามารถในการเชื่อมโยงข้อมูล จากฐานข้อมูล หนึ่ง ไปยังอีก ฐานข้อ มูลหนึ่ง ได้อย่างรวดเร็ว โดยสามารถ เชื่อมโยงข้อความ ได้ทั้ง จากภายใน แฟ้มเอกสาร ข้อมูลของตัวเอง และแฟ้มเอกสารข้อมูลภายนอกที่ต่างเว็บไซต์กัน
     ข้อความ ที่ถูกกำหนดให้เชื่อมโยงกับฐานข้อมูลอื่น ๆ บนเว็บเบราเซอร์จะแสดงผลเป็นตัวอักษร ที่มีสีแตกต่างจากอักษรทั่วไป และอาจจะมี ขีดเส้นใต้ข้อความนั้นด้วย โดยทั่วไป ตัวอักษรที่แสดง ผลอยู่บน เวบเบราเซอร์ จะมีสีดำ ปนขาว (หรือสีเทา) แต่สำหรับ ข้อความ ที่ใช้เป็นตัวเชื่อมข้อมูลนั้นจะเป็นตัวอักษร สีน้ำเงิน หรือ อย่างอื่น ตาม ที่สร้างขึ้นมาเมื่อเลื่อน เมาส์ ไปชี้ที่ ข้อความ ซึ่ มีการเชื่อมโยงของรูปแบบ ตัวชี้ จะเปลี่ยนจาก สัญลักษณ์ ลูกศร ไปเป็นรูป มือแทน และที่บริเวณแถบแสดงสถานะด้านล่าง จะแสดงถึงตำแหน่งของจุด หมายที่ ข้อความจะเชื่อมโยงไปให้เราเห็น
     ประเภทการเชื่อมโยง
     - การเชื่อมโยงภายในเว็บไซต์
     - การเชื่อมโยงข้อมูลนอกเว็บไซต์
     - การเชื่อมโยงข้อมูล FTP
     - การเชื่อมโยงข้อมูล E-Mail
     
     
     การเชื่อมโยงภายในเว็บไซต์
     รูปแบบ ข้อความ
     ตัวอย่าง ทิปคอมพิวเตอร์
     *** หมายเหตุ ถ้าลิงค์อยุ่คนละโฟลเดอร์ ทิปคอมพิวเตอร์
     การเชื่อมโยงข้อมูลนอกเว็บไซต์
     รูปแบบ ข้อความ
     ตัวอย่าง บีคอม
     *** หมายเหตุ คุณสามารถสั่งให้เบราเซอร์เปิดหน้าใหม่ได้โดยกำหนด target="_blank"
     ตัวอย่าง Driver Zone
     การเชื่อมโยงข้อมูล FTP
     รูปแบบ ข้อความ
     HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server
     FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้
     ตัวอย่าง Download
     การเชื่อมโยงข้อมูล E-Mail
     รูปแบบ ข้อความ
     ตัวอย่าง bcoms_net@hotmail.com