Cara menggunakan iframe untuk menampilkan halaman web dalam halaman web lain

Mei 19, 2022 Posting Komentar

Apa iframe

Iframe atau frame inline digunakan untuk menampilkan objek-objek eksternal, termasuk halaman web lainnya dalam halaman web. Iframe cukup banyak bertindak seperti mini web browser web browser. Juga, kandungan di dalam iframe ada sepenuhnya independen dari elemen sekitarnya.

Sintaks dasar untuk menambahkan iframe ke halaman web dapat diberikan dengan:

URL yang ditentukan dalam src poin atribut ke lokasi objek eksternal atau halaman web.

Berikut contoh tampilan "hello.html" berkas dalam iframe di dokumen saat ini.

Contoh :

Pengaturan Lebar dan Tinggi dari iFrame

Yang height dan width atribut yang digunakan untuk menentukan tinggi dan lebar iframe.

Anda juga dapat menggunakan CSS untuk mengatur lebar dan tinggi dari iframe, seperti yang ditunjukkan di sini:

Catatan: Kode width dan height nilai-nilai atribut yang ditetapkan dalam piksel secara default, tetapi anda juga dapat mengatur nilai-nilai ini dalam persentase, seperti 50%, 100% dan sebagainya. Default lebar iframe adalah 300 pixel, sedangkan standar tinggi 150 piksel.

Menghapus Default Frameborder

Iframe memiliki perbatasan di sekitar itu secara default. Namun, jika anda ingin memodifikasi atau menghapus iframe perbatasan, cara terbaik adalah untuk menggunakan CSS border properti.

Contoh berikut akan membuat iframe tanpa batas.

Demikian pula, anda dapat menggunakan border properti untuk tambahkan perbatasan pilihan anda untuk sebuah iframe. Contoh berikut akan membuat iframe dengan 2 piksel biru perbatasan.

Contoh :

Menggunakan iFrame sebagai Target Link

Iframe juga dapat digunakan sebagai target untuk hyperlink.

Iframe dapat diberi nama dengan menggunakan name atribut. Ini berarti bahwa ketika sebuah link dengan target atribut dengan nama itu sebagai nilai diklik, terkait sumber daya akan terbuka dalam iframe.

Mari kita coba contoh untuk memahami bagaimana hal ini pada dasarnya bekerja:

<p><a href="https://www.calonbloggers.my.id" target="myFrame">Open calonbloggers.my.id</a></p>

Pengertian HTML5 Doctype

Dokumen Deklarasi Tipe, atau DOCTYPE untuk jangka pendek, adalah instruksi untuk web browser tentang versi bahasa markup di mana halaman web yang tertulis.

Sebuah deklarasi DOCTYPE muncul di bagian atas halaman web sebelum semua unsur-unsur lain. Menurut spesifikasi HTML atau standar, setiap dokumen HTML membutuhkan valid jenis dokumen deklarasi untuk memastikan bahwa halaman web anda ditampilkan dengan cara mereka dimaksudkan untuk ditampilkan.

Deklarasi doctype biasanya hal pertama yang ditetapkan dalam dokumen HTML (bahkan sebelum pembukaan <html> tag); namun deklarasi doctype itu sendiri bukan merupakan tag HTML.

DOCTYPE HTML5 sangat singkat, ringkas, dan tidak bersifat case-sensitive.

<!DOCTYPE html>

Doctypes untuk versi sebelumnya dari HTML yang lebih lama karena bahasa HTML adalah SGML berbasis dan karena itu diperlukan sebuah referensi untuk sebuah DTD, tetapi mereka usang sekarang.

Dengan HTML5 ini tidak lagi terjadi dan deklarasi doctype hanya diperlukan untuk mengaktifkan mode standar untuk dokumen-dokumen yang ditulis menggunakan sintaks HTML.

Anda dapat menggunakan markup berikut sebagai template untuk membuat dokumen HTML5.

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

Catatan:

deklarasi doctype mengacu pada Document Type Definition (DTD). Itu adalah instruksi untuk web browser tentang apa versi bahasa markup halaman ditulis di. World Wide Web Consortium (W3C) yang menyediakan DTDs untuk semua versi HTML.

Harus menambahkan deklarasi doctype ketika membuat sebuah dokumen HTML. Juga, menggunakan W3C Validator untuk memeriksa HTML anda untuk markup atau kesalahan sintaks sebelum penerbitan online.

Membuat Layout Website

Membuat sebuah situs web dengan tata letak adalah kegiatan positioning berbagai elemen yang membuat sebuah halaman web dalam cara terstruktur dan memberikan tampilan yang menarik untuk website.

Anda telah melihat situs-situs web di internet biasanya menampilkan konten mereka dalam beberapa baris dan kolom, diformat seperti majalah atau surat kabar untuk memberikan pengguna pengalaman yang lebih baik membaca dan menulis lingkungan. Hal ini dapat dengan mudah dicapai dengan menggunakan tag-tag HTML, seperti <table>, <div>, <header>, <footer>, <section>, dll. dan menambahkan beberapa gaya CSS untuk mereka.

Tata Letak Berdasarkan Tabel HTML

Tabel menyediakan cara paling sederhana untuk membuat layout di HTML. Biasanya, ini melibatkan proses menempatkan isi seperti teks, gambar, dan sebagainya ke dalam baris dan kolom.

Berikut tata letak dibuat menggunakan HTML tabel dengan 3 baris dan 2 kolom pertama dan baris terakhir bentang kolom kedua dengan menggunakan tabel colspan atribut:

<!DOCTYPE html>

<head>

<title>HTML Table Layout</title>

</head>

<tr>

<h1 style="font-size:24px;">Calon Bloggers</h1>

</td>

</tr>

<li><a href="#" style="color:#333;">About</a></li>

<li><a href="#" style="color:#333;">Contact</a></li>

</ul>

</td>

<h2>Selamat datang di situs kami</h2>

<p>di sini anda akan belajar bagaimana untuk membuat website</p>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</body>

</html>

— Kode HTML di atas akan menghasilkan output sebagai berikut:

metode ini digunakan untuk menciptakan tata letak dalam contoh di atas adalah tidak salah, tapi itu tidak dianjurkan. Hindari tabel dan inline styles untuk membuat layout. Layout dibuat menggunakan tabel sering diberikan sangat lambat. Tabel hanya boleh digunakan untuk menampilkan data tabular.

HTML Div Layout Berdasarkan

Menggunakan <div> elemen adalah metode yang paling umum dari membuat layout di HTML. Yang <div> (singkatan dari divisi) elemen ini digunakan untuk menandai blok konten, atau mengatur elemen-elemen lainnya di dalam dokumen HTML. Hal ini dapat berisi lebih lainnya elemen div jika diperlukan.

Berikut contoh menggunakan elemen div untuk membuat beberapa kolom layout. Hal ini akan menghasilkan hasil yang sama seperti pada contoh sebelumnya yang menggunakan elemen tabel:

<!DOCTYPE html>

<head>

<title>HTML Div Layout</title>

<style>

body {

font: 14px Arial,sans-serif;

margin: 0px;

}

.header {

padding: 10px 20px;

background: #acb3b9;

}

.header h1 {

font-size: 24px;

}

.container {

width: 100%;

background: #f2f2f2;

}

.nav, .section {

float: left;

padding: 20px;

min-height: 170px;

box-sizing: border-box;

}

.nav {

width: 20%;

background: #d4d7dc;

}

.section {

width: 80%;

}

.nav ul {

list-style: none;

line-height: 24px;

padding: 0px;

}

.nav ul li a {

color: #333;

}

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.footer {

background: #acb3b9;

text-align: center;

padding: 5px;

}

</style>

</head>

<body>

<h1>Calon Bloggers</h1>

</div>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

<h2>Selamat datang di website kami</h2>

<p>di sini anda akan belajar bagaimana untuk membuat website</p>

</div>

</div>

</body>

</html>

— Kode HTML di atas akan menghasilkan output yang sama seperti contoh sebelumnya:

lebih Baik halaman web layout dapat dibuat dengan menggunakan elemen DIV dan CSS. Anda dapat mengubah tata letak dari semua halaman website anda dengan mengedit salah satu file CSS. Untuk belajar tentang CSS secara rinci, silakan periksa kami CSS tutorial bagian.

Menggunakan HTML5 Elemen Struktural

HTML5 telah memperkenalkan elemen-elemen struktural seperti <header>, <footer>, <nav>, <section>, dll. untuk menentukan bagian-bagian yang berbeda dari halaman web yang lebih semantik cara.

Anda dapat mempertimbangkan elemen-elemen ini sebagai pengganti sering digunakan dalam kelas seperti .header, .footer, .nav, .section, dll. Contoh berikut menggunakan HTML5 baru yang elemen-elemen struktural untuk membuat tata letak yang sama yang telah kita buat pada contoh sebelumnya.

<!DOCTYPE html>

<head>

<title>HTML5 Web Page Layout</title>

<style>

body {

font: 14px Arial,sans-serif;

margin: 0px;

}

header {

padding: 10px 20px;

background: #acb3b9;

}

header h1 {

font-size: 24px;

}

.container {

width: 100%;

background: #f2f2f2;

}

nav, section {

float: left;

padding: 20px;

min-height: 170px;

box-sizing: border-box;

}

section {

width: 80%;

}

nav {

width: 20%;

background: #d4d7dc;

}

nav ul {

list-style: none;

line-height: 24px;

padding: 0px;

}

nav ul li a {

color: #333;

}

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

footer {

background: #acb3b9;

text-align: center;

padding: 5px;

}

</style>

</head>

<body>

<h1>Calon Bloggers</h1>

</header>

<nav>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<h2>Selamat datang di situs kami</h2>

<p>di sini anda akan belajar Bagaimana untuk membuat website</p>

</section>

</div>

</footer>

</div>

</body>

</html>

— Kode HTML di atas akan menghasilkan output yang sama seperti contoh sebelumnya:

Tabel berikut memberikan gambaran singkat dari baru HTML5 elemen struktural.

Tag

<header> = Merupakan header dari dokumen atau bagian.

<footer> = Mewakili footer dari dokumen atau bagian.

<nav> = Merupakan bagian dari link navigasi.

<section> = Merupakan bagian dari sebuah dokumen, seperti header, footer dll.

<article> = Merupakan sebuah artikel, posting blog, atau lainnya self-contained unit informasi.

<aside> = Mewakili beberapa konten secara longgar terkait dengan konten halaman.

Calon Bloggers

Widget HTML #1

Cara menggunakan iframe untuk menampilkan halaman web dalam halaman web lain

Posting Komentar untuk "Cara menggunakan iframe untuk menampilkan halaman web dalam halaman web lain"