Slide bài giảng Tin học ứng dụng 12 cánh diều bài 11: Mô hình hộp, bố cục trang web
Slide điện tử bài 11: Mô hình hộp, bố cục trang web. 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 môn Tin học ứng dụng 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 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?
Bài làm rút gọn:
Bố cục tương đồng: 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?
Bài làm rút gọn:
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.
Bài làm rút gọn:
/* 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.
Bài làm rút gọn:
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
Bài làm rút gọn:
B. 72px.
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>
Bài làm chi tiết:
a) Đúng.
b) Sai.
c) Sai.
d) Sai.
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
