Langsung ke konten utama

HTML IMAGE (GAMBAR)

Oleh

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>

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

what is (apa itu) XML ???

Oleh
source: wikipedia and w3school XML (Extensible Markup Language) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan pertukaran data antar sistem yang beraneka ragam. XML merupakan kelanjutan dari HTML (HyperText Markup Language) yang merupakan bahasa standar untuk melacak Internet. Mengenal XML XML didesain untuk mempu menyimpan data secara ringkas dan mudah diatur. Kata kunci utama XML adalah data (jamak dari datum) yang jika diolah bisa memberikan informasi. XML menyediakan suatu cara terstandarisasi namun bisa dimodifikasi untuk menggambarkan isi dari dokumen. Dengan sendirinya, XML dapat digunakan untuk menggambarkan sembarang view database, tetapi dengan suatu cara yang standar. Tipe XML XML memiliki tiga tipe file :     XML, merupakan standar format dari struktur berkas (file).     XSL, merupakan standar untuk memodifikasi data yang diimpor atau diekspor.     XSD, merupakan stan...
Posting Komentar
lanjut baca??

TheReiko Day + Event Christmas

Oleh
Tools : 1.  Fiddler 2.  File Swf Features: 1. Instant All Mission TP 2. Auto Kill Boss 3. Complete Daily Task 4. Kill Boss Event (Yukidaruma) 5. Instant Special Mission (Christmas) Instructions: • Drag files to fiddler • Clear Cache • Open Ninja Saga • Go to Shop > Select According To What You Want  
Posting Komentar
lanjut baca??

Chord Radja Yakin

Oleh
Author : dewaphobia Am F G   C Bukalah hatimu untuk diriku Am F     G Em Sebelum cinta hilang Am F G        C Seperti bintang kupuja dirimu Am F     G Em Seperti malam datang      Am      Dm Yakinkan cintamu kepadaku  Gm     Cm Agar aku bisa memiliki   Fm    A#m        Am   Em Setulus hatiku mencintai dirimu Am Dm Lupakanlah semua mimpi-mimpi     Gm   Cm Walaupun bayangnya menghantui      Fm   A#m       Am   Em Yang kadang selalu ingin memilih ci...
Posting Komentar
lanjut baca??