เค้าโครง HTML ระบุการจัดเรียงส่วนประกอบบนหน้าเว็บ HTML มีองค์ประกอบเชิงความหมาย HTML มากมายที่กำหนดส่วนต่างๆ ของหน้าเว็บ
ต่อไปนี้เป็นองค์ประกอบ HTML เชิงความหมายที่ใช้สำหรับรูปแบบ HTML:
| แท็ก | คำอธิบาย |
|---|---|
| ส่วนหัว | ระบุส่วนหัวสำหรับส่วนหรือเอกสาร |
| ส่วน | แสดงถึงส่วนในเอกสาร |
| นำทาง | ระบุคอนเทนเนอร์สำหรับลิงก์การนำทาง |
| บทความ | ระบุบทความอิสระที่มีเนื้อหาในตัวเอง |
| กัน | ระบุแท็กสำหรับเนื้อหานอกเหนือจากเนื้อหาหลัก (เช่น แถบด้านข้าง) |
| ส่วนท้าย | ระบุส่วนท้ายสำหรับส่วนหรือเอกสาร |
| รายละเอียด | ระบุแท็กสำหรับรายละเอียดเพิ่มเติม |
| สรุป | ระบุส่วนหัวสำหรับองค์ประกอบ |
เทคนิคที่ใช้สำหรับการจัดวางหน้าเว็บ HTML:
- คุณสมบัติ CSS float
- CSS flexbox
- เฟรมเวิร์ก CSS
- ตาราง CSS
- ตาราง HTML
ตัวอย่าง
ให้เราดูตัวอย่างของเค้าโครง HTML:
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
color: #000;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
header {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
nav {
float: left;
width: 20%;
height: 200px;
background: #282828;
padding: 60px 10px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
article {
float: left;
padding: 80px 10px;
width: 80%;
background-color: #fff;
height: 200px;
text-align: center;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
</style>
<body>
<h1>HTML Layouts Demo</h1>
<header>This is Header</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>This is an article element.</article>
</section>
<footer>This is Footer</footer>
</body>
</html> ผลลัพธ์
