เท็กซ์อิดิเตอร์ (Text Editor)

Text Editor (เท็กซ์อิดิเตอร์) คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือที่ใช้ในการเขียน และแก้ไขตัวอักษรซึ่งเป็นคำสั่งต่าง ๆปัจจุบันมี โปรแกรม Text Editor หลายโปรแกรม เช่น NotePad, EditPlus หรือโปรแกรม Dreamweaver ซึ่งมีคุณสมบัติเป็นทั้งโปรแกรมสำเร็จรูปในการสร้างเว็บเพจด้วย   ในบทเรียนชุดนี้ จะใช้โปรแกรม Notepad ในการสร้างเว็บเพจด้วยภาษา HTML

    เริ่มสร้างเว็บเพจด้วย NotePad

การสร้างเอกสาร HTML หรือเว็บเพจ เป็นเรื่องที่ง่ายและสะดวก เพียงแต่เปิดโปรแกรม NotePad <Start, Progra, Accessories, NotePad> แล้วพิมพ์คำสั่ง HTML ลงไป จากนั้นก็ทำการจัดเก็บไฟล์โดยตั้งชื่อเป็นภาษาอังกฤษ ตัวพิมพ์เล็ก และกำหนดนามสกุลเป็น .html (ในตอนพิมพ์ชื่อไฟล์ แนะนำให้พิมพ์ชื่อและนามสกุลของไฟล์ไว้ในเครื่องหมายคำพูด เพื่อป้องกันมิให้โปรแกรม NotePad เติมนามสกุล .txt ต่อท้าย) จากนั้นก็เปิดโปรแกรมเบราเซอร์ เช่น IE หรือ Firefox แล้วเปิดไฟล์เอกสารเว็บที่สร้าง เพื่อดูผล

<HTML>
<HEAD>
<TITLE>……………</TITLE>
</HEAD>
<BODY>
……………
……………
</BODY>
</HTML>

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

<HTML>……….</HTML>

คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง </HTML> เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML

        ส่วนหัวของโปรแกรม

<HEAD>……….</HEAD>

คำสั่ง <HEAD> เป็นคำสั่งที่ใช้กำหนดข้อความในส่วนที่เป็นชื่อเรื่องของไฟล์ HTML และภายในคำสั่ง <HEAD>…</HEAD> จะมีคำสั่งย่อยอีกคำสั่งหนึ่งคือ <TITLE>……..</TITLE>

        กำหนดข้อความในส่วนหัวของโปรแกรมหรือไตเติลบาร์

<TITLE>……….</TITLE >

คำสั่ง <TITLE> เป็นคำสั่งที่แสดงชื่อของเอกสาร หรือชื่อเรื่องของไฟล์ HTML ซึ่งข้อความภายในคำสั่งจะปรากฎหรือแสดงผลในส่วนของไตเติลบาร์ (Title Bar) ของโปรแกรมเว็บเบราเซอร์ แต่จะไม่แสดงในส่วนของการแสดงผลในโปรแกรมเว็บเบราเซอร์

        ส่วนเนื้อหาของเว็บเพจ

<BODY>……….</BODY>

คำสั่งนี้เป็นส่วนที่สำคัญในการแสดงผลในเว็บเบราเซอร์ ซึ่งจะประกอบไปด้วยตัวอักษร รูปภาพกราฟิกต่างๆ

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s