การสร้างเว็บเพจด้วยภาษา HTML

4.  การสร้างเว็บเพจด้วยภาษา HTML
     ก่อนที่จะเริ่มต้นเข้าสู่การสร้างเว็บเพจด้วยภาษา HTML เราจำป็นที่จะต้องมีเครื่องมือที่จะใช้ในการสร้างเอกสาร HTML เสียก่อน ซึ่งเครื่องมือในการสร้างเอกสาร HTML นี้ประกอบด้วย 2 ส่วน ได้แก่
     1. เท็กซ์เอดิเตอร์ (Text Editor)
     2. เว็บเบราว์เซอร์ (Web Browser)
     4.1 เท็กซ์เอดิเตอร์ (Text Editor)
            เป็นส่วนของโปรแกรมที่ช่วยในการกำหนดข้อวามและรูปแบบคำสั่งต่างๆ ในมารฐานของ HTML
ซึ่งมีอยู่มากมายหลายโปรแกรมให้เราเลือกใช้ได้ เช่น 
            Notepad
            Notepad เป็นเท็กซ์เอดิเตอร์ที่ง่ายและพื้นๆที่สุด เป็นโปรแกรมที่มีมาพร้อมกับ Microsoft Windows
อยู่แล้วจึงใช้งานได้ทันที หากเราใช้ Macintosh โปรแกรมที่ใกล้เคียงที่สุดจะได้แก่ Simple Tex ใน OS 9 หรือ
Textedit ใน OS X

            Notepad++
            เป็นโปรแกรมที่ให้ดาวน์โหลดมาใช้ได้ฟรีที่สามารถใช้ได้หลากหลายภาษาและทำงานบนระบบ Microsoft Windows  ภายใต้การอนุญาตของ GPS (General Public License ) ซึ่งเป็นสัญญาอนุญาตให้ใช้ซอฟแวร์
โปรแกรม Notepad ++ นี้ถูกเขียนขึ่นด้วยภาษา C++ และใช้ Win32 API และ STL แท้ ทำให้ประมวลผล
ได้อย่างรวดเร็วและโปรแกรมมีขนาดเล็ก


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

            Adobe Dreamweaver 
          Dreamweaver จัดเป็นเครื่องมือในการสร้างเว็บที่ได้รับความนิยมสูงมาก สามารถนำมาใช้เพื่อการสร้างเว็บ
ได้อย่างรวดเร็วสวยงาม และถือเป็นโ)รแกรมที่นักพัฒนานำมาใช้เพื่อการจัดการกับการสรร้างเว็บไซต์มากที่สุด
โดยมีทั้งเวอร์ชั่นที่นำมาใช้บนระบบปฏิบัติการ Microsoft Windows และ Mac OS


    4.2   เว็บเบราว์เซอร์ (Web Browser)
                เป็นส่วนที่ใช้เรียกเอกสาร HTML ออกมาแสดงผลบนจอภาพในระบบอินเทอร์เน็ตเปรียบเสมือนการคอมไพล์
(Compiled) และการรัน (Run) โปรแกรมในภาษาทางคอมพิวเตอร์แต่ต่างกันตรงที่ถ้าเกิดการผิดพลาดใดๆ ในเอกสาร
HTML ผลที่แสดงออกมาทางเว็บเบราว์เซอร์จะไม่บ่งบอกถึงจุดผิดพลาดนั้น

                เว็บเบราว์เซอร์ที่นิยมใช้กัน จะมีดังนี้

                Microsoft Internet Explorer
                เป็นเบราว์เซอร์หลักสำหรับผู้ที่ใช้ระบบ Windows ซึ่งมักจะถูกติดตั้งมาพร้อมกับระบบ แต่ถ้ายังไม่มี
สามารถดาวน์โหลดได้ที่ www.microsoft.com

               Google Chrome
               เป็นเบราว์เซอร์ที่มาใหม่แต่ได้รับความนิยม อย่างรวดเร็ว เนื่องจากมีดีทางด้านความเร็ว ความเสถียร
และการรองรับที่หลากหลาย ใช้ได้ทั้งระบบ Windows และ Mac
สามารถดาวน์โหลด ได้ที่ www.google.com/chrome


               Mozilla Firefox
               เป็นหนึ่งในเบราว์เซอร์ที่เป็นที่นิยม สามารถใช้ได้ กับระบบหลักๆทุกระบบ (Windows, Mac และ Linux)
ดาวน์โหลดโปรแกรมได้ที่ www.mozilla.org

               Safari
               เป็นเบราว์เซอร์ดาวเด่นบนระบบของ Mac แต่ ก็ใช้ได้ดีกับระบบ Windows ด้วย
สามารถดาวน์โหลดได้ท
ี่ www.apple.com/safari/download 

               Opera
               เป็นเบราว์เซอร์ในเชิงพาณิชย์ที่เน้นฟังชั่น การทำงานที่มีประสิทธิภาพ
ดูรายละเอียดได้ที่
 www.opera.com

               แต่ละเบราว์เซอร์จะรองรับการทำงานของ HTML5 แตกต่างกัน จึงอาจต้องติดตั้งไว้สัก 2-3 ตัว เพื่อทดสอบ
การทำงานของเอกสาร HTML5 ที่เราเขียน เช่น เราอาจใช้ Google Chrome เป็นตัวเริ่มต้นในการทดสอบ
จากนั้นให้ไปทดสอบด้วย Internet Explorer และ FireFox ด้วย
  4.3  ขั้นตอนในการสร้างและทดสอบไฟล์เอกสาร HTML

               1.  สร้างโฟลเดอร์สำหรับจัดเก็บไฟล์ HTML ที่เราจะสร้างขึ้น เช่น D:/HTML
               2.  เปิดใช้โปรแกรมเท็กซ์เออดิเตอร์ โดยใช้โปรแกรม Notepad                     คลิกปุ่ม Start > All Programs> Accessories  แล้วคลิกเลือก Notepad


               3.  พิมพ์คำสั่งต่างๆ ในภาษา HTML เพื่อสร้างเว็บเพจ ที่ต้องการ เช่น
<!DOCTYPE html>
<html>
<head>
<title> welcome </title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first Paragraph.</p>
</body>
</html>


              4.  บันทึกไฟล์เก็บไว้ เลือกคำสั่ง File > Save as  เลือกไดร์ฟและโฟลเดอร์ที่จะใช้จัดเก็บ
พิมพ์ชื่อไฟล์ที่ต้องการแล้วตามด้วย .html  แล้วคลิกปุ่ม Save
              5.  เข้าสู่โปรแกรมเว็บเบราว์เซอร์ ในที่นี้จะใช้ Internet Explorer
              6.  เรียกใช้ไฟล์เอกสาร HTML จากเว็บเบราว์เซอร์ ด้วยคำสั่ง File > Open คลิกปุ่ม Browse เพื่อเลือกไฟล์
HTML ที่ต้องการ แล้วเลือกปุ่ม OK 


ผลที่ได้ของเอกสาร HTML บนเว็บเบราว์เซอร์


              7.  หากผลที่ได้ไม่เป็นไปตามที่คิด ให้กลับไปทำการแก้ไขข้อความเอกสาร HTML ในขั้นตอนที่ 3 

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

         การปรับให้เว็บเพจสามารถแสดงภาษาไทยได้ถูกต้อง ให้กระทำดังนี้ ในโปรแกรมเว็บเบราว์เซอร์
จากเมนู View เลือกคำสั่ง Encoding เลือก Thai (Windows)


          ผลลัพธ์ที่ได้จะเป็นภาษาไทยแล้ว 



ที่มา

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

แสดงความคิดเห็น