LAPORAN RESMI. PRAKTIKUM TEKNOLOGI WEB Image dan Link

Transkripsi

1 LAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB Image dan Link Dosen Pembimbing : Dwi Susanto Oleh : Laras Intansari ( ) 3 D3 MMB B PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI SURABAYA 2015

2 Tujuan Praktikum 2 Image dan Link - 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

3 disimpan alt title atribut ini berisi teks deskripsi gambar yang akan mendeskripsikan gambar apabila gambar tersebut tidak dapat ditampilkan. 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: Links 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.

4 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 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= > Kampus PENS </a>

5 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.

6 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 <a href= about.html > Profil</a> anda tuju

7 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 file yang ada di root folder, maka anda perlu menggunakan../ video ke 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.

8 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

9 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

10 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

11 Percobaan ini kita menampilkan gambar dari website lain dengan memasukkan link gambar website lain pada img src=... PERCOBAAN 7

12 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

13 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

14 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 . Caranya pun sama seperti saat memasukkan link dari website lain.

15 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

16 mengelompokkanya menjadi satu dan menatanya ke tengah dan background-color untuk memberi warna pada kotak tersebut. url web saya: