[HTML] Bài 3 – Các Nội Dung Nhúng

Các nội dung nhúng thì về cơ bản là những nội dung mà được nhập từ một tệp khác bên ngoài vào văn bản HTML mà thôi. Chúng ta đã từng “nhúng” một tệp ảnh vào trang web đơn trong bài viết trước rồi. Hãy cùng làm lại thao tác nhúng nội dung một vài lần nữa nhé.

Làm thế nào để thêm video vào trang đơn?

Lần này thì chúng ta sẽ thử nhúng các tệp video được lưu trữ cục bộ trước:

• Trước hết, bạn hãy đặt tệp video của bạn vào cùng thư mục với văn bản HTML.
• Nhờ Atom thực hiện câu thần chú này: vi
• Bạn sẽ thấy có gì đó hiện ra trông có dạng như thế này: <video src="" autoplay poster=""></video>
• Bây giờ dùng thuộc thuộc tính src để trỏ tới tệp video của bạn.
• Thay thế poster="" với thuộc tính controls
• Và như vậy là được rồi.

Ảnh chụp màn hình

HTML

<videosrc="bhaisajyaguru.mp4"autoplaycontrols>
   Dòng chữ này sẽ được hiển thị
   khi trình duyệt không tìm thấy video.
</video>

Một cách làm khác, đó là bạn có thể đăng tải video của bạn lên Youtube sau đó nhúng ngược trở lại trang đang viết. Hầu hết những website cho phép đăng tải và chia sẻ các tệp media sẽ đều cung cấp thêm một nút Chia sẻ với một lựa chọn embed. Bạn chỉ cần copy/paste mã HTML được cung cấp ở đó vào trang đơn của bạn là được.

Ảnh chụp màn hình

Code nhúng

<iframewidth="720"height="405"src="https://www.youtube.com/embed/omG0IrO-QH8"title="YouTube video player"frameborder="0"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe>

Chúng ta sẽ nói về thẻ iframe trong phần tiếp theo.

Liên kết tham khảo: Các định dạng video được hỗ trợ

Thẻ iframe

Thẻ iframe cho phép chúng ta nhúng một trang đơn trong một trang khác.

Ví dụ

<iframesrc="https://viblo.asia"width="360px"height="550px"></iframe>

Các thuộc tính width và height được sử dụng để thiết lập kích thước của cửa sổ bên trong chứa trang đơn được nhúng.

Làm thế nào để thêm audio vào trang đơn?

Việc nhúng một tệp audio vào trang đơn cũng được thực hiện tương tự. Chúng ta sẽ gửi tới Atom một câu thần chú khác:

• Ooommm… Atom, thần chú mới là.. au
• Poof! <audio src=””></audio>
• Bây giờ chúng ta cần thêm một đường dẫn tới tệp audio trong thuộc tính src.
• Đồng thời, chúng ta cũng cần thêm các thuộc tính autoplay và controls.

Có lẽ bạn cũng đã quen cách làm ảo thuật với Atom rồi. Kể từ giờ thì mình sẽ chỉ ghi code minh họa thôi nhé.

Ảnh chụp màn hình

HTML

<audiosrc="bhaisajyaguru.mp3"autoplaycontrols>
   Dòng chữ này sẽ được hiển thị
   nếu trình duyệt không tìm thấy tệp audio.
</audio>

Ngoài ra thì chúng ta cũng có những giải pháp miễn phí khác nếu như bạn không muốn tự lưu trữ các tệp audio cồng kềnh. Bạn có thể sử dụng một dịch vụ stream trực tuyến như SoundCloud chẳng hạn. Cái này cũng giống với YouTube thôi, nhưng là dành riêng để stream audio.

Ví dụ

iframe src="https://goo.gl/7KhiFK"
        width="300" height="500"
        scrolling="no" frameborder="no">
</iframe>

Ồ. Mình đã không để ý rằng bài hướng dẫn này đã hơi ồn ào rồi.
Thật xin lỗi bạn nếu như mấy đoạn mã minh họa phía trên làm bạn phân tán tư tưởng.

Sau 03 bài mở đầu, bây giờ thì chúng ta đã biết cách làm thế nào để thêm vào trang đơn các kiểu nội dung cơ bản. Việc quan trọng cần làm tiếp theo đó là nhóm các nội dung liên quan lại với nhau để tạo thành các phần của trang (thanh điều hướng, khu vực hiện nội dung chính, phần chân trang web, …) và làm cho các phần này hiển thị bắt mắt.

[Bài 4] Các thẻ Container