Slide bài giảng Khoa học máy tính 12 Cánh diều bài 1: Làm quen với ngôn ngữ đánh dấu siêu văn bản
Slide điện tử bài 1: Làm quen với ngôn ngữ đánh dấu siêu văn bản. 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 học môn Khoa học máy tính 12 Cánh diều 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 1. LÀM QUEN VỚI NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN
KHỞI ĐỘNG
Theo em, có ngôn ngữ chuyên dụng dùng để tạo trang web không?
Bài làm rút gọn:
Có ngôn ngữ chuyên dụng dùng để tạo trang web.
1. NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN
Hoạt động: Em hãy cho biết các thành phần trong trang chủ của website minh hoạ ở Hình 1.
Bài làm rút gọn:
Hình 1 là một hình ảnh mô tả trang chủ của một trang web. Bao gồm các thành phần sau: tiêu đề, menu điều hướng, banner/hình ảnh nền, nội dung chính, các phần tử giao diện, sidebar và footer.
2. CẤU TRÚC CỦA MỘT VĂN BẢN HTML
3. THỰC HÀNH TẠO TRANG WEB ĐƠN GIẢN
VẬN DỤNG
Hãy truy cập website trường em và cho biết cấu trúc văn bản HTML của trang chủ website này.
Bài làm rút gọn:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trường Đại học ABC</title>
</head>
<body>
<header>
<h1>Trường Đại học ABC</h1>
<nav>
<ul>
<li><a href="index.html">Trang chủ</a></li>
<li><a href="gioi-thieu.html">Giới thiệu</a></li>
<li><a href="khoa-hoc.html">Khóa học</a></li>
<li><a href="lien-he.html">Liên hệ</a></li>
</ul>
</nav>
</header>
<section>
<h2>Giới thiệu về Trường Đại học ABC</h2>
<p>Chào mừng bạn đến với Trường Đại học ABC, một cơ sở giáo dục hàng đầu. Chúng tôi cung cấp một loạt các chương trình và khóa học để giúp sinh viên đạt được mục tiêu học tập và nghề nghiệp của mình.</p>
</section>
<section>
<h2>Các khóa học nổi bật</h2>
<ul>
<li>Khoa học Máy tính</li>
<li>Quản trị Kinh doanh</li>
<li>Kỹ thuật</li>
</ul>
</section>
<footer>
<p>© 2024 Trường Đại học ABC. All rights reserved.</p>
</footer>
</body>
</html>
TỰ KIỂM TRA
Câu 1: Trong các khai báo cấu trúc văn bản HTML sau, khai báo nào đúng cú pháp?
A. <html><head><title></title></head><body></body></html>
B. <html><head></head><body><title></title></body></html>
C. <html><head><title><body></body></title></head></html>
D. <html><body><title><head></head></title></body></html>
Bài làm rút gọn:
A. <html><head><title></title></head><body></body></html>
Câu 2: Mỗi phát biểu sau đây về mục đích sử dụng của các phần tử là đúng hay sai?
a) Phần tử body dùng để khai báo phần nội dung sẽ hiển thị trên màn hình cửa sổ trình duyệt web.
b) Phần tử head dùng để khai báo thông tin về cấu trúc của trang web.
c) Phần tử title dùng để khai báo tiêu đề và thông tin tác giả soạn trang web.
d) Phần tử html để khai báo cấu trúc và nội dung của trang web.
Bài làm rút gọn:
a) Đúng.
b) Sai.
c) Sai.
d) Đúng.
Câu 3: Dưới đây là văn bản HTML do bạn Thiên Phúc soạn để tạo trang web nhưng có một số thẻ bị viết sai cú pháp. Em hãy tìm các lỗi cú pháp giúp Thiên Phúc.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title> Trang web của Thiên Phúc
</head>
<body>
</p> Thiên Phúc học tạo trang web. <p>
<body/>
</html>
Bài làm rút gọn:
Dưới đây là văn bản HTML được sửa lại để sửa các lỗi cú pháp:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trang web của Thiên Phúc</title>
</head>
<body>
<p>Thiên Phúc học tạo trang web.</p>
</body>
</html>
Các lỗi cú pháp đã được sửa như sau:
1. Thẻ `<meta>` không cần thẻ đóng (`</meta>`). Sửa thành `<meta charset="utf-8">`.
2. Tiêu đề trang `<title>` thiếu dấu đóng ngoặc nhọn (`</title>`).
3. Thẻ đóng `</p>` bị đặt sai chỗ, nên sửa thành `<p>` trước nội dung và `</p>` sau nội dung.
4. Thẻ đóng `</body>` nên sử dụng dấu gạch chéo ngược (`</body>`), không phải `<body/>`.
Sau khi sửa lỗi cú pháp, văn bản HTML đã đúng cú pháp và có thể sử dụng để tạo trang web.
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
