Học cách tạo bố cục và cấu trúc trang web với HTML và CSS cơ bản
<div> và <span> là các thẻ container dùng để nhóm và định dạng nội dung.
<div> là thẻ block-level, chiếm toàn bộ chiều rộng và tạo dòng mới.
<div>
<h2>Tiêu đề phần</h2>
<p>Nội dung phần 1</p>
</div>
<div>
<h2>Tiêu đề phần khác</h2>
<p>Nội dung phần 2</p>
</div><span> là thẻ inline, chỉ chiếm không gian cần thiết và không tạo dòng mới.
<p>Đây là một đoạn văn với <span style="color: red;">từ màu đỏ</span> và <span style="font-weight: bold;">từ in đậm</span>.</p>Inline elements: Span 1 Span 2 Span 3
Hiểu sự khác biệt giữa block và inline elements rất quan trọng cho việc layout.
<div>, <p>, <h1-h6>, <ul>, <li><span>, <a>, <strong>, <em><!-- Block elements -->
<div>Block 1</div>
<div>Block 2</div>
<p>Block paragraph</p>
<!-- Inline elements -->
<span>Inline 1</span>
<span>Inline 2</span>
<a href="#">Inline link</a>CSS cho phép thay đổi display behavior:
<style>
.inline-block {
display: inline-block;
width: 100px;
height: 50px;
background: lightblue;
margin: 5px;
}
</style>
<div class="inline-block">1</div>
<div class="inline-block">2</div>
<div class="inline-block">3</div>class và id là hai thuộc tính quan trọng để định danh và style các elements.
<style>
.highlight { background-color: yellow; }
.large-text { font-size: 1.2em; }
.blue-text { color: blue; }
</style>
<p class="highlight">Đoạn văn được tô sáng</p>
<p class="highlight large-text">Đoạn văn tô sáng và chữ to</p>
<p class="blue-text">Đoạn văn màu xanh</p><style>
#header { background: navy; color: white; padding: 20px; }
#main-content { margin: 20px 0; }
#footer { background: gray; color: white; padding: 10px; }
</style>
<div id="header">Header của trang</div>
<div id="main-content">Nội dung chính</div>
<div id="footer">Footer của trang</div>HTML5 cung cấp các thẻ semantic giúp tạo structure rõ ràng và có ý nghĩa.
| Thẻ | Mục đích | Vị trí sử dụng |
|---|---|---|
<header> |
Đầu trang/phần | Logo, nav, title |
<nav> |
Menu điều hướng | Navigation links |
<main> |
Nội dung chính | Main content area |
<section> |
Phần/mục lớn | Chapters, tabs |
<article> |
Nội dung độc lập | Blog posts, news |
<aside> |
Nội dung phụ | Sidebar, ads |
<footer> |
Cuối trang/phần | Copyright, contacts |
<!DOCTYPE html>
<html>
<head>
<title>Website với Semantic HTML</title>
</head>
<body>
<header>
<h1>Tên Website</h1>
<nav>
<ul>
<li><a href="#home">Trang chủ</a></li>
<li><a href="#about">Giới thiệu</a></li>
<li><a href="#contact">Liên hệ</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Trang chủ</h2>
<article>
<h3>Bài viết 1</h3>
<p>Nội dung bài viết...</p>
</article>
</section>
<aside>
<h3>Sidebar</h3>
<p>Nội dung phụ...</p>
</aside>
</main>
<footer>
<p>© 2024 Website Name</p>
</footer>
</body>
</html>Đây là nội dung chính của trang web, chứa các article, section...
<body>
<header>Header</header>
<main>Main Content</main>
<footer>Footer</footer>
</body>
<style>
body { min-height: 100vh; display: flex; flex-direction: column; }
header, footer { padding: 20px; background: #f8f9fa; }
main { flex: 1; padding: 20px; }
</style><body>
<header>Header</header>
<nav>Navigation</nav>
<div class="content-wrapper">
<main>Main Content</main>
<aside>Sidebar</aside>
</div>
<footer>Footer</footer>
</body>
<style>
.content-wrapper { display: flex; min-height: 60vh; }
main { flex: 2; padding: 20px; }
aside { flex: 1; padding: 20px; background: #f8f9fa; }
</style><div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<style>
.flex-container {
display: flex;
gap: 10px;
}
.flex-item {
flex: 1; /* Equal width */
padding: 20px;
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
text-align: center;
}
</style><div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
padding: 20px;
background: linear-gradient(45deg, #764ba2, #667eea);
color: white;
text-align: center;
}
</style>Tạo layout thích ứng với nhiều kích thước màn hình khác nhau.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head><style>
.container {
display: flex;
gap: 20px;
}
.main { flex: 2; }
.sidebar { flex: 1; }
/* Mobile: Stack vertically */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
/* Tablet: Adjust proportions */
@media (min-width: 769px) and (max-width: 1024px) {
.main { flex: 1.5; }
.sidebar { flex: 1; }
}
</style>Tạo một trang blog với layout sau:
<!-- Template bài tập 1: Blog Layout -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; line-height: 1.6; }
header {
background: #333;
color: white;
padding: 1rem 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
nav ul {
list-style: none;
display: flex;
gap: 20px;
}
nav a {
color: white;
text-decoration: none;
}
.content-wrapper {
display: flex;
gap: 30px;
margin: 30px auto;
max-width: 1200px;
padding: 0 20px;
}
main { flex: 2; }
aside { flex: 1; background: #f8f9fa; padding: 20px; }
footer {
background: #333;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 40px;
}
/* Responsive */
@media (max-width: 768px) {
.content-wrapper {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>My Blog</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<div class="content-wrapper">
<main>
<!-- Thêm blog posts ở đây -->
</main>
<aside>
<!-- Thêm sidebar content ở đây -->
</aside>
</div>
<footer>
<p>© 2024 My Blog. All rights reserved.</p>
</footer>
</body>
</html>