1 of 29

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ �VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH�BÀI 8. ĐỊNH DẠNG VĂN BẢN

Giáo viên: PHAN THIỆN HUỆ

SĐT/Zalo/FB: 0382 168 232

Công tác: Trường THPT Chuyên Thoại Ngọc Hầu

2 of 29

1. Thuộc tính thẻ

<h2> Xin chào mọi người</h2>

<hr>

<h2 style="color:red" align="center"> Xin chào mọi người</h2>

2

3 of 29

1. Thuộc tính thẻ

3

Thẻ có thể có hoặc không có thuộc tính

Cú pháp: tên_thuộc_tính = “giá trị”

Bổ sung thông tin, làm rõ cách xử lí của thẻ

Nằm trong thẻ bắt đầu, sau tên thẻ

Các thuộc tính được ngăn cách bởi dấu cách

4 of 29

1. Thuộc tính thẻ

4

​

Tên thuộc tính và thẻ chứa thuộc tính tương ứng xuất hiện trong Bài 7:

    • <p style = “color : red”>This is a paragraph.</p>
    • <meta charset = “utf-8”>
    • <img src = “tên tệp ảnh”>

Xác định các tên thuộc tính và thẻ chứa thuộc tính tương ứng xuất hiện trong Bài 7.

5 of 29

2. Các thẻ định dạng trình bày văn bản�a) Định dạng tiêu đề

<hx> … </hx> (x = 1, 2, 3, 4, 5, 6)

<html>

<title>ThayHueTNH</title>

<h1>Tin học 12</h1>

<h2>Phần chung</h2>

<h3>Chủ đề 1. Máy tính và xã hội tri thức</h3>

<h4>1. Trí tuệ nhân tạo và ứng dụng</h4>

<h4>2. Trí tuệ nhân tạo trong khoa học và đời sống</h4>

<h3>Chủ đề 2. Mạng máy tính và internet</h3>

<h4>3. Một số thiết bị mạng thông dụng</h4>

<h4>4. Thiết bị mạng</h4>

</html>

5

6 of 29

2. Các thẻ định dạng trình bày văn bản

<html>

<title>ThayHueTNH</title>

<h1>Tin học 12</h1>

<h2>Phần chung</h2>

<h3>Chủ đề 1. Máy tính và xã hội tri thức</h3>

<h4>1. Trí tuệ nhân tạo và ứng dụng</h4>

<h4>2. Trí tuệ nhân tạo trong khoa học và đời sống</h4>

<h3>Chủ đề 2. Mạng máy tính và internet</h3>

<h4>3. Một số thiết bị mạng thông dụng</h4>

<h4>4. Thiết bị mạng</h4>

</html>

​

​

6

7 of 29

2. Các thẻ định dạng trình bày văn bản�b) Định dạng đoạn văn bản

7

8 of 29

2. Các thẻ định dạng trình bày văn bản�b) Định dạng đoạn văn bản

8

9 of 29

2. Các thẻ định dạng trình bày văn bản�b) Định dạng đoạn văn bản

9

Thẻ

Mô tả

<p> … </p>

Đoạn văn bản, có khoảng trống trước và sau đoạn

<div> … </div>

Khối văn bản (block), chứa nội dung bất kì giữa 2 thẻ

<span> … </span>

Khối văn bản bên trong (inline) với quy mô nhỏ

<br>

Xuống dòng

<hr>

Đường kẻ ngang

10 of 29

​

​

​

​

​

​

​

​

​

​

​

​

​

1. Trình duyệt hiển thị đoạn mã html sau thành mấy dòng? Em có nhận xét gì về khoảng cách giữa các dòng?

Trình duyệt sẽ hiển thị đoạn mã HTML trên thành 6 dòng. Thẻ <p> dùng để tách đoạn và thẻ <br> dùng để tách dòng. Do đó, khoảng cách giữa các dòng được qui định bởi thẻ <p> sẽ lớn hơn khoảng cách giữa các dòng do thẻ <br> tạo ra.

11 of 29

    • Thêm thẻ <hr> vào sau dòng đầu tiên

​

​

​

​

​

​

​

​

​

​

​

2. Chỉnh sửa đoạn mã html trong Ví dụ 1 để hiển thị thêm một đường kẻ ngang phân tách giữa dòng tiêu đề “Tin Học 12” và nội dung phía dưới.

12 of 29

3. Các thẻ định dạng phông chữ�a) Định dạng kiểu chữ

12

Ví dụ

Hiển thị trên trình duyệt

Đây <strong>là câu</strong> chuẩn

Đây là câu chuẩn

13 of 29

3. Các thẻ định dạng phông chữ�a) Định dạng kiểu chữ

13

14 of 29

3. Các thẻ định dạng phông chữ�b) Định dạng phông chữ

14

15 of 29

3. Các thẻ định dạng phông chữ�b) Định dạng phông chữ

15

<p style = “color : màu”> … </p>

16 of 29

3. Các thẻ định dạng phông chữ�b) Định dạng phông chữ

16

17 of 29

3. Các thẻ định dạng phông chữ�b) Định dạng phông chữ

17

<p style = “font-family : tên phông”> … </p>

18 of 29

3. Các thẻ định dạng phông chữ�b) Định dạng phông chữ

18

<p style = “font-size : cỡ”> … </p>

19 of 29

3. Các thẻ định dạng phông chữ�b) Định dạng phông chữ

19

<p style = “text-align : loại lề”> … </p>

20 of 29

3. Các thẻ định dạng phông chữ�b) Định dạng phông chữ

20

<p style = “text-decoration : loại gạch ngang”>

…

</p>

21 of 29

​

​

​

​

    • Giống nhau: cùng màu sắc và phông chữ
    • Khác nhau: kiểu 1 có kiểu chữ to hơn kiểu 2 và được gạch chân

​

​

​

​

​

Với cùng một đoạn văn bản, kết quả khi định dạng trong các trường hợp sau giống và khác nhau như thế nào?

22 of 29

​

​

​

​

    • Kiểu 1 có kiểu chữ to hơn kiểu 2 và được gạch chân

​

​

​

​

​

​

Với cùng một đoạn văn bản, kết quả khi định dạng trong các trường hợp sau giống và khác nhau như thế nào?

23 of 29

4. THỰC HÀNH ĐỊNH DẠNG VĂN BẢN VÀ PHÔNG CHỮ

Nhiệm vụ: Viết đoạn mã HTML để trình bày đoạn văn bản trong Hình 8.3

Bước 1. Phân tích thành phần của văn bản

Dòng tiêu đề

Dòng tiêu đề

Dòng tiêu đề

Đoạn văn

In đậm

In nghiêng

Xuống dòng

In đậm

Chỉ số dưới

Chỉ số trên

Màu đỏ

24 of 29

4. THỰC HÀNH ĐỊNH DẠNG VĂN BẢN VÀ PHÔNG CHỮ

Nhiệm vụ: Viết đoạn mã HTML để trình bày đoạn văn bản trong Hình 8.3

Dòng tiêu đề

Dòng tiêu đề

Dòng tiêu đề

Đoạn văn

In đậm

In nghiêng

Xuống dòng

In đậm

Chỉ số dưới

Chỉ số trên

Màu đỏ

Bước 2. Dùng thẻ HTML để định dạng văn bản

<h2>

<h3>

<h3>

<p>

<b>

<i>

<br>

<b>

<sub>

<sup>

<span style=“color:red”

25 of 29

Viết đoạn mã HTML để trình bày đoạn văn bản trong Hình 8.3

26 of 29

LUYỆN TẬP

    • Ý chính của câu là làm nổi bật sự khác nhau về ý nghĩa của 3 thẻ. Do vậy nên đặt thêm định dạng kiểu chữ hoặc chỉnh màu nổi bật cho các tên thẻ và hai từ “nội dung” và “in đậm”.

​

​

​

​

​

​

1. Hãy sửa lại phần tử sau để làm nổi bật ý chính của câu:

​

​

27 of 29

LUYỆN TẬP

​

​

​

​

​

​

​

​

​

2. Trình bày đoạn văn bản sau bằng mã HTML:

28 of 29

VẬN DỤNG

​

​

​

​

​

​

​

​

​

​

​

2. Hãy đưa ra cách định dạng một đoạn văn bản để được kết quả như sau:

29 of 29

THE END!

CÁM ƠN CÁC BẠN ĐÃ LẮNG NGHE!

29