Trong bài viết này, chúng ta sẽ khám phá cách thiết kế một trang web văn hóa trà sử dụng HTML và CSS. Mục tiêu của dự án là tạo ra một giao diện trực quan và hấp dẫn, đồng thời cung cấp thông tin chi tiết về các loại trà khác nhau.
1. Đề Tài Thiết Kế Trang Web
Các chủ đề có thể bao gồm: Văn hóa trà, nghệ thuật thư pháp mực nước truyền thống, tranh dân gian Trung Quốc, và nhiều hơn nữa. Mỗi trang web nên tập trung vào việc giới thiệu nội dung độc đáo và hấp dẫn.
2. Mô Tả Trang Web
Một trang web chất lượng cao nên bao gồm:
- Phần đầu trang, thanh điều hướng (có thể kéo xuống), phần nội dung chính, và chân trang.
- Các trang liên kết với nhau đến ít nhất ba cấp độ, với tổng cộng từ năm đến mười trang.
- Giao diện thống nhất và hiển thị ổn định trên tất cả các trình duyệt phổ biến.
- Hiệu ứng chuyển đổi khi di chuột qua các mục menu hoặc hình ảnh.
- Sử dụng bảng và biểu mẫu để bổ sung thông tin cần thiết.
3. Giới Thiệu Về Trang Web
Về mặt bố cục, chúng ta sẽ sử dụng cấu trúc lưới nổi bật để đảm bảo tính tương thích với hầu hết các trình duyệt hiện đại. Về mặt lập trình, HTML5, CSS3 và JavaScript sẽ được áp dụng để đạt được hiệu quả tối đa.
4. Mã HTML Cấu Trúc
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>Văn Hóa Trà Việt</title>
</head>
<body>
<header class="main-header">
<div class="container">
<a href="index.html" class="logo"><img src="images/logo.png" alt="Logo"></a>
<nav>
<a href="index.html" class="active">Trang Chủ</a>
<a href="tea-types.html">Các Loại Trà</a>
<a href="health-benefits.html">Lợi Ích Sức Khỏe</a>
<a href="register.html">Đăng Ký</a>
</nav>
</div>
</header>
<section class="content">
<div class="left-column">
<div class="welcome-message">
<h1>Chào Mừng Đến Với Trang Web Văn Hóa Trà!</h1>
<p>Khám phá các loại trà đặc biệt từ khắp nơi trên thế giới.</p>
</div>
<div class="tea-gallery">
<div class="tea-item"><img src="images/green-tea.jpg" alt="Trà Xanh"></div>
<div class="tea-item"><img src="images/black-tea.jpg" alt="Trà Đen"></div>
<div class="tea-item"><img src="images/oolong-tea.jpg" alt="Trà Ô Long"></div>
<div class="tea-item"><img src="images/white-tea.jpg" alt="Trà Trắng"></div>
</div>
</div>
<div class="right-column">
<div class="tea-article">
<h2>Nghệ Thuật Pha Trà</h2>
<p>Pha trà không chỉ là một kỹ năng mà còn là một nghệ thuật...</p>
</div>
</div>
</section>
<footer>© 2023 Văn Hóa Trà Việt - Bảo Lưu Mọi Quyền</footer>
</body>
</html>
5. Mã CSS Định Dạng
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #fff;
color: #333;
}
.header {
background: #f8f8f8;
padding: 20px;
}
.logo img {
max-width: 100px;
}
nav a {
text-decoration: none;
color: #333;
margin-right: 20px;
}
.content {
display: flex;
justify-content: space-between;
padding: 20px;
}
.left-column, .right-column {
width: 48%;
}
.tea-item {
margin-bottom: 20px;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px;
}