Hướng Dẫn Viết Mã Cơ Bản Để Tạo Một Trang Web

Bạn muốn tạo một trang web nhưng không biết bắt đầu từ đâu? Đừng lo! Trong hướng dẫn này, bạn sẽ học cách xây dựng một trang web đơn giản từ con số 0 bằng ba công nghệ nền tảng:

HTML (HyperText Markup Language): Xây dựng cấu trúc trang web.
CSS (Cascading Style Sheets): Tạo kiểu dáng và bố cục.
JavaScript: Thêm tương tác và tính năng động.

Chỉ với vài bước đơn giản, bạn sẽ có thể tạo một trang web hoạt động thực tế. Hãy bắt đầu ngay thôi!

1. Cấu Trúc HTML Cơ Bản

HTML giúp định nghĩa cấu trúc cơ bản của trang web. Dưới đây là một ví dụ về mã HTML tối giản:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trang Web Đầu Tiên</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Chào mừng đến với trang web của tôi!</h1>
    </header>
    <main>
        <p>Đây là một trang web đơn giản được tạo bằng HTML, CSS và JavaScript.</p>
        <button onclick="showMessage()">Nhấn vào đây</button>
    </main>
    <script src="script.js"></script>
</body>
</html>

2. Thêm CSS Để Trang Web Đẹp Hơn

CSS giúp trang web trông hấp dẫn hơn bằng cách thêm màu sắc, căn chỉnh và định dạng. Tạo một tệp styles.css với nội dung sau:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #008CBA;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #005f73;
}

3. Thêm JavaScript Để Tạo Tương Tác

JavaScript giúp thêm các hành động tương tác vào trang web. Tạo một tệp script.js và viết mã sau:

function showMessage() {
    alert("Chào bạn! Cảm ơn bạn đã ghé thăm trang web của tôi.");
}

4. Chạy Trang Web Của Bạn

Sau khi đã tạo ba tệp trên (index.html, styles.css, script.js), bạn có thể mở index.html trong trình duyệt để xem trang web hoạt động.

5. Kết Luận

Với ba ngôn ngữ HTML, CSS và JavaScript, bạn đã có thể tạo một trang web cơ bản. Từ đây, bạn có thể mở rộng và cải tiến bằng cách thêm các tính năng nâng cao như biểu mẫu, hình ảnh, hiệu ứng động và nhiều hơn nữa!

Chúc bạn thành công trong việc xây dựng trang web đầu tiên của mình!