Giáo án Khoa học máy tính 12 chân trời Bài F2: Tạo và định dạng trang web với các thẻ HTML

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

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

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS hoạt động cá nhân và trả lời các câu hỏi:

+ HTML sử dụng thẻ nào để định dạng đề mục?

+ Các cấp độ đề mục được phân biệt như thế nào?

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 1a SGK tr.73 và thực hiện nhiệm vụ.  

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

-  HS trả lời câu hỏi và nhận xét lẫn nhau.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

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

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

- HTML sử dụng các thẻ <h1>,  <h2>, <h3>, <h4>, <h5> và <h6> để định nghĩa các đề mục của trang web theo từng cấp độ, trong đó:

+ <h1> là đề mục cấp cao nhất.

+ <h6> là đề mục cấp thấp nhất. 

+ Đề mục cấp cao hơn sẽ có kích thước chữ lớn hơn.

Ví dụ 1: Đoạn mã HTML sau minh hoạ các thẻ từ <h1> đến <h6>. Kết quả hiển thị như Hình 2.

Hình 2. Trình bày các cấp đề mục 
trong HTML

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

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS hoạt động cá nhân và trả lời câu hỏi:

+ HTML sử dụng thẻ nào để định dạng kích thước, màu sắc và kiểu chữ?

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 1b SGK tr.74 và thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- HS trả lời câu hỏi và nhận xét lẫn nhau.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

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

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

Ví dụ 2: Mã lệnh HTML sau định dạng nội dung “Đây là văn bản” với phông chữ Arial, cỡ chữ 3 và màu đỏ. Kết quả hiển thị như Hình 3.

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

Lưu ý: Từ phiên bản HTML5, thẻ <font> không còn được hỗ trợ. Vì vậy, để định dạng phông chữ em sẽ sử dụng CSS (Cascading Style Sheets). Nội dung về CSS sẽ được đề cập trong Bài F7.

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

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS hoạt động cá nhân và trả lời câu hỏi:

+ HTML có những thẻ định dạng văn bản. nào?

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.75 SGK:

Câu 1. Theo em, trong HTML có những thẻ nào dùng để định dạng đề mục?

Câu 2. Cho mã lệnh: 

Em hãy cho biết nội dung được kết xuất trên trang web.

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 1c SGK tr.74 – 75 và thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- HS trả lời câu hỏi và nhận xét lẫn nhau.

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.75 SGK:

Câu 1. HTML sử dụng các thẻ <h1>, <h2>, <h3>, <h4>, <h5> và <h6> dùng để định dạng đề mục.

Câu 2. Nội dung được kết xuất trên trang web: .

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV kết luận:          

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

• Định dạng đề mục: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

• Định dạng phông chữ: <font>.

• Định dạng văn bản: <strong>, <em>, <u>, <center>,…

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

- HTML có nhiều thẻ định dạng văn bản.

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

Ví dụ 3: Đoạn mã HTML dưới đây có kết quả như Hình 4.

Hình 4. Văn bản được định dạng

Lưu ý: Để thêm các kí tự đặc biệt như <, >, khoảng trắng,… em dùng các mã HTML tương ứng như: 

• &lt; thay cho kí tự <.

• &gt; thay cho kí tự >.

• &nbsp; thay cho khoảng trắng.

…

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi: 

+ Siêu liên kết được dùng để làm gì?

+ HTML sử dụng thẻ nào để tạo siêu liên kết?

+ Khi người dùng nháy chuột vào siêu liên kết, trình duyệt sẽ chuyển hướng đến địa chỉ nào?

+ Thẻ <a> có cú pháp như thế nào?

- GV giải thích cho HS hiểu về đoạn mã HTML trong Ví dụ 4.

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi hoạt động Làm tr.77 SGK:

Câu 1. Thẻ <a> có thể tạo được liên kết đến những loại tài nguyên nào?

Câu 2. Nếu thẻ <a> không được khai báo thuộc tính href thì người dùng có thể nháy chuột vào nội dung bên trong thẻ <a> này không? Tại sao? 

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 2 SGK tr.75 – 77 và thảo luận theo nhóm thực hiện nhiệm vụ.

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Hướng dẫn trả lời câu hỏi hoạt động Làm tr.77 SGK:

Câu 1. Thẻ <a> có thể tạo được liên kết đến:

+ Trang web khác.

+ Tệp bất kì: văn bản, âm thanh, hình ảnh,…

+ Địa chỉ Email.

+ Vị trí có thuộc tính id tương ứng trong trang hiện tại hoặc trang web khác.

Câu 2. Nếu thẻ <a> không được khai báo thuộc tính href thì người dùng không thể nháy chuột vào nội dung bên trong thẻ <a> vì không có thuộc tính href nên không thể tạo liên kết.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV kết luận:

• Để tạo siêu liên kết trong trang web, em sử dụng thẻ <a>. 

• Thuộc tính href của thẻ <a> để chỉ định địa chỉ sẽ liên kết đến.

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

- Siêu liên kết giúp truy cập nhanh đến nguồn tài nguyên bên ngoài như trang web,

email, tệp đa phương tiện hoặc truy cập nhanh đến một vị trí khác trong cùng trang web hiện tại.

- HTML sử dụng thẻ <a> và những thuộc tính liên quan như href và target để tạo siêu liên kết.

- Khi người dùng nháy chuột vào siêu liên kết, trình duyệt sẽ chuyển hướng đến địa chỉ được chỉ định trong thuộc tính href của thẻ <a>.

- Cú pháp thẻ <a>:

Trong đó:

+ Thuộc tính href chỉ định địa chỉ sẽ liên kết đến.

+ Thuộc tính target chỉ định nơi sẽ mở tài liệu đó, cụ thể:

• _self: Tài liệu được mở ngay trên cửa sổ hiện tại.

• _blank: Tài liệu được mở trên cửa sổ mới.

Ví dụ 4: Đoạn mã HTML sau minh hoạ cách tạo siêu liên kết. Kết quả tạo các liên kết trong trang web như Hình 5.

Hình 5. Các liên kết trong trang web

+ Thẻ <a> tại dòng (1) không có thuộc tính href nên không tạo liên kết.

+ Tại dòng (2), thẻ <a> không có thuộc tính target nên giá trị mặc định cho thuộc tính này sẽ là _self. 

Khi người dùng nháy chuột vào liên kết, trình duyệt sẽ chuyển đến trang web https://abc.xyz ngay trong cửa sổ trình duyệt hiện tại.

+ Tại dòng (3), thuộc tính target có giá trị là _blank. 

Khi người dùng nháy chuột vào liên kết, trình duyệt sẽ chuyển đến trang web https://internet.com trong cửa sổ mới.

+ Liên kết tại dòng (4) dẫn đến tệp baihoc.pdf trong thư mục tailieu được lưu cùng vị trí với tệp HTML của trang web này. 

Để liên kết đến tệp dữ liệu tại trang web khác, em có thể nhập đầy đủ đường dẫn đến tệp dữ liệu đó.

+ Dòng (5) tạo liên kết đến địa chỉ email abc@gmail.com. Khi người dùng nháy chuột vào liên kết, trình duyệt sẽ mở ứng dụng gửi nhận email của máy tính để người dùng soạn nội dung cần gửi đến địa chỉ email trên.

+ Với liên kết có giá trị của thuộc tính href là # như dòng (6), khi người dùng nháy chuột vào liên kết, trình duyệt sẽ không chuyển hướng đến một liên kết nào.

+ Tại dòng (7), khi người dùng nháy chuột vào liên kết, trình duyệt sẽ chuyển đến vị trí có thuộc tính id là dautrang như ở dòng (1) trong trang web. 

Các thành phần trong trang web đều có thể gán thêm thuộc tính id. Thuộc tính id dùng để định danh một phần tử HTML duy nhất trong trang web.

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

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

Bước 1: GV chuyển giao nhiệm vụ:

- GV giới thiệu về hai loại danh sách trong HTML.

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi:

+ Danh sách không có thứ tự dùng để làm gì và được áp dụng khi nào?

+ HTML sử dụng thẻ nào để tạo danh sách không có thứ tự?

Bước 2: HS thực hiện nhiệm vụ học tập: 

- HS tìm hiểu nội dung mục 3a SGK tr.77 và thảo luận theo nhóm thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

-  Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

……………

3. Thẻ tạo danh sách

Trong HTML, có hai loại danh sách: 

- Không có thứ tự.

- Có thứ tự.

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ể. 

- HTML sử dụng các 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ụ 5: Đoạn mã HTML sau minh hoạ danh sách các siêu liên kết không có thứ tự trong trang web. Kết quả hiển thị như Hình 6.

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

…………………….