Sản phẩm thứ ba: Bài trình chiếu giới thiệu kết quả thực hiện dự án (xem gợi ý ở Bảng 3).
Bài 12. Dự án nhỏ: Tạo trang web báo tường
Thực hành 3 (SGK Cánh Diều - Trang 90)
Thảo luận (1)
Thực hành 2 (SGK Cánh Diều - Trang 89)
- Sản phẩm thứ hai: Tệp dữ liệu dạng *.css khai báo các quy tắc định dạng CSS để áp dụng kiểu trình bày cho trang web (xem gợi ý ở Bảng 2).
Thảo luận (1)Hướng dẫn giải/* Khai báo CSS sử dụng bộ chọn định danh cho các thành phần chính của trang web */
header {
background-color: #000;
color: #fff;
text-align: center;
padding: 10px;
}
main {
background-color: #fff;
padding: 20px;
}
footer {
background-color: #000;
color: #fff;
text-align: center;
padding: 10px;
}
/* Khai báo CSS sử dụng các bộ chọn lớp cho các thành phần của nội dung */
.tieu-de-bai-viet {
font-size: 18px;
font-weight: bold;
}
.ten-tac-gia {
font-size: 14px;
font-style: italic;
}
/* Khai báo CSS xác định vị trí hiển thị cho các phần tử HTML */
.hinh-anh {
float: left;
margin-right: 10px;
}
.video-clip {
display: block;
margin: 10px auto;
}
/* Thiết lập được định dạng CSS màu nền, màu chữ, phông chữ, cỡ chữ, đường viền cho các thành phần nội dung */
.bai-viet {
background-color: #f5f5f5;
padding: 10px;
border: 1px solid #ddd;
}
.goc-anh {
background-color: #f5f5f5;
padding: 10px;
border: 1px solid #ddd;
}
.goc-am-nhac-video {
background-color: #f5f5f5;
padding: 10px;
border: 1px solid #ddd;
}
.goc-binh-luan {
background-color: #f5f5f5;
padding: 10px;
border: 1px solid #ddd;
}
(Trả lời bởi Nguyễn Việt Dũng)
Thực hành 1 (SGK Cánh Diều - Trang 89)
Yêu cầu: Hãy thiết kế trang web báo tường điện tử của lớp em.
Mô tả sản phẩm:
Sản phẩm thứ nhất: Tệp dữ liệu dạng *.html tạo nội dung trang web (xem gợi ý ở Bảng 1).
Thảo luận (1)Hướng dẫn giải<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Báo tường điện tử - Lớp [Tên lớp]</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Báo tường điện tử</h1>
<h2>Lớp [Tên lớp]</h2>
</header>
<main>
<section class="gioi-thieu">
<h2>Giới thiệu</h2>
<p>
[Nội dung giới thiệu về chủ đề, mục đích, nội dung chính của trang báo]
</p>
</section>
<section class="bai-viet">
<h2>Bài viết</h2>
<ul>
<li>
<a href="#">Bài viết 1</a>
<p>Tóm tắt nội dung bài viết 1...</p>
</li>
<li>
<a href="#">Bài viết 2</a>
<p>Tóm tắt nội dung bài viết 2...</p>
</li>
</ul>
</section>
<section class="goc-anh">
<h2>Góc ảnh</h2>
<ul>
<li>
<img src="images/anh1.jpg" alt="Hình ảnh 1">
<p>Chú thích cho hình ảnh 1</p>
</li>
<li>
<img src="images/anh2.jpg" alt="Hình ảnh 2">
<p>Chú thích cho hình ảnh 2</p>
</li>
</ul>
</section>
<section class="goc-am-nhac-video">
<h2>Góc âm nhạc, video clip</h2>
<ul>
<li>
<a href="#">Bài hát 1</a>
<p>Tóm tắt nội dung hoặc cảm nhận về bài hát 1</p>
</li>
<li>
<a href="#">Video clip 1</a>
<p>Tóm tắt nội dung hoặc cảm nhận về video clip 1</p>
</li>
</ul>
</section>
<section class="goc-binh-luan">
<h2>Góc bình luận</h2>
<p>
[Biểu mẫu để người đọc bình luận về các bài viết, hình ảnh, video clip]
</p>
</section>
</main>
<footer>
<p>Thông tin về nhóm:</p>
<ul>
<li>Tên nhóm: [Tên nhóm]</li>
<li>Thành viên: [Danh sách thành viên nhóm]</li>
<li>Chức vụ: [Chức vụ của các thành viên nhóm]</li>
</ul>
<p>Địa chỉ email: [Địa chỉ email của các học sinh đại diện nhóm]</p>
<p>Ngày cập nhật: [Ngày cập nhật nội dung gần nhất]</p>
<p>Nguồn tham khảo: [Thông tin về nguồn thông tin mà nội dung trang web tham khảo (nếu có)]</p>
</footer>
</body>
</html>
(Trả lời bởi Nguyễn Việt Dũng)