Belajar HTML Dasar Part 5 ( Menampilkan Gambar )



Dalam Tutorial ini Agan kiranya bisa memasukan image di dalam dokumen HTML agan , caranya cukup mudah jika agan serius dalam menjalankan step by step tutorial ini , langsung aja gan ke TKP si bocan udah mulai malas ngetik ini heheh :) , 

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 alignalt (teks alternatif jika gambar tidak tampil), borderheightwidthhspace (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:
image027.jpgKehadiran Web Teknologi Informasi dapat memudahkan penyebaran informasi antara Biro Perencanaan dan Kerja Sama Luar Negeri - dan anggotaTeknologi InformasiKeuntungan bila sistem jaringan informasi ini terbentuk, komunikasi antar Biro Perencanaan dan Kerja Sama Luar Negeri dan Provider dan anggota Teknologi Informasi akan lebih cepat terjalin, informasi dapat dengan cepat sampai dan tepat sasaran pula. Salam Pendidikan...! Dr. Ir. Candra Rudi , S.TI ! heheheheh

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 Teknologi Informasi dapat memudahkan penyebaran informasi antara Biro Perencanaan dan Kerja Sama Luar Negeri - dan anggotaTeknologi InformasiKeuntungan bila sistem jaringan informasi ini terbentuk, komunikasi antar Biro Perencanaan dan Kerja Sama Luar Negeri dan Provider dan anggota Teknologi Informasi akan lebih cepat terjalin, informasi dapat dengan cepat sampai dan tepat sasaran pula. Salam Pendidikan...! Dr. Ir. Candra Rudi , S.TI ! heheheheh
</body>
</html>

Ditulis Oleh : admin .:: Blog siCandra ::.

Terima Kasih telah membaca artikel yang berjudul Belajar HTML Dasar Part 5 ( Menampilkan Gambar ), Semoga artikel tersebut bermanfaat untuk anda , apabila anda ingin mensebar luaskan , silahkan masukan sumber artikel.

:: Thank you for visiting ! ::

0 komentar:

Posting Komentar

Support : Maskolis
Internet Marketing
Copyright © 2013. Blog siCandra - All Rights Reserved