Bài 4. Xây dựng phần thân và chân trang
Ở bài trước em đã dựng xong phần đầu trang với logo và tiêu đề. Bài này ta đổ nội dung chính vào phần thân (main) của dự án, chia thân trang thành các khu vực gọn gàng, rồi đóng trang bằng một chân trang (footer) đàng hoàng.
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài E3. Tạo văn bản, chèn hình ảnh và tạo chân trangtr. 64
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề E(ICT) · Bài 4. Tạo nội dung văn bản cho trang webtr. 140
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài E4. Sử dụng Content Blocks, Button, Dividertr. 72
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề E(ICT) · Bài 5. Tạo nội dung hình ảnh cho trang webtr. 145
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 25. Xây dựng phần thân và chân trang webtr. 139
Bắt đầu bằng một hình dung
Nhóm của Lan đang làm trang web giới thiệu câu lạc bộ Sách của trường cho dự án cuối kì. Tuần trước cả nhóm đã dựng xong dải phía trên: có ảnh biểu tượng cuốn sách mở và dòng tên câu lạc bộ. Nhìn cũng ra dáng một trang web.
Nhưng khi Lan mở lại tệp để làm tiếp, bạn khựng lại. Dưới cái tên câu lạc bộ là một khoảng trắng mênh mông. Bao nhiêu thứ muốn đưa lên: đoạn giới thiệu câu lạc bộ, tấm ảnh buổi đọc sách cuối tuần, danh sách các hoạt động sắp tới, rồi cả số điện thoại liên hệ và dòng ghi tên nhóm làm trang. Lan gõ đại tất cả xuống, chữ với ảnh dồn thành một cục dính chặt, đọc rối cả mắt.
Bạn Huy trong nhóm góp ý: 'Hay mình chia trang ra từng khu như xếp đồ vào ngăn tủ ấy. Phần thân để mấy khối nội dung chính, mỗi khối một chuyện. Còn mấy dòng liên hệ với bản quyền thì gom hết xuống đáy trang cho gọn.' Ý tưởng chia khu và đóng đáy trang đó chính là việc ta làm hôm nay.
Nội dung bài học
- 1) Phần thân trang chứa nội dung chính
- 2) Chia thân trang thành các khu vực
- 3) Chân trang khép lại trang web
- 4) Áp CSS cho trang gọn gàng
Tóm tắt lý thuyết cần nhớ
- Nội dung chính của trang đặt trong thân trang (
main): đoạn văn, hình ảnh, danh sách - Chia thân trang thành các khu vực bằng
sectionhoặcdiv, mỗi khu một chủ đề, mở đầu bằng tiêu đề - Chân trang (
footer) khép lại trang, chứa liên hệ và dòng bản quyền (©), không phải nội dung chính - Dùng CSS như
padding,margin,background-color,text-alignđể trang thoáng và gọn gàng
Thuật ngữ tiếng Anh trong bài
| Tiếng Anh | Đọc là | Nghĩa |
|---|---|---|
| div | đíp | thẻ chia khối Giống một cái hộp trong suốt để gom các thứ trên trang web lại thành một nhóm, cho dễ sắp xếp. |
| copyright | CÓP-pi-rai | bản quyền Quyền của người tạo ra sách, nhạc, ảnh, phần mềm... |
| background-color | béc-grao cơ-lơ | màu nền Thuộc tính CSS để tô màu nền phía sau chữ và hình. |
| main | mên | phần thân trang Thẻ bọc nội dung chính của trang, tức phần người xem tìm đến để đọc. |
| section | XÉC-sần | khu vực nội dung Thẻ chia thân trang thành từng khu, mỗi khu một chủ đề và mở đầu bằng một tiêu đề. |
| footer | PHÚT-tơ | chân trang Dải dưới cùng khép lại trang, chứa thông tin liên hệ, dòng bản quyền và vài liên kết phụ. |
Câu hỏi trắc nghiệm có đáp án
Mấy câu mẫu để bạn tự kiểm tra ngay. Trong ứng dụng, bài này có đủ 22 câu, chấm điểm tự động và giải thích từng câu sai.
headermainfootertitle
main, đó là phần thân trang. header là phần đầu trang chứa logo và tiêu đề. footer là chân trang chứa thông tin phụ như liên hệ và bản quyền. title chỉ đặt tên hiện trên thanh tiêu đề của trình duyệt, không chứa nội dung nhìn thấy trong trang.footer) của một trang web?- Đoạn văn giới thiệu chi tiết về câu lạc bộ
- Bộ ảnh minh hoạ các buổi hoạt động
- Dòng bản quyền và thông tin liên hệ
- Tiêu đề lớn và logo của trang
main. Tiêu đề lớn và logo là dấu hiệu nhận diện, thuộc phần đầu trang header chứ không phải chân trang.- Gõ tất cả nội dung liền nhau, không bọc thẻ nào cho gọn mã
- Bọc mỗi mục trong một thẻ
sectionriêng, mỗi mục mở đầu bằng tiêu đề - Đặt cả ba mục vào trong một thẻ
footerchung ở cuối trang - Dùng một thẻ
imgđể bao lấy cả ba mục cho có hình minh hoạ
section và mở đầu bằng tiêu đề h2 giúp trang mạch lạc, dễ đọc và dễ sửa từng khu. Gõ liền nhau khiến trang rối. footer là chân trang cho thông tin phụ, không dùng để chứa các mục nội dung chính. Thẻ img chỉ để chèn một hình ảnh, không dùng để bao các mục nội dung.- a)Phần thân trang chứa nội dung chính như đoạn văn, hình ảnh và danh sách.Đúng
- b)Một trang web thường gồm ba mảng theo chiều dọc: đầu trang, thân trang và chân trang.Đúng
- c)Nội dung chính của trang nên đặt trong thẻ
footer.Sai - d)Chia thân trang thành các khu giúp trang mạch lạc và dễ sửa riêng từng khu.Đúng
- (a) Đúng - thân trang là nơi đặt nội dung chính gồm đoạn văn, hình ảnh, danh sách.
- (b) Đúng - trang thường có ba mảng đầu, thân, chân xếp từ trên xuống.
- (c) Sai - nội dung chính đặt trong
main, cònfooterchỉ dành cho thông tin phụ như liên hệ và bản quyền. - (d) Đúng - chia khu giúp trang gọn, muốn sửa khu nào chỉ tìm đúng khu đó.
Học trọn bài này trong ứng dụng
Bài giảng đầy đủ, 22 câu luyện tập chấm tự động, thi thử đúng cấu trúc đề tốt nghiệp (24 trắc nghiệm + 4 Đúng/Sai), bài thực hành máy tự chấm và gia sư AI giải thích chỗ sai.
Phần học miễn phí, không cần tạo tài khoản.
Bài liên quan - Ứng dụng tin học & Thiết kế web
Cùng mạch kiến thức với bài này, học nối tiếp cho chắc phần lí thuyết.