BAB II
FORMAT MULTIMEDIA PADA HALAMAN WEB
KOMPETENSI INTI
3. Memahami, menerapkan, menganalisis, dan mengevaluasi tentang pengetahuan faktual, konseptual, operasional dasar, dan metakognitif sesuai dengan bidang dan lingkup kerja Rekayasa Perangkat Lunak pada tingkat teknis, spesifik, detail, dan kompleks, berkenaan dengan ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam konteks pengembangan potensi diri sebagai bagian dari keluarga, sekolah, dunia kerja, warga masyarakat nasional, regional, dan internasional.
4. Melaksanakan tugas spesifik dengan menggunakan alat, informasi, dan prosedur kerja yang lazim dilakukan serta memecahkan masalah sesuai dengan bidang kerja Rekayasa Perangkat Lunak. Menampilkan kinerja di bawah bimbingan dengan mutu dan kuantitas yang terukur sesuai dengan standar kompetensi kerja. Menunjukkan keterampilan menalar, mengolah, dan menyaji secara efektif, kreatif, produktif, kritis, mandiri, kolaboratif, komunikatif, dan solutif dalam ranah abstrak terkait dengan pengembangan dari yang dipelajarinya di sekolah, serta mampu melaksanakan tugas spesifik di bawah pengawasan langsung. Menunjukkan keterampilan mempersepsi, kesiapan, meniru, membiasakan, gerak mahir, menjadikan gerak alami dala ranah konkret terkait dengan pengembangan dari yang dipelajarinya di sekolah serta mampu melaksanakan tugas spesifik di bawah pengawasan langsung.
KOMPETENSI DASAR
3. 4 Menerapkan tampilan format multimedia pada halaman web
4. 4 Membuat kode html untuk menampilkan tampilan format multimedia pada halaman web
APERSEPSI
HTML menyediakan banyak tag lain untuk merancang tabel yang lebih rumit. Untuk halaman web yang panjang, kadang perlu diberi komentar mengenai fungsi dan tujuan Anda membuatnya. Oleh sebab itu, mempelajari tag HTML yang sering digunakan dalam pembuatan halaman web menjadi suatu keharusan bagi seorang web programmer. 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.
Sumber: https://www.computerhope.com/jargon/h/html-tag.gif
MENGAMATI
Pelajarilah buku teks maupun sumber lain tentang format tabel dan format multimedia pada halaman web dengan baik dan benar!
AYO PAHAMI
Format Multimedia pada Halaman Web
Suatu standar teknologi web saat ini sudah tersusun meskipun penerapannya belum didukung oleh seluruh pengembang web. Standar ini disusun oleh suatu badan, yaitu World Wide Web Consortium (W3C). Standar ini dibutuhkan karena makin banyaknya variasi dalam teknologi web sehingga terkadang satu sama lain tidak kompatibel. Dengan demikian, web disusun dari halaman-halaman yang menggunakan teknologi web dan saling berkaitan satu sama lain.
1. Konsel Tampilan Multimedia dalam HTML
Multimedia identik dengan suatu sarana komunikasi yang berupa gabungan dari text, gambar, animasi, video, dan audio. Bentuk-bentuk multimedia di antaranya video komersial, advertisement, animasi flash, dan trailer video. Di samping itu, multimedia dimanfaatkan pada berbagai macam bidang, seperti hiburan (animasi), game (trailer game), pendidikan (media pengajaran), bisnis (presentasi, company profile), dan seterusnya. Ketika mencari atau mempelajari informasi, kerap kali menemukan informasi yang disajikan dalam bentuk teks. Namun, adakalanya untuk melengkapi teks yang ada, terdapat gambar yang berguna dalam membantu mengilustrasikan hal-hal yang sulit dibayangkan.
Pada media digital dapat ditambahkan suara dan video ke dalam teks untuk menambahkan informasi kepada pengguna. HTML sendiri menyediakan fltur untuk memberikan gambar, suara, maupun video untuk digunakan dalam dunia web. Pada umumnya, elemen multimedia (seperti suara/video) disimpan dalam file media dan cara yang paling umum untuk melihat format sebuah media adalah melihat ekstensi yang digunakan oleh file tersebut. Ketika browser menemukan file berekstensi ".htm/.html", browser akan berasumsi bahwa file tersebut merupakan halaman HTML. Ekstensi “.xml”diindikasikan sebagai file XML dan ekstensi " .css" file style sheet, sedangkan ekstensi untuk format seperti .jpg, .gif, dan lain-lain. Selain itu, elemen multimedia juga memiliki format file-nya sendiri yang memiliki ekstensi yang berbeda-beda seperti .swf, .wmv , .mp3 , dan .mp4.
2. Tag Menampilkan Gambar
Gambar identik dengan suatu objek yang dapat ditampilkan dalam bentuk grafik (nonteks) atau konsep yang berbentuk kode yang tidak berelasi dengan waktu. Gambar terbagi tiga jenis sebagai berikut.
Penambahan gambar pada HTML dapat menggunakan elemen img. Elemen img merupakan elemen yang bersifat self-contained (tidak memiliki tag penutup). Elemen img juga harus memiliki atribut src, yang dapat diisikan dengan dua metode, yaitu tempat dari gambar disimpan relatif terhadap file HTML dan URL dari gambar tersebut. Layaknya elemen-elemen Iain pada HTML, juga dapat mengubah tampilan elemen img dengan menggunakan CSS. Di samping itu, dukungan format gambar yang ada pada HTML diserahkan kepada masing-masing pembuat browser. Namun, terdapat format gambar yang didukung oleh hampir semua perangkat secara umum, misalnya PNG (Portable Network Graphics), JPG (Joint Photographic Expert Group), atau GIF (Graphics Interface Format). Berikut ini bentuk penggunaan tag img.
<img src="images/sintel.png"
alt="Sinte1 merupakan sebuah film singkat">
<img src="http://i.imgur.com/cYWveEa.jpg"
alt="Penggunaan URL untuk src.">
Penggunaan atribut alt pada dasarnya bersifat opsional dan berguna untuk memberikan keterangan gambar secara semantik. Keterangan tersebut juga akan ditampilkan ketika mouse diletakkan di atas gambar maupun pada saat gambar tidak dapat ditemukan.
a. Menguhah Ukuran Gambar
Perubahan ukuran gambar dapat dilakukan dengan menggunakan properti width dan height seperti pada elemen-elemen lainnya. Misalnya, sebuah gambar dengan ukuran asli 800x60() akan Secara otomatis berubah menjadi 1024x768 meskipun hanya mengisikan nilai width saja. Browser secara otomatis akan menghitung rasio panjang dan lebar gambar lalu menyesuaikan ukuran gambar dengan nilai yang diberikañ. Hal yang perlu diperhatikan dalam perubahan ukuran, yaitu tentang gambar dapat menyesuaikan ukuran yang tepat ketika memberikan salah satu dimensi. Hal yang perlu diingat adalah pengisian nilai width dan height dengan rasio panjang-lebar yang tidak tepat akan menyebabkan gambar menjadi kurang simetris. Perhatikan kode gambar yang diberi nama gambar313.jpg sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prosedur perubahan ukuran gambar</title>
<style type="text/css">
#set-width {
width: 200px;
}
#set-height {
height: 400px;
}
#set-width-height {
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<img src="gambar313.jpg " id="standar"><br>
<img src="gambar313.jpg " id="set-width"><br>
<img src="gambar313.jpg " id="set-height"><br>
<img src="gambar313.jpg " id="set-width-height">
</body>
</html>
Meskipun perubahan ukuran gambar dapat dilakukan secara otomatis oleh browser, alangkah baiknya perubahan dilakukan dengan sangat hati-hti. Ketika memperkecil sebuah gambar yang berukuran 1024x768 menjadi 320x240, meskipun terlihat gambar yang kecil, tetapi sebenarnya gambar yang harus diunduh oleh browser tetaplah berukuran 1024x768. Dalam hal ini, resolusi gambar sangat memengaruhi ukuran sehingga user akan mengambil gambar yang tidak diperlukan dan menyia-nyiakan bandwidth. Oleh sebab itu, gambar yang diberikan ke pengguna merupakan gambar optimal. Perubahan ukuran gambar umumnya dilakukan untuk memastikan konten yang diisikan oleh user tidak terlalu besar atau kecil sehingga mengganggu keseluruhan alur dokumen.
b. Perubahan Posisi Gambar
Elemen img merupakan inline level element sebab dengan menambahkan gambar di tengah-tengah teks akan menyebabkan gambar tersebut diselipkan di tengah-tengah teks sehingga mengacaukan alur teks itu sendiri. Penampilan gambar seperti ini tentunya sangat tidak optimal dan kurang bagus dipandang. Untuk menanggulanginya, dapat membuat gambar menjadi block level element sebagai berikut.
img {
display: block;
}
Anda juga bisa memberikan properti float kepada gambar sebagai berikut.
img {
background: #E8EAE9;
border: 1px solid #C6C9CC;
float: left;
margin: 10px;
padding: 4px;
}
c. Menggabung Gambar dan Teks
Jika ingin menggabungkan atau menyisipkan gambar di dalam suatu teks/paragraf tertentu, terdapat pilihan posisi gambar yang harus diperhatikan sebagai berikut.
Pada posisi gambar yang dilihat dari arah vertikal dapat ditentukan dengan mengisi nilai TOP, MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang terdapat pada tag <img>. Adapun untuk posisi gambar jika dilihat dari arah horizontal ditentukan dengan mengisi nilai LEFT dan RIGHT ke dalam ALIGN pada tag <img>. Dengan mengisi atribut tersebut dengan nilai LEFT, posisi gambar berada di sebelah kiri teks. Hal berbeda jika diisi RIGHT yang akan menyebabkan posisi gambar akan berada di sebelah kanan teks.
3. Tag untuk Audio
Penggunaan suara atau audio ke dalam aplikasi multimedia dapat memberikan informasi yang tidak mungkin diberikan oleh media informasi seperti gambar, grafik, ataupun teks. Misalnya, untuk menginformasikan bagaimana bunyi desiran angin tentu tidak bisa dideskripsikan oleh teks. Ada tiga jenis suara, yaitu ucapan (speech), musik, dan efek suara. Selain itu, suara juga terbagi dua jenis formatnya, yaitu MIDI dan WAVE.
a. MIDI (Musical Instrument Digital Interface) identik dengan jenis format suara yang berasal dari instrumentasi alat musik. Namun, jenis format MIDI tidak dapat memainkan atau merekam bunyi atau suara alami seperti suara tetesan air, suara manusia, dan lain-lain.
b. WAVE identik dengan jenis format musik atau suara berbasis digital yang dapat merekam dan memainkan jenis suara apa pun, baik real sound effect maupun suara dari manusia.
HTML memiliki fitur untuk menambahkan pemutar suara (audio) pada dokumen web. Elemen audio digunakan untuk tujuan tersebut sama seperti menggunakan elemen img dengan memberikan nilai tempat menyimpan file audio melalui atribut src. Hal yang perlu diketahui adalah elemen audio memiliki tag penutup dan hal tersebut berbeda dengan img.
<audio src="audios/guitars .mp3"></audio>
Sementara itu, untuk menampilkan elemen audic, Anda harus menambahkan atribut controls pada elemen sebagai berikut.
<audio src="audios/guitars .mp3" controls></audio>
Penggunaan atribut autoplay digunakan jika ingin memastikan audio dapat dimainkan secara otomatis ketika halaman selesai diunduh oleh browser. Berikut ini penggunaan atribut autoplay.
<audio src=" audios/guitars .mp3" controls autoplay></audio>
Sementara itu, atribut loop digunakan untuk mernastikan audio dapat diputar kembali secara otomatis ketika sudah selesai dimainkan. Atribut preload berfungsi untuk mengatur seberapa banyak data yang ingin dikirimkan ke browser ketika pertama kali mengunduh audio. Dalam hal ini, atribut preload dapat diisikan dengan tiga nilai sebagai berikut.
a. None
None berarti tidak ada data yang diunduh terlebih dahulu.
b. Auto
Auto melakukan unduh terhadap informasi-informasi mengenai file audio (durasi, nama seniman, dan seterusnya).
c. Metadata
Metadata hanya mengunduh informasi tentang file audio (tanpa mengunduh audio itu sendiri).
4. Tag untuk 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. Video seperti layaknya animasi, namun video lebih cenderung pada hasil karya dari adegan dunia nyata yang direkam secara langsung. Dalam video terkandung juga elemen multimedia Iainnya, seperti gambar, suara, dan tulisan. Video menyuguhkan informasi lebih lengkap dan menarik dibanding dengan elemen Iainnya.
Berikut ini prosedur untuk mcnambahkan video.
<video controls autoplay>
<source src="4 video.mp4" type="video/mp4">
<source src="4 video.mp4" type="video/mp4">
</video>
Pada umumnya, browser telah mendukung format OGV sehingga penambahan kedua format standar (OGV dan MP4) mampu mendukung seluruh browser modern. Jika ingin menambahkan dukungan video flash, dapat dilakukan dengan menambahkannya dengan cara sebagai berikut.
<video controls autoplay>
<source src="4 video.mp4" type="video/mp4">
<source src="4 video.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>
a. Elemen Video Standar
Faktor lain yang membedakan antara elemen video dengan audio adalah penggunaan atribut poster. Atribut poster pada umumnya diisikan dengan gambar yang relevan dengan video dan menerima nilai berupa URL ke sebuah gambar dengan format yang didukung oleh browser. Atribut poster berguna untuk memberikan gambar awal pada video, sebelum video dijalankan oleh pengguna. Berikut ini bentuk penggunaan atribut poster.
<video controls autoplay poster="images/trailer.jpg">
<source src="4 video.ogg" type="video/ogg">
<source src="4 video.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>
b. Elemen Figure dan Caption
Elemen figure identik dengan sebuah block level element yang berfungsi sebagai pembungkus dari media dalam bentuk gambar, audio, video, ataupun media-media lainnya. Anda bahkan dapat memasukkan beberapa media sekaligus ke dalam elemen figure tersebut. Elemen ini hanya berfungsi sebagai pembungkus dengan makna semantik (media ini relevan dengan dokumen) dapat menuliskan figure layaknya block level element lain. Hal ini dapat dijumpai pada media cetak tradisional, seperti tabloid, buku, sebuah gambar, grafik, majalah, atau potongan kode yang umumnya memiliki sebuah caption berupa keterangan dari apa yang ditampilkan oleh elemen-elemen tersebut. HTML menyediakan elemen figure dan figcaption untuk fasilitas-fasilitas tersebut.
<figure>
<img src=”images/gambar313.jpg” alt=”gambar dalam figure”>
</figure>
Selanjutnya, Anda dapat menambahkan keterangan pada media tersebut menggunakan elemen fig caption yang harus berada di dalam elemen figure. Berikut langkah-langkahnya.
<figure>
<img src=”images/gambar313.jpg” alt=”implementasi gambar dalam figure”>
<figcaption>
Contoh gambar di dalam figure
</figcaption>
</figure>
MENGEKSPLORASI
Buatlah sebuah kelompok kemudian kumpulkan data tentang konsep tampilan multimedia dalam HTML, terutama yang berhubungan dengan video komersial advertisement, animasi flash, dan trailer video!
MENGASOSIASIKAN DAN MENGOMUNIKASIKAN
Uraikan kembali informasi yang diperoleh tentang masalah tag menampilkan gambar, terutama yang berhubungan dengan mengllbah ukuran gambar, perubahan posisi gambar, serta menggabungkan gambar dan teks!
Presentasikan kesimpulan masalah tag untuk audio dan video, terutama yang berkaitan dengan implementasi audio dan video dengan HTML!
INFO
Gambar dengan map memungkinkan untuk memasang beberapa link dalam satu gambar. Hal tersebut memudahkan kita dalam memanggil sebuah halaman web dengan hanya menempatkan sekelompok gambar menjadi satu gambar. Untuk membuat image map, harus ditambahkan atribut USEMAP pada tag image.
<IMG SRC="directori gambar / nama gambar" usemap="#planetmap" >
Tampilan gambar dengan map merupakan suatu area pada gambar/image yang dapat diberi hyperlink area yang biasanya disebut "hotspots"- Koordinatnya gambar ditencukan menggunakan bidang geometri seperti rectangle, polygon, dan lain sebagainya. Map sendiri dapat diartikan sebagai peta. Untuk membuat image map digunakan tag <map> dan <area>. Perintah <map> dapat didukung oleh pelbagai browser, di antaranya internet explorer, mozilla firefox, opera, google chrome, maupun safari.
RANGKUMAN
1. HTML menyediakan banyak tag lain untuk merancang tabel yang lebih rumit. Untuk halaman web yang panjang, kadang perlu diberi komentar mengenai fungsi dan tujuan kita membuatnya.
2. Secara mendasar, elemen TABLE memiliki atribut seperti align, bgcolor, border, cellpadding (jarak antara tepi sel dengan isi sel), cellspacing (jarak antara sel), width (lebar tabel), dan height (tinggi tabel).
3. Mayoritas browser seperti Firefox, Chrome, Opera, Safari, dan Internet Explorer mendukung penggunaan colspan dan rowspan.
4. Ada tiga jenis suara, yaitu ucapan (speech), musik, dan efek suara. Selain itu, yaitu MIDI dan WAVE.
5. 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.
Assessmen !
Klik Link Berikut Ini
.png)
Tidak ada komentar:
Posting Komentar
Thank you for visiting Edu High School. This comment is an Auto Answer from our system please wait if your comment needs to be replied to urgently.
Greetings from us Edu High School.