Slide bài giảng 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

Tóm lược nội dung

BÀI F2: TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THẺ HTML

A. KHỞI ĐỘNG

HS nghiên cứu nội dung hoạt động Khởi động SGK trang 73, suy nghĩ trả lời câu hỏi theo kiến thức của mình.

B. HOẠT ĐỘNG HÌNH THÀNH KIẾN THỨC

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

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

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?

Nội dung ghi nhớ:

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. 

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

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

Nội dung ghi nhớ:

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

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

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

Nội dung ghi nhớ:

Đị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>,…

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

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?

Nội dung ghi nhớ:

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

3. Thẻ tạo danh sách

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

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

Nội dung ghi nhớ:

Để tạo danh sách không có thứ tự, em sử dụng thẻ <ul> và thẻ <li>.

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

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

Nội dung ghi nhớ:

Để tạo danh sách có thứ tự, em sử dụng thẻ <ol> và thẻ <li> -> Có thể tạo các danh sách lồng nhau, danh sách con được đặt trong thẻ <li> của danh sách cha. 

THỰC HÀNH

Các bước tạo và định dạng trang web

Nội dung ghi nhớ:

 Bước 1: Tạo trang web thanhvienlop.html - Dùng các thẻ <h1>, <h2>, <p> để tạo nội dung; Dùng thuộc tính style để định dạng màu chữ; Dùng thẻ <strong> hoặc <b> để in đậm chữ.

+ Bước 2: Tạo hai trang web giới thiệu về lớp trưởng và lớp phó, đặt tên lần lượt là loptruong.html và loppho.html.

+ Bước 3: Tạo liên kết từ trang web thanhvienlop.html đến hai trang web loptruong.html và loppho.html

C. HOẠT ĐỘNG LUYỆN TẬP

GV giao nhiệm vụ cho HS, HS hoàn thành phiếu bài tập. 

Gợi ý đáp án:

A. Trắc nghiệm

B. Đúng/sai

Câu 1.

a. S; b. Đ; c. S; d. S

C. Tự luận 

Câu 1. Các thẻ <h1>, <h2>,..., <h6> dùng để tạo đề mục từ cấp 1 đến cấp 6. Mặc định, đề mục cấp 1 có kích thước chữ lớn nhất.

Câu 2. Cụ thể từng bước tạo siêu liên kết như sau:

+ Viết thẻ <a>. Trong thẻ <a>, thực hiện:

• Viết href="đường dẫn đến trang web khác".
• Viết tiếp target="_blank" để mở trang web trong cửa sổ mới của trình duyệt.

Câu 3. Trang web được kết xuất như sau…

 D. HOẠT ĐỘNG VẬN DỤNG

Hiện nay, thiết bị thông minh đã được hỗ trợ phần mềm để có thể truyền dữ liệu đến máy in dùng chung trong mạng máy tính. Em hãy kể tên 4 phần mềm có thể truyền dữ liệu từ thiết bị thông minh sử dụng hệ điều hành Android và iOS đến máy in dùng chung mạng máy tính.