เตรียมพร้อมก่อนเริ่มเขียน HTML

                โดยทั่วไปแล้ว HTML นั้นไม่มีอะไรมากไปกว่าไฟล์ตัวอักษรทั่วๆไป เราสามารถเขียนมันขึ้นมาได้โดยใช้เพียงโปรแกรมสร้างตัวอักษรธรรมดาทั่วไปเท่านั้น ในการเริ่มเขียน HTML แบบเริ่มต้นนั้น เราควรใช้โปรแกรมง่ายๆเพื่อให้เราสามารถเข้าใจพื้นฐานของการเขียนภาษา HTML เสียก่อน

                หลายคนอาจพูดถึงโปรแกรมซอฟแวร์สำหรับเขียนเว็บโดยเฉพาะ เช่น Dreamweaver หรือ FrontPage สำหรับผู้ที่เริ่มเรียนรู้ที่จะเขียนภาษา HTML โปรแกรมเขียน HTML เช่นนี้ไม่เหมาะสมสำหรับมือใหม่ เพราะจะทำให้เราขาดความเข้าใจในพื้นฐานเบื้องต้นของ HTML ได้ ความเข้าใจเบื้องต้นในการเขียน HTML ถือเป็นสิ่งสำคัญ

                เพื่อที่จะเริ่มเขียน HTML เราจำเป็นต้องมีโปรแกรม 2 อย่าง

                                                                                                                                                                                                     

                โปรแกรมสำหรับพิมพ์ตัวอักษรและโปรแกรมเว็บบราวเซอร์                                                                                 

                                                                                                                                                                                                    

                 Notepad เป็นโปรแกรมสร้างข้อความโดยจะปรากฏอยู่ในทุกเครื่องคอมพิวเตอร์ที่ใช้ระบบปฏิบัติการวินโดว์ สามารถหาได้จาก Start > Programs > Accessories สำหรับใน Mac OS X สามารถใช้ TextEdit ได้ แต่ไม่ว่าโปรแกรมใดก็ไม่มีความสำคัญ โปรแกรมสร้างตัวอักษรและข้อความใดๆก็สามารถใช้งานได้ทั้งสิ้น

                Internet Explorer เป็นโปรแกรมเว็บบราวเซอร์หรือโปรแกรมท่องเน็ต ในการเขียน HTML เราจำเป็นต้องใช้โปรแกรมประเภทนี้ในการเปิดดูไฟล์ HTML ที่เราทำการเขียนขึ้นนั่นเอง สามารถใช้โปรแกรมใดก็ได้ตามแต่สะดวก Internet Explorer Firefox หรือ Google Chrome ฯลฯ

                เพียงเท่านี้ก็พร้อมสำหรับเริ่มต้นเขียน HTML แล้ว                                                                                               

เริ่มต้นเขียน HTML

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

                                                                                                                                                                               

                my first web page !                                                                                                                             

                                                                                                                                                                               

                จากนั้นให้เราทำการบันทึกไฟล์นี้โดยการไปที่เมนู File แล้วเลือก Save As… โดยทั่วไปแล้ว นามสกุลของไฟล์จะถูกกำหนดเป็นค่าตั้งต้นไว้เป็น .txt ซึ่งเราไม่ต้องการบันทึกไฟล์นี้ให้เป็นไฟล์แบบ Text ทั่วไป ดังนั้นให้เราทำการเปลี่ยนนามสกุลไฟล์นั้น โดยการตั้งชื่อและเปลี่ยนนามสกุลเป็น test.html

 

                บันทึกไฟล์ไว้ที่ไหนก็ได้ตามแต่สะดวก จากนั้นเปิดโปรแกรมบราวเซอร์ขึ้นมาแล้วเปิดที่เราได้ทำการบันทึกไว้ในนามสกุล .html ก่อนหน้านี้ จะเปิดโดยการใช้เมนู File > Open จากเว็บบราวเซอร์เลย หรือ จะเปิดจากการคลิดขวาที่ไฟล์ test.html แล้วเลือก Open with… ก็ได้เช่นกัน

                สิ่งที่แสดงอยู่บนหน้าจอโปรแกรมท่องเว็บก็คือเว็บเพจอันแรกของคุณนั่นเอง

                ต่อจากนี้ไป เราจะให้วิธีการนี้ในการเปิดดู “ผลลัพธ์” ในการเขียน HTML ของเรา ไม่ว่าเราจะเขียนภาษา HTML อะไรลงไปใน Notepad เราสามารถใช้วิธีการนี้ในการแสดงผลของภาษา HTML ที่เราได้เขียนลงไปว่ามันจะแสดงผลออกมาเป็นเช่นไร

รูปแบบทั่วไปของแท็กใน HTML

                เราจะเริ่มทำการเรียนรู้จาก “Tags” ซึ่งเป็นส่วนประกอบพื้นฐานของการเขียนภาษา HTML แท็กคือตัวคำสั่งที่ใช้ระบุรูปแบบการแสดงผลของภาษา HTML ของเรา ความสามารถของแท็กก็ล้วนแตกต่างกันออกไป เราจะมาเริ่มทำความเข้าใจกับการจัดรูปแบบของแท็กก่อน

                รูปแบบของ “แท็ก” จะเริ่มต้นด้วย “เครื่องหมายน้อยกว่า” และปิดด้วย “เครื่องหมายมากกว่า”

                ยกตัวอย่าง แท็กสำหรับใช้ขีดเส้นใต้ข้อความ คือ <u>

                เราจะต้องใส่แท็ก <u> นี้ลงไปด้านหน้าข้อความที่เราต้องการขีดเส้นใต้ เราเรียกแท็กนี้ว่าเป็น “แท็กเปิด” เพื่อที่จะให้การขีดเส้นใต้ข้อความสิ้นสุดลง เราจะต้องใส่สิ่งที่เรียกว่า “แท็กปิด” หลังข้อความที่ต้องการ โดยลักษณะของแท็กปิดท้ายนี้จะมีรูปร่างเหมือนกับแท็กเปิด เพียงแต่จะมี “เครื่องหมายทับ” อยู่ด้านหน้าคำสั่งในแท็ก

                ยกตัวอย่าง แท็กปิดสำหรับขีดเส้นใต้ข้อความ คือ </u>

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

                                                                                                                                                                               

                <u>Underline Me !</u>                                                                                                                    

                                                                                                                                                                               

                การแสดงผลใน HTML จะเป็นดังนี้

                                                                                                                                                                               

                Underline Me !                                                                                                                                    

                                                                                                                                                                               

                อย่างไรก็ตาม แท็กทุกแท็กไม่จำเป็นต้องมีแท็กปิดเสมอไป เช่น Line Break <br> และ Horizontal Rule <hr> เราเรียกแท็กชนิดว่าเป็น “แท็กเปล่า” ซึ่งมันเป็นแท็กที่ไม่จำเป็นต้องมีแท็กปิด แต่ตามมาตรฐานของภาษา HTML ในปัจจุบัน แท็กเหล่านี้จำเป็นต้องมีแท็กปิด ดังนั้นแล้ว แท็กเปล่าจึงมีแท็กปิดรวมอยู่ในตัวของมันอยู่ด้วยโดยมีการเพิ่ม “เครื่องหมายทับ” ลงไปในแท็กเปล่า ดังตัวอย่างด้านล่าง

                                                                                                                                                                               

                <br />                                                                                                                                                    

                <hr />                                                                                                                                                    

                <img src=”image.gif” />                                                                                                                   

                                                                                                                                                                               

                การใช้ตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กในแท็กจะไม่มีผลต่อคำสั่งของแท็กแต่ประการใด แท็ก <U> จะยังให้การแสดงผลเหมือนกับแท็ก <u> เช่นเดิม รวมไปถึง “การเว้นวรรค” จะไม่มีการแสดงผลในภาษา HTML เช่น

                                                                                                                                                                               

                <u>        Underline Me !     </u>                                                                                                      

                                                                                                                                                                               

                หรือ

                                                                                                                                                                               

                <u>                                                                                                                                                       

                Underline Me !                                                                                                                                    

                </u>                                                                                                                                                      

                                                                                                                                                                               

                จะไม่มีความแตกต่างไปจาก

                                                                                                                                                                               

                <u>Underline Me !</u>