KLIK SALAH SATU IKLAN UNTUK MENUTUP

Thursday, October 25, 2018

Belajar HTML : Gambar dan Iframe


Belajar HTML  Gambar dan Iframe
Belajar Optimalkan


Gambar

Untuk menampilkan gambar dengan HTML
harus menggunakan tag img kemudian masukkan atribut “src=” pada tag .

Atribut src berguna untuk menghubungkan dengan file gambar,




jadi atribut src ini di gunakan untuk pemanggilan lokasi dan nama file gambar.
Jika file gambar terletak satu folder dengan file html yang bertugas untuk menampilkan gambar ini maka kita bisa langsung memasukkan nama file gambar yang ingin di tampilkan tersebut pada atribut src ini, tapi jika file gambar berada pada folder yang berbeda dengan file html yang menampilkan gambar maka anda bisa menambahkan nama folder nya seperti misalnya “nama_folder/filegambar”.
Jika file gambar berada di luar folder file html yang menampilkan gambar maka anda bisa menambahkan perintah “../”.

Ukuran gambar yang tampil dengan menambahkan atribut height=”....”


untuk mengatur tinggi gambar, dan menambahkan aribut width=”....” untuk menentukan lebar gambar yang tampil.
Tetapi cara ini sangat tidak di rekomendasikan karena anda harus memberikan atribut height dan width pada semua gambar yang anda tampilkan.
Jadi cara untuk mengatur ukuran gambar yang benar anda bisa menambahkan class atau id pada tag dan kemudian mengatur tinggi dan lebarnya menggunakan CSS.
Seperti contoh di bawah ini :

<head>
<title>Menampilkan gambar pada HTML | www.bloggerdokter.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Menampilkan gambar pada HTML | www.bloggerdokter.com</h1>
<img class="gambar" src="boggerdokter.png">
</body>

style.css :

.gambar{
height: 300px;
width: 500px;
}

Iframe 

Merupakan sebuah tag html yang berfungsi untuk menampilkan halaman website tanpa harus membuka website tersebut.
Menggunakan tag <iframe> untuk menampilkan.
Caranya : tambahkan atribut src=”...” pada tag pembuka <iframe> untuk meletakkan link url dari website yang ingin anda tampilkan.

<html>
<head>
<title>Simak Nasehat Dokter di bloggerdokter.com</title>
</head>
<body>
<h1>
Simak Nasehat Dokter di bloggerdokter.com</h1>
<iframe height="1000px" src="https://www.bloggerdokter.com" width="1000px"></iframe>
</body></html>


Simak Nasehat Dokter di bloggerdokter.com


0 comments:

Post a Comment

Segala Bentuk Kerja Sama Mohon Hubungi 081703224617 atau di link ini : https://bit.ly/2qsVo9e