LAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB “Image

LAPORAN RESMI
PRAKTIKUM TEKNOLOGI WEB
“Image dan Link”
Dosen Pembimbing :
Dwi Susanto
Oleh :
Laras Intansari (4103131054)
3 D3 MMB B
PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING
DEPARTEMEN MULTIMEDIA KREATIF
POLITEKNIK ELEKTRONIKA NEGERI SURABAYA 2015
Praktikum 2
Image dan Link
Tujuan
-
Mahasiswa memahami tentang format gambar
-
Mahasiswa mampu memasukkan dan mengatur gambar pada halaman web
-
Mahasiswa mampu menggunakan link pada website
Dasar Teori
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.
Menambahkan Gambar
<img>
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
<img
src="images/gambar_web.jpg"
alt="Ideas
for
a
better
future"
title="logo
dan slogan
untuk
event industrial
electronnic
seminar">
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
alt
atribut ini berisi teks deskripsi gambar yang akan
mendeskripsikan gambar apabila gambar tersebut tidak
dapat ditampilkan.
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
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.
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 <a> dan diakhiri dengan </a>. User bisa
melakukan klik pada tulisan yang berada diantara <a> hingga </a>. 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 <a> dan </a> 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
<a href=”http://www.eepis-its.edu”> Kampus PENS </a>
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.
<a href=”profil.html”> Profil Saya </a>
<a href=”galeri/foto.html”> Galeri</a>
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 Contoh Penulisan
Folder yang sama
Untuk membuat link ke halaman about.html dari
root folder
Untuk membuat link pada file yang berada pada
folder yang sama, cukup tuliskan nama file yang
anda tuju
<a href=”about.html”> Profil</a>
Child Folder Untuk membuat link ke halaman index.html yang
berada pada folder video.
Untuk membuat link yang mengarah pada file
yang berada di sub folder atau child folder, anda
<a href=”video/index.html”> List
Video</a> perlu menuliskan terlebih dahulu nama folder child tersebut
Parent Folder Untuk membuat link ke halaman index.html yang
ada di root folder dari file yang ada di folder
Untuk membuat link dari sub folder yang menuju
video ke
file yang ada di root folder, maka anda perlu
menggunakan “../”
Langkah Kerja
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.
PERCOBAAN 1
Pada percobaan 1 ini, kita mencoba memasukkan gambar beserta teks paragraph. Untuk memasukkan
gambar, kita memakai <img src=”nama.ekstensi”> src merupakan source yaitu tempat anda menyimpan
gambar. P digunakan untuk memasukkan paragraph.
PERCOBAAN 2
ter
Pada percobaan ini, kita mencoba menata gambar dengan atribut <align> tapi untuk top bottom center
kurang terlihat perbedaannya.
PERCOBAAN 3
Percobaan kali ini, kita mengatur tinggi dan lebar gambar. Gambar dapat ditampilkan lebih kecil atau
lebih besar dengan mengatur tinggi dan lebarnya. Satuannya menggunakan px
PERCOBAAN 4
Kali ini kita mencoba menggunakan atribut alt yang berfungsi menampilkan teks jika gambar tidak bias
ditampilkan.
PERCOBAAN 5
percobaan ini, kita memberi jarak pada foto tersebut. Vspace untuk memberi jarak vertical pada foto
dan hspace untuk jarak horizontal pada foto.
PERCOBAAN 6
Percobaan ini kita menampilkan gambar dari website lain dengan memasukkan link gambar website lain
pada img src=”...”
PERCOBAAN 7
Percobaan ini kita belajar melink halaman lain yang telah kita buat menggunakan atribut <a href=”….”>.
perlu untuk menyertakan tipe file yang kita link misal .http dan .pdf beserta letak foldernya. Atribut <br>
digunakan untuk memberi spasi/enter antar baris agar terdapat jarak yang membedakan keduanya.
PERCOBAAN 8
Percobaan ini kita mencoba mengganti link dengan link dari website lain misal youtube.
PERCOBAAN 9
Percobaan ini kita membuat link menggunakan gambar, jadi kita memasukkan gambar dulu baru
ditambah link.
PERCOBAAN 10
Percobaan ini kita melink pada halaman yang sama. Kita menggunakan atribut name. name ini
maksudnya memberi inisialisasi agar nantinya mudah dipanggil. Tapi kurang berhasil saat diterapkan.
Saat saya mengklik “lihat bab 9” halaman tidak turun kebawah padahal bab 9 berada dibawah dan peril
menscroll jendela.
PERCOBAAN 11
Percobaan ini, kita melink kan ke email. Caranya pun sama seperti saat memasukkan link dari website
lain.
TUGAS
Tugas ini kita memakai semua atribut yang sudah kita coba sebelumnya seperti a href, img src, padding,
align, width, height dan small. Untuk menata tulisan tersebut lebih apik, saya menggunakan div untuk
mengelompokkanya menjadi satu dan menatanya ke tengah dan background-color untuk memberi
warna pada “kotak” tersebut.
url web saya: ” http://laraslee.mb.student.pens.ac.id/ “