เว็บไซต์ทำงานอย่างไร: ภาพรวมสำหรับผู้เริ่มต้น

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

Client-Server Model: เบื้องหลังการทำงานของเว็บไซต์

ลองนึกภาพว่าคุณกำลังสั่งอาหารในร้านอาหาร เว็บไซต์ก็ทำงานคล้ายๆ กันเลยครับ:

Client (ลูกค้า): คือตัวคุณ, หรือในโลกของเว็บไซต์ก็คือ Web Browser (เช่น Chrome, Firefox, Safari) ที่เราใช้เปิดเว็บไซต์ต่างๆ
Server (พนักงานเสิร์ฟ/ครัว): คือเครื่องคอมพิวเตอร์ที่เก็บข้อมูลของเว็บไซต์ (ไฟล์รูปภาพ, ไฟล์ข้อความ, ฐานข้อมูล) และพร้อมที่จะส่งข้อมูลนั้นให้เราเมื่อเราต้องการ

เมื่อคุณพิมพ์ชื่อเว็บไซต์ (เช่น www.google.com) ลงใน Web Browser แล้วกด Enter จะเกิดอะไรขึ้น?

Web Browser (Client) จะส่งคำขอ (Request) ไปยัง Server ของ Google
Server ของ Google จะรับคำขอ และส่งข้อมูล (Response) กลับมาให้ Web Browser
Web Browser จะรับข้อมูลที่ได้ (ซึ่งส่วนใหญ่จะเป็นไฟล์ HTML, CSS, และ JavaScript) และนำมาแสดงผลให้เราเห็นเป็นหน้าเว็บไซต์ที่เราคุ้นเคย

กระบวนการนี้เรียกว่า Client-Server Model ซึ่งเป็นพื้นฐานของการทำงานของเว็บไซต์ทั้งหมด

ภาพแสดง Client-Server Model

Domain Name และ Hosting: บ้านและที่อยู่ของเว็บไซต์

ถ้า Client-Server Model คือการสั่งอาหาร, Domain Name และ Hosting ก็เหมือนกับที่อยู่และบ้านของร้านอาหาร:

Domain Name (ชื่อโดเมน): คือชื่อเว็บไซต์ที่เราพิมพ์ลงใน Web Browser (เช่น www.google.com, www.example.com) เปรียบเสมือน ที่อยู่ ของเว็บไซต์ ทำให้คนอื่นสามารถหาเว็บไซต์ของเราเจอได้ง่าย
Hosting (โฮสติ้ง): คือพื้นที่ที่เราเช่าบน Server เพื่อเก็บไฟล์ข้อมูลของเว็บไซต์ (HTML, CSS, JavaScript, รูปภาพ, ฐานข้อมูล) เปรียบเสมือน บ้าน ที่เราสร้างเว็บไซต์ของเราขึ้นมา

เมื่อเราพิมพ์ Domain Name ลงใน Web Browser, Browser จะทำการค้นหา Server ที่ Hosting เว็บไซต์นั้นอยู่ และทำการ Request ข้อมูลตามที่อธิบายไว้ใน Client-Server Model

การเลือก Domain Name ที่ดี และ Hosting ที่เหมาะสม เป็นสิ่งสำคัญอย่างยิ่งต่อความสำเร็จของเว็บไซต์

HTML, CSS, JavaScript คืออะไร: ส่วนประกอบหลักของเว็บไซต์

เมื่อ Web Browser ได้รับข้อมูลจาก Server แล้ว, ข้อมูลเหล่านั้นมักจะประกอบไปด้วยไฟล์ 3 ประเภทหลัก:

HTML (HyperText Markup Language): คือภาษาที่ใช้สร้างโครงสร้างของเว็บไซต์ เปรียบเสมือน โครงกระดูก ของเว็บไซต์ กำหนดว่าจะมีหัวข้ออะไร, ย่อหน้าอะไร, รูปภาพอะไร, ลิงก์อะไร
CSS (Cascading Style Sheets): คือภาษาที่ใช้ตกแต่งหน้าตาของเว็บไซต์ เปรียบเสมือน เสื้อผ้า ของเว็บไซต์ กำหนดว่าตัวอักษรจะมีสีอะไร, ขนาดเท่าไหร่, พื้นหลังเป็นสีอะไร, จัดวางองค์ประกอบอย่างไร
JavaScript: คือภาษาโปรแกรมที่ใช้เพิ่มลูกเล่นและความสามารถให้กับเว็บไซต์ เปรียบเสมือน สมอง ของเว็บไซต์ ทำให้เว็บไซต์สามารถตอบสนองต่อการกระทำของผู้ใช้ได้ (เช่น การคลิกปุ่ม, การเลื่อนหน้าจอ)

ลองดูตัวอย่างง่ายๆ:

<!DOCTYPE html>
<html>
<head>
  <title>เว็บไซต์ของฉัน</title>
</head>
<body>
  <h1>ยินดีต้อนรับสู่เว็บไซต์ของฉัน!</h1>
  <p>นี่คือย่อหน้าแรกของเว็บไซต์</p>
</body>
</html>

โค้ด HTML ด้านบน จะสร้างหน้าเว็บที่มีหัวข้อ (<h1>) และย่อหน้า (<p>) โดยที่ยังไม่มีการตกแต่งใดๆ

ถ้าเราเพิ่ม CSS เข้าไป:

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: blue;
  text-align: center;
}

โค้ด CSS ด้านบน จะเปลี่ยนสีพื้นหลังของหน้าเว็บเป็นสีเทาอ่อน และเปลี่ยนสีของหัวข้อเป็นสีฟ้า พร้อมทั้งจัดให้อยู่ตรงกลาง

และถ้าเราเพิ่ม JavaScript เข้าไป:

alert("สวัสดี!");

โค้ด JavaScript ด้านบน จะแสดงกล่องข้อความ "สวัสดี!" เมื่อเราเปิดหน้าเว็บ

Web Browser คืออะไร: เครื่องมือสำคัญในการเข้าชมเว็บไซต์

Web Browser คือโปรแกรมที่เราใช้เปิดและเข้าชมเว็บไซต์ต่างๆ (เช่น Google Chrome, Mozilla Firefox, Safari, Microsoft Edge) Web Browser ทำหน้าที่:

ส่งคำขอ (Request) ไปยัง Server ของเว็บไซต์
รับข้อมูล (Response) จาก Server
แปลไฟล์ HTML, CSS, และ JavaScript ให้กลายเป็นหน้าเว็บไซต์ที่เราเห็น
แสดงผลหน้าเว็บไซต์ให้เราใช้งาน

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

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับ:

Client-Server Model: หลักการทำงานพื้นฐานของเว็บไซต์
Domain Name และ Hosting: ที่อยู่และบ้านของเว็บไซต์
HTML, CSS, JavaScript: ส่วนประกอบหลักของเว็บไซต์
Web Browser: เครื่องมือที่ใช้เข้าชมเว็บไซต์

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