Rabu, 18 Maret 2015

MENAMPILKAN GAMBAR dan ANIMASI



Gambar merupakan elemen yang sangat penting dalam halaman web. Tanpa gambar kita mungkin akan kembali pada jaman web 1.0 dimana halaman web hanya berupa text atau tulisan saja. Dengan gambar atau image akan membuat website lebih menarik dan enak di pandang, tapi perlu diperhatikan bahwa semakin banyak gambar di website kita maka semakin lama juga waktu yang dibutuhkan untuk mengakses website kita.

Menampilkan Gambar

 Untuk format gambar ada 3 macam yang sering digunakan yaitu: GIF, JPG dan PNG. GIF dan PNG bisa digunakan untuk membuat gambar yang transparan serta biasa juga digunakan untuk gambar yang warnanya minim seperti untuk logo, banner, icon, dsb, Gif bisa membuat gambar animasi juga. Untuk menampilkan gambar yang berkualitas bagus dengan warna yang memadai digunakan format JPG.
Kali ini saya akan memberikan tutorial menampilkan gambar pada halaman web.

  1. Pertama yang harus disiapkan adalah tentu saja file gambar, bisa berupa .jpg, .gif, dll. Gambar yang akan saya gunakan kali ini berformat .jpg dengan nama gambar yaitu gambar1.jpg. Supaya lebih semangat dalam berlatihnya saya menggunakan contoh gambar yang bikin tambah fresh dalam coding :D. 
  2. Buatlah satu folder bernama image, atau terserah anda.
  3. Siapkan Text Editor HTML, disini saya memakai Dreamweaver
  4. Tag HTML yang harus anda mengerti kali ini adalah tag <img>

Source Code :
  1. <html>  
  2. <head>  
  3. <title> Menampilkan Gambar Untuk HTML </title>  
  4. </head>  
  5. <body>  
  6. <img align="left" alt="Gambar1" src="gambar1.jpg" />  
  7. </body>  
  8. </html> 

Kemudian silahkan simpan dengan nama index.html kedalam folder image.

Keterangan :
  • <img src="gambar1.jpg" = Pemanggilan gambar. Jika file index.html disimpan di luar folder images, maka pemanggilannya menjadi <image src="images/gambar1.jpg"
  • align="left"> = posisi gambar
Jika kita sudah mendapat ilmu tentang menampilkan gambar dengan HTML, berikutnya kita akan mengatur ukuran gambar yang akan kita tampilkan.
Kita bisa mengaturnya melalui atribut pada tag <img> yang bernama height dan width.

  • Height = Untuk mengatur tinggi gambar
  • Width = Untuk mengatur lebar gambar

Berikut source code setelah dirubah untuk mengatur ukuran gambar :
  1. <html>  
  2. <head>  
  3. <title> Menampilkan Gambar Untuk HTML </title>  
  4. </head>  
  5. <body>  
  6. <img src="gambar1.jpg" align="left">  
  7. <img src="gambar1.jpg" align="left" height="500px" width="400px">  
  8. </body>  
  9. </html>  
Dalam hal ini yang sering digunakan adalah pixel yang disingkat menjadi px.
 

Membuat Text Bergerak dari Kiri Kekanan

Contoh source code:

 <head>
<body>
<marquee align="center" direction="right" height="30"scrollamount="2" width="70%">selamat pagi dunia</marquee>
</body>
</head>

Membuat Teks Bergerak ke kiri dan kembali ke kanan

Contoh source code:
 
<head>
<body>
<marquee align="center" direction="left" height="40" scrollamount="5" width="70%" behavior="alternate"><b>selamat pagi...</b> </marquee>

</head>
</body>
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)