ทุกเว็บไซต์ที่คุณเห็นและใช้งานอยู่ทุกวัน ไม่ว่าจะเป็น Google, Facebook, หรือเว็บข่าวต่างๆ ล้วนมีโครงสร้างพื้นฐานที่สร้างขึ้นจากสองภาษาหลัก นั่นคือ HTML และ CSS หากคุณฝันอยากสร้างเว็บไซต์เป็นของตัวเอง การทำความเข้าใจ “คู่หู” คู่นี้คือจุดเริ่มต้นที่สำคัญที่สุด
บทความนี้จะอธิบายแนวคิดของ HTML และ CSS แบบฉบับย่อที่สุดสำหรับผู้เริ่มต้นที่ไม่มีพื้นฐานมาก่อน
HTML: สถาปนิกผู้วาง “โครงสร้าง”
ลองจินตนาการว่าการสร้างเว็บไซต์เหมือนการสร้างบ้าน HTML (HyperText Markup Language) ก็คือ สถาปนิก ที่ทำหน้าที่วางโครงสร้างทั้งหมดของบ้าน
- HTML ไม่ใช่ภาษาโปรแกรมมิ่ง แต่เป็น “ภาษามาร์กอัป” (Markup Language)
- หน้าที่ของมันคือการกำหนดว่า “อะไรคืออะไร” บนหน้าเว็บ โดยใช้สิ่งที่เรียกว่า “แท็ก” (Tag)
- แท็กมักจะมาเป็นคู่ คือแท็กเปิด
<tag>และแท็กปิด</tag>
ตัวอย่างแท็ก HTML พื้นฐาน:
<h1>หัวข้อที่ใหญ่ที่สุด</h1>คือการบอกว่าข้อความนี้เป็น หัวข้อหลัก (Heading 1)<p>นี่คือย่อหน้าของบทความ</p>คือการบอกว่านี่คือ ย่อหน้า (Paragraph)<img src="photo.jpg">คือการสั่งให้แสดง รูปภาพ (Image)<a href="https://google.com">คลิกที่นี่</a>คือการสร้าง ลิงก์ (Anchor)
ดังนั้น HTML จึงทำหน้าที่วางโครงสร้างว่า ในหน้านี้มีหัวข้อ, มีย่อหน้า, มีรูปภาพ, และมีลิงก์อยู่ตรงไหนบ้าง แต่ HTML ไม่ได้กำหนดเรื่องความสวยงามเลย
CSS: มัณฑนากรผู้ “ตกแต่ง”
เมื่อสถาปนิก (HTML) วางโครงสร้างบ้านเสร็จแล้ว ก็ถึงตาของ มัณฑนากร หรือนักตกแต่งภายใน นั่นคือหน้าที่ของ CSS (Cascading Style Sheets)
- CSS คือภาษาที่ใช้สำหรับ กำหนดสไตล์และการจัดวาง ให้กับองค์ประกอบ HTML
- หน้าที่ของมันคือการบอกว่า “หน้าตาของแต่ละส่วนจะเป็นอย่างไร”
ตัวอย่างโค้ด CSS:
ลองดูโค้ดนี้:
CSS
h1 {
color: blue;
font-size: 36px;
text-align: center;
}
p {
color: gray;
line-height: 1.6;
}
- คำอธิบาย:
h1 { ... }คือการสั่งว่า “ทุกๆ<h1>(หัวข้อหลัก) ที่อยู่ในไฟล์ HTML นี้”color: blue;ให้เปลี่ยนสีตัวอักษรเป็น สีน้ำเงินfont-size: 36px;ให้กำหนดขนาดตัวอักษรเป็น 36 พิกเซลtext-align: center;ให้จัดข้อความไว้ กึ่งกลาง- ส่วน
p { ... }ก็คือการกำหนดสไตล์ให้กับทุกย่อหน้า (<p>) นั่นเอง
สรุปความสัมพันธ์
- HTML คือ “เนื้อหาและโครงสร้าง” (What it is)
- CSS คือ “การนำเสนอและความสวยงาม” (How it looks)
ทั้งสองภาษานี้ทำงานร่วมกันเสมอ เว็บไซต์ที่ไม่มี CSS ก็จะเหมือนเอกสาร Word ที่มีแต่ตัวหนังสือสีดำเรียงกันไปเรื่อยๆ ส่วน CSS ก็ไม่สามารถทำงานได้หากไม่มีโครงสร้างจาก HTML ให้ตกแต่ง
การเริ่มต้นเรียนรู้การเขียนเว็บก็คือการเรียนรู้ที่จะใช้แท็ก HTML ต่างๆ เพื่อวางโครงสร้างเนื้อหา จากนั้นจึงใช้ CSS เพื่อลงสี, จัดวาง, และทำให้มันสวยงามน่าใช้งาน ซึ่งเป็นก้าวแรกที่สำคัญที่สุดในการเดินทางสู่การเป็นนักพัฒนาเว็บไซต์ครับ
