ในยุคดิจิทัลที่เว็บไซต์เปรียบเสมือนหน้าตาของธุรกิจและช่องทางสื่อสารที่สำคัญ การมีความรู้พื้นฐานในการสร้างเว็บไซต์จึงเป็นทักษะที่มีค่าอย่างยิ่ง ภาษาหลักสองภาษาที่ใช้ในการสร้างโครงสร้างและตกแต่งเว็บไซต์คือ HTML (HyperText Markup Language) และ CSS (Cascading Style Sheets) บทความนี้จะนำเสนอพื้นฐานสำคัญของการเขียนโค้ด HTML และ CSS สำหรับผู้เริ่มต้น เพื่อให้คุณสามารถสร้างเว็บไซต์อย่างง่ายได้ด้วยตนเอง
HTML: โครงสร้างกระดูกของเว็บไซต์
HTML เปรียบเสมือนโครงสร้างกระดูกของร่างกาย เป็นภาษา Markup ที่ใช้ในการกำหนดโครงสร้างและเนื้อหาของหน้าเว็บ โดยใช้สิ่งที่เรียกว่า “แท็ก” (Tag) ซึ่งเป็นคำสั่งพิเศษที่อยู่ในเครื่องหมาย < และ > แท็กเหล่านี้จะบอกเบราว์เซอร์ (Browser) ว่าควรแสดงเนื้อหาอย่างไร
องค์ประกอบพื้นฐานของ HTML
<!DOCTYPE html>: ประกาศ Document Type บอกเบราว์เซอร์ว่าเป็นเอกสาร HTML5<html>และ</html>: แท็กหลักที่ครอบคลุมเนื้อหาทั้งหมดของหน้าเว็บ<head>และ</head>: ส่วนที่เก็บข้อมูลเกี่ยวกับเอกสาร เช่น ชื่อหน้าเว็บ (title) การเชื่อมต่อไฟล์ CSS หรือข้อมูล Meta<title>และ</title>: กำหนดชื่อที่แสดงบนแท็บเบราว์เซอร์<body>และ</body>: ส่วนที่บรรจุเนื้อหาทั้งหมดที่แสดงบนหน้าเว็บ เช่น ข้อความ รูปภาพ วิดีโอ ลิงก์ และอื่นๆ
แท็ก HTML ที่ควรรู้จัก:
<h1>ถึง<h6>: แท็กสำหรับหัวเรื่อง (Heading) โดย<h1>คือหัวเรื่องหลัก และ<h6>คือหัวเรื่องย่อยที่สุด<p>และ</p>: แท็กสำหรับย่อหน้า (Paragraph)<a>และ</a>: แท็กสำหรับสร้างลิงก์ (Anchor) โดยมี Attributehrefเพื่อกำหนด URL ปลายทาง<img>: แท็กสำหรับแสดงรูปภาพ โดยมี Attributesrcเพื่อกำหนดที่อยู่ของไฟล์รูปภาพ และaltสำหรับข้อความอธิบายรูปภาพ<ul>และ</ul>: แท็กสำหรับสร้างรายการแบบไม่มีลำดับ (Unordered List) โดยมีแท็ก<li>สำหรับแต่ละรายการ<ol>และ</ol>: แท็กสำหรับสร้างรายการแบบมีลำดับ (Ordered List) โดยมีแท็ก<li>สำหรับแต่ละรายการ<div>และ</div>: แท็กคอนเทนเนอร์ทั่วไป (Division) ที่ใช้ในการจัดกลุ่มเนื้อหา<span>และ</span>: แท็กที่ใช้สำหรับจัดรูปแบบข้อความเฉพาะส่วนภายในบรรทัด
ตัวอย่างโค้ด HTML เบื้องต้น
HTML
<!DOCTYPE html>
<html>
<head>
<title>เว็บไซต์ของฉัน</title>
</head>
<body>
<h1>ยินดีต้อนรับสู่เว็บไซต์ของฉัน</h1>
<p>นี่คือย่อหน้าแรกของเนื้อหาในเว็บไซต์ของฉัน</p>
<a href="https://www.google.com">คลิกที่นี่เพื่อไปยัง Google</a>
<img src="images/logo.png" alt="โลโก้เว็บไซต์">
<ul>
<li>รายการที่ 1</li>
<li>รายการที่ 2</li>
<li>รายการที่ 3</li>
</ul>
</body>
</html>
CSS: เสื้อผ้าและเครื่องประดับของเว็บไซต์
CSS เข้ามามีบทบาทในการกำหนดสไตล์และการจัดวางองค์ประกอบต่างๆ บนหน้าเว็บ ทำให้เว็บไซต์มีความสวยงามและน่าสนใจมากขึ้น CSS ทำงานโดยการเลือก (Select) องค์ประกอบ HTML ที่ต้องการ และกำหนดคุณสมบัติ (Property) ต่างๆ เช่น สี ขนาด ตัวอักษร ระยะขอบ และการจัดวาง
โครงสร้างของกฎ CSS
กฎ CSS ประกอบด้วยสองส่วนหลัก คือ ตัวเลือก (Selector) และส่วนประกาศ (Declaration Block)
CSS
selector {
property: value;
property: value;
}
- Selector: ระบุองค์ประกอบ HTML ที่ต้องการปรับแต่ง เช่น ชื่อแท็ก (
p,h1), คลาส (.container), หรือ ID (#header) - Declaration Block: อยู่ภายในเครื่องหมายปีกกา
{}ประกอบด้วยคู่ของคุณสมบัติ (Property) และค่า (Value) โดยแต่ละคู่จะคั่นด้วยเครื่องหมายเซมิโคลอน;
วิธีการใช้งาน CSS
มีสามวิธีหลักในการใช้งาน CSS กับ HTML:
- Inline CSS: กำหนดสไตล์โดยตรงในแท็ก HTML ผ่าน Attribute
style(ไม่แนะนำสำหรับการใช้งานจริงเนื่องจากทำให้โค้ดอ่านยาก) HTML<p style="color: blue; font-size: 16px;">ข้อความสีน้ำเงิน ขนาด 16 พิกเซล</p> - Internal CSS: เขียนโค้ด CSS ภายในแท็ก
<style>ในส่วน<head>ของเอกสาร HTML HTML<!DOCTYPE html> <html> <head> <title>เว็บไซต์ของฉัน</title> <style> h1 { color: green; text-align: center; } p { font-family: Arial, sans-serif; } </style> </head> <body> <h1>หัวเรื่องสีเขียว ตรงกลาง</h1> <p>ข้อความที่ใช้ฟอนต์ Arial</p> </body> </html> - External CSS: สร้างไฟล์ CSS แยกต่างหาก (นามสกุล
.css) และเชื่อมต่อกับเอกสาร HTML ผ่านแท็ก<link>ในส่วน<head>(เป็นวิธีที่นิยมใช้มากที่สุด) HTML<!DOCTYPE html> <html> <head> <title>เว็บไซต์ของฉัน</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>หัวเรื่อง</h1> <p>ข้อความ</p> </body> </html>เนื้อหาในไฟล์style.css: CSSh1 { color: purple; font-size: 24px; } p { line-height: 1.5; }
คุณสมบัติ CSS พื้นฐานที่ควรรู้จัก
color: กำหนดสีของข้อความfont-size: กำหนดขนาดของตัวอักษรfont-family: กำหนดรูปแบบตัวอักษรbackground-color: กำหนดสีพื้นหลังtext-align: กำหนดการจัดวางข้อความ (left, center, right)margin: กำหนดระยะขอบภายนอกขององค์ประกอบpadding: กำหนดระยะขอบภายในขององค์ประกอบwidthและheight: กำหนดความกว้างและความสูงขององค์ประกอบ
ก้าวต่อไป
การเรียนรู้ HTML และ CSS เป็นกระบวนการต่อเนื่อง เมื่อคุณเข้าใจพื้นฐานเหล่านี้แล้ว ลองฝึกฝนสร้างเว็บไซต์อย่างง่ายๆ ด้วยตนเอง ศึกษาแท็กและคุณสมบัติ CSS เพิ่มเติมจากแหล่งข้อมูลออนไลน์ต่างๆ และทดลองปรับแต่งสไตล์ของเว็บไซต์ของคุณ การฝึกฝนอย่างสม่ำเสมอจะช่วยให้คุณมีความเชี่ยวชาญในการเขียนโค้ด HTML และ CSS มากยิ่งขึ้น และเปิดประตูสู่โลกของการพัฒนาเว็บไซต์ที่กว้างใหญ่
การเริ่มต้นเขียนโค้ด HTML และ CSS อาจดูเหมือนเป็นเรื่องยาก แต่ด้วยความตั้งใจและการฝึกฝน คุณจะสามารถสร้างเว็บไซต์ที่สวยงามและใช้งานได้จริงได้อย่างแน่นอน ขอให้สนุกกับการเรียนรู้และสร้างสรรค์เว็บไซต์ของคุณ!
