Tutorial
Belajar HTML Dasar Untuk Pemula : cara memasukan gambar pada file HTML
Hallo apa kabar sobat semuanya,
pada kesempatan kali ini kami akan mencoba membagikan tutorial belajar HTML
dasar untuk pemula : cara memasukan gambar pada file HTML. Mungkin sebagian
dari sobat semua yang masih awam dan pemula akan sedikit kesulitan atau
barangkali sedang mencari cara memasukan gambar pada file HTML, tetapi dalam
pemrograman HTML kita tidak bisa begitu saja memasukan gambar layakanya dalam
ms.word akan tetapi yang perlu kita tahu adalah tag atau kode cara memangil
gambar agar bisa dimuat di dalam kode HTML kita.
Oke langsung saja, mari sobat simak
penjelasan dibawah ini :
Mengenal Atribut HTML
Setiap atribut HTML memiliki satu
atau lebih atribut HTML, atribut ini berfungsi untuk menyimpan informasi yang
berkaitan dengan file HTML tersebut.
Dan untuk memangil gambar atau
memunculkan gambar, kita akan mengunakan tag <img> dan mengunakan atribut
<src> yang akan kita gunakan untuk meletakan alamat file kita.
Selanjutnya untuk memasukkan nilai
pada atribut, kita gunakan operator sama dengan (=) diikuti dengan lokasi
gambar yang diapit oleh tanda kutip. Perhatikan contoh berikut ini :
<img src="gambar.jpg">
tag
img termasuk ke dalam
tag spesial dan tidak memiliki tag penutup
(Disebut juga sebagai Self
Closed Tag), seperti
tag-tag lainnya. Ini
dikarenakan tag ini
tidak memiliki konten seperti :
<title>Ini adalah Konten tag
title</title>
Sebagai pengganti, kita tambahkan
tanda slash (/) sebelum kurung tutup :
<img src="gambar.jpg" />
Sekarang saatnya anda mencoba
memuat gambar pada file HTML.
1.
Buatlah file HTML baru dengan nama latihan2.html
2.
Carilah sebuah gambar dan simpan satu folder dengan file HTML anda.
Ingat, simpan semua file dalam satu
folder karena jika berbeda folder maka gambar akan gagal di muat.
Kemudian ketikkanlah kode HTML
berikut pada file html latihan 2, edit
pada notepad bawaan windows atau aplikasi sejenis yang sobat punya:
<!DOCTYPE HTML>
<HTML>
<head>
<title>Judul File HTML</title>
</head>
<body>
<p>ini adalah contoh pemuatan gambar pada file HTML<p>
<img src=”logo.png”/>
</body>
</HTML>
Kemudian save=>dalam format
latihan.html=>dan bukalah di browser sobat. Maka hasilnya sebagai berikut :
Di dalam tag img selain terdapat
atribut src yang digunkan untuk menyimpan lokasi gambar, juga terdapat atribut
alt yang akan digunakan jika browser ataupun server gagal memuat file kita.
Lihat contoh berikut ini :
<img src=”logo.png” alt=”Ini adalah
teks alternative” />
Dan atribut lainnya adalah atribut width dan
height, yang berfungsi untuk menentukan lebar dan
tinggi dari gambar
tersebut. Yang akan kita bahas pada tutorial berikutnya yang berjudul Tutorial
Belajar HTML Dasar Untuk Pemula : cara menentukan lebar dan tinggi dari gambar
pada HTML.
Tidak ada komentar:
Posting Komentar