Câu hỏi trang 62 Khởi động (KĐ)
Có những điểm gì khiến em thấy hứng thú hơn khi xem các trang web so với đọc sách.
Có rất nhiều điều làm người đọc cảm thấy hứng thú hơn khi xem các trang web so với đọc sách như: tính tương tác, đa phương tiện, cập nhật nhanh chóng, kết nối và chia sẻ, tính linh hoạt và tiện lợi,….
Có một số điểm mà nhiều người thấy hứng thú hơn khi xem các trang web so với đọc sách:
-Tính tương tác: Trang web thường có tính tương tác cao hơn so với sách. Người dùng có thể tương tác trực tiếp với nội dung thông qua các liên kết, nút nhấn, biểu đồ, video, hình ảnh động, và các phần tử multimedia khác.
-Đa phương tiện: Trang web thường kết hợp nhiều loại phương tiện như văn bản, hình ảnh, âm thanh, video và đồ họa động, tạo ra trải nghiệm đa phương tiện và hấp dẫn hơn so với sách truyền thống chỉ chứa văn bản.
-Cập nhật nhanh chóng: Các trang web thường được cập nhật thường xuyên, giúp người đọc có thể tiếp cận thông tin mới nhất và được thông báo về các sự kiện hoặc tin tức quan trọng.
-Kết nối và chia sẻ: Trang web thường có các tính năng kết nối mạng xã hội, cho phép người dùng chia sẻ, bình luận và tương tác với người khác, tạo ra một môi trường mạng xã hội và cộng đồng trực tuyến.
-Tính linh hoạt và tiện lợi: Người dùng có thể truy cập trang web từ bất kỳ thiết bị nào có kết nối internet mà không cần mang theo sách. Hơn nữa, họ có thể dễ dàng tìm kiếm thông tin, điều hướng qua các trang và tùy chỉnh trải nghiệm của mình
Câu hỏi trang 62 Hoạt động (HĐ)
Hãy kể tên các định dạng tệp ảnh mà em biết. Phân loại chúng vào nhóm đồ họa vectơ hoặc đồ họa điểm ảnh.
Đặc điểm của từng loại đồ họa.
Đồ họa vector là thuật ngữ được dùng để chỉ ra quy trình tạo nên tất cả các bức ảnh, sản phẩm vector khác nhau trên cùng 1 ấn phẩm. Mỗi một đối tượng vector sẽ thể hiện được dựa trên sự phối trộn màu sắc thông qua những thuật toán. Chúng được tạo thành từ các đường giới hạn và các điểm.
Đồ họa Raster (bitmap) là một tập hợp các điểm ảnh (pixel) nhỏ và lưu trữ thông tin về màu sắc và vị trí của từng điểm ảnh. Mỗi điểm ảnh trong hình ảnh raster có thể chứa thông tin về màu sắc, độ sáng, độ tương phản và các thuộc tính khác của điểm ảnh đó.
*Đồ họa vectơ:
SVG (Scalable Vector Graphics)
EPS (Encapsulated PostScript)
AI (Adobe Illustrator)
PDF (Portable Document Format) - Có thể chứa cả đồ họa vectơ và đồ họa điểm ảnh.
*Đồ họa điểm ảnh:
JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
GIF (Graphics Interchange Format)
BMP (Bitmap)
TIFF (Tagged Image File Format)
PSD (Adobe Photoshop)
Câu hỏi trang 63 Câu hỏi 1
Thẻ <img> chỉ dùng khi chèn ảnh jpg vào trang web có đúng không?
Đáp án là không đúng.
Cách chèn ảnh vào trang web là sử dụng thẻ <img>, mỗi ảnh có định dạng khác nhau.
Không, thẻ <img> không chỉ dùng để chèn ảnh JPG vào trang web mà còn có thể được sử dụng để chèn các loại tệp ảnh khác như PNG, GIF, BMP, SVG và nhiều định dạng hình ảnh khác nữa. Thẻ <img> là một phần quan trọng trong HTML và nó được sử dụng để hiển thị hình ảnh trên trang web.
Câu hỏi trang 63 Câu hỏi 2
Hãy Nêu một số trường hợp có thể xảy ra lỗi khi hiển thị ảnh
Có rất nhiều lỗi có thể xảy ra khi hiển thị một ảnh. Nêu một số ví dụ mà bản thân đã gặp phải.
Ví dụ: đường dẫn không chính xác, vấn đề về kích thước và định dạng ảnh, lỗi trong mã HTML,…
Dưới đây là một số trường hợp có thể xảy ra lỗi khi hiển thị ảnh trên trang web:
- Đường dẫn tệp không chính xác: Nếu đường dẫn tới tệp ảnh không chính xác, trình duyệt sẽ không thể tìm thấy và hiển thị ảnh.
- Tệp ảnh không tồn tại hoặc bị xóa: Nếu tệp ảnh đã bị xóa hoặc không tồn tại tại địa chỉ được chỉ định trong thuộc tính src, ảnh sẽ không thể hiển thị.
- Tệp ảnh không hỗ trợ: Trình duyệt không thể hiển thị các định dạng tệp ảnh không hỗ trợ, hoặc không thể hiểu được. Ví dụ, nếu trình duyệt không hỗ trợ định dạng SVG và một ảnh SVG được chèn vào trang, nó có thể không hiển thị đúng cách.
- Lỗi tải ảnh từ máy chủ: Nếu máy chủ chứa tệp ảnh gặp sự cố hoặc không hoạt động đúng cách, ảnh có thể không thể tải và hiển thị.
- Vấn đề về kích thước hoặc định dạng ảnh: Nếu ảnh có kích thước quá lớn hoặc định dạng không phù hợp, nó có thể gây ra lỗi khi hiển thị trên trang web, hoặc trình duyệt có thể không thể hiển thị ảnh đúng cách.
- Lỗi trong mã HTML : Nếu có lỗi trong mã HTML hoặc CSS liên quan đến thẻ <img>, như thiếu thuộc tính hoặc giá trị không hợp lệ, có thể dẫn đến lỗi khi hiển thị ảnh.
Câu hỏi trang 64 Hoạt động (HĐ)
Quan sát đoạn mã sau và xác định tên đoạn mã này có chức năng gì?
<video src=”video/war_is_over.mp4 ”with=”300” height= “250” autoplay>
Đoạn mã trên được sử dụng để nhúng một video vào trang web.
Các thông số chức năng được đề cập như: thuộc tính src, kích thước video, tùy chọn phát.
Đoạn mã trên là một thẻ <video> trong HTML, được sử dụng để nhúng một video vào trang web. Dưới đây là các thông số và chức năng của đoạn mã:
src=”video/war_is_over.mp4″: Đây là thuộc tính src chỉ địa chỉ của tệp video cần phát lại. Trong trường hợp này, tệp video có tên là "war_is_over.mp4” và được lưu trong thư mục "video”.
width=”300″ và height=”250″: Đây là thuộc tính chỉ kích thước của video khi hiển thị trên trình duyệt. Trong trường hợp này, video sẽ có kích thước chiều rộng là 300 pixels và chiều cao là 250 pixels.
autoplay: Đây là một thuộc tính tùy chọn cho phép video tự động phát khi trang web được tải lên. Khi thuộc tính này được sử dụng, video sẽ tự động phát mà không cần người dùng nhấp vào bất kỳ nút nào.
Câu hỏi trang 64 Câu hỏi
Thuộc tính scr có tác dụng gì đối với thẻ audio?
Dựa vào thông tin trong sách giáo khoa và tìm kiếm trên mạng để trả lời.
Trong thẻ <audio> của HTML, thuộc tính src (có thể đọc là "source”) được sử dụng để chỉ địa chỉ của tệp âm thanh cần phát lại. Thuộc tính này xác định nguồn dữ liệu của âm thanh, tức là đường dẫn đến tệp âm thanh.
Câu hỏi trang 65 Hoạt động (HĐ)
Trong các bài đăng có đính kèm video, một số trang web sẽ hiển thị nội dung video trong một khung và cho phép tương tác bên trong khung đó. Em có nhận xét gì về giao diện của cả trang khi thực hiện các thao tác bên trong khung này?
Một số nhận xét về giao diện của cả trang web khi thực hiện các thao tác bên trong: tập trung vào video, tăng tính tương tác, cải thiện trải nghiệm người dùng, tối ưu hóa không gian,…
Bên cạnh ưu điểm cũng có một số nhược điểm còn thấy rõ.
Khi thực hiện các thao tác bên trong một khung video trên một trang web, có một số nhận xét về giao diện của cả trang:
- Tập trung vào video: Khung video thường thu hút sự chú ý của người dùng, làm cho học tập trung vào nội dung video chính. Điều này có thể làm giảm sự chú ý của họ đối với các phần khác của trang.
- Tăng tính tương tác: Việc cho phép tương tác bên trong khung video tạo ra trải nghiệm người dùng tích hợp và tương tác hơn. Người dùng có thể xem video và thực hiện các hành động khác ngay trên cùng một trang, thay vì phải chuyển đến trang khác hoặc tắt video để thực hiện các tác vụ khác.
- Cải thiện trải nghiệm người dùng: Khi người dùng có thể thực hiện các thao tác bên trong khung video, họ có thể tương tác với nội dung một cách trực quan và tự nhiên hơn. Điều này có thể cải thiện trải nghiệm người dùng và làm cho trang web trở nên dễ sử dụng hơn.
- Tối ưu hóa không gian: Sử dụng khung video để hiển thị nội dung video giúp tối ưu hóa không gian trên trang web. Thay vì chiếm quá nhiều không gian trên trang, video chỉ chiếm một phần nhỏ và cho phép trang web hiển thị các phần khác một cách hiệu quả.
Tuy nhiên, cũng cần lưu ý rằng việc sử dụng khung video có thể làm mất quá nhiều không gian và chú ý của người dùng nếu không được thực hiện một cách cân nhắc và tối ưu. Điều này có thể ảnh hưởng đến trải nghiệm người dùng và hiệu suất của trang web.
Câu hỏi trang 65 Câu hỏi
Viết các câu lệnh để tạo hai khung nội tuyến có kích thước bằng nhau, hiển thị song song (theo phương ngang) trên trang web.
Xác định các câu lệnh sẽ dùng để tạo 2 khung nội tuyến có kích thước bằng nhau và hiển thị song song.
Sắp xếp câu lệnh phù hợp tạo trang web.
<!DOCTYPE html>
Advertisements (Quảng cáo)
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Two Inline Frames</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div>
<iframe src=”frame1.html”></iframe>
<iframe src=”frame2.html”></iframe>
</div>
</body>
</html>
Câu hỏi trang 66 Luyện tập (LT) 1
Cho ảnh có kích thước gốc là 720x 450 Pixel chèn ảnh vào trang web bằng câu lệnh:
<img src= “images/1.png” alt = “ chiếc lá” width 600>.
Hỏi ảnh trong trang web có kích thước bao nhiêu?
Kích thước của ảnh trong trang web sau khi chèn sẽ được xác định bởi câu lệnh <img> và thuộc tính width mà bạn đã chỉ định.
Dựa vào các nguyên tắc chèn ảnh để tính kích thước ảnh trong trang web.
Kích thước của ảnh trong trang web sau khi chèn sẽ được xác định bởi câu lệnh <img> và thuộc tính width mà bạn đã chỉ định. Trong trường hợp này, bạn đã chỉ định width=”600″, nghĩa là bạn muốn ảnh có chiều rộng là 600 pixels.
Tuy nhiên, do không đã chỉ định chiều cao, vì vậy trình duyệt sẽ tự động điều chỉnh chiều cao một cách tự nhiên dựa trên tỉ lệ kích thước gốc của ảnh. Vì vậy, để tính toán chiều cao của ảnh, bạn có thể sử dụng tỉ lệ giữa chiều rộng và chiều cao của ảnh gốc.
Tỉ lệ giữa chiều rộng và chiều cao của ảnh gốc là: 720450450720
Vậy chiều cao của ảnh trong trang web sẽ là: 600720450=375450720600=375 pixels.
Do đó, ảnh trong trang web sẽ có kích thước là 600 pixels chiều rộng và 375 pixels chiều cao.
Câu hỏi trang 66 Luyện tập (LT) 2
Chèn thêm một số ảnh của mình vào trang web giới thiệu bản thân (em đã tạo ở phần luyện tập, Bài 10).
Sử dụng trang web em đã tạo để giới thiệu bản thân.
Tìm ảnh phù hợp và chèn vào trang web.
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Giới thiệu bản thân</title>
</head>
<body>
<h1>Giới thiệu bản thân</h1>
<p>Xin chào! Tôi là [Tên của bạn], đây là một trang web giới thiệu về bản thân tôi.</p>
<!- Chèn ảnh của bạn ->
<h2>Ảnh của tôi</h2>
<img src=”path_to_your_image/image1.jpg” alt=”Ảnh của bạn”>
<img src=”path_to_your_image/image2.jpg” alt=”Ảnh của bạn”>
<img src=”path_to_your_image/image3.jpg” alt=”Ảnh của bạn”>
<!- Bạn cùng lớp ->
<h2>Bạn cùng lớp</h2>
<ul>
<li><ahref=”https://www.facebook.com/friend1″ target=”_blank”>Facebook của Bạn 1</a></li>
<li><ahref=”https://www.facebook.com/friend2″ target=”_blank”>Facebook của Bạn 2</a></li>
<li><ahref=”https://www.facebook.com/friend3″ target=”_blank”>Facebook của Bạn 3</a></li>
</ul>
<p>Cảm ơn bạn đã ghé thăm!</p>
</body>
</html>
Câu hỏi trang 66 Vận dụng (VD)
Tạo một khung nội tuyến và liên kết đến bài hát em yêu thích (ví dụ trên YouTube) vào trang web giới thiệu bản thân.
Tạo khung nội tuyến theo hướng dẫn
Tạo liên kết để dẫn khung nội tuyến đến bài hát yêu thích và thêm vào trang web giới thiệu bản thân.
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Giới thiệu bản thân</title>
</head>
<body>
<h1>Giới thiệu bản thân</h1>
<p>Xin chào! Tôi là [Tên của bạn], đây là một trang web giới thiệu về bản thân tôi.</p>
<!- Khung nội tuyến chứa video yêu thích từ YouTube ->
<h2>Bài hát yêu thích của tôi</h2>
<iframe width=”560″ height=”315″ src=”https://img./picture/2024/0616/giai-tin-hoc-12-bai-11-trang-62-sgk-ket-noi-tri-thuc-1718520695.jpg”frameborder=”0″ allowfullscreen></iframe>
<!- Bạn cùng lớp ->
<h2>Bạn cùng lớp</h2>
<ul>
<li><ahref=”https://www.facebook.com/friend1″ target=”_blank”>Facebook của Bạn 1</a></li>
<li><ahref=”https://www.facebook.com/friend2″ target=”_blank”>Facebook của Bạn 2</a></li>
<li><ahref=”https://www.facebook.com/friend3″ target=”_blank”>Facebook của Bạn 3</a></li>
</ul>
<p>Cảm ơn bạn đã ghé thăm!</p>
</body>
</html>