[Series học HTML cơ bản] - Một số thẻ html cơ bản

Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào mừng các bạn quay trở lại với loạt bài học HTML cơ bản của Giuseart.com. Trong bài học này, mình sẽ hướng dẫn cho các bạn các thẻ HTML cơ bản phục vụ cho việc xây dựng giao diện website.

Thẻ tiêu đề

Thẻ tiêu đề rất thường gặp tại bất kỳ website nào. Các bạn có thể sử dụng thẻ tiêu đề để viết những tiêu đề bài viết giống như hình ảnh mô tả dưới đây:

Thẻ tiêu đề dùng để viết tên sản phẩm trong các trang web bán hàng

Và để hiển thị phần tiêu đề trên website, chúng ta phải sử dụng cặp thẻ <h1>nội dung</h1>. Nếu viết như vậy thì “nội dung” sẽ được hiển thị lên website. Bên cạnh đó, chúng ta còn có thể sử dụng các cặp thẻ <h> khác để viết phần tiêu đề, theo thứ tự lần lượt từ <h1><h2><h3><h4><h5><h6>.

Dưới đây mình sẽ viết ví dụ cho từng cặp thẻ tiêu đề:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Các thẻ cơ bản của html</title>
</head>
<body>
<h1>Đây là ví dụ về cặp thẻ h1</h1>
<h2>Đây là ví dụ về cặp thẻ h2</h2>
<h3>Đây là ví dụ về cặp thẻ h3</h3>
<h4>Đây là ví dụ về cặp thẻ h4</h4>
<h5>Đây là ví dụ về cặp thẻ h5</h5>
<h6>Đây là ví dụ về cặp thẻ h6</h6>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

</body>

</html>

Và đây là kết quả:

Ví dụ về các cặp thẻ tiêu đề trong website

Các bạn có thể dễ dàng nhận ra sự khác nhau giữa các thẻ <h> chính là kích thước của nó. Kích thước của thẻ <h1> luôn lớn nhất và giảm dần cho đến đến thẻ <h6> có kích thước nhỏ nhất.

Thẻ đoạn văn

Chúng ta thường xuyên viết nội dung cho website. Và do đó, chúng ta phải sử dụng thẻ <p> để viết các đoạn văn cho website. Mỗi đoạn văn khác nhau sử dụng một cặp thẻ <p>…</p> khác nhau. Ví dụ:

Như hình ảnh trên, chúng ta có thể nhận định 2 đoạn văn được khoanh nét đứt màu đỏ được tạo nên bởi hai cặp thẻ <p>…</p> khác nhau.

Dưới đây mình sẽ viết ví dụ cụ thể cho thẻ đoạn văn:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Các thẻ cơ bản của html</title>
</head>

<body>
    <h1>Dưới đây là ví dụ cụ thể về thẻ đoạn văn</h1>
    <p>Nội dung đăng tải trên tài khoản này khá đa dạng, bám sát với thị hiếu số đông và bàn về các vấn đề được người trẻ trong xã hội quan tâm. Mỗi bài đăng thu hút từ 15.000 đến 20.000 lượt like.</p>
    <p>Có hàng trăm Facebook mang tên Lại Văn Sâm được lập ra trong nhiều năm qua
Nội dung đăng tải trên tài khoản này khá đa dạng, bám sát với thị hiếu số đông và bàn về các vấn đề được người trẻ trong xã hội quan tâm. Mỗi bài đăng thu hút từ 15.000 đến 20.000 lượt like.</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<p>Nội dung đăng tải trên tài khoản này khá đa dạng, bám sát với thị hiếu số đông và bàn về các vấn đề được người trẻ trong xã hội quan tâm. Mỗi bài đăng thu hút từ 15.000 đến 20.000 lượt like.</p>

<p>Có hàng trăm Facebook mang tên Lại Văn Sâm được lập ra trong nhiều năm qua

Nội dung đăng tải trên tài khoản này khá đa dạng, bám sát với thị hiếu số đông và bàn về các vấn đề được người trẻ trong xã hội quan tâm. Mỗi bài đăng thu hút từ 15.000 đến 20.000 lượt like.</p>

</body>

</html>

và đây là kết quả:

Ví dụ về cặp thẻ đoạn văn trong xây dựng giao diện website

Thẻ in đậm, in nghiêng, gạch chân

Cũng như trong phần mềm soạn thảo văn bản MS Word hay Excel, đôi lúc bạn cần định dạng chữ viết sang dạng in đậm, in nghiêng hoặc gạch chân để làm nổi bật.

Trong ngôn ngữ html, chúng ta cũng có thể soạn thảo chữ viết dưới dạng in đậm, in nghiêng hoặc gạch chân bằng cách sử dụng các cặp thẻ sau:

In đậm chữ viết: <b>…</b>
In nghiêng: <i>…</i>
Gạch chân: <u>…</u>

Ví dụ soạn thảo các thẻ in đậm, in nghiêng và gạch chân trong html:

<b>Đây là thẻ in đậm chữ viết</b>
<i>Đây là thẻ in nghiêng</i>
<u>Đây là thẻ gạch chân</u>

<i>Đây là thẻ in nghiêng</i>

và đây là kết quả:

Ví dụ về cặp thẻ in đậm, in nghiêng, gạch chân

Tuy nhiên, như các bạn đã thấy, 3 thẻ trên không tự động xuống dòng giống như thẻ <p>. Do đó, trong trường hợp bạn muốn xuống hàng sau mỗi thẻ, bạn thêm vị trí đó một thẻ <br>. Ví dụ:

<b>Đây là thẻ in đậm chữ viết</b><br>
    <i>Đây là thẻ in nghiêng</i><br>
    <u>Đây là thẻ gạch chân</u>

<i>Đây là thẻ in nghiêng</i><br>

và đây là kết quả:

Thẻ <br> dùng để xuống dòng khi soạn thảo đoạn văn html

Thẻ chia khu vực <div>

Thẻ phân chia khu vực (<div>- division) dùng để định nghĩa một phần (section) riêng biệt trong trang web.

Thẻ <div> có thể chứa nhiều thẻ khác như thẻ tiêu đề, thẻ phân đoạn,…

Ví dụ:

<body>
    <div align="center" style="color:red">
    <h1>Đây là một ví dụ về thẻ phân chia khu vực </h1>
    <h2>Blog học đồ họa và lập trình website: giuseart.com</h2>
    </div>
</body>

<body>

<h2>Blog học đồ họa và lập trình website: giuseart.com</h2>

</div>

</body>

và đây là kết quả:

Thẻ phân chia khu vực div — Thể phân chia khu vực <div>

Thẻ tạo đường kẻ ngang <hr>

Thẻ <hr> dùng để tạo một đường kẻ ngang với hai thuộc tính width và height để điều chỉnh độ rộng và chiều dài của đường kẻ. Ví dụ:

<body>
    <div align="center" style="color:red">
    <h1>Đây là một ví dụ về thẻ phân chia khu vực </h1>
    <h2>Blog học đồ họa và lập trình website: giuseart.com</h2>
<hr width="500px" height="1px" color="red">
    </div>
</body>

<body>