You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Thẻ Embed giúp bạn chèn mọi kiểu dữ liệu vào trong trang HTML

Thẻ Embed giúp bạn chèn mọi kiểu dữ liệu vào trong trang HTML

Chúng ta sẽ học tiền thân của thẻ Video là thẻ nào? D(ồng thời cách chèn của những thẻ khá đa năng này.

Xem thêm bài viết

Bạn thắc mắc là trước khi có thẻ Img và Video thì chúng ta dùng thẻ gì để chèn video và hình ảnh vào trang HTML. Trước khi có hai thẻ kể trên thì chúng ta có một thẻ khác thay thế.  Loại thẻ này gần như đa năng và bạn có thể chèn được tất cả những gì bạn cần chỉ bằng một thẻ duy nhất. Cũng chính vì chúng đa năng quá nên thành ra thẻ này  không được chuyên cho lắm. Thẻ mà mình đề cập chính là thẻ Object và thẻ Embed.

Hai thẻ này liên quan gì đến đời nhau?

Thẻ Object là thẻ đầu tiên có tính năng chèn đa năng các thể loại vào HTML. Object có khả năng chèn hình ảnh, âm thanh, PDF, video,…Thậm chí là Java Applets. Java Applets là một chương trình dùng để chèn game hoặc ứng dụng vào trình duyệt. Cái này ngày xưa chắc bạn nào cũng đã từng chơi game trên web sẽ thấy nhiều. Java Applets được viết bằng ngôn ngữ Java.

Embed sinh sau đẻ muộn hơn Object. Chính xác thì Embed ra đời cùng HTML5. Embed thay thế được rất nhiều thứ của Object. Embed trong HTML có cấu trúc đơn giản hơn nhiều so với Object.

Cú pháp thẻ Object và Embed

Chúng ta sẽ cùng xem qua cú pháp của thẻ Object trước. Một chút nữa chúng ta sẽ so sánh cú pháp với thẻ Embed.

<object data= “…” type= “…”> Content </object>

Đây là cú pháp dành cho việc chèn hình ảnh. Thuộc tính Data tương đương với Src trong thẻ Img. Còn thuộc tính Type là loại ảnh của đường dẫn. Content của Object trong trường hợp này có chức năng tương tự như thuộc tính Alt của thẻ Img.

Ví dụ

<!doctype html>
<html>

<head>
    <title>Trang web giới thiệu ẩm thực sáng tạo</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay" />
    <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn" />
    <link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>

<body>
    <nav>
        <a href="try.html" class="main-menu">Trang chủ</a> |
        <a href="thuc-don.html" class="main-menu">Thực Đơn</a> |
        <a href="lien-he.html" class="main-menu">Liên Hệ</a>
    </nav>
    

    <h1>Ẩm thực 47 ngõ đường phố Sài Gòn</h1>
    <nav id="gola">
        <a href="#" class="main-top">Giới thiệu dự án</a> |
        <a href="#" class="main-top">Mục tiêu dự án</a> |
        <a href="#" class="main-top">Điểm nhấn dự án</a>
    </nav>
    <object data="images/sai-gon.jpg" type="image/jpg" width="1100" height="800">
    </object>
    <pre>
            Sài Gòn không giống với Hà Nội bởi thời tiết Sài Gòn luôn thất thường.
                Sài Gòn không có đặc sản của riêng mình vì Sài Gòn là nơi dung nạp mọi nền văn hoá.
                    Muốn ăn món Thái, 
                            Có ngay! 
                    Muốn ăn món Hàn, 
                            Hãy nhìn bên kia đường! 
                    Muốn ăn thịt nướng, 
                            Đi thêm vài bước nữa! 
                    Muốn ăn món Nhật, 
                            Ghé đối diện! 
                Sài Gòn tuy có vẻ đơn điệu về ẩm thực nhưng chính Sài Gòn cũng có một phong cách rất riêng mà chỉ có ở Sài Gòn
                    Những buổi tối không ngủ 
                        Ngắm nhìn đường phố nhộp nhịp
                            Bên cạnh những người mình yêu thương cùng ly cà phê hương vị đậm đà. 
                Sài Gòn là nơi của những ly cà phê đặc biệt. 
                Hiếm có nơi mà người ta có thể thưởng thức được ly cà phê hấp dẫn bằng nhiều hình thức khác nhau. 
                Có một Sài Gòn rất khác... 
            
            Chúng ta sẽ khám phá Sài Gòn bằng mọi cung bậc mà bạn có thể cảm nhận được. Thấm nhuần những giá trị tinh thần khác biệt. Đó mới là Sài Gòn. Một Sài Gòn diễm tình hoa lệ.
        </pre>
        
        <h1>Khám phá Sài Gòn ngay nào</h1>
        <center><a href="thuc-don.html"><button class="button1">Khám phá ngay</button></a></center>
        <h2>Giới thiệu dự án</h2>
        <p>Dự án được thự chiện bởi một nhóm bạn trẻ có niềm đam mê với ẩm thực nơi họ sinh ra. Chúng tôi luôn phát triển dự án theo đúng tôn chỉ "Ngon-bổ-rẻ". Chúng tôi luôn muốn mang đến cho bạn những trải nghiệm ẩm thực chỉ có ở Sài Gòn không nơi đâu có được. </p>
        <h2>Mục tiêu dự án</h2>
        <p>Chúng tôi muốn hoàn thành trọn vẹn bộ bản đồ ẩm thực Sài Gòn theo từng quận huyện khác nhau. Hiện chúng tôi đã có bản đồ của hai huyện ngoại thành thành phố.</p>
        <h2>Điểm nhấn dự án</h2>
        <p>Món ăn đường phố thường bị gắn mác là kém vệ sinh. Nhưng chúng tôi muốn mang đến một trải nghiệm khác biệt hơn dành cho bạn. Một trải nghiệm thức ăn đường phố rẻ nhưng hợp vệ sinh.</p>
        
</body>

</html>

Kết quả ví dụ

 

Thuộc tính Data, Width, Height đã khá quen với các bạn rồi. Trong thẻ Object có thể có một hoặc nhiều thẻ Param (Parameter). Thẻ Param có tác dụng định nghĩa cho các tham số cho các HTML Plugin mà thẻ Object sử dụng. Tuỳ dữ liệu mà chúng ta sẽ có một hoặc nhiều Param.

Cú pháp có thêm thẻ Param

 

<object data= “…” width= “…” height= “…”>

<param name= “…” value= “…”>

<param name= “…” value= “…”>

<param name= “…” value= “…”>

            …

</object>

Ví dụ

<!doctype html>
<html>

<head>
    <title>Trang web giới thiệu ẩm thực sáng tạo</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay" />
    <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn" />
    <link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>

<body>
    <nav>
        <a href="try.html" class="main-menu">Trang chủ</a> |
        <a href="thuc-don.html" class="main-menu">Thực Đơn</a> |
        <a href="lien-he.html" class="main-menu">Liên Hệ</a>
    </nav>
    

    <h1>Ẩm thực 47 ngõ đường phố Sài Gòn</h1>
    <nav id="gola">
        <a href="#" class="main-top">Giới thiệu dự án</a> |
        <a href="#" class="main-top">Mục tiêu dự án</a> |
        <a href="#" class="main-top">Điểm nhấn dự án</a>
    </nav>
    <pre>
            Sài Gòn không giống với Hà Nội bởi thời tiết Sài Gòn luôn thất thường.
                Sài Gòn không có đặc sản của riêng mình vì Sài Gòn là nơi dung nạp mọi nền văn hoá.
                    Muốn ăn món Thái, 
                            Có ngay! 
                    Muốn ăn món Hàn, 
                            Hãy nhìn bên kia đường! 
                    Muốn ăn thịt nướng, 
                            Đi thêm vài bước nữa! 
                    Muốn ăn món Nhật, 
                            Ghé đối diện! 
                Sài Gòn tuy có vẻ đơn điệu về ẩm thực nhưng chính Sài Gòn cũng có một phong cách rất riêng mà chỉ có ở Sài Gòn
                    Những buổi tối không ngủ 
                        Ngắm nhìn đường phố nhộp nhịp
                            Bên cạnh những người mình yêu thương cùng ly cà phê hương vị đậm đà. 
                Sài Gòn là nơi của những ly cà phê đặc biệt. 
                Hiếm có nơi mà người ta có thể thưởng thức được ly cà phê hấp dẫn bằng nhiều hình thức khác nhau. 
                Có một Sài Gòn rất khác... 
            
            Chúng ta sẽ khám phá Sài Gòn bằng mọi cung bậc mà bạn có thể cảm nhận được. Thấm nhuần những giá trị tinh thần khác biệt. Đó mới là Sài Gòn. Một Sài Gòn diễm tình hoa lệ.
        </pre>
        <object data="videos/demo.mp4" width="800" height="600">
            <param name="quality" value="high">
            <param name="autoplay" value="true"> 
        </object>
        <h1>Khám phá Sài Gòn ngay nào</h1>
        <center><a href="thuc-don.html"><button class="button1">Khám phá ngay</button></a></center>
        <h2>Giới thiệu dự án</h2>
        <p>Dự án được thự chiện bởi một nhóm bạn trẻ có niềm đam mê với ẩm thực nơi họ sinh ra. Chúng tôi luôn phát triển dự án theo đúng tôn chỉ "Ngon-bổ-rẻ". Chúng tôi luôn muốn mang đến cho bạn những trải nghiệm ẩm thực chỉ có ở Sài Gòn không nơi đâu có được. </p>
        <h2>Mục tiêu dự án</h2>
        <p>Chúng tôi muốn hoàn thành trọn vẹn bộ bản đồ ẩm thực Sài Gòn theo từng quận huyện khác nhau. Hiện chúng tôi đã có bản đồ của hai huyện ngoại thành thành phố.</p>
        <h2>Điểm nhấn dự án</h2>
        <p>Món ăn đường phố thường bị gắn mác là kém vệ sinh. Nhưng chúng tôi muốn mang đến một trải nghiệm khác biệt hơn dành cho bạn. Một trải nghiệm thức ăn đường phố rẻ nhưng hợp vệ sinh.</p>
        
</body>

</html>

Kết quả ví dụ

 

Thuộc tính Name trong Param là tên của tham số. Thuộc tính Value là giá trị của tham số.

Thẻ Object khá phức tạp đúng không? Thến nên W3C khuyên bạn không nên dùng thẻ này nữa.

Cú pháp thẻ Embed

<embed src= “…”>

Hoặc

<embed src= “…”/>

 

Ngoài thuộc tính Src bắt buộc phải có thì bạn còn có các thuộc như Width, Height, Type, Quality,…

Ví dụ

 

<!doctype html>
<html>

<head>
    <title>Trang web giới thiệu ẩm thực sáng tạo</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay" />
    <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn" />
    <link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>

<body>
    <nav>
        <a href="try.html" class="main-menu">Trang chủ</a> |
        <a href="thuc-don.html" class="main-menu">Thực Đơn</a> |
        <a href="lien-he.html" class="main-menu">Liên Hệ</a>
    </nav>
    

    <h1>Ẩm thực 47 ngõ đường phố Sài Gòn</h1>
    <nav id="gola">
        <a href="#" class="main-top">Giới thiệu dự án</a> |
        <a href="#" class="main-top">Mục tiêu dự án</a> |
        <a href="#" class="main-top">Điểm nhấn dự án</a>
    </nav>
    <object data="images/sai-gon.jpg" type="image/jpg" width="1100" height="800">
    </object>
    <pre>
            Sài Gòn không giống với Hà Nội bởi thời tiết Sài Gòn luôn thất thường.
                Sài Gòn không có đặc sản của riêng mình vì Sài Gòn là nơi dung nạp mọi nền văn hoá.
                    Muốn ăn món Thái, 
                            Có ngay! 
                    Muốn ăn món Hàn, 
                            Hãy nhìn bên kia đường! 
                    Muốn ăn thịt nướng, 
                            Đi thêm vài bước nữa! 
                    Muốn ăn món Nhật, 
                            Ghé đối diện! 
                Sài Gòn tuy có vẻ đơn điệu về ẩm thực nhưng chính Sài Gòn cũng có một phong cách rất riêng mà chỉ có ở Sài Gòn
                    Những buổi tối không ngủ 
                        Ngắm nhìn đường phố nhộp nhịp
                            Bên cạnh những người mình yêu thương cùng ly cà phê hương vị đậm đà. 
                Sài Gòn là nơi của những ly cà phê đặc biệt. 
                Hiếm có nơi mà người ta có thể thưởng thức được ly cà phê hấp dẫn bằng nhiều hình thức khác nhau. 
                Có một Sài Gòn rất khác... 
            
            Chúng ta sẽ khám phá Sài Gòn bằng mọi cung bậc mà bạn có thể cảm nhận được. Thấm nhuần những giá trị tinh thần khác biệt. Đó mới là Sài Gòn. Một Sài Gòn diễm tình hoa lệ.
        </pre>
        <object data="videos/demo.mp4" width="800" height="600">
            <param name="quality" value="high">
            <param name="autoplay" value="true"> 
        </object>
        <h1>Khám phá Sài Gòn ngay nào</h1>
        <center><a href="thuc-don.html"><button class="button1">Khám phá ngay</button></a></center>
        <h2>Giới thiệu dự án</h2>
        <p>Dự án được thự chiện bởi một nhóm bạn trẻ có niềm đam mê với ẩm thực nơi họ sinh ra. Chúng tôi luôn phát triển dự án theo đúng tôn chỉ "Ngon-bổ-rẻ". Chúng tôi luôn muốn mang đến cho bạn những trải nghiệm ẩm thực chỉ có ở Sài Gòn không nơi đâu có được. </p>
        <h2>Mục tiêu dự án</h2>
        <p>Chúng tôi muốn hoàn thành trọn vẹn bộ bản đồ ẩm thực Sài Gòn theo từng quận huyện khác nhau. Hiện chúng tôi đã có bản đồ của hai huyện ngoại thành thành phố.</p>
        <h2>Điểm nhấn dự án</h2>
        <p>Món ăn đường phố thường bị gắn mác là kém vệ sinh. Nhưng chúng tôi muốn mang đến một trải nghiệm khác biệt hơn dành cho bạn. Một trải nghiệm thức ăn đường phố rẻ nhưng hợp vệ sinh.</p>
        <embed src="images/man-utd.jpg" width="600" height="400">
        <embed src="videos/demo.mp4" width="600" height="400" quality="high" controls>
</body>

</html>

Kết quả ví dụ

Rõ ràng bạn nhấn thấy thẻ Embed gọn hơn thẻ Object do không có Param phát sinh. Tất cả các Param đều được thay thế bằng những thuộc tính có chức năng tương tự.

Tại sao lại không dùng thẻ Object và Embed?

Bạn thấy đó. Cú pháp của thẻ Object và Embed rất phức tạp. Thú thật lúc đầu học thì bạn sẽ nhớ nhưng sau một thời gian bạn sẽ có cảm giác là “em đi xa anh quá”. Cú pháp dài dòng và không nhớ nổi luôn mà. Còn một chuyện nữa là do chúng quá đa năng nên thường sẽ gây bối rối cho các nhà phát triển. Các trình duyệt hỗ trợ khác nhau cho thẻ Object nên các bạn sẽ không biết phải đối xử với Object như thế nào. Embed có vẻ khá hơn về mặt cú pháp nhưng cũng gặp trường hợp tương tự như thẻ Object.

Hôm nay các bạn đã học khá nhiều rồi. Chắc chắn là bạn cũng đã gặp không ít vấn đề với thẻ Embed. Hôm nay chắc chắn các bạn đã khá nhức đầu rồi. Hẹn gặp lại các bạn trong bài viết sau.

 




Đặt câu hỏi cho bài viết này ?