เขียนเว็บ HTML CSS แบบละเอียด

การเขียนเว็บไซต์นั้นประกอบไปด้วยสององค์ประกอบหลักๆ คือ โครงสร้างเนื้อหา (Structure) และ รูปแบบการแสดงผล (Style) โดย HTML จะใช้สร้างโครงสร้างเนื้อหาของเว็บไซต์ และ CSS จะใช้กำหนดรูปแบบการแสดงผลของเว็บไซต์

HTML (HyperText Markup Language)

HTML เป็นภาษาที่ใช้สร้างโครงสร้างเนื้อหาของเว็บไซต์ ประกอบไปด้วยแท็กต่างๆ มากมาย โดยแต่ละแท็กมีหน้าที่กำหนดรูปแบบเนื้อหาที่แตกต่างกัน

ตัวอย่างโครงสร้างพื้นฐานของ HTML

HTML
<!DOCTYPE html>
<html lang=”th”>
<head>
<meta charset=”UTF-8″>
<title>เว็บไซต์ของฉัน</title>
</head>
<body>
<h1>หัวข้อ</h1>
<p>เนื้อหา</p>
</body>
</html>

คำอธิบาย

<!DOCTYPE html> : ประกาศว่าไฟล์นี้เป็นไฟล์ HTML
<html> : แท็กที่ใช้ระบุเริ่มต้นของเอกสาร HTML
<lang> : ระบุภาษาที่ใช้ในเอกสาร HTML
<head> : แท็กที่ใช้ระบุข้อมูลเกี่ยวกับเอกสาร HTML
<meta> : แท็กที่ใช้กำหนดข้อมูลเกี่ยวกับเอกสาร HTML เช่น ชาร์เซ็ต
<title> : แท็กที่ใช้กำหนดชื่อของเว็บไซต์
<body> : แท็กที่ใช้ระบุเนื้อหาหลักของเว็บไซต์
<h1> : แท็กที่ใช้กำหนดหัวข้อ
<p> : แท็กที่ใช้กำหนดเนื้อหาแบบย่อหน้า
CSS (Cascading Style Sheets)

CSS เป็นภาษาที่ใช้กำหนดรูปแบบการแสดงผลของเว็บไซต์ เช่น สี ตัวอักษร รูปแบบตัวอักษร ขนาดตัวอักษร ตำแหน่ง ฯลฯ

ตัวอย่างการกำหนดรูปแบบด้วย CSS

CSS
h1 {
color: red;
font-size: 24px;
}

p {
color: black;
font-size: 16px;
}

คำอธิบาย

h1 : ตัวเลือก CSS ที่ใช้กำหนดรูปแบบหัวข้อ
color : คุณสมบัติ CSS ที่ใช้กำหนดสี
font-size : คุณสมบัติ CSS ที่ใช้กำหนดขนาดตัวอักษร
p : ตัวเลือก CSS ที่ใช้กำหนดรูปแบบเนื้อหาแบบย่อหน้า
ตัวอย่างการเขียนเว็บไซต์แบบง่าย
HTML
<!DOCTYPE html>
<html lang=”th”>
<head>
<meta charset=”UTF-8″>
<title>เว็บไซต์ของฉัน</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>หัวข้อ</h1>
<p>เนื้อหา</p>
</body>
</html>

CSS
h1 {
color: red;
font-size: 24px;
}

p {
color: black;
font-size: 16px;
}

HTML & CSS เป็นภาษาสำคัญสำหรับการสร้างเว็บไซต์ เรียนรู้พื้นฐานของ HTML & CSS ฝึกฝนเพิ่มเติมเพื่อพัฒนาทักษะการเขียนเว็บไซต์

หมายเหตุ บทความนี้เป็นเพียงการแนะนำเบื้องต้น ยังมีรายละเอียดอีกมากมายเกี่ยวกับ HTML และ CSS ศึกษาเพิ่มเติมจากแหล่งข้อมูลต่างๆ