Giải SBT Tin học 12 Định hướng Khoa học máy tính Chân trời sáng tạo Bài F1. HTML và trang web.

<!DOCTYPE html>

$<$html>

$<$head>

$<$meta>

$<$title> </title>

</head>

$<$body>

$<$h1> </h1>

$<$p> </p>

</body>

</html>

1. Chuẩn bị:

Trình duyệt web: Bạn cần một trình duyệt web như Chrome, Firefox, Edge để xem kết quả.

Trình soạn thảo văn bản: Bạn có thể sử dụng Notepad (Windows), TextEdit (macOS), hoặc các trình soạn thảo mã chuyên dụng như Visual Studio Code, Sublime Text.

2. Tạo file HTML:

Mở trình soạn thảo văn bản của bạn.

Tạo một file mới và đặt tên là "lopchungminh.html".

3. Cấu trúc cơ bản của một trang HTML:

HTML

<!DOCTYPE html>

$<$html>

$<$head>

$<$title>Lớp Chúng Mình</title>

</head>

$<$body>

</body>

</html>

<!DOCTYPE html>: Khai báo loại tài liệu HTML.

$<$html>: Thẻ bắt đầu và kết thúc của toàn bộ tài liệu HTML.

$<$head>: Chứa các thông tin về trang web, như tiêu đề.

$<$title>: Xác định tiêu đề của trang web, hiển thị trên tab của trình duyệt.

$<$body>: Chứa toàn bộ nội dung hiển thị trên trang web.

4. Thêm nội dung:

Tiêu đề:

HTML

$<$h1>Lớp Chúng Mình</h1>

Dòng giới thiệu:

HTML

$<$p>Đây là trang web giới thiệu về lớp học của chúng mình. Chúng ta sẽ cùng nhau chia sẻ những khoảnh khắc vui vẻ và học tập.</p>

Danh sách thành viên:

HTML

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

$<$ul>

$<$li>Họ và tên 1</li>

$<$li>Họ và tên 2</li>

</ul>

Hình ảnh:

$<$img src="anhlop.jpg" alt="Hình ảnh lớp học">

Lưu ý: Bạn cần lưu hình ảnh vào cùng thư mục với file HTML và thay thế "anhlop.jpg" bằng tên file hình ảnh của bạn.

Lưu và mở file:

Lưu file "lopchungminh.html".

Mở file bằng trình duyệt web để xem kết quả.

Ví dụ hoàn chỉnh:

HTML

<!DOCTYPE html>

$<$html>

$<$head>

$<$title>Lớp Chúng Mình</title>

</head>

$<$body>

$<$h1>Lớp Chúng Mình</h1>

$<$p>Đây là trang web giới thiệu về lớp học của chúng mình. Chúng ta sẽ cùng nhau chia sẻ những khoảnh khắc vui vẻ và học tập.</p>

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

$<$ul>

$<$li>Nguyễn Văn A</li>

$<$li>Trần Thị B</li>

</ul>

$<$img src="anhlop.jpg" alt="Hình ảnh lớp học">

</body>

</html>