วันจันทร์ที่ 1 กันยายน พ.ศ. 2551

โปแกรมระบบ HTML

ความหมายของ HTML
HTML หรือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ, รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมเบราเซอร์ แต่ละ Tag อาจจะมีส่วนขยายที่เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผล ของเว็บได้ด้วย
HTML เป็นภาษาที่ถูกพัฒนาโดย World Wide Web Consortium (W3C) จากแม่แบบของภาษา SGML (Standard Generalized Markup Language) โดยตัดความสามารถบางส่วนออกไป เพื่อให้สามารถทำความเข้าใจและเรียนรู้ได้ง่าย และด้วยประเด็นดังกล่าว ทำให้บริการ WWW เติบโตขยายตัวอย่างกว้างขวางตามไปด้วย
Tag
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
Tag เดี่ยว
เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น

,
เป็นต้น
Tag เปิด/ปิด
เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash
( / ) นำหน้าคำสั่งใน Tag นั้นๆ เช่น , เป็นต้น
Attributes
Attributes เป็นส่วนขยายความสามารถของ Tag จะต้องใส่ภายในเครื่องหมาย < > ในส่วน Tag เปิดเท่านั้น Tag คำสั่ง HTML แต่ละคำสั่ง จะมี Attribute แตกต่างกันไป และมีจำนวนไม่เท่ากัน การระบุ Attribute มากกว่า 1 Attribute ให้ใช้ช่องว่างเป็นตัวคั่น เช่น Attributes ของ Tag เกี่ยวกับการจัดพารากราฟ คือ

ประกอบด้วย ALIGN="Left/Right/Center/Justify"
ซึ่งสามารถเขียนได้ดังนี้

...


หรือ

...


หรือ

...


โครงสร้างเอกสาร HTML
ไฟล์เอกสาร HTML ประกอบด้วยส่วนประกอบสองส่วนคือ Head กับ Body โดยสามารถเปรียบเทียบได้ง่ายๆ ก็คือ ส่วน Head จะคล้ายกับส่วนที่เป็น Header ของหน้าเอกสารทั่วไป หรือบรรทัด Title ของหน้าต่างการทำงานในระบบ Windows สำหรับส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้นๆ โดยทั้งสองส่วนจะอยู่ภายใน Tag …
โครงสร้างไฟล์ HTML
ส่วนหัวเรื่องเอกสารเว็บ (Head Section)
Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้นๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ (Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ

ข้อความอธิบายชื่อเรื่องของเว็บ




ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา, เอียง หรือสี และควรใช้เฉพาะภาษาอังกฤษที่มีความหมายครอบคลุมถึงเนื้อหาของเอกสารเว็บ หรือมีลักษณะเป็นคำสำคัญในการค้นหา (Keyword)
การแสดงผลจาก Tag TITLE บนเบราเซอร์จะปรากฏข้อความที่กำกับด้วย Tag TITLE ในส่วนบนสุดของกรอบหน้าต่าง (ใน Title Bar ของ Window นั่นเอง)
Tag META จะไม่ปรากฏผลบนเบราเซอร์ แต่จะเป็นส่วนสำคัญ ในการทำคลังบัญชีเว็บ สำหรับผู้ให้บริการสืบค้นเว็บ (Search Engine) และค่าอื่นๆ ของการแปลความหมาย
การพิมพ์ชุดคำสั่ง HTML สามารถพิมพ์ได้ทั้งตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ หรือผสม การย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถกระทำได้อิสระ โปรแกรมเบราเซอร์จะไม่สนใจเกี่ยวกับระยะเว้นบรรทัดหรือย่อหน้า หรือช่องว่าง
ส่วนเนื้อหาเอกสารเว็บ (Body Section)
Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆ

ส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่มักจะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag … และแบ่งกลุ่มคำสั่งได้ดังนี้
กลุ่มคำสั่งเกี่ยวกับการจัดการพารากราฟ
กลุ่มคำสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร
กลุ่มคำสั่งการทำเอกสารแบบรายการ (List)
กลุ่มคำสั่งเกี่ยวกับการทำลิงค์
กลุ่มคำสั่งจัดการรูปภาพ
กลุ่มคำสั่งจัดการตาราง (Table)
กลุ่มคำสั่งควบคุมเฟรม
กลุ่มคำสั่งอื่นๆ
เริ่มสร้างเว็บเพจด้วย NotePad
การสร้างเอกสาร HTML หรือเว็บเพจ เป็นเรื่องที่ง่ายและสะดวก เพียงแต่เปิดโปรแกรม NotePad แล้วพิมพ์คำสั่ง HTML ลงไป จากนั้นก็ทำการจัดเก็บไฟล์โดยตั้งชื่อเป็นภาษาอังกฤษ ตัวพิมพ์เล็ก และกำหนดนามสกุลเป็น .html (ในตอนพิมพ์ชื่อไฟล์ แนะนำให้พิมพ์ชื่อและนามสกุลของไฟล์ไว้ในเครื่องหมายคำพูด เพื่อป้องกันมิให้โปรแกรม NotePad เติมนามสกุล .txt ต่อท้าย) จากนั้นก็เปิดโปรแกรมเบราเซอร์ เช่น IE หรือ Netscape แล้วเปิดไฟล์เอกสารเว็บที่สร้าง เพื่อดูผล


...............




คำสั่งในการเริ่มต้นในการสร้างเว็บเพจ
คำสั่งเริ่มต้น
..........

คำสั่ง เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML
ส่วนหัวของโปรแกรม
..........
คำสั่ง เป็นคำสั่งที่ใช้กำหนดข้อความในส่วนที่เป็นชื่อเรื่องของไฟล์ HTML และภายในคำสั่ง ... จะมีคำสั่งย่อยอีกคำสั่งหนึ่งคือ ........
กำหนดข้อความในส่วนหัวของโปรแกรมหรือไตเติลบาร์
..........
คำสั่ง เป็นคำสั่งที่แสดงชื่อของเอกสาร หรือชื่อเรื่องของไฟล์ HTML ซึ่งข้อความภายในคำสั่งจะปรากฎหรือแสดงผลในส่วนของไตเติลบาร์ (Title Bar) ของโปรแกรมเว็บเบราเซอร์ แต่จะไม่แสดงในส่วนของการแสดงผลในโปรแกรมเว็บเบราเซอร์ <br />ส่วนเนื้อหาของโปรแกรม <br /><BODY>..........</BODY> <br />คำสั่งนี้เป็นส่วนที่สำคัญในการแสดงผลในเว็บเบราเซอร์ ซึ่งจะประกอบไปด้วยตัวอักษร รูปภาพกราฟิกต่างๆ <br />การกำหนดสีของพื้นหลังของตัวอักษร <br />การกำหนดสีพื้นหลังและการกำหนดสีของตัวอักษรนั้น จะทำการเขียนในส่วนของคำสั่ง <BODY> โดยเราจะใช้แอตทริบิวต์มาเป็นตัวกำหนด <br />การกำหนดสีของพื้นหลัง - การกำหนดสีพื้นหลังนั้น เราสามารถมีรูปแบบการกำหนดสีพื้นหลังได้อยู่ 2 รูปแบบ <br />ระบุชื่อของสีที่ต้องการ อาทิเช่น red, green, yellow, blue เป็นต้น <br /><HTML> <br /><HEAD> <br /> <TITLE>การกำหนดสีพื้นหลังโดยการกำหนดสี


การกำหนดสีพื้นหลังโดยการกำหนดสี



การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 หรือเรียกว่าหลักการผสมสีแบบ RBG


การกำหนดสีพื้นหลังโดยการกำหนดสี


การกำหนดสีพื้นหลังโดยใช้หลัก "#RBG"


การกำหนดสีของตัวอักษร
การกำหนดสีของตัวอักษรนั้น จะทำการเขียนในส่วนของคำสั่ง โดยเราจะใช้แอตทริบิวต์ Text มาเป็นตัวกำหนด

เราสามารถมีรูปแบบการกำหนดสีได้อยู่ 2 รูปแบบ
ระบุชื่อของสีที่ต้องการ อาทิเช่น red, green, yellow, blue เป็นต้น


การกำหนดสีตัวอักษร


การกำหนดสีตัวอักษร


การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 หรือเรียกว่าหลักการผสมสีแบบ RBG


การกำหนดสีตัวอักษร



การกำหนดสีตัวอักษร


ข้อความลักษณะหัวเรื่อง (Heading)
....Heading Text ...
ข้อความลักษณะหัวเรื่อง จะกำกับด้วยแท็ก โดย
n คือตัวเลขแสดงขนาดของตัวอักษร ค่าของ n นั้นจะมีค่าอยู่ที่ 1 - 6
n = 1 จะมีขนาดตัวอักษรหัวเรื่องใหญ่สุด
n = 6 จะมีขนาดตัวอักษรหัวเรื่องเล็กสุด
สามารถเพิ่ม/ลดขนาดโดยใช้เครื่องหมาย + หรือ - นำหน้าตัวเลขได้ เช่น -1 หรือ +5 เป็นต้น


การกำหนด Heading


Computer - Default Size

Computer - H1


Computer - H2


Computer - H3


Computer - H4


Computer - H5

Computer - H6



ผลลัพธ์
Computer - Default Size
Computer - H1
Computer - H2
Computer - H3
Computer - H4
Computer - H5
Computer - H6
หมายเหตุ ปัจจุบันการพัฒนาเว็บไซต์มักจะกำหนดขนาดของตัวอักษร (Font size) ให้มีขนาดคงที่ เช่น 1 หรือ 14-16 Point เพื่อให้แสดงผลได้สวยงาม ได้สัดส่วนเดียวกัน จึงไม่นิยมใช้แท็ก ควบคุม แต่จะเปลี่ยนไปใช้ในลักษณะการมาร์ค (Mark) เพื่อควบคุมกับโปรแกรมมิ่ง เช่น XML หรือ CSS แทน
การตกแต่งข้อความ
แท็กที่ใช้ตกแต่งข้อความเพื่อเน้นคำ หรือข้อความสั้นๆ หรือให้ดูสวยงาม มาตรฐาน HTML 4.0 มีแท็กสำหรับใช้ตกแต่งข้อความมากมาย ทำได้แทบจะครบทุกรูปแบบ และสามารถแบ่งออกเป็น 2 กลุ่มใหญ่ คือ
Logical Format - เป็นแท็กที่มีชื่อที่สื่อความหมาย ซึ่งเบราเซอร์แต่ละยี่ห้อจะแปลแท็กเหล่านี้ต่างกัน และให้ผลเป็นเว็บเพจที่มีหน้าตาต่างกัน แต่ก็แตกต่างกันไม่มากนัก โดยยังคงให้ผลใกล้เคียงกับชื่อของแท็กนั้นๆ เช่น หมายถึงข้อความที่ต้องการเน้นเป็นพิเศษ ซึ่งเว็บเบราเซอร์อาจจะแสดงเป็นตัวหนา หรือตัวเอียงก็ได้ ขึ้นกับเบราเซอร์แต่ละตัว และการกำหนดสไตล์ชีท
Fixical Format - แท็กที่กำหนดลักษณะตายตัว ทุกเบราเซอร์จะแปลความหมายแท็กเหล่านี้เหมือนกันหมด เว็บเพจที่ได้จึงเหมือนกัน เช่น หมายถึงข้อความแบบตัวหนา
การกำหนดตัวอักษรให้มีความหนา
..........
ใช้กำหนดข้อความที่อยู่ภายในคำสั่ง ให้แสดงผลด้วยตัวอักษรแบบตัวหนา (bold) มีจุดประสงค์เพื่อเน้นข้อความในประโยคนั้น


การกำหนดตัวหนา


ตัวอักษรปรกติ COMPUTER
ตัวอักษรหนา COMPUTER








การกำหนดตัวอักษรให้ขีดเส้นใต้
..........
ใช้แสดงข้อความแบบขีดเส้นใต้ (underline) ทั้งนี้เพื่อเน้นข้อความในประโยคนั้น


การกำหนดการขีดเส้นใต้


ตัวอักษรปกติ COMPUTER
ตัวอักษรที่ขีดเส้นใต้ COMPUTER


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

การกำหนดอักษรเอน


ตัวอักษรปกติ COMPUTER
ตัวอักษรเอน COMPUTER


การกำหนดตัวอักษรกระพริบ
..........
ใช้กำหนดแสดงข้อความแบบกระพริบ จะมีลักษณะการแสดงผลเป็นแบบติด - ดับ สลับกันไป



การกำหนดตัวอักษรกระพริบ


COMPUTER
แสดงผลได้เฉพาะบน Netscape


หมายเหตุ ในการกำหนดตัวอักษรกระพริบนั้น เราไม่สามารถเปิดในโปรแกรมเว็บเบราเซอร์ที่เป็น Internet Explorer ได้

การกำหนดรูปแบบของตัวอักษร
..........

เป็นการกำหนดฟอนต์ของตัวอักษรในเว็บเพจ ซึ่งเราสามารถกำหนดได้ด้วยคุณสมบัติที่ชื่อว่า FACE และตามด้วยชื่อฟอนต์ที่เราต้องการ เอกสารเว็บอนุญาตให้กำหนดฟอนต์ ได้หลายฟอนต์ โดยเบราเซอร์จะมีการตรวจสอบการใช้ฟอนต์ให้อัตโนมัติ
ฟอนต์สำหรับข้อความภาษาไทย/อังกฤษ ที่เหมาะสมได้แก่ MS Sans Serif, Microsoft Sans Serif, Thonburi
ฟอนต์สำหรับข้อความภาษาอังกฤษที่เหมาะสม คือ Arial, Helvetica, sans-serif


FONT FACE


ชนิดของฟอนต์ปกติ

ฟอนต์ชื่อ MS Sans Serif


ผลลัพธ์
ชนิดของฟอนต์ปกติ
ฟอนต์ชื่อ MS Sans Serif
การกำหนดสีของตัวอักษร
..........
ใช้การกำหนดให้ตัวอักษรหรือข้อความมีสีอื่นต่างจากสีตัวอักษรทั่วไป หรือต้องการเน้นสีสันเพื่อเพิ่มจุดเด่น ทำให้แปลกแตกต่างไป การระบุค่าสี สามารถใช้ได้ทั้งระบุชื่อสี หรือค่าสีในระบบเลขฐาน 16


FONT COLOR


Computer
Computer
Computer


การกำหนดขนาดของตัวอักษร
..........
การกำหนดขนาดของตัวอักษรในเว็บเพจนั้น เราสามารถกำหนดขนาดของตัวอักษรได้อยู่ 2 รูปแบบคือ กำหนดเป็นตัวเลขซึ่งจะมีค่า 1 - 7 โดยค่ามาตรฐานจะมีค่าจะอยู่ที่ 3 ค่าตัวเลขที่เป็น 1 และ 2 นั้นจะเป็นการย่อขนาดของตัวอักษร และค่าตัวเลข 4 ถึง 7 นั้นจะเป็นการขยายขนาดของตัวอักษร


FONT SIZE


Computer
Computer
Computer
Computer
Computer
Computer
Computer


กำหนดโดยใช้เครื่องหมายบวกและเครื่องหมายลบ โดยสามารถกำหนดได้ดังีน้ ถ้าเป็นการย่อขนาดของตัวอักษรนั้นจะใช้เครื่องหมายลบ ซึ่งจะใช้ไม่เกิน - 2 ถ้าเป็น การขยายขนาดของตัวอักษรนั้นจะใช้เครื่องหมายบวกซึ่งจะใช้ไม่เกิน + 4


FONT SIZE


Computer
Computer
Computer
Computer
Computer
Computer
Computer


คำสั่งลดขนาดตัวอักษรลง 1 ระดับ
..........
คำสั่ง < SMALL > เป็นคำสั่งที่สามารถลดขนาดของตัวอักษรลง 1 ระดับจากขนาดของอักษรปัจจุบันได้ทันที โดยไม่ต้องไประบุด้วยคำสั่ง < font size >



SMALL


Computer
Computer
Computer


คำสั่งเพิ่มขนาดของตัวอักษร 1 ระดับ
..........

คำสั่ง เป็นคำสั่งที่สามารถเพิ่มขนาดของตัวอักษรขึ้น 1 ระดับจากตัวอักษรปัจจุบันได้ทันที โดยไม่ต้องใช้คำสั่ง



BIG


Computer
Computer
Computer


คำสั่งที่กำหนดตัวอักษรยกระดับ
..........
คำสั่ง < SUP > ย่อมาจาก (superscript) เป็นคำสั่งที่จะกำหนดให้ตัวอักษร หรือข้อความยกระดับสูงขึ้นกว่าระดับปกติและมีขนาดเล็ก



SUPERSCRIPT


Computer
A2 = A2
Computer


คำสั่งที่กำหนดตัวอักษรพ่วงท้าย (ตัวห้อย)
..........
คำสั่ง < SUB > ย่อมาจาก (subscript) เป็นคำสั่งที่จะกำหนดให้ตัวอักษร หรือข้อความพ่วงท้ายจะมีลักษณะต่ำกว่าระดับปกติและมีขนาดเล็ก


SUBSCRIPT


Computer
H20 = H2O
Computer

การกำหนดตัวอักษรให้ขีดเส้นใต้
..........
ใช้แสดงข้อความแบบขีดเส้นใต้ (underline) ทั้งนี้เพื่อเน้นข้อความในประโยคนั้น


การกำหนดการขีดเส้นใต้


ตัวอักษรปกติ COMPUTER
ตัวอักษรที่ขีดเส้นใต้ COMPUTER



หมายเหตุ แทรกนี้ไม่นิยมใช้เนื่องจากอาจก่อให้เกิดความสับสนกับข้อความที่เป็นจุดลิงก์ได้
การกำหนดตัวอักษรให้มีการเอน
..........

ใช้กำหนดข้อความที่อยู่ภายในคำสั่งให้แสดงผลด้วยตัวอักษรแบบเอน (Italic) มีจุดประสงค์เพื่อเน้นข้อความในประโยคนั้น

การกำหนดอักษรเอน
AD>

ตัวอักษรปกติ COMPUTER
ตัวอักษรเอน COMPUTER

ไม่มีความคิดเห็น: