CARA MENAMPILKAN GAMBAR PADA HTML
1. Gambaran Umum HTML
HTML (Hypertext Markup Language) merupakan bahasa yang digunakan untuk menampilkan informasi pada halaman web. HTML menampilkan informasi dalam bentuk hypertext , selain itu HTML juga mendukung sekumpulan perintah yang dapat digunakan untuk mengatur tampilnya informasi tersebut. Sesuai dengan namanya, bahasa ini menggunakan tanda (markup) untuk menandai perintah-perintahnya.
HTML didukung oleh beragam sistem opearsi yang ada saat ini sehingga memiliki interoperabilitas yang baik pada beragam platform sistem operasi, HTML sendiri dewasa ini mendapatkan perhatian dari banyak pengembangan perangkat lunak, karena memiliki beragam fasilitas, untuk tujuan memperkaya fitur yang bisa ditangani.
2. Kegunaan HTML
HTML dapat digunakan untuk beberapa hal seperti :
a. Publikasi dokumen online dengan judul, teks, tabel, daftar, foto, dll.
b. Mengambil informasi online melalui tautan hypertext , dengan sekali klik sebuah tombol.
c. Merancang formulir untuk melakukan transaksi denganlayanan jarak jauh, untuk digunakan dalam mencari informasi, melakukan pemesanan, pembelian produk., dll.
d. Menyertakan spread sheet, klip video, klip suara, dan apliaksi lainnya secara langsung di dalam dokumen.
3. Cara Menampilkan Gambar di HTML
HTML menyediakan sebuah tag yang khusus untuk menampilkan gambar atau image, yaitu tag “ <img>”. Tag ini digunakan untuk menampilkan gambar atau image dengan berbagai ekstensi, seperti jpg, png, gif, bmp, dll. Berikut langkah-langkah untuk menampilkan gambar di HTML :
1. Unggah gambar
Tentu kita harus siapkan dulu gambar yang akan kita gunakan. Untuk gambar bisa Anda dapatkan di layanna hosting gambar gratis, seperti Photobucket, Picasa Web Album, Imgur, Flickr, dll.
2. Buka berkas HTML yang akan ditambahkan gambar.
3. Tag img
Carilah tempat di bodi HTML yang ingin disisipkan gambar kemudian tulis tag <img>. Untuk menampilkan gambar, masukkan gambar ke dalam dua tanda kurung sudut tersebut.
4. Cari URL dari gambar yang akan digunakan.
Kunjungi laman situs yang Anda gunakan untuk mengunggah gambar. KLik kanan gambarnya kemudian pilih “Copy Image Location”.
5. Letakkan URL tersebut ke dalam atribut src
Yang harus diingat adalah bahwa atribut HTML harus dimasukkan ke dalam tag agar dapat dimodifikasi. Atribut Src merupakan singkatan dari “source” , yang akan memberitahu peramban (browser) dimana tempat untuk menemukan gambarnya. Tulis src=” “ dan tempelkan URL gambar tadi di antara dua tanpa kutip tersebut.
Contoh :
<img
src=”http://www.exampleimagehost.com/my-cute-dog.jpg”>
6. Tambahkan atribut alt
Secara teknis, sampai pada langkah ke 5 sesungguhnya HTML Anda telah memenuhi syarat agar dapat menampilkan gambra, tetapi sebaiknya Anda juga menambahkan atribut alt untuk membantu mesin telusur mencari tahu tentang isi gambar Anda. Jika sudah ditambahkan maka hasilnya akan seperti berikut :
<img
src=”http://www.exampleimagehost.com/my-cute-dog.jpg”alt=” kambingku sedang makan rumput”>
Note : Apabila gambar tersebut tidak begitu penting bagi isi laman, sertakan alt tanpa menggunakan teks (alt=””)
7. Simpan berkas HTML tersebut ke situs web Anda. Kunjungi laman yang baru diedit tersebut lalu refresh.
Sumber :
Bernadhed, dkk. 2017. Web Programming by Bernad Tagger
Andika Saputra, dkk. 2018. Analisis Pengaruh Struktur HTML Terhadap Rangking Search Engine Result Page. Jurnal Mantik Penusa Vol.2 No.2
Enterpise, Jubilee. 2016. Pengenalan HTML dan CSS. Jakarta : PT Elex Media Komputindo
Maulana, Gungun. 2017. Pembelajaran Dasar Alogaritma dan Pemrograman Menggunakan E-LOGARITMA Berbasis Web. Jurnal Teknik Mesin Vol.06
Sovia, Rini. 2011. Membangun Aplikasi E-Library Menggunakan HTML, PHP, SCRIPT, dan MYSQL DATABASE. Jurnal PROCESSOR Vol.6 No.2
Wahyudi, Eko Nur. 2017. Alogaritma dan Pemrograman Format Laporan dengan Pascal. Jurnal Teknologi Informasi DINAMIK Vol.XII No.1
