Với giải bài tập Tin học 12 Bài 11: Mô hình hộp, bố cục trang web sách Cánh diều hay nhất, ngắn gọn giúp học sinh dễ dàng làm bài tập & trả lời câu hỏi Tin 12 Bài 11.

Giải Tin học 12 Cánh diều Bài 11: Mô hình hộp, bố cục trang web

Em hãy truy cập trang chủ của các website: http:/moet.gov.vn, htttp://tienphong.vn

Giải Tin học 12 Bài 11: Mô hình hộp, bố cục trang web - Cánh diều

Khởi động trang 83 Tin học 12: Em hãy truy cập trang chủ của các website: http:/moet.gov.vn, htttp://tienphong.vn. Theo em, bố cục của hai trang web này có giống nhau không?

Lời giải:

- Bố cục của 2 trang web này giống nhau: đều có menu ngang, bố cục theo 3 cột dọc.

Lời giải bài tập Tin học 12 Bài 11: Mô hình hộp, bố cục trang web hay khác:

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

Giải Tin học 12 Bài 11: Mô hình hộp, bố cục trang web - Cánh diều

Hoạt động trang 84 Tin học 12: 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?

Lời giải:

Trên một dòng của màn hình trình duyệt web không thể thể hiện thị nhiều phần tử HTML được. Vì theo mặc định, mỗi phần tử HTML sẽ được xác định kiểu hiện thị theo khối hoặc theo dòng. Với cách hiển thị theo khối, mỗi phần tử được hiển thị trên một dòng mới. Ngược lại, với cách hiển thị theo dòng, nhiều phần tử có thể được hiển thị trên cùng một dòng.

Lời giải bài tập Tin học 12 Bài 11: Mô hình hộp, bố cục trang web hay khác:

Em hãy khai báo thêm các quy tắc định dạng cho trang web Bài10-NV1.html

Giải Tin học 12 Bài 11: Mô hình hộp, bố cục trang web - Cánh diều

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

Lời giải:

Bước 1. Tạo tệp “Bài 10-NV1.css”

Mở phần mềm Sublime Text.

Tạo tệp mới và ghi lưu với tên Bài10-NV1.css.

Bước 2. Khai báo các quy tắc định dạng CSS như sau:

.blue {coler: steelblue;}

.red {coler: darkred;}

.orangered {font-family: “verdana”; font-size:25px, color: orangered:}

input.yellow {background-color: yellow; } input.blue {background-color: blue; color: white;}

P{margin: 30px;}

p.custom-boder {padding: 20px; boder-style:solid;}

Bước 3. Ghi lưu tệp.

Lời giải bài tập Tin học 12 Bài 11: Mô hình hộp, bố cục trang web hay khác:

Em hãy sử dụng phần mềm div kết hợp với định dạng CSS để tách trang web

Giải Tin học 12 Bài 11: Mô hình hộp, bố cục trang web - Cánh diều

Vận dụng trang 87 Tin học 12: Em hãy sử dụng phần mềm div kết hợp với định dạng CSS để tách trang web Bài 10-NV1.html thành 2 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 2 phần này.

Lời giải:

Code như sau:

Kết quả:

Lời giải bài tập Tin học 12 Bài 11: Mô hình hộp, bố cục trang web hay khác:

Cho khai báo định dạng sau: p{height: 50 px; padding:5px; border: 2px solid; margin: 4px;}

Giải Tin học 12 Bài 11: Mô hình hộp, bố cục trang web - Cánh diều

Câu 1 trang 87 Tin học 12: Cho khai báo định dạng sau: p{height: 50 px; 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

Lời giải:

Đáp án đúng là: C. 54px

Lời giải bài tập Tin học 12 Bài 11: Mô hình hộp, bố cục trang web hay khác:

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

Giải Tin học 12 Bài 11: Mô hình hộp, bố cục trang web - Cánh diều

Câu 2 trang 87 Tin học 12: 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à dú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:

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:

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:

Lời giải:

a) Sai

b) Sai

c) Sai

d) Đúng

Lời giải bài tập Tin học 12 Bài 11: Mô hình hộp, bố cục trang web hay khác: