Slide bài giảng Khoa học máy tính 12 Chân trời bài F1: HTML và trang web
Slide điện tử bài F1: HTML và trang web. Trình bày với các hiệu ứng hiện đại, hấp dẫn. Giúp học sinh hứng thú học bài. Học nhanh, nhớ lâu. Có tài liệu này, hiệu quả học tập của môn Khoa học máy tính 12 Chân trời sáng tạo sẽ khác biệt
Bạn chưa đủ điều kiện để xem được slide bài này. => Xem slide bài mẫu
Tóm lược nội dung
BÀI F1: HTML VÀ TRANG WEB
A. KHỞI ĐỘNG
HS nghiên cứu nội dung hoạt động Khởi động SGK trang 67, 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. Giới thiệu ngôn ngữ HTML
HTML là gì?Hiện nay, phiên bản HTML nào đang được sử dụng phổ biến nhất? Một trang web bao gồm những thành phần nào?Mỗi phần tử HTML được thể hiện như thế nào?
Nội dung ghi nhớ:
- HTML là ngôn ngữ đánh dấu được phát triển bởi Tim Berners-Lee, Robert Cailliau và các cộng sự vào năm 1989, dùng để trình bày cấu trúc, nội dung và hình thức của trang web.
- Hiện nay, HTML5 là phiên bản thông dụng, giúp tạo ra trang web có tính tương tác cao và giúp hiển thị trang web trên các thiết bị thông minh.
- Thành phần của một trang web bao gồm văn bản, hình ảnh, âm thanh, video và các nội dung khác đều được định dạng bằng các phần tử HTML tương ứng.
- Mỗi phần tử HTML được thể hiện bằng một thẻ (tag) và có thể đính kèm các thuộc tính (attribute).
- Khi người dùng truy cập trang web, trình duyệt sẽ tải xuống mã HTML tương ứng và sử dụng mã này để kết xuất nội dung, hình thức của trang web.
- Các trình duyệt phổ biến hiện nay như Microsoft Edge, Google Chrome, Mozilla Firefox, Safari,... đều có hỗ trợ ngôn ngữ HTML.
2. Cấu trúc, nội dung trang web và các phần tử HTML
Em hãy quan sát Hình 3 SGK tr.69 và trình bày cấu trúc, nội dung của một trang web cơ bản được viết bằng ngôn ngữ HTML.
Nội dung ghi nhớ:
Nội dung trang web viết bằng ngôn ngữ HTML được đặt trong cặp thẻ <html></html>.
Phần mở đầu của trang web được đặt trong cặp thẻ <head></head>.
Phần nội dung chính của trang web được đặt trong cặp thẻ <body></body>.
Ngoài tên thẻ, mỗi phần tử còn có thể có thêm thuộc tính để định dạng nội dung.
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:
| Câu 1 | Câu 2 | Câu 3 | Câu 4 | Câu 5 |
| C | C | D | B | A |
Câu 1.
a. Đ
b. S
c. S
d. Đ
D. HOẠT ĐỘNG VẬN DỤNG
Câu 1. Thực hiện hiệu chỉnh trang web portfolio.html trong các ví dụ của bài học để giới thiệu vài thông tin của bản thân. Trong đó, sử dụng các thẻ <h1> và <p>. Hình 8 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.
Hình 8. Trang web portfolio.html sau khi hoàn thành
Câu 2. Em hãy sử dụng Visual Studio Code để tạo trang web index.html giới thiệu ngắn về lớp em, trong đó sử dụng những thẻ đã học để định dạng cho phần nội dung văn bản.
Câu 3. Em hãy tìm hiểu thêm một số thuộc tính khác của thẻ <body> như background-color, text-decoration, margin-left, margin-top.
Câu 4. Ngoài thẻ <meta> và <title>, hãy kể tên vài thẻ khác có thể có trong cặp thẻ <head></head>.
Slide bài giảng lớp 12 cánh diều
Slide bài giảng lớp 12 chân trời sáng tạo
Slide bài giảng lớp 12 kết nối tri thức
