January 02, 2016

Cara menambahkan gambar dalam Bahasa HTML

Untuk memperindah sebuah halaman web, Kadang gambar juga perlu ditambahkan dalam halaman web kita, selain agar tampilan halaman web lebih berwarna, Gambar juga diperlukan untuk membuat
halaman web lebih menarik dan terlihat lebih proffesional,

Untuk menambahkan gambar dengan HTML, Kita perlu menambahkan element img dalam tatanan HTML tersebut, element png bisa dibilang unik karena element img tidak perlu menambahkan tag penutup untuk mengakhiri element tertsebut, element yang tidak memerlukan tag penutup biasa disebut dengan element kosong dan biasanya element seperti ini membutuhkan suatu attribut.
cara menambahkan attribut tersebut cukup mudah, kita hanya menambahkan attribut tersebut setelah nama element.

seperti contoh :

<Jenis Element Atrribut="nilai atrribut" _ ">

dan juga

<Jenis Element Attribut="nilai attribut" _ ">konten jika ada</tag penutup element>

Perlu diketahui bahwa kita juga dapat menambahkan lebih dari satu attribut dalam suatu element, kita tidak perlu mematuhi suatu aturan tertentu untuk menambahkannya, karena attribut boleh diletakkan secara bebas, dan untuk memisahkan attribut satu dengan yang lain kita hanya butuh menambahkan spasi di antara keduanya sebagai pemisah.


Untuk menambahkan gambar, Lihat Contoh :

Yang pertama harus dilakukan adalah, kita perlu menyiapkan gambar yang akan kita masukan ke dalam html
Setelah gambar sudah siap, Siapkan File HTML yang akan kita Masukan Gambar, dan kalau belum ada file nya, bisa kita buat dengan software notepad, notepad++, atau semacamnya.
Tahap ketiga adalah, memasukan Gambar ke dalam HTML, Perhatikan Caranya.

Kita Masukan Gambar kedalam Element Header. Lihat Contoh :

<h1><img src="C:\Users\ITProject\Pictures\ITProject.png" alt="Gambar ITProject">ITProject</h1>

Pembahasan :

Element src merupakan element alamat gambar tersebut disimpan, src merupakan singkatan dari source, penambahan alamat gambar src, juga dapat dilakukan dengan cara menambahkan link gambar dari internet, Contoh:

<h1><img src="itproject13[dot]blogspot[dot]com\logo\ITProject.png" alt="Gambar ITProject">ITProject</h1>

Element alt merupakan suatu teks yang akan ditampilkan apabila gambar yang kita masukan tidak tercetak dengan benar.

Tambahkan Element br setelah gambar agar lebih tertata rapi, element br merupakan element yang digunakan untuk menambahkan suatu baris dalam HTML. Lihat Contoh :

<h1><img src="C:\Users\ITProject\Pictures\ITProject.png" alt="Gambar ITProject"><br>ITProject</h1>

Setelah menambahkan tag br, kita bisa menambahkan artikel dibawah gambar tersebut.
Dibagian akhir kita perlu menyimpan file HTML tersebut dengan ekstensi *.html
setelah itu buka file HTML tersebut dengan Software Browser yang kita miliki.




Gambar sebelah kiri menunjukan bahwa gambar logo gagal dimuat.
Gambar sebelah kanan menunjukan bahwa gambar logo termuat dengan baik.

Share this

seorang blogger newbie yang menyukai informasi seputar microsoft dan juga menyukai pemrograman komputer. koding123.com

0 Comment to "Cara menambahkan gambar dalam Bahasa HTML"

Post a Comment