Lý thuyết Tin học 12 Bài 5 (Cánh diều): Tạo nội dung hình ảnh cho trang web

Lý thuyết Tin học 12 Bài 5: Tạo nội dung hình ảnh cho trang web

1. Hình ảnh, video trên trang web

Để thu hút người truy cập, trang web cần có nội dung hữu ích và hình thức trình bày đẹp mắt, tiện lợi. Các đối tượng đồ họa như hình ảnh và video được sử dụng phổ biến, bao gồm ảnh đại diện, ảnh minh họa cho nội dung bài viết, và các hình ảnh/video nổi bật.

- Ảnh đại diện và ảnh minh họa: Thường có kích thước nhỏ, đặt xen kẽ với nội dung văn bản trên trang web.

- Hình ảnh/video nổi bật: Được đặt ở đầu trang dưới thanh điều hướng, có màu nền nhất quán, chiều rộng bằng chiều rộng trang web, có thể chứa tiêu đề hoặc nội dung ngắn.

Các yếu tố đồ họa này giúp tạo sự hấp dẫn và truyền tải nội dung một cách hiệu quả.

2. Bộ sưu tập và thanh trượt

- Bộ sưu tập (gallery): Hiển thị nhiều hình ảnh hoặc video cùng lúc trên trang web dưới dạng lưới hoặc danh sách.

- Thanh trượt (slider): Chứa nhiều hình ảnh hoặc video nhưng chỉ hiển thị từng cái một, chuyển đổi tự động hoặc qua tương tác của người dùng. Thanh trượt thường dùng để quảng bá các chương trình ưu đãi, dịch vụ, hoặc sản phẩm.

Cả hai cách hiển thị này giúp trang web truyền tải thông tin và hình ảnh một cách trực quan và thu hút.

3. Thực hành

Nhiệm vụ 1. Thêm hình ảnh, video cho trang web

Yêu cầu: Em hãy thêm một hình ảnh về cảnh quan trường em vào phía dưới bài viết giới thiệu về trường mà em đã thực hiện ở Bài 4.

Hướng dẫn thực hiện:

Bước 1. Thêm khối hình ảnh, video vào trang web

– Chọn Add Block to Page – phía góc phải dưới màn hình.

– Chọn Image & Video, chọn một khối mẫu phù hợp (Hình 3) để thêm vào phía dưới cùng của trang web hoặc nhấn giữ chuột và kéo thả vào vị trí thích hợp trên trang web.

Bước 2:Điều chỉnh thông số bố cục và định dạng:

- Mở bảng thông số bằng cách chọn Block Parameters.

- Các thông số điều chỉnh gồm:

- Full Width: Hiển thị toàn màn hình.

- Top/Bottom: Điều chỉnh khoảng cách với nội dung phía trên/dưới.

- Image/Video (mục Size): Điều chỉnh kích thước.

- Title/Subtitle/Text: Hiển thị tiêu đề, tiêu đề phụ, nội dung văn bản.

- Description: Hiển thị mô tả dưới hình ảnh/video.

- Color/Image/Video (mục Background): Chọn nền.

Bước 3:Thay đổi hình ảnh/video:

+ Thay đổi hình ảnh:

- Chọn từ máy tính, thư viện phần mềm, dự án website.

- Gán liên kết hoặc nội dung thay thế (Alt).( Hình 4)

+ Browse Computer: Chọn hình ảnh được lưu trữ trong máy tính.

+ Free Online Library: Chọn hình ảnh có sẵn trong thư viện của phần mềm.

+ Site Library: Chọn hình ảnh có trong dự án website.

+ Link Image to: Gán liên kết khi người xem nháy chuột vào ảnh.

+Alt. Nội dung được hiển thị thay thế khi ảnh bị lỗi hiển thị.

+ Thay đổi video (Hình 5)

+ Video URL: Đường dẫn tới video trên Internet. + Aspect Ratio: Tỉ lệ màn hình của video.

+ Autoplay: Video có tự động phát hay không.

+ Loop: Video có tự động phát lặp lại hay không.

Nhiệm vụ 2: Thêm bộ sưu tập và thanh trượt vào trang web

Yêu cầu: Thêm hình ảnh hoạt động của học sinh dưới dạng thanh trượt vào phần giới thiệu trường học.

Hướng dẫn thực hiện:

Bước 1. Thêm khối hình ảnh/video:

- Chọn Add Block to Page ở góc phải dưới màn hình.

- Trong cửa sổ Gallery & Slider, chọn khối mẫu phù hợp và kéo thả vào vị trí thích hợp trên trang web.( Hình 6)

Bước 2. Điều chỉnh thông số bố cục và định dạng:

- Mở bảng thông số bằng cách chọn Block Parameters.

- Tuỳ chỉnh các thông số như đã hướng dẫn với khối nội dung bài viết và hình ảnh riêng lẻ.

Bước 3. Chỉnh sửa nội dung:

- Chọn phần chữ để chỉnh sửa hoặc thay hình ảnh mới phù hợp.

Lưu ý: Hạn chế sử dụng thanh trượt cho trang web cần tốc độ tải nhanh hoặc trên thiết bị di động, vì nó chiếm nhiều tài nguyên và làm chậm tốc độ tải trang.

Trắc nghiệm: Tạo nội dung hình ảnh cho trang web

PHẦN I. Câu trắc nghiệm nhiều phương án lựa chọn. Thí sinh trả lời từ câu 1 đến câu 10. Mỗi câu hỏi thí sinh chỉ lựa chọn một phương án.

Câu 1: Hình ảnh đại diện và ảnh minh họa trên trang web thường có kích thước như thế nào?

A. Kích thước lớn, chiếm toàn bộ trang web

B. Kích thước nhỏ, đặt xen kẽ với nội dung văn bản

C. Kích thước vừa phải, nằm dưới thanh điều hướng

D. Kích thước tùy chọn, không cần bố trí cụ thể

Câu 2: Hình ảnh/video nổi bật trên trang web thường được đặt ở vị trí nào?

A. Dưới thanh điều hướng, có màu nền nhất quán

B. Ở góc trên bên phải của trang web

C. Ở giữa trang web với kích thước nhỏ

D. Ở dưới cùng của trang web với màu nền ngẫu nhiên

Câu 3: Bộ sưu tập (gallery) trên trang web thường hiển thị như thế nào?

A. Hiển thị nhiều hình ảnh hoặc video cùng lúc dưới dạng lưới hoặc danh sách

B. Hiển thị một hình ảnh lớn duy nhất

C. Chỉ hiển thị hình ảnh video ở góc dưới bên trái

D. Không hiển thị bất kỳ hình ảnh nào

Câu 4: Thanh trượt (slider) trên trang web thường dùng để làm gì?

A. Hiển thị nhiều hình ảnh hoặc video nhưng chỉ hiển thị từng cái một

B. Hiển thị hình ảnh duy nhất mà không có chuyển đổi

C. Chứa các liên kết đến các trang khác trên web

D. Hiển thị thông tin liên hệ của trang web

Câu 5: Để thêm hình ảnh vào trang web, bạn nên chọn khối nào từ cửa sổ Add Block to Page?

A. Text & Code

B. Image & Video

C. Gallery & Slider

D. Navigation

Câu 6: Để điều chỉnh kích thước của hình ảnh trong khối hình ảnh, bạn cần thay đổi thông số nào?

A. Title/Subtitle

B. Color/Image/Video

C. Image/Video (mục Size)

D. Description

Câu 7: Để thêm một thanh trượt vào trang web, bạn nên chọn khối nào từ cửa sổ Add Block to Page?

A. Image & Video

B. Gallery & Slider

C. Text & Code

D. Contact Form

Câu 8: Để thay đổi nội dung video trong khối hình ảnh/video, bạn có thể sử dụng thông số nào để điều chỉnh tỷ lệ màn hình?

A. Full Width

B. Aspect Ratio

C. Title/Subtitle

D. Top/Bottom

Câu 9: Khi thêm hình ảnh từ máy tính vào trang web, bạn có thể gán liên kết hoặc nội dung thay thế (Alt) cho hình ảnh ở đâu?

A. Trong mục Description

B. Trong mục Background

C. Trong mục Image/Video

D. Trong mục Link Image to

Câu 10: Hạn chế sử dụng thanh trượt cho trang web trên thiết bị di động là vì lý do gì?

A. Thanh trượt làm giảm chất lượng hình ảnh

B. Thanh trượt chiếm nhiều tài nguyên và làm chậm tốc độ tải trang

C. Thanh trượt không hỗ trợ video

D. Thanh trượt không thể được chỉnh sửa trên thiết bị di động

PHẦN II. Câu trắc nghiệm đúng sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai

Câu 1: Hình ảnh và video trên trang web có vai trò quan trọng trong việc thu hút người truy cập. Đánh giá các phát biểu sau đúng hay sai:

a) Hình ảnh đại diện thường được đặt ở đầu trang và có chiều rộng bằng chiều rộng trang web.

b) Hình ảnh minh họa cho nội dung bài viết thường có kích thước nhỏ và được đặt xen kẽ với nội dung văn bản.

c) Hình ảnh/video nổi bật thường có màu nền nhất quán và có thể chứa tiêu đề hoặc nội dung ngắn.

d) Hình ảnh và video không cần phải được điều chỉnh kích thước hoặc màu nền để phù hợp với bố cục trang web.

Câu 2: Bộ sưu tập và thanh trượt là hai cách hiển thị hình ảnh/video trên trang web. Đánh giá các phát biểu sau đúng hay sai:

a) Bộ sưu tập (gallery) hiển thị nhiều hình ảnh hoặc video cùng lúc dưới dạng lưới hoặc danh sách.

b) Thanh trượt (slider) hiển thị tất cả hình ảnh hoặc video cùng lúc và cho phép người dùng tương tác để chuyển đổi giữa chúng.

c) Thanh trượt (slider) thường dùng để quảng bá các chương trình ưu đãi, dịch vụ hoặc sản phẩm bằng cách hiển thị từng hình ảnh hoặc video một.

d) Bộ sưu tập (gallery) không cho phép người dùng tương tác để xem các hình ảnh hoặc video cụ thể.

PHẦN III. Câu trả lời ngắn. Thí sinh trả lời từ câu 1 đến câu 3

Câu 1: Hình ảnh và video trên trang web có thể giúp trang web thu hút người truy cập bằng cách nào?

Câu 2: Sự khác biệt chính giữa bộ sưu tập (gallery) và thanh trượt (slider) là gì?

Câu 3: Khi thêm hình ảnh/video vào trang web, bạn cần điều chỉnh những thông số nào để đảm bảo chúng phù hợp với bố cục trang?