บทความนี้จะกล่าวถึงหลักการทำงานของเว็บไซต์เบื้องต้น พร้อมกับเนื้อหาเกี่ยวกับการทำงานของเว็บไซต์สมัยแรก เราสามารถกล่าวได้แบบง่ายๆ ว่า การทำงานของเว็บไซต์จะเป็นการรับ-ส่งไฟล์ ระหว่างผู้ใช้งาน (Client) และ เซิร์ฟเวอร์ (Server) ในปัจจุบันมีวิธีการใหม่ๆ มากมาย ที่สามารถทำให้เว็บของเราทำงานได้เร็วขึ้น ดีขึ้น และปลอดภัยมากยิ่งขึ้น แต่ก็ยิ่งมีความซับซ้อนมากขึ้น และมีค่าใช้จ่ายในส่วนต่างๆ ที่สูงขึ้นเป็นเงาตามตัว

    เมื่อผู้ใช้บริการนำไฟล์ไปวางไว้ที่เซิร์ฟเวอร์เรียบร้อยแล้ว เราก็จะมีหน้าที่ในการเรียกใช้ไฟล์ดังกล่าว ด้วยการเข้าไปที่เว็บไซต์ การเรียกไฟล์จะมี Protocol ที่สำคัญคือ https (Hypertext transfer protocol secure) คือ รูปแบบการรับส่งข้อมูลแบบเข้ารหัส การจะได้มาซึ่ง https นั้นผู้ให้บริการจะต้องทำการ Verify SSL ให้เรียบร้อย แล้วรอ 12 ชั่วโมง หลังจากนั้นจะมีการแสดงผล https และจะทำให้ผู้ใช้บริการมีความปลอดภัยเกี่ยวกับเรื่องรหัส และข้อมูลต่างๆ ที่เรากรอกลงไปในเว็บไซต์

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

    มาถึงส่วนสำคัญของเนื้อหากันแล้ว กรณีที่เรามีการดาวน์โหลดหน้าเว็บสำเร็จเว็บเบราเซอร์ของเราจะทำการสร้างหน้าต่างไฟล์เว็บไซต์จากไฟล์ต้นฉบับ ซึ่งอาจจะมีทั้ง 3 ภาษาในการพัฒนาเว็บไซต์ แต่ไม่ใช่ Programming ทั้งหมดครับ เนื่องจาก HTML และ CSS นั้นไม่มีความสามารถในส่วนของการจัดการข้อมูล หรือการเขียนโลจิกทั่วไปให้คอมพิวเตอร์ทำงานให้เราได้ครับ ทั้ง 2 ตัวเป็นเพียง ภาษาที่ใช้ในการจัดโครงสร้างและความสวยงามของเว็บไซต์เท่านั้นครับ เหมือนจะเฉลยไปแล้วว่ามี 3 ตัวด้วยกัน ส่วนตัวสุดท้ายก็คือ Javascript ครับ ทีนี้เรามาลองเรียนการทำงานของทั้ง 3 ไฟล์ได้เลย

    ภาษา HTML เป็นภาษาที่ได้รับความนิยมอย่างมากในการทำเว็บไซต์ โดยลักษณะของภาษานี้จะเป็นการจัดการเกี่ยวกับ Tag เป็นหลัก ถ้าเปรียบเว็บไซต์เสมือนร่างกายของมนุษย์ HTML ก็จะเป็นส่วนต่างๆ ภายในร่างกายของเราเป๊ะๆเลย เนื่องการโครงสร้างของภาษานี้จะมองทุกอย่างในลักษณะของวัตถุต่างๆ ที่มีความเกี่ยวข้องกัน การเขียนหน้าเว็บไซต์ด้วยภาษาดังกล่าวจึงเปรียบเสมือนการวางกล่อง 4 เหลี่ยมแต่ละส่วนที่เราต้องการแสดงผลลงในเว็บไซต์ เป็นพื้นฐานก่อนที่จะปรับแต่งให้สวยงาม

    ภาษา html เป็นภาษาที่เราต้องใช้การจัดวางแบบมี แท็กเปิด และ แท็กปิด สำหรับการสร้าง Element ต่างๆ บนหน้าเว็บไซต์ บาง Tag อาจจะไม่จำเป็นต้องมีแท็กปิดก็ได้ ก็สามารถปิดในตัวเองได้ในลักษณะนี้ ซึ่ง Tag สำคัญที่เราควรจะต้องทำความเข้าใจมีดังต่อไปนี้

    ภาษา Cascading Style Sheet เป็นภาษาที่ใช้สำหรับการปรับแต่งเว็บไซต์ให้มีความสวยงาม จัดขนาดความกว้าง-สูงของ Element ต่างๆ ในเว็บไซต์ การเขียน CSS จะเป็นการกำหนด Key และ value ของส่วนที่เราต้องการปรับแต่ง ซึ่งสามารถเขียนได้ทั้งหมด 2 รูปแบบ

    *หากเป็นการเขียน CSS บน React อาจจะต้องมีการปรับเปลี่ยนชื่อ key เล็กน้อย โดยจะเขียนแบบ Camel Case เป็นหลัก (ตัวอักษรแรกของคำจะเป็นพิมพ์ใหญ่เสมอ) ปัจจุบันมีผู้ให้บริการจำนวนมาก เช่น bootstrap , tailwind css ที่ให้เราสามารถใส่ชื่อใน class ของ element แล้วจัดรูปแบบให้เราได้เลย โดยที่จำเป็นต้องเขียน CSS เองด้วย งานเร็วขึ้นเยอะเลย

    ภาษา Javascript เป็นภาษาที่ใช้ในการเปลี่ยนแปลงส่วนต่างๆ ของเว็บไซต์ การเขียนคำสั่งเฉพาะ รวมถึงการเรียกใช้งานเซอร์วิสต่าง ๆ เช่น Authentication , API , Database System ,Analytics Tracking ฯลฯ โดยภาษา Javascript นั้นใช้เวลาในการเรียนรู้นานกว่าทั้ง 2 ภาษาด้านบน แต่สามารถทำไปต่อยอดกับ NodeJs และ Typescript ได้ดี จริงๆ ภาษานี้ทำได้ดีเกือบทุกอย่างเลย ยกเว้นการบวกเลข ทีอาจจะเพี้ยนไปนิดสำหรับมือใหม่

    หลักการทำงานของเว็บไซต์มาจาก ผู้พัฒนานำเว็บที่เขียนด้วย HTML ,CSS ,JS เสร็จเรียบร้อยแล้วขึ้นไปบน Server แล้วผู้ใช้งานมีการเรียกใช้ไฟล์เหล่านั้นผ่าน Browser Browser จะทำหน้าที่ในการโหลด และนำไฟล์ที่ผู้พัฒนาสร้างมาแสดงผลให้ผู้ใช้งาน ทั้งนี้ปัจจุบันมีวิธีการมากมายที่ทำให้ได้มาซึ่งไฟล์ที่คุณภาพดี โหลดไว และสามารถทำให้ติด SEO ได้ง่าย ๆ หลายตัวเช่นกัน ขึ้นอยู่กับเป้าหมายในการทำเว็บไซต์ และความซับซ้อนในการออกแบบ UX/UI ด้วยเช่นกัน