Kawan sekalian, dipagi yang cerah ini bagaimana kabarnya.? semoga semuanya dalam keadaan sehat ya.
pada kesempatan sebelumnya ada seorang kawan yang bertanya " Bagaimana memasukan Gambar kedalam Halaman Web nya.? ", maka pada hari ini kita akan membahas tentang bagaimana cara memasukan gambar ke dalam Web. menggunakan Tag <img>.
Tag <img> dalam penggunaanya memerlukan beberapa Atribut inti untuk bisa tampilkan, yaitu "src", "height", "width", "alt".
| Atribut | Keterangan |
|---|---|
| src | Digunakan untuk menyimpan alamat dari sumber gambar. |
| alt | Digunakan untuk memberikan keterangan pada gambar. |
| height | Digunakan untuk mengatur tinggi gambar. |
| width | Digunakan untuk mengatur lebar gambar. |
Setelah kita mengetahui kegunaannya mari kita lihat contoh penggunaannya.
- Membuat sebuah folder dimana nanti file - file disimpan, sehingga mudah untuk digunakan kembali.
- Contoh : D://web/belajar_html/
- Buatlah file menggunakan Notepad dengan nama "latihan_4a.html" yang berisi:
latihan_4a.html
<html>
<head>
<title></title>
</head>
<body>
<img alt="Test gambar" width="100px" height="100px" src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg">
<!-- Ganti C:\Users\Public\Pictures\Sample Pictures\Desert.jpg dengan gambar yang ingi kawan tampilkan -->
</body>
</html>
Dari Script diatas mari kita bahas beberapa Poin yang penting:
- Setiap gambar harus memiliki sumber untuk di tampikan.
- Setiap gambar harus diberi keterangan.
- Ukuran gambar dapat menggunakan px, vw, %, dan lainya.
- Gambar dapat juga disimpan di berbagai tempat, menggunakan Atrribut position, left, right, top, bottom dan lainya.
Setelah kita mengenal tentang <img> dengan maka sekarang kita membutuhkan sebuah test atau latihan untuk menggunakan semua Tag dan Atribut yang sudah kita ketahui dari pertemuan - pertemuan sebelumnya.
Untuk latihannya kita akan membuat contoh sederhana yaitu langkah - langkah untuk membuat Mie Instan.
- Membuat sebuah folder dimana nanti file - file disimpan, sehingga mudah untuk digunakan kembali.
- Contoh : D://web/belajar_html/
- Buatlah file menggunakan Notepad dengan nama "latihan_4b.html" yang berisi:
latihan_4b.html
<html>
<head>
<title> Cara Memasak Mie Instan</title>
</head>
<body>
<h1 align="center"> Cara Memasak Mie Instan </h1>
<p style="text-alignment:justify"> Cara membuat Mie Goreng Instan, dimasak menggunakan cara yang sudah biasa dilakukan oleh kawan sekalian, sehingga dapat dimakan dan mengurangi rasa lapar diperut dan nikmat. </p>
<h2> Bahan dan Peralatan </h2>
<ul>
<li> Mie Instan </li>
<li> Air </li>
<li> Kompor </li>
<li> Wajan </li>
<li> Sendok </li>
<li> Mangkuk </li>
</ul>
<h2> Cara Memasak </h2>
<ol>
<li> Masukan Air kedalam Wajan dan simpan diatas kompor dengan Api sedang.</li>
<li> Tunggu hingga air mulai mendidih. </li>
<li> Masukan Mie instan kedalam Wajan. </li>
<li> Tunggu hinga 5 sampai 10 menit. </li>
<li> Matikan Kompor. </li>
<li> Buang Air hasil rebusan Mie. </li>
<li> Masukan Mie kedalam Piring lalu masukan Bumbu. </li>
<li> Aduk Mie hingga bumbu merata. </li>
<li> Mie siap di Hidangkan. </li>
</ol>
<img src="" align="center" style="heigt:400px; width:400px;">
</body>
</html>
Dari Script diatas mari kita bahas beberapa Poin yang penting:
- Beberapa Tag memiliki beberapa perubahan dalam penggunaan.
- Cobalah beberapa latihan lainya yang menggunakan semua Tag yang telah dipelajari.
Demikian pertemuan kita, bila ada yang ditanyakan, saran, kritik bisa hubungi saya melalui kolom komentar, semoga pembahasan tadi menjadi ilmu yang bermanfaat bagi kawan sekalian.
Terimakasih dan sampai berjumpa kembali di pertemuan berikutnya.
Tidak ada komentar:
Posting Komentar
Terima kasih atas komentar yang anda berikan, semoga dapat membuat kami lebih baik lagi.