Giải SGK Tin học 12 CTST Bài F4. Thêm dữ liệu đa phương tiện vào trang web có đáp án

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>

$<$img src="D:\chan dung.jpg" width="200" alt="ảnh chân dung" title="ảnh chân dung">

</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>

$<$img src="D:\chan dung.jpg" width="200" alt="ảnh chân dung" title="ảnh chân dung">

</html>

Giả sử tập portfolio.html nằm cùng nơi với thư mục Asset. Thư mục Sound, là thư mục con của thư mục Asset, có chứa tệp bai_hat.mp3. Vậy đường dẫn cho thuộc tính src để thêm tệp bai_hat.mp3 này vào tệp portfolio.html như sau:

Asset\ Sound\bai-hat.mp3

1. Khởi động Visual Studio Code và mở tệp portfolio.html.

2. Viết thêm đoạn mã HTML vào phần mã lệnh của thẻ $<$body>:

$<$h1>Nội dung yêu thích/h1>

$<$h2>Hình ảnh</h2>

$<$table>

$<$tr>

$<$td>$<$img src="Images/Anh_1.jpg" width="500"></td> $<$td>$<$img src="Images/Anh_2.jpg" width="500"></td>

</tr>

$<$tr>

$<$td>$<$img src="https://i.imgur.com/gY8a62C.jpg" width="500"></td> $<$td>$<$img src="https://i.imgur.com/okHFRI4.jpg" width="500"></td>

</tr>

</table>

Em sử dụng thẻ $<$table> để tạo bố cục hiển thị các hình ảnh gồm có hai thẻ $<$tr>ứng với hai hàng của bảng, mỗi thẻ $<$tr> có hai thẻ $<$td> ứng với hai ô, mỗi ô chứa một hình ảnh. Bên cạnh đó, em thêm tệp ảnh trong thư mục Images nằm cùng nơi với tệp portfolio.html (Anh_1.jpg và Anh_2.jpg) bằng đường dẫn của tệp hoặc thêm tập ảnh từ trang web khác (gY8a62C.jpg và

okIIFRI4.jpg) bằng đường liên kết đến các tệp ảnh đó.

3. Nhảy đúp chuột vào tập portfolio.html để kiểm tra kết quả.

1. Viết thêm đoạn mã HTML vào phần mã lệnh của thẻ $<$body>:

$<$h2>Video clip</h2>

$<$h3>Thi kéo co</h3>

$<$video src="Videos/clip_keo_co.mp4" controls></video>

Em thêm tập video trong thư mục Videos nằm cùng nơi với tệp portfolio.html (clip_keo_comp4) bằng đường dẫn của Lệp hoặc thêm tệp video từ trang web khác bằng đường liên kết đến Lệp đó.

Lưu ý: Các trang web cho phép thêm tệp video theo những cách khác nhau và trình duyệt có thể không hỗ trợ thẻ $<$video).

2. Nháy đúp chuột vào tập portfolio.html để kiểm tra kết quả.

1. Code như sau:

<!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>

$<$video src="D:\Quảng cáo vui nhộn cho bé - Dầu ăn dinh dưỡng Kiddy.mp4" controls autoplay muted>

Trình duyệt web của bạn có thể không phát được video

</video>

</html>

2. Code như sau:

<!DOCTYPE html>

$<$html>

$<$head>

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

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

</head>

$<$body>

$<$h1>Nội dung yêu thích</h1>

$<$video src="D:\Quảng cáo vui nhộn cho bé - Dầu ăn dinh dưỡng Kiddy.mp4" width="200"controls autoplay muted>

Trình duyệt web của bạn có thể không phát được video

</video>

$<$p>Nội dung yêu thích</p>

$<$img src="D:\40.png" width="200" alt="ảnh chân dung" title="ảnh chân dung">

</html>

3. Code như sau:

<!DOCTYPE html>

$<$html>

$<$head>

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

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

</head>

$<$body>

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

$<$p>Họ tên: Nguyễn Văn A</p>

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

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

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

$<$img src="D:\chan dung.jpg" width="200" alt="ảnh chân dung" title="ảnh chân dung">

</html>