บทเรียนที่ 2: การออกแบบเว็บไซต์
บทเรียนนี้จะสอนพื้นฐานการออกแบบเว็บไซต์โดยใช้ภาษา HTML และ CSS ซึ่งเป็นเทคโนโลยีหลักในการสร้างและตกแต่งหน้าเว็บ คุณจะได้เรียนรู้โครงสร้างของ HTML, วิธีการจัดวางองค์ประกอบต่างๆ บนหน้าเว็บ และการใช้ CSS เพื่อปรับแต่งรูปแบบและสไตล์ให้สวยงามและเหมาะสมกับการใช้งาน
เนื้อหาครอบคลุมตั้งแต่การสร้างแท็กพื้นฐาน การจัดการข้อความและรูปภาพ การสร้างลิงก์และปุ่ม ไปจนถึงการใช้ CSS เพื่อกำหนดสี, ฟอนต์, การจัดวางแบบกล่อง (box model) และการตอบสนองต่อขนาดหน้าจอ (responsive design)
นอกจากนี้ยังมีตัวอย่างโค้ดและแบบฝึกหัดให้คุณได้ทดลองทำตาม เพื่อเสริมสร้างความเข้าใจและทักษะในการออกแบบเว็บไซต์อย่างมืออาชีพ
หัวข้อหลักในบทเรียนนี้
- HTML พื้นฐาน: โครงสร้างของเอกสาร HTML, แท็กต่างๆ เช่น <div>, <p>, <a>, <img>, <header>, <footer> และอื่นๆ
- CSS พื้นฐาน: การกำหนดสี, ฟอนต์, ขนาด, การจัดวาง (box model), margin, padding, border และการใช้ selectors
- การจัดวางเลย์เอาต์: การใช้ Flexbox และ Grid เพื่อจัดวางองค์ประกอบบนหน้าเว็บอย่างมีประสิทธิภาพ
- การตอบสนองต่อขนาดหน้าจอ (Responsive Design): การใช้ media queries และเทคนิคต่างๆ เพื่อให้เว็บไซต์แสดงผลได้ดีบนอุปกรณ์หลากหลายขนาด
- การเพิ่มภาพและสื่อ: วิธีการแทรกรูปภาพ วิดีโอ และสื่ออื่นๆ ลงในเว็บไซต์
- การสร้างลิงก์และปุ่ม: การสร้างลิงก์เชื่อมโยงไปยังหน้าอื่นๆ และการตกแต่งปุ่มให้สวยงามและใช้งานง่าย
ตัวอย่างโค้ด HTML และ CSS
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ตัวอย่างเว็บไซต์</title>
<style>
body {
font-family: Kanit, sans-serif;
background-color: #1f2937;
color: #e5e7eb;
margin: 0;
padding: 20px;
}
header {
background-color: #3b82f6;
padding: 10px;
border-radius: 8px;
text-align: center;
}
h1 {
margin: 0;
}
p {
line-height: 1.6;
}
</style>
</head>
<body>
<header>
<h1>ยินดีต้อนรับสู่เว็บไซต์ของฉัน</h1>
</header>
<main>
<p>นี่คือเนื้อหาหลักของเว็บไซต์</p>
</main>
</body>
</html>