LAPORAN PRAKTIKUM

Nama : Nadia Reza Almaida

NIM : C030319056
Mata Kuliah : Praktikum Desain Web
Praktikum Ke- :2

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNIK ELEKTRO
POLITEKNIK NEGERI BANJARMASIN
2020/2021
 PRAKTIKUM 2

2.1 Judul
Image, Audio dan Video Element

2.2 Tujuan Instruksional Umum

1. Mahasiswa bisa memahami, menampilkan gambar pada WEB
2. Mahasiswa bisa memahmi dan menampilkan Video dan Audio pada WEB
3. Mahasiswa dapat memahami dan menggunakan form

2.3 Tujuan Instruksional Khusus

1. Mahasiswa bisa memahami cara menyisipkan gambar, pengaturan tata letak gambar,
pengaturan ukuran dan memberikan keterangan pada gambar dalam web.
2. Mahasiswa bisa memahami cara menyisipkan Video dan Audio, pengaturan tata letak
Video dan Audio, pengaturan ukuran dan memberikan keterangan pada Video dan
Audio dalam web.
3. Mahasiswa dapat menggunakan form sebagai sarana interaksi dengan pengujung.
Apakah itu digunakan untuk register, login, polling, atau untuk pencarian (search
box).

2.4 Dasar Teori

Gambar atau image adalah salah satu media terpenting dalam halaman web. Hampir
setiap website memiliki gambar sebagai konten maupun sebagai hiasan untuk
mempercantik tampilan website. Logo yang menjadi identitas dari sebuah website
biasanya dibuat dari gambar.
Image, Citra atau gambar dalam suatu website biasanya beukuran file dibawah
500Kb. File citra dengan ekstensi *.bmp sangat tidak baik digunakan untuk menghias
halaman website, dikarenakan ukuranya yang besar.
File citra yang mempunyai teknik kompresi dan sering dijumpai untuk menghias
website, yaitu :
● Citra dengan format kompresi PNG (Portable Network Graphics),
menggunakan teknik kompresi pengelompokkan jumlah pixel.
 ● Citra dengan format kompresi JPEG (Joint Photographic Experts Groups),
menggunakan format warna 24 bit (16 juta / 16.776.960), menggunakan teknik
progressive.
● Citra dengan format kompresi GIF (Graphics Interchange Format),
menggunakan format warna 8 bit (256), teknik penyimpanan interlacing.

2.5 Percobaan
A. Image Element
1. Latihan1.html

Hasil :

2. Latihan2.html

Hasil :
3. Latihan3.html

Hasil :

4. Latihan4.html

Hasil :
5. Latihan5.html

Hasil :

6. Latihan6.html

Hasil :
7. Latihan7.html

Hasil :

8. Latihan8.html
 Hasil :

9. Latihan9.html

Hasil :
10. Latihan10.html

Hasil :

11. Latihan11.html
 Hasil :

12. Latihan12.html
 Hasil :

13. Latihan13.html

Hasil :
14. Latihan14.html

Hasil :
B. Audio dan Video Element
15. Latihan15.html

Hasil :

16. Latihan16.html

Hasil :
17. Latihan17.html

Hasil :

18. Latihan18.html

Hasil :
19. Latihan19.html

Hasil :
20. Latihan20.html

Hasil :
C. Form Element
1. Form1.html

Hasil :
2. Form2.html

Hasil :

3. Form3.html

Hasil :

4. Form4.html
 Hasil :

5. Form5.html

Hasil :
6. Form6.html

Hasil :

7. Form7.html

Hasil :

8. Form8.html
 Hasil :

9. Form9.html

Hasil :

10. Form10.html
 Hasil :

11. Form11.html

Hasil :
12. Form12.html

Hasil :

13. Form13.html
 Hasil :

14. Form14.html
 Hasil :

15. Form15.html

Hasil :

16. Form16.html
 Hasil :

17. Form17.html
 Hasil :

18. Form18.html
 Hasil :

19. Form19.html

Hasil :
20. Form20.html

Hasil :
21. Form21.html

Hasil :
22. Form22.html

Hasil :

23. Form23.html
 Hasil :

24. Form24.html

Hasil :
25. Form25.html

Hasil :
26. Form26.html

Hasil :

27. Form27.html
 Hasil :

28. Form28.html
 Hasil :

29. Form29.html
 Hasil :

30. Form30.html

Hasil :
31. Form31.html

Hasil :
32. Form32.html

Hasil :

33. Form33.html
 Hasil :

34. Form34.html

Hasil :
35. Form35.html

Hasil :

36. Form36.html
 Hasil :

37. Form37.html

Hasil :
38. Form38.html

Hasil :
39. Form39.html

Hasil :

40. Form40.html

Hasil :
41. Form41.html

Hasil :

42. Form42.html
 Hasil :

43. Form43.html

Hasil :
44. Form44.htm

Hasil :
 45. Form45.html

Hasil :

2.6 Data
● Image Element
Untuk menginput gambar pada halaman web, digunakanlah tag <img> . Tag
<img> merupakan void element, sehingga tidak membutuhkan tag penutup </img>.
Dalam percobaan di atas menggunakan tag dengan beberapa atribut, yaitu :
- src = “”, digunakan untuk source file gambar.
- alt = “”, digunakan apabila gambar yang ditampilkan terjadi gangguan
jaringan internet, browser tidak mendukung format gambar.
 - title = “”, bersifat optional, untuk menampilkan keterangan ketika cursor
mouse berada di atas gambar (mouse over).
- width = “” dan height = ””, digunakan untuk mengatur ukuran gambar yang
ingin ditampilkan di laman web.
- align = “”, digunakan untuk mengikuti alur teks dimana tag berada.
- border = ””, digunakan untuk mempertebal gambar atau bisa disebut menjadi
garis tepi pada gambar.
- a herf = “”, digunakan untuk menampilkan laman baru yang sesuai dengan
link.

● Audio dan Video Element

Untuk menjalankan file multimedia, menggunakan tag <audio> dan <video>.
Tag <audio> harus ditulis berpasangan dengana tag penutup </audio>, sama seperti
tag<video> harus ada tag penutupnya </video>. Dalam percobaan di atas
menggunakan tag dengan beberapa atribut, yaitu :
- src = “”, digunakan sebagai petunjuk lokasi file audio.
- autoplay = ””, jika menggunakan atribut ini maka ketika laman web diakses
lagu akan langsung terputar.
- loop = “”, jika digunakan maka lagu akan diputar terus menerus atau berulang.
- preload = “”, digunakan jika lagu bisa langsung di download pada laman web.
- width = “”, height = “”, digunakan untuk mengatur ukuran video panjang dan
lebar dalam laman web.

● Form Element
Form merupakan salah satu aspek terpenting di dalam sebuah website. Tag
<form> harus ada tag penutupnya </form>. Dalam percobaan di atas menggunakan
tag dengan beberapa atribut, yaitu :
- action = “”, digunakan untuk menulis alamat file yang menjadi tujuan
pengiriman data.
- method = “”, untuk memberitahu web browser bagaimana cara pengiriman
data form dengan nilai get atau post
- <input type = “text”>, digunakan untuk mengetik sesuatu ke dalam kotak
persegi panjang..
- name = “”, digunakan untuk penanda pada saat form akan diproses.
- value = “”, digunakan untuk memberi nilai pada sebuah objek form.
- size = “”’, digunakan untuk mngatur panjang textbox yang ditampilkan.
- readonly = “”, digunakan untuk nilai yang tidak bisa diubah oleh
penggunanya.
- disabled = “”, digunakan untuk membuat objek form yang tidak bisa diakses,
akan berwarna abu-abu sebagai tanda tidak bisa diakses.
- maxlenght = “”, digunakan untuk membatasi jumlah digit karakter pada
sebuah text.
- <input type = “submit”>, digunakan untuk mengirim form pada server dengan
tampilan berbentuk tombol (button).
- target = “”, digunakan untuk memindahkan ke laman web yang baru.
- <input type = “reset”>, digunakan untuk mengosongkan isi form dengan
menyediakan tombol reset.
- <input type = “password”>, digunakan untuk menginputkan password pada
form.
- <input type = “chechbox”>, kotak persegi yang digunakan untuk memilih
dengan mengklik (ceklist) kotaknya.
- checked, digunakan untuk checkbox yang langsung terpilih pada saat laman
diakses.
- <input type = “radio”>, digunakan untuk membatasi pilihan dengan satu nilai
saja.
- <textarea>, sama seperti textbox tetapi text area bisa menampung lebih banyak
teks.
- rows = “” dan cols = “”, digunakan untuk mengatur jumlah baris dan kolom
dari textarea.
- select element dan option element, digunakan untuk memilih pilihan yang
tersedia.
- selected, digunakan untuk membuat pilihan default pada tag <option> ketika
form ditampilkan.
- multiple, digunakan untuk memilih lebih dari 1 pilihan pada tag <select>
ketika laman diakses.
- optgroup element, digunakan untuk penyajian data yang kompleks,
mengelompokkan pilihan pada tag <option>.
 - <input type = “file”>, digunakan untuk mengupload file berupa gambar,
musik, video, dokumen, dll.
- enctype = “”, digunakan untuk pengiriman data ke server.
- accept = “”, mirip dengan maxlenght, digunakan untuk membatasi jenis-jenis
file yang akan diupload.
- <input type = “hidden”>, digunakan untuk menyediakan objek form yang tidak
terlihat.
- <input type = “image”>, digunakan untuk menginputkan gambar sebagai objek
input form, untuk menggantikan tombol submit bawaan web browser.
- <>input type = “button”, digunakan untuk menambahkan tombol yang
didefinisikan sendiri pada form.
- label element, digunakan untuk membuat interaksi dengan form menjadi lebih
baik (user friendly), tetapi tidak mempengaruhi tampilan pada laman web.
- fieldset element dan legend element, digunakan untuk mempercantik tampilan
form dengan mengelompokkan objek form sesuai dengan pembagiannya.
<fieldset> berfungsi sebagai ’container’ yang menampung objek form,
<legend> berfungsi untuk membuat judul penjelasan.
- button element, membuat tombol bisa digunakan dengan input tapi juga bisa
langsung dengan tag <button>. Diakhiri dengan tag penutup </button>,
contohnya : <button>Kirim Data</button>.

2.7 Analisa Data

Tag dan atribut yang ada pada data di atas bisa disatukan agar menjadi sebuah
informasi atau pendataan pada website untuk pemula dengan melihat fungsinya
masing-masing.

2.8 Kesimpulan
Pada praktikum ini dapat mempelajari bagaimana menambahkan image, video, audio
bahkan membuat form pada sebuah laman web. Dengan tag dan atribut pada percobaan
yang telah dilakukan di atas akan memperindah tampilan pembuatan web sesuai dengan
keinginan pembuatnya.

2.9 Soal