Html Dasar Part 5 : Menampilkan Gambar Pada Website
HTML DASAR PART 5 MENAMPILKAN GAMBAR PADA WEBSITE
HTML DASAR PART 5
MENAMPILKAN GAMBAR PADA WEBSITE
Seperti biasa, sebelum berguru alangkah baiknya berdo'a terlebih dahulu.
Kali ini kita sudah memasuki pembelajaran ke 5 (lima) atau Part-5 HTML dasar. Sebelumnya kita sudah berguru di Part-4 wacana Hyperlink. Di Part 5 ini kita akan berguru 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 ibarat 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, jikalau gambar tidak sanggup ditampilkan dihalaman web mungkin alasannya ialah 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 ialah tinggi, berfungsi untuk mnegatur tinggi gambar.
- Attribute width atau dalam bahasa Indonesia ialah 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, lalu tambahkan tag <img> serta attribute scr dibawah tag <a> untuk menginput gambar pada halaman web
Taruh ibarat instruksi dibawah ini :
<html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<h2> Belajar HTML </h2>
<p> Selamat tiba 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 tiba 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 akhirnya ibarat ini :
- **format gambar tidak harus memakai .png, sanggup juga memakai .jpg, .gif, dan lain sebagainya
- **Untuk tumpuan diatas posisi gambar masih dalam satu folder dengan file latihan.html, jikalau posisi gambar berada dilain folder dari latihan.html, anda sanggup mengikuti tutorial dibawah ini
6. Buka lagi latihan.html, silahkan tambahkan nama folder gambar tersebut ibarat ini :
<html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<h2> Belajar HTML </h2>
<p> Selamat tiba 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 tiba 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, jikalau akhirnya tidak ada perubahan maka instruksi yang anda buat itu benar
8. Sekarang buka lagi latihan.html, kali ini kita akan menambahkan attribute alt
9. Silahkan tulis attribute alt=" Kali ini kita sudah memasuki pembelajaran ke HTML Dasar Part 5 : Menampilkan Gambar Pada Website" disamping disamping kanan attribute src="folder gambar/logo.png". Untuk lebih jelasnya ibarat ini :
<html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<h2> Belajar HTML </h2>
<p> Selamat tiba 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=" Kali ini kita sudah memasuki pembelajaran ke HTML Dasar Part 5 : Menampilkan Gambar Pada Website">
</body>
</html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<h2> Belajar HTML </h2>
<p> Selamat tiba 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=" Kali ini kita sudah memasuki pembelajaran ke HTML Dasar Part 5 : Menampilkan Gambar Pada Website">
</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 sanggup muncul jikalau ada problem pada browser, ibarat koneksi internet yang kurang baik atau memang alasannya ialah kesengajaan user menonaktifkan gambar pada browser yang digunakannya
12. Langkah selanjutnya yaitu mengatur tinggi dan lebar pada gambar memakai attribute height dan width, silahkan buka kembali latihan.html
13. Tambahkan attribute height="100" width="100" disamping kanan attribute alt=" Kali ini kita sudah memasuki pembelajaran ke HTML Dasar Part 5 : Menampilkan Gambar Pada Website". Untuk lebih jelasnya ibarat ini :
<html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<h2> Belajar HTML </h2>
<p> Selamat tiba 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=" Kali ini kita sudah memasuki pembelajaran ke HTML Dasar Part 5 : Menampilkan Gambar Pada Website" height="100" width="100">
</body>
</html>
<head>
<title> Web Ku </title>
</head>
<body>
<h1> Website Keren </h1>
<h2> Belajar HTML </h2>
<p> Selamat tiba 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=" Kali ini kita sudah memasuki pembelajaran ke HTML Dasar Part 5 : Menampilkan Gambar Pada Website" height="100" width="100">
</body>
</html>
- **Untuk tinggi dan lebar gambar tidak harus ibarat tutorial ini, anda sanggup mengatur dengan sesuka anda
- **Disini aku memakai ukuruan gambar dengan ukuran aslinya 200px x 200px, dan aku mengaturnya dengan ukuran 100px x 100px, maka akhirnya akan lebih kecil
14. Silahkan save ibarat biasa
15. Kemudian refresh browser yang anda gunakan, maka hasil dari gambar akan berbeda dengan gambar sebelumnya
Oke cukup hingga disini dulu pembelajaran kita di Part-5 ini wacana menampilkan gambar pada website.
Rangkuman :
Cara menampilkan gambar pada website yaitu memakai tag <img>
Tag <img> tidak memiliki tag penutup
Cara menyisipkan gambarnya yaitu memakai attributen src
Jika gambar tidak sanggup ditanpilkan, maka gunakan attribut alt atau alternatif yang menampilkan teks
Untuk mengatur tinggi dan lebar yaitu memakai attrubute height dan width
Sekian pembelajaran HTML dasar di Part-5 ini wacana menampilkan gambar pada website, biar bermanfaat dan ikuti terus pembelajaran dan tutorial berikutnya.
Jangan lupa berdo'a sehabis belajar
0 Response to "Html Dasar Part 5 : Menampilkan Gambar Pada Website"
Posting Komentar