Pengenalan Perancangan Web 2017

Ukuran: px

Mulai penontonan dengan halaman:

Download "Pengenalan Perancangan Web 2017"

Hadian Widjaja
6 tahun lalu
Tontonan:

1 7. Elemen Media Elemen ini merupakan elemen yang dikatakan dapat menggeser keberadaan Adobe Flash. Dengan memanfaatkan elemen audio dan video di HTML5, tidak lagi diperlukan plugin pemutar audio dan video. Hal ini dikarenakan sudah terdapat code OGC yang langsung dapat mengenali tag elemen media di HTML5. Sehingga audio dan video dapat disisipkan di halaman HTML dengan lebih mudah. TAG <audio> <video> <source> <embed> KETERANGAN Untuk konten multimedia, suara, musik, atau streaming audio lainnya Untuk konten video, seperti klip film Untuk sumber media pada elemen media, menjelaskan di dalam video atau media audio Untuk mengisi embedded, contohnya seperti plug-in atau mengambil video dari Youtube 7.1. HTML5 Video Video pada halaman web sudah banyak digunakan, namun belum ada standard untuk menampilkan video pada halaman web. Kebanyakan video yang disertakan di halaman web dibuat dengan menambahkan plugin (seperti flash). Dengan adanya HTML5, video dapat ditampilkan tanpa menambahkan plugin. Karena HTML5 telah menetapkan standard untuk memasukkan file video ke dalam halaman website yang dibuat dengan menggunakan elemen video. Untuk menampilkan video pada halaman website, diperlukan kode sebagai berikut. <video src= video.mp4 controls= controls ></video> Keterangan: a. Tag <video></video> berguna untuk membuat elemen video. b. Atribut src untuk menentukan lokasi file video yang ingin ditampilkan. c. Atribut control berguna untuk menampilkan control video (seperti play, pause, stop) pada halaman web. Pada elemen video dapat ditambahkan atribut lebar(width) dan tinggi(height) pada video yang akan ditampilkan diantara tag <video></video>. Contoh: latihan28.html 22 <!doctype html> <title>latihan Elemen Video HTML5</title> <video src="video.mp4" controls="controls" > </video>

2 Beberapa atribut yang dapat digunakan untuk melengkapi tag video: ATTRIBUT VALUE KETERANGAN Audio Muted Mendefinisikan muted, keadaan default audio Autoplay Autoplay Menetapkan keadaan video langsung berputar pada saat halaman diakses Controls Controls Menampilkan control video Height Pixels Menentukan tinggi video Loop Loop Melakukan pengulangan dalam memutar video Poster url Menentukan URL gambar yang mewakili video Preload Preload Membuat preload untuk video Src url Menentukan URL letak video yang akan diputar Width Pixels Menentukan lebar video 7.2. HTML5 Audio Seperti halnya video, elemen audio yang ditampilkan pada halaman website biasanya menggunakan plugin tambahan. Akan tetapi, sekarang HTML5 telah menetapkan cara standard untuk memasukkan audio ke dalam dokumen HTML, yaitu dengan mengggunakan elemen audio. Dengan menggunakan elemen audio, sebuah halaman website dapat dimungkinkan untuk memutar audio. Format audio yang didukung oleh browser antara lain ogg, mp3 dan wav. Untuk menampilkan audio pada halaman website, diperlukan kode sebagai berikut. <audio src= wave.mp3 controls= controls ></audio> Keterangan: a. Tag <audio></audio> berguna untuk membuat elemen audio. b. Atribut src untuk menentukan lokasi file audio yang ingin ditampilkan. c. Atribut control berguna untuk menampilkan control audio (seperti play, pause, stop) pada halaman web. Pada elemen video dapat ditambahkan atribut lebar(width) dan tinggi(height) pada video yang akan ditampilkan diantara tag <video></video>. Contoh: latihan29.html 23 <!doctype html> <title>latihan Elemen Audio HTML5</title> <audio src="wave.mp3" controls="controls" > </audio>

3 Terdapat atribut yang dapat digunakan untuk melengkapi tag audio: ATTRIBUT VALUE KETERANGAN Autoplay Autoplay Menetapkan keadaan audio langsung berputar pada saat halaman diakses Controls Controls Menampilkan control audio Loop Loop Melakukan pengulangan dalam memutar audio Src url Menentukan URL letak audio yang akan diputar 8. Tabel Tabel digunakan untuk menyajikan data dalam bentuk baris dan kolom. Umumnya setiap kolom menunjukkan data sejenis dan setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan. Elemen-elemen yang ada di dalam tabel: Elemen Keterangan <table>... </table> Mendefinisikan sebuah tabel dalam HTML <caption>...</caption> Mendefinisikan tulisan untuk judul tabel. Posisi default dari judul adalah di tengah atas tabel. Atribut align= botton dapat digunakan untuk menempatkan judul pada bagian bawah tabel. Catatan: Judul dapat diberi tag apa saja.... Menspesifikasikan sebuah baris tabel dalam tabel <th>...</th> Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan di tengah <td>...</td> Mendefinisikan sebuah sel data tabel Atribut yang ada di dalam tabel: Elemen Align=[ left center right ] Background Bgcolor Border Bordercolor Bordercolorlight Bordercolordark Colspan=n Rowspan=n Nowrap Valign =[ top middle bottom ] Keterangan Alignment horizontal untuk sel Gambar latar belakang tabel Warna latar belakang Tebal bingkai tabel Warna bingkai tabel Warna depan bingkai tabel Warna bayangan bingkai tabel Jumlah n kolom sel digabung Jumlah n baris sel digabung Matikan wrapping dalam sel Definisi alignment vertikal dalam sel 24 Contoh: latihan30.html <title>pengenalan Tabel</title> <table> Next code...

4 <th width=50>no</th> <th width=200>nama</th> <th width=120>nim</th> <td>1.</td> <td>andi</td> <td> </td> <td>2.</td> <td>amir</td> <td> </td> </table> 8.1. Tabel dengan Atribut Atribut bertujuan untuk mengatur tabel sesuai kebutuhannya. Berikut contoh tabel yang memanfaatkan beberapa atribut align, border, bgcolor, dan width. contoh: latihan31.html <title>pengenalan Tabel</title> <table border= 1 width= 50% > <tr bgcolor= red > <th width=50>no</th> <th width=200>nama</th> <th width=120>nim</th> <td align= center >1.</td> <td align= left >Andi</td> <td align= center > </td> <td align= center >2.</td> <td align= left >Amir</td> <td align= center > </td> </table> 25

5 8.2. Cellpadding dan Cellspacing Cellpadding digunakan untuk membuat spasi lebih di antara sel dan bordernya. Cellpadding membuat tampilan di dalam tabel menjadi lebih nyaman untuk dibaca karena terdapat jeda ruang kosong antara tulisan dan tabelnya. Sedangkan Cellspacing digunakan untuk menambah jarak antarsel. Ilustrasi dapat dilihat pada Gambar 8.1 dan Gambar 8.2. Gambar 8.1 Ilustrasi Cellpadding Gambar 8.2 Ilustrasi Cellspacing 26 contoh: latihan32.html <title>pengenalan Tabel dengan Cellpadding dan Cellspacing</title> <h3>tabel dengan Cellpadding</h3> <table border= 1 cellpadding= 10 > <th width= 30 >NO</th> <th width= 200 >NAMA</th> Next code...

6 <th width= 120 >NIM</th> <td>1.</td> <td>andi</td> <td> </td> <td>2.</td> <td>amir</td> <td> </td> </table> <h3>tabel dengan Cellpadding</h3> <table border= 1 cellpadding= 10 > <th width= 50 >NO</th> <th width= 200 >NAMA</th> <th width= 120 >NIM</th> <td>1.</td> <td>andi</td> <td> </td> 8.3. Colspan dan Rowspan Colspan dan rowspan digunakan untuk mendefiniskan sel tabel yang dilebarkan lebih dari satu baris atau satu kolom. contoh: latihan33.html 27 <title>belajar Tabel dengan Colspan dan Rowspan</title> <h3>daftar Nama Mahasiswa</h3> <table border="1" > <th width="50" rowspan="2">no.</th> <th width="250" colspan="2">data Mahasiswa</th> <th>nama</th> <th>nim</th> <td>1.</td> <td>andi</td> <td> </td> Next code...

7 </table> <td>2.</td> <td>boni</td> <td> </td> 28

8 REFERENSI Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta: Andi Offset. Sidik, Betha dan Pohan, I. Husni. (2011). Pemrograman Web dengan HTML disertai lebih dari 200 contoh program beserta tampilan grafisnya. Bandung: Informatika. Khafidli, M. Firgiawan. (2011). Trik Menguasai HTML5, CSS3, PHP Aplikatif. Yogyakarta: Lokomedia. Enterprise, Jubile. (2014). HTML 5 Manual Book. Jakarta: Elex Media Komputindo Pidie, Ghazali. Modul Langkah Demi Langkah Menguasai HTML5. 29

dokumen-dokumen yang mirip

Pengenalan Perancangan Web 2016

Pengenalan Perancangan Web 2016 6. Image Gambar pada halaman sebuah web merupakan salah satu daya tarik pengguna. Umumnya browser web dapat menampilkan inline image (yaitu gambar yang disajikan bersamaan dengan teks). File gambar yang