3 ขั้นตอนวิธีทำเว็บง่าย แค่มี notepad ก็เขียน HTML ได้แล้ว!

หลายคนเข้าใจว่า การเขียนโปรแกรม หรือการทำเว็บไซต์ เป็นเรื่องที่ต้องใช้ความยุ่งยากซับซ้อนมาก แต่ความจริงแค่มี nodepad หรือ text editor อะไรก็ได้ ที่มีอยู่ในเครื่องเรา ก็สามารถเขียน HTML แล้วเปิดเว็บเพจใช้งานได้ทันที มี 3 ขั้นตอนง่าย ๆ ดังนี้

1. เขียนและบันทึก (Write & Save) ให้เปิด notepad หรือ text document เปล่า ๆ ขึ้นมา โดยการคลิกขวาบนหน้า desktop จากนั้นเขียนภาษา HTML ลงไปแล้ว บันทึกไฟล์ไว้ที่ใดก็ได้ แต่ต้องมีนามสกุลเป็น .html (นิยมใช้ index.html เป็นมาตรฐานสำหรับหน้าแรก  ส่วนไฟล์อื่น ๆ สามารถตั้งชื่อได้ตามสะดวกเลยครับ ขอแค่ไฟล์มีนามสกุล .html เท่านั้น) ดังภาพ

[ ตัวอย่างโค๊ดง่าย ๆ ไฟล์ index.html ]
-------------------------------

2. เปิดด้วยบราวเซอร์ (Open by browser) ใดก็ได้ อาธิเช่น Google Chrome , Firefox , Microsoft Edge , Internet Explorer , Opara ฯลฯ โดยการคลิกขวาที่ไฟล์ index.html เลือกบราวเซอร์ที่ต้องการ จะปรากฏเว็บไซต์ที่มีตัวอักษรแตกต่างกันตามคำสั่งที่เราเขียนไว้ ดังภาพ

+3. เพิ่มไอเดีย (Your Ideas)  ลองใส่รูปภาพ เปลี่ยนสี ปรับเลเอาท์ ตามใจเรา ดังนี้

[ไฟล์ index.html]
-------------------

--------------------------------

จะได้ผลลัพธ์ ดังภาพ

จากตัวอย่าง ผู้เขียนได้เพิ่มแท็ก (tag) ต่าง ๆ ได้แก่ img , body , head , title , html โปรดสังเกตุว่ามีจุดเปลี่ยนที่เห็นได้ชัดเจน ดังนี้

1) หน้าเว็บมีสีพื้นหลังเป็นสีส้มอ่อน ๆ (papayawhip) ซึ่งเกิดจากการเพิ่มแอททรีบิวต์ (attribute) bgcolor เข้าไปในแท็ก body

[! สิ่งที่อยู่ใน tag เราเรียกว่า attribute]

[! สังเกตว่า body จะต้องครอบทุกอย่างที่จะต้องแสดงไว้ทั้งหมด]

2) มีการจัดเรียงทุกอย่างให้อยู่จุดกึ่งกลางของหน้า (center) ด้วย align ในแท็ก body 

3) มีรูปภาพถูกเพิ่มเข้ามา 2 ภาพ โดยใช้แท็ก img ซึ่งระบุที่อยู่รูปภาพจากเว็บไซต์อื่นผ่านแอททรีบิวต์ src แล้วกำหนดให้มีขนาด 500px เท่ากัน ด้วยแอททรีบิวต์ width

[! เราสามารถใช้รูปภาพในเครื่องเราเองได้]

4) มีชื่อเว็บเพจที่แท็บใช้งานด้านบน (title bar) ซึ่งเกิดจากแท็ก title

5) มีแท็ก head ครอบ title ไว้อีกที เพื่อกำหนดขอบเขตสำหรับการตั้งค่าต่าง ๆ ของหน้าเว็บ ซึ่งส่วนนี้มักจะเป็นแท็กที่เรามองไม่เห็น 

6) มีแท็ก html ครอบทุกอย่างไว้ เพื่อบอกว่าเป็นภาษา HTML 

มาถึงตรงนี้นักศึกษาคงจะพอทราบแล้วว่า เว็บเพจทั้งหมดนั้น เกิดจากโค๊ด HTML ที่มีแท็กต่าง ๆ รวมกัน โดยแบ่งออกเป็น 2 ส่วนหลัก ได้แก่ ส่วนของ head เอาไว้ตั้งค่าต่าง ๆ และส่วนของ body เอาไว้แสดงหน้าเว็บเพจ ดังนั้น การออกแบบเว็บไซต์ให้มีความสวยงาม จะอาศัยการจัดการส่วนของ body เป็นปัจจัยหลัก

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

สรุปการเขียน HTML ทำเว็บเพจด้วย notepad 

จริง ๆ แล้วการทำเว็บเพจนั้นง่ายมาก เพียงแค่ เปิด notepad เขียน และบันทึกไฟล์นามสกุล .html จากนั้นเปิดด้วย browser อย่าง google chrome ก็จะแสดงหน้าเว็บของเราออกมาแล้ว จบ...

หากอยากได้หน้าสอง หน้าสาม ฯลฯ เพียงแค่สร้างไฟล์เพิ่มขึ้นมา ทำแบบเดิม เช่น product.html ,about.html ,contact.html เป็นต้น แล้วลิงค์หากัน ก็จะเกิดเป็นเว็บไซต์ขนาดใหญ่ขึ้นเรื่อย ๆ ถึงตรงนี้เราจะใช้เพียง notepad อย่างเดียวก็คงไม่ไหวแล้ว เพราะจำนวนบรรทัดจะยิ่งเยอะมาก ตาลาย ไล่หาโค๊ดไม่ไหว บางครั้งถ้าเราอยากให้โปรแกรม editor มันจดจำ ย้อนกลับไปหลาย ๆ ครั้ง มีหมายเลขบรรทัด จัดเรียงแท็กให้สวยงาม และทำอะไรต่าง ๆ ให้เรามากขึ้น จึงจำเป็นที่จะต้องหาโปรแกรมช่วยเหลืออื่น ๆ มาช่วยเขียนเว็บไซต์ เราเรียกโปรแกรมเหล่านี้ว่า IDE นั่นเอง อย่างเช่น Notepad 2 ,Visual Studio Code (VS Code) , Atom ฯลฯ มากมายหลายอย่างตามสะดวก

หลายคนอาจจะสงสัยบ้างแล้วว่าปัจจุบัน IDE ตัวใดเหมาะสมที่สุด? หรือถ้าอยากจะอัพขึ้นใช้งานออนไลน์ล่ะ จะต้องทำอย่างไร? อยากทำเว็บขายสินค้าออนไลน์ ทำเว็บไซต์จองโรงแรม เว็บจองตั๋ว เว็บบอร์ด ฯลฯ ต่าง ๆ เหล่านี้ต้องทำอย่างไร? ในบทต่อไป เราจะมาพูดถึงเรื่องต่าง ๆ เหล่านี้กัน

ขอบคุณนักศึกษาทุกท่านที่ติดตาม

โปรดติดตามตอนต่อไป 

Mr.Pandaman (แพนด้า)
Soft eXpedient Co., Ltd.