Bài 1.4: Thực hành xây dựng trang web đơn giản với HTML

Chào mừng bạn đến với bài thực hành đầu tiên trong chuỗi bài học lập trình web! Sau khi đã làm quen với cấu trúc cơ bản và một số thẻ HTML quan trọng, bây giờ là lúc chúng ta bắt tay vào thực tế và tự tay xây dựng một trang web HTML cực kỳ đơn giản.

Mục tiêu của bài này không phải là tạo ra một kiệt tác nghệ thuật hay một trang web phức tạp, mà là để bạn làm quen với quy trình: viết code HTML, lưu file và xem kết quả trên trình duyệt. Đây là bước cực kỳ quan trọng để biến kiến thức lý thuyết thành kỹ năng thực hành.

Chúng ta sẽ xây dựng một trang web nhỏ giới thiệu bản thân hoặc một chủ đề bạn yêu thích, sử dụng các thẻ HTML đã học.

Chuẩn bị công cụ

Bạn chỉ cần hai thứ:

  1. Một trình soạn thảo văn bản (Text Editor): Notepad (Windows), TextEdit (macOS), hoặc tốt hơn là các trình soạn thảo code chuyên nghiệp như VS Code, Sublime Text, Atom, Notepad++. VS Code là lựa chọn phổ biến và mạnh mẽ, rất được khuyến khích.
  2. Một trình duyệt web (Web Browser): Chrome, Firefox, Edge, Safari, v.v.

Bước 1: Tạo file HTML

Mở trình soạn thảo văn bản của bạn và tạo một file mới. Hãy lưu file này với đuôi .html, ví dụ: trang_cua_toi.html hoặc index.html. Lưu ở một vị trí dễ tìm trên máy tính của bạn. Cái tên index.html là quy ước chung cho trang chủ của một website, nhưng với bài thực hành này, bạn có thể đặt tên tùy ý.

Bước 2: Bắt đầu với cấu trúc cơ bản

Nhớ lại cấu trúc xương sống của một tài liệu HTML mà chúng ta đã học? Luôn bắt đầu với 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 Của Tôi</title>
</head>
<body>
    <!-- Nội dung hiển thị cho người dùng sẽ ở đây -->
</body>
</html>

Giải thích:

  • <!DOCTYPE html>: Khai báo loại tài liệu là HTML5.
  • <html lang="vi">: Thẻ gốc chứa toàn bộ nội dung trang, lang="vi" chỉ định ngôn ngữ là tiếng Việt.
  • <head>: Chứa các thông tin metadata không hiển thị trực tiếp trên trang, như bảng mã ký tự (<meta charset="UTF-8">), cài đặt hiển thị trên thiết bị khác nhau (<meta name="viewport"...>) và tiêu đề trang hiển thị trên tab trình duyệt (<title>).
  • <body>: Chứa toàn bộ nội dung mà người dùng sẽ nhìn thấy trên trang web.
  • <!-- ... -->: Đây là cú pháp để viết comment (ghi chú) trong HTML. Trình duyệt sẽ bỏ qua phần này.

Lưu file lại.

Bước 3: Thêm tiêu đề chính (<h1>)

Mỗi trang web thường có một tiêu đề chính để giới thiệu nội dung. Hãy thêm một thẻ <h1> vào bên trong thẻ <body>.

<body>
    <h1>Chào mừng bạn đến với trang web của tôi!</h1>
</body>

Giải thích: Thẻ <h1> dùng để định nghĩa tiêu đề cấp độ 1, là tiêu đề quan trọng nhất trên trang. Chỉ nên có một thẻ <h1> duy nhất cho mỗi trang để đảm bảo ngữ nghĩa và hỗ trợ SEO tốt.

Lưu file và mở nó bằng trình duyệt web (bằng cách double-click vào file hoặc kéo thả vào cửa sổ trình duyệt). Bạn sẽ thấy tiêu đề hiển thị to và đậm.

Bước 4: Thêm đoạn văn bản (<p>)

Tiếp theo, hãy thêm một vài đoạn văn bản giới thiệu. Sử dụng thẻ <p>.

<body>
    <h1>Chào mừng bạn đến với trang web của tôi!</h1>
    <p>Đây là trang web đầu tiên tôi tự tay xây dựng.</p>
    <p>Tôi đang học lập trình web và cảm thấy rất thú vị.</p>
</body>

Giải thích: Thẻ <p> định nghĩa một đoạn văn bản. Trình duyệt sẽ tự động thêm khoảng trống phía trên và dưới mỗi đoạn <p>.

Lưu file, refresh trình duyệt và xem kết quả.

Bước 5: Thêm danh sách (<ul>, <li>)

Danh sách là cách tuyệt vời để liệt kê các mục. Hãy thêm một danh sách không có thứ tự về sở thích của bạn.

<body>
    <h1>Chào mừng bạn đến với trang web của tôi!</h1>
    <p>Đây là trang web đầu tiên tôi tự tay xây dựng.</p>
    <p>Tôi đang học lập trình web và cảm thấy rất thú vị.</p>

    <h2>Những điều tôi yêu thích:</h2>
    <ul>
        <li>Đọc sách</li>
        <li>Học ngôn ngữ mới</li>
        <li>Đi du lịch</li>
        <li>Code!</li>
    </ul>
</body>

Giải thích:

  • <h2>: Thẻ tiêu đề cấp độ 2, thường dùng cho các tiêu đề phụ.
  • <ul>: Bắt đầu một danh sách không có thứ tự (Unordered List). Các mục sẽ thường hiển thị với dấu chấm đầu dòng mặc định.
  • <li>: Định nghĩa một mục trong danh sách (List Item). Mỗi <li> phải nằm trong một thẻ <ul> hoặc <ol>.

Lưu file, refresh và xem danh sách hiện ra. Bạn cũng có thể thử với danh sách có thứ tự bằng thẻ <ol> thay cho <ul>.

Bước 6: Thêm liên kết (<a>)

Hầu hết các trang web đều liên kết đến các trang khác hoặc tài nguyên khác. Hãy thêm một liên kết.

<body>
    <h1>Chào mừng bạn đến với trang web của tôi!</h1>
    <p>Đây là trang web đầu tiên tôi tự tay xây dựng.</p>
    <p>Tôi đang học lập trình web và cảm thấy rất thú vị.</p>

    <h2>Những điều tôi yêu thích:</h2>
    <ul>
        <li>Đọc sách</li>
        <li>Học ngôn ngữ mới</li>
        <li>Đi du lịch</li>
        <li>Code!</li>
    </ul>

    <p>Tìm hiểu thêm về HTML tại <a href="https://developer.mozilla.org/vi/docs/Web/HTML">MDN Web Docs</a>.</p>
</body>

Giải thích:

  • <a>: Thẻ dùng để tạo liên kết (Anchor).
  • href: Đây là thuộc tính (attribute) của thẻ <a>. Nó chỉ định URL đích mà liên kết sẽ dẫn tới khi người dùng click vào.
  • MDN Web Docs: Đây là nội dung hiển thị cho người dùng, là phần có thể click được.

Lưu file, refresh và click thử vào liên kết. Nó sẽ mở trang MDN trong cùng một tab (hành vi mặc định). Nếu muốn mở tab mới, bạn có thể thêm thuộc tính target="_blank" vào thẻ <a>.

<a href="https://developer.mozilla.org/vi/docs/Web/HTML" target="_blank">MDN Web Docs</a>

Bước 7: Thêm hình ảnh (<img>) - (Chỉ là code ví dụ)

Mặc dù bạn không cần chèn hình ảnh thật vào bài viết này, việc biết cách chèn ảnh là cực kỳ quan trọng khi xây dựng web. Thẻ <img> dùng để làm việc này.

<body>
    ...
    <h2>Hình ảnh minh họa (ví dụ):</h2>
    <img src="duong/dan/toi/hinh/anh/cua/ban.jpg" alt="Mô tả chi tiết hình ảnh">
    <p><em>(Đây chỉ là code ví dụ, bạn cần có file ảnh thật và đường dẫn đúng để hiển thị)</em></p>
</body>

Giải thích:

  • <img>: Thẻ dùng để nhúng hình ảnh. Đây là thẻ tự đóng (self-closing tag), không cần thẻ đóng </img>.
  • src: Thuộc tính bắt buộc, chỉ định đường dẫn (path) đến file hình ảnh. Đường dẫn có thể là tương đối (trong cùng thư mục/website) hoặc tuyệt đối (một URL trên internet).
  • alt: Thuộc tính bắt buộc và rất quan trọng. Cung cấp văn bản thay thế cho hình ảnh. Văn bản này hiển thị nếu hình ảnh không tải được, và được sử dụng bởi các trình đọc màn hình cho người khiếm thị. Đừng bao giờ bỏ qua thuộc tính alt!

Lưu file. Nếu bạn có một file ảnh và đặt nó đúng theo đường dẫn src mà bạn điền, hình ảnh sẽ hiển thị.

Bước 8: Hoàn thiện và xem lại

Lúc này, file trang_cua_toi.html của bạn có thể trông giống thế này (hoặc phong phú hơn tùy vào nội dung bạn thêm):

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trang Web Cá Nhân Đơn Giản</title>
</head>
<body>
    <h1>Giới thiệu về tôi</h1>
    <p>Xin chào! Tôi là một người yêu thích <strong>lập trình web</strong>.</p>

    <h2>Sở thích</h2>
    <p>Đây là vài điều tôi thích làm:</p>
    <ul>
        <li>Đọc sách</li>
        <li>Học công nghệ mới</li>
        <li>Chơi game</li>
        <li>Nấu ăn</li>
    </ul>

    <h2>Liên hệ</h2>
    <p>Bạn có thể tìm hiểu thêm hoặc liên hệ với tôi qua các kênh sau (ví dụ):</p>
    <ul>
        <li>GitHub: <a href="https://github.com/yourusername" target="_blank">yourusername</a></li>
        <li>Email: <a href="mailto:your.email@example.com">Gửi email cho tôi</a></li>
    </ul>

    <h2>Một liên kết hữu ích</h2>
    <p>Trang web này được xây dựng chỉ với HTML đơn giản. Hãy khám phá thêm về thế giới web tại <a href="https://fullhousendev.com" target="_blank">FullhouseDev</a> (ví dụ).</p>

</body>
</html>

Hãy thử thêm bớt, thay đổi nội dung, thêm các thẻ khác mà bạn biết như <br> (ngắt dòng), <hr> (đường kẻ ngang). Càng thực hành, bạn càng quen thuộc với cú pháp và cách các thẻ hoạt động cùng nhau.

Lời khuyên:

  • Luôn indent code (thụt lề) để dễ đọc và quản lý. Các trình soạn thảo code chuyên nghiệp thường làm điều này tự động hoặc có công cụ hỗ trợ.
  • Lưu file thường xuyên (Ctrl + S hoặc Cmd + S).
  • Refresh trình duyệt (F5 hoặc Cmd + R) sau mỗi lần lưu để xem kết quả thay đổi.

Việc xây dựng một trang HTML đơn giản như thế này là nền tảng vững chắc. Nó giúp bạn làm quen với quy trình làm việc của một nhà phát triển web front-end: viết code, xem kết quả, debug (sửa lỗi) nếu có.

Chúc mừng bạn đã tạo ra trang web HTML đơn giản đầu tiên của mình! Hãy tiếp tục khám phá và thực hành để làm quen hơn với các thẻ HTML khác nhé.

Comments

There are no comments at the moment.