Giải SGK Tin học 12 CTST Bài F2. Tạo và định dạng trang web với các thẻ HTML có đáp án

Trong HTML có những thẻ nào để định dạng đề mục: Để định nghĩa các đề mục của trang web theo từng cấp độ, HTML sử dụng các thẻ $<$h1>, $<$h2>, $<$h3>, $<$h4>, $<$h5>, $<$h6>. Trong đó $<$h1> là đề mục cao cấp nhất và $<$h6> là đề mục cấp thấp nhất. Trình duyệt sẽ hiển thị các đề mục theo các kích thước khác nhau, đề mục cấp cao hơn sẽ có kích thước chữ lớn hơn.

Nội dung được kết xuất trên trang web như sau:

Thẻ được sử dụng để tạo danh sách có thứ tự là: $<$li>, $<$ol>. Nên đáp án đúng là:

a. $<$li>

c. $<$ol>

Cú pháp:

Code như sau:

<!DOCTYPE html>

$<$html>

$<$head>

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

$<$title>Minh hoạ liên kết</title

</head>

$<$body>

$<$h2>$<$a id="dautrang".Tiêu đề của trang</a></h2>

$<$p>

$<$a href="https://abc.xyz">Mo trang Alphabet</a>$<$br>

$<$a href="https://internet.com" target="_blank">Mo trang internet.com</a>$<$br>(

$<$a href="/tailieu/baihoc.pdf">Liên kết đến tệp baihoc.pdf</a>$<$br>

$<$a href="mailto:[email protected]">Liên kết đến địa chỉ email</a>$<$br>

$<$a href="#">Liên kết không dẫn đến trạng nào</a>$<$br>

$<$a href="#dautrang" Liên kết đến “Tiêu đề đầu trang”</a>

</p>

</body>

</html>

Kết quả:

Sau khi thay thế cặp thẻ $<$ul></ul> thành $<$ol></ol> và hai cặp thẻ $<$ol>/ol> thành $<$ul></ul> ta được code như sau:

$<$html>

$<$head>

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

ctitle,Minh hoạ danh sách lòng nhau</title>

</head>

$<$body>

$<$ol>

$<$li>Tài liệu thiết kế trang web

$<$ul>

$<$li>Tài liệu HTML</li> $<$li>Tài liệu CSS</li>

$<$li>Tài liệu Javascript</li>

</ul>

</li>

$<$li>Tài liệu tin học văn phòng

$<$ul>

$<$li>Tài liệu Word</li>

$<$li>Tài liệu Excel</li>

$<$li>Tài liệu PowerPoint</li>

</ul>

</li>

</ol>

</body>

</html>

Kết quả:

- Tạo trang web thanhvienlop.html có thành viên lớp như sau:

Code:

<!DOCTYPE html>

$<$html>

$<$head>

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

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

</head>

$<$body>

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

$<$p>Lớp trưởng: Nguyễn Minh Châu</p>

$<$p>Lớp phó: Trần Thanh Tâm</p>

</body>

</html>

Kết quả:

- Tạo trang web có thông tin của Lớp trưởng lưu tên loptruong.html

Code:

<!DOCTYPE html>

$<$html>

$<$head>

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

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

</head>

$<$body>

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

$<$p>Lớp trưởng: Nguyễn Minh Châu</p>

$<$p>Nhiệm vu: Quản lý việc học tập của lớp</p>

</body>

</html>

Kết quả:

- Tạo trang web có thông tin của Lớp phó lưu tên loppho.html

Code:

<!DOCTYPE html>

$<$html>

$<$head>

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

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

</head>

$<$body>

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

$<$p>Lớp phó: Trần Thanh Tâm</p>

$<$p>Nhiệm vu: Quản lý việc lao động, văn hoá, đời sống của lớp</p>

</body>

</html>

Kết quả:

- Tạo liên kết từ trang web thanhvienlop.html đến hai trang web loptruong.html và loppho. Html

Code:

<!DOCTYPE html>

$<$html>

$<$head>

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

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

</head>

$<$body>

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

$<$p>

$<$a href="file:///D:/loptruong.html"Lớp trưởng: Nguyễn Minh Châu</a>$<$br>

$<$p>Lớp trưởng: Nguyễn Minh Châu</p>

$<$a href="file:///D:/loppho.html"Lớp phó: Trần Thanh Tâm</a>$<$br>

$<$p>Lớp phó: Trần Thanh Tâm</p>

</p>

</body>

</html>

Kết quả:

Code:

<!DOCTYPE html>

$<$html>

$<$head>

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

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

</head>

$<$body>

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

$<$p>

$<$a href="file:///D:/loptruong.html"Lớp trưởng: Nguyễn Minh Châu</a>$<$br>

$<$p>Lớp trưởng: Nguyễn Minh Châu</p>

$<$a href="file:///D:/loppho.html"Lớp phó: Trần Thanh Tâm</a>$<$br>

$<$p>Lớp phó: Trần Thanh Tâm</p>

$<$a href="file:///D:/T%C3%AAnminh.html"Thành viên 1: Trần Văn A</a>$<$br>

$<$p>Thành viên 1: Trần Văn A</p>

</p>

</body>

</html>

Kết quả:

Code:

<!DOCTYPE html>

$<$html>

$<$head>

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

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

</head>

$<$body>

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

$<$p>Thành viên 1: Trần Văn A</p>

$<$p>Thành viên tổ 1</p>

$<$p>Sở thích: du lịch, xem phim và ăn vặt</p>

$<$p>Các hoạt động đã tham gia</p>

</body>

</html>

Kết quả: