- Kumpulan tutorial html, css, PHP dan web design

Beranda » Tanpa Kategori »

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 :

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 :

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>

</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 :

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.

Mengenai Saya

Arsip Blog

Belum ada tanggapan untuk " "

Posting Komentar