Langsung ke konten utama

HTML IMAGE (GAMBAR)

OBJEKTIF:
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">



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

<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>

Komentar

Postingan populer dari blog ini

Sejarah Sistem Operasi dari DOS, Windows sampai Linux

Artikel ini akan menguraikan sejarah sistem operasi dari DOS, Mac, Windows, BSD, sampai Linux. 1980   QDOS : Tim Paterson dari Seattle Computer menulis QDOS yang dibuat dari OS terkenal pada masa itu, CP/M. QDOS (Quick and Dirty Operating System) dipasarkan oleh Seatle Computer dengan nama 86-DOS karena dirancang untuk prosesor Intel 8086. Microsoft : Bill Gates dari Microsoft membeli lisensi QDOS dan menjualnya ke berbagai perusahaan komputer. 1981   PC­ DOS : IBM meluncurkan PC­ DOS yang dibeli dari Microsoft untuk komputernya yang berbasis prosesor Intel 8086. MS­ DOS : Microsoft menggunakan nama MS­ DOS untuk OS ini jika dijual oleh perusahaan diluar IBM. 1983   MS­ DOS 2.0 : Versi 2.0 dari MS­ DOS diluncurkan pada komputer PC XT. 1984   System 1.0 : Apple meluncurkan Macintosh dengan OS yang diturunkan dari BSD UNIX. System 1.0 merupakan sistem operasi pertama yang telah berbasis grafis dan menggunakan mouse. MS ­DOS 3.0 : Microsoft meluncurkan MS DOS 3.0 untuk PC AT yang menggun...

cara menambah speed IDM terbaru (ngeyel version)

  mau ?? punya kecepatan download pada IDM kamu kamu secepat ini???  saia kmaren mencoba-coba sebuah aplikasi yang mampu membuat kecepatan speedy saya wus wus wus sampai sedemikian rupa!!! kalian mau ama aplikasi ini??? oke,, nehhh,, sofwer ini harus di download pake torrent jadi saya sarankan anda pake torrent donloder saya MEDIAGET torrent sofwernya donlot DISINI oke sekian, tq sebelum dan ssudahnya,,, kalo ada pertanyaan kommen aja yaaa,,,

Chord Vierra Semua tentangmu

Author : baimz jr [intro]  G   A   Bm   F#m   G   A   D  2x Bm            D         G             A          Bm semua tentangmu selalu membekas di hati ini               D              G cerita cinta kita berdua akan selalu      A            Bm              G semua kenangan tak mungkin bisa kulupakan kuhilangkan A     ...