Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách tạo một trang blog du lịch đơn giản gồm 4 trang, sử dụng HTML và CSS cơ bản. Đây là dự án phù hợp cho người mới bắt đầu muốn làm quen với thiết kế web.

Phân tích yêu cầu thiết kế

Một trang blog du lịch cá nhân thường cần các thành phần chính sau: trang chủ giới thiệu bản thân, trang thông tin chi tiết, trang sở thích du lịch và trang thư viện ảnh. Giao diện cần đơn giản, dễ nhìn và thân thiện với người dùng.

Cấu trúc trang HTML

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nhật Ký Du Lịch</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <div class="container">
        <header class="top-header">
            <div class="brand-logo">
                <img src="assets/brand.png" alt="Logo">
            </div>
            <div class="search-box">
                <input type="search" placeholder="Tìm kiếm...">
                <button type="submit">Tìm</button>
            </div>
        </header>
        
        <nav class="primary-nav">
            <ul>
                <li><a href="trang-chu.html">Trang chủ</a></li>
                <li><a href="gioi-thieu.html">Giới thiệu</li>
                <li><a href="so-thich.html">Sở thích</a></li>
                <li><a href="hinh-anh.html">Hình ảnh</a></li>
            </ul>
        </nav>
        
        <main class="primary-content">
            <section class="about-section">
                <img src="assets/profile.jpg" class="profile-img" alt="Ảnh đại diện">
                <p>Tôi yêu khám phá những vùng đất mới, từ những bãi biển hoang sơ đến những thành phố sôi động. 
                Mỗi chuyến đi đều mang lại cho tôi những trải nghiệm và bài học riêng. Tôi tin rằng du lịch 
                không chỉ là di chuyển từ nơi này sang nơi khác, mà là hành trình khám phá bản thân.</p>
            </section>
            
            <div class="gallery-row">
                <figure>
                    <img src="assets/trip1.jpg" alt="Chuyến đi 1">
                </figure>
                <figure>
                    <img src="assets/trip2.jpg" alt="Chuyến đi 2">
                </figure>
            </div>
        </main>
        
        <footer class="site-footer">
            <p>Bản quyền thuộc về tác giả</p>
        </footer>
    </div>
</body>
</html>

Định dạng CSS

@charset "utf-8";

/* Reset cơ bản */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Layout chính */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.8;
    background: url('../assets/bg-pattern.jpg') no-repeat center top;
    background-size: cover;
}

.container {
    max-width: 1000px;
    margin: 20px auto;
    background: rgba(255, 255, 255, 0.95);
}

/* Header */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.brand-logo img {
    height: 60px;
}

.search-box {
    display: flex;
    gap: 8px;
}

.search-box input {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.search-box button {
    padding: 8px 16px;
    background: #4a6741;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Navigation */
.primary-nav {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.primary-nav ul {
    display: flex;
    justify-content: center;
}

.primary-nav li a {
    display: block;
    padding: 15px 35px;
    color: #fff;
    font-weight: 600;
    transition: background 0.3s ease;
}

.primary-nav li a:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Content */
.primary-content {
    padding: 25px;
    background: #f5f5dc;
}

.about-section {
    display: flex;
    gap: 25px;
    margin-bottom: 30px;
}

.profile-img {
    width: 300px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.gallery-row {
    display: flex;
    gap: 20px;
}

.gallery-row figure {
    flex: 1;
}

.gallery-row img {
    width: 100%;
    height: 333px;
    object-fit: cover;
    border-radius: 6px;
}

/* Footer */
.site-footer {
    background: #2d5016;
    color: #fff;
    text-align: center;
    padding: 20px;
}

/* Utility */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Một số lưu ý khi thực hiện

Khi xây dựng trang web tĩnh, cần chú ý đến việc tổ chức cấu trúc thư mục hợp lý. Thông thường nên phân chia thành các thư mục riêng cho HTML, CSS, JavaScript và các tài nguyên đa phương tiện. Điều này giúp dễ dàng quản lý và bảo trì sau này.

Về mặt thiết kế responsive, dù đây là dự án đơn giản nhưng vẫn nên cân nhắc sử dụng các đơn vị linh hoạt như phần trăm hoặc viewport units thay vì pixel cố định. Điều này giúp trang web hiển thị tốt hơn trên nhiều thiết bị khác nhau.

Đối với việc chọn màu sắc, nên ưu tiên các tông màu tự nhiên, gần gũi với chủ đề du lịch như xanh lá, xanh biển, nâu đất. Tránh sử dụng quá nhiều màu sắc rực rỡ gây rối mắt và làm giảm trải nghiệm người dùng.