หากต้องการศึกษาการทำเว็บไซต์ ภาษา HTML เป็นคำสั่งพื้นฐานในการสร้างเว็บไซต์ที่จำเป็นต้องศึกษา เพราะหากไม่รู้รายละเอียดเกี่ยวกับคำสั่งต่างๆ การแก้ปขเว็บไซต์ ปรับแต่งขั้นสูง เปลี่ยนสีข้อความ จัดการข้อความ css ฯลฯ จะไม่สามารถทำได้ การฝึกก็สามารถฝึกทำในคอมพิวเตอร์ของเราเองได้ ด้วยการติดตั้ง Xampp ในเครื่องเราเอง

 

ข้อดีของเว็บไซต์แบบ HTML

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

 

หนังสือ คู่มือพื้นฐาน HTML

การสร้างเว็บไซต์แนวนี้จะใช้คำสั่ง HTML จึงจำเป็นต้องหาหนังสือหรือคู่มือใช้งาน HTML ไว้สักเล่ม ปัจจุบันนิยมใช้ HTML5 และ CSS  ในท้องตลาดก็มีหนังสือให้เลือกหลายเล่ม

 

ติดตั้งโปรแกรมแก้ไขภาษา HTML 

การฝึกทำเว็บไซต์ด้วยภาษา HTML เพื่อความง่ายควรติดตั้งโปรแกรมช่วยแก้ไขโค้ด HTML เช่น Kompozer หรือ EditPlus ซึ่งจะช่วยให้การแก้ไขโค้ดทำได้ง่ายขึ้น

 

ติดตั้งโปรแกรมฝึกทำเว็บด้วย HTML ในเครื่องเราเอง

ดาวน์โหลด Xampp

ในบทความนี้จะใช้ Xampp รุ่น 1.8.2 ชื่อไฟล์ xampp-win32-1.8.2-5-VC9-installer.exe ดาวน์โหลดได้ตามลิงค์ด้าน ล่าง
http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/1.8.2/

 

ขั้นตอนการติดตั้ง Xampp ในคอมพิวเตอร์ของเราเอง

1. ดับเบิ้ลคลิกไฟล์สำหรับติดตั้ง เช่น xampp-win32-1.8.2-6-VC9-installer.exe
2. จะเข้าสู่หน้าจอติดตั้ง Setup - XAMPP ให้คลิกปุ่ม Next ทำงานต่อ


3. ในส่วน Select Components คลิก Next ทำงานต่อ
4. จะให้เหลือโฟลเดอร์เพื่อติดตั้ง ปกติก็จะเป็นไดรว์ C: แต่ผู้เขียนเลือกไดรว์ D: เพราะไดรว์ C: เต็มแล้ว ให้คลิก Next ทำ งานต่อ


5. หน้าจอแจ้งเกี่ยวกับ Bitnami for XAMPP คลิก Next ทำงานต่อ
6. ในหน้าจอ Ready to Install คลิก Next ทำงานต่อ


7. โปรแกรมจะเริ่มทำการก็อปปี้ไฟล์ ให้รอสักพัก
8. จะปรากฏตัวเลือกให้เรียกใช้โปรแกรมควบคุมการทำงานของ XAMPP คลิกติ๊กถูกเพื่อให้ทำงาน
9. เสร็จแล้วคลิก Finish


10. ในกรณีที่เลือกให้เปิดหน้าจอโปรแกรมควบคุมของ XAMPP ก็จะแสดงหน้าจอดังภาพตัวอย่าง ซึ่งขณะนี้ยังไม่เปิดใช้งาน XAMPP จะเห็นว่าเซอร์วิส Apache และ MySQL ยังคงสถานะเป็น Start ให้คลิก Start เปิดการทำงานตามลำดับ
11. การเปิดใช้งานต้องคลิกให้ปุ่มเปลี่ยนสถานะเป็น Stop โดยเริ่มจากเปิด Apache ก่อนแล้วเปิด MySQL ส่วนการปิด เมื่อ ต้องการออกจากโปรแกรม ไม่ใช้งานแล้ว ให้ปิด MySQL ก่อน แล้วตามด้วย Apache


12. หลังจากเปิดการทำงานของ Apache และ MySQL แล้ว ให้เข้าโปรแกรมท่องเน็ต เช่น Chrome แล้วพิมพ์ localhost กด Enter
13. หากปรากฏหน้าจอดังภาพ แสดงว่า XAMPP พร้อมทำงานแล้ว ต่อไปก็จะสามารถทดลองติดตั้งโปรแกรมทำเว็บไซต์ อย่าง WordPress, Joomla, SMF ฯลฯ บน XAMPP ได้เลย

 

ทำความรู้จักไฟล์ต่างๆ ของ Xampp หลังการติดตั้ง

หลังจากได้ติดตั้ง Xampp ลงเครื่องเสร็จเรียบร้อยแล้ว เราจะไปสำรวจไฟล์และโฟลเดอร์ต่างๆ ของ Xampp ว่ามีอะไรบ้างที่ เราจำเป็นต้องรู้

 

ตัวอย่างโฟลเดอร์สำคัญที่ของ Xampp ควรจะต้องรู้

ในที่นี้จะเป็นการติดตั้งบน Windows 7 แต่ Windows รุ่นอื่นก็ไม่ใช่ปัญหา ให้เข้าโปรแกรมจัดการไฟล์ Windows Explorer เข้าไปดูรายชื่อไฟล์และโฟลเดอร์
1. ให้เข้าไปยังโฟลเดอร์ที่ติดตั้ง Xampp ซึ่งก็คือโฟเดอร์ xampp
2. เมื่อดับเบิ้ลคลิกเข้าไปข้างในจะพบโฟลเดอร์ต่าง เช่น htdocs ในการฝึกทำเว็บไซต์ ด้วยภาษา HTML เราจะสร้างโฟลเดอร์สำหรับเก็บไฟล์ html ในโฟลเดอร์นี้ ใช้ชื่อตามชื่อเว็บเว็บที่ต้องการได้เลย 
3. mysql โฟลเดอร์นี้จะเป็นที่เก็บไฟล์ฐานข้อมูล MySQL หากต้องมีการใช้ฐานข้อมูล MySQL 
4. php โฟลเดอร์นี้จำเก็บไฟล์สำหรับการตั้งค่าไฟล์ php.ini


5. เมื่อเข้าไปในโฟลเดอร์ htdocs หลังการติดตั้งจะมีเพียงโฟลเดอร์มาตรฐานเช่น forbidden, img, restriced และ xampp
6. ในการฝึกทดลองทำเว็บไซต์ในคอมพิวเตอร์ของเราเอง ด้วยภาษา HTML ให้สร้างโฟลเดอร์ไว้สำหรับเก็บไฟล์ของเว็บไซต์ที่จะสร้าง  โดยเฉพาะ เช่น จะฝึกทดลองทำเว็บไซต์ siamebook ก็สร้างโฟลเดอร์ตามชื่อเว็บไซต์ แล้วจึงสร้างไฟล์ HTML ไว้ในนี้

 

หลังการฝึกทดสองสร้างเว็บด้วย HTML เสร็จแล้ว ก็จะสามารถอัพโหลดไปไว้ในเว็บไซต์จริง หรือฟรีเว็บไซต์ได้ ซึ่งฟรีเว็บไซต์ก็มีให้เลือกหลายรายเช่น 000webhost.com, hostinger.com ศึกษาวิธี การสมัครใช้งานฟรีเว็บไซต์ที่ hostinger.in.th คลิกเล้ย

 


บทความอื่น ที่คุณอาจสนใจ

ตัวอย่างประโยคภาษาอังกฤษขึ้นต้นด้วย เขา / he, his, him และ himself

ในการแต่งประโยคภาษาอังกฤษเพื่อสนทนากัน การใช้สรรพนามว่า เขา หรือ He เป็นอีกคำที่ค่อนข้างบ่อยในการแต่งประโยค เพราะเวลาสนทนากัน ก็มักจะมีหลายคน และจะต้องมีการกล่าวถึงบุคคลที่สาม ซึ่งนอกจาก He แล้วก็จะมี She/หล่อนหรือเธอ ซึ่งการ แต่งประโยคจะคล้ายๆ กัน ต่างกันแค่ He กับ She เท่านั้นเอง อ่านเพิ่มเติม..