1. Menambahkan Gambar
Untuk menambahkan gambar pada HTML, kita dapat menggunakan elemen img. Elemen img sendiri merupakan elemen yang bersifat self-contained, yaitu tidak memiliki tag penutup. Elemen img juga harus memiliki atribut src, yang dapat diisikan dengan dua cara, yaitu tempat dari gambar disimpan relatif terhadap file HTML dan URL dari gambar tersebut.
Berikut adalah contoh penggunaan tag img:
<img src="images/sintel.png" alt="Sintel merupakan sebuah film singkat.">
<img src="http://i.imgur.com/cYWveEa.jpg" alt="Contoh Pengunaan URL untuk src.">
Atribut alt, yang bersifat opsional, berguna untuk memberikan keterangan gambar secara semantik. Keterangan ini juga akan ditampilkan ketika mouse diletakkan di atas gambar, dan ketika gambar tidak dapat ditemukan.
Catatan: Dukungan format gambar yang ada pada HTML diserahkan kepada masing-masing pembuat browser. Begitupun, sangat disarankan untuk menggunakan format gambar yang didukung oleh hampir semua perangkat secara umum, seperti png, jpg, atau gif.
Layaknya elemen-elemen lain pada HTML, kita dapat mengubah tampilan elemen img dengan menggunakan
CSS.
Mengubah Ukuran Gambar
Perubahan ukuran gambar dapat dilakukan dengan menggunakan properti width dan height, seperti pada elemen-elemen lainnya. Yang perlu diperhatikan dalam perubahan ukuran ialah bagaimana sebuah gambar dapat menyesuaikan ukuran yang tepat ketika kita hanya memberikan salah satu dimensi. Misalnya, sebuah gambar dengan ukuran asli 800x600 akan secara otomatis berubah menjadi 1024x768 meskipun kita hanya mengisikan nilai width saja. Browser secara otomatis akan menghitung rasio panjang dan lebar gambar lalu menyesuaikan ukuran gambar dengan nilai yang kita berikan.
Tetapi perlu diingat bahwa pengisian nilai width dan height dengan rasio panjang-lebar yang tidak tepat tentunya akan menyebabkan gambar menjadi “tertarik”. Untuk lebih jelasnya, coba jalankan kode berikut pada gambar yang diberi nama gambar.jpg:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Perubahan Ukuran Gambar</title>
<style type="text/css">
#set-width {
width: 360px;
}
#set-height {
height: 600px;
}
#set-width-height {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<img src="images/gambar.jpg" id="standar"> <br>
<img src="images/gambar.jpg" id="set-width"> <br>
<img src="images/gambar.jpg" id="set-height"> <br>
<img src="images/gambar.jpg" id="set-width-height">
</body>
</html>
2. Perubahan Posisi Gambar
Seperti yang dapat dilihat pada kode sebelumnya, elemen img merupakan inline level element. Menambahkan gambar pada tengah-tengah teks akan menyebabkan gambar tersebut diselipkan ditengah-tengah teks, mengacaukan alur teks, seperti pada kode berikut:
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute
<img src="http://i.imgur.com/r03c371.jpg">
irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute
<img src="http://i.imgur.com/r03c371.jpg">
irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
Gimana Tampan Kan Gambar Diatas :v3. Menambahkan Lagu Atau Audio
Selain menampilkan gambar, HTML juga memiliki fitur untuk menambahkan pemutar suara (audio) pada dokumen web. Elemen audio digunakan untuk tujuan ini, dan sama seperti elemen img, kita harus memberikan nilai tempat menyimpan file audio melalui atribut src. Tetapi berbeda dengan img, elemen audio memiliki tag penutup:
<audio src="audios/piano.mp3"></audio>
Secara normal, ketika kita memasukkan elemen audio seperti pada kode di atas, kita tidak akan dapat melihat elemen audio, dan bahkan file audio yang dimasukkan tidak akan dapat dimainkan. Untuk menampilkan elemen audio, kita harus menambahkan atribut controls pada elemen:
<audio src="audios/piano.mp3" controls></audio>
dan jika kita ingin memastikan audio dapat dimainkan secara otomatis ketika halaman selesai diunduh oleh browser, kita dapat menggunakan atribut autoplay:
<audio src="audios/piano.mp3" controls autoplay></audio>
Tentunya selain ketiga atribut di atas kita juga memiliki atribut lainnya, yaitu loop dan preload. Seperti namanya, atribut loop digunakan untuk memastikan audio dapat diputar kembali secara otomatis ketika sudah selesai dimainkan. Atribut preload sendiri berfungsi untuk mengatur seberapa banyak data yang ingin dikirimkan ke browser ketika pertama kali mengunduh audio. Atribut preload dapat diisikan dengan tiga nilai, yaitu none, auto, dan metadata. Seperti namanya, none berarti tidak ada data yang diunduh terlebih dahulu, auto melakukan unduh terhadap informasi-informasi mengenai file audio (durasi, nama seniman, dst), dan metadata hanya mengunduh informasi tentang file audio (tanpa mengunduh audio itu sendiri).
Elemen Audio standar pada Chrome
Sumber Suara Tambahan
Ketika menambahkan audio pada dokumen web, terdapat beberapa hal yang harus kita perhatikan untuk memastikan bahwa audio dapat dimainkan dengan benar oleh pengguna. Hal paling utama yang perlu diperhatikan ialah apakah browser pengguna dapat menjalankan file audio yang diberikan tanpa masalah. Beberapa browser open source seperti Firefox menolak file audio tertutup seperti WMV dan hanya dapat menjalankan format OGG. Untuk menanggulangi hal ini, kita dapat memberikan beberapa jenis format file sekaligus dan membiarkan browser memilih format yang dapat dijalankannya.
Memberikan beberapa format file dapat dilakukan dengan menambahkan elemen source di dalam elemen audio, seperti berikut:
<audio controls>
<source src="audios/piano.ogg" type="audio/ogg">
<source src="audios/piano.mp3" type="audio/mpeg">
</audio>
Nilai pada atribut type harus diisikan dengan kode media Internet (MIME), sesuai dengan format yang diinginkan. Baca di sini untuk melihat daftar MIME untuk format-format umum yang dijumpai pada Internet.
Tambahan lagi, selain memberikan sumber suara dalam bentuk file audio, kita juga dapat menambahkan sumber berupa flash player untuk browser yang belum mendukung elemen audio. Penambahan elemen flash player dilakukan layaknya menambahkan elemen flash standar pada browser, tetapi tidak akan dibahas lebih jauh pada artikel ini karena penambahan tersebut akan memerlukan perubahan pada sisi server juga. Singkatnya, penambahan elemen flash dapat dilakukan kira-kira seperti berikut:
<audio controls>
<source src="audios/piano.ogg" type="audio/ogg">
<source src="audios/piano.mp3" type="audio/mpeg">
<object type="application/x-shockwave-flash"
data="player.swf?audio=piano.mp3">
<paran name="movie" value="player.swf?audio=piano.mp3">
<p>Tidak terdapat dukungan browser untuk flash.</p>
</object>
</audio>
Kode di atas merupakan kode yang paling aman untuk memastikan audio dapat dijalankan oleh pengguna, karena browser modern yang mendukung elemenn audio umumnya telah mendukung format OGG, dan untuk browser yang tidak mendukung, norma yang ada ialah menggunakan flash player untuk menyajikan audio / video.
Berikut Hasil Outputnya :D
4. Menambahkan Video
Penambahan video pada dokumen HTML dilakukan dengan elemen video, yang sangat mirip dengan elemen audio. Atribut-atribut yang dapat digunakan pada elemen audio juga digunakan pada elemen video, sehingga perbedaan utama dari kedua elemen ini terdapat pada nama elemen dan dukungan format. Karenanya, setelah mengetahui tentang tag audio, kita dapat dengan mudah menambahkan video seperti berikut:
dan sama seperti pada kasus audio, umumnya browser telah mendukung format OGV, sehingga penambahan kedua format standar (OGV dan MP4) umumnya telah cukup untuk mendukung seluruh browser modern. Jika ingin menambahkan dukungan video flash, kita dapat menambahkannya dengan cara yang sama dengan pada elemen audio:
Penambahan video pada dokumen HTML dilakukan dengan elemen video, yang sangat mirip dengan elemen audio. Atribut-atribut yang dapat digunakan pada elemen audio juga digunakan pada elemen video, sehingga perbedaan utama dari kedua elemen ini terdapat pada nama elemen dan dukungan format. Karenanya, setelah mengetahui tentang tag audio, kita dapat dengan mudah menambahkan video seperti berikut:
<video controls autoplay>
<source src="videos/trailer.ogv" type="video/ogg">
<source src="videos/trailer.mp4" type="video/mp4">
</video>
<source src="videos/trailer.ogv" type="video/ogg">
<source src="videos/trailer.mp4" type="video/mp4">
</video>
dan sama seperti pada kasus audio, umumnya browser telah mendukung format OGV, sehingga penambahan kedua format standar (OGV dan MP4) umumnya telah cukup untuk mendukung seluruh browser modern. Jika ingin menambahkan dukungan video flash, kita dapat menambahkannya dengan cara yang sama dengan pada elemen audio:
<video controls autoplay>
<source src="videos/trailer.ogv" type="video/ogg">
<source src="videos/trailer.mp4" type="video/mp4">
<source src="videos/trailer.ogv" type="video/ogg">
<source src="videos/trailer.mp4" type="video/mp4">
<object type="application/x-shockwave-flash"
data="player.swf?video=trailer.mp4">
<param name="movie" value="player.swf?video=trailer.mp4">
<p>Tidak ada dukungan flash</p>
</object>
</video>
data="player.swf?video=trailer.mp4">
<param name="movie" value="player.swf?video=trailer.mp4">
<p>Tidak ada dukungan flash</p>
</object>
</video>
Ok Selesai Agar Kalian Nyaman Membaca Tutorial Saya Tanpa Perlu Koneksi Ke Internet
Silahkan DOWNLOAD File .pdf Nya DISINI
Like Fans Page Facebook Saya DISINI
Written by Nulled
Blogger Muda Yang Masih Berstatus Pelajar, Yang Berkecimpung Di Dunia IT Semenjak Tahun 2013 Dan Ingin Berbagi Ilmu Pengetahuan Tentang Programming Web Design,Desktop Application, Tips Blogging, Google Adsense, Dan Internet Marketing. Temukan Celotehan Saya Di Twitter @Anaksmkti
0 comments:
Post a Comment