WRL1513.tmp - Itsnaini L Masyitoh - Politeknik Elektronika Negeri

LAPORAN RESMI
IMAGE dan LINK
Dosen Pembimbing :
Dwi Susanto S,ST.
Oleh :
Itsnaini Luthfiah Masyitoh
(4103131032)
PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING
DEPARTEMEN MULTIMEDIA KREATIF
POLITEKNIK ELEKTRONIKA NEGERI SURABAYA
2015
Praktikum II
Image dan Link
Surabaya, 7 September 2015
I.
Tujuan
Tujuan dari praktikum ini adalah:
1. Mahasiswa memahami tentang format gambar
2. Mahasiswa mampu memasukkan dan mengatur gambar pada halaman web
3. Mahasiswa mampu menggunakan link pada website
II.
Alat & Bahan
Alat dan bahan yang digunakan diantaranya:
1. Komputer
2. Modul Praktikum 2
III.
Dasar Teori
Images
Images Images atau gambar memiliki peran tersendiri dalam sebuah website, misalnya dalam
bentuk logo, ilustrasi, grafik, foto ataupun untuk kebutuhan mempercantik tampilan halaman
sebuah web. Sebuah gambar bisa bermakna ribuan kata, dan pemilihan gambar yang tepat
akan membedakan antara website yang biasa dengan website yang luar biasa.
Apabila anda tidak memiliki gambar berupa foto atau yang anda desain sendiri, anda bisa
juga menggunakan berbagai layanan yang ada di internet. Anda bisa menggunakan berbagai
gambar yang bisa digunakan secara gratis atau membelinya dari penyedia stok gambar.
Sebaiknya anda membuat folder tersendiri untuk menyimpan kumpulan gambar yang anda
gunakan untuk website anda.
1. Menambahkan Gambar
Untuk menambahkan gambar ke halaman
web, kita bisa menggunakan elemen
<img>. Elemen ini tidak memerlukan
closing elemen atau elemen penutup dan
harus diiringi dengan atribut
2. Src
Atribut ini memberi tahukan ke browser
dimana lokasi gambar yang akan
ditambahkan pada halaman web. Lokasi file
gambar ini bisa tertulis dalam bentuk alamat
url atau path ke lokasi folder dimana gambar
tersebut disimpan
3. Alt
Atribut ini berisi teks deskripsi gambar yang akan mendeskripsikan gambar apabila gambar
tersebut tidak dapat ditampilkan.
4. Title
Atribut title ini bisa anda gunakan untuk memberikan tambahan informasi terkait dengan gambar.
Informasi ini akan muncul saat pengguna melakukan hover atau menggerakkan pointer mouse
tepat di atas gambar
5. Format Gambar
Format gambar yang biasa digunakan pada website adalah jpeg, gif atau png. Apabila ada
kesalahan dalam memilih jenis format gambar, bisa menyebabkan gambar yang muncul tidak
tajam dan lambat saat ditampilkan. Ukuran dari gambar yang anda pakai juga harus diperhatikan,
yakni pastikan bahwa ukuran tinggi dan lebarnya sesuai dengan ukuran yang akan tampil
dihalaman website.
Apabila anda menyimpan gambar dengan tinggi dan lebar yang kecil, sedangkan anda akan
menampilkannya dalam ukuran yang besar, maka tampilan gambar akan pecah. Apabila anda
ingin menampilkan gambar dalam ukuran kecil sedangkan anda menyimpannya dalam ukuran
yang besar, maka gambar butuh waktu lama untuk ditampilkan pada halaman web saat diakses.
Pemilihan format gambar yang anda gunakan untuk website membutuhkan beberapa
pertimbangan yaitu:
 Apabila gambar yang anda gunakan memiliki banyak warna yang berbeda pada satu gambar,
maka sebaiknya anda menyimpannya dalam format JPEG.
 Simpan dalam format GIF atau PNG untuk gambar yang hanya memiliki beberapa warna
yang berbeda pada satu gambar atau gambar hanya memiliki satu warna pada area yang luas.
 Saat sebuah gambar memiliki area yang terisi hanya satu warna, maka ia disebut dengan flat
color. Misalnya seperti logo, ilustrasi atau diagram, biasanya menggunakan flat color.
Berbeda dengan sebuah gambar yang dihasilkan dari pemotretan, misalnya pemotretan
sekumpulan orang, foto alam, atau rerumputan terdiri dari warna yang berbeda dan tidak
cocok untuk format GIF atau PNG.
6. Links
Link merupakan fitur utama sebuah website karena dengan link, halaman website bisa berpindah
dari satu halaman ke halaman yang lain. Kemampuan berpindah dari satu halaman ke halaman
lain ini akhirnya memunculkan istilah browsing atau surfing.
Beberapa tipe link antara lain:
 Link dari satu website ke website yang lain
 Link dari satu halaman ke halaman yang lain pada website yang sama
 Link dari satu bagian ke bagian yang lain pada satu halaman yang sama
 Link yang membuka window baru
 Link berupa alamat email

Cara menuliskan link
Link dibuat dengan cara menuliskan element dan diakhiri dengan . User bisa melakukan klik
pada tulisan yang berada diantara hingga . Anda bisa menentukan halaman yang menjadi target
dari link yang anda buat dengan menggunakan atribut href.
Gambar 2.3 link
Teks yang berada di antara dan sebaiknya menjelaskan tentang target halaman yang akan
dikunjungi. Hal ini akan membantu pengguna saat ingin melakukan klik pada link tersebut. Pada
contoh diatas, teks yang menjadi link adalah “IMDB” yang menjelaskan bahwa link yang akan
dikunjungi merupakan website dari IMDB.
Link ke halaman website yang lain
Untuk membuat sebuah link yang mengarah ke halaman website yang lain, anda bisa menuliskan
Saat anda ingin membuat sebuah link yang mengarah ke website yang lain, anda harus
menuliskan alamat domain dari website tersebut secara lengkap yang biasa disebut dengan
absolute URL. URL merupakan kepanjangan dari Uniform Resource Locator. Ini merupakan
alamat web yang anda tuliskan saat anda ingin mengunjungi halaman tertentu dari sebuah
website. Apabila anda tidak menuliskan detail halaman yang anda kunjungi, maka anda akan
dibawa ke halaman awal dari website tersebut.
Link ke halaman lain pada satu website yang sama
Saat anda ingin membuat sebuah link yang menuju halaman yang lain pada website yang sama,
anda tidak perlu menuliskan nama domain pada URL. Anda bisa menuliskannya dalam bentuk
relative URL.
Apabila target link anda berada dalam folder yang sama, anda bisa langsung menuliskan nama
file tersebut. Apabila target halaman anda berada dalam folder yang berbeda, anda bisa langsung
menuliskan lokasi folder tersebut dari lokasi file dimana anda menuliskan link anda. Saat anda
menuliskan relative URL, anda harus memperhatikan struktur folder dari website anda. Mari
kita ambil contoh struktur folder dari praktikum sebelumnya.
Gambar 2.4 Contoh struktur folder
Folder yang berada pada level paling atas biasa disebut dengan root folder. Folder images, css
dan video merupakan child folder dari folder root. Masing-masing folder berisi file index.html.
Berikut ini tabel berisi informasi detail tentang relative URL dan contoh penggunaannya dengan
mengacu contoh struktur folder di atas
Tipe Link
Folder yang sama
Untuk membuat link pada file yang
berada pada folder yang sama, cukup
tuliskan nama file yang anda tuju
Child Folder
Untuk membuat link yang mengarah
pada file yang berada di sub folder atau
Contoh Penulisan
Untuk membuat link ke halaman about.html dari
root folder
<a href=”about.html”>Profil</a>
Untuk membuat link ke halaman index.html yang
berada pada folder video.
child folder, anda perlu menuliskan <a href=”video/index.html”>List Video</a>
terlebih dahulu nama folder child
tersebut
Parent Folder
Untuk membuat link dari sub folder Untuk membuat link ke halaman index.html yang
yang menuju ke file yang ada di root ada di root folder dari file yang ada di folder video
folder, maka anda perlu menggunakan
“../”
IV.
Praktikum
Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan yang ada
pada praktikum ini
1. Buatlah folder baru bernama “Praktikum2” dan pastikan anda menyimpan semua file
percobaan di praktikum ini pada folder tersebut
2. Buatlah folder baru didalam folder “Praktikum2” dengan nama “images”. Folder ini berfungsi
untuk menyimpan file-file gambar yang anda perlukan selama menyelesaikan percobaan pada
praktikum ini
3. Siapkan gambar-gambar yang akan anda gunakan pada praktikum ini. Sebaiknya ukuran gambar
tidak terlalu besar. Setidaknya berukuran maksimal 900x600 pixel.
4. Buka teks editor pilihan anda
5. Ketikkan semua kode yang ada pada tiap percobaan
6. Setiap kali anda menyelesaikan satu percobaan, simpan dengan nama file sesuai nomor
percobaan dengan ekstensi .html
7. Apabila anda menggunakan notepad, pastikan anda merubah pilihan tipe file pada “Save as
Type” menjadi “All Files”
8. Apabila anda menggunakan notepad++, pada pilihan tipe file, pilih yang bertipe HTML
V.
Hasil Praktikum
1. Penggunaan Mic Dynamic Dengan Pick Up Pattern Cardioid
a. Sesi 1 cardioid atas
b. Sesi 1 cardioid front
c. Sesi 1 cardioid back
2.
Penggunaan Mic Condensor
a. sesi 2 condennser atas
b. sesi 2 condenser front
c. sesi 2 condenser back
VI. Analisa
Dari data di atas dapat di analisa bahwa:
1. Pada sesi 1 Cardioid, terdapat perbedaan antara Top, Front, dan Back. Perbedaannya
terletak pada level meter mixer.
 Di sesi 1 cardioid front sinyal kuat
 Di sesi 1 cardioid atas sinyal semakin lemah, dan
 Di sesi 1 cardioid back sinyal berkurang atau melemah dari cardioid atas.
2. Di sesi 2 condenser atas, front, dan back terdapat sinyal di level mixer yang rata-rata sama
kuat. dan hanya terdapat perbedaan sedikit
VII. Kesimpulan
Dari Praktikum ini dapat disimpulkan bahwa:
1. Terdapat perbedaan pada level meter mixer antara sesi 1 cardioid Front, Top, dan Back.
Percobaan ini membuktikan bahwa pick up pattern dari mic Dynamic ini adalah
cardioid.
2. Terdapat sedikit perbedaan pada sinyal di level mixer sehingga dapat membuktikan
bahwa Mic Condensor Berpick up pattern Hypercardioid