Bài 8: Định dạng văn bản trong HTML
Môn: Tin học 12 | Thời lượng: 90 phút | SGK: Kết nối tri thức với cuộc sống
🎯 Mục tiêu bài học
- Hiểu khái niệm định dạng văn bản và vai trò của các thẻ HTML trong trình bày nội dung.
- Sử dụng được các thẻ HTML:
<h1>–<h6>,<p>,<b>,<i>,<u>,<font>… - Phân biệt được thẻ định dạng và thuộc tính trong HTML.
- Thực hành định dạng đoạn văn bản và tiêu đề đẹp mắt bằng HTML.
📌 1. Khởi động
Quan sát hai đoạn văn bản trong Hình 8.1 SGK:
- Hình (a): Văn bản chưa định dạng – khó đọc, đơn điệu.
- Hình (b): Văn bản đã định dạng – có tiêu đề, cỡ chữ, màu sắc rõ ràng.
📚 2. Kiến thức mới
2.1. Thuộc tính của thẻ HTML
Mỗi thẻ HTML có thể kèm các thuộc tính (attributes) để điều chỉnh hiển thị. Ví dụ:
<p align="center">Đoạn văn bản căn giữa</p>
2.2. Các thẻ định dạng trình bày văn bản
| Thẻ | Ý nghĩa | Ví dụ |
|---|---|---|
| <h1>...</h1> | Tiêu đề lớn | Bài học hôm nay |
| <p>...</p> | Đoạn văn | Đây là một đoạn văn. |
| <div>...</div> | Khối nội dung | Phần riêng biệt |
| <br> | Ngắt dòng | Dòng 1 Dòng 2 |
2.3. Các thẻ định dạng kiểu chữ – phông chữ
| Thẻ | Tác dụng | Ví dụ |
|---|---|---|
| <b> | In đậm | Quan trọng |
| <i> | In nghiêng | Chú thích |
| <u> | Gạch chân | Từ khóa |
| <font color="red" face="Arial"> | Định dạng màu và phông chữ | Xin chào! |
2.4. So sánh <p> và <br>
<p>Thẻ p tạo đoạn nội dung</p> <p>Thẻ div tạo khối chứa dữ liệu</p> <p>Các thẻ này <br> không có hình thức trình bày riêng</p>
Nhận xét: <p> tạo khoảng cách dòng, còn <br> chỉ ngắt dòng tạm thời.
<p> cho đoạn văn, <br> cho xuống dòng ngắn.
🧠 3. Luyện tập
Bài 1: Sửa đoạn sau để làm nổi bật ý chính:
<p>Học HTML giúp tạo ra trang web sinh động.</p>
Đáp án:
<p><b>Học HTML</b> giúp tạo ra <i>trang web sinh động</i>.</p>
Bài 2: Trình bày đoạn văn sau in đậm:
HTML là ngôn ngữ đánh dấu siêu văn bản dùng để tạo trang Web.
<p><b>HTML là ngôn ngữ đánh dấu siêu văn bản dùng để tạo trang Web.</b></p>
💻 4. Thực hành – Học sinh làm trên máy
4.1. Bài thực hành cơ bản
Đề bài: Viết mã HTML để trình bày đoạn văn bản sau:
Bài thơ “Mùa xuân nho nhỏ”
Tác giả: Thanh Hải
Một mùa xuân nho nhỏ
Lặng lẽ dâng cho đời.
Yêu cầu:
- Tiêu đề in đậm, căn giữa.
- Tên tác giả in nghiêng.
- Bài thơ dùng thẻ <p> và <br>.
💡 Hướng dẫn:
<!DOCTYPE html>
<html>
<head><title>Thực hành 1</title></head>
<body>
<h2 align="center"><b>Bài thơ: Mùa xuân nho nhỏ</b></h2>
<p align="center"><i>Tác giả: Thanh Hải</i></p>
<p>
Một mùa xuân nho nhỏ<br>
Lặng lẽ dâng cho đời<br>
Dù là tuổi hai mươi<br>
Dù là khi tóc bạc.
</p>
</body>
</html>
Kết quả hiển thị:
Bài thơ: Mùa xuân nho nhỏ
Tác giả: Thanh Hải
Một mùa xuân nho nhỏ
Lặng lẽ dâng cho đời
Dù là tuổi hai mươi
Dù là khi tóc bạc.
4.2. Bài thực hành nâng cao
Đề bài: Thiết kế trang HTML giới thiệu bản thân, có:
- Tiêu đề chính màu xanh.
- Đoạn mô tả ngắn (in nghiêng, màu xám).
- Danh sách sở thích (gạch đầu dòng).
- Một câu châm ngôn nổi bật in đậm, màu cam.
💡 Hướng dẫn chi tiết:
<!DOCTYPE html>
<html>
<head>
<title>Giới thiệu bản thân</title>
</head>
<body style="font-family:Arial;">
<h1 style="color:#0078D7;">Xin chào! Mình là Nguyễn Văn A</h1>
<p style="color:#666;font-style:italic;">Mình là học sinh lớp 12 yêu thích công nghệ và thiết kế web.</p>
<h3>Sở thích của mình:</h3>
<ul>
<li>Lập trình web</li>
<li>Chụp ảnh</li>
<li>Đọc sách khoa học</li>
</ul>
<p style="color:#FF6600;font-weight:bold;">
“Không có giới hạn cho sự sáng tạo – chỉ có sự kiên trì.”
</p>
</body>
</html>
🧩 5. Vận dụng mở rộng
Nhiệm vụ: Lấy mã màu từ một bức ảnh và áp dụng làm màu tiêu đề bài thơ hoặc trang cá nhân.
- Dùng công cụ Color Picker hoặc Paint để lấy mã màu (ví dụ:
#3399ff). - Sử dụng thuộc tính
style="color:#3399ff;"trong thẻ tiêu đề HTML.
<h2 style="color:#3399ff;">Bài thơ mùa thu</h2>
🎓 Tổng kết
- Định dạng văn bản giúp trang Web đẹp, dễ đọc và chuyên nghiệp.
- Biết sử dụng các thẻ định dạng cơ bản và thuộc tính phông chữ.
- Vận dụng sáng tạo để trình bày nội dung Web sinh động, hấp dẫn.
📌 Danh sách bình luận