Giải 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

Giải bài 11: Mô hình hộp, bố cục trang web sách Khoa học máy tính 12 cánh diều. Phần đáp án chuẩn, hướng dẫn giải chi tiết cho từng bài tập có trong chương trình học của sách giáo khoa. Hi vọng, các em học sinh hiểu và nắm vững kiến thức môn Tin học 12 Khoa học máy tính chương trình mới

B. Bài tập và hướng dẫn giải

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?

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?

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.

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.

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

Câu 2: Cần thiết lập hiển thị theo dòng hoặc theo khối để tạo trang web như ở Hình 7, mỗi phát biểu dưới đây là đúng hay sai? 

a) Theo mặc định, các phần tử input được hiển thị theo khối nên khi khai báo các phần tử input trong văn bản HTML không cần xác định thuộc tính display

mà các điều khiển trên biểu mẫu vẫn hiển thị đúng như yêu cầu.

 b) Để hiển thị như yêu cầu cần định dạng các label được hiển thị theo khối bằng khai báo định dạng label {display: block}. Phần body của văn bản HTML khai báo như sau: 

<body> <form> 

<label>Họ tên<input type="text" name="txtTen"></label>

<label>Địa chi<input type="text" name="txtDiachi"></label>
<input type="submit" name="cmd" value="Đồng ý">

<input type="submit" name="cmd" value="Huỷ bỏ">

</form></body>

c) Để hiển thị như yêu cầu cần định dạng các label được hiển thị theo khối bằng khai báo label {display: block}. Phần body của văn bản HTML khai báo như sau:

<body> <form>

<label>Họ tên</label><input type="text" name="txtTen">

<label>Địa chỉ</label><input type="text" name="txtDiachi">

<input type="submit" name="cmd" value="Đồng ý">

<input type="submit" name="cmd" value="Huỷ bỏ">

</form></body>

d) Theo mặc định, các phần tử input được hiển thị theo dòng nên cần khai báo định dạng hiển thị theo khối cho hai ô text nhập dữ liệu bl {display: block}. Phần body của văn bản HTML khai báo như sau:

<body> <form>

<label>Họ tên<input class="bl" type="text" name="txtTen"></label>

<label>Địa chỉ<input class="bl" type="text" name="txtDiachi"></label>

<input type="submit" name="cmd" value="Đồng ý">

<input type="submit" name="cmd" value="Huỷ bỏ">

</form></body>

Nội dung quan tâm khác

Thêm kiến thức môn học

Từ khóa tìm kiếm:

Giải SGK Khoa học máy tính 12 cánh diều, Giải chi tiết Khoa học máy tính 12 cánh diều mới, Giải Khoa học máy tính 12 cánh diều bài 11: Mô hình hộp, bố cục trang

Bình luận

Giải bài tập những môn khác