Multimedia and embedding

Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh

Chúng ta đã xem xét rất nhiều văn bản trong khóa học cho đến nay, nhưng một trang web sẽ thực sự nhàm chán nếu chỉ sử dụng văn bản. Cùng bắt đầu tìm hiểu cách làm cho web trở nên sống động với nhiều nội dung thú vị hơn! Mô-dun này khám phá cách sử dụng HTML để đưa các nội dung đa phương tiện vào trong các trang web, bao gồm nhiều cách khác nhau mà hình ảnh có thể được đưa vào và cách thức để nhúng video, âm thanh và thậm chí toàn bộ trang web.

Điều kiện tiên quyết

Trước khi bắt đầu mô-dun này, bạn nên có kiến thức nhất định về những điều cơ bản của HTML, như đã trình bày trước đây trong phần Introduction to HTML. Nếu bạn chưa đi qua mô-dun này (hay những phần tương tự), hãy tìm hiểu qua nó trước, sau đó quay lại!

Lưu ý: Nếu bạn làm việc trên máy tính / máy tính bảng / thiết bị khác mà bạn không có khả năng tạo file của riêng bạn, bạn có thể thử (đa phần) các ví dụ code trong các chương trình code chẳng hạn như JSBin hay Thimble.

Hướng dẫn

Mô-dun này bao gồm các bài viết sẽ đưa bạn đi qua tất cả những nguyên tắc cơ bản của việc nhúng đa phương tiện trên các trang web.

Hình ảnh trong HTML
Có nhiều loại hình đa phương tiện cần xem xét, nhưng hợp lý là bắt đầu với phần tử <img> khiêm tốn được sử dụng để nhúng một hình ảnh đơn giản vào trong một trang web. Trong bài viết này chúng ta sẽ xem xét cách sử dụng nó sâu hơn, bao gồm cả những điều cơ bản, chú thích nó bằng cách sử dụng <figure>, và cách nó liên quan đến hình nền CSS.
Nội dung video và âm thanh
Tiếp theo, chúng ta xem xét làm cách nào  để sử dụng các nhân tố HTML5 <video><audio> để nhúng video và audio vào các trang web, bao gồm cả những điều cơ bản, cung cấp quyền truy cập vào các định dạng tệp cho các trình duyệt khác nhau , thêm chú thích và phụ đề cũng như cách thêm dự phòng cho các trình duyệt cũ hơn.
Từ <object> đến <iframe> — các công nghệ nhúng khác
Tại thời điểm này, chúng tôi muốn thực hiện một số bước khác, xem xét một số yếu tố cho phép bạn nhúng nhiều loại nội dung khác nhau vào các trang web của mình: các nhân tố <iframe>,<embed><object>. <iframe> là để nhúng các trang web khác, hai nhân tố còn lại cho phep bạn nhúng các file PDF, SVG hay thậm chí là Flash - một công nghệ đang được phát triển, nhưng bạn  vẫn có thể thấy nó bán thường xuyên.
Thêm đồ họa vector vào web
Đồ họa vector có thể rất hữu ích trong một số trường hợp nhất định. Không giống như các định dạng thông thường như PNG/JPG, chúng không làm biến dạng/vỡ điểm ảnh khi phóng to - chúng có thể vẫn mượt mà khi thu nhỏ. Bài viết này giới thiệu với bạn về đồ họa vector là gì và cách đưa định dạng  SVG phổ biến trong các trang web.
Hình ảnh phản hồi
Hiện có nhiều các thiết bị khác nhau có thể truy cập vào Web - từ điện thoại di động đến các máy tính để bàn - một khái niệm cần thiết hiện tại đề là chủ được công nghệ web hiện đại đó là thiết kế đáp ứng. Điều này đề cập đến việc tạo ra các trang web có thể tự động thay đổi các tính năng của nó để phù hợp với các loại kích cỡ màn hình khác nhau, các độ phân giải khác nhau, v.v. Vấn đề này sẽ được đề cập chi tiết hơn trong mô đun CSS sau này, nhưng hiện tại chúng ta xem xét các công cụ HTML có sẵn để tạo ra các trang web đáp ứng, bao gồm các phần tử <picture>.

Đánh giá

Bài đánh giá sau đây sẽ kiểm tra sự hiểu biết của bạn về các khía niệm cơ bản về HTML được đề cập trong các hướng dẫn ở trên:

Trang giật gân Mozilla
Trong bài đánh giá này, chúng tôi sẽ kiểm tra kiến thức của bạn về các kỹ thuật được thảo luận trong mô đun này, giúp bạn thêm một số hình ảnh và video vào một trang giật gân thú vị về Mozilla!

Xem thêm

Thêm một bản đồ trên đầu một hình ảnh
Bản đồ hình ảnh cung cấp một cơ chế để làm cho các  phần khác nhau của hình ảnh liên kết đến các địa điểm khác nhau (hãy nghĩ về một bản đồ liên kết đến thông tin thêm về mỗi quốc gia khác nhau mà bạn click vào). Kỹ thuật này đôi khi có thể hữu ích.
Kiến thức cơ bản về Web 2

Một điều tuyệt vời của khóa học nền tảng này của Modzilla là khám phá và kiểm tra một số kỹ năng được đề cập trong  mô đun Đa phương tiện và nhúng  này. Tìm hiểu sâu hơn về soạn thảo web, thiết kế khả năng truy cập, chia sẻ tài nguyên, sử dụng phương tiện trực tuyến, và làm việc mở (nghĩa là nội dung của bạn có sẵn và được người khác chia sẻ miễn phí).