Skip to content Skip to sidebar Skip to footer
Home / HTML / Web Design

Cara Menyisipkan Gambar Di HTML Menggunakan Notepad

Post a Comment
Cara Menyisipkan Gambar Di HTML Menggunakan Notepad

Assalamu'alaikum wr.wb.
Pada kesempatan ini, saya akan membahas tentang cara menyisipkan gambar di HTML menggunakan notepad. Cara yang saya gunakan untuk menyisipkan gambar ini adalah cara yang umum digunakan oleh developer. Yaitu menggunakan tag <img>. Dengan tag tersebut, gambar akan tampil di halaman HTML. Sebenarnya cara ini bisa digunakan di text editor selain notepad asalkan file yang disimpan berformat HTML. Namun karena text editor yang saya gunakan adalah notepad++, maka saya menjelaskannya pun dengan cara notepad++ saja.

Selain itu, saya juga akan memberikan cara untuk mengatur posisi gambar di halaman HTML. Cara ini menggunakan atribut yang ada pada html itu sendiri. Untuk mengaturnya, kita hanya perlu menambahkan value pada atribut tersebut, sehingga posisi gambar terletak di tempat yang kita inginkan. Hal ini tentu membutuhkan sedikit logika dan ketekunan untuk mencoba.





Baca Juga


Beberapa hal yang perlu diperhatikan sebelum melanjutkan Tutorial ini adalah memahami dulu apa itu HTML. Bagi pembaca yang belum mengerti tentang HTML, silahkan baca artikel tentang pengertian HTML. Jika anda sudah memahaminya, pahami juga tentang tag dan atribut pada HTML. Lalu jangan lupa untuk mengunjungi artikel tentang kumpulan tag dan atribut pada HTML



Gambar diatas adalah gambar yang saya gunakan. silahkan simpan gambar tersebut di folder yang sama dengan file html, lalu ubahlah nama gambar tersebut menjadi "naruto.png"

Berikut ini merupakan contoh script untuk menampilkan gambar di HTML :


1. Cara Menampilkan Gambar

Untuk cara yang satu ini, kita perlu untuk membuatnya dengan menambahkan atribut src. Atribut tersebut berfungsi untuk menentukan letak gambar dan nama gambar yang ingin dimasukkan ke halaman web. Letak tersebut berdasarkan directory dari PC. Berikut merupakan contoh program untuk menampilkan gambar pada HTML.

<img src="naruto.png" />



2. Mengatur Posisi Gambar

Jika ingin mengatur posisi gambar (kanan, tengah, kiri) kita bisa gunakan atribut align. align sendiri berfungsi untuk menentukan letak atau posisi tiap tag. Jika kita atur tengah, maka gambar akan muncul ditengah, begitu juga sebaliknya. Berikut ini merupakan script untuk mengatur posisi gambar pada HTML

<img src="naruto.png" align="right" />



3. Mengatur Ukuran Gambar

Untuk mengatur ukuran gambar, kita gunakan atribut width dan height. dimana width merupakan atribut untuk menentukan lebar dan height merupakan atribut untuk menentukan tinggi. Berikut ini merupakan script untuk mengatur ukuran gambar pada HTML

<img src="naruto.png" width="800px" height="1000px"/>



4. Cara Memasukkan Background Gambar

Untuk mengatur background, kita tidak menggunakan tag <img> lagi. Disini kita gunakan tag <body background=""> berikut ini merupakan contoh script cara memasukkan background gambar di HTML

<body background="naruto.png">



5. Cara Membuat Header Gambar

Berikut ini merupakan cara untuk membuat header dengan gambar pada HTML

<img src="naruto.png" width="100%" height="100px"/>



Penutup

Demikianlah tutorial dari saya, apabila ada kekurangan atau kelebihan saya mohon maaf. Terimakasih telah berkunjung. Silahkan berkomentar. Assalamu'alaikum wr.wb.

Post a Comment for "Cara Menyisipkan Gambar Di HTML Menggunakan Notepad"