โปรแกรมเขียน HTML (Editors)


รู้จักกับโปรแกรมเขียนโค้ด

  • โปรแกรมสำหรับเขียนโค้ด ทั่วไปเราจะเรียกว่าโปรแกรมประเภท Text Editor คือ โปรแกรมที่ใช้ในการแก้ตัวอักษร เพราะโค้ดโปรแกรมก็คือตัวอักษรธรรมดา
  • มีหลากหลายระดับตั้งแต่ระดับ Basic ไปถึงระดับ Professional หรือที่เรียกว่า IDE (Integrated Development Environment)
  • ระดับ Basic ได้แก่ Notepad, Dreamwaver EditPlus เป็นต้น
  • ระดับ IDE ได้แก่ Sublime Text, NetBeans, Eclipse, Visual Studio Code เป็นต้น ประเภทนี้จะมีฟังก์ชั่นต่างๆ ที่ทำให้เขียนโปรแกรมได้ง่ายขึ้น

อย่างไรก็ตาม การเริ่มต้นเรียนรู้ HTML เราแนะนำให้ใช้ Notepad (PC) หรือ TextEdit (Mac) ไปก่อน


ขั้นตอนที่ 1 : เปิด Notepad (PC)

สำหรับ Window 8 หรือหลังจากนั้น

กดที่ปุ่ม Start (สัญลักษณ์ Window ที่ล่างซ้ายของจอ) จากนั้นพิมพ์ Notepad

สำหรับ Window 7 หลังก่อนหน้านั้น

กดที่ปุ่ม Start > Programs > Accessories > Notepad


ขั้นตอนที่ 1 : เปิด TextEdit (Mac)

เปิด Finder > Applications > TextEdit

เปลี่ยนค่าใน Preferences เพื่อให้บันทึกไฟล์ได้ถูกต้อง เข้าไปใน Preferences > Format > เลือก "Plain Text"

ใต้ปุ่ม "Open and Save" เช็คกล่องที่มีคำว่า "Ignore rich text commands in HTML files"

จากนั้นเปิดไฟล์ใหม่ เพื่อเริ่มเขียนโค้ด


ขั้นตอนที่ 2 : ทดลองเขียน HTML

เขียนหรือคัดลอกโค้ด HTML ลงไปใน Notepad


                        
                    


ขั้นตอนที่ 3 : บันทึกไฟล์ HTML

บันทึกไฟล์ลงบนคอมพิวเตอร์ของคุณ โดยการกดไปที่ File > Save As ในเมนูบาร์ของ Notepad

ตั้งชื่อไฟล์ "index.htm" และตั้งค่า Encoding เป็น UTF-8


ขั้นตอนที่ 4 : เปิดไฟล์ HTML ในเบราว์เซอร์ของคุณ

เปิดไฟล์ HTML ที่บันทึกไว้ด้วยเบราว์เซอร์ที่คุณคุ้นเคย (ดับเบิ้ลคลิกที่ไฟล์ หรือ คลิกขวา แล้วเลือก "Open with")

ผลลัพธ์จะออกมาแบบนี้