Giải SGK Tin học 12 CTST Bài F3. Tạo bảng và khung trong trang web với HTML có đáp án

Code:

<!DOCTYPE html>

$<$html>

$<$head>

$<$meta charset="utf-8">

$<$title>Tiêu đề của trang web</title>

</head>

$<$body>

<!-- Nội dung ghi chú -->

$<$h1>Giới thiệu chung</h1>

$<$p>Nơi sinh: Thành phố Hồ Chí Minh</p>

$<$p>Điện thoại: 09.................</p>

$<$p>Email: [email protected]</p>

$<$h1>Lịch sinh hoạt hằng tuần</h1>

$<$table border="1">

$<$tr>

$<$th></th>

$<$th>Thứ Hai</th>

$<$th>Thứ Ba</th>

$<$th>Thứ Tư</th>

$<$th>Thứ Năm</th>

$<$th>Thứ Sáu</th>

$<$th>Thứ Bảy</th>

$<$th>Thứ Chủ nhật</th>

</tr>

$<$tr>

</tr>

$<$td>Sáng</td>

$<$td>Học chính khoác</td>

$<$td>Học chính khoá</td>

$<$td>Học chính khoá</td>

$<$td>Học chính khoá</td>

$<$td>Học chính khoá</td>

$<$td>Tự học ở nhà</td>

$<$td>Xem phim</td>

$<$tr>

$<$td>Chiều</td>

$<$td>Tập võ Vovinam</td>

$<$td>Tự học tại nhà </td>

$<$td>Tập võ Vovinam</td>

$<$td>Tập võ Vovinam</td>

$<$td>Tự học tại nhà </td>

$<$td>Làm việc nhà</td>

$<$td>Học bài</td>

</tr>

</table>

</body>

</html>

Kết quả:

Code:

<!DOCTYPE html>

$<$html>

$<$head>

$<$meta charset="utf-8">

$<$title>Tiêu đề của trang web</title>

</head>

$<$body>

<!-- Nội dung ghi chú -->

$<$h1>Giới thiệu chung</h1>

$<$p>Nơi sinh: Thành phố Hồ Chí Minh</p>

$<$p>Điện thoại: 09.................</p>

$<$p>Email: [email protected]</p>

$<$h1>Những trang web thường ghé thăm</hl

$<$ul>

$<$li>Chân trời sáng tạo:</li>

</ul>

$<$iframe src="www.learnpython.org" width="80%" height="500"> </iframe>

</body>

</html>

Kết quả:

Bảng được bắt đầu từ thẻ $<$table> và kết thúc bằng thẻ </table>. Bên trong cặp thẻ $<$table> </table> là thẻ $<$tr> dùng để bắt đầu một hàng và </tr> dùng để kết thúc hàng; cặp thẻ $<$th> </$<$th> dùng để tạo các ô tiêu đề; cặp thẻ $<$td></td> dùng để tạo các ô còn lại. Ngoài ra thuộc tính border được dùng để định dạng đường viền của bảng.

Thẻ $<$iframe> được dùng để nhúng một trang web khác vào trong trang web hiện tại.

Thuộc tính src chỉ định đường dẫn của trang web hoặc đối tượng được nhúng vào, thuộc tính width và height dùng để chỉ định kích thước của khung.

Tạo bảng thời khoá biểu có 8 dòng và 7 cột. Các bước thực hiện như sau:

1. Khởi động Visual Studio Code và tạo tập tkb.html.

2. Nhập đoạn mã HTML. sau để tạo nội dung cho các hàng từ tiết 1 đến tiết 3 trong bảng thời khoá biểu.

<!DOCTYPE html>

$<$html>

$<$head>

$<$meta charset="utf-8">

$<$title>Thời khoá biểu học kì I - Lớp 12A</title>

</head>

$<$body>

$<$table border="1" cellspacing="0">

$<$tr>

</tr> $<$tr>

$<$th width="50">&nbsp;</th> $<$th width="50">&nbsp;</th> $<$th width="80">Thứ Hai</th> $<$th width="89">Thứ Ba</th> $<$th width="80">Thứ Tư</th> $<$th width="80">Thứ Năm</th> $<$th width="80">Thứ Sáu</th>

$<$td border="1" rowspan="7">Sáng</td>

$<$td>Tiết 1</td>

$<$td>Chào cờ</td>

</tr>

$<$td>Chào cờ</td> $<$td>GDĐP</td> $<$td>Lịch sử</td> $<$td>GDQP</td>

$<$td>Địa lí</td>

$<$tr>

</tr>

$<$tr>

$<$td colspan="7" align="center" bgcolor="#e0e0e0">Ra chơi 1</td

Chân trời sáng tạo

$<$td>Tiết 2</td>

$<$td>Ngoại ngữ</td>

$<$td>Ngoại ngữ</td>

$<$td>HĐTNHN</td>

$<$td>Tin học</td>

$<$td>Địa lí</td>

</tr>

$<$tr>

$<$td>Tiết 3</td>

$<$td>Toán</td>

$<$td>Ngoại ngữ</td>

$<$td>HDTNHN</td>

$<$td>Tin học</td>

$<$td>GDQP</td>

</tr>

</table>

</body>

</html>

3. Bổ sung mã lệnh để tạo các hàng còn lại của bảng thời khoá biểu.

4. Nháy đúp chuột vào tệp tkb.html để mở trang web trong trình duyệt. Kiểm tra kết quả thực hiện.

1. Bổ xung thêm tên những thành viên khác vào tệp thanhvienlop.html với đoạn mã html như sau:

<!DOCTYPE html>

$<$html>

$<$head>

$<$meta charset="utf-8">

$<$title)Thành viên lớp 12A</title)

</head>

$<$body>

$<$ul>

$<$h2>Thành viên lớp</h2>

$<$li>$<$a href="loptruong.html" target="noidung">Lop truong</a></li> $<$li>$<$a href="loppho.html" target="noidung">Lớp phó</a></li>

$<$li>Danh sách tổ 1

$<$ul>

$<$li>Trần Văn Trung</li> $<$li>Nguyễn Thị Tú</li> $<$li>Hoàng Thanh Sang</li>

</ul>

</ul>

</li>

</body>

</html>

2. Trong thư mục chứa tệp thanhvienlop.html, tạo tệp kiyeu.html có đoạn mã HTML sau:

<!DOCTYPE html>

$<$html>

$<$head>

$<$meta charset="utf-8">

$<$title>Kỉ yếu lớp 12A</title>

</head>

$<$body>

$<$table border="0" width="100%">

$<$tr>

$<$td align="center" colspan="2"> $<$h1>Ki yếu lớp 12A</h1>

</td>

</tr>

$<$tr>

$<$td width="30%">

$<$iframe width="100%" height="100%" src="thanhvienlop.html"></iframe>

</td>

$<$td>

$<$iframe width="100%" height="500" name="noidung"></iframe>

</td>

</tr>

</table>

</body>

</html>

3. Thực hiện sao chép hai tệp loptruong.html và loppho.html trong nhiệm vu ở Thực hành của Bài F2 vào cùng thư mục chứa tệp thanhvienlop.html và tệp kiyeu.html

4. Thực hiện nháy đúp chuột vào tệp kiyeu.html để mở trang web trong trình duyệt. Kiểm tra kết quả.

<!DOCTYPE html>

$<$html>

$<$head>

$<$meta charset="utf-8">

$<$title)Thành viên lớp 12A</title)

</head>

$<$body>

$<$ul>

$<$h2>Thành viên lớp</h2>

$<$li>$<$a href="loptruong.html" target="noidung">Lop truong</a></li> $<$li>$<$a href="loppho.html" target="noidung">Lớp phó</a></li>

$<$li>Danh sách tổ 1

$<$ul>

$<$li>Trần Văn Trung</li> $<$li>Nguyễn Thị Tú</li> $<$li>Hoàng Thanh Sang</li>

</ul>

</ul>

</li>

</body>

</html>

2. Trong thư mục chứa tệp thanhvienlop.html, tạo tệp kiyeu.html có đoạn mã HTML sau:

<!DOCTYPE html>

$<$html>

$<$head>

$<$meta charset="utf-8">

$<$title>Kỉ yếu lớp 12A</title>

</head>

$<$body>

$<$table border="0" width="100%">

$<$tr>

$<$td align="center" colspan="2"> $<$h1>Ki yếu lớp 12A</h1>

</td>

</tr>

$<$tr>

$<$td width="30%">

$<$iframe width="100%" height="100%" src="thanhvienlop.html"></iframe>

</td>

$<$td>

$<$iframe width="100%" height="500" name="noidung"></iframe>

</td>

</tr>

</table>

</body>

</html>