Membuat Website lebih menarik dengan Gambar

Pernahkah terpikir oleh kalian sebuah website yang berisikan teks saja? Pastinya terlihat membosankan, bukan? Seorang web designer biasanya akan menyisipkan beberapa tambahan seperti gambar, video, animasi, grafik dan lain-lain agar website tidak terlihat “kaku” dan menambah daya tarik bagi pengunjungnya. Nah, untuk kali ini kita akan belajar bagaimana menyisipkan gambar pada HTML, gimana sih caranya? Check this out!

Gambar pada HTML

Tentunya gambar memiliki peran penting dalam sebuah website.  Entah itu sebagai ilustrasi dari sebuah kegiatan, atau sebagai media promosi iklan. Sebuah gambar diletakkan di tempat-tempat yang strategis agar terlihat oleh pengunjung website. Pada HTML, kita juga bisa menambahkan gambar berikut adalah langkah-langkahnya :

1.Membuat folder di htdocs

Langkah pertama yang perlu kalian lakukan adalah menyiapkan folder di dalam htdocs, yang bisa kalian temukan di localdisk>xampp>htdocs. Tujuannya adalah, untuk memudahkan kita untuk mengambil gambar di direktori tersebut untuk dimasukkan ke dalam text editor dan ditampilkan di peramban. Folder yang dibuat berisikan file html dan gambar.

 

2.Mengetikkan Sintaks

Setelah membuat folder, Selanjutnya kita akan mulai mengetikkan sintaks yang digunakan. Tag utama yang kita gunakan adalah tag <img> yang akan dikombinasikan dengan beberapa atribut nantinya. Perhatikan contoh berikut ini :

atribut-atribut yang dimasukkan memiliki fungsi tersendiri, seperti src , atribut ini berisikan file yang diketikkan pada text editor sesuai format (jpg/png) untuk ditampilkan ke peramban. alt atau teks alternatif digunakan untuk mendeskripsikan secara singkat atau tentang apa foto tersebut. width dan height akan mengatur lebar dan tinggi sesuai angka yang dimasukkan (biasanya ditulis dalam format px). Berikut adalah contoh formatnya:

3.Menampilkan Gambar pada Peramban

Diatas adalah hasil dari kode atau sintaks yang telah kita ketikkan. Gambar akan tampil karena berasal dari satu file yang sama. Namun kalaupun berada di folder yang berbeda pun tetap bisa tampil asalkan kalian mengetikkan pada src secara lengkap. Contohnya, ketika kalian menyimpan pada folder berbeda bernama pic ketikkan saja formatnya seperti ini :

Sekilas memang tidak ada bedanya dari format sebelumnya, tapi jika kalian jeli pasti ada perbedaanya. Benar, sebelum nama file yang saya ketikkan pada atribut src saya menambahkan nama folder dengan garis miring setelahnya baru setelah itu nama filenya. Dengan begini, gambar bisa tetap tampil meski tidak berada dalam satu file yang sama.

4.Menggunakan Hyperlink

Selain cara di atas, kita bisa mengggunakan cara ini. Langkah-langkahnya pun relatif mudah kalian hanya perlu mencari sebuah gambar, lalu menyalin linknya dengan klik kanan>salin alamat gambar dan menaruhnya pada atribut src kemudian menampilkannya. Cara ini sebenarnya lebih mudah, karena tidak perlu membuat folder dan menaruh satu folder yang sama.

 

5.Kombinasi Teks dan Gambar

Tentunya mereka berdua bisa dikombinasikan dong, contoh mudahnya sih pada blog ini. Daritadi kalian lihat kan ada banyak gambar? sama konsepnya di HTML, tinggal taruh saja tag <img> di dalam tag <p>. Nih contoh-contohnya :

Nah, sekarang coba deh kalian buat seperti ini :

Mimin yakin deh kalian bisa, dengan ketelitian dan kesabaran hihihi. Bisa dikreasikan sesuai selera masing-masing ya! Jangan pernah untuk berhenti mencoba dan teruslah berusaha. Jumpa lagi di artikel selanjutnya!