Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

Beranda / DASAR HTML / GAMBAR HTML / HTML

Simple : Cara Mudah Membuat Gambar di HTML

Posting Komentar

Cara Mudah Tips Membuat Gambar di HTML

Cara Mudah Tips Membuat Gambar di HTML

Gambar oleh Mudassar Iqbal dari Pixabay 

Sudah gak terasa sekarang kita masuk pada pembahasan membuat gambar di HTML.Gambar sangatlah penting dalam sebuah website. simak dibawah!


Dikarenakan manusia lebih mudah menyerap informasi secara visual atau gambar dari pada berupa teks saja. Maka dari itu pada kesempatan kali ini kita akan belajar Tips membuat gambar di HTML.

Membuat Gambar di HTML

Dalam pembuatan gambar di HTML kita harus menggunakan tag <img>. Tag ini akan selalu di ikuti oleh atribut src. Atribut ini sama dengan atribut href.

Cuman bedanya src merujuk ke sebuah gambar yang akan ditampilkan. Sedangkan href merujuk ke sebuah link. Atribut src, ini harus diisi, kalau tidak diisi, gambar tidak akan mucul.
Ohh iya sobat!
Tag <img> ini adalah salah satu dari self closing tag, artinya tidak punya tag penutup.
Contoh benar:
.<img/>
Contoh salah:
.<img><img/>

Dan tag <img> ini, format gambarnya tidak semua bisa diambil atau dipakai di HTML contohnya seperti format PSD ini adalah format untuk adobe photoshop.

Terus format gambar apa yang di bolehkan?
Kalian bisa lihat tabel dibawah! 
Tips Membuat Gambar di HTML
Nahh itulah daftar dari format yang bisa ditampilkan di HTML dengan tag <img>. 
Dalam membuat gambar ada tiga cara:

Cara 1 (Menyimpan dalam satu folder)

Tips Membuat Gambar di HTML
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gambar di HTML</title>
</head>
<body>
<h1> Membuat Gambar di HTML</h1>
<p>Contoh gambar di HTML</p>
<p>
<img src="belajarnesia.png">
</p>
</body>
</html>
Hasilnya: 
Tips Membuat Gambar di HTML

Cara 2 (Menyimpan file gambar dengan folder yang berbeda)Tips Membuat Gambar di HTML

Source code: 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Gambar di HTML</title>
</head>
<body>
<h1> Membuat Gambar di HTML</h1>
<p>Contoh gambar di HTML</p>
<p>
<img src="images/belajarnesia.png">
</p>
</body>
</html>
Hasilnya: 
Tips Membuat Gambar di HTML
Hasilnya akan sama dengan cara yang kesatu. Yang menjadi beda, adalah cara menampilkan gambar jika file tidak dalam satu folder. 

Cara 3 (Mengambil File di Internet)

Kita langsung ketikan alamat gambar yang ada di internet
Contoh:
<img src="https://i.ytimg.com/vi/_fXQhV-mojY/maxresdefault.jpg" width="500" height="200">
Source code: 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gambar di HTML</title>
</head>
<body>
<h1> Membuat Gambar di HTML</h1>
<p>Contoh gambar di HTML</p>
<p>
<img src="https://i.ytimg.com/vi/_fXQhV-mojY/maxresdefault.jpg" width="500" height="200">
</p>
</body>
</html>
Hasilnya:
Tips Membuat Gambar di HTML
Nahh sampai sinih faham!
Sejauh ini tidak ada yang sulitkan!
Kalau sudah faham mari kita lanjutkan! 

Macam-macam Atribut Tag<img> di HTML

Tag <img> di HTML memiliki beberapa atribut tambahan seperti: 
Tips Membuat Gambar di HTML

Atribut alt

Atribut ini digunakan untuk alternatif teks pada gambar ketika gambar error ditampilkan.
Contoh:
Tips Membuat Gambar di HTML
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gambar di HTML</title>
</head>
<body>
<h1> Membuat Gambar di HTML</h1>
<p>Ini adalah contoh dari atribut alt ketika gambar gagal ditampilkan</p>
<p> gambar belajarnesia.com</p>
<p>
<img src="" width="500" height="200" alt="belajarnesia">
</p>
</body>
</html>
Nahh ketika gambar gagal ditampilkan maka atribut alt akan menampilkan teksnya saja.
Ohh iya atribut src kita kosongkan supaya gambar gagal untuk ditampilkan.

Atribut width dan height 

Atribut ini digunakan untuk menentukan lebar dan tinggi pada gambar.
Contoh: 
Tips Membuat Gambar di HTML
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gambar di HTML</title>
</head>
<body>
<h1> Membuat Gambar di HTML</h1>
<p>Ini adalah contoh dari atribut alt ketika gambar gagal ditampilkan</p>
<p> gambar belajarnesia.com</p>
<p>
<img src="Images/belajarnesia.png" width="150" height="100" alt="belajarnesia">
<img src="Images/belajarnesia.png" width="250" height="200" alt="belajarnesia">
<img src="Images/belajarnesia.png" width="350" height="300" alt="belajarnesia">
</p>
<hr>
</body>
</html>
Ohh iya sobat!
Satuan nilai untuk atribut ini adalah pixel (px). Jadi ketika kita menuliskan 100, itu artinya 100px. 


Bonus! (Menggunankan CSS)

Tips Membuat Gambar di HTML

Style

Style ini sebenarnya merupakan salah satu dari atribut dari tag <img>.selain yang di cantumkan diatas tadi. Atribut ini biasanya digunakan untuk memberikan style atau memberikan efek tertentu pada gambar. 

Coba kita contohkan!
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gambar di HTML</title>
</head>
<body>
<h1> Membuat Gambar di HTML</h1>
<p>Ini adalah contoh dari penggunaan style pada HTML menggunakan CSS</p>
<p> gambar belajarnesia.com</p>
<p>
<img src="Images/belajarnesia.png" style="width: 160px;border: 3px solid green;" />
<img src="Images/belajarnesia.png" style="width: 160px;border-radius: 10px;" />
<img src="Images/belajarnesia.png" style="width: 160px;border-radius: 160px;" />
<img src="Images/belajarnesia.png" style="width: 100px;height: 100px;border-radius: 50%;overflow: hidden; " />
<img src="Images/belajarnesia.png" style="width: 0px; height:0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 50px solid orange; " />
</p>
<hr>
</body>
</html> 
Hasilnya: 
Tips Membuat Gambar di HTML
Bisa kalian perhatikan contoh diatas!

Kita membuat 5 bentuk gambar dengan bentuk berbeda-beda. 
1. Kita berikan style garis (border) dengan ukuran 3px dan diberikan jenis solid berwarna hijau
Tips Membuat Gambar di HTML
2. Kita berikan style border-radius dengan ukuran 10px supaya membuat lengkungan pada area sisi-sisi gambar.
Tips Membuat Gambar di HTML
3. Kita berikan style border-radius dengan ukuran 160px supaya bentuk gambar sedikit lonjong.
Tips Membuat Gambar di HTML
4. Kita berikan style border-radius dengan ukuran 50% supaya gambar membentuk sebuah lingkaran.
Tips Membuat Gambar di HTML
5. Kita berikan border-left, border-right, border-bottom dengan ukuran 50px supaya membentuk sebuah segitiga.
 Tips Membuat Gambar di HTML

Membuat Background dengan Gambar di HTML

Dalam pembuatan background menggunakan gambar di HTML, kita harus menggunakan atribut dari CSS yakni background-image. Tentunya kita wajib mengisi URL pada gambarnya.

Coba kita contohkan!
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat gambar di HTML</title>
</head>
<body style="background-image: url(images/belajarnesia.png);
background-size:cover;
background-attachment: fixed;background-repeat: no-repeat;">
<h1>Background</h1>
<p>Ini adalah contoh penggunaan background dengan gambar</p>
</body>
</html>
Hasilnya: 
Tips Membuat Gambar di HTML

Membuat Gambar Menjadi Sebuah Link di HTML

Pembuatan gambar menjadi sebuah link di HTML biasanya kita harus menyatukan tag <a> dan juga tag <img>. Cara menyatukannya dengan cara tag <img> harus berada di tengah-tengah tag <a>.
Supaya lebih faham, mari kita contohkan!
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat gambar di HTML</title>
</head>
<body>
<h1>Membuat gambar menjadi sebuah link</h1>
<p>klik disini untuk berkunjung ke belajarnesia.com</p>
<p>
<a href="https://www.belajarnesia.com">
<img src="images/belajarnesia.png" width="150">
</a>
</p>
</body>
</html>
Hasilnya: 
Tips Membuat Gambar di HTML
Bagaimana sejauh ini sudah dapat difahami!
Saya berharap bisa difahami!
Coba kita simpulkan!

Kesimpulan

Pada tutorial kali ini yakni membuat gambar di HTML kita sudah belajar banyak tentang gambar: 

  1.  Membuat gambar di HTML
  2.  Macam-macam Atribut di tag <img>
  3. Bonus!
Intinya kita harus mengingat dasar dari pembuatan gambar di HTML yakni dengan cara menggunakan tag<img>. 

Next!!

Selanjutnya kita akan mempelajari membuat komentar di HTML. 

Posting Komentar untuk "Simple : Cara Mudah Membuat Gambar di HTML"