Belajar Html Image
Jumpa lagi. Pada kesempatan ini saya akan memberikan penjelan dari HTML Image. Apa itu HTML Image? oke jawabannya ada pada pembahasan dibawah mengenai HTML Image.
:: 5-HTML IMAGE (GAMBAR) ::
:: 5-HTML IMAGE (GAMBAR) ::
OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk menampilkan gambar.
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk menampilkan gambar.
MATERI:
Element IMG (Image)
ELEMENT IMG
Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag penutup dan mempunyai attribute yaitu align, alt (teks alternatif jika gambar tidak tampil), border, height, width, hspace (jarak kosong posisi horizontal, vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama file-nya).
Sintaks:
<img
align="left"|"right"|"top"|"middle"|"bottom"
alt="text"
border="pixel"
width="pixel"|"%"
height="pixel"|"%"
hspace="pixel"
vspace="pixel"
src="uri">
Element IMG (Image)
ELEMENT IMG
Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag penutup dan mempunyai attribute yaitu align, alt (teks alternatif jika gambar tidak tampil), border, height, width, hspace (jarak kosong posisi horizontal, vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama file-nya).
Sintaks:
<img
align="left"|"right"|"top"|"middle"|"bottom"
alt="text"
border="pixel"
width="pixel"|"%"
height="pixel"|"%"
hspace="pixel"
vspace="pixel"
src="uri">
LATIHAN
Gunakan teks editor misalkan "Notepad" untuk
menyunting dan menyimpan script latihan di bawah ini. Untuk melihat
hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan
editor yang telah tersedia pada modul ini dengan mengklik menu Editor.
Latihan 1:
Tampilkan gambar image027.jpg dengan ukuran width dan height 160pixel dan border 8pixel :
Nama file: latihan5_1.html
Latihan 1:
Tampilkan gambar image027.jpg dengan ukuran width dan height 160pixel dan border 8pixel :
Nama file: latihan5_1.html
<html>
<head> <title>Latihan5-1</title> </head> <body> <img width="160" height="160" src="image027.jpg"> </body> </html> |
Tugas tambahan:
Letakkan gambar tersebut ke kanan, setelah itu ke kiri.
Latihan 2:
Dari Latihan 1 ubah gambar menjadi yang terdapat dalam direktori /images dengan nama image050.jpg
Nama file: latihan5_2.html
<html>
<head> <title>Latihan5-1</title> </head> <body> <img width="160" height="160" src="./images/image050.jpg"> </body> </html> |
Latihan 3:
Tampilkan gambar image027.jpg dengan ukuran width dan height 80pixel dan border 8pixel serta teks seperti di bawah ini:
Kehadiran Web Teknisi Jardiknas dapat memudahkan penyebaran
informasi antara Biro Perencanaan dan Kerja Sama Luar Negeri - dan anggota
Teknisi Jardiknas. Keuntungan bila sistem jaringan informasi ini terbentuk,
komunikasi antar Biro Perencanaan dan Kerja Sama Luar Negeri dan Provider dan
anggota Teknisi Jardiknas akan lebih cepat terjalin, informasi dapat dengan
cepat sampai dan tepat sasaran pula. Salam Pendidikan...! Dr. Ir. Gatot Hari
Priowirjanto
Nama file: latihan5_3.html
<html>
<head> <title>Latihan5-3</title> </head> <body> <img width="80" height="80" src="image027.jpg" align="left" border="8"> Kehadiran Web Teknisi Jardiknas dapat memudahkan penyebaran informasi antara Biro Perencanaan dan Kerja Sama Luar Negeri - dan anggota Teknisi Jardiknas. Keuntungan bila sistem jaringan informasi ini terbentuk, komunikasi antar Biro Perencanaan dan Kerja Sama Luar Negeri dan Provider dan anggota Teknisi Jardiknas akan lebih cepat terjalin, informasi dapat dengan cepat sampai dan tepat sasaran pula. Salam Pendidikan...! Dr. Ir. Gatot Hari Priowirjanto </body> </html> |
<p>Your browser does not support iframes.</p>
Saya rasa hanya itu yang bisa saya sampaikan.Semoga pembahasan ini bermanfaat. Kalau perlu bertannya silakan bisa ditulis pada kolom komentar. Sekian dan berkunjung lagi ya.
Saya rasa hanya itu yang bisa saya sampaikan.Semoga pembahasan ini bermanfaat. Kalau perlu bertannya silakan bisa ditulis pada kolom komentar. Sekian dan berkunjung lagi ya.
Semoga artikel Belajar Html Image bermanfaat bagi Anda. Jika kamu suka dengan artikel Belajar Html Image ini, like dan bagikan ketemanmu.
Post a Comment