เว็บไซต์คืออะไร ทำไม Data People ควรรู้

01เว็บไซต์คืออะไรกันแน่

พูดแบบง่ายที่สุด เว็บไซต์คือ “เอกสาร” ชนิดหนึ่งที่เก็บอยู่บนเครื่องคอมพิวเตอร์เครื่องหนึ่ง (เรียกว่า server) แล้วเปิดให้เครื่องอื่น ๆ เข้ามาขอดูได้ผ่านอินเทอร์เน็ต เวลาเราพิมพ์ URL แล้วกด Enter สิ่งที่เกิดขึ้นเบื้องหลังคือ:

1. เบราว์เซอร์ของเรา (Chrome, Safari, Edge) ส่งคำขอไปหา server ว่า “ขอไฟล์หน้านี้หน่อย”
2. Server ส่งไฟล์กลับมา ซึ่งไฟล์หลักคือไฟล์ที่เขียนด้วยภาษา HTML
3. เบราว์เซอร์อ่านไฟล์นั้น แล้ว “แปล” ออกมาเป็นหน้าตาที่เราเห็น พร้อมโหลดไฟล์ CSS และ JavaScript ที่แนบมาด้วย

ถ้าเทียบกับงานที่เราคุ้นเคย ลองนึกภาพว่าเรากำลังเปิดไฟล์ Excel ที่แชร์อยู่บน SharePoint พอเปิดไฟล์ เครื่องเราจะดึงข้อมูลจากเซิร์ฟเวอร์มาแสดงผลบนหน้าจอ เว็บไซต์ก็ทำงานคล้ายกันมาก เพียงแต่ “ไฟล์” ที่ถูกดึงมาคือ HTML, CSS, JS แทนที่จะเป็นไฟล์ .xlsx

02ทำไมเรื่องนี้สำคัญกับงาน Data

หลายคนอาจสงสัยว่า ในเมื่อมี Power BI, Tableau, Looker Studio หรือแม้แต่ Google Sheets ที่ทำ dashboard ได้อยู่แล้ว ทำไมต้องมาเรียนทำเว็บเองด้วย คำตอบคือเครื่องมือเหล่านั้นสะดวก แต่มีข้อจำกัดเมื่อเราต้องการอะไรที่ “เฉพาะทาง” ขึ้นมาอีกนิด เช่น:

• อยากทำหน้ารายงานที่ฝังไว้ในระบบภายในบริษัท ให้ทีมอื่นกรอกข้อมูลแล้วเห็นผลทันที
• อยากคุมหน้าตา กราฟ และ interaction แบบที่เครื่องมือสำเร็จรูปทำไม่ได้
• อยากเข้าใจว่า Streamlit, Dash, Gradio ที่ใช้ปั้น prototype อยู่ทุกวัน เบื้องหลังมันสร้าง HTML/CSS/JS ออกมายังไง เวลามันพังหรืออยากปรับแต่งเพิ่มจะได้แก้ไขเองได้
• อยากส่งรายงานเป็นหน้าเว็บสวย ๆ ให้ผู้บริหารเปิดดูได้จากลิงก์เดียว ไม่ต้องติดตั้งโปรแกรมอะไรเพิ่ม

พูดง่าย ๆ คือ เครื่องมือ BI ช่วยให้เราทำงานเร็วในกรอบที่มันกำหนดไว้ให้ แต่พอวันไหนที่เราอยากออกนอกกรอบนั้น ความรู้เรื่องเว็บพื้นฐานจะเป็นสิ่งที่ทำให้เราทำเองได้ โดยไม่ต้องรอทีม engineer ว่างมาช่วย

03สามภาษาแห่งเว็บ ทำงานร่วมกันยังไง

เว็บไซต์แทบทุกหน้าบนโลกนี้ ประกอบขึ้นจากภาษาหลัก 3 ภาษาที่ทำงานคนละหน้าที่กัน ถ้าจะเทียบกับของที่พวกเราคุ้นเคยในงาน Data ลองมองแบบนี้:

• HTML คือโครงสร้างข้อมูล — เหมือนตารางเปล่า ๆ ที่บอกว่าตรงนี้คือหัวตาราง ตรงนี้คือแถวข้อมูล ตรงนี้คือปุ่ม
• CSS คือการจัดรูปแบบ — เหมือนการตั้งค่า Conditional Formatting ใน Excel บอกว่าคอลัมน์นี้สีอะไร ตัวหนา ตัวเอียง ระยะห่างเท่าไร
• JavaScript คือตรรกะและการโต้ตอบ — เหมือนสูตร Excel หรือ Macro ที่ทำให้ตารางไม่ใช่แค่ข้อมูลนิ่ง ๆ แต่ตอบสนองเวลาเรากดปุ่ม พิมพ์ค้นหา หรือกรองข้อมูล

<!-- HTML: โครงสร้าง -->
<button id="loadBtn">โหลดข้อมูลยอดขาย</button>
<p id="result">ยังไม่ได้โหลดข้อมูล</p>

<style>
  /* CSS: จัดรูปแบบ */
  #loadBtn { background: #2f6f5e; color: white; padding: 8px 16px; }
</style>

<script>
  // JavaScript: ตรรกะ
  document.getElementById("loadBtn").addEventListener("click", function () {
    document.getElementById("result").textContent = "ยอดขายวันนี้: 128,400 บาท";
  });
</script>

ยังไม่ต้องเข้าใจโค้ดด้านบนทั้งหมดตอนนี้ก็ได้ ในบทที่ 2-3 เราจะเจาะ HTML ล้วน ๆ ก่อน บทที่ 4-5 ค่อยไปที่ CSS แล้วบทที่ 6 เป็นต้นไปถึงจะเข้าสู่ JavaScript อย่างจริงจัง ตอนนี้แค่จำหลักการไว้ว่า HTML สร้างโครง, CSS แต่งหน้าตา, JS ทำให้มันขยับได้ ก็เพียงพอแล้ว

04เบราว์เซอร์ทำงานยังไงตอนเปิดเว็บ

ลองดูขั้นตอนแบบละเอียดขึ้นอีกนิด เพราะความเข้าใจตรงนี้จะช่วยเราตอน debug เว็บที่ทำเองในอนาคต

1. Request — เราพิมพ์ URL เช่น https://common-learn.com/lesson/data-web-1-1/ เบราว์เซอร์แปลง URL นี้เป็นคำขอส่งไปหา server ที่ดูแลโดเมนนั้น
2. Response — server ตอบกลับมาเป็นไฟล์ HTML (บวก CSS/JS ที่ HTML นั้นอ้างอิงถึง)
3. Parsing — เบราว์เซอร์อ่านไฟล์ HTML จากบนลงล่าง แล้วสร้างโครงสร้างที่เรียกว่า DOM (Document Object Model) ขึ้นมาในหน่วยความจำ
4. Render — เบราว์เซอร์นำ DOM มาผสมกับกฎ CSS ทั้งหมด แล้ววาดออกมาเป็นภาพบนหน้าจอ
5. Interactive — ถ้ามี JavaScript แนบมา เบราว์เซอร์จะรันโค้ดนั้น ทำให้หน้าเว็บตอบสนองการคลิก พิมพ์ หรือ scroll ได้

ทุกครั้งที่เราเปิด dashboard ที่ทำจาก Streamlit หรือ Power BI แบบ embed ในเว็บ ขั้นตอนทั้ง 5 นี้ เกิดขึ้นเหมือนกันหมด สิ่งที่ต่างกันคือเครื่องมือเหล่านั้นเขียน HTML/CSS/JS ให้เราอัตโนมัติ โดยที่เราไม่เห็นโค้ดตรง ๆ เท่านั้นเอง

05เว็บกับงาน Data ในชีวิตจริง

เพื่อให้เห็นภาพชัดขึ้น นี่คือตัวอย่างงานจริงที่คนสาย Data ใช้ความรู้เรื่องเว็บบ่อย ๆ:

• Internal dashboard — ทีม data ปั้นหน้าแสดง KPI ที่อัปเดตสด แล้วฝังไว้ในระบบ intranet ของบริษัท
• Data app แบบ Streamlit/Dash — เขียน Python แล้วมันแปลงเป็นหน้าเว็บให้อัตโนมัติ แต่ถ้าอยากปรับ CSS ให้ตรง brand หรือเพิ่ม interaction พิเศษ ต้องเข้าใจ HTML/CSS/JS ที่อยู่เบื้องหลัง
• Web scraping — ก่อนจะดึงข้อมูลจากเว็บด้วย Python (BeautifulSoup, Scrapy) เราต้องอ่านโครงสร้าง HTML ของเว็บเป้าหมายให้ออกก่อน
• รายงานส่งผู้บริหาร — ทำเป็นหน้าเว็บหน้าเดียว ส่งลิงก์ไปแทนไฟล์ PDF หรือ PPT เปิดดูได้ทุกอุปกรณ์ อัปเดตข้อมูลใหม่ได้โดยไม่ต้องส่งไฟล์ซ้ำ

06สิ่งที่จะได้เรียนตลอดคอร์สนี้

คอร์สนี้แบ่งเป็น 10 บท พาไปทีละขั้นตั้งแต่ศูนย์ โดยมีจุดหมายปลายทางคือการสร้าง Mini Dashboard ของตัวเองในบทที่ 9 แล้วรู้วิธี deploy ให้คนอื่นเข้าดูได้จริงในบทที่ 10

• บทที่ 2-3: HTML สำหรับสร้างโครงสร้างหน้าเว็บ ตาราง และฟอร์ม
• บทที่ 4-5: CSS สำหรับจัดหน้าตาและ Layout แบบ Dashboard
• บทที่ 6-8: JavaScript ตั้งแต่พื้นฐานไปจนถึงการดึงข้อมูลจาก API และทำกราฟ
• บทที่ 9-10: ลงมือทำโปรเจกต์จริง แล้ว deploy ให้ใช้งานได้