Laporan Praktikum Pengenalan Web Pertemuan 7
3
Image A.TUJUAN Mahasiswa dapat menambahkan image kedalam dokumen html B.DASAR TEORI Beberapa cara untuk memperkecil ukuran image antara lain : image dibuat ukuran kecil,image sedikit warna , dan mengunakan image terkomprksi.format imageterkompreksi yaitu : GIF,JPEG dan PNG. Penggunaan image untuk latar belakang <body background=”nama_lokasi_gambar”> Peletakan image di dalam body html, mengunakan tag image ,dengan sintak dasar: <image src=”URL”/> URL absolute > untuk ke situs web lain URL relatif > menunjuk ke file di dalam situs web C.PEMBAHASAN <img src=”pict/images.jpg" width="300px" height="200px" border="1px"/> Secript di atas akan menampilkan sebuah foto bernama image.jpg pada konten welcome yang berada di folder pict dengan ukuran panjang 300px, tinggi 200px, dan di beri border 1px. Sehingga foto yang di tampilkan pada konten akan tampak seperti berikut. D.LATIHAN #content { //digunakan untuk mengatur isi kontent dengan
-
Upload
sahrunnaturalashter -
Category
Documents
-
view
34 -
download
0
description
Laporan Pengenalan Web Pertemuan 7 Stmik Akakom
Transcript of Laporan Praktikum Pengenalan Web Pertemuan 7
Image
A. TUJUANMahasiswa dapat menambahkan image kedalam dokumen html
B. DASAR TEORIBeberapa cara untuk memperkecil ukuran image antara lain : image dibuat ukuran kecil,image sedikit warna , dan mengunakan image terkomprksi.format imageterkompreksi yaitu : GIF,JPEG dan PNG.Penggunaan image untuk latar belakang<body background=”nama_lokasi_gambar”>Peletakan image di dalam body html, mengunakan tag image ,dengan sintak dasar:<image src=”URL”/> URL absolute > untuk ke situs web lain URL relatif > menunjuk ke file di dalam situs web
C. PEMBAHASAN
<img src=”pict/images.jpg" width="300px" height="200px" border="1px"/>Secript di atas akan menampilkan sebuah foto bernama image.jpg pada konten welcome yang berada di folder pict dengan ukuran panjang 300px, tinggi 200px, dan di beri border 1px. Sehingga foto yang di tampilkan pada konten akan tampak seperti berikut.
D. LATIHAN
#content {//digunakan untuk mengatur isi kontent denganfloat:left;//agar image dapat mengambang dan bersisihan dengan div yang laindisplay:block;// agar div mengikuti ukuran dan pengaturan yang telah di tetapkanmax-width:700px;//ukuran content dimana akan menyesuaikan dengan isisnyamargin-left:20px;// jarak antara div di sebelah kiri 20pxmargin-top:3px;//jarak antara div di sebelah atas 3px;
}#content img {//digunakan untuk mengatur image yang ada di div content denganwidth:200px;//lebar image 20pxheight:150px;//tinggi image 150px}
E. TUGAS1. Perbedaan <image src=”foto.jpg”/> dengan <image src=”foto.jpg” aligan=”right”/>
<image src=”foto.jpg”/> image akan di tampilkan di posisi default yaitu di sebelah kiri atas kotak atau div .
<image src=”foto.jpg” aligan=”right”/>image akan di tampilkan di sebelah kanan atas kotak atau kolom.
2. Perbedaan <image src=”foto.jpg” aligan =”middle”/> dengan <image src=”foto.jpg” aligan=”top”/> <image src=”foto.jpg” aligan =”middle”/> untuk meletakkan image di sebelah tengan kolom
atau div <image src=”foto.jpg” aligan =”top ”/> untuk meletakkan image di sebelah atas kolom.
F. KESIMPULAN Dari praktikum ke 7 tentang image dapat di simpulkan css dapat digunakan untuk mengatur tampilan gambar atau foto yang akan di tampilkan di halaman web sesuai dengan keinginan kita dan dapat membuat web semakin menarik.
G. LISTING terlampir
