Cấu trúc thư mục

Để bắt đầu, hãy tạo một thư mục cho dự án của bạn, ví dụ như my_website, và trong thư mục đó, tạo các tệp sau:

my_website/
│
├── index.html          (Trang chính)
├── about.html          (Giới thiệu)
├── services.html       (Dịch vụ)
└── contact.html         (Liên hệ)

1. Tệp `index.html` (Trang chính)

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trang chính</title>
    <link rel="stylesheet" href="styles.css"> <!-- Liên kết đến tệp CSS -->
</head>
<body>
    <header>
        <h1>Chào mừng đến với Trang chính!</h1>
        <nav>
            <ul>
                <li><a href="index.html">Trang chính</a></li>
                <li><a href="about.html">Giới thiệu</a></li>
                <li><a href="services.html">Dịch vụ</a></li>
                <li><a href="contact.html">Liên hệ</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Giới thiệu về trang web</h2>
        <p>Đây là một trang web mẫu để hướng dẫn bạn cách tạo một trang web đầy đủ với HTML và CSS.</p>
    </main>
    <footer>
        <p>&copy; 2024 Trang web của tôi. Tất cả quyền được bảo lưu.</p>
    </footer>
</body>
</html>

2. Tệp `about.html` (Giới thiệu)

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giới thiệu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Giới thiệu về chúng tôi</h1>
        <nav>
            <ul>
                <li><a href="index.html">Trang chính</a></li>
                <li><a href="about.html">Giới thiệu</a></li>
                <li><a href="services.html">Dịch vụ</a></li>
                <li><a href="contact.html">Liên hệ</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Chúng tôi là ai?</h2>
        <p>Chúng tôi là một nhóm những người đam mê công nghệ, cung cấp dịch vụ tốt nhất cho khách hàng.</p>
    </main>
    <footer>
        <p>&copy; 2024 Trang web của tôi. Tất cả quyền được bảo lưu.</p>
    </footer>
</body>
</html>

3. Tệp `services.html` (Dịch vụ)

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dịch vụ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Các dịch vụ của chúng tôi</h1>
        <nav>
            <ul>
                <li><a href="index.html">Trang chính</a></li>
                <li><a href="about.html">Giới thiệu</a></li>
                <li><a href="services.html">Dịch vụ</a></li>
                <li><a href="contact.html">Liên hệ</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Dịch vụ mà chúng tôi cung cấp</h2>
        <ul>
            <li>Phát triển web</li>
            <li>Tư vấn công nghệ</li>
            <li>Hỗ trợ kỹ thuật</li>
        </ul>
    </main>
    <footer>
        <p>&copy; 2024 Trang web của tôi. Tất cả quyền được bảo lưu.</p>
    </footer>
</body>
</html>

4. Tệp `contact.html` (Liên hệ)

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liên hệ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Liên hệ với chúng tôi</h1>
        <nav>
            <ul>
                <li><a href="index.html">Trang chính</a></li>
                <li><a href="about.html">Giới thiệu</a></li>
                <li><a href="services.html">Dịch vụ</a></li>
                <li><a href="contact.html">Liên hệ</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Thông tin liên hệ</h2>
        <p>Email: [email protected]</p>
        <p>Điện thoại: 0123-456-789</p>
    </main>
    <footer>
        <p>&copy; 2024 Trang web của tôi. Tất cả quyền được bảo lưu.</p>
    </footer>
</body>
</html>

5. Tệp CSS (styles.css)

Tạo một tệp mới có tên styles.css trong cùng thư mục với các tệp HTML và thêm mã sau để định kiểu cho trang web của bạn:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liên hệ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Liên hệ với chúng tôi</h1>
        <nav>
            <ul>
                <li><a href="index.html">Trang chính</a></li>
                <li><a href="about.html">Giới thiệu</a></li>
                <li><a href="services.html">Dịch vụ</a></li>
                <li><a href="contact.html">Liên hệ</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Thông tin liên hệ</h2>
        <p>Email: [email protected]</p>
        <p>Điện thoại: 0123-456-789</p>
    </main>
    <footer>
        <p>&copy; 2024 Trang web của tôi. Tất cả quyền được bảo lưu.</p>
    </footer>
</body>
</html>

Cách mở trang web

Lưu tất cả các tệp.
Mở trình duyệt web.
Kéo và thả tệp index.html vào trình duyệt hoặc nhấp chuột phải và chọn “Mở bằng” trình duyệt.

Kết luận

Bạn đã tạo một trang web HTML đầy đủ với các trang cơ bản như Trang chính, Giới thiệu, Dịch vụ và Liên hệ. Bạn có thể tiếp tục thêm nội dung, hình ảnh và tính năng tương tác khác. Hãy thử nghiệm và cải thiện trang web của bạn để đáp ứng nhu cầu của bạn!