Tin họcLớp 12Phần 4. Chủ đề 4 · Giải quyết vấn đề với sự trợ giúp của máy tính · Chung

Bài 7. HTML và cấu trúc trang web

Mục tiêu bài học

Giải thích và vận dụng nội dung html và cấu trúc trang web qua dữ kiện cụ thể.
Tạo hoặc đánh giá sản phẩm, nêu điều kiện đúng và kiểm tra kết quả bằng bằng chứng.

Bài giảng

Hiểu cách hoạt động

HTML mô tả cấu trúc và ý nghĩa nội dung trang web bằng phần tử và thuộc tính, không phải ngôn ngữ lập trình tạo thuật toán. Phần tử thường gồm thẻ mở, nội dung và thẻ đóng; một số phần tử rỗng như meta, br, img không có thẻ đóng. Tài liệu có khai báo doctype, phần tử html, head chứa siêu dữ liệu và body chứa nội dung chính hiển thị. title đặt tên thẻ trình duyệt, không tự tạo tiêu đề trong body; h1 là tiêu đề nội dung cấp cao. Lưu tệp .html bằng văn bản thuần UTF-8, mở bằng trình duyệt; không đổi đuôi một tài liệu định dạng thành HTML rồi cho là đã chuyển cấu trúc.

Làm và tự kiểm tra

Mã mẫu tự biên soạn; lưu UTF-8 theo tên tệp trong nhiệm vụ.

<!doctype html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Vườn hạt của lớp</title>
</head>
<body>
  <h1>Vườn hạt</h1>
  <p>Hạt đậu cần nước vừa đủ.</p>
</body>
</html>

Kết quả suy ra từ cấu trúc mã: thẻ trình duyệt tên “Vườn hạt của lớp”; vùng trang có h1 “Vườn hạt” và một đoạn về hạt đậu. Không coi mô tả này là ảnh chụp hay kết quả đã thao tác trên máy người học.

Ghi nhớ

HTML mô tả cấu trúc và ý nghĩa nội dung trang web bằng phần tử và thuộc tính, không phải ngôn ngữ lập trình tạo thuật toán.

Bài tập

Đã đúng 0/6 câu

Câu 1Mức 2Trắc nghiệm 1 đáp án
Phần nào chứa siêu dữ liệu và title của tài liệu HTML?
Câu 2Mức 2Trắc nghiệm 1 đáp án
Phần tử nào là rỗng trong các lựa chọn?
Câu 3Mức 2Đúng / Sai
title trong head tự thay thế một h1 trên trang.
Câu 4Mức 2Sắp xếp thứ tự
Xếp quy trình tạo tệp HTML đầu tiên.
Sắp xếp các mục theo thứ tự đúng (kéo thả hoặc dùng nút mũi tên).
1. 1Nhập cấu trúc và nội dung HTML
2. 2Lưu vuon-hat.html bằng UTF-8
3. 3Mở trình soạn thảo văn bản thuần
4. 4Mở bằng trình duyệt và đối chiếu nội dung
Câu 5Mức 2Trả lời ngắn
Trong đoạn <body><h1>Vườn</h1><p>Một</p><p>Hai</p></body> có bao nhiêu phần tử p?
Câu 6Mức 2Trắc nghiệm 1 đáp án
Thuộc tính lang="vi" trên html hỗ trợ điều gì?
Câu 7Mức 3Tự luận
Tạo vuon-hat.html bằng UTF-8: tên thẻ “Vườn hạt của lớp”, h1 “Vườn hạt”, đoạn “Hạt đậu cần nước vừa đủ.” Nộp mã và mô tả kết quả.
0 từ
0/10 ảnh
Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.
Vẽ bài làm
Ảnh bài làm
Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay
Câu 8Mức 3Tự luận
Tệp lưu thành vuon-hat.html.txt và trình duyệt hiện nguyên thẻ. Nêu cách sửa không xóa dữ liệu.
0 từ
0/10 ảnh
Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.
Vẽ bài làm
Ảnh bài làm
Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay