อยากเขียนเว็บไซต์ เริ่มยังไงดี ?
TL;DR
คำแนะนำของผม ในการเริ่มต้นเขียนเว็บไซต์ให้เป็น คือ การเริ่มลงมือปฏิบัติอย่างจริงจัง อย่ารอให้ตัวเองขยัน หรืออย่ารอให้มีอารมณ์ปฏิบัติ การปฏิบัติที่ว่านี้ก็คือการฝึกเขียนเว็บไซต์ด้วยภาษา HTML, CSS และ JavaScript ซึ่งเป็นพื้นฐานที่สุดสำหรับการเขียนเว็บไซต์ครับ
1. ทำความรู้จักกับภาษาที่ใช้เขียนเว็บไซต์ซะก่อน
เว็บไซต์โดยทั่วไป จะถูกสร้างบนพื้นฐานของภาษาคอมพิวเตอร์ดังต่อไปนี้
- HTML (Hypertext Markup Language) คือ ภาษาที่ใช้บอกถึงเนื้อหา และโครงสร้างของหน้าเว็บไซต์ ว่าหน้าเว็บไซต์ประกอบไปด้วยอะไรบ้าง เช่น มีข้อความ, รูปภาพ, ลิงค์, เมนู, ฟอร์มรับข้อมูล หรือปุ่มกด อยู่ตรงไหนบ้าง
- CSS (Cascading Style Sheets) คือ ภาษาที่ใช้ตกแต่งหน้าเว็บไซต์ให้มีความสวยงาม เช่น กำหนดสี, รูปภาพพื้นหลัง, เส้นขอบ และระยะห่างของแต่ละองค์ประกอบ เป็นต้น นอกจากนี้ยังใส่ลูกเล่นให้กับเว็บไซต์ได้อีกด้วย เช่น เมื่อเลื่อนเมาส์ไปอยู่เหนือเมนู แล้วเมนูเปลี่ยนสีเป็นต้น
- JavaScript (เขียนย่อว่า JS) คือ ภาษาที่ช่วยให้หน้าเว็บไซต์สามารถโต้ตอบกับผู้ใช้งานได้ เช่น เมื่อคลิกปุ่ม แล้วจะมีป๊อปอัพเมนูปรากฏขึ้นมาเป็นต้น
อย่างน้อยที่สุดเว็บไซต์ 1 เว็บไซต์จะต้องประกอบไปด้วยภาษา HTML, ส่วน CSS ถ้าเว็บไซต์นั้นไม่ได้ต้องการความสวยงามมากก็อาจจะไม่ต้องใช้, สุดท้าย JavaScript ถ้าเว็บไซต์นั้นไม่จำเป็นต้องมีการโต้ตอบกับผู้ใช้งานก็อาจจะไม่จำเป็นต้องใช้เช่นกัน แต่โดยทั่วไปแทบหาไม่ได้เลย ที่เว็บไซต์หนึ่งๆ จะใช้ไม่ครบทั้ง 3 ภาษา
นอกเหนือจากภาษา HTML, CSS และ JavaScript ซึ่งเป็นฝั่ง front-end ที่ทำงานบนเว็บเบราเซอร์ ก็ยังมีฝั่ง back-end ที่ทำงานบนเว็บเซิร์ฟเวอร์ อย่างเช่น PHP หรือภาษาอื่นๆ อยู่อีก แต่ผมขอละไว้ก่อน เพราะบทความนี้เป็นเพียงแค่จุดเริ่มต้นเท่านั้น
หมายเหตุ : JavaScript เป็นคนละภาษากับภาษา Java นะครับ
2. ลงมือปฏิบัติ
ถ้าเราเอาแต่หาคำตอบว่าจะเริ่มยังไง แล้วเราไม่เริ่มมันสักที มันก็จะไม่ได้เริ่มครับ ผมแนะนำให้ลงมือปฏิบัติตามขั้นตอนในบทความนี้ไปด้วยครับ เป็นขั้นตอนการสร้างหน้าเว็บไซต์อย่างง่าย ไม่กี่ขั้นตอน ให้คิดซะว่านี่เป็นโอกาสที่ดี ที่คุณจะได้เริ่มต้นกับการเขียนเว็บไซต์ครับ
ผมจะใช้ระบบปฏิบัติการ Windows ในการอธิบายนะครับ ส่วนคนที่ใช้ระบบปฏิบัติการอื่นๆ เช่น Linux หรือ macOS ก็ไม่น่าจะมีปัญหาอะไร ขอแค่คุณรู้จักกับโปรแกรมประเภทเดียวกันนี้ในระบบปฏิบัติการที่คุณใช้ก็พอครับ นั่นคือ
- โปรแกรมเว็บเบราเซอร์ (Web Browser) เช่น Chrome, Firefox, Edge, Safari
- โปรแกรมแก้ไขข้อความ (Text Editor) เช่น Notepad หรือโปรแกรมแก้ไขโค้ด (Code Editor) เช่น VSCode, Atom, Brackets
คุณจะใช้โปรแกรมไหนก็ได้ แล้วแต่สะดวก แต่ในบทความนี้ผมจะใช้โปรแกรม Notepad และ Edge เพราะว่ามีให้ใช้บน Windows อยู่แล้ว โดยที่ไม่ต้องติดตั้งเพิ่มเติมครับ ส่วนในบทความถัดๆ ไป ผมจะใช้ Editor ตัวอื่นๆ ที่ถูกออกแบบมาเพื่อการเขียนโปรแกรมโดยเฉพาะครับ นั่นคือโปรแกรมประเภท Code Editor นั่นเอง
เอาละเริ่มปฏิบัติ !
1. เปิดโปรแกรม Notepad ขึ้นมา
2. พิมพ์โค้ด HTML ต่อไปนี้ลงไปที่โปรแกรม Notepad หรือจะคัดลอกไปวางเลยก็ได้ครับ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>เว็บไซต์แรกของฉัน</title>
</head>
<body>
สวัสดีครับ/ค่ะ นี่คือ เว็บไซต์แรกของฉัน
</body>
</html> 
3. บันทึกไฟล์โดยคลิกที่เมนู File > Save As… และบันทึกไฟล์เป็นชื่อ first.html และในกรณีนี้ผมเลือกบันทึกไฟล์ไว้ที่ Desktop ครับ
4. เปิดดูไฟล์ first.html ที่เราเพิ่งสร้าง ด้วยการดับเบิ้ลคลิก หรือคลิกขวาที่ไฟล์ แล้วเลือก Open with ตามด้วยเลือก Web Browser ที่คุณต้องการ
จากนั้น Web Browser ก็จะแสดงผลหน้าเว็บไซต์ first.html ที่คุณเพิ่งสร้างตามภาพด้านล่าง
ไม่ยากเลยใช่ไหมครับ กับการเริ่มต้นเขียนเว็บไซต์ครั้งแรก
อธิบายสิ่งที่เพิ่งปฏิบัติกันไป
สิ่งที่คุณได้ปฏิบัติไปเมื่อสักครู่ คือการเขียนโค้ดภาษา HTML ครับ ซึ่งโค้ดดังกล่าวยังไม่ได้รวมภาษา CSS และ JavaScript เข้าไป และผมจะขออธิบายโค้ด HTML เมื่อสักครู่แบบง่ายๆ ดังนี้
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>**************</title>
</head>
<body>
**************
</body>
</html> โค้ดส่วนที่นอกเหนือจากเครื่องหมาย * เปรียบเสมือนรูปแบบมาตรฐานที่ทุกเว็บไซต์ต้องมี (จำแบบนี้ไปก่อนครับ) และส่วนที่คุณจะต้องแก้ไขคือส่วนที่ผมทำเครื่องหมาย * ไว้ นั่นคือส่วนของแท็ก title และแท็ก body ครับ
แท็ก title คือ ส่วนที่เป็นชื่อของหน้าเว็บไซต์ครับ ซึ่งจะแสดงอยู่ที่ด้านบนสุดของ Web Browser ดังรูปผลลัพธ์ที่เราเพิ่งเห็นกันไป
ส่วนแท็ก body คือ ส่วนเนื้อหาเว็บไซต์ครับ เราจะระบุเนื้อหาของเว็บไซต์ อันได้แก่ ข้อความ, รูปภาพ, ลิงค์, เมนู, ฟอร์มรับข้อมูล และ ปุ่มกด กันที่นี่ครับ หรือก็คือโค้ดส่วนใหญ่เราจะเขียนกันที่นี่นั่นเองครับ
หมายเหตุ:
- แบบนี้เรียกว่าแท็ก (tag) : <tagname> หรือ </tagname>
- แบบนี้เรียกว่าแท็กเปิด (opening tag) : <tagname>
- แบบนี้เรียกว่าแท็กปิด (closing tag) : </tagname>
ข้อความส่งท้าย
เนื้อหาในบทความนี้อาจจะไม่ได้มากมายอะไร แต่ผมหวังเป็นอย่างยิ่งว่า เนื้อหาในบทความนี้จะช่วยให้ผู้อ่านหลายๆ ท่าน สามารถเริ่มต้นกับการเขียนเว็บไซต์ได้
ผมจะพยายามเขียนบทความที่ต่อเนื่องกับบทความนี้ และบทความที่เกี่ยวข้องกับการเขียนเว็บไซต์ออกมาเรื่อยๆ ดังนั้นหากคุณชอบบทความแนวนี้ก็สามารถกดติดตาม Facebook แฟนเพจกันไว้ได้ครับ
สุดท้ายนี้ ผมขอขอบคุณทุกท่านที่ตั้งใจอ่านกันจนจบครับ แล้วเจอกันใหม่ในบทความหน้าครับ สวัสดีครับ
ข้อมูลเพิ่มเติม
โพสต์ที่เกี่ยวข้อง
