Apa itu embed di html?

❮ Sebelumnya Berikutnya ❯

Contoh

Animasi flash tertanam

Cobalah sendiri"

Definisi dan Penggunaan

Tag menentukan penampung untuk aplikasi eksternal atau konten interaktif [plug-in].

Dukungan peramban

Elemeniya nihiya nihiya nihiya nihiya nih

Perbedaan Antara HTML4. 01 dan HTML5

Tag yang baru di HTML5.

Catatan. Banyak browser web telah mendukung tag sejak lama. Namun, tag belum menjadi bagian dari spesifikasi HTML 4. Tag baru di HTML5, dan akan divalidasi di halaman HTML5. Namun, jika Anda menggunakannya di halaman HTML 4, halaman tersebut tidak akan divalidasi.

atribut

= Baru di HTML5

Nilai Atribut Deskripsi heightpixels Menentukan tinggi konten yang disematkan rcURL Menentukan alamat dari file eksternal ke embed typemedia_type Menentukan jenis media dari konten yang disematkan widthpixels Menentukan lebar konten yang disematkan

Atribut global

Tag juga mendukung Atribut Global dalam HTML.

Atribut acara

Tag juga mendukung Atribut Peristiwa dalam HTML.

Halaman terkait

Referensi DOM HTML. Sematkan Objek

Pengaturan Default CSS

Sebagian besar browser akan menampilkan elemen dengan nilai default berikut.

menanamkan. fokus {
garis besar. tidak ada;
}

❮ Sebelumnya Berikutnya ❯

Tag _ pada dokumen HTML adalah tag yang berfungsi untuk menampilkan halaman web [HTML] di dalam halaman web lain

Misalnya seperti ini

Atau seperti ini

Pada contoh di atas, kami menampilkan iframe yang berisi halaman HTML lain

sintaks iframe

Contoh sintaks ________29______ adalah sebagai berikut

Yang perlu diperhatikan adalah setiap harus ditulis dengan tag pembuka dan tag penutup yang lengkap meskipun tidak ada isinya.

Atribut Tag Iframe

Tag memiliki beberapa atribut di antaranya

• _2 - untuk memuat halaman dengan url tertentu

• _3 - untuk memuat kode HTML sebaris

• 4 - sebagai tooltip dan akan dibaca oleh pembaca layar untuk aksesibilitas

• _5 - lebar elemen

• _6 - tinggi elemen

• _7 - untuk pengaturan lazy load atau tidak

Serta atribut global lainnya seperti

• _8

• _9

• _0
• dll.

Contoh iframe yang menampilkan url https. //puding jagung. com/

_

Hasil keluaran

Atau kita juga bisa memuat kode HTML langsung sebaris menggunakan atribut

3

Perhatikan contoh berikut

_

Hasil keluaran

Lebar dan tinggi

Pada output di atas, ukuran iframe kita terlihat kecil. Itu terjadi karena kami tidak mengatur lebar dan tinggi iframe

Untuk mengaturnya, ada dua cara

1. Menggunakan atribut
   _5 dan
   6
2. Atau gunakan CSS
   _5 dan
   6

Contoh penggunaan atribut

Contoh menggunakan CSS

Hasil keluaran

Perilaku Tautan di Iframe

Tautan di akan ditangani secara internal di iframe itu sendiri. Jadi misalkan kita mengklik link di iframe, maka halaman baru akan ditampilkan di iframe itu sendiri, sedangkan halaman induk tidak berubah kemana-mana

Jika kita ingin link di iframe ditangani oleh halaman induk, kita bisa menggunakan target

7 atau target

8 pada tag

9 seperti yang sudah kita pelajari di pembahasan

Sematkan Youtube

Di antara

_0 fitur yang sering digunakan dalam dunia web adalah. menyematkan konten

Salah satunya adalah penyematan video YouTube

Jika kita ingin memuat video YouTube dalam dokumen HTML, kita bisa mengklik tombol share di halaman YouTube, lalu pilih Embed, lalu salin kode tersebut ke dalam HTML kita

Pilih tombol bagikan

Pilih sematkan

Kemudian salin kodenya

Hasil keluaran

Sematkan Instagram

Selain YouTube, kita juga bisa memuat postingan Instagram dalam bentuk dokumen HTML

Namun, kodenya cukup panjang dan rumit [walaupun akhirnya menggunakan iframe saat memeriksa elemen]

Berikut adalah contoh gambar yang disematkan dari Instagram

Lihat postingan ini di Instagram

Pos yang dibagikan oleh FORMULA 1® [@f1]

Sematkan Twitter

Hampir sama dengan Instagram, Twitter juga bisa disematkan dengan mudah, berikut contohnya

The Texas Bridge [Teknik Sastra] adalah jembatan sepanjang 80 meter melintasi salah satu danau di UI yang menghubungkan Fakultas Teknik dan Fakultas Ilmu Budaya [dulu Fakultas Sastra]. Persik. Indonesia. com/7DbVef9CLo

— Universitas Indonesia [@univ_indonesia] 14 Juli 2021

Sematkan PDF

Selain itu, kita juga dapat menggunakan tag untuk menyematkan file PDF

Kami hanya perlu mengganti

2 untuk mengarahkan ke file PDF

Sebagai contoh saya sudah menyiapkan file pdf sederhana di url /storage/2021/07/html-iframe/belajar-iframe. pdf

Jadi untuk menampilkannya dalam iframe, saya hanya perlu menjadikan url sebagai nilai dari atribut

2

Keluaran [tidak berfungsi di ponsel Google Chrome]

Tambahan. Tidak Semua Situs Dapat Menyematkan

Dikarenakan hal yang berkaitan dengan sekuritas, beberapa situs tidak dapat dibuka melalui . Contohnya seperti google. com, facebook. com, dll

Jika kita ingin situs kita tidak dimuat melalui

0, kita harus menanganinya dari sisi server [bukan dari sisi HTML]

Kesimpulan

Iframe adalah tag / elemen HTML yang memungkinkan kita memuat halaman web di dalam halaman web lain

Teknik ini sering digunakan untuk menyematkan konten seperti penyematan video YouTube, posting Instagram, tweet di Twitter, dll

Kode Program Lengkap

Bagi anda yang ingin mendapatkan kode program lengkapnya silahkan kunjungi repositori html-dasar di github

Jangan lupa kasih ⭐⭐

Pertemuan Lanjutan

Insya Allah pada pertemuan berikutnya kita akan membahas cara menampilkan simbol dan emoji di HTML

Apa itu penyematan di CSS?

Apa HTML yang benar untuk membuat hyperlink?

Bisakah kita menetapkan lebih dari satu atribut pada elemen HTML?

Jelaskan apa yang Anda ketahui tentang sintaks atau tag dalam HTML?