Chủ đề / Chương

Bài học

Chủ đề

Bài F2. Tạo và định dạng trang web với các thẻ HTML

Nội dung lý thuyết

1. Các thẻ định dạng cơ bản

a) Định dạng đề mục

HTML cung cấp các thẻ từ <h1> đến <h6> để đánh dấu các đề mục theo thứ tự cấp độ.
Thẻ <h1> là cấp cao nhất và <h6> là cấp thấp nhất. Trình duyệt hiển thị đề mục càng lớn khi cấp càng cao.

Ví dụ: (Hình 2)

<h1>Đề mục cấp 1</h1>
<h2>Đề mục cấp 2</h2>
<h3>Đề mục cấp 3</h3>
<h4>Đề mục cấp 4</h4>
<h5>Đề mục cấp 5</h5>
<h6>Đề mục cấp 6</h6>

Trình bày các cấp dề mục trong HTML

b) Định dạng phông chữ

Sử dụng thẻ <font> để định dạng phông chữ như kích thước, màu sắc, kiểu phông.

Ví dụ: 

<font face="Arial" size="5" color="red">Đây là văn bản</font>

Kết quả hiển thị: (Hình 3)

Nội dung sau khi định dạng phông chữ

Lưu ý: Thẻ <font> là cú pháp cũ, hiện nay nên sử dụng CSS (Cascading Style Sheets) để thay thế cho việc định dạng kiểu này.

c) Định dạng văn bản

HTML có nhiều thẻ hỗ trợ định dạng văn bản như in đậm, in nghiêng, gạch dưới, chỉ số trên, chỉ số dưới...

Một số thẻ HTMLdùng để định dạng văn bản thông dụng


Ví dụ:

<p>Văn bản được <strong>in đậm</strong></p>
<p><em>Văn bản in nghiêng</em></p>
<p>2<sup>2</sup> = 4</p>
<p>H<sub>2</sub>O</p>

Văn bản được định dạng

Lưu ý:

  • Một số ký tự đặc biệt như <, > cần viết theo mã HTML tương ứng: &lt;, &gt;

  • Khoảng trắng: dùng ​&nbsp;

2. Thẻ tạo siêu liên kết

Sử dụng thẻ <a> để tạo liên kết đến:

  • Website khác

  • Email

  • Tập tin

  • Vị trí khác trong trang

Cú pháp:

<a href="địa_chỉ" target="mục_tiêu">Nội dung hiển thị</a>

Giải thích giá trị của target:

  • _self: mặc định, mở trên cùng cửa sổ

  • _blank: mở trên cửa sổ mới

  • _top, _parent: hiếm dùng

Ví dụ:

<a href="https://abc.xyz">Mở trang Alphabet</a>
<a href="https://internet.com" target="_blank">Liên kết trang internet.com</a>
<a href="tailieu/baimoc.pdf">Liên kết đến tệp baimoc.pdf</a>
<a href="mailto:abc@gmail.com">Liên hệ địa chỉ email</a>
<a href="#dautrang">Liên kết trong cùng trang</a>

Các liên kết trong trang web

Lưu ý:

  • Liên kết tới file trong cùng thư mục không cần đường dẫn tuyệt đối.

  • Với email, cần dùng mailto:

  • Với liên kết trong trang, dùng #id_của_thẻ

​3. Thẻ tạo danh sách

Trong HTML có hai dạng danh sách chính: không có thứ tự (unordered) và có thứ tự (ordered).

a) Danh sách không có thứ tự

Danh sách không có thứ tự dùng để đánh dấu đầu dòng cho nội dung bằng ký hiệu, áp dụng cho những nội dung không theo trình tự cụ thể.
Để tạo danh sách không có thứ tự, dùng thẻ <ul> và <li>.

  • Thẻ <ul>: dùng để tạo danh sách.

  • Thẻ <li>: dùng để đánh dấu từng mục trong danh sách.

Ví dụ 1: Danh sách các siêu liên kết không có thứ tự

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mình hoạ danh sách không có thứ tự</title>
</head>
<body>
  <ul>
    <li><a href="https://abc.xyz">Trang Alphabet</a></li>
    <li><a href="https://internet.com">Trang internet.com</a></li>
    <li><a href="/tailieu/baihoc.pdf">Xem baihoc.pdf</a></li>
  </ul>
</body>
</html>

Danh sách các siêu liên kết không có thứ tự trong trang web

b) Danh sách có thứ tự

Danh sách có thứ tự dùng để đánh dấu đầu dòng theo số hoặc chữ cái, áp dụng cho nội dung có trình tự cụ thể.
Để tạo danh sách có thứ tự, dùng thẻ <ol> và <li>.

  • Thẻ <ol>: dùng để tạo danh sách.

  • Thẻ <li>: dùng để đánh dấu từng mục.

Ví dụ 2: Danh sách các siêu liên kết có thứ tự

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mình hoạ danh sách có thứ tự</title>
</head>
<body>
  <ol type="1" start="4"> <!-- (1) -->
    <li><a href="https://abc.xyz">Trang Alphabet</a></li>
    <li><a href="https://internet.com">Trang internet.com</a></li>
    <li><a href="/tailieu/baihoc.pdf">Xem baihoc.pdf</a></li>
  </ol>
</body>
</html>

  • type: kiểu ký hiệu đầu dòng (1, A, a, I, i).

  • start: giá trị bắt đầu đánh số hoặc ký tự.

Danh sách các siêu liên kết có thứ tự trong trang web

c) Danh sách lồng nhau

Có thể tạo danh sách lồng nhau bằng cách đặt một danh sách khác vào trong một mục <li> của danh sách cha.

Ví dụ 3: Tạo danh sách lồng nhau

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mình hoạ danh sách lồng nhau</title>
</head>
<body>
  <ul>
    <li>Tài liệu thiết kế trang web
      <ol>
        <li>Tài liệu HTML</li>
        <li>Tài liệu CSS</li>
        <li>Tài liệu Javascript</li>
      </ol>
    </li>
    <li>Tài liệu tin học văn phòng
      <ol>
        <li>Tài liệu Word</li>
        <li>Tài liệu Excel</li>
        <li>Tài liệu PowerPoint</li>
      </ol>
    </li>
  </ul>
</body>
</html>

  • Các danh sách lồng nhau có thể sử dụng kết hợp cả <ul> và <ol>.

  • Trình duyệt sẽ tự động thụt lề nội dung lồng bên trong.

Các danh sách lồng nhau

Bài trước
Bài tiếp theo