Giải chi tiết tin học ứng dụng 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
Hướng dẫn giảI bài 1: Làm quen với ngôn ngữ đánh dấu siêu văn bản sách mới tin học ứng dụng 12 cánh diều. Lời giải chi tiết, chuẩn xác, dễ hiểu sẽ giúp các em hoàn thành tốt các bài tập trong chương trình học. Baivan.net giải chi tiết tất cả các bài tập trong sgk. Hi vọng sẽ trở thành người bạn đồng hành cùng các em trong suốt quá trình học tập.
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 chi tiết:
Có, có một ngôn ngữ chuyên dụng được sử dụng rộng rãi để tạo và thiết kế các trang web, đó là HTML (HyperText Markup Language). HTML là ngôn ngữ đánh dấu được sử dụng để xây dựng cấu trúc và định dạng nội dung trên trang web. Nó cho phép mô tả các phần tử, văn bản, hình ảnh, liên kết và các yếu tố khác trên một 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 chi tiết:
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 chi tiết:
<!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 chi tiết:
Câu đúng cú pháp trong các khai báo cấu trúc văn bản HTML là:
A. <html><head><title></title></head><body></body></html>
Lý do: Đúng cú pháp bắt đầu bằng thẻ `<html>` và kết thúc bằng thẻ `</html>`. Trong `<html>`, thẻ `<head>` nằm trước thẻ `<body>`. Trong `<head>`, có thẻ `<title>` để đặt tiêu đề của trang web. Trong `<body>`, các phần tử và nội dung của trang web được đặt.
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 chi tiết:
a) Đúng. Phần tử `<body>` được sử 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. Nội dung bên trong phần tử `<body>` bao gồm văn bản, hình ảnh, đường dẫn, biểu đồ, và các phần tử khác sẽ được hiển thị trực tiếp trên trang web.
b) Sai. Phần tử `<head>` không được sử dụng để khai báo thông tin về cấu trúc của trang web. Thay vào đó, nó được sử dụng để khai báo các thông tin meta, liên kết với các tệp CSS và JavaScript, tiêu đề trang (`<title>`), và các thông tin khác không hiển thị trực tiếp trong phần nội dung của trang web.
c) Sai. Phần tử `<title>` không được sử dụng để khai báo thông tin tác giả soạn trang web. Thay vào đó, nó được sử dụng để khai báo tiêu đề của trang web, tức là tiêu đề mà người dùng sẽ nhìn thấy trong thanh tiêu đề của trình duyệt.
d) Đúng. Phần tử `<html>` được sử dụng để khai báo cấu trúc và nội dung của trang web. Nó bao gồm toàn bộ nội dung HTML trên trang web, bao gồm cả phần tử `<head>` và `<body>`.
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 chi tiết:
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.
Giải tin học ứng dụng 12 cánh diều, Giải bài 1: Làm quen với ngôn ngữ đánh tin học ứng dụng 12 cánh diều , Giải tin học ứng dụng 12 cánh diều bài 1: Làm quen với ngôn ngữ đánh