HTML DASAR PART 5MENAMPILKAN GAMBAR PADA WEBSITE
HTML DASAR PART 5
MENAMPILKAN GAMBAR PADA WEBSITE
Seperti biasa, sebelum belajar alangkah baiknya berdo'a terlebih dahulu.
Kali ini kita sudah memasuki pembelajaran ke 5 (lima) atau Part-5 HTML dasar. Sebelumnya kita sudah belajar di Part-4 tentang Hyperlink. Di Part 5 ini kita akan belajar memasukkan atau menampilkan gambar pada halaman website kita.
Untuk menampilkan gambar pada website, kita memerlukan tag <img> yang berfungsi untuk menginput atau menampilkan gambar, didalam tag <img> terdapat banyak attribute seperti src, alt, height, width, dan lain sebagainya. Disini kita hanya akan mempelajari attribute src, alt, height dan width.
- Attribute scr berfungsi sebagai pemanggil gambar ke halaman web yang kita buat.
- Attribute alt berfungsi sebagai inisial dari gambar tersebut, jika gambar tidak dapat ditampilkan dihalaman web mungkin karena koneksi internet yang kurang bagus, atau user menonaktifkan gambar pada browser yang digunakan, maka fungsi alt yang akan muncul menggantikan gambar yang tidak muncul tersebut.
- Attribute height atau dalam bahasa Indonesia adalah tinggi, berfungsi untuk mnegatur tinggi gambar.
- Attribute width atau dalam bahasa Indonesia adalah lebar, berfungsi untuk mnegatur lebar gambar.
Oke untuk lebih jelasnya mari kita praktekkan saja.
1. Siapkan file latihan.html yang sebelumnya pernah dibuat
2. Buka file latihan.html, kemudian tambahkan tag <img> serta attribute scr dibawah tag <a> untuk menginput gambar pada halaman web
Taruh seperti kode dibawah ini :
<html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<h2> Belajar HTML </h2>
<p> Selamat datang di website ku </p>
<a href="https://google.com"> GOOGLE </a>
<a href="https://segeranat.blogspot.com"> SEGERAN PUNYA </a>
<img src="logo.png">
</body>
</html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<h2> Belajar HTML </h2>
<p> Selamat datang di website ku </p>
<a href="https://google.com"> GOOGLE </a>
<a href="https://segeranat.blogspot.com"> SEGERAN PUNYA </a>
<img src="logo.png">
</body>
</html>
3. Silahkan save atau simpan dengan menekan tombol Ctrl+S pada keyboard
4. Buka latihan.html gunakan browser yang anda gunakan
5. Maka hasilnya seperti ini :
- **format gambar tidak harus menggunakan .png, bisa juga menggunakan .jpg, .gif, dan lain sebagainya
- **Untuk contoh diatas posisi gambar masih dalam satu folder dengan file latihan.html, jika posisi gambar berada dilain folder dari latihan.html, anda bisa mengikuti tutorial dibawah ini
6. Buka lagi latihan.html, silahkan tambahkan nama folder gambar tersebut seperti ini :
<html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<h2> Belajar HTML </h2>
<p> Selamat datang di website ku </p>
<a href="https://google.com"> GOOGLE </a>
<a href="https://segeranat.blogspot.com"> SEGERAN PUNYA </a>
<img src="folder gambar/logo.png">
</body>
</html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<h2> Belajar HTML </h2>
<p> Selamat datang di website ku </p>
<a href="https://google.com"> GOOGLE </a>
<a href="https://segeranat.blogspot.com"> SEGERAN PUNYA </a>
<img src="folder gambar/logo.png">
</body>
</html>
7. Silahkan refresh browser yang anda gunakan, jika hasilnya tidak ada perubahan maka kode yang anda buat itu benar
8. Sekarang buka lagi latihan.html, kali ini kita akan menambahkan attribute alt
9. Silahkan tulis attribute alt="Belajar Koding" disamping disamping kanan attribute src="folder gambar/logo.png". Untuk lebih jelasnya seperti ini :
<html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<h2> Belajar HTML </h2>
<p> Selamat datang di website ku </p>
<a href="https://google.com"> GOOGLE </a>
<a href="https://segeranat.blogspot.com"> SEGERAN PUNYA </a>
<img src="folder gambar/logo.png" alt="Belajar Koding">
</body>
</html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<h2> Belajar HTML </h2>
<p> Selamat datang di website ku </p>
<a href="https://google.com"> GOOGLE </a>
<a href="https://segeranat.blogspot.com"> SEGERAN PUNYA </a>
<img src="folder gambar/logo.png" alt="Belajar Koding">
</body>
</html>
10. Seperti biasa save terlebih dahulu dengan menekan tombol Ctrl+S pada keyboard
11. Refresh browser yang anda gunakan
- **Seperti yang sudah dijelaskan diatas, teks dari attribute alt bisa muncul jika ada masalah pada browser, seperti koneksi internet yang kurang baik atau memang karena kesengajaan user menonaktifkan gambar pada browser yang digunakannya
12. Langkah selanjutnya yaitu mengatur tinggi dan lebar pada gambar menggunakan attribute height dan width, silahkan buka kembali latihan.html
13. Tambahkan attribute height="100" width="100" disamping kanan attribute alt="Belajar Koding". Untuk lebih jelasnya seperti ini :
<html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<h2> Belajar HTML </h2>
<p> Selamat datang di website ku </p>
<a href="https://google.com"> GOOGLE </a>
<a href="https://segeranat.blogspot.com"> SEGERAN PUNYA </a>
<img src="folder gambar/logo.png" alt="Belajar Koding" height="100" width="100">
</body>
</html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<h2> Belajar HTML </h2>
<p> Selamat datang di website ku </p>
<a href="https://google.com"> GOOGLE </a>
<a href="https://segeranat.blogspot.com"> SEGERAN PUNYA </a>
<img src="folder gambar/logo.png" alt="Belajar Koding" height="100" width="100">
</body>
</html>
- **Untuk tinggi dan lebar gambar tidak harus seperti tutorial ini, anda bisa mengatur dengan sesuka anda
- **Disini saya menggunakan ukuruan gambar dengan ukuran aslinya 200px x 200px, dan saya mengaturnya dengan ukuran 100px x 100px, maka hasilnya akan lebih kecil
14. Silahkan save seperti biasa
15. Kemudian refresh browser yang anda gunakan, maka hasil dari gambar akan berbeda dengan gambar sebelumnya
Oke cukup sampai disini dulu pembelajaran kita di Part-5 ini tentang menampilkan gambar pada website.
Rangkuman :
Cara menampilkan gambar pada website yaitu menggunakan tag <img>
Tag <img> tidak mempunyai tag penutup
Cara menyisipkan gambarnya yaitu menggunakan attributen src
Jika gambar tidak dapat ditanpilkan, maka gunakan attribut alt atau alternatif yang menampilkan teks
Untuk mengatur tinggi dan lebar yaitu menggunakan attrubute height dan width
Sekian pembelajaran HTML dasar di Part-5 ini tentang menampilkan gambar pada website, semoga bermanfaat dan ikuti terus pembelajaran dan tutorial berikutnya.
Jangan lupa berdo'a setelah belajar
Tidak ada komentar:
Posting Komentar