ภาษา HTML นั้นไม่ได้มีรูปแบบเป็นภาษาคอมพิวเตอร์ ที่ยากจะเข้าใจ เช่น ภาษา C, Pascal, Java เป็นต้น เพราะภาษา HTML มีรูปแบบคำสั่งง่ายๆ คล้ายกับภาษาที่ใช้กันอยู่ทั่วๆไป เป็นรูปแบบตายตัว และเข้าใจง่าย โดยภาษา HTML นั้น จะมีการใช้คำสั่งอยู่ภายใต้ เครื่องหมาย < > และจะใช้ เครื่องหมาย / เพื่อจบคำสั่งนั้นๆ โดยหลักในการเขียนเว็บเพจนั้นผมขอเสนอแนะขั้นตอน ซึ่งเป็นทางเลือกหนึ่งในการสร้างเว็บเพจ ดังต่อไปนี้
1. สิ่งที่ต้องการนำเสนอ ผู้พัฒนาจะต้องเตรียมข้อมูลต่างๆ ที่ต้องการนำมาเสนอลงบน Webpage โดยผู้พัฒนาอาจสร้างทีมงานขึ้นมาและแบ่งหน้าที่ในการทำงาน เช่น การหาข้อมูลข่าวสาร, การแบ่งหน้าที่ในการเขียน HTML รวมไปถึงการ Update ข้อมูลบนเว็บ เป็นต้น
2. สร้างโครงร่างคร่าวๆ ลงในกระดาษ ผู้พัฒนาควรวาดโครงร่างรูปแบบของ Webpage คร่าวๆลงในกระดาษก่อนเพื่อดูรูปแบบโดยรวมแบบกว้างๆ ของหน้าจอเรา ว่าควรจะมีโครงสร้างแบบไหน ใช้รูปภาพและข้อความอะไร วางไว้ตำแหน่งไหนบนหน้าจอบ้าง
3. เริ่มเขียน Webpage เริ่มต้นเขียน Webpage โดยภาษาที่ถนัด โดยทั่วไปเราจะใช้ภาษา HTML ในการเขียน ส่วนในการกำหนดลูกเล่น หรือใช้ระบบฐานข้อมูลบนเว็บเราอาจจะใช้ภาษา Scriptเข้ามาช่วย เช่น Java, CGI, Perl, PHP, ASP ฯลฯ เพราะ มาตรฐานของภาษา HTML นั้นไม่สามารถจัดการฐานข้อมูลได้
4. นำ Webpage ขึ้นไปวางบน Server ในส่วนนี้เจ้าของ Server จะเป็นผู้จัดการวางไฟล์ต่างๆ ที่ได้สร้างเรียบร้อยแล้วไว้บน Server เพื่อเปิดให้ผู้บริการให้ผู้สนใจเข้าชม
รูปแบบคำสั่งพื้นฐาน
โครงสร้างพื้นฐานของภาษา HTML จะมีรูปแบบ ดังนี้
<HTML>
<HEAD>
ชุดคำสั่งต่างๆ
</HEAD>
<BODY>
ชุดคำสั่งต่างๆ
</BODY>
</HTML>
1. จะเห็นว่าทุกคำสั่งจะมีคำสั่งเปิด <…> และคำสั่งปิด </…> เสมอ นี่เป็นสิ่งสำคัญที่ผู้เขียนเว็บนั้นจะลืมไม่ได้คือ เมื่อเปิดคำสั่งแล้วต้องมีคำสั่งปิดเสมอ
2. การใช้อักษรภาษา HTML นั้นจะสามารถใช้ได้ทั้งตัวใหญ่หรือตัวเล็กก็ได้ เช่น <HTML> หรือ <html> เป็นต้น
3. การใส่รายละเอียดหรือข้อมูลต่อท้ายคำสั่งย่อยนั้นต้องมีเครื่องหมาย “....” เสมอ เช่น <body background= “green”> เป็นต้น
4. คำสั่งย่อยๆ นั้นจะอยู่ภายใน <…> ของคำสั่งหลักเสมอ เช่น <FONT size= “2”>
ต่อไปเป็นการอธิบายความหมายและการใช้คำสั่งต่างๆของภาษา HTML ในที่นี้ผมจะอธิบายแต่คำสั่งที่สำคัญๆ ที่ส่วนใหญ่ต้องใช้ประโยชน์จริงๆนะครับ และในส่วนที่เป็นสีแดงในรายละเอียดด้านล่างนั้นเป็นตัวอย่างที่ผู้เขียนสามารถเปลี่ยนได้ครับ และคำสั่งของภาษา HTML นั้น ในที่นี้ผมจะเรียกว่า “แท็ก” นะครับ มีรายละเอียดดังนี้ครับ
<HTML>
สำหรับ <HTML> นั้นเป็นคำสั่งหรือแท็กแรกในภาษา HTML ซึ่งเป็นคำสั่งที่แสดงให้รู้ว่า ไฟล์นี้เป็นไฟล์ HTML ซึ่งจะใช้ <HTML> ที่บรรทัดบนสุดและ </HTML> เป็นการปิดคำสั่ง HTML ซึ่งจะไว้ที่บรรทัดสุดท้าย เพื่อแสดงว่าจบไฟล์
<HEAD>
สำหรับแท็ก <HEAD> เป็นส่วนหัวของไฟล์ที่ใช้ใส่แท็กต่างๆ เช่น <TITLE>, <META>, <!DOCTYPE> เป็นต้น ส่วนนี้จะเป็นส่วนที่ถูกเรียกมาก่อนส่วนอื่นๆ และจะไม่แสดงผลออกทาง Browser
<BODY>
สำหรับแท็กนี้เป็นส่วนที่เริ่มต้นส่วนที่เป็นคำสั่งต่างๆ ที่จะแสดงยัง Browser ซึ่งข้อมูลทุกอย่างของเราที่จะนำมาแสดงต้องใส่ไว้ภายใต้คำสั่งนี้เท่านั้น แท็กนี้มีคำสั่งย่อยที่สำคัญ ดังนี้
1. BACKGROUND คือการกำหนดให้ Browser แสดงพื้นหลังด้วยรูปภาพ เช่น <BODY BACKGROUND= “bg.gif”> เป็นต้น
2. BGCOLOR คือการกำหนดให้ Browser แสดงพื้นหลังสีที่กำหนด เช่น <BODY BGCOLOR= “green” > เป็นต้น
3. TEXT คือการกำหนดให้ Browser แสดงอักษรเป็นสีที่กำหนด เช่น <BODY TEXT= “rad”> เป็นต้น
<META>
สำหรับแท็กนี้เป็นแท็กที่มีประโยชน์มากเลยทีเดียวในสมัยนี้ ไม่ว่าจะไว้สำหรับกำหนดภาษาที่จะแสดงผล ใช้เป็นเครื่องมือในการค้นหาเว็บ ของ Search Engine ต่างๆ ใส่ข้อความ คำอธิบายต่างๆ
1. NAME= “GENERATOR” ใช้บอกชื่อของผู้เขียนหรือชื่อโปรแกรมที่ใช้เขียน เช่น <META NAME=“GENERATOR” CONTENT= “ชื่อผู้เขียนหรือชื่อโปรแกรม”>
2. NAME= “DESCRIPTION” ใช้ใส่คำอธิบายของโฮมเพจเรา ซึ่งเป็นแท็กหนึ่งที่ Search Engine ใช้ในการค้นหาเว็บเรา เช่น
<META NAME= “DESCRIPTION” CONTENT= “ใส่คำอธิบาย”>
3. NAME= “KEYWORDS” ใช้ใส่คำสำคัญ หรือคำต่างๆที่เกี่ยวข้องกับเว็บเรา ซึ่งเป็นแท็กหนึ่งที่ Search Engine ใช้ในการค้นหาเว็บเรา เช่น
<META NAME= “KEYWORDS” CONTENT= “ใส่คำสำคัญ”>
2. การใช้อักษรภาษา HTML นั้นจะสามารถใช้ได้ทั้งตัวใหญ่หรือตัวเล็กก็ได้ เช่น <HTML> หรือ <html> เป็นต้น
3. การใส่รายละเอียดหรือข้อมูลต่อท้ายคำสั่งย่อยนั้นต้องมีเครื่องหมาย “....” เสมอ เช่น <body background= “green”> เป็นต้น
4. คำสั่งย่อยๆ นั้นจะอยู่ภายใน <…> ของคำสั่งหลักเสมอ เช่น <FONT size= “2”>
ต่อไปเป็นการอธิบายความหมายและการใช้คำสั่งต่างๆของภาษา HTML ในที่นี้ผมจะอธิบายแต่คำสั่งที่สำคัญๆ ที่ส่วนใหญ่ต้องใช้ประโยชน์จริงๆนะครับ และในส่วนที่เป็นสีแดงในรายละเอียดด้านล่างนั้นเป็นตัวอย่างที่ผู้เขียนสามารถเปลี่ยนได้ครับ และคำสั่งของภาษา HTML นั้น ในที่นี้ผมจะเรียกว่า “แท็ก” นะครับ มีรายละเอียดดังนี้ครับ
<HTML>
สำหรับ <HTML> นั้นเป็นคำสั่งหรือแท็กแรกในภาษา HTML ซึ่งเป็นคำสั่งที่แสดงให้รู้ว่า ไฟล์นี้เป็นไฟล์ HTML ซึ่งจะใช้ <HTML> ที่บรรทัดบนสุดและ </HTML> เป็นการปิดคำสั่ง HTML ซึ่งจะไว้ที่บรรทัดสุดท้าย เพื่อแสดงว่าจบไฟล์
<HEAD>
สำหรับแท็ก <HEAD> เป็นส่วนหัวของไฟล์ที่ใช้ใส่แท็กต่างๆ เช่น <TITLE>, <META>, <!DOCTYPE> เป็นต้น ส่วนนี้จะเป็นส่วนที่ถูกเรียกมาก่อนส่วนอื่นๆ และจะไม่แสดงผลออกทาง Browser
<BODY>
สำหรับแท็กนี้เป็นส่วนที่เริ่มต้นส่วนที่เป็นคำสั่งต่างๆ ที่จะแสดงยัง Browser ซึ่งข้อมูลทุกอย่างของเราที่จะนำมาแสดงต้องใส่ไว้ภายใต้คำสั่งนี้เท่านั้น แท็กนี้มีคำสั่งย่อยที่สำคัญ ดังนี้
1. BACKGROUND คือการกำหนดให้ Browser แสดงพื้นหลังด้วยรูปภาพ เช่น <BODY BACKGROUND= “bg.gif”> เป็นต้น
2. BGCOLOR คือการกำหนดให้ Browser แสดงพื้นหลังสีที่กำหนด เช่น <BODY BGCOLOR= “green” > เป็นต้น
3. TEXT คือการกำหนดให้ Browser แสดงอักษรเป็นสีที่กำหนด เช่น <BODY TEXT= “rad”> เป็นต้น
<META>
สำหรับแท็กนี้เป็นแท็กที่มีประโยชน์มากเลยทีเดียวในสมัยนี้ ไม่ว่าจะไว้สำหรับกำหนดภาษาที่จะแสดงผล ใช้เป็นเครื่องมือในการค้นหาเว็บ ของ Search Engine ต่างๆ ใส่ข้อความ คำอธิบายต่างๆ
1. NAME= “GENERATOR” ใช้บอกชื่อของผู้เขียนหรือชื่อโปรแกรมที่ใช้เขียน เช่น <META NAME=“GENERATOR” CONTENT= “ชื่อผู้เขียนหรือชื่อโปรแกรม”>
2. NAME= “DESCRIPTION” ใช้ใส่คำอธิบายของโฮมเพจเรา ซึ่งเป็นแท็กหนึ่งที่ Search Engine ใช้ในการค้นหาเว็บเรา เช่น
<META NAME= “DESCRIPTION” CONTENT= “ใส่คำอธิบาย”>
3. NAME= “KEYWORDS” ใช้ใส่คำสำคัญ หรือคำต่างๆที่เกี่ยวข้องกับเว็บเรา ซึ่งเป็นแท็กหนึ่งที่ Search Engine ใช้ในการค้นหาเว็บเรา เช่น
<META NAME= “KEYWORDS” CONTENT= “ใส่คำสำคัญ”>
ตัวอย่างคำสั่ง HTML
คำสั่งพื้นฐาน
< !-- ข้อความ --> คำสั่ง หมายเหตุ ใช้อธิบายความหมาย ขื่อผู้เขียนโปรแกรม และอื่นๆ<br> คำสั่งขึ้นบรรทัดใหม่
<p> ข้อความ </p> คำสั่งย่อหน้าใหม่
<hr width = "50%" size = "3"> คำสั่ง ตีเส้น, กำหนดขนาดเส้น
คำสั่ง เพิ่มช่องว่าง
<IMG SRC = "PHOTO.GIF"> คำสั่งแสดงรูปภาพชื่อ Photo.gif
<CENTER> ข้อความ </CENTER> คำสั่งจัดให้ข้อความอยู่กึ่งกลาง
<HTML> </HTML> คำสั่ง <HTML> คือคำสั่งเริ่มต้นในการเขียนโปรแกรม HTML และมีคำสั่ง </HTML> เพื่อบอกจุดสิ้นสุดโปรแกรม
<HEAD> </HEAD> คำสั่ง <HEAD> คือคำสั่งบอกส่วนที่เป็นชื่อเรื่อง โดยมีคำสั่งย่อย <TITLE> อยู่ภายใน
<TITLE> </TITLE> คำสั่ง <TITLE> คือคำสั่งบอกชื่อเรื่อง จะไปปรากฏที่ Title Bar
<BODY> </BODY> คำสั่ง <BODY> คือคำสั่งบอกส่วนเนื้อเรื่อง ที่จะถูกแสดงผลในเวปบราวเซอร์ ประกอบด้วยรูปภาพ ตัวอักษร ตาราง เป็นต้น




ง








