Đáp án Khoa học máy tính 12 cánh diều bài 11: Mô hình hộp, bố cục trang web

File đáp án Tin học 12 - Khoa học máy tính cánh diều bài 11: Mô hình hộp, bố cục trang web. Toàn bộ câu hỏi, bài tập ở trong bài học đều có đáp án. Tài liệu dạng file word, tải về dễ dàng. File đáp án này giúp kiểm tra nhanh kết quả. Chỉ có đáp án nên giúp học sinh tư duy, tránh học vẹt.

BÀI 11. MÔ HÌNH HỘP, BỐ CỤC TRANG WEB

KHỞI ĐỘNG

Em hãy truy cập trang chủ của các website: https://moet.gov.vn, https://tienphong.vn. Theo em, bố cục của hai trang web này có giống nhau không?

Giải chi tiết:

Bố cục chung của hai trang web có một số điểm tương đồng như: có đầy đủ các phần header, main content, sidebar, footer. Tuy nhiên, cũng có một số điểm khác biệt về vị trí các phần, kiểu chữ, màu sắc và nội dung.

1. MÔ HÌNH HỘP TRONG TRÌNH BÀY PHẦN TỬ HTML

2. HIỂN THỊ PHẦN TỬ THEO KHỐI, THEO DÒNG

HOẠT ĐỘNG

Theo em, trên một dòng của màn hình trình duyệt web có thể hiện thị nhiều phần tử HTML được không?

Giải chi tiết:

Trong một dòng của màn hình trình duyệt web, thường chỉ có thể hiển thị một phần tử HTML duy nhất. Mỗi phần tử HTML, như đoạn văn bản, hình ảnh, liên kết, hoặc các phần tử khác, thường chiếm một dòng riêng trên trình duyệt web. Tuy nhiên, ta có thể sử dụng các phần tử inline để hiển thị nhiều phần tử trên cùng một dòng, nhưng điều này thường phụ thuộc vào cách bạn thiết kế và định dạng nội dung của mình.

3. BỐ CỤC TRANG WEB

LUYỆN TẬP

Em hãy khai báo thêm các quy tắc định dạng cho trang web "Bai10-NV1.html" để: nội dung phần tử body có khoảng cách lề 30 pixel; phần tử hơ có đường viền tô liền nét (solid), khoảng cách vùng đệm là 20 pixel.

Giải chi tiết:

/* Trong tệp style.css */

/* Định dạng nội dung phần tử body */

body {

    margin: 30px;

}

/* Định dạng phần tử hơ */

h1 {

    border: 1px solid black; /* đường viền tô liền nét */

    padding: 20px; /* khoảng cách vùng đệm */

}

Sau đó, cần thêm tham chiếu đến tệp CSS này vào phần tử <head> của tệp "Bai10-NV1.html" như sau:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <!-- Nội dung của trang -->

</body>

</html>

VẬN DỤNG

Em hãy sử dụng phần tử div kết hợp với định dạng CSS để tách trang web Bai 10-NV1.html thành hai phần: phần đầu trang và phần nội dung. Phần đầu trang là tiêu đề “Đóng góp ý kiến cho thư viện của nhà trường", phần nội dung là các thông tin còn lại. Tạo màu nền khác nhau cho hai phần này.

Giải chi tiết:

Trong tệp CSS (ví dụ: style.css):

/* Định dạng phần đầu trang */

.header {

    background-color: lightblue; /* Màu nền cho phần đầu trang */

    padding: 20px;

}

/* Định dạng phần nội dung */

.content {

    background-color: lightgrey; /* Màu nền cho phần nội dung */

    padding: 20px;

}

Trong tệp HTML (Bai10-NV1.html):

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <!-- Phần đầu trang -->

    <div class="header">

        <h1>Đóng góp ý kiến cho thư viện của nhà trường</h1>

    </div>

    <!-- Phần nội dung -->

    <div class="content">

        <!-- Thêm nội dung của trang web tại đây -->

    </div>

</body>

</html>

TỰ KIỂM TRA

Câu 1: Cho khai báo định dạng sau: p{height: 50px; padding: 5px; border: 2px solid; margin: 4px;}. Khi đó chiều cao của phần tử p tính theo pixel là bao nhiêu?

A. 60px

B. 72px

C. 54px

D. 64px

Giải chi tiết:

Tổng chiều cao = Chiều cao + Vùng đệm + Đường viền + Lề = 50px + 10px + 4px + 8px = 72px

Vậy, đáp án là B. 72px.

-----------------------------------

------------------- Còn tiếp -------------------

=> Giáo án Khoa học máy tính 12 Cánh diều bài 11: Mô hình hộp, bố cục trang web

Thông tin tải tài liệu:

Phía trên chỉ là 1 phần, tài liệu khi tải về là file word, có nhiều hơn + đầy đủ đáp án. Xem và tải: File word đáp án Khoa học máy tính 12 cánh diều - Tại đây

Tài liệu khác

Tài liệu của bạn

Tài liệu mới cập nhật

Tài liệu môn khác

Chat hỗ trợ
Chat ngay