Video giảng khoa học máy tính 12 chân trời bài F6: Dự án tạo trang web

Tóm lược nội dung

BÀI F6: DỰ ÁN TẠO TRANG WEB

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.

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

Trước khi vào bài học, cô mời các em suy nghĩ và hoàn thành yêu cầu dưới đây:

- GV cho HS nối tên một số thuộc tính của thẻ <img> với mô tả đúng của nó.

HOẠT ĐỘNG KHÁM PHÁ

Nội dung 1: Tạo trang web kỉ yếu lớp 12A với các thẻ HTML đã học

Các bước tạo trang web kỉ yếu lớp 12A với các thẻ HTML đã học

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

1. Trang chủ index.html

a) Bố cục chung

- Trang chủ index.html chứa bố cục dùng chung của các trang web liên quan và có thể có thêm phần nội dung giới thiệu về lớp.

- Tạo bảng bằng thẻ <table> để làm bố cục chung.

- Bảng gồm hai hàng:

+ Hàng 1: Tiêu đề kỉ yếu lớp.

+ Hàng 2: Chia thành hai cột, cột trái là thanh trình đơn và cột phải là nội dung ứng với lựa chọn từ thanh trình đơn.

- Đoạn mã HTML tạo bảng:

b) Cột trái của hàng 2

- Tạo bảng gồm ba hàng bằng thẻ <table> để tạo thanh trình đơn cho cột bên trái:

c) Cột phải của hàng 2

- Là nơi hiển thị nội dung của các trang web mỗi khi người dùng nhấp vào đường liên kết của thanh trình đơn ở cột trái.

- Tạo khung bằng thẻ <iframe> để hiển thị nội dung:

Trong đó, thuộc tính name của thẻ <iframe> phải trùng với thuộc tính target của các liên kết ở cột trái, cụ thể đều là iframe_noidung.

2. Các trang web gioithieu.html, hoatdong.html và thanhvienlop.html

- Trong trang web thanhvienlop.html:

+ Tạo danh sách lớp bằng thẻ <table>.

+ Thông tin chi tiết của mỗi thành viên được liên kết đến trang portfolio.html của thành viên đó.

- Ngoài cách dùng <iframe> như đề cập trên, còn có những cách làm khác:

+ Đầu tiên, tạo trang index.html, trong đó, cột phải hiển thị nội dung giới thiệu về lớp.

Không cần tạo thêm trang gioithieu.html.

+ Sau đó, sao chép trang index.html thành hoatdong.html và thanhvienlop.html nhằm giữ nguyên được bố cục chung, chỉ thay đổi nội dung ở cột phải.

……..

Nội dung video bài F6: Dự án tạo trang web 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.