Bài 1.5: Bài tập thực hành HTML cơ bản

Chào mừng bạn quay trở lại với hành trình chinh phục Front-end cùng FullhouseDev! Sau khi đã làm quen với cấu trúc xương sống của một trang HTML, giờ là lúc chúng ta xắn tay áo lên và đưa kiến thức vào thực tế thông qua những bài tập thực hành cơ bản. Đây là cách tốt nhất để bạn làm quen với các thẻ HTML thông dụng và cách chúng hoạt động.

Chúng ta sẽ đi qua một loạt các bài tập nhỏ, tập trung vào từng nhóm thẻ cơ bản. Hãy chuẩn bị trình soạn thảo code và trình duyệt của bạn để bắt đầu nhé!

Bài Tập 1: Hiển thị Văn bản và Tiêu đề

Mọi trang web đều bắt đầu bằng văn bản. Bài tập này giúp bạn làm quen với các thẻ tiêu đề (<h1> đến <h6>) và thẻ đoạn văn bản (<p>).

Yêu cầu:

Tạo một trang HTML đơn giản chứa:

Một tiêu đề chính của trang.
Một tiêu đề phụ.
Hai đoạn văn bản.

Thực hành Code:

Mở file HTML của bạn (ví dụ: baitap1.html) và gõ đoạn code sau vào phần <body>:

<h1>Đây là Tiêu đề Chính của Trang</h1>

<p>Chào mừng bạn đến với bài tập thực hành HTML đầu tiên!</p>

<h2>Đây là Tiêu đề Phụ</h2>

<p>Đoạn văn bản này giới thiệu thêm về chủ đề hoặc nội dung phụ liên quan.</p>

Giải thích:

Thẻ <h1> đại diện cho tiêu đề quan trọng nhất trên trang (chỉ nên có một thẻ <h1> trên mỗi trang để tốt cho SEO và cấu trúc).
Thẻ <h2> là tiêu đề cấp độ hai, ít quan trọng hơn <h1>. HTML cung cấp đến 6 cấp độ tiêu đề từ <h1> đến <h6>.
Thẻ <p> được sử dụng để tạo các đoạn văn bản thông thường. Mỗi thẻ <p> sẽ tự động tạo một khoảng cách (padding/margin) xung quanh nó, giúp phân chia nội dung rõ ràng.

Chạy file HTML này trên trình duyệt, bạn sẽ thấy văn bản được định dạng theo đúng cấu trúc tiêu đề và đoạn văn.

Bài Tập 2: Định dạng Văn bản Đa dạng

HTML cung cấp các thẻ giúp định dạng ngữ nghĩa hoặc hiển thị văn bản, như làm đậm, in nghiêng, gạch chân, v.v.

Yêu cầu:

Trong một đoạn văn bản, hãy:

Làm đậm một vài từ quan trọng.
Làm nghiêng một vài từ cần nhấn mạnh.
Gạch ngang qua một từ đã bị bỏ đi.
Hiển thị công thức hóa học (ví dụ H₂O) và phép toán (ví dụ x²).

Thực hành Code:

Thêm đoạn code này vào phần <body> của bạn:

<p>Trong bài học này, chúng ta sẽ học về các thẻ định dạng văn bản <strong>cơ bản</strong> nhưng rất <em>quan trọng</em>.</p>

<p>Giá cũ là <s>100.000 VNĐ</s>, giá mới chỉ còn <strong>75.000 VNĐ</strong>!</p>

<p>Công thức hóa học của nước là H<sub>2</sub>O.</p>

<p>Trong toán học, định lý Pitago có dạng a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.</p>

Giải thích:

<strong>: Dùng để làm nổi bật văn bản với ý nghĩa quan trọng. Hầu hết trình duyệt hiển thị <strong> dưới dạng in đậm.
<em>: Dùng để nhấn mạnh văn bản. Hầu hết trình duyệt hiển thị <em> dưới dạng in nghiêng. (Lưu ý: <b> và <i> cũng làm đậm/nghiêng nhưng thiên về hiển thị hơn là ngữ nghĩa).
<s>: Dùng để thể hiện nội dung không còn chính xác hoặc đã bị gạch bỏ. Thường hiển thị dưới dạng gạch ngang.
<sub>: Dùng để tạo chỉ số dưới (subscript), như số 2 trong H₂O.
<sup>: Dùng để tạo chỉ số trên (superscript), như số mũ 2 trong x².

Bạn sẽ thấy các từ và ký tự được định dạng đặc biệt trên trình duyệt.

Bài Tập 3: Tạo Danh Sách (Lists)

Danh sách là cách tuyệt vời để tổ chức các mục liên quan. HTML hỗ trợ danh sách không thứ tự (unordered lists) và danh sách có thứ tự (ordered lists).

Yêu cầu:

Tạo một danh sách các loại trái cây không cần theo thứ tự cụ thể.
Tạo một danh sách các bước để thực hiện một công việc theo thứ tự.

Thực hành Code:

Thêm đoạn code danh sách vào phần <body>:

<h2>Các loại Trái cây Yêu thích</h2>
<ul>
    <li>Táo</li>
    <li>Chuối</li>
    <li>Cam</li>
    <li>Dâu tây</li>
</ul>

<h2>Các bước chuẩn bị bữa sáng</h2>
<ol>
    <li>Thức dậy</li>
    <li>Đánh răng rửa mặt</li>
    <li>Pha trà/cà phê</li>
    <li>Chuẩn bị ngũ cốc hoặc bánh mì</li>
    <li>Thưởng thức!</li>
</ol>

Giải thích:

<ul> (Unordered List): Đại diện cho một danh sách các mục không cần theo thứ tự cụ thể. Các mục thường được đánh dấu bằng các dấu chấm (bullets) theo mặc định của trình duyệt.
<ol> (Ordered List): Đại diện cho một danh sách các mục cần theo thứ tự. Các mục thường được đánh số (1, 2, 3...) theo mặc định của trình duyệt.
<li> (List Item): Đại diện cho một mục duy nhất trong danh sách, được đặt bên trong thẻ <ul> hoặc <ol>.

Quan sát kết quả trên trình duyệt để thấy sự khác biệt giữa hai loại danh sách.

Bài Tập 4: Thêm Liên Kết (Links)

Liên kết (<a>) là trái tim của World Wide Web, cho phép chúng ta di chuyển giữa các trang.

Yêu cầu:

Tạo một liên kết đến trang web FullhouseDev.
Tạo một liên kết đến trang Wikipedia về HTML, liên kết này khi click sẽ mở ra ở một tab/cửa sổ trình duyệt mới.

Thực hành Code:

Thêm đoạn code liên kết vào phần <body>:

<p>Hãy truy cập trang chủ của chúng tôi: <a href="https://fullhousedev.com">FullhouseDev Website</a></p>

<p>Tìm hiểu thêm về HTML trên Wikipedia: <a href="https://vi.wikipedia.org/wiki/HTML" target="_blank">Trang HTML trên Wikipedia</a></p>

Giải thích:

<a>: Thẻ neo (anchor), dùng để tạo liên kết.
href: Thuộc tính bắt buộc của thẻ <a>, xác định URL (địa chỉ) mà liên kết trỏ tới.
target="_blank": Thuộc tính tùy chọn, chỉ định nơi mở liên kết. Giá trị _blank yêu cầu trình duyệt mở liên kết trong một tab hoặc cửa sổ mới. Các giá trị khác bao gồm _self (mặc định, mở trong cùng tab), _parent, _top.

Bạn sẽ thấy văn bản liên kết xuất hiện, thường có màu xanh và gạch chân. Khi click vào, nó sẽ dẫn bạn đến trang đích.

Bài Tập 5: Đường Kẻ Ngang và Xuống Dòng

Đôi khi, bạn chỉ muốn thêm một đường kẻ để phân chia nội dung hoặc đơn giản là ép một đoạn văn bản xuống dòng mà không tạo đoạn mới.

Yêu cầu:

Sử dụng thẻ <hr> để tạo một đường kẻ phân cách giữa hai đoạn văn bản.
Sử dụng thẻ <br> để xuống dòng ngay giữa một câu.

Thực hành Code:

Thêm đoạn code sau vào phần <body>:

<p>Đây là đoạn văn bản đầu tiên. Nội dung kết thúc tại đây.</p>

<hr> <!-- Đường kẻ ngang phân cách -->

<p>Đây là đoạn văn bản thứ hai.<br>Đoạn này sẽ bắt đầu trên một dòng mới,<br>ngay tại vị trí có thẻ br.</p>

Giải thích:

<hr> (Horizontal Rule): Đại diện cho một sự thay đổi ngữ nghĩa giữa các đoạn nội dung (ví dụ: thay đổi chủ đề). Hầu hết trình duyệt hiển thị nó như một đường kẻ ngang. Đây là một thẻ rỗng (empty tag), không cần thẻ đóng.
<br> (Line Break): Tạo ra một ngắt dòng tại chỗ, ép nội dung theo sau nó xuống dòng tiếp theo mà không tạo ra một đoạn mới (<p>). Đây cũng là một thẻ rỗng. Thẻ <br> nên được sử dụng cẩn thận, chủ yếu cho các trường hợp đặc biệt như địa chỉ, thơ, nơi ngắt dòng là một phần của nội dung, chứ không phải để tạo khoảng cách layout (việc này nên dùng CSS).

Bạn sẽ thấy một đường kẻ xuất hiện và văn bản xuống dòng ở những vị trí bạn đặt thẻ <br>.

Bài Tập 6: Sử dụng Comments

Comments (ghi chú) trong HTML không hiển thị trên trình duyệt nhưng lại cực kỳ quan trọng cho lập trình viên. Chúng giúp ghi chú, giải thích mã, hoặc tạm thời vô hiệu hóa một phần code.

Yêu cầu:

Thêm một comment giải thích về một phần code.
Tạm thời "ẩn" đi một đoạn văn bản bằng cách biến nó thành comment.

Thực hành Code:

Thêm đoạn code comment vào phần <body>:

<!-- Đây là phần nội dung chính của trang web -->

<h1>Tiêu đề Trang Quan Trọng</h1>

<p>Đoạn này sẽ hiển thị bình thường.</p>

<!-- <p>Đoạn văn bản này đã bị comment và sẽ không hiển thị.</p> -->

<p>Tiếp tục nội dung sau phần comment.</p>

Giải thích:

Comment trong HTML bắt đầu bằng .
Bất cứ nội dung nào nằm giữa hai dấu này đều sẽ bị trình duyệt bỏ qua và không hiển thị cho người dùng cuối.
Comment rất hữu ích để ghi chú mục đích của các khối code phức tạp, đánh dấu các phần cần chỉnh sửa sau này, hoặc giúp bạn và đồng đội hiểu rõ hơn về cấu trúc trang.

Kiểm tra trên trình duyệt, bạn sẽ chỉ thấy "Tiêu đề Trang Quan Trọng", "Đoạn này sẽ hiển thị bình thường.", và "Tiếp tục nội dung sau phần comment.". Đoạn văn bản bị comment sẽ hoàn toàn biến mất khỏi giao diện.

Kết hợp các Thẻ Cơ Bản

Cuối cùng, hãy thử kết hợp các thẻ bạn đã học vào một cấu trúc HTML hoàn chỉnh (dù rất đơn giản) để thấy chúng hoạt động cùng nhau như thế nào.

Thực hành Code:

Tạo một file HTML mới (ví dụ: trangcuatoi.html) với cấu trúc cơ bản và thêm các thẻ đã học vào phần <body>:

<!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ơ Bản Của Tôi</title>
</head>
<body>

    <!-- Phần tiêu đề chính -->
    <h1>Chào Mừng Đến Với Trang Của Tôi</h1>

    <p>Đây là một đoạn giới thiệu ngắn. Chúng ta sẽ khám phá những điều <a href="https://fullhousedev.com" target="_blank">thú vị</a> cùng nhau!</p>

    <hr> <!-- Đường phân cách -->

    <!-- Danh sách yêu thích -->
    <h2>Những Điều Tôi Thích:</h2>
    <ul>
        <li>Học Lập trình</li>
        <li>Đọc sách</li>
        <li>Uống cà phê</li>
    </ul>

    <!-- Một đoạn văn bản với định dạng -->
    <p>Hôm nay là một ngày <strong>tuyệt vời</strong> để thực hành HTML!</p>

    <!-- Ghi chú riêng -->
    <!-- Nhớ kiểm tra lại liên kết sau! -->

</body>
</html>

Giải thích:

Đoạn code này kết hợp cấu trúc cơ bản (<!DOCTYPE>, <html>, <head>, <title>, <body>) với các thẻ nội dung phổ biến như <h1>, <p>, <a>, <hr>, <h2>, <ul>, <li>, <strong>, và comments . Nó cho thấy cách các thẻ này được lồng vào nhau và sắp xếp trong phần <body> để tạo nên nội dung hiển thị trên trang.

Thực hành lặp đi lặp lại với các thẻ này, thử nghiệm các kết hợp khác nhau, bạn sẽ dần làm chủ được cách "dựng" bộ xương cho website của mình bằng HTML.

Hy vọng các bài tập thực hành này giúp bạn củng cố kiến thức về HTML cơ bản. Đừng ngại thử nghiệm và tạo ra những cấu trúc, nội dung khác nhau với các thẻ đã học. Thực hành là chìa khóa để thành thạo lập trình! Tiếp tục luyện tập và hẹn gặp lại bạn trong các bài viết tiếp theo.

Comments

There are no comments at the moment.