Bài 1: Giới thiệu về Trình quản lý quảng cáo

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

BÀI GIẢNG: GIỚI THIỆU CÁC THẺ VĂN BẢN CƠ BẢN TRONG HTML

1. Thẻ đoạn văn (<p>)

Thẻ <p> dùng để tạo một đoạn văn bản. Nội dung bên trong thẻ sẽ được hiển thị theo dạng khối (block-level), có khoảng cách trước và sau đoạn văn.

Cú pháp:

<p>Đây là một đoạn văn bản.</p>

Kết quả:

Đây là một đoạn văn bản.

2. Thẻ tiêu đề (<h1> - <h6>)

HTML cung cấp 6 mức tiêu đề từ <h1> đến <h6>, trong đó <h1> là tiêu đề lớn nhất và <h6> là nhỏ nhất.

Cú pháp:

<h1>Tiêu đề cấp 1</h1>
<h2>Tiêu đề cấp 2</h2>
<h3>Tiêu đề cấp 3</h3>
<h4>Tiêu đề cấp 4</h4>
<h5>Tiêu đề cấp 5</h5>
<h6>Tiêu đề cấp 6</h6>

Kết quả:

Tiêu đề cấp 1
Tiêu đề cấp 2
Tiêu đề cấp 3
Tiêu đề cấp 4
Tiêu đề cấp 5
Tiêu đề cấp 6

3. Thẻ danh sách

Danh sách trong HTML có hai loại chính:

  • Danh sách không có thứ tự (<ul>) - mỗi mục được đánh dấu bằng dấu chấm (bullet).
  • Danh sách có thứ tự (<ol>) - mỗi mục được đánh số.

Cú pháp:

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

<ul>
    <li>Mục 1</li>
    <li>Mục 2</li>
    <li>Mục 3</li>
</ul>

Kết quả:

  • Mục 1
  • Mục 2
  • Mục 3

Danh sách có thứ tự:

<ol>
    <li>Mục 1</li>
    <li>Mục 2</li>
    <li>Mục 3</li>
</ol>

Kết quả:

  1. Mục 1
  2. Mục 2
  3. Mục 3

4. Thẻ liên kết (<a>)

Thẻ <a> được sử dụng để tạo liên kết đến một trang web hoặc tài liệu khác.

Cú pháp:

<a href="https://www.example.com">Truy cập trang web</a>

Kết quả:

Truy cập trang web

5. Thẻ đa phương tiện (Media)

HTML hỗ trợ nhúng hình ảnh, âm thanh và video thông qua các thẻ như <img>, <audio>, và <video>.

Cú pháp:

Hình ảnh (<img>):

<img src="image.jpg" alt="Mô tả hình ảnh">

Kết quả:

(Hình ảnh "image.jpg" sẽ hiển thị nếu có tệp hình ảnh hợp lệ.)

Âm thanh (<audio>):

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

Kết quả:

(Bộ điều khiển âm thanh sẽ xuất hiện nếu tệp "audio.mp3" hợp lệ.)

Video (<video>):

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

Kết quả:

(Bộ điều khiển video sẽ xuất hiện nếu tệp "video.mp4" hợp lệ.)

6. Thẻ bảng (<table>)

Thẻ <table> được sử dụng để tạo bảng trong HTML.

Cấu trúc bảng:

  • <table>: Định nghĩa bảng.
  • <tr>: Định nghĩa một hàng.
  • <th>: Định nghĩa ô tiêu đề.
  • <td>: Định nghĩa ô dữ liệu.

Cú pháp:

<table border="1">
    <tr>
        <th>Họ tên</th>
        <th>Tuổi</th>
    </tr>
    <tr>
        <td>Nguyễn Văn A</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Trần Thị B</td>
        <td>22</td>
    </tr>
</table>

Kết quả:

Họ tên Tuổi
Nguyễn Văn A 25
Trần Thị B 22

7. Tổng kết

Trong bài này, chúng ta đã tìm hiểu các thẻ văn bản cơ bản trong HTML:

  • Thẻ <p> để tạo đoạn văn bản.
  • Thẻ <h1> đến <h6> để tạo tiêu đề.
  • Thẻ <ul> và <ol> để tạo danh sách.
  • Thẻ <a> để tạo liên kết.
  • Thẻ <img>, <audio>, <video> để hiển thị hình ảnh, âm thanh, video.
  • Thẻ <table> để tạo bảng dữ liệu.

Những thẻ này là nền tảng quan trọng trong việc xây dựng trang web bằng HTML

 

CODE BÀI GIẢNG:

<!DOCTYPE html>
<html lang="vi">
<head>
    <title>Trang 2. Bài học html</title>
</head>
<body>
    <p id="tieude">Đây là một đoạn văn bản</p>
    <p>Đây là đoạn văn bản 2</p>

    <h3>BÀI GIẢNG: GIỚI THIỆU CÁC THẺ VĂN BẢN CƠ BẢN TRONG HTML</h3>
    <h5>1. Thẻ đoạn văn &#60;p&#62; </h5>
    <p>
        Thẻ dùng để tạo một đoạn văn bản.
        Nội dung bên trong thẻ sẽ được hiển thị theo dạng khối (block-level),
        có khoảng cách trước và sau đoạn văn.
    </p>
    <!-- Phần thẻ mục lục: Thứ tự -->
    <!-- ul: Dấu chấm liệt kê -->
    <ul>
        <li>Mục 1</li>
        <li>Mục 2</li>
    </ul>
    <!-- ol: Số thứ tự liệt kê -->
    <ol>
        <li>Ol mục 1</li>
        <li>Ol mục 2</li>
    </ol>
    <!-- Thẻ liên kết -->
    <!-- 1. Url nội tuyến (id trong trang) -->
    <!-- 2. Url tuyệt đối: Http://   https:// -->
    <!-- Thuộc tính target: -->
    <a href="https://google.com.vn">Đi tới google</a>
    <a href="#tieude">Về đầu</a>

    <!-- Thẻ hình ảnh img -->
    <!--<img src="https://cdn-media.sforum.vn/storage/app/media/anh-dep-8.jpg" width="200" height="auto" alt="Mô tả hình ảnh" />-->

    <!-- Thẻ âm thanh -->
    <!--<audio controls>
        <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
    </audio>-->
    <!-- Thẻ video -->
    <!--<video controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>-->

    
    <!-- Thẻ table -->
    <table style="border:1px solid; border-collapse:collapse">
        <thead>
            <tr>
                <th style="border:1px solid">TT</th>
                <th style="border:1px solid">Họ và tên</th>
                <th style="border:1px solid">Địa chỉ</th>
                <th style="border:1px solid">Số điện thoại</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="border:1px solid">1</td>
                <td style="border:1px solid">Nguyễn văn a</td>
                <td style="border:1px solid">Hà Nội</td>
                <td style="border:1px solid">056734444</td>
            </tr>
            <tr>
                <td style="border:1px solid">2</td>
                <td style="border:1px solid">Nguyễn văn B</td>
                <td style="border:1px solid">HCM</td>
                <td style="border:1px solid">093443652</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th style="border:1px solid">Tổng</th>
                <th style="border:1px solid"></th>
                <th style="border:1px solid"></th>
                <th style="border:1px solid"></th>
            </tr>
        </tfoot>
    </table> 
</body>
</html>

Bài tập: Làm quen với các thẻ HTML cơ bản

1. Yêu cầu

  1. Tạo một tập tin HTML, đặt tên là thuc-hanh-html-co-ban.html.
  2. Lập trình và chạy trình duyệt để có kết quả như hình
  3. Gửi nộp tập tin html

2. Hướng dẫn thực hiện

Bước 1: Tạo tập tin HTML

  1. Mở trình soạn thảo như VS Code, Sublime Text hoặc Notepad++.
  2. Tạo tập tin mới và lưu với tên thuc-hanh-html-co-ban.html.

Bước 2: Viết mã HTML

  1. Thêm thẻ tiêu đề (h1 - h6) để hiển thị các cấp độ tiêu đề khác nhau.
  2. Thêm đoạn văn bản (p) để mô tả nội dung.
  3. Thêm danh sách:
    • Dùng danh sách không thứ tự (ul) để liệt kê thành phần HTML.
    • Dùng danh sách có thứ tự (ol) để mô tả trình tự học.
  4. Thêm liên kết (a) để dẫn đến tài liệu học.
  5. Thêm hình ảnh (img) để minh họa nội dung.
  6. Thêm video (video) với nguồn file mẫu.
  7. Thêm bảng dữ liệu (table) để so sánh các thẻ HTML.

Bước 3: Kiểm tra kết quả

  1. Mở tập tin thuc-hanh-html-co-ban.html bằng trình duyệt.
  2. Kiểm tra xem các thành phần có hiển thị đúng không.
  3. Nhấn vào liên kết để kiểm tra tính năng điều hướng.
  4. Kiểm tra xem hình ảnh và video có hiển thị đúng không.