บทเรียนสอนสร้างเว็บ HTML CSS JS พร้อม .htaccess ด้วย Mind Map และโค้ดตัวอย่าง

ข้อคิดเห็นโดยรวมของการสร้างเว็บ

โฮตส์ & โดเมน

ก่อนจะเริ่มลงมือสร้างเว็บ เราขอเล่าก่อนว่า “แนวทางการสร้าง” ของเรามีเป้าหมายไปในทิศทางไหน เราเน้นการแสดงผลในรูปแบบของ “การให้บริการ” เป็นเงื่อนไขหลักที่ใช้ในการออกแบบและวางโครงสร้างเว็บไซต์ ซึ่งเป็นสิ่งที่เราจะสอนในบทความชุดนี้เมื่อเราสร้างเว็บบน Sharehost หรือแม้แต่ตอนทำในเครื่องตัวเอง สิ่งแรกที่ต้องคิดคือ “ไฟล์แต่ละประเภทจะถูกเข้าถึงยังไง?” เพราะแต่ละไฟล์มีหน้าที่แตกต่างกัน เช่น หน้าเว็บ, ภาพ, โค้ด JavaScript หรือ CSS ดังนั้นเราต้องมีการจัดโครงสร้างโฟลเดอร์ไว้ตั้งแต่ต้น เพื่อให้สามารถบริหารจัดการได้ง่ายในภายหลัง ซึ่งเราจะอธิบายให้ละเอียด ในส่วนถัดไปครับ

โดยค่าใช้จ่ายหลัก ๆ จะมีอยู่สองส่วน คือ “โดเมน” และ “โฮสต์” ซึ่งทั้งสองอย่างนี้มักเป็นแบบเช่ารายปี — โดยเฉพาะ Sharehost ที่สามารถหาเช่าได้ทั่วไปตามเว็บไซต์ผู้ให้บริการต่าง ๆ

โฮสต์ (Host) ที่เราจะใช้ในบทความนี้จะเป็นแบบ แชร์โฮสต์ (Sharehost) ซึ่งหมายถึงการเช่าพื้นที่สำหรับฝากไฟล์เว็บไซต์ของเราบนเซิร์ฟเวอร์ที่ใช้ร่วมกับเว็บไซต์อื่น ๆ ถ้าท่านเพิ่งเริ่มต้น อาจมีคำถามว่า โดเมน (Domain) คืออะไร? โฮสต์ (Host) มีไว้ทำไม? ใช้ทำอะไร?
ขออธิบายง่าย ๆ ว่า โดเมนคือ “ชื่อเว็บไซต์” หรือ “ที่อยู่” ที่คนใช้เข้าถึงเรา เช่น webdevohm.com
ส่วน Host ก็คือ “บ้าน” ที่ใช้เก็บข้อมูลทั้งหมดของเว็บ เช่น รูปภาพ โค้ด ระบบต่าง ๆ

ความหมายของ Sharehost กับผู้ให้เช่า

แล้ว Sharehost คืออะไร? — คือโฮสต์ที่เราใช้ร่วมกับเว็บไซต์อื่น ๆ เปรียบได้กับการ “ขนของหลายชิ้นไปในรถบรรทุกคันเดียวกัน” แม้ความเร็วอาจไม่เทียบเท่าโฮสต์ส่วนตัว แต่ข้อดีก็คือราคาถูกกว่า และผู้ให้บริการดูแลให้ทุกอย่าง ทั้งความปลอดภัยและระบบหลังบ้าน

ตอนนี้ผมจะถือว่าผู้อ่านมีโดเมนและโฮสต์กันแล้วนะครับ — กระซิบนิดนึง ทางเราทำให้ตั้งแต่ต้นจนจบเลย ทั้งบริการเช่าโดเมน โฮสต์ ดูแลให้หมดแบบไม่ต้องกังวลอะไรเลย ถ้าสนใจสามารถเข้าไปอ่านรายละเอียดบริการได้ มีให้เลือกทั้งแบบเช่า ซื้อ และสั่งทำ ทางเราจัดให้หมด ขอแค่ให้โอกาสครับ 😊

โปรแกรมที่ใช้ และทำไมถึงใช้

หลังจากมีโดเมนและโฮสต์เรียบร้อยแล้ว เราจะเริ่มเข้าสู่ส่วนของ “การเขียนโค้ด” กันเลยนะครับ อันดับแรกที่ต้องมีเลยคือโปรแกรม Visual Studio Code (โหลดตัวสีฟ้านะครับ ไม่ใช่ Visual Studio สีม่วงนะ เดี๋ยวจะงงกัน) ใช้สำหรับเขียนโค้ด HTML, CSS, JS ได้สะดวกมาก

นอกจากนั้นเราต้องมีตัวจำลองเซิร์ฟเวอร์ ซึ่งในบทความนี้เราจะใช้ XAMPP XAMPP (อ่านว่าแซมป์) ที่รัน Apache อยู่ด้านใน เพราะโฮสต์ที่เราใช้กัน โดยเฉพาะแบบ sharehost ส่วนใหญ่จะทำงานอยู่บน Apache อยู่แล้ว

การที่เราใช้ Apache เนี่ย จุดสำคัญเลยคือเราสามารถใช้ไฟล์ .htaccess ในการควบคุมพฤติกรรมบางอย่างของเว็บได้ เช่น การจำกัดไม่ให้เข้าถึงบางไฟล์ หรือการ rewrite URL และตรงนี้เองที่มันจะเกี่ยวข้องกับ SEO ด้วย เช่น URL แบบ: http://localhost/Blog/Leaning/Howtoweb.php เราจะตั้งค่าให้มันแสดงผลเป็น: http://localhost/Blog/Leaning/Howtoweb เพื่อให้ URL ดูสะอาดขึ้น (หรือที่เรียกว่า SEO-friendly) ซึ่งจะช่วยให้ Google จัดอันดับเว็บเราดีขึ้นในระยะยาวครับ

แนะนำบริการก่อนเริ่ม และ Web Dev Ohm อยู่ตรงไหนในภาพนี้?

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

แล้ว Web Dev Ohm อยู่ตรงไหนในภาพนี้? — เราคือ “ผู้แต่งบ้าน” ให้สวยงามและน่าอยู่ เป็นคนที่ทำให้เว็บไซต์ของคุณพร้อมต้อนรับผู้ชมจากทั่วโลก และนั่นแหละครับ... คือจุดเริ่มต้นของ “ยอดผู้ชม” ที่จะตามมาในภายหลัง

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

วิธีสร้างเว็บไซต์ตั้งแต่ต้น

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

• 1.โครงสร้างไฟล์ทั้งหมด
• 2.หน้าที่แต่ละไฟล์
• 3.เนื้อหาด้านในไฟล์นั้นๆ
• 4.ความหมาย จุดเชื่อมโยง การนำไปใช้
• 4.ปัญหาที่อาจจะพบตอนสร้างเว็บ

1. โครงสร้างไฟล์ทั้งหมด

• 1.asset
• 2.js
• 3.page
• 4.css

ทางเราจัดวางโฟลเดอร์แยกกันไว้เนื่องจากมีผลในการใช้งานประมาณนึงทั้งในอนาคตที่ตัวเว็บอาจจะใหญ่ขึ้นเรื่อยๆด้วยเช่นกัน

1. asset

ใช้เก็บภาพ แยกโฟลเดอร์ไว้ด้านในอาจจะ Main_img, Product_img, profiie_img ใช้เก็บภาพในการสร้างเว็บเพื่อแยกออกจากกันในการดูแลและแก้ไขและใช้ได้ในบางบริบทที่อาจจะใช้ทั้งเว็บไซต์หรือใช้แค่เฉพาะบางจุด

2. js

ใช้นามสกุล js สำหรับการทำงานในด้าน Logic และการเชื่อมโยงตั้งแต่เล็กถึงใหญ่ เช่น การเด้งเข้ามาของ menu หลังกลายเป็นโหมด resposive ของโทรศัพท์ที่ถูกบีบจอเข้ามาให้เล็กลง หรือการ Fetch ทางเราจะไม่พูดถึงในบทความนี้

3. page

ใช้เก็บหน้าต่างๆในเว็บของเราเช่นหน้าแรก หน้าเกี่ยวกับเรา หน้าบริการ หน้าติดต่อ หรือหน้าอื้นๆที่เกี่ยวข้องทั้งหมดเพื่อแยกให้ชัดเจนว่าจะสร้างไปในทางไหน ตัวอย่างเว็บหลายหน้า ในตัวอย่างนี้ใช้การแบ่งแต่ละหน้าออกจากกันชัดเจน

4. css

เปรียบเสมือนที่เก็บคลังสีเก็บลักษณะทางการมองเห็น และเอกลักษณ์ของเรา เราจะเก็บไฟล์นามสกุลcssไว้ ซึ่งใช้สำหรับทั่วทั้งเว็บหรืออยู่

2.หน้าที่แต่ละไฟล์

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

• 1.page.html
• 2.style.css
• 3.script.js
• 4.htaccess

1. home.html, service.html

ใช้เป็นที่เก็บข้อความ ทำหน้าที่ทั้งรับและส่งข้อมูลออกไปให้ภายนอกเห็นต้องตั้งชื่อให้แต่ละส่วน สามารถเชื่อมโยงหา js และ css ได้เพื่อทำให้เกิดการสื่อสารภายในระบบว่าชิ้นไหนจะทำหน้าที่อะไรเช่น htmlคืออะไร?

2. style.css

ใช้สำหรับตกแต่งสี ธีมสี ขนาดต่างๆ จัดตำแหน่งต่าง ในที่เราจะใช้เราจะใช้เชื่อมกับ page.html โดยเรียกผ่าน head ของชุด page.html โดยเชื่อมผ่าน class หรือ idที่ถูกตั้งชื่อไว้ใน page.htmlcssคืออะไร?

3. script.js

ใช้กำหนดสถานะต่างๆใน page.html เติม ลบ แก้ไข ข้อความ รับข้อความมาใช้งานต่อ ถูกกดแล้วทำสิ่งใดสิ่งหนึ่งก็ทำได้ ใช้ในการพัฒนาในหลายๆเรื่องถูกเชื่อม class และ id เช่นกันในที่นี้เราจะนำมาใช้ในการเข้าและออกของ menu หลังกด jsคืออะไร?

4. htaccess

ใช้กำหนดเงื่อนไขภายในเว็บของเราเช่นการตัดนามสกุลไฟล์ออกที่ไปสัมพันธ์ SEO ของเว็บในเรื่อง url Freiendlyและสามารถกำหนดได้ว่าจะไม่อณุญาติโฟลเดอร์ไหนบ้างให้เข้าถึงhtaccessคืออะไร?

3. เนื้อหาในไฟล์ทั้งหมด

เราจะลงรายละเอียดเป็นตัวอย่างทั้งการเชื่อมต่อแต่ละไฟล์การใช้ div, class เบื้องต้นในการใช้งานจะเน้นไปที่ ทำงานได้และอัพขึ้นโฮตส์ต่อในขั้นถัดไป และอยู่บนพื้นฐานของการสร้างเว็บด้วยตัวเองโดยเน้นไปที่การเชื่อมต่อของแต่ละชุด ทั้ง html ที่พร้อมจะแสดงตัวอักษรและพร้อมดึงการตกแต่งจาก css และดึงฟังก์ชั่นการทำงานจาก json_decode ออกมาในรูปแบบของเว็บหนึ่งเว็บที่เน้นไปที่แสดงการบริการและการให้ข้อมูล ความวยงานในระดับทั่วไปที่พร้อมพัฒนาไปอีกขั้นหากเข้าใจกระบวนการทำงานแล้ว

2.html โค้ดทั้งหมดที่ใช้

1. home.html

2. service.html

3.css โค้ดทั้งหมดที่ใช้

1. styles.css

4.js โค้ดทั้งหมดที่ใช้

1. script.js

6.htaccess โค้ดทั้งหมดที่ใช้

1. .htaccess

ข้อเสนอแนะและข้อสรุปจากประสบการณ์จริง

จากการศึกษาที่ได้นำเสนอไปทั้งหมด ผมขอสรุป Flow การทำเว็บให้อีกครั้งนะครับ จริง ๆ แล้วขั้นตอนต่าง ๆ ยังมีรายละเอียดอีกมากกว่านี้ ไม่ว่าจะเป็นวิธีการอัปโหลดเว็บไซต์ขึ้นโฮสต์ วิธีการเลือกโฮสต์ให้เหมาะสม รวมถึงเรื่องอื่น ๆ ที่เกี่ยวข้อง ซึ่งในบทความนี้ ผมขออนุญาตนำเสนอเฉพาะแกนหลักที่สำคัญก่อน เพื่อให้ผู้อ่านทุกท่านสามารถนำไปต่อยอดได้ง่ายที่สุด

เบื้องต้น ผมแนะนำว่า หากคุณต้องการทดลองทำเว็บไซต์จริง ๆ ให้ลองหาโฮสต์สักแห่งมาเช่าใช้บริการได้เลยครับ โดยแนะนำให้เริ่มต้นจากการใช้ แชร์โฮสต์ (Shared Hosting) เพราะมีต้นทุนที่ไม่สูง และเพียงพอสำหรับการฝึกทำเว็บตามตัวอย่างที่ผมได้พาแนะนำในบทความนี้แล้ว

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

นอกจากนี้ การฝึก สร้างโครงสร้าง div ให้คล่องก็เป็นเรื่องสำคัญไม่แพ้กัน ควรตั้งชื่อคลาส (class) และไอดี (id) ให้สอดคล้องกับเนื้อหาที่ทำงานด้วย ซึ่งผมได้ให้แนวทางการตั้งชื่อไปแล้วในหัวข้อก่อนหน้านี้ อยากให้ลองนำไปปรับใช้กันนะครับ เพราะการตั้งชื่อที่ดีจะทำให้เว็บของคุณดูเป็นระเบียบมากขึ้น และง่ายต่อการดูแลในระยะยาว

หากเนื้อหาส่วนใดมีข้อผิดพลาดประการใด ผมต้องขออภัยมา ณ ที่นี้ด้วยครับ

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

สำหรับระบบที่เรานำมาใช้งาน เราเลือกใช้การเขียนด้วย PHP เป็นหลักครับ เหตุผลหลักคือ PHP มีความยืดหยุ่นสูง ง่ายต่อการขยายระบบ (Scale) และสามารถออกแบบให้ใช้ Component ย่อย ๆ ได้โดยไม่จำเป็นต้องพึ่ง Framework ใหญ่ ๆ ที่จะทำให้โฮสต์ของคุณทำงานหนักเกินไป

ขอบคุณที่ติดตามจนจบบทความครับ หวังว่าประสบการณ์จากการทำจริงครั้งนี้ จะเป็นแนวทางให้หลาย ๆ คนสามารถสร้างเว็บไซต์ของตัวเองได้สำเร็จในเร็ววันนะครับ!