Multimedia
Ketika sedang mencari atau mempelajari informasi, kerap kali kita akan menemukan informasi yang ada disajikan dalam bentuk teks. Sering juga, untuk melengkapi teks yang ada, terdapat gambar yang berguna dalam membantu kita mengilustrasikan hal-hal yang sulit dibayangkan. Untuk media digital, kita bahkan dapat menambahkan suara dan video ke dalam teks untuk menambahkan informasi kepada pengguna.
HTML sendiri menyediakan fitur untuk memberikan gambar, suara, maupun video untuk digunakan dalam dunia web. Bagaimana caranya? Mari kita lihat!
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, sepertipng
,jpg
, ataugif
.
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>
kemudian jalankan dan lihat hasilnya.
Hal lain yang perlu dicatat yaitu bahwa meskipun perubahan ukuran gambar dapat dilakukan secara otomatis oleh browser, sebaiknya perubahan dilakukan dengan sangat hati-hati. Ketika memperkecil sebuah gambar yang berukuran
1024x768
menjadi 320x240
misalnya, meskipun pengguna melihat gambar yang kecil, gambar yang harus diunduh oleh browser tetaplah berukuran 1024x768
. Resolusi gambar tentunya mempengaruhi ukuran, sehingga pengguna akan mengambil gambar yang tidak diperlukan, dan menyia-nyiakan bandwidth. Jadi, selalu pastikan gambar yang diberikan ke pengguna merupakan gambar yang optimal. Perubahan ukuran gambar umumnya dilakukan untuk memastikan konten yang diisikan oleh pengguna tidak terlalu besar atau kecil, sehingga mengganggu keseluruhan alur dokumen.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>
untuk mendapatkan hasil sebagai berikut:
Penampilan gambar seperti ini tentunya sangat tidak optimal. Untuk menanggulanginya, kita dapat membuat gambar menjadi block level element:
img {
display: block;
}
ataupun dengan memberikan properti
float
kepada gambar, seperti berikut:img {
background: #E8EAE9;
border: 1px solid #C6C9CC;
float: left;
margin: 10px;
padding: 4px;
}
contoh pengunaannya yaitu sebagai berikut:
Menambahkan Suara (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.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:<video controls autoplay>
<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">
<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>
dan kita akan dapat melihat elemen audio langsung pada browser:

Elemen Video standar pada Chrome
Hal lain yang membedakan elemen
video
dengan audio
ialah atribut poster
. Atribut poster
berguna untuk memberikan gambar awal pada video, sebelum video dijalankan oleh pengguna. Atribut poster
biasanya diisikan dengan gambar yang relevan dengan video, dan menerima nilai berupa URL ke sebuah gambar, dengan format yan didukung oleh browser pada umumnya. Berikut adalah contoh penggunaan atribut poster
:<video controls autoplay poster="images/trailer-poster.jpg">
<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>
yang akan menghasilkan elemen berikut ketika pengguna pertama kali membuka halaman:

Elemen Video dengan Poster pada Chrome
Elemen Figure dan Caption
Pada media cetak tradisional seperti buku, majalah, atau tabloid, sebuah gambar, grafik, atau potongan kode umumnya memiliki sebuah caption berupa keterangan dari apa yang ditampilkan oleh elemen-elemen tersebut. HTML menyediakan elemen
figure
dan figcaption
untuk fasilitas-fasilitas tersebut.
Elemen
figure
merupakan sebuah block level element yang berfungsi sebagai pembungkus dari media, baik berupa gambar, audio, video, ataupun media-media lainnya. Kita bahkan dapat memasukkan beberapa media sekaligus ke dalam elemen figure
. Karena hanya berperan sebagai pembungkus dengan makna semantik (media ini relevan dengan dokumen), kita dapat menuliskan figure
layaknya block level element lainnya:<figure>
<img src="images/gambar.jpg" alt="gambar dalam figure">
</figure>
dan kemduian, kita dapat menambahkan keterangan pada media tersebut dengan menggunakan elemen
figcaption
yang harus berada di dalam elemen figure
:<figure>
<img src="images/gambar.jpg" alt="Contoh Gambar di dalam Figure">
<figcaption>
Contoh Gambar di dalam Figure
</figcaption>
</figure>
Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel tag digunakan untuk menampilkan data dalam bentuk tabel. Dalam tutorial belajar HTML cara membuat tabel HTMLini kita akan membahas cara penggunaannya.
Cara Membuat Tabel HTML dengan tag <table>, <tr> dan <td>
Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag <table>, tag <tr>,dan tag <td>:
- Tag <table> digunakan untuk memulai tabel
- Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
- Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Agar lebih jelas, kita akan langsung menggunakan contoh kode HTML:
Contoh penggunaan tag <table>:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td> Baris 2, Kolom 3</td>
</tr>
<tr>
<td> Baris 3, Kolom 1</td>
<td> Baris 3, Kolom 2</td>
<td> Baris 3, Kolom 3</td>
</tr>
<tr>
<td> Baris 4, Kolom 1</td>
<td> Baris 4, Kolom 2</td>
<td> Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html>
Perhatikan bahwa pada tag <table> kita memberikan atribut border. Atribut border digunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel. border=”1”, berarti kita mengistruksikan kepada web browser bahwa tabel tersebut akan memiliki garis tepi sebesar 1 pixel. Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi.
Sebelum standar CSS diimplementasikan ke dalam semua browser, pada sekitar tahun 2000-an kebanyakan programmer dan desainer web menggunakan tabel untuk mengatur tampilan web. Membuat menu ada di atas dan sisi kanan web bisa diakali dengan menjadikan halaman web sebagai sebuah tabel yang besar. Hal ini sebenarnya tidak salah, namun akan membuat pengkodean HTML menjadi rumit. Saat ini anda masih bisa menggunakan ide tersebut, namun sangat disarankan menggunakan CSSuntuk mengatur tampilan halaman web.
HTML menyediakan banyak tag lain untuk merancang tabel yang lebih rumit. Untuk pembahasan mengenai ini, duniailkom telah membuat beberapa tutorial lanjutan tentang Tabel HTML yang bisa dipelajari pada: Tutorial Belajar Tabel HTML Lanjutan.
Sampai disini kita telah mempelajari beberapa tag HTML yang sering digunakan dalam pembuatan halaman web. Untuk halaman web yang panjang, kadang perlu diberi komentar mengenai fungsi dan tujuan kita membuatnya.
Belajar Format Teks di HTML
Posted by Yogo Prestiyanto on Thursday, November 22, 2012
Dalam artikel saya sebelumnya pernah saya contohkan membuat sebuah paragraf di HTML "Belajar Membuat Paragraf,Link,& Heading di HMTL". Kali ini saya akan memberi contoh cara menulis format teks di HTML. Contoh dari format teks yang sering digunakan antara lain cetak tebal,huruf miring,dll.
Daripada berteori langsung saja saya praktekkan :D
Lihat script dibawah ini :
Maka untuk tampilannya akan seperti ini :
Saya hanya mencontohkan tag yang sering dipakai dan populer dalam penulisan sebuah teks saja. Untuk tag-tag lainnya mungkin anda bisa bereksperimen sendiri agar lebih bisa menguasainya.
Dibawah ini adalah contoh-contoh tag yang berfungsi untuk pemformatan teks pada HTML :
Format Teks Pada HTML
Tag Fungsi
<b></b> atau <strong></strong> Berfungsi untuk membuat teks tebal
<u></u> Berfungsi untuk membuat teks underline atau garis bawah
<i></i> atau <em></em> Berfungsi untuk membuat cetak miring
<strike></strike> Membuat teks bergaris
<small></small> Mendefinisikan teks kecil
<sub></sub> Mendefinisikan teks subscript
<sup></sup> Mendefinisikan teks superscript
<ins></ins> Mendefinisikan teks yang disisipkan
<del></del> Mendefinisikan teks yang dihapus
Tag Output Komputer Pada HTML
Tag Fungsi
<code> Mendefinisikan sebuah teks pada komputer
<kbd> Mendefinisikan teks keyboard
<samp> Mendefinisikan sampel pada komputer
<var> Mendefinisikan variabel
<pre> Mendefinisikan teks terformat
Tag Definisi dan Kutipan Pada HTML
Tag Fungsi
<abbr> Mendefinisikan singkatan atau akronim
<address> Mendefinisikan kontak penulis atau pemilik dokumen
<bdo> Mendefinisikan arah teks
<dfn> Mendefinisikan sebuah definisi
<cite> Mendefinisikan judul karya
<q> Mendefinisikan kutipan pendek atau inline
<blockquote> Mendefinisikan bagian yang dikutip dari sumber lain
Selamat mencoba !
Tidak ada komentar:
Posting Komentar