Video 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

Chào mừng các em học sinh đã đến với bài học hôm nay!

Thông qua video này, các em sẽ nắm được các kiến thức và kỹ năng như sau:

- Sử dụng được các thẻ HTML để trình bày trang web.

- Định dạng văn bản, phông chữ, tạo liên kết, danh sách.

HOẠT ĐỘNG KHỞI ĐỘNG

Trước khi vào bài học, cô mời các em suy nghĩ trả lời câu hỏi Khởi động tr.73SGK: Trong Hình 1, mỗi dòng trên trang web được định nghĩa bằng thẻ nào trong số các thẻ sau: <h1>, <h2>, <p>, <hr>?

Hình 1. Kết xuất trang web khi sử dụng các thẻ <h1>, <h2>, <p>, <hr>

HOẠT ĐỘNG KHÁM PHÁ

Nội dung 1: Các thẻ định dạng cơ bản

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? HTML sử dụng thẻ nào để định dạng kích thước, màu sắc và kiểu chữ? HTML có những thẻ định dạng văn bản. nào?

Video trình bày nội dung: 

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

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

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

Nội dung 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?

Video trình bày nội dung: 

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

Nội dung 3: Thẻ tạo danh sách

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

Video trình bày nội dung: 

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

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

Nội dung 4: Thực hành

Em hãy nêu các bước tạo và định dạng trang web

Video trình bày nội dung: 

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

……..

Nội dung video bài F2:  Tạo và định dạng trang web với các thẻ HTML còn nhiều phần rất hấp dẫn và thú vị. Hãy cùng đăng kí để tham gia học bài và củng cố kiến thức thông qua hoạt động luyện tập và vận dụng trong video.