เว็บของ Tim Berners-Lee: URLs, HTTP, HTML และทำไมมันสำคัญ

Q: What’s the difference between the World Wide Web and the Internet?

The Internet is the global network (routers, cables, IP routing) that connects computers. The Web is a service that runs on top of it: resources identified by URLs , transferred with HTTP , and often displayed as HTML . Many things use the Internet without being “the Web,” like email, some multiplayer games, and many chat systems.

Q: What is a URL, and what do the different parts mean?

Think of a URL as a precise address for a resource. It can point to an HTML page, an image, a PDF, or an API endpoint. A typical URL includes: - scheme ( ) — how to access it - host ( ) — which server - path ( ) — which resource - query ( ) — extra parameters - fragment ( ) — a location within a page (browser-side)

Q: Is “example.com” a URL or a domain—and why does it matter?

A domain (like ) is just the name of a host. A URL can include much more detail—like the path and query—that changes what you actually get back. For example: - -

Q: What does the “#something” part of a URL do?

The fragment (the part after ) is handled by the browser , not sent to the server in the HTTP request. Common uses: - Jump to a section on a page ( ) - Track client-side state in some apps If you change only the fragment, you often won’t trigger a full page reload.

Q: What is HTTP in plain English?

HTTP is the rules for the request-and-response conversation between a client (browser/app) and a server. In practice: - Your browser sends an HTTP request for a URL - The server replies with a status code, headers, and a body (HTML, JSON, an image, etc.)

Q: When should I use GET vs POST?

Use GET when you’re retrieving something (read-only in intent), like loading a page or fetching data. Use POST when you’re submitting data to be processed, like creating an account, posting a comment, or starting a checkout. A practical tip: if the action should be bookmarkable/shareable (like a search), GET is usually the better fit; if it changes server state, POST is typical.

Q: What do common HTTP status codes like 200, 404, 301, and 500 mean?

Status codes summarize the outcome of a request: - 200 — success - 404 — the server is reachable, but that resource isn’t at that URL - 301/302 — the resource moved (redirect) - 500 — server error while trying to handle the request When troubleshooting, a 404 often points to a wrong URL or deleted page; a 500 usually means a server-side bug or outage.

Q: What is DNS, and why does it happen before a page loads?

A browser needs an IP address to connect to a server. DNS is the system that translates a human name (like ) into an IP address. If a site sometimes “doesn’t resolve,” DNS is a common suspect—especially if it fails on one network/device but works on another.

Q: Does HTTPS mean a website is trustworthy?

HTTPS encrypts traffic and helps ensure you’re connected to the intended domain, which protects logins, forms, and sensitive data in transit. It does not guarantee the site is honest or safe. You still need to evaluate: - the reputation of the source - whether the URL is the one you expect - what you’re being asked to download or submit

เข้าสู่ระบบ เริ่มต้นใช้งาน

เว็บคืออะไร (และไม่ใช่อะไร)

World Wide Web (มักเรียกสั้นๆ ว่า “เว็บ”) เป็นวิธีการเผยแพร่และเข้าถึงข้อมูลโดยใช้ลิงก์ มันคือระบบที่ให้คุณคลิกจากหน้าหนึ่งไปหน้าหนึ่ง เปิดหน้าสินค้าจากผลการค้นหา หรือแชร์ลิงก์ที่ใช้งานได้บนคอมพิวเตอร์หรือโทรศัพท์เกือบทุกเครื่อง

เว็บถูกสร้างจากแนวคิดง่ายๆ สามอย่าง

แกนกลางของเว็บขับเคลื่อนด้วยชุดความคิดที่ปฏิบัติได้จริง:

URL (Uniform Resource Locator): ที่อยู่ของสิ่งบนเว็บ (หน้า รูป ไฟล์ หรือ endpoint)
HTTP (Hypertext Transfer Protocol): การสนทนาเรื่องการส่งข้อมูล—วิธีที่เบราว์เซอร์ขอสิ่งหนึ่งและเซิร์ฟเวอร์ตอบกลับ
HTML (HyperText Markup Language): รูปแบบหน้าที่ใช้บรรยายเนื้อหาและสำคัญที่สุดคือ ลิงก์ไปยัง URLs อื่นๆ

คุณไม่จำเป็นต้องเป็นโปรแกรมเมอร์เพื่อสัมผัสผลกระทบของพวกนี้: ทุกครั้งที่คุณวางลิงก์ โหลดหน้า หรือคลิกปุ่มที่พาไปที่อื่น คุณกำลังพึ่งพา URL + HTTP + HTML

เว็บกับอินเทอร์เน็ต (ไม่เหมือนกัน)

คนมักใช้คำว่า “เว็บ” กับ “อินเทอร์เน็ต” สลับกันไปมา แต่จริงๆ แล้วต่างกัน:

อินเทอร์เน็ต คือโครงสร้างพื้นฐานเบื้องหลัง: เครือข่ายคอมพิวเตอร์ที่เชื่อมต่อทั่วโลก
เว็บ คือบริการหนึ่งที่รันอยู่บนอินเทอร์เน็ต: คอลเลกชันของทรัพยากรที่เชื่อมโยงเข้าด้วยกันและเข้าถึงด้วย URL และ HTTP โดยปกติจะนำเสนอเป็น HTML

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

ทำไมเรื่องนี้ยังสำคัญ

แม้แต่ประสบการณ์สมัยใหม่—single-page apps, mobile apps, และ APIs—ก็ยังพึ่งพาพื้นฐานเหล่านี้มาก พวกมันอาจซ่อนรายละเอียดไว้ แต่ยังคงใช้ URLs เพื่อระบุทรัพยากร, HTTP เพื่อแลกเปลี่ยนคำขอและคำตอบ, และบ่อยครั้ง HTML เพื่อบูตสแตรปสิ่งที่คุณเห็นในเบราว์เซอร์

ปัญหาที่ Tim Berners-Lee พยายามแก้

Tim Berners-Lee ไม่ได้ตั้งใจคิดค้น “อินเทอร์เน็ต” ในปี 1989 ขณะทำงานที่ CERN เขากำลังมุ่งแก้ความหงุดหงิดเชิงปฏิบัติ: ข้อมูลสำคัญมีอยู่ แต่กระจัดกระจาย ต่างระบบเก็บต่างรูปแบบ และหายากเมื่อต้องค้นคืน

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

เป้าหมายเรียบง่าย: ทำให้ข้อมูลเชื่อมโยงและแชร์ได้

แนวคิดหลักของ Berners-Lee คือให้ใครก็ได้เผยแพร่เอกสารบนคอมพิวเตอร์ของตัวเอง แล้วให้ผู้อื่นเข้าถึงได้ด้วยวิธีที่สม่ำเสมอ—โดยไม่ต้องรู้ชนิดเครื่อง ระบบปฏิบัติการ หรือโครงสร้างไดเรกทอรีภายใน

สิ่งนั้นต้องใช้ส่วนต่างๆ ร่วมกัน:

วิธีตั้งชื่อและหาตำแหน่งข้อมูลอย่างสม่ำเสมอ (ที่อยู่)
วิธีพื้นฐานในการร้องขอและรับข้อมูลข้ามเครือข่าย
รูปแบบเอกสารเบาๆ ที่สามารถใส่ลิงก์ไปเอกสารอื่นได้

ให้ความสำคัญกับความเรียบง่ายและการทำงานร่วมกัน

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

นี่คือเหตุผลที่มาตรฐานเปิดสำคัญตั้งแต่แรก: เว็บต้องการกฎสาธารณะที่แชร์กัน เพื่อให้ระบบอิสระหลายๆ ฝ่ายเข้าร่วมได้ การมุ่งเน้นมาตรฐานสากล—แทนการผูกติดกับชุดเครื่องมือของผู้ขายรายเดียว—ทำให้เว็บกระจายอย่างรวดเร็วและเบราเซอร์กับเซิร์ฟเวอร์ใหม่ๆ ทำงานร่วมกับเนื้อหาเดิมได้

URLs: ระบบที่อยู่ของเว็บ

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

URLs แก้ปัญหานี้สำหรับ World Wide Web โดยให้ที่อยู่สากลที่คัดลอกแล้ววางได้สำหรับทรัพยากร

ตัวอย่าง URL ที่อ่านได้

https://www.example.com:443/products/shoes?color=black&size=42#reviews

ความหมายของแต่ละส่วน (ภาษาเรียบง่าย):

https — scheme: กฎที่ใช้ดึงข้อมูล (HTTP ผ่านการเข้ารหัส)
www.example.com — host: เซิร์ฟเวอร์ที่ต้องติดต่อ
:443 — port (มักนิ่งและถูกละไว้เป็นค่าเริ่มต้น)
/products/shoes — path: ทรัพยากรใดบนเซิร์ฟเวอร์นั้น
?color=black&size=42 — query: พารามิเตอร์เพิ่มเติม (มักใช้กรองหรือระบุ)
#reviews — fragment: ตำแหน่งภายในหน้า (จัดการโดยเบราว์เซอร์)

URL ไม่ได้ชี้แค่ "หน้า"

URL สามารถระบุสิ่งที่เซิร์ฟเวอร์ส่งกลับได้แทบทุกอย่าง: หน้า HTML, รูปภาพ, PDF, ไฟล์ดาวน์โหลด หรือแม้แต่ endpoint ของ API ที่แอปใช้

ตัวอย่าง:

/images/logo.png (รูปภาพ)
/docs/terms.pdf (เอกสาร)
/api/orders/123 (ข้อมูลสำหรับแอป)

URL vs. URI vs. "ลิงก์" (ให้ง่ายไว้)

คนมักใช้คำเหล่านี้สลับกัน:

URL: "ที่อยู่" บนเว็บที่ใช้ดึงบางสิ่งได้
URI: คำศัพท์กว้างขึ้นที่รวม URL
ลิงก์: สิ่งที่คุณคลิก—โดยปกติคือข้อความหรือปุ่มที่มี URL อยู่

สำหรับการใช้งานทั่วไป คิดว่า “URL = ที่อยู่” ก็ใช้ได้ประมาณ 95% ของเวลา

HTTP: ภาษา request-and-response ของเว็บ

HTTP คือสไตล์การสนทนาพื้นฐานของเว็บ เป็นข้อตกลงง่ายๆ: เบราว์เซอร์ขออะไรบางอย่าง และเซิร์ฟเวอร์ตอบกลับสิ่งที่มี (หรืออธิบายว่าทำไมถึงทำไม่ได้)

แนวคิดหลัก: เบราว์เซอร์ขอ เซิร์ฟเวอร์ตอบ

เมื่อคุณพิมพ์ URL หรือคลิกลิงก์ เบราว์เซอร์ส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์ คำขอนั้นเหมือนข้อความที่บอกว่า: “ฉันต้องการทรัพยากรนี้”

เซิร์ฟเวอร์จะส่ง HTTP response กลับมา ซึ่งเป็นแพ็กเกจที่มีผลลัพธ์: เนื้อหาที่คุณขอ (เช่น หน้า) หรือข้อความว่าเกิดอะไรขึ้น

คำขอในชีวิตประจำวัน (GET และ POST)

คำขอ HTTP มี method ซึ่งเป็นประเภทการกระทำที่คุณทำ

GET: “กรุณาส่งให้ฉัน” ตัวอย่าง: โหลดหน้า หรือดาวน์โหลดไฟล์
POST: “กรุณารับข้อมูลนี้” ตัวอย่าง: ส่งฟอร์มสมัครสมาชิกหรือส่งความคิดเห็น

GET มักไม่เปลี่ยนสถานะบนเซิร์ฟเวอร์; ใช้สำหรับอ่าน ส่วน POST มักใช้เมื่อส่งข้อมูลเพื่อประมวลผล

รหัสสถานะ: ผลลัพธ์ของคำขอ

ทุก response มีรหัสสถานะ—คิดว่าเป็นผลการจัดส่ง

200: สำเร็จ นี่คือสิ่งที่คุณขอ
404: ไม่พบ ทรัพยากรนี้ไม่มีที่อยู่นั้น
301: ย้ายถาวร ทรัพยากรถูกย้ายไปที่อยู่ใหม่; อัปเดตบุ๊กมาร์กของคุณ

หัวเรื่องและชนิดของเนื้อหา: ป้ายกำกับบนแพ็กเกจ

คำขอและคำตอบยังมี headers ซึ่งเหมือนป้ายกำกับ: “นี่คือฉัน”, “ฉันยอมรับแบบนี้”, หรือ “ควรจัดการเนื้อหานี้อย่างไร”

หนึ่งในป้ายกำกับที่มีประโยชน์คือ Content-Type เช่น text/html สำหรับหน้าเว็บ หรือ application/json สำหรับข้อมูล มันบอกเบราว์เซอร์ว่าในแพ็กเกจมีอะไรเพื่อแสดงผลให้ถูกต้อง

HTML: รูปแบบง่ายๆ สำหรับหน้าและลิงก์

HTML (HyperText Markup Language) เป็นรูปแบบที่ใช้บรรยาย โครงสร้าง ของหน้าเว็บ—ว่าเนื้อหาเป็นอะไรและจัดวางอย่างไร นึกภาพมันเหมือนเอกสารที่มีป้ายกำกับ: “นี่คือหัวเรื่อง”, “นี่คือย่อหน้า”, “นี่คือลิงก์”, “นี่คือช่องฟอร์ม”

แท็ก: ป้ายล้อมรอบเนื้อหา

HTML ใช้ แท็ก เพื่อมาร์กเนื้อหา แท็กมักมีเวอร์ชันเปิดและปิด ครอบเนื้อหาที่มันอธิบาย

หัวเรื่องและย่อหน้าทำให้หน้าเป็นรูปเป็นร่าง หัวเรื่องบอกคนและเบราว์เซอร์ว่า "นี่คือหัวข้อสำคัญ" ย่อหน้าบอกว่า "นี่คือตัวหนังสือ"

ลิงก์และรูปภาพก็ถูกบรรยายใน HTML แท็กรูปภาพชี้ไปยังไฟล์รูป ในขณะที่แท็กลิงก์ชี้ไปยัง URL อื่น

ไฮเปอร์เท็กซ์: ทำไมลิงก์เปลี่ยนเกม

"HT" ใน HTML—hypertext—คือความคิดสำคัญที่ทำให้เว็บต่างจากระบบก่อนหน้า แทนที่จะนำทางโดยเมนู โฟลเดอร์ หรือคำสั่งพิเศษ คุณสามารถกระโดดจากเอกสารหนึ่งไปอีกเอกสารหนึ่งได้โดยคลิกลิงก์ฝังในข้อความ

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

ตัวอย่างเล็กๆ: ลิงก์ในภาษาง่ายๆ

<a href="/blog/how-http-works">Read more about HTTP</a>

ในภาษาธรรมดา: “โชว์คำว่า Read more about HTTP และเมื่อคลิก ให้พาผู้อ่านไปที่หน้า /blog/how-http-works”

โค้ดในกรอบด้านบนไม่ควรถูกแปล — มันแสดงตัวอย่าง HTML โดยตรง

ฟอร์ม: จากการอ่านสู่การโต้ตอบ

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

HTML vs. CSS vs. JavaScript

ง่ายที่จะสับกัน แต่แต่ละอย่างมีหน้าที่ต่างกัน:

HTML กำหนด โครงสร้างและความหมาย (หัวเรื่อง ย่อหน้า ลิงก์ ฟอร์ม)
CSS ควบคุม สไตล์ (สี ช่องว่าง แบบอักษร เลย์เอาต์)
JavaScript เพิ่ม พฤติกรรม (การตรวจสอบ การอัปเดตแบบไดนามิก ฟีเจอร์โต้ตอบ)

แม้เว็บแอปจะซับซ้อนขึ้น HTML ยังคงเป็นจุดเริ่มต้น: เป็นวิธีที่อ่านได้ร่วมกันในการบรรยายว่าหน้ามีอะไรและจะพาไปที่ไหน

กระบวนการโหลดหน้าเว็บ: คำอธิบายเป็นภาษาธรรมดา

Go From Idea to Stack

Sketch your routes and resources, then generate a React front end with a Go API.

Create Project

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

1) คุณพิมพ์ URL

URL (เช่น https://example.com/page) เป็นที่อยู่ของหน้า มันมีชื่อโฮสต์ (example.com) และมักมี path (/page)

2) เบราว์เซอร์ค้นหาไซต์ (DNS lookup)

คอมพิวเตอร์บนอินเทอร์เน็ตคุยกันด้วยที่อยู่ตัวเลขที่เรียกว่า IP address. DNS (Domain Name System) เหมือนสมุดโทรศัพท์ที่แม็ป example.com ไปยัง IP address

การค้นหานี้มักรวดเร็ว—และบางครั้งอาจข้ามเพราะมีคำตอบเก็บไว้จากการเยี่ยมชมก่อนหน้า

3) เบราว์เซอร์เชื่อมต่อกับคอมพิวเตอร์นั้น

ตอนนี้เบราว์เซอร์เปิดการเชื่อมต่อไปยังเซิร์ฟเวอร์ที่ IP นั้น หาก URL เริ่มด้วย https:// เบราว์เซอร์จะตั้งค่าการเชื่อมต่อเข้ารหัสเพื่อไม่ให้ผู้อื่นอ่านสิ่งที่ส่งได้ง่าย

4) เบราว์เซอร์ขอด้วย HTTP

HTTP เป็นภาษาขอและตอบของเว็บ เบราว์เซอร์ส่งคำขอ HTTP เช่น: “กรุณาส่ง /page ให้ฉัน”

เซิร์ฟเวอร์ตอบด้วย HTTP response ที่มีสถานะ (เช่น “OK” หรือ “Not Found”) และเนื้อหา

5) เบราว์เซอร์รับ HTML และเรนเดอร์หน้า

เนื้อหานั้นมักเป็น HTML เบราว์เซอร์อ่าน HTML แล้วอาจพบว่าต้องการไฟล์อื่นๆ (CSS สำหรับสไตล์, JavaScript สำหรับการโต้ตอบ, รูปภาพ, ฟอนต์) แล้วจะทำการร้องขอ/ตอบด้วย HTTP อีกครั้งสำหรับแต่ละไฟล์

6) แคชชิ่ง: “เก็บสำเนาไว้เพื่อโหลดเร็วขึ้น”

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

เช็คลิสต์สั้น (ลำดับการทำงาน):

ใส่ URL
DNS หา IP
เบราว์เซอร์เชื่อมต่อ (และเข้ารหัสถ้า HTTPS)
HTTP request สำหรับ path/ทรัพยากร
เซิร์ฟเวอร์ส่ง HTML (และไฟล์อื่นๆ)
เบราว์เซอร์เรนเดอร์; แคชช่วยโหลดเร็วขึ้นในอนาคต

เซิร์ฟเวอร์ เบราว์เซอร์ และทรัพยากร: บทบาทพื้นฐาน

เมื่อคนพูดว่า “เว็บ” พวกเขามักหมายถึงประสบการณ์ที่ราบรื่น: แตะลิงก์แล้วหน้าโผล่ขึ้นมา เบื้องหลังมันคือความสัมพันธ์ง่ายๆ ระหว่างสามแนวคิด: เซิร์ฟเวอร์, เบราว์เซอร์, และ ทรัพยากร

เซิร์ฟเวอร์: ที่ที่สิ่งต่างๆ อยู่

เซิร์ฟเวอร์ คือคอมพิวเตอร์ (หรือกลุ่มคอมพิวเตอร์) ที่เชื่อมต่ออินเทอร์เน็ตและ โฮสต์ทรัพยากรที่ URLs ถ้า URL เป็นที่อยู่ เซิร์ฟเวอร์คือสถานที่ที่รับผู้มาเยือนที่ที่อยู่นั้นและตัดสินใจว่าจะส่งอะไรกลับ

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

เบราว์เซอร์: ที่ที่ร้องขอและแสดงผล

เบราว์เซอร์ คือโปรแกรม (เช่น Chrome, Safari, Firefox) ที่ ดึงทรัพยากร จากเซิร์ฟเวอร์และ แสดง ให้เป็นมิตรกับผู้ใช้

เมื่อคุณใส่ URL หรือคลิกลิงก์ เบราว์เซอร์จะ:

ขอทรัพยากรที่ URL นั้นจากเซิร์ฟเวอร์
รับคำตอบ
เรนเดอร์มัน (สำหรับ HTML) หรือบันทึก/ใช้มัน (สำหรับรูปภาพ ไฟล์ดาวน์โหลด ฯลฯ)

ทรัพยากร: สิ่งที่ถูกส่ง

ทรัพยากร คืออะไรก็ตามที่เว็บสามารถระบุและส่งได้ที่ URL ตัวอย่างทั่วไป ได้แก่:

เอกสาร (หน้า HTML)
รูปภาพ (PNG, JPEG, SVG)
สคริปต์ (ไฟล์ JavaScript)
สไตล์ (ไฟล์ CSS)
APIs (endpoint ที่คืนข้อมูล มักเป็น JSON)

โมเดลนี้ไม่ได้จำกัดแค่เบราว์เซอร์ แอปมือถือก็สามารถร้องขอ URL—โดยทั่วไปเป็น endpoint ของเว็บ API—และรับข้อมูลมาแสดงในอินเทอร์เฟซของแอปเอง บทบาทยังคงเหมือนเดิม: แอปเป็น “client”, เซิร์ฟเวอร์เป็น “host”, และการตอบกลับของ API เป็นทรัพยากร

จากเอกสารสู่การโต้ตอบ: ฟอร์มและข้อมูล

Add a Mobile Client

Create a Flutter mobile app that talks to your web API over standard HTTP.

Build Mobile

หน้าเว็บยุคแรกส่วนใหญ่แค่ แสดง ข้อมูล ฟอร์มทำให้เว็บ เก็บ ข้อมูล—เปลี่ยนหน้าจากเอกสารเป็นการสนทนาสองทาง

ฟอร์มทำงานอย่างไร

ฟอร์ม HTML คือชุดฟิลด์ที่มีโครงสร้าง (เช่น ช่องข้อความ กล่องเลือก ปุ่ม) พร้อมคำสั่งสองสิ่ง:

ส่งข้อมูลไปที่ไหน (URL ใน action)
ส่งอย่างไร (วิธี method, มักเป็น GET หรือ POST)

เมื่อคุณคลิก “ส่ง” เบราว์เซอร์จะแพ็กข้อมูลที่คุณกรอกแล้วส่งด้วย HTTP ไปยังเซิร์ฟเวอร์ที่ URL นั้น นี่คือสะพานระหว่าง “เอกสารที่มีฟิลด์” กับ “แอปที่ประมวลผลอินพุต”

GET vs POST (ความต่างเชิงปฏิบัติ)

โดยภาพรวม:

GET แนบข้อมูลของฟอร์มไว้ใน URL เป็น query string (มักใช้สำหรับการค้นหาและกรอง) ผลลัพธ์จึงบันทึกเป็นบุ๊กมาร์กและแชร์ได้ง่าย
POST ส่งข้อมูลฟอร์มใน body ของคำขอ HTTP (มักใช้เมื่อสร้างหรือเปลี่ยนแปลงบางอย่าง เช่น การสมัครสมาชิกหรือคำสั่งซื้อ)

ดังนั้นการค้นหาอาจเป็น /search?q=shoes (GET) ขณะที่การชำระเงินอาจ POST รายละเอียดคำสั่งไปที่ /checkout

เซิร์ฟเวอร์จัดการฟอร์มอย่างไร

ฝั่งเซิร์ฟเวอร์มีโปรแกรมรับคำขอ HTTP อ่านค่าที่ส่งมา และตัดสินใจว่าจะทำอย่างไรต่อไป:

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

จากนั้นเซิร์ฟเวอร์จะตอบ—มักเป็นหน้า HTML ใหม่ (“ขอบคุณ!”), ข้อความแสดงข้อผิดพลาด, หรือการเปลี่ยนเส้นทางไปยัง URL อื่น

หมายเหตุด้านความปลอดภัย: ทำไม HTTPS จึงสำคัญ

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

ทำไมแอปสมัยใหม่ยังต้องพึ่ง URLs, HTTP และ HTML

แอปสมัยใหม่บนเว็บไม่ใช่เพียงหน้าเว็บเท่านั้น ส่วนใหญ่เป็น เว็บบวกโค้ด: หน้า HTML โหลด JavaScript และ CSS แล้วใช้โค้ดนั้นอัปเดตสิ่งที่เห็นโดยไม่รีโหลดทั้งหน้า

แม้แอปจะรู้สึกเหมือนโปรแกรมเนทีฟ (ฟีดเลื่อนไม่รู้จบ อัปเดตแบบเรียลไทม์ ลากแล้ววาง) มันยังคงพึ่งพาอิฐสามก้อนที่ Tim Berners-Lee แนะนำ

URLs ยังคงระบุทุกสิ่ง

URL ไม่ได้มีไว้แค่สำหรับ “หน้า” มันคือที่อยู่สำหรับ ทรัพยากร ใดๆ: สินค้า โปรไฟล์ผู้ใช้ คิวรีการค้นหา รูปภาพ หรือ endpoint สำหรับส่งข้อความ แอปที่ดีใช้ URL เพื่อทำให้เนื้อหาแชร์ได้ บันทึกได้ และเชื่อมโยงได้—พฤติกรรมหลักของเว็บ

HTTP ยังคงส่งข้อความ

เบื้องหลัง แอปส่งคำขอ HTTP และรับคำตอบ HTTP เช่นเดียวกับเว็บไซต์ดั้งเดิม กฎยังคงเหมือนกันไม่ว่าคุณจะดึงหน้า HTML หรือดึงข้อมูลเพื่ออัปเดตส่วนหนึ่งของหน้า:

method เช่น GET (อ่าน), POST (ส่ง), PUT/PATCH (อัปเดต), DELETE (ลบ)
รหัสสถานะ เช่น 200, 404, 500
headers สำหรับการแคช ชนิดเนื้อหา และการพิสูจน์ตัวตน

APIs คือ "หน้าเว็บสำหรับข้อมูล"

แอปสมัยใหม่ส่วนใหญ่คุยกับ APIs: URL ที่คืนข้อมูล—มักเป็น JSON—ผ่าน HTTP

ตัวอย่าง:

ฟีเจอร์แผนที่ร้องขอสถานที่ใกล้เคียงจาก maps API
กระบวนการชำระเงินส่งรายละเอียดไปยัง payment API
แชทโหลดข้อความและโพสต์ข้อความใหม่ไปยัง messaging API
วิเคราะห์ส่งเหตุการณ์ไปยัง analytics endpoint

HTML ยังคงสำคัญเพราะมักเป็นจุดเริ่มต้น (และบางครั้งเป็น fallback) โดยรวมแล้ว เว็บเป็นแพลตฟอร์มสำหรับการเชื่อมต่อ: ถ้าระบบต่างๆ ตกลงกันที่ URLs และ HTTP พวกมันก็เชื่อมกันได้ ไม่ว่าใครจะสร้าง

ตัวอย่างปฏิบัติ: สร้างสิ่งเล็กๆ เช่น frontend React ที่คุยกับ JSON API และมี URL แชร์ได้สำหรับหน้าสำคัญ เครื่องมืออย่าง Koder.ai ยึดโมเดลนี้: คุณอธิบายแอปในแชท มันสร้างสแตกเว็บมาตรฐาน (React ฝั่งหน้า, Go + PostgreSQL ฝั่งหลัง) ดังนั้นคุณยังคงทำงานกับ URL จริง, endpoint HTTP, และ HTML ที่เบราว์เซอร์ส่งมอบ—แต่ไม่ต้องตั้งค่าด้วยตนเองมาก

มาตรฐานและความเข้ากันได้: เว็บขยายตัวได้อย่างไร

เว็บทำงานในระดับโลกเพราะมันสร้างบนมาตรฐานร่วม—"กฎจราจร" สาธารณะที่ให้ระบบต่างๆ สื่อสารได้เชื่อถือได้ เบราว์เซอร์จากบริษัทหนึ่งสามารถร้องขอหน้าจากเซิร์ฟเวอร์ของอีกบริษัทหนึ่ง โฮสต์ที่ใดก็ได้ เขียนด้วยภาษาโปรแกรมใดก็ได้ เพราะพวกเขาตกลงกันที่พื้นฐานเช่น URLs, HTTP, และ HTML

ทำไมมาตรฐานสำคัญ

ถ้าไม่มีมาตรฐาน ทุกไซต์จะต้องการแอปเฉพาะเพื่อดู และแต่ละเครือข่ายอาจมีวิธีส่งคำขอเป็นของตัวเอง การทำมาตรฐานแก้คำถามสำคัญง่ายๆ:

เราตั้งชื่อทรัพยากรอย่างไร? (URL)
ไคลเอนต์ร้องขออย่างไรและรับอย่างไร? (HTTP)
ผลลัพธ์ถูกจัดโครงสร้างอย่างไรเพื่อแสดงและเชื่อมโยง? (HTML)

เมื่อกฎสอดคล้อง เว็บก็กลายเป็น "mix and match": เบราว์เซอร์ที่สอดคล้อง + เซิร์ฟเวอร์ที่สอดคล้อง = ทำงานได้

มาตรฐานพัฒนาได้—โดยไม่ทำลายเว็บ

สิ่งที่น่าประทับใจคือตราบใดที่มาตรฐานปรับปรุง ฟังก์ชันพื้นฐานยังคงจดจำได้ HTTP พัฒนาไปจากเวอร์ชันแรกสู่ HTTP/1.1 แล้ว HTTP/2 และ HTTP/3 เพื่อประสิทธิภาพที่ดีขึ้น แต่แนวคิดหลักยังคงเดิม: ไคลเอนต์ร้องขอ URL เซิร์ฟเวอร์ตอบด้วยรหัสสถานะ headers และ body

HTML ก็เติบโตจากเอกสารเรียบง่ายสู่ความหมายเชิงโครงสร้างที่มากขึ้นและสื่อฝังตัว—ขณะเดียวกันก็รักษาคอนเซ็ปต์พื้นฐานของหน้าและไฮเปอร์ลิงก์ไว้

ความเข้ากันย้อนหลังเป็นคุณสมบัติไม่ใช่ข้อบังเอิญ

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

ออกแบบให้ทนทาน

ถ้าคุณอยากให้ไซต์หรือแอปอยู่ได้นาน ให้ยึดการออกแบบตามมาตรฐาน: ใช้ URL จริงสำหรับสถานะที่แชร์ได้ ปฏิบัติตามแนวทาง HTTP สำหรับแคชและรหัสสถานะ และเขียน HTML ที่ถูกต้องก่อนเพิ่มชั้นอื่น มาตรฐานไม่ใช่ข้อจำกัด—พวกมันทำให้งานของคุณพกพาได้ เชื่อถือได้ และเป็นมิตรกับอนาคต

ความเข้าใจผิดทั่วไป (และการแก้ไขแบบด่วน)

See It Live in Minutes

Deploy and host your project so you can test pages, forms, and requests end to end.

Deploy Now

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

“อินเทอร์เน็ต” กับ “เว็บ”

ความเข้าใจผิด: อินเทอร์เน็ตและ World Wide Web เหมือนกัน

แก้ไขสั้นๆ: อินเทอร์เน็ต คือเครือข่ายทั่วโลก (สาย เคเบิล เราเตอร์) ที่เชื่อมคอมพิวเตอร์ เว็บ คือบริการหนึ่งที่รันบนอินเทอร์เน็ต รากฐานจาก URLs, HTTP, และ HTML

URL กับโดเมน (แล้วทำไมส่วนอื่นถึงสำคัญ)

ความเข้าใจผิด: “URL ของฉันคือ example.com”

แก้ไขสั้นๆ: example.com คือ domain. URL คือที่อยู่เต็มที่อาจรวม path, query และส่วนอื่นๆ ที่เปลี่ยนสิ่งที่เซิร์ฟเวอร์ส่งกลับ เช่น:

https://example.com/pricing
https://example.com/search?q=shoes

ส่วนเหล่านี้สามารถเปลี่ยนผลลัพธ์ได้

HTML กับ HTTP

ความเข้าใจผิด: HTML กับ HTTP สลับกันได้

แก้ไขสั้นๆ: HTTP คือ "การสนทนาส่งและตอบ" (request/response). HTML เป็นหนึ่งในแพ็กเกจที่ถูกส่ง—มักเป็นสิ่งที่อธิบายหน้าและลิงก์ แต่ HTTP ยังสามารถส่ง JSON รูปภาพ PDF หรือวิดีโอได้

รหัสสถานะและการเปลี่ยนเส้นทาง

ความเข้าใจผิด: ข้อผิดพลาดหมายความว่า "ไซต์ล่ม" และการเปลี่ยนเส้นทางมักเสีย

แก้ไขสั้นๆ: รหัสสถานะคือสัญญาณ:

404: เซิร์ฟเวอร์เข้าถึงได้ แต่ทรัพยากรไม่เจอ
500: เซิร์ฟเวอร์มีปัญหาภายใน
301/302: ถูกเปลี่ยนเส้นทาง (ปกติหลังย้ายหน้า)

“URL ชี้เสมอไปยังหน้าอ่านได้”

ความเข้าใจผิด: ทุก URL ต้องเปิดหน้าอ่านได้สำหรับมนุษย์

แก้ไขสั้นๆ: URL อาจชี้ไปยัง ข้อมูล (/api/orders), ไฟล์ (/report.pdf), หรือ endpoint สำหรับการทำงานของฟอร์ม

HTTPS = น่าเชื่อถือ?

ความเข้าใจผิด: ถ้าเป็น HTTPS แปลว่าไซต์น่าเชื่อถือและปลอดภัย

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

ข้อสรุปสำคัญและแหล่งอ่านเพิ่มเติม

แนวคิดหลักของ Tim Berners-Lee เล็กและเรียบง่าย: เชื่อมเอกสาร (และต่อมาแอป) โดยใช้ระบบตั้งชื่อร่วม วิธีร้องขอข้อมูลร่วม และรูปแบบร่วมในการแสดงและเชื่อมต่อ

สามพื้นฐานในหนึ่งนาที

URL คือที่อยู่ บอกสิ่งที่คุณต้องการและที่อยู่ของมัน (และมักบอกวิธีเข้าถึง)

HTTP คือการสนทนา มันเป็นชุดกฎที่เบราว์เซอร์และเซิร์ฟเวอร์ใช้ขอและตอบ (รหัสสถานะ headers แคช ฯลฯ)

HTML คือรูปแบบหน้าที่เบราว์เซอร์อ่านเพื่อเรนเดอร์เนื้อหา—และที่ที่ลิงก์เชื่อมทรัพยากรเข้าด้วยกัน

แบบจำลองที่ใช้ซ้ำได้

คิดเว็บเหมือนลูปสามขั้นตอนง่ายๆ:

ตั้งชื่อ (URL) — "ไปที่ที่อยู่นี้"
ขอ (HTTP) — "ส่งทรัพยากรนี้มาให้ฉัน"
แสดงและเชื่อมต่อต่อไป (HTML) — "นี่คือความหมาย และนี่คือเส้นทางต่อไป"

เมื่อเข้าใจลูปนี้ รายละเอียดสมัยใหม่ (คุกกี้ APIs SPA CDN) จะง่ายขึ้น: พวกมันมักเป็นการขัดเกลาเรื่องการตั้งชื่อ การร้องขอ หรือการเรนเดอร์

บทอ่านต่อ

หากอยากลงลึกขึ้นโดยไม่เทคนิคเกินไป:

HTTP in plain English: /blog/how-http-works
URLs demystified: /blog/what-is-a-url
HTML essentials and links: /blog/html-basics

การเข้าใจพื้นฐานเหล่านี้ให้ผลตอบแทนอย่างรวดเร็ว: คุณจะสื่อสารกับนักพัฒนาได้ดีขึ้น ประเมินเครื่องมือเว็บได้ดีขึ้น และแก้ปัญหาเบื้องต้นอย่างลิงก์เสีย แคช หรือความสับสนระหว่าง “404 vs 500” ได้ง่ายขึ้น

คำถามที่พบบ่อย

What’s the difference between the World Wide Web and the Internet?

The Internet is the global network (routers, cables, IP routing) that connects computers. The Web is a service that runs on top of it: resources identified by URLs, transferred with HTTP, and often displayed as HTML.

Many things use the Internet without being “the Web,” like email, some multiplayer games, and many chat systems.

What is a URL, and what do the different parts mean?

Think of a URL as a precise address for a resource. It can point to an HTML page, an image, a PDF, or an API endpoint.

A typical URL includes:

Is “example.com” a URL or a domain—and why does it matter?

A domain (like example.com) is just the name of a host. A URL can include much more detail—like the path and query—that changes what you actually get back.

For example:

https://example.com/pricing
https://example.com/search?q=shoes

What does the “#something” part of a URL do?

The fragment (the part after #) is handled by the browser, not sent to the server in the HTTP request.

Common uses:

Jump to a section on a page (#reviews)
Track client-side state in some apps

If you change only the fragment, you often won’t trigger a full page reload.

What is HTTP in plain English?

HTTP is the rules for the request-and-response conversation between a client (browser/app) and a server.

In practice:

Your browser sends an HTTP request for a URL
The server replies with a status code, headers, and a body (HTML, JSON, an image, etc.)

When should I use GET vs POST?

Use GET when you’re retrieving something (read-only in intent), like loading a page or fetching data.

Use POST when you’re submitting data to be processed, like creating an account, posting a comment, or starting a checkout.

A practical tip: if the action should be bookmarkable/shareable (like a search), GET is usually the better fit; if it changes server state, is typical.

What do common HTTP status codes like 200, 404, 301, and 500 mean?

Status codes summarize the outcome of a request:

200 — success
404 — the server is reachable, but that resource isn’t at that URL
301/302 — the resource moved (redirect)
500 — server error while trying to handle the request

When troubleshooting, a often points to a wrong URL or deleted page; a usually means a server-side bug or outage.

What is DNS, and why does it happen before a page loads?

A browser needs an IP address to connect to a server. DNS is the system that translates a human name (like example.com) into an IP address.

If a site sometimes “doesn’t resolve,” DNS is a common suspect—especially if it fails on one network/device but works on another.

What is browser caching, and how can it cause “stale” pages?

Caching is when your browser saves copies of previously downloaded resources so repeat visits load faster.

Practical implications:

You might not see an update immediately because your browser reused an older file.
Hard refreshes or clearing site data can help during debugging.

Servers control a lot of caching behavior via HTTP headers (like cache lifetime and revalidation).

Does HTTPS mean a website is trustworthy?

HTTPS encrypts traffic and helps ensure you’re connected to the intended domain, which protects logins, forms, and sensitive data in transit.

It does not guarantee the site is honest or safe. You still need to evaluate:

the reputation of the source
whether the URL is the one you expect
what you’re being asked to download or submit

เว็บของ Tim Berners-Lee: URLs, HTTP, HTML และทำไมมันสำคัญ | Koder.ai