Dutormasi.com – Halo sahabat Dutormasi!! Kali ini kita kembali lagi ni membahas pembuatan web Sederhana dan kali ini kita akan coba membahas memasukkan gambar ke dalam web. Pastinya biar tambah keren dong. Nah sebelum kita masuk ke pembuatan web dengan HTML nya pastikan baca dulu ya yang sebelumnya (Membuat Heading dan Paragraf menggunakan HTML). Nah yuk langsung kita bahas.

Menambahkan gambar ini sangat penting untuk mempercantik tampilan web kita. Dengan adanya gambar membuat pandangan kita terhadap suatu web membuat kita tidak bosan dan memahami informasi melalui dengan gambar. Sintax nya juga gak sulit kok, hanya menambahkan tag img pada file HTML yang sudah kita buat kemarin.

Bahan yang harus disiapkan yaitu pastinya gambarnya, ya kan?. Mencari gambar ini bisa kita buat, download atau hanya berupa URL saja. Tapi disini saya akan menggunakan logo dari Dutormasi sendiri seperti yang terlihat pada gambar dibawah.

Untuk Selanjutnya ikuti langkah2 berikut ya!!

1. Pindahkan dulu file HTML dan gambar di satu tempat.Disini saya akan memasukkan kedua file ke Folder “web”. Fungsinya agar kita mudah untuk melakukan pemasukkan gambarnya ke dalam sintax HTML.

Cara Memasukkan Gambar di Web menggunakan HTML

2. Buat lagi folder ke didalam folder web dengan nama folder img (optional).

Cara Memasukkan Gambar di Web menggunakan HTML

3. Setelah itu kita buka lagi file HTML kita yang sudah kita buat sebelumnya. Kali ini mimin menggunakan Visual Studio Code ya… Pakai Notepad biasa juga masih bisa kok.

Cara Memasukkan Gambar di Web menggunakan HTML

4. Setelah itu, dibawah tulisan dutormasi yuk kita masukkan gambar kita dengan menambahkan sintax

<img src=”” >

5. Didalam tanda kutip src ini kita akan memasukan alamat / posisi dari gambar yang sudah kita siapkan tadi. Yaitu img/namafile.png . Nama file disini harus benar-benar sama ya besar kecil hurufnya. Kita contohkan dengan yang mimin buat. Sekaligus kita atur besar gambarnya ya

<img src=”img/BARU.png” width=”200px” height=”200px”>

6. Selanjutnya, tinggal disave deh file HTML nya. Code terlihat menjadi seperti ini.

Baca Juga :  Cara menambahkan Video dan Musik di HTML

(Yang mau source code nya balik lagi ke postingan sebelumnya ya..)

Cara Memasukkan Gambar di Web menggunakan HTML

7. Nah, bagi kalian yang teliti pasti bisa liat ada kode yang kita tambahkan. Ada yang tau? Yap benar tag <center> yang membuat teks dan gambar kita menjadi ke tengah. Hasilnya akan menjadi seperti ini.

Cara Memasukkan Gambar di Web menggunakan HTML

Sedikit lebih baguskan? Terus ikuti postingan ya, kita akan buat tampilan web sederhana kita menjadi lebih bagus lagi dari ini secara pelan-pelan. Semoga bermanfaat ya untuk teman- teman. Baiklah mungkin sampai sini saja postingan kali ini. Sekian dan terima kasih.

Salam Dutormasi !!