HYPERLINK
HYPERLINK
A. Elemen Hyperlink
untuk membuat hyperlink dengan teks, harus menambahkan tag anchor HTML dengan format sebagai berikut.
B.Link Absolut
adalah sebuah metode menyediakan link ke alamat situs lainnya. Contohnya :
--membuat link ke alamat situs tertentu.
<html>
<head>
<title>membka situs google dengan link</title>
</head>
<body>
<a href=”http://www.google.com”>klik disini untuk membuka situs google</a>
</body>
</html>
(dengan catatan komputer pengguna harus terkoneksi dengan internet)
untuk membuat hyperlink dengan teks, harus menambahkan tag anchor HTML dengan format sebagai berikut.
B.Link Absolut
adalah sebuah metode menyediakan link ke alamat situs lainnya. Contohnya :
--membuat link ke alamat situs tertentu.
<html>
<head>
<title>membka situs google dengan link</title>
</head>
<body>
<a href=”http://www.google.com”>klik disini untuk membuka situs google</a>
</body>
</html>
(dengan catatan komputer pengguna harus terkoneksi dengan internet)
C. Link
Relatif
merupakan metode link ke halaman web lain dalam satu mesin komputer
merupakan metode link ke halaman web lain dalam satu mesin komputer
Mengakses
halaman web lain dalam 1 folder
1. Buat
folder utama dengan nama “Lat_Link”
2. Buat
file “apasaja.html” dan simpan pada folder yg dibuat diatas
3. Buat
link ke halaman lain dalam 1 folder dengan kode HTML berikut.
<html>
<head>
<title>membuka link halaman 1 folder</title>
</head>
<body>
<a href=login.html”>klik disini untuk membuka login.html</a>
</body>
</html>
<html>
<head>
<title>membuka link halaman 1 folder</title>
</head>
<body>
<a href=login.html”>klik disini untuk membuka login.html</a>
</body>
</html>
4. Buat file “login.html” dan
simpan pada folder yg sama sbg tujan link.
</html>
<head>
<title>ini halaman login.html</title>
</head>
<body>
<h1>ini adalah halaman login</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
</html>
<head>
<title>ini halaman login.html</title>
</head>
<body>
<h1>ini adalah halaman login</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
Mengakses
halaman web lain dalam 1 folder utama, tetapi berbeda subfolder.
1.Pastikan berada dalam folder “Lat_Link”
kemudian buatlah sbfolder pada folder trsb dngn nama “subfolder”
2. Buatlah file dengan nama
“apasaja.html” dan simpan pada folder yg tadi sbg halaman web berisi link teks
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link</h1>
<a href=”subfolder/apasaja.html”>halaman web di subfolder/apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link</h1>
<a href=”subfolder/apasaja.html”>halaman web di subfolder/apasaja.html</a>
</body>
</html>
3. Buat file apasaja.html dan simpan
pada folder “subfolder” sebagai file tujuan link.
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html sebagai tujuan link</h1>
<a href=”../apasaja.html”>kembali ke apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html sebagai tujuan link</h1>
<a href=”../apasaja.html”>kembali ke apasaja.html</a>
</body>
</html>
Mengakses
halaman web lain dalam lokasi yang lain
1. Pastikan berada pd folder
“Lat_Link” kemudian buatlah subfolder pd folder tersebut dengan nama
“subfolder”
2. Buat file dengan nama apasaja.html dan
simpan pada folder “Lat_Link” sebagai halaman web berisi link teks menuju file
C:\apasaja.html
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link menuju c:\apasaja.html</h1>
<a href=”c:\apasaja.html”>halaman web di c:\apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link menuju c:\apasaja.html</h1>
<a href=”c:\apasaja.html”>halaman web di c:\apasaja.html</a>
</body>
</html>
3 Selanjutnya buat file apasaja.html
di drive c:\
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
</body>
</html>
D. Link Bagian Halaman
untuk membuat link pada tiap bagian halaman web dengan menggunakan parameter sbb.
--
<a href=”#bagiandokumen”>bagian dokumen html ke-n</a>
standar kode # menunjukkan tujuan link masih dalam dokumen yg sama. Untuk membuat link tujuan dapat didefinisikan link tujuan dengan kode
--
<a name=”bagiandokumen”>
untuk membuat link pada tiap bagian halaman web dengan menggunakan parameter sbb.
--
<a href=”#bagiandokumen”>bagian dokumen html ke-n</a>
standar kode # menunjukkan tujuan link masih dalam dokumen yg sama. Untuk membuat link tujuan dapat didefinisikan link tujuan dengan kode
--
<a name=”bagiandokumen”>
E. Membuka Jendela Baru
untuk menampilkan halaman tujuan link baru tanpa harus menutup halaman web awal dengan membuka jendela baru, dapat menggunakan parameter target=”_blank”
untuk menampilkan halaman tujuan link baru tanpa harus menutup halaman web awal dengan membuka jendela baru, dapat menggunakan parameter target=”_blank”
Contoh :
Halaman awal link
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link untuk membuka jendela baru menuju apasaja.html</h1>
<a href=”apasaja.html” target= blank”>jendela baru apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link untuk membuka jendela baru menuju apasaja.html</h1>
<a href=”apasaja.html” target= blank”>jendela baru apasaja.html</a>
</body>
</html>
Halaman
tujuan link
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
F. Link
Tanpa Garis Bawah
menggunakan standar atribut HTML style=”text-decoration:none” pada elemen <a href=””>
menggunakan standar atribut HTML style=”text-decoration:none” pada elemen <a href=””>
Contoh :
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tanpa garis bawah</h1>
<a href=”apasaja.html” style=”text-decoration:none”>buka apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tanpa garis bawah</h1>
<a href=”apasaja.html” style=”text-decoration:none”>buka apasaja.html</a>
</body>
</html>
G. Link
dengan Gambar
langkah-langkahnya :
langkah-langkahnya :
1. Pastikan
berada pada folder “Lat_Link” yg telah dibuat sebelumnya
2. Ambilah
sebuah gambar dengan ekstensi .jpeg
3. Copy
file gambar tsb ke dalam folder “Lat_Link”
4. Ubah
nama file gambar tsb mnjd link.jpg
5. Buat
file apasaja.html dan file apasaja.html
Contoh :
Link
dengan Gambar
<html>
<head>
<title>hyperlink dengan gambar</title>
</head>
<body>
<h3>ini adalah link dengan gambar</h3>
<table width=”200” border=”1” cellspacing=”0” cellpadding=”0”>
<tr>
<td><a href=”apasaja.html”><img src=”link.jpg” width=”200” height=”150” border=”0”></a></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>hyperlink dengan gambar</title>
</head>
<body>
<h3>ini adalah link dengan gambar</h3>
<table width=”200” border=”1” cellspacing=”0” cellpadding=”0”>
<tr>
<td><a href=”apasaja.html”><img src=”link.jpg” width=”200” height=”150” border=”0”></a></td>
</tr>
</table>
</body>
</html>
Tujuan
gambar hyperlink
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tujuan gambar</h1>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tujuan gambar</h1>
</body>
</html>
H. Mapping
Gambar
bentuk-bentuk mapping gambar ada 3 macam, yaitu :
bentuk-bentuk mapping gambar ada 3 macam, yaitu :
1. Bentk
rectangle
memiliki bentuk persegi dengan tiap sudut ditentukan berdasarkan koordinatnya.
contoh penggunaannya :
---
<area shape=”rect” coords=”116,60,175,121” href=”apasaja.html”>
memiliki bentuk persegi dengan tiap sudut ditentukan berdasarkan koordinatnya.
contoh penggunaannya :
---
<area shape=”rect” coords=”116,60,175,121” href=”apasaja.html”>
2. Bentuk
circle
untuk membuat mapping gambar berupa bangun ruang lingkaran, ada 3 koordinat yg harus ditentukan yaitu coords=”x,y,radius”
contoh penggunaanya :
---
<area shape=”circle” coords=”48,49,39” href=”apasaja.html”>
untuk membuat mapping gambar berupa bangun ruang lingkaran, ada 3 koordinat yg harus ditentukan yaitu coords=”x,y,radius”
contoh penggunaanya :
---
<area shape=”circle” coords=”48,49,39” href=”apasaja.html”>
3. Bentuk
Poly
bentuk mapping poly tidak ditentukan jumlah titik koordinat yang dibuat
contoh penggunaannya :
---
<area shape=”poly” coords=”300, 35, 350, 73, 432, 98, 372, 39, 329, 18” href=”apasaja.html”>
bentuk mapping poly tidak ditentukan jumlah titik koordinat yang dibuat
contoh penggunaannya :
---
<area shape=”poly” coords=”300, 35, 350, 73, 432, 98, 372, 39, 329, 18” href=”apasaja.html”>
I. Link
dengan Objek Flash
dengan objek multimedia flash juga dapat membuat hyperlink. Contohnya dalam membuat link dengan teks flash menggunakan plugin <object>
contoh penggunaan link dengan teks flash :
dengan objek multimedia flash juga dapat membuat hyperlink. Contohnya dalam membuat link dengan teks flash menggunakan plugin <object>
contoh penggunaan link dengan teks flash :
<html>
<head>
<title>link dengan objek teks
flash</title>
</head>
<body>
<object
classid=”clsid:D27CDB6E-AE6D-11cf-98B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 width=”223”
height=”34”>
<param name=”movie” value=”text1.swf”>
<param name=”quality” value=”high”>
<param name=”base” value=”.f”>
<param name=”bgcolor” value=”#00FF66”>
<param name=”scale” value=”exactfit”>
<embed scr=”text1.swf” base=”.”
Quality=”high” pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?p1_Prod_Version=ShockwaveFlash type=”application/-shockwave-flash”
scale=”exactfit” width=”223” height=”34” bgcolor=”#00FF66”></embed>
</object>
</body>
</html>
contoh penggunaan link dengan tombol flash
:
<html>
<head>
<title>link dengan objek teks
flash</title>
</head>
<body>
<object
classid=”clsid:D27CDB6E-AE6D-11cf-98B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 width=”100”
height=”22”>
<param name=”movie” value=”button1.swf”>
<param name=”quality” value=”high”>
<param name=”base” value=”.”>
<embed scr=”button1.swf” base=”.”
Quality=”high” pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?p1_Prod_Version=ShockwaveFlash type=”application/-shockwave-flash”
width=”100” height=”22” bgcolor=”></embed>
</object>
</body>
</html>
TERIMAKASIH
Diposting oleh nblaaa di 22.07 Tidak
ada komentar:
Rabu, 06 September 2017
OBJEK MULTIMEDIA
A. Objek
Multimedia
Multimedia pada halaman web memiliki
pengertian penggunaan external file yang berisi data dengan format tertentu
pada web. Objek multimedia pada web dapat berupa audio, video, musik, gambar,
animasi, maupun file lainnya yang bertujuan untuk membuat web menjadi lebih
atraktif, menarik dan mudah digunakan. Terdapat beberapa fungsi dalam
pemrograman web yang harus didukung web browser, yaitu sbg berikut.
1. Fungsi
dukungan terhadap scripting, agar web browser mampu menjalankan dan
menerjemahkan kode yg dituliskan dalam badan program program HTML.
2. Applet
merupakan program aplikasi yang dijalankan pada browser untuk mengeksekusi
objek multimedia yang disertakan pada halaman web agar berfungsi dan bekerja
semestinya. Pada generasi web browser terbaru tag <applet> sudah tidak
digunakan lagi tetapi diganti dengan penggunaan tag <object>.
Contoh penggunaan tag <object> :
<object code=”namaclassapplet.class”>
<param name=”namaparam”
value=”nilaiparam”>
</object>
3. Plug
in, yaitu program tambahan pada web browser untuk menjalankan berbagai file
multimedia yang disertakan pada halaman web. Plug in pada setiap browser tidak
sama sehingga hasil tampilan, kecepatan, dan model halaman web yang dihasilkan
tiap web browser juga berbeda.
4. ActiveX
merupakan komponen standar yang disediakan sistem operasi windows untuk
mendukung beberapa fungsi dalam web browser khususnya internrt explorer seperti
teknik menampilkan kalender. Namun, tidak semua kode program activeX yg ditulis
dalam HTML file akan dapat dieksekusi oleh web browser.
B. Objek
Gambar
Gambar merupakan salah satu jenis objek
multimedia yang sering dijadikan komponen pembentuk dalam halaman web.
Fungsinya untuk mempercantik tampilan dan membuat halaman web lebih menarik.
1) JPG/JPEG
JPG atau Joint Photographic Group dan JPEG
(Joint Photographic Expert Group) merupakan salah satu jenis file gambar dengan
resolusi tinggi pada mode warna RGB, CMYK, dan garyscale. Kelemahan file gambar
jenis ini adalah rincian komponen gambar menjadi kabur (blur) karena proses
kompresi file yang terlalu banyak.
2) GIF
GIF atau Graphic Interchange Format hanya
mampu menyimpan gambar dalam format 8bit. Format GIF biasanya digunakan untuk
menampilkan animasi 2 dimensi hasil kompilasi flash. Kelemahan GIF yaitu hanya
mampu menampilkan 256 jenis warna sehingga kurang bagus untuk dijadikan
ekstensi gambar hasil fotografi kamera dan juga gambar yang dihasilkan memiliki
ketajaman yang rendah.
3) PNG
Portable Network Graphic merupakan salah
satu bentuk file gambar yang menggabungkan teknik JPG dan GIF yg mampu
menyimpan file dengan bit depth hingga 24bit. Kelemahan file gambar berekstensi
PNG adalah kapasitas file yang cukup besar dibanding dengan jenis JPG.
4) BMP
Atau Bitmap Image adalah jenis format file
yang mamapu menyimpan gambar dengan tingkat kualitas 1 hingga 24bit (warna RGB,
grayscale, indexed color, dan bitmap). Kelemahan file jenis ini adalah tidak
dapat menyimpan dalam mode alpha channel.
Untuk dapat menampilkan sebuah gambar
dengan ekstensi .jpg tau .jpeg, .png atau .gif dapat menggunakan fungsi tag
<img src=”lokasi_file”>.
Contoh penggunaan tag tersebut :
<!-- file apasaja.html-->
<html>
<head>
<title>menampilkan gambar dengan tag
img</title>
</head>
<body>
</body>
</html>
1) Scr=”motherboard.jpg”,
yaitu merujuk lokasi file gambar motherboard.jpg, dengan file yang berada satu
folder dengan file html.
2) Width=”400”,
mengatur dimensi lebar gambar sebesar 400 pixel
3) Height=”300”,
yaitu mengatur dimensi tinggi gambar sebesar 300 pixel
Contah menampilkan gambar dengan tag
<object>
<!—file apasaja.html -->
<html>
<head>
<title>menampilkan gambar dengan tag
object</title>
</head>
<body>
<object data=”motherboard.jpg”
type=”image/jpg” width=”600” height=”400”>
</object>
</body>
<html>
1) Data=”motherboard.jpg”,
yaitu menunjukkan lokasi file gambar yang dipanggil sebagai objek multimedia
pada halaman web.
2) Type=”image/jpg”,
perintah type menunjukkan jenis objek yang dipanggil dalam halaman web.
3) Width=”600”
untuk menentukan dimensi lebar objek sebesar 600 pixel.
4) Height=”400”
yaitu menentukan dimensi tinggi objek sebesar 400 pixel.
C. Objek
Suara
Penambahan objek suara pada halaman web
dapat dilakukan dengan menambahkan tag <object> dan menuliskan lokasi
file dari audio yg akan dimainkan. Pada dasarnya ada 3 kategori format file
audio, yaitu :
1) File
audio tanpa kompresi, yaitu file dengan ekstensi AIFF, AU, WAV, dan raw
header-less PCM.
2) File
audio dengan kompresi lossy, seperti vorbis, ACC, ATRAC, MP3, mousepack dan
lossy windows media audio (WMA)
3) File
audio dengan kompresi lossless, seperti MPEG-4 SLS, MPEG-4 ALS, MPEG-4 DST,
TTA, windows media audio lossless (WMA lossless), FLAC, dan WavPack (file name
extension WV).
File audio dalam halaman web memiliki
beberapa tipe, antara lain sbg berikut.
1) MPEG
(Mp3)
Moving Picture Experts Group merupakan format file audio dengan ekstensi .mp3 yang bekerja pada layer tiga dengan kompresi audio mencapai kualitas setara CD stereo, yaitu 16-bit
Moving Picture Experts Group merupakan format file audio dengan ekstensi .mp3 yang bekerja pada layer tiga dengan kompresi audio mencapai kualitas setara CD stereo, yaitu 16-bit
2) WAV
Waveform Audio Format adalah standar file yang tidak melakukan kompresi terhadap isi audionya.
Waveform Audio Format adalah standar file yang tidak melakukan kompresi terhadap isi audionya.
3) AAC
Advanced Audio Coding merupakan file audio dengan format berbasis MPEG2 dan MPEG4 sebagai pengembangan file mp3.
Advanced Audio Coding merupakan file audio dengan format berbasis MPEG2 dan MPEG4 sebagai pengembangan file mp3.
4) AIFF
Audio Interchange File Format adalah format standar audio tanpa kompresi untuk sistem operasi macintosh.
Audio Interchange File Format adalah format standar audio tanpa kompresi untuk sistem operasi macintosh.
5) Audio
CD
format standar Audio CD memiliki ekstensi file .cda dan merupakan mode audio yang dapat diputar secara langsung dari CD-drive komputer tetapi ketika disalin kedalam hardisk, file audio CD tidak dpt dijalankan.
format standar Audio CD memiliki ekstensi file .cda dan merupakan mode audio yang dapat diputar secara langsung dari CD-drive komputer tetapi ketika disalin kedalam hardisk, file audio CD tidak dpt dijalankan.
6) MIDI
Music Instrument Digital Interface merupakan sebuah standar format audio berbagai software dan hardware yg berkembang saat ini. File standar MIDI biasanya digunakan untuk menyimpan hasil intruksi perangkat musik.
Music Instrument Digital Interface merupakan sebuah standar format audio berbagai software dan hardware yg berkembang saat ini. File standar MIDI biasanya digunakan untuk menyimpan hasil intruksi perangkat musik.
7) WMA
Windows Media Audio adalah salah satu jenis format audio yang dikembangkan oleh microsoft
Windows Media Audio adalah salah satu jenis format audio yang dikembangkan oleh microsoft
8) OGG
merupakan salah satu jenis format file audio sekaligus video dengan lisensi bebas atau oper source
merupakan salah satu jenis format file audio sekaligus video dengan lisensi bebas atau oper source
Ada beberapa syarat yang harus dipenuhi
untuk menjalankan audio file dengan script pemrograman html, yaitu sbg berikut.
Web
browser yang digunakan harus versi terbaru, dengan plug in dan extension sudah
ter-update
Pada
beberapa kondisi, diperlukan kondisi internet untuk menjalankan program
tersebut.
Sediakan
file audio dengan beberapa format tertentu
Buatlah
folder yang menampung file hasil pemrograman tersebut, kemudian pindahkan file
audio tersebut kedalam satu folder dengan file HTML.
Terdapat beberapa teknik memasukkan file
audio kedalam halaman web menggunakan pemrograman HTML, yaitu sbg berikut.
1) Menggunakan
Yahoo Media Player
contoh memainkan musik dengan yahoo media player :
<!--file apasaja.html>
<html>
<head>
<title>musik dengan yahoo media player/title>
</head>
<body>
<!—memanggil yahoo media player -->
<a href=”1.mp3”>mainkan musik</a>
<script type=”text/javascript” src=http://mediaplayer.yahoo.com/js>
</script>
<!—akhir script-->
</body>
</html>
contoh memainkan musik dengan yahoo media player :
<!--file apasaja.html>
<html>
<head>
<title>musik dengan yahoo media player/title>
</head>
<body>
<!—memanggil yahoo media player -->
<a href=”1.mp3”>mainkan musik</a>
<script type=”text/javascript” src=http://mediaplayer.yahoo.com/js>
</script>
<!—akhir script-->
</body>
</html>
2) Menggunakan
plug in elemen <object>
Langkah yg harus dilakukan sbg berikut.
Persiapkan
file audio yang akan disisipkan pada halaman web
Salin
file tersebut kedalam folder yg sma dengan file HTML yang akan dibuat nantinya
Ubah
nama file tersebut menjadi 1.mp3 untuk memudahkan proses pemanggilannya
Selanjutnya,
buat file HTML dengan script seperti contoh
Contoh memutan file audio dengan elemen
object
<!—apasaja.html-->
<html>
<head>
<title>memutar lagu</title>
</head>
<body>
<object data=”1.mp3”>
</object>
</body>
</html>
3) Menggunakan
elemen <audio>
menggunakan tag <audio> dan menambahkan kode <!DOCTYPE HTML> pada awal program html
contohnya :
<!—fileapasaja.html-->
<! DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan audio plugin</title>
</head>
<body>
<!—memanggil elemen <audio>-->
<audio controls=”controls” height=”70px” width=”100px”>
<source src=”1.mp3” type=”audio/mpeg”>
</audio>
<!—akhir elemen <audio>-->
</body>
</html>
menggunakan tag <audio> dan menambahkan kode <!DOCTYPE HTML> pada awal program html
contohnya :
<!—fileapasaja.html-->
<! DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan audio plugin</title>
</head>
<body>
<!—memanggil elemen <audio>-->
<audio controls=”controls” height=”70px” width=”100px”>
<source src=”1.mp3” type=”audio/mpeg”>
</audio>
<!—akhir elemen <audio>-->
</body>
</html>
4) Menggunakan
elemen <embed>
menggunakan tag <embed>
contohnya :
<!-- file apasaja.html>
contohnya :
<!-- file apasaja.html>
<html>
<head>
<title>Hidden object</object>
</head>
<object classid=”1.mp3”
codetype=”application/java”>
<param name=”src” value=”1.mp3”>
<embed src=”1.mp3” hidden=”true”
loop=”true”></embed>
</object>
</body>
</body>
</html>
Src=”1.mp3”
digunakan untuk merujuk lokasi file audio yang dipanggil oleh halaman web
ketika diakses oleh web browser.
Hidden=”true”
digunakan untuk menyembunyikan active object yang sedang berjalan sehingga
tampak pada halaman web ketika diakses.
Loop=”true”
atribut loop jika bernilai true menyebabkan file audio akan diputar
berulang-ulang selama halaman web diakses.
5) Inline
Sound
menggunakan tag <bgsound>
contohnya
<!—file apasaja.html>
<!DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan bgsound</title>
</head>
<body>
<!—memanggil elemen <bgsound>-->
<bgsound src=”1.mp3” loop=”1”>
<!—akhir elemen <bgsound>-->
</body>
</html>
menggunakan tag <bgsound>
contohnya
<!—file apasaja.html>
<!DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan bgsound</title>
</head>
<body>
<!—memanggil elemen <bgsound>-->
<bgsound src=”1.mp3” loop=”1”>
<!—akhir elemen <bgsound>-->
</body>
</html>
6) Hyperlink
Sound
menggunakan tag <a href=”namafile”>
contonya :
<!—file apasaja.html>
<html>
<head>
<title>hyperlink file audio</title>
</head>
<body>
<a href=”1.mp3”>
putar musik
</a>
</body>
</html>
menggunakan tag <a href=”namafile”>
contonya :
<!—file apasaja.html>
<html>
<head>
<title>hyperlink file audio</title>
</head>
<body>
<a href=”1.mp3”>
putar musik
</a>
</body>
</html>
D. Objek
Video
Objek multimedia berupa video merupakan
perpaduan antara gambar, gerak, dan suara yang tersusun dalam frame-frame yang
membentuk pla tertentu secara tepat. Terdapat beberapa jenis format standar
video yang dapat disisipkan pada halaman web, yaitu sbg berikut.
1) MPEG
Moving Picture Expert Group adalah format file audio dan video yang saat ini menjadi standar kompresi file dengan kualitas baik
Moving Picture Expert Group adalah format file audio dan video yang saat ini menjadi standar kompresi file dengan kualitas baik
2) AVI
Audio Video Interleaved merupakan format audio video buatan microsoft dengan kualitas dan ketajaman gambar dan suara lebih baik dari standar audio video ASF
Audio Video Interleaved merupakan format audio video buatan microsoft dengan kualitas dan ketajaman gambar dan suara lebih baik dari standar audio video ASF
3) MWV
merupakan salah satu standar audio video yang dikeluarkan microsoft untuk komputer berbasis windows
merupakan salah satu standar audio video yang dikeluarkan microsoft untuk komputer berbasis windows
4) MP4
merupakan generasi baru dari MP3 dengan dukungan audio dan video yang lebih baik
merupakan generasi baru dari MP3 dengan dukungan audio dan video yang lebih baik
5) Real
Video
tipe file ini sering digunakan sebagai standar video streaming seperti tv online dsb.
tipe file ini sering digunakan sebagai standar video streaming seperti tv online dsb.
6) QuickTime
merupakan standar format audio video keluaran MacOS untuk Apple
merupakan standar format audio video keluaran MacOS untuk Apple
7) 3GP
merupakan salah satu generasi terbaru format file audio video ringan, kecil ukurannya, serta didukung berbagai peranti keras, khususnya telepon genggam
merupakan salah satu generasi terbaru format file audio video ringan, kecil ukurannya, serta didukung berbagai peranti keras, khususnya telepon genggam
8) Flash
merupakan standar format audio video keluaran macromedia
merupakan standar format audio video keluaran macromedia
Terdapat beberapa teknik yang dapat
digunakan untuk menjalankan video pada halaman web, seperti berikut.
1) Menggunakan
Elemen <img>
contohnya :
<!-- file apasaja.html-->
<html>
<head>
<title>manjalankan video dengan tag img</title>
</head>
<body>
<img dynsrc=”1.mp4”>
</body>
</html>
contohnya :
<!-- file apasaja.html-->
<html>
<head>
<title>manjalankan video dengan tag img</title>
</head>
<body>
<img dynsrc=”1.mp4”>
</body>
</html>
2) Menggunakan
Elemen <embed>
contoh scriptnya hampir sama dengan yg menggunakan tag img
contoh scriptnya hampir sama dengan yg menggunakan tag img
3) Menggunakan
Elemen <video>
contohnya :
<!-- file apasaja.html-->
<!DOCTYPE HTML>
<html>
<head>
<title>menjalankan video dengan tag video</title>
</head>
<body>
<video width=”420” controls=”controls”>
<source src=”1.mp4” type=”video/mp4”>
<source src=”1.mkv” type=”video/mkv”>
<source src=”1.3gp” type=”video/3gp”>
<source src=”1.flv” type=”video/mp4”>
<!-- jika ketiga file tidak bisa dijalankan, maka muncul pesan kegagalan seperti dibawah -->
browser anda belum mendukung HTML5
</video>
</body>
</html>
contohnya :
<!-- file apasaja.html-->
<!DOCTYPE HTML>
<html>
<head>
<title>menjalankan video dengan tag video</title>
</head>
<body>
<video width=”420” controls=”controls”>
<source src=”1.mp4” type=”video/mp4”>
<source src=”1.mkv” type=”video/mkv”>
<source src=”1.3gp” type=”video/3gp”>
<source src=”1.flv” type=”video/mp4”>
<!-- jika ketiga file tidak bisa dijalankan, maka muncul pesan kegagalan seperti dibawah -->
browser anda belum mendukung HTML5
</video>
</body>
</html>
4) Menggunakan
hyperlink
contohnya :
<!-- file apasaja-->
<html>
<head>
<title>menjalankan video dengan hyperlink</title>
</head>
<body>
<a href=”1.mp4”>
mainkan video
</a>
</body>
</html>
contohnya :
<!-- file apasaja-->
<html>
<head>
<title>menjalankan video dengan hyperlink</title>
</head>
<body>
<a href=”1.mp4”>
mainkan video
</a>
</body>
</html>
5) Menggunakan
elemen <object>
contohnya :
<object data=”1.mp4” type=”video/mp4”>
<embed erc=”1.mp4” width=”400” height=”320”></embed>
</object>
contohnya :
<object data=”1.mp4” type=”video/mp4”>
<embed erc=”1.mp4” width=”400” height=”320”></embed>
</object>
6) Menjalankan
aplikasi flash
contoh script memutar animasi flash .swf
<!-- file apasaja.html>
<html>
<head>
<title>memutar animasi swf flash</title>
</head>
<body>
<object classid=”clsid: D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6, 0, 29, 0 widht=”170” height=”140”>
<param name=”movie” value=”kabel.swf”>
<param name=”quality” value=”high”>
<embed src=”kabel.swf” quality=”high” pluginspage=http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”170” height=”140”>
</embed></object>
</body>
</html>
contoh script memutar animasi flash .swf
<!-- file apasaja.html>
<html>
<head>
<title>memutar animasi swf flash</title>
</head>
<body>
<object classid=”clsid: D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6, 0, 29, 0 widht=”170” height=”140”>
<param name=”movie” value=”kabel.swf”>
<param name=”quality” value=”high”>
<embed src=”kabel.swf” quality=”high” pluginspage=http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”170” height=”140”>
</embed></object>
</body>
</html>
Sekian Terimakasih
Diposting oleh nblaaa di 17.11 Tidak
ada komentar:
Selasa, 29 Agustus 2017
Struktur Tabel HTML
A. Elemen
Dasar Tabel
Tabel adalah salah satu metode untuk menyajikan informasi dlm halaman web. Tabel terdiri atas baris dan kolom. Baris merupakan bagian mendatar dan kolom adalah bagian vertikal.
elemen-elemen yang ada pada tabel sbb.
Tabel adalah salah satu metode untuk menyajikan informasi dlm halaman web. Tabel terdiri atas baris dan kolom. Baris merupakan bagian mendatar dan kolom adalah bagian vertikal.
elemen-elemen yang ada pada tabel sbb.
Nama
|
Fungsi
|
<table>....</table>
|
Untuk mendeskripsikan tabel dalam halaman
web
|
<tr>....</tr>
|
Untuk mendeskripsikan baris dalam tabel
|
<td>....</td>
|
Untuk mendeskripsikan kolom dalam tabel
|
Untuk mengatur posisi objek dalam cell
sebuah tabel, dapat digunakan beberapa atribut dalam tag
<tr>....</tf> sbg berikut.
Align,
digunakan untuk mengatur posisi horizontal sebuah objek dalam cell tabel. Ada 3
jenis align, yaitu: left, center, dan right. Left untuk posisi kiri cell,
center untuk posisi tengah cell, dan right untuk posisi kanan cell.
Valign,
digunakan untuk mengatur posisi peletakan sebuah objek pada cell secara
vertikal. Ada pilihan dalam menentukan atribut valign, yaitu top, middle,
dan bottom. Top digunakan untuk meletakkan sebuah objek pada posisi paling atas
cell, middle untuk meletakkan objek pada tengah cell, dan bottom untuk
meletakkan objek pada posisi paling bawah cell.
Contoh :
<!—file apasaja.html-->
<html>
<head>
<title>struktur tabel</title>
</head>
<body>
<center><h1>Data Siswa TKJ</h1></center>
<table width=”50%” border=”1” cellspacing=”0” cellpadding=”0” align=”center”>
<tr>
<td align=”center”><strong>NIS</strong></td>
<html>
<head>
<title>struktur tabel</title>
</head>
<body>
<center><h1>Data Siswa TKJ</h1></center>
<table width=”50%” border=”1” cellspacing=”0” cellpadding=”0” align=”center”>
<tr>
<td align=”center”><strong>NIS</strong></td>
<td align=”center”><strong>NAMA</strong></td>
<td align=”center”><strong>ALAMAT</strong></td>
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
<td align=”center”>Kediri</td>
<td align=”center”><strong>ALAMAT</strong></td>
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
<td align=”center”>Kediri</td>
</tr>
</table>
</body>
</table>
</body>
B. Atribut Border
Untuk mengatur tebal dan lebar garis pada
tabel, harus mengatur nilai atribut border table ketika mendeklarasikan tabel.
Semakin besar nilai border, semakin tabal pula garis yg ditampilkan. Jika nilai
atribut border semakin besar, lebar garis tabel juga semakin besar.
Contoh men-setting border tabel dalam
halaman web:
<!—file apasaja.html-->
<html>
<head>
<title>mengatur border</title>
</head>
<body>
tabel border berukuran 0
<table width=”10%” border=”0” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
tabel dengan border berukuran 1
<table width=”10%” border=”1” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
tabel dengan border berukuran 12
<table width=”10%” border=”12” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>mengatur border</title>
</head>
<body>
tabel border berukuran 0
<table width=”10%” border=”0” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
tabel dengan border berukuran 1
<table width=”10%” border=”1” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
tabel dengan border berukuran 12
<table width=”10%” border=”12” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
</body>
</html>
C. Elemen
Header
Header dalam tabel berguna untuk memberikan
informasi data dalam kolom sebuah tabel. Untuk mendeklarasikan header pada
tabel, perlu menambahkan elemen tag </th> pada bagian awal script dan
</th> pada akhir script.
Pada elemen header tabel, dapat menerapkan
atribut scope dan headers untuk menghubungkan kolom atau baris dalam cell.
Atribut scope digunakan untuk menghibungkan data kolom dan baris. Atribut scope
dapat diisi dengan nilai col, colgroup, row, dan rowgroup.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>membuat header tabel dengan scope</title>
</head>
<body>
<table width=”50%” border=”1” cellspacing=”0”>
<tr>
<th> </th>
<th scope=”col”>Senin</th></!--Scope colom-->
<th scope=”col”>Selasa</th></!--Scope colom-->
<th scope=”col”>Rabu</th></!--Scope colom-->
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>membuat header tabel dengan scope</title>
</head>
<body>
<table width=”50%” border=”1” cellspacing=”0”>
<tr>
<th> </th>
<th scope=”col”>Senin</th></!--Scope colom-->
<th scope=”col”>Selasa</th></!--Scope colom-->
<th scope=”col”>Rabu</th></!--Scope colom-->
</tr>
<tr>
<th scope=”row”<X-TKJ</th><!—Scope row-->
<td>sistem Operasi</td>
<td>LAN</td>
<td>Matematika</td>
</tr>
<tr>
<th scope=”row”<XI-TKJ</th><!—Scope row-->
<td>Membangun LAN</td>
<td>Pemrograman Dasar</td>
<td>Web Programming</td>
</tr>
<tr>
<th scope=”row”<XII-TKJ</th><!—Scope row-->
<td>Wide Area Networking</td>
<td>Pemrograman Web Dinamis</td>
<td>IPA</td>
<tr>
</table>
</body>
</html>
<tr>
<th scope=”row”<X-TKJ</th><!—Scope row-->
<td>sistem Operasi</td>
<td>LAN</td>
<td>Matematika</td>
</tr>
<tr>
<th scope=”row”<XI-TKJ</th><!—Scope row-->
<td>Membangun LAN</td>
<td>Pemrograman Dasar</td>
<td>Web Programming</td>
</tr>
<tr>
<th scope=”row”<XII-TKJ</th><!—Scope row-->
<td>Wide Area Networking</td>
<td>Pemrograman Web Dinamis</td>
<td>IPA</td>
<tr>
</table>
</body>
</html>
D. Elemen
Caption
Untuk memberikan sebuah judul pada tabel,
dapat menggunakan elemen caption dengan tag <caption>...</caption>.
Penulisan tag caption diletakkan setelah pendeklarasian tag awal tabel
<table>. Posisi default caption, yaitu berada diatas tabel.
Contoh membuat caption tabel :
<!—file apasaja.html-->
<html>
<head>
<title>membuat captin tabel</title>
</head>
<body>
<table width=”40%” border=”1” cellspacing=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>kurnia</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>membuat captin tabel</title>
</head>
<body>
<table width=”40%” border=”1” cellspacing=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>kurnia</td>
</tr>
</table>
</body>
</html>
E. Atribut
Cellpadding dan Cellspacing
Atribut cellpadding berfungsi untuk
mengatur jarak dari border sisi dalam tabel dengan isi teks tabel dalam cell.
Adapun atribut cellspacing berfungsi untuk mengatur jarak antara border bagian
dalam dan luar. Semakin tinggi nilai atribut cellspacing, semakin lebar pula
jarak antara border dalam dengan luar.
Contoh mengatur cellpadding dan cellspacing
tabel :
<!—file apasaja.html-->
<html>
<head>
<title>mengatur cellpadding dan cellspacing tabel</title>
</head>
<body>
<table width=”30%” border=”1” cellspacing=”2” cellpadding=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
</tr>
</table>
</body>
</html>
<!—file apasaja.html-->
<html>
<head>
<title>mengatur cellpadding dan cellspacing tabel</title>
</head>
<body>
<table width=”30%” border=”1” cellspacing=”2” cellpadding=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
</tr>
</table>
</body>
</html>
F. Menggabungkan
Cell
Ada 2 atribut yg dapat digunakan untuk
menggabungkan 2 buah cell menjadi 1 cell, yaitu :
a) Colspan
Digunakan untuk menyatukan satu atau lebih
cell berdasarkan kolom.
b) Rowspan
Digunakan untuk menyatukan satu atau lebih
cell berdasarkan baris.
Contoh menggabungkan dua cell menjadi satu
:
<!—file apasaja.html-->
<html>
<head>
<title>mengatur lebar cell tabel</title>
</head>
<body>
<table width=”37%” border=”1” cellspacing=”0” cellpadding=”0”>
<tr>
<html>
<head>
<title>mengatur lebar cell tabel</title>
</head>
<body>
<table width=”37%” border=”1” cellspacing=”0” cellpadding=”0”>
<tr>
<td
width=”22%” rowspan=”2”><div align=”center”>NIS</div></td>
<td
width=”31%” rowspan=”2”><div align=”center”>nama</div></td>
<td
colspan=”3”><div align=”center”>Nilai Pelajaran</div></td>
</tr>
<tr>
<td
width=”15%”><div align=”center”>IPA</div></td>
<td
width=”15%”><div align=”center”>IPS</div></td>
<td
width=”17%”><div align=”center”>AGAMA</div></td>
</tr>
<tr>
<td>1234567890</td>
<td>KURNIA</td>
<td>80</td>
<td>88</td>
<td>78</td>
</tr>
</table>
</body>
</html>
</body>
</html>
G. Mengatur
Background
Background secara harfiah berarti latar
belakang. Ada 2 jenis background yg dpt diterapkan pada tabel, yaitu berupa
gambar dan warna. Langkah-langkah menerapkan background gambar pada tabel
adalah sbg berikut.
a. Buatlah
folder BG pada direktori C (C:\BG)
b. Persiapkan
gambar yg akan dijadikan background sebuah tabel, baik dalam format .jpg,
.jpeg, atau .bmp. letakkan file gambar tersebut kedalam folder BG dalam 1
folder dengan file html yg akan dibuat
c. Selanjutnya,
buat file “gambar.html” dan tulis kode seperti contoh berikut
Contoh mengatur background gambar pada
tabel :
<!—file apasaja.html-->
<html>
<head>
<title>background gambar pada tabel</title>
</head>
<body>
<html>
<head>
<title>background gambar pada tabel</title>
</head>
<body>
<table align=”center” width=”30%”
border=”1” background=”foto.jpg”>
<tr>
<th>NIS</th><!--Header tabel-->
<th>NAMA</th><!--Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
</tr>
</table>
</body>
</html>
</body>
</html>
Contoh menagtur background warna pada tabel
:
<!—file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”30%”
border=”1” bgcolor=”#FFFF33”>
<tr>
<th>NIS</th><!--Header tabel-->
<th>NAMA</th><!--Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA </td>
</tr>
</table>
</body>
</html>
</body>
</html>
H. Atribut
Align
Ada 3 nilai yang dapat diterapkan pada
atribut align, yaitu left, center, dan right. Left digunakan untuk meletakkan
isi pada sisi sebelah kiri cell, center digunakan untuk meletakkan isi pada
posisi tengah, dan right untuk meletakkan isi pada sisi sebelah kanan
Contoh menentukan posisi isi cell dengan
align :
<!--file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”30%” border=”1” bgcolor=”#FFFF33”>
<tr>
<!--file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”30%” border=”1” bgcolor=”#FFFF33”>
<tr>
<th align=”left”>NIS</th><!--header tabel berada pada posisi
kiri-->
<th align=”right”>NIS</th><!--header tabel berada pada posisi
kanan-->
</tr>
<tr>
<tr>
<td align=”center”>1234567890</th><!--isi sel pada posisi
tengah-->
<td align=”center”>KURNIA</td>
</tr>
</table>
</body>
</html>
</table>
</body>
</html>
I. Meletakkan
Tabel di Dalam Tabel
Dengan menggunakan tabel dapat menentukan
struktur utama sebuah web. Teknik sederhana yg dapat digunakan untuk melakukan
hal tersebut adalah meletakkan tabel di tabel utama.
Contoh menentukan isi cell dengan align :
<!--file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”50%” border=”1”>
<tr>
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”50%” border=”1”>
<tr>
<td>
<tablealign=”center”width=”80%”border=”1”bgcolor=”#FFFF33”>
<caption>Tabel terletak pada sel
1</caption>
<tr>
<th>NIS</th>
<th>NAMA</th>
</tr>
<tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
</tr>
</table>
</td>
<td>
<tablealign=”center”width=”80%”border=”1”bgcolor=”#FFFF33”>
<caption>Tabel terletak pada sel
2</caption>
<tr>
<th>NIS</th>
<th>NAMA</th>
</tr>
<tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</td>
</tr>
</table>
</body>
</html>
J. Atribut
Frame
Atribut frame pada tabel digunakan untuk
mengatur jenis border luar pada tabel. Ada beberapa nilai yg digunakan pada
atribut frame, antara lain :
1. Above
2. Bellow
3. Border
4. Box
5. Hsides
6. Lhs
7. Rhs
8. Void
9. Vsides
contoh menggunakan atribut frame :
<table frame=”box”>
<!--isi tabel-->
</table>
<html>
<head>
<title>Tabel dengan Atribut Frame</title>
</head>
<body>
<table frame=”box”>
<tr>HYPERLINK
<title>Tabel dengan Atribut Frame</title>
</head>
<body>
<table frame=”box”>
<tr>HYPERLINK
untuk membuat hyperlink dengan teks, harus menambahkan tag anchor HTML dengan format sebagai berikut.
B.Link Absolut
adalah sebuah metode menyediakan link ke alamat situs lainnya. Contohnya :
--membuat link ke alamat situs tertentu.
<html>
<head>
<title>membka situs google dengan link</title>
</head>
<body>
<a href=”http://www.google.com”>klik disini untuk membuka situs google</a>
</body>
</html>
(dengan catatan komputer pengguna harus terkoneksi dengan internet)
C. Link
Relatif
merupakan metode link ke halaman web lain dalam satu mesin komputer
merupakan metode link ke halaman web lain dalam satu mesin komputer
Mengakses
halaman web lain dalam 1 folder
1. Buat
folder utama dengan nama “Lat_Link”
2. Buat
file “apasaja.html” dan simpan pada folder yg dibuat diatas
3. Buat
link ke halaman lain dalam 1 folder dengan kode HTML berikut.
<html>
<head>
<title>membuka link halaman 1 folder</title>
</head>
<body>
<a href=login.html”>klik disini untuk membuka login.html</a>
</body>
</html>
<html>
<head>
<title>membuka link halaman 1 folder</title>
</head>
<body>
<a href=login.html”>klik disini untuk membuka login.html</a>
</body>
</html>
4. Buat file “login.html” dan
simpan pada folder yg sama sbg tujan link.
</html>
<head>
<title>ini halaman login.html</title>
</head>
<body>
<h1>ini adalah halaman login</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
</html>
<head>
<title>ini halaman login.html</title>
</head>
<body>
<h1>ini adalah halaman login</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
Mengakses
halaman web lain dalam 1 folder utama, tetapi berbeda subfolder.
1.Pastikan berada dalam folder “Lat_Link”
kemudian buatlah sbfolder pada folder trsb dngn nama “subfolder”
2. Buatlah file dengan nama
“apasaja.html” dan simpan pada folder yg tadi sbg halaman web berisi link teks
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link</h1>
<a href=”subfolder/apasaja.html”>halaman web di subfolder/apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link</h1>
<a href=”subfolder/apasaja.html”>halaman web di subfolder/apasaja.html</a>
</body>
</html>
3. Buat file apasaja.html dan simpan
pada folder “subfolder” sebagai file tujuan link.
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html sebagai tujuan link</h1>
<a href=”../apasaja.html”>kembali ke apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html sebagai tujuan link</h1>
<a href=”../apasaja.html”>kembali ke apasaja.html</a>
</body>
</html>
Mengakses
halaman web lain dalam lokasi yang lain
1. Pastikan berada pd folder
“Lat_Link” kemudian buatlah subfolder pd folder tersebut dengan nama
“subfolder”
2. Buat file dengan nama apasaja.html dan
simpan pada folder “Lat_Link” sebagai halaman web berisi link teks menuju file
C:\apasaja.html
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link menuju c:\apasaja.html</h1>
<a href=”c:\apasaja.html”>halaman web di c:\apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link menuju c:\apasaja.html</h1>
<a href=”c:\apasaja.html”>halaman web di c:\apasaja.html</a>
</body>
</html>
3 Selanjutnya buat file apasaja.html
di drive c:\
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
</body>
</html>
D. Link Bagian Halaman
untuk membuat link pada tiap bagian halaman web dengan menggunakan parameter sbb.
--
<a href=”#bagiandokumen”>bagian dokumen html ke-n</a>
standar kode # menunjukkan tujuan link masih dalam dokumen yg sama. Untuk membuat link tujuan dapat didefinisikan link tujuan dengan kode
--
<a name=”bagiandokumen”>
untuk membuat link pada tiap bagian halaman web dengan menggunakan parameter sbb.
--
<a href=”#bagiandokumen”>bagian dokumen html ke-n</a>
standar kode # menunjukkan tujuan link masih dalam dokumen yg sama. Untuk membuat link tujuan dapat didefinisikan link tujuan dengan kode
--
<a name=”bagiandokumen”>
E. Membuka Jendela Baru
untuk menampilkan halaman tujuan link baru tanpa harus menutup halaman web awal dengan membuka jendela baru, dapat menggunakan parameter target=”_blank”
untuk menampilkan halaman tujuan link baru tanpa harus menutup halaman web awal dengan membuka jendela baru, dapat menggunakan parameter target=”_blank”
Contoh :
Halaman awal link
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link untuk membuka jendela baru menuju apasaja.html</h1>
<a href=”apasaja.html” target= blank”>jendela baru apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link untuk membuka jendela baru menuju apasaja.html</h1>
<a href=”apasaja.html” target= blank”>jendela baru apasaja.html</a>
</body>
</html>
Halaman
tujuan link
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
F. Link
Tanpa Garis Bawah
menggunakan standar atribut HTML style=”text-decoration:none” pada elemen <a href=””>
menggunakan standar atribut HTML style=”text-decoration:none” pada elemen <a href=””>
Contoh :
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tanpa garis bawah</h1>
<a href=”apasaja.html” style=”text-decoration:none”>buka apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tanpa garis bawah</h1>
<a href=”apasaja.html” style=”text-decoration:none”>buka apasaja.html</a>
</body>
</html>
G. Link
dengan Gambar
langkah-langkahnya :
langkah-langkahnya :
1. Pastikan
berada pada folder “Lat_Link” yg telah dibuat sebelumnya
2. Ambilah
sebuah gambar dengan ekstensi .jpeg
3. Copy
file gambar tsb ke dalam folder “Lat_Link”
4. Ubah
nama file gambar tsb mnjd link.jpg
5. Buat
file apasaja.html dan file apasaja.html
Contoh :
Link
dengan Gambar
<html>
<head>
<title>hyperlink dengan gambar</title>
</head>
<body>
<h3>ini adalah link dengan gambar</h3>
<table width=”200” border=”1” cellspacing=”0” cellpadding=”0”>
<tr>
<td><a href=”apasaja.html”><img src=”link.jpg” width=”200” height=”150” border=”0”></a></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>hyperlink dengan gambar</title>
</head>
<body>
<h3>ini adalah link dengan gambar</h3>
<table width=”200” border=”1” cellspacing=”0” cellpadding=”0”>
<tr>
<td><a href=”apasaja.html”><img src=”link.jpg” width=”200” height=”150” border=”0”></a></td>
</tr>
</table>
</body>
</html>
Tujuan
gambar hyperlink
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tujuan gambar</h1>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tujuan gambar</h1>
</body>
</html>
H. Mapping
Gambar
bentuk-bentuk mapping gambar ada 3 macam, yaitu :
bentuk-bentuk mapping gambar ada 3 macam, yaitu :
1. Bentk
rectangle
memiliki bentuk persegi dengan tiap sudut ditentukan berdasarkan koordinatnya.
contoh penggunaannya :
---
<area shape=”rect” coords=”116,60,175,121” href=”apasaja.html”>
memiliki bentuk persegi dengan tiap sudut ditentukan berdasarkan koordinatnya.
contoh penggunaannya :
---
<area shape=”rect” coords=”116,60,175,121” href=”apasaja.html”>
2. Bentuk
circle
untuk membuat mapping gambar berupa bangun ruang lingkaran, ada 3 koordinat yg harus ditentukan yaitu coords=”x,y,radius”
contoh penggunaanya :
---
<area shape=”circle” coords=”48,49,39” href=”apasaja.html”>
untuk membuat mapping gambar berupa bangun ruang lingkaran, ada 3 koordinat yg harus ditentukan yaitu coords=”x,y,radius”
contoh penggunaanya :
---
<area shape=”circle” coords=”48,49,39” href=”apasaja.html”>
3. Bentuk
Poly
bentuk mapping poly tidak ditentukan jumlah titik koordinat yang dibuat
contoh penggunaannya :
---
<area shape=”poly” coords=”300, 35, 350, 73, 432, 98, 372, 39, 329, 18” href=”apasaja.html”>
bentuk mapping poly tidak ditentukan jumlah titik koordinat yang dibuat
contoh penggunaannya :
---
<area shape=”poly” coords=”300, 35, 350, 73, 432, 98, 372, 39, 329, 18” href=”apasaja.html”>
I. Link
dengan Objek Flash
dengan objek multimedia flash juga dapat membuat hyperlink. Contohnya dalam membuat link dengan teks flash menggunakan plugin <object>
contoh penggunaan link dengan teks flash :
dengan objek multimedia flash juga dapat membuat hyperlink. Contohnya dalam membuat link dengan teks flash menggunakan plugin <object>
contoh penggunaan link dengan teks flash :
<html>
<head>
<title>link dengan objek teks
flash</title>
</head>
<body>
<object
classid=”clsid:D27CDB6E-AE6D-11cf-98B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 width=”223”
height=”34”>
<param name=”movie” value=”text1.swf”>
<param name=”quality” value=”high”>
<param name=”base” value=”.f”>
<param name=”bgcolor” value=”#00FF66”>
<param name=”scale” value=”exactfit”>
<embed scr=”text1.swf” base=”.”
Quality=”high” pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?p1_Prod_Version=ShockwaveFlash type=”application/-shockwave-flash”
scale=”exactfit” width=”223” height=”34” bgcolor=”#00FF66”></embed>
</object>
</body>
</html>
contoh penggunaan link dengan tombol flash
:
<html>
<head>
<title>link dengan objek teks
flash</title>
</head>
<body>
<object
classid=”clsid:D27CDB6E-AE6D-11cf-98B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 width=”100”
height=”22”>
<param name=”movie” value=”button1.swf”>
<param name=”quality” value=”high”>
<param name=”base” value=”.”>
<embed scr=”button1.swf” base=”.”
Quality=”high” pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?p1_Prod_Version=ShockwaveFlash type=”application/-shockwave-flash”
width=”100” height=”22” bgcolor=”></embed>
</object>
</body>
</html>
OBJEK MULTIMEDIA
A. Objek
Multimedia
Multimedia pada halaman web memiliki
pengertian penggunaan external file yang berisi data dengan format tertentu
pada web. Objek multimedia pada web dapat berupa audio, video, musik, gambar,
animasi, maupun file lainnya yang bertujuan untuk membuat web menjadi lebih
atraktif, menarik dan mudah digunakan. Terdapat beberapa fungsi dalam
pemrograman web yang harus didukung web browser, yaitu sbg berikut.
1. Fungsi
dukungan terhadap scripting, agar web browser mampu menjalankan dan
menerjemahkan kode yg dituliskan dalam badan program program HTML.
2. Applet
merupakan program aplikasi yang dijalankan pada browser untuk mengeksekusi
objek multimedia yang disertakan pada halaman web agar berfungsi dan bekerja
semestinya. Pada generasi web browser terbaru tag <applet> sudah tidak
digunakan lagi tetapi diganti dengan penggunaan tag <object>.
Contoh penggunaan tag <object> :
<object code=”namaclassapplet.class”>
<param name=”namaparam”
value=”nilaiparam”>
</object>
3. Plug
in, yaitu program tambahan pada web browser untuk menjalankan berbagai file
multimedia yang disertakan pada halaman web. Plug in pada setiap browser tidak
sama sehingga hasil tampilan, kecepatan, dan model halaman web yang dihasilkan
tiap web browser juga berbeda.
4. ActiveX
merupakan komponen standar yang disediakan sistem operasi windows untuk
mendukung beberapa fungsi dalam web browser khususnya internrt explorer seperti
teknik menampilkan kalender. Namun, tidak semua kode program activeX yg ditulis
dalam HTML file akan dapat dieksekusi oleh web browser.
B. Objek
Gambar
Gambar merupakan salah satu jenis objek
multimedia yang sering dijadikan komponen pembentuk dalam halaman web.
Fungsinya untuk mempercantik tampilan dan membuat halaman web lebih menarik.
1) JPG/JPEG
JPG atau Joint Photographic Group dan JPEG
(Joint Photographic Expert Group) merupakan salah satu jenis file gambar dengan
resolusi tinggi pada mode warna RGB, CMYK, dan garyscale. Kelemahan file gambar
jenis ini adalah rincian komponen gambar menjadi kabur (blur) karena proses
kompresi file yang terlalu banyak.
2) GIF
GIF atau Graphic Interchange Format hanya
mampu menyimpan gambar dalam format 8bit. Format GIF biasanya digunakan untuk
menampilkan animasi 2 dimensi hasil kompilasi flash. Kelemahan GIF yaitu hanya
mampu menampilkan 256 jenis warna sehingga kurang bagus untuk dijadikan
ekstensi gambar hasil fotografi kamera dan juga gambar yang dihasilkan memiliki
ketajaman yang rendah.
3) PNG
Portable Network Graphic merupakan salah
satu bentuk file gambar yang menggabungkan teknik JPG dan GIF yg mampu
menyimpan file dengan bit depth hingga 24bit. Kelemahan file gambar berekstensi
PNG adalah kapasitas file yang cukup besar dibanding dengan jenis JPG.
4) BMP
Atau Bitmap Image adalah jenis format file
yang mamapu menyimpan gambar dengan tingkat kualitas 1 hingga 24bit (warna RGB,
grayscale, indexed color, dan bitmap). Kelemahan file jenis ini adalah tidak
dapat menyimpan dalam mode alpha channel.
Untuk dapat menampilkan sebuah gambar
dengan ekstensi .jpg tau .jpeg, .png atau .gif dapat menggunakan fungsi tag
<img src=”lokasi_file”>.
Contoh penggunaan tag tersebut :
<!-- file apasaja.html-->
<head>
<title>menampilkan gambar dengan tag
img</title>
</head>
<body>
<img src=”motherboard.jpg” width=”400”
height=”300”>
</body>
</html>
1) Scr=”motherboard.jpg”,
yaitu merujuk lokasi file gambar motherboard.jpg, dengan file yang berada satu
folder dengan file html.
2) Width=”400”,
mengatur dimensi lebar gambar sebesar 400 pixel
3) Height=”300”,
yaitu mengatur dimensi tinggi gambar sebesar 300 pixel
Contah menampilkan gambar dengan tag
<object>
<!—file apasaja.html -->
<html>
<head>
<title>menampilkan gambar dengan tag
object</title>
</head>
<body>
<object data=”motherboard.jpg”
type=”image/jpg” width=”600” height=”400”>
</object>
</body>
<html>
1) Data=”motherboard.jpg”,
yaitu menunjukkan lokasi file gambar yang dipanggil sebagai objek multimedia
pada halaman web.
2) Type=”image/jpg”,
perintah type menunjukkan jenis objek yang dipanggil dalam halaman web.
3) Width=”600”
untuk menentukan dimensi lebar objek sebesar 600 pixel.
4) Height=”400”
yaitu menentukan dimensi tinggi objek sebesar 400 pixel.
C. Objek
Suara
Penambahan objek suara pada halaman web
dapat dilakukan dengan menambahkan tag <object> dan menuliskan lokasi
file dari audio yg akan dimainkan. Pada dasarnya ada 3 kategori format file
audio, yaitu :
1) File
audio tanpa kompresi, yaitu file dengan ekstensi AIFF, AU, WAV, dan raw
header-less PCM.
2) File
audio dengan kompresi lossy, seperti vorbis, ACC, ATRAC, MP3, mousepack dan
lossy windows media audio (WMA)
3) File
audio dengan kompresi lossless, seperti MPEG-4 SLS, MPEG-4 ALS, MPEG-4 DST,
TTA, windows media audio lossless (WMA lossless), FLAC, dan WavPack (file name
extension WV).
File audio dalam halaman web memiliki
beberapa tipe, antara lain sbg berikut.
1) MPEG
(Mp3)
Moving Picture Experts Group merupakan format file audio dengan ekstensi .mp3 yang bekerja pada layer tiga dengan kompresi audio mencapai kualitas setara CD stereo, yaitu 16-bit
Moving Picture Experts Group merupakan format file audio dengan ekstensi .mp3 yang bekerja pada layer tiga dengan kompresi audio mencapai kualitas setara CD stereo, yaitu 16-bit
2) WAV
Waveform Audio Format adalah standar file yang tidak melakukan kompresi terhadap isi audionya.
Waveform Audio Format adalah standar file yang tidak melakukan kompresi terhadap isi audionya.
3) AAC
Advanced Audio Coding merupakan file audio dengan format berbasis MPEG2 dan MPEG4 sebagai pengembangan file mp3.
Advanced Audio Coding merupakan file audio dengan format berbasis MPEG2 dan MPEG4 sebagai pengembangan file mp3.
4) AIFF
Audio Interchange File Format adalah format standar audio tanpa kompresi untuk sistem operasi macintosh.
Audio Interchange File Format adalah format standar audio tanpa kompresi untuk sistem operasi macintosh.
5) Audio
CD
format standar Audio CD memiliki ekstensi file .cda dan merupakan mode audio yang dapat diputar secara langsung dari CD-drive komputer tetapi ketika disalin kedalam hardisk, file audio CD tidak dpt dijalankan.
format standar Audio CD memiliki ekstensi file .cda dan merupakan mode audio yang dapat diputar secara langsung dari CD-drive komputer tetapi ketika disalin kedalam hardisk, file audio CD tidak dpt dijalankan.
6) MIDI
Music Instrument Digital Interface merupakan sebuah standar format audio berbagai software dan hardware yg berkembang saat ini. File standar MIDI biasanya digunakan untuk menyimpan hasil intruksi perangkat musik.
Music Instrument Digital Interface merupakan sebuah standar format audio berbagai software dan hardware yg berkembang saat ini. File standar MIDI biasanya digunakan untuk menyimpan hasil intruksi perangkat musik.
7) WMA
Windows Media Audio adalah salah satu jenis format audio yang dikembangkan oleh microsoft
Windows Media Audio adalah salah satu jenis format audio yang dikembangkan oleh microsoft
8) OGG
merupakan salah satu jenis format file audio sekaligus video dengan lisensi bebas atau oper source
merupakan salah satu jenis format file audio sekaligus video dengan lisensi bebas atau oper source
Ada beberapa syarat yang harus dipenuhi
untuk menjalankan audio file dengan script pemrograman html, yaitu sbg berikut.
Web
browser yang digunakan harus versi terbaru, dengan plug in dan extension sudah
ter-update
Pada
beberapa kondisi, diperlukan kondisi internet untuk menjalankan program
tersebut.
Sediakan
file audio dengan beberapa format tertentu
Buatlah
folder yang menampung file hasil pemrograman tersebut, kemudian pindahkan file
audio tersebut kedalam satu folder dengan file HTML.
Terdapat beberapa teknik memasukkan file
audio kedalam halaman web menggunakan pemrograman HTML, yaitu sbg berikut.
1) Menggunakan
Yahoo Media Player
contoh memainkan musik dengan yahoo media player :
<!--file apasaja.html>
<html>
<head>
<title>musik dengan yahoo media player/title>
</head>
<body>
<!—memanggil yahoo media player -->
<a href=”1.mp3”>mainkan musik</a>
<script type=”text/javascript” src=http://mediaplayer.yahoo.com/js>
</script>
<!—akhir script-->
</body>
</html>
contoh memainkan musik dengan yahoo media player :
<!--file apasaja.html>
<html>
<head>
<title>musik dengan yahoo media player/title>
</head>
<body>
<!—memanggil yahoo media player -->
<a href=”1.mp3”>mainkan musik</a>
<script type=”text/javascript” src=http://mediaplayer.yahoo.com/js>
</script>
<!—akhir script-->
</body>
</html>
2) Menggunakan
plug in elemen <object>
Langkah yg harus dilakukan sbg berikut.
Persiapkan
file audio yang akan disisipkan pada halaman web
Salin
file tersebut kedalam folder yg sma dengan file HTML yang akan dibuat nantinya
Ubah
nama file tersebut menjadi 1.mp3 untuk memudahkan proses pemanggilannya
Selanjutnya,
buat file HTML dengan script seperti contoh
Contoh memutan file audio dengan elemen
object
<!—apasaja.html-->
<html>
<head>
<title>memutar lagu</title>
</head>
<body>
<object data=”1.mp3”>
</object>
</body>
</html>
3) Menggunakan
elemen <audio>
menggunakan tag <audio> dan menambahkan kode <!DOCTYPE HTML> pada awal program html
contohnya :
<!—fileapasaja.html-->
<! DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan audio plugin</title>
</head>
<body>
<!—memanggil elemen <audio>-->
<audio controls=”controls” height=”70px” width=”100px”>
<source src=”1.mp3” type=”audio/mpeg”>
</audio>
<!—akhir elemen <audio>-->
</body>
</html>
menggunakan tag <audio> dan menambahkan kode <!DOCTYPE HTML> pada awal program html
contohnya :
<!—fileapasaja.html-->
<! DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan audio plugin</title>
</head>
<body>
<!—memanggil elemen <audio>-->
<audio controls=”controls” height=”70px” width=”100px”>
<source src=”1.mp3” type=”audio/mpeg”>
</audio>
<!—akhir elemen <audio>-->
</body>
</html>
4) Menggunakan
elemen <embed>
menggunakan tag <embed>
contohnya :
<!-- file apasaja.html>
contohnya :
<!-- file apasaja.html>
<html>
<head>
<title>Hidden object</object>
</head>
<object classid=”1.mp3”
codetype=”application/java”>
<param name=”src” value=”1.mp3”>
<embed src=”1.mp3” hidden=”true”
loop=”true”></embed>
</object>
</body>
</body>
</html>
Src=”1.mp3”
digunakan untuk merujuk lokasi file audio yang dipanggil oleh halaman web
ketika diakses oleh web browser.
Hidden=”true”
digunakan untuk menyembunyikan active object yang sedang berjalan sehingga
tampak pada halaman web ketika diakses.
Loop=”true”
atribut loop jika bernilai true menyebabkan file audio akan diputar
berulang-ulang selama halaman web diakses.
5) Inline
Sound
menggunakan tag <bgsound>
contohnya
<!—file apasaja.html>
<!DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan bgsound</title>
</head>
<body>
<!—memanggil elemen <bgsound>-->
<bgsound src=”1.mp3” loop=”1”>
<!—akhir elemen <bgsound>-->
</body>
</html>
menggunakan tag <bgsound>
contohnya
<!—file apasaja.html>
<!DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan bgsound</title>
</head>
<body>
<!—memanggil elemen <bgsound>-->
<bgsound src=”1.mp3” loop=”1”>
<!—akhir elemen <bgsound>-->
</body>
</html>
6) Hyperlink
Sound
menggunakan tag <a href=”namafile”>
contonya :
<!—file apasaja.html>
<html>
<head>
<title>hyperlink file audio</title>
</head>
<body>
<a href=”1.mp3”>
putar musik
</a>
</body>
</html>
menggunakan tag <a href=”namafile”>
contonya :
<!—file apasaja.html>
<html>
<head>
<title>hyperlink file audio</title>
</head>
<body>
<a href=”1.mp3”>
putar musik
</a>
</body>
</html>
D. Objek
Video
Objek multimedia berupa video merupakan
perpaduan antara gambar, gerak, dan suara yang tersusun dalam frame-frame yang
membentuk pla tertentu secara tepat. Terdapat beberapa jenis format standar
video yang dapat disisipkan pada halaman web, yaitu sbg berikut.
1) MPEG
Moving Picture Expert Group adalah format file audio dan video yang saat ini menjadi standar kompresi file dengan kualitas baik
Moving Picture Expert Group adalah format file audio dan video yang saat ini menjadi standar kompresi file dengan kualitas baik
2) AVI
Audio Video Interleaved merupakan format audio video buatan microsoft dengan kualitas dan ketajaman gambar dan suara lebih baik dari standar audio video ASF
Audio Video Interleaved merupakan format audio video buatan microsoft dengan kualitas dan ketajaman gambar dan suara lebih baik dari standar audio video ASF
3) MWV
merupakan salah satu standar audio video yang dikeluarkan microsoft untuk komputer berbasis windows
merupakan salah satu standar audio video yang dikeluarkan microsoft untuk komputer berbasis windows
4) MP4
merupakan generasi baru dari MP3 dengan dukungan audio dan video yang lebih baik
merupakan generasi baru dari MP3 dengan dukungan audio dan video yang lebih baik
5) Real
Video
tipe file ini sering digunakan sebagai standar video streaming seperti tv online dsb.
tipe file ini sering digunakan sebagai standar video streaming seperti tv online dsb.
6) QuickTime
merupakan standar format audio video keluaran MacOS untuk Apple
merupakan standar format audio video keluaran MacOS untuk Apple
7) 3GP
merupakan salah satu generasi terbaru format file audio video ringan, kecil ukurannya, serta didukung berbagai peranti keras, khususnya telepon genggam
merupakan salah satu generasi terbaru format file audio video ringan, kecil ukurannya, serta didukung berbagai peranti keras, khususnya telepon genggam
8) Flash
merupakan standar format audio video keluaran macromedia
merupakan standar format audio video keluaran macromedia
Terdapat beberapa teknik yang dapat
digunakan untuk menjalankan video pada halaman web, seperti berikut.
1) Menggunakan
Elemen <img>
contohnya :
<!-- file apasaja.html-->
<html>
<head>
<title>manjalankan video dengan tag img</title>
</head>
<body>
<img dynsrc=”1.mp4”>
</body>
</html>
contohnya :
<!-- file apasaja.html-->
<html>
<head>
<title>manjalankan video dengan tag img</title>
</head>
<body>
<img dynsrc=”1.mp4”>
</body>
</html>
2) Menggunakan
Elemen <embed>
contoh scriptnya hampir sama dengan yg menggunakan tag img
contoh scriptnya hampir sama dengan yg menggunakan tag img
3) Menggunakan
Elemen <video>
contohnya :
<!-- file apasaja.html-->
<!DOCTYPE HTML>
<html>
<head>
<title>menjalankan video dengan tag video</title>
</head>
<body>
<video width=”420” controls=”controls”>
<source src=”1.mp4” type=”video/mp4”>
<source src=”1.mkv” type=”video/mkv”>
<source src=”1.3gp” type=”video/3gp”>
<source src=”1.flv” type=”video/mp4”>
<!-- jika ketiga file tidak bisa dijalankan, maka muncul pesan kegagalan seperti dibawah -->
browser anda belum mendukung HTML5
</video>
</body>
</html>
contohnya :
<!-- file apasaja.html-->
<!DOCTYPE HTML>
<html>
<head>
<title>menjalankan video dengan tag video</title>
</head>
<body>
<video width=”420” controls=”controls”>
<source src=”1.mp4” type=”video/mp4”>
<source src=”1.mkv” type=”video/mkv”>
<source src=”1.3gp” type=”video/3gp”>
<source src=”1.flv” type=”video/mp4”>
<!-- jika ketiga file tidak bisa dijalankan, maka muncul pesan kegagalan seperti dibawah -->
browser anda belum mendukung HTML5
</video>
</body>
</html>
4) Menggunakan
hyperlink
contohnya :
<!-- file apasaja-->
<html>
<head>
<title>menjalankan video dengan hyperlink</title>
</head>
<body>
<a href=”1.mp4”>
mainkan video
</a>
</body>
</html>
contohnya :
<!-- file apasaja-->
<html>
<head>
<title>menjalankan video dengan hyperlink</title>
</head>
<body>
<a href=”1.mp4”>
mainkan video
</a>
</body>
</html>
5) Menggunakan
elemen <object>
contohnya :
<object data=”1.mp4” type=”video/mp4”>
<embed erc=”1.mp4” width=”400” height=”320”></embed>
</object>
contohnya :
<object data=”1.mp4” type=”video/mp4”>
<embed erc=”1.mp4” width=”400” height=”320”></embed>
</object>
6) Menjalankan
aplikasi flash
contoh script memutar animasi flash .swf
<!-- file apasaja.html>
<html>
<head>
<title>memutar animasi swf flash</title>
</head>
<body>
<object classid=”clsid: D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6, 0, 29, 0 widht=”170” height=”140”>
<param name=”movie” value=”kabel.swf”>
<param name=”quality” value=”high”>
<embed src=”kabel.swf” quality=”high” pluginspage=http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”170” height=”140”>
</embed></object>
</body>
</html>
contoh script memutar animasi flash .swf
<!-- file apasaja.html>
<html>
<head>
<title>memutar animasi swf flash</title>
</head>
<body>
<object classid=”clsid: D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6, 0, 29, 0 widht=”170” height=”140”>
<param name=”movie” value=”kabel.swf”>
<param name=”quality” value=”high”>
<embed src=”kabel.swf” quality=”high” pluginspage=http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”170” height=”140”>
</embed></object>
</body>
</html>
Struktur Tabel HTML
A. Elemen
Dasar Tabel
Tabel adalah salah satu metode untuk menyajikan informasi dlm halaman web. Tabel terdiri atas baris dan kolom. Baris merupakan bagian mendatar dan kolom adalah bagian vertikal.
elemen-elemen yang ada pada tabel sbb.
Tabel adalah salah satu metode untuk menyajikan informasi dlm halaman web. Tabel terdiri atas baris dan kolom. Baris merupakan bagian mendatar dan kolom adalah bagian vertikal.
elemen-elemen yang ada pada tabel sbb.
Nama
|
Fungsi
|
<table>....</table>
|
Untuk mendeskripsikan tabel dalam halaman
web
|
<tr>....</tr>
|
Untuk mendeskripsikan baris dalam tabel
|
<td>....</td>
|
Untuk mendeskripsikan kolom dalam tabel
|
Untuk mengatur posisi objek dalam cell
sebuah tabel, dapat digunakan beberapa atribut dalam tag
<tr>....</tf> sbg berikut.
Align,
digunakan untuk mengatur posisi horizontal sebuah objek dalam cell tabel. Ada 3
jenis align, yaitu: left, center, dan right. Left untuk posisi kiri cell,
center untuk posisi tengah cell, dan right untuk posisi kanan cell.
Valign,
digunakan untuk mengatur posisi peletakan sebuah objek pada cell secara
vertikal. Ada pilihan dalam menentukan atribut valign, yaitu top, middle,
dan bottom. Top digunakan untuk meletakkan sebuah objek pada posisi paling atas
cell, middle untuk meletakkan objek pada tengah cell, dan bottom untuk
meletakkan objek pada posisi paling bawah cell.
Contoh :
<!—file apasaja.html-->
<html>
<head>
<title>struktur tabel</title>
</head>
<body>
<center><h1>Data Siswa TKJ</h1></center>
<table width=”50%” border=”1” cellspacing=”0” cellpadding=”0” align=”center”>
<tr>
<td align=”center”><strong>NIS</strong></td>
<html>
<head>
<title>struktur tabel</title>
</head>
<body>
<center><h1>Data Siswa TKJ</h1></center>
<table width=”50%” border=”1” cellspacing=”0” cellpadding=”0” align=”center”>
<tr>
<td align=”center”><strong>NIS</strong></td>
<td align=”center”><strong>NAMA</strong></td>
<td align=”center”><strong>ALAMAT</strong></td>
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
<td align=”center”>Kediri</td>
<td align=”center”><strong>ALAMAT</strong></td>
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
<td align=”center”>Kediri</td>
</tr>
</table>
</body>
</table>
</body>
B. Atribut Border
Untuk mengatur tebal dan lebar garis pada
tabel, harus mengatur nilai atribut border table ketika mendeklarasikan tabel.
Semakin besar nilai border, semakin tabal pula garis yg ditampilkan. Jika nilai
atribut border semakin besar, lebar garis tabel juga semakin besar.
Contoh men-setting border tabel dalam
halaman web:
<!—file apasaja.html-->
<html>
<head>
<title>mengatur border</title>
</head>
<body>
tabel border berukuran 0
<table width=”10%” border=”0” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
tabel dengan border berukuran 1
<table width=”10%” border=”1” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
tabel dengan border berukuran 12
<table width=”10%” border=”12” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>mengatur border</title>
</head>
<body>
tabel border berukuran 0
<table width=”10%” border=”0” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
tabel dengan border berukuran 1
<table width=”10%” border=”1” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
tabel dengan border berukuran 12
<table width=”10%” border=”12” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
</body>
</html>
C. Elemen
Header
Header dalam tabel berguna untuk memberikan
informasi data dalam kolom sebuah tabel. Untuk mendeklarasikan header pada
tabel, perlu menambahkan elemen tag </th> pada bagian awal script dan
</th> pada akhir script.
Pada elemen header tabel, dapat menerapkan
atribut scope dan headers untuk menghubungkan kolom atau baris dalam cell.
Atribut scope digunakan untuk menghibungkan data kolom dan baris. Atribut scope
dapat diisi dengan nilai col, colgroup, row, dan rowgroup.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>membuat header tabel dengan scope</title>
</head>
<body>
<table width=”50%” border=”1” cellspacing=”0”>
<tr>
<th> </th>
<th scope=”col”>Senin</th></!--Scope colom-->
<th scope=”col”>Selasa</th></!--Scope colom-->
<th scope=”col”>Rabu</th></!--Scope colom-->
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>membuat header tabel dengan scope</title>
</head>
<body>
<table width=”50%” border=”1” cellspacing=”0”>
<tr>
<th> </th>
<th scope=”col”>Senin</th></!--Scope colom-->
<th scope=”col”>Selasa</th></!--Scope colom-->
<th scope=”col”>Rabu</th></!--Scope colom-->
</tr>
<tr>
<th scope=”row”<X-TKJ</th><!—Scope row-->
<td>sistem Operasi</td>
<td>LAN</td>
<td>Matematika</td>
</tr>
<tr>
<th scope=”row”<XI-TKJ</th><!—Scope row-->
<td>Membangun LAN</td>
<td>Pemrograman Dasar</td>
<td>Web Programming</td>
</tr>
<tr>
<th scope=”row”<XII-TKJ</th><!—Scope row-->
<td>Wide Area Networking</td>
<td>Pemrograman Web Dinamis</td>
<td>IPA</td>
<tr>
</table>
</body>
</html>
<tr>
<th scope=”row”<X-TKJ</th><!—Scope row-->
<td>sistem Operasi</td>
<td>LAN</td>
<td>Matematika</td>
</tr>
<tr>
<th scope=”row”<XI-TKJ</th><!—Scope row-->
<td>Membangun LAN</td>
<td>Pemrograman Dasar</td>
<td>Web Programming</td>
</tr>
<tr>
<th scope=”row”<XII-TKJ</th><!—Scope row-->
<td>Wide Area Networking</td>
<td>Pemrograman Web Dinamis</td>
<td>IPA</td>
<tr>
</table>
</body>
</html>
D. Elemen
Caption
Untuk memberikan sebuah judul pada tabel,
dapat menggunakan elemen caption dengan tag <caption>...</caption>.
Penulisan tag caption diletakkan setelah pendeklarasian tag awal tabel
<table>. Posisi default caption, yaitu berada diatas tabel.
Contoh membuat caption tabel :
<!—file apasaja.html-->
<html>
<head>
<title>membuat captin tabel</title>
</head>
<body>
<table width=”40%” border=”1” cellspacing=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>membuat captin tabel</title>
</head>
<body>
<table width=”40%” border=”1” cellspacing=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
</tr>
</table>
</body>
</html>
E. Atribut
Cellpadding dan Cellspacing
Atribut cellpadding berfungsi untuk
mengatur jarak dari border sisi dalam tabel dengan isi teks tabel dalam cell.
Adapun atribut cellspacing berfungsi untuk mengatur jarak antara border bagian
dalam dan luar. Semakin tinggi nilai atribut cellspacing, semakin lebar pula
jarak antara border dalam dengan luar.
Contoh mengatur cellpadding dan cellspacing
tabel :
<!—file apasaja.html-->
<html>
<head>
<title>mengatur cellpadding dan cellspacing tabel</title>
</head>
<body>
<table width=”30%” border=”1” cellspacing=”2” cellpadding=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
</tr>
</table>
</body>
</html>
<!—file apasaja.html-->
<html>
<head>
<title>mengatur cellpadding dan cellspacing tabel</title>
</head>
<body>
<table width=”30%” border=”1” cellspacing=”2” cellpadding=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
</tr>
</table>
</body>
</html>
F. Menggabungkan
Cell
Ada 2 atribut yg dapat digunakan untuk
menggabungkan 2 buah cell menjadi 1 cell, yaitu :
a) Colspan
Digunakan untuk menyatukan satu atau lebih
cell berdasarkan kolom.
b) Rowspan
Digunakan untuk menyatukan satu atau lebih
cell berdasarkan baris.
Contoh menggabungkan dua cell menjadi satu
:
<!—file apasaja.html-->
<html>
<head>
<title>mengatur lebar cell tabel</title>
</head>
<body>
<table width=”37%” border=”1” cellspacing=”0” cellpadding=”0”>
<tr>
<html>
<head>
<title>mengatur lebar cell tabel</title>
</head>
<body>
<table width=”37%” border=”1” cellspacing=”0” cellpadding=”0”>
<tr>
<td
width=”22%” rowspan=”2”><div align=”center”>NIS</div></td>
<td
width=”31%” rowspan=”2”><div align=”center”>nama</div></td>
<td
colspan=”3”><div align=”center”>Nilai Pelajaran</div></td>
</tr>
<tr>
<td
width=”15%”><div align=”center”>IPA</div></td>
<td
width=”15%”><div align=”center”>IPS</div></td>
<td
width=”17%”><div align=”center”>AGAMA</div></td>
</tr>
<tr>
<td>1234567890</td>
<td>KURNIA</td>
<td>80</td>
<td>88</td>
<td>78</td>
</tr>
</table>
</body>
</html>
</body>
</html>
G. Mengatur
Background
Background secara harfiah berarti latar
belakang. Ada 2 jenis background yg dpt diterapkan pada tabel, yaitu berupa
gambar dan warna. Langkah-langkah menerapkan background gambar pada tabel
adalah sbg berikut.
a. Buatlah
folder BG pada direktori C (C:\BG)
b. Persiapkan
gambar yg akan dijadikan background sebuah tabel, baik dalam format .jpg,
.jpeg, atau .bmp. letakkan file gambar tersebut kedalam folder BG dalam 1
folder dengan file html yg akan dibuat
c. Selanjutnya,
buat file “gambar.html” dan tulis kode seperti contoh berikut
Contoh mengatur background gambar pada
tabel :
<!—file apasaja.html-->
<html>
<head>
<title>background gambar pada tabel</title>
</head>
<body>
<html>
<head>
<title>background gambar pada tabel</title>
</head>
<body>
<table align=”center” width=”30%”
border=”1” background=”foto.jpg”>
<tr>
<th>NIS</th><!--Header tabel-->
<th>NAMA</th><!--Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>Nabila Mutiara R </td>
</tr>
</table>
</body>
</html>
</body>
</html>
Contoh menagtur background warna pada tabel
:
<!—file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”30%”
border=”1” bgcolor=”#FFFF33”>
<tr>
<th>NIS</th><!--Header tabel-->
<th>NAMA</th><!--Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>Nabila Mutiara R </td>
</tr>
</table>
</body>
</html>
</body>
</html>
H. Atribut
Align
Ada 3 nilai yang dapat diterapkan pada
atribut align, yaitu left, center, dan right. Left digunakan untuk meletakkan
isi pada sisi sebelah kiri cell, center digunakan untuk meletakkan isi pada
posisi tengah, dan right untuk meletakkan isi pada sisi sebelah kanan
Contoh menentukan posisi isi cell dengan
align :
<!--file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”30%” border=”1” bgcolor=”#FFFF33”>
<tr>
<!--file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”30%” border=”1” bgcolor=”#FFFF33”>
<tr>
<th align=”left”>NIS</th><!--header tabel berada pada posisi
kiri-->
<th align=”right”>NIS</th><!--header tabel berada pada posisi
kanan-->
</tr>
<tr>
<tr>
<td align=”center”>1234567890</th><!--isi sel pada posisi
tengah-->
<td align=”center”>Nabila Mutiara R</td>
</tr>
</table>
</body>
</html>
</table>
</body>
</html>
I. Meletakkan
Tabel di Dalam Tabel
Dengan menggunakan tabel dapat menentukan
struktur utama sebuah web. Teknik sederhana yg dapat digunakan untuk melakukan
hal tersebut adalah meletakkan tabel di tabel utama.
Contoh menentukan isi cell dengan align :
<!--file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”50%” border=”1”>
<tr>
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”50%” border=”1”>
<tr>
<td>
<tablealign=”center”width=”80%”border=”1”bgcolor=”#FFFF33”>
<caption>Tabel terletak pada sel
1</caption>
<tr>
<th>NIS</th>
<th>NAMA</th>
</tr>
<tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>Nabila Mutiara R</td>
</tr>
</table>
</td>
<td>
<tablealign=”center”width=”80%”border=”1”bgcolor=”#FFFF33”>
<caption>Tabel terletak pada sel
2</caption>
<tr>
<th>NIS</th>
<th>NAMA</th>
</tr>
<tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>Nabila Mutiara R</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</td>
</tr>
</table>
</body>
</html>
J. Atribut
Frame
Atribut frame pada tabel digunakan untuk
mengatur jenis border luar pada tabel. Ada beberapa nilai yg digunakan pada
atribut frame, antara lain :
1. Above
2. Bellow
3. Border
4. Box
5. Hsides
6. Lhs
7. Rhs
8. Void
9. Vsides
contoh menggunakan atribut frame :
<table frame=”box”>
<!--isi tabel-->
</table>
<html>
<head>
<title>Tabel dengan Atribut Frame</title>
</head>
<body>
<table frame=”box”>
<tr>
<title>Tabel dengan Atribut Frame</title>
</head>
<body>
<table frame=”box”>
<tr>
<td align=”center><strong>NIS</strong></td>
<td align=”center><strong>NAMA</strong></td>
<td align=”center><strong>ALAMAT</strong></td>
</tr>
<tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
<td align=”center”>Kediri</td>
</tr>
</table>
</body>
</html>
</table>
</body>
</html>
HYPERLINK
A. Elemen Hyperlink
untuk membuat hyperlink dengan teks, harus menambahkan tag anchor HTML dengan format sebagai berikut.
B.Link Absolut
adalah sebuah metode menyediakan link ke alamat situs lainnya. Contohnya :
--membuat link ke alamat situs tertentu.
<html>
<head>
<title>membka situs google dengan link</title>
</head>
<body>
<a href=”http://www.google.com”>klik disini untuk membuka situs google</a>
</body>
</html>
(dengan catatan komputer pengguna harus terkoneksi dengan internet)
untuk membuat hyperlink dengan teks, harus menambahkan tag anchor HTML dengan format sebagai berikut.
B.Link Absolut
adalah sebuah metode menyediakan link ke alamat situs lainnya. Contohnya :
--membuat link ke alamat situs tertentu.
<html>
<head>
<title>membka situs google dengan link</title>
</head>
<body>
<a href=”http://www.google.com”>klik disini untuk membuka situs google</a>
</body>
</html>
(dengan catatan komputer pengguna harus terkoneksi dengan internet)
C. Link
Relatif
merupakan metode link ke halaman web lain dalam satu mesin komputer
merupakan metode link ke halaman web lain dalam satu mesin komputer
Mengakses
halaman web lain dalam 1 folder
1. Buat
folder utama dengan nama “Lat_Link”
2. Buat
file “apasaja.html” dan simpan pada folder yg dibuat diatas
3. Buat
link ke halaman lain dalam 1 folder dengan kode HTML berikut.
<html>
<head>
<title>membuka link halaman 1 folder</title>
</head>
<body>
<a href=login.html”>klik disini untuk membuka login.html</a>
</body>
</html>
<html>
<head>
<title>membuka link halaman 1 folder</title>
</head>
<body>
<a href=login.html”>klik disini untuk membuka login.html</a>
</body>
</html>
4. Buat file “login.html” dan
simpan pada folder yg sama sbg tujan link.
</html>
<head>
<title>ini halaman login.html</title>
</head>
<body>
<h1>ini adalah halaman login</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
</html>
<head>
<title>ini halaman login.html</title>
</head>
<body>
<h1>ini adalah halaman login</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
Mengakses
halaman web lain dalam 1 folder utama, tetapi berbeda subfolder.
1.Pastikan berada dalam folder “Lat_Link”
kemudian buatlah sbfolder pada folder trsb dngn nama “subfolder”
2. Buatlah file dengan nama
“apasaja.html” dan simpan pada folder yg tadi sbg halaman web berisi link teks
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link</h1>
<a href=”subfolder/apasaja.html”>halaman web di subfolder/apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link</h1>
<a href=”subfolder/apasaja.html”>halaman web di subfolder/apasaja.html</a>
</body>
</html>
3. Buat file apasaja.html dan simpan
pada folder “subfolder” sebagai file tujuan link.
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html sebagai tujuan link</h1>
<a href=”../apasaja.html”>kembali ke apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html sebagai tujuan link</h1>
<a href=”../apasaja.html”>kembali ke apasaja.html</a>
</body>
</html>
Mengakses
halaman web lain dalam lokasi yang lain
1. Pastikan berada pd folder
“Lat_Link” kemudian buatlah subfolder pd folder tersebut dengan nama
“subfolder”
2. Buat file dengan nama apasaja.html dan
simpan pada folder “Lat_Link” sebagai halaman web berisi link teks menuju file
C:\apasaja.html
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link menuju c:\apasaja.html</h1>
<a href=”c:\apasaja.html”>halaman web di c:\apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link menuju c:\apasaja.html</h1>
<a href=”c:\apasaja.html”>halaman web di c:\apasaja.html</a>
</body>
</html>
3 Selanjutnya buat file apasaja.html
di drive c:\
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
</body>
</html>
D. Link Bagian Halaman
untuk membuat link pada tiap bagian halaman web dengan menggunakan parameter sbb.
--
<a href=”#bagiandokumen”>bagian dokumen html ke-n</a>
standar kode # menunjukkan tujuan link masih dalam dokumen yg sama. Untuk membuat link tujuan dapat didefinisikan link tujuan dengan kode
--
<a name=”bagiandokumen”>
untuk membuat link pada tiap bagian halaman web dengan menggunakan parameter sbb.
--
<a href=”#bagiandokumen”>bagian dokumen html ke-n</a>
standar kode # menunjukkan tujuan link masih dalam dokumen yg sama. Untuk membuat link tujuan dapat didefinisikan link tujuan dengan kode
--
<a name=”bagiandokumen”>
E. Membuka Jendela Baru
untuk menampilkan halaman tujuan link baru tanpa harus menutup halaman web awal dengan membuka jendela baru, dapat menggunakan parameter target=”_blank”
untuk menampilkan halaman tujuan link baru tanpa harus menutup halaman web awal dengan membuka jendela baru, dapat menggunakan parameter target=”_blank”
Contoh :
Halaman awal link
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link untuk membuka jendela baru menuju apasaja.html</h1>
<a href=”apasaja.html” target= blank”>jendela baru apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link untuk membuka jendela baru menuju apasaja.html</h1>
<a href=”apasaja.html” target= blank”>jendela baru apasaja.html</a>
</body>
</html>
Halaman
tujuan link
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
F. Link
Tanpa Garis Bawah
menggunakan standar atribut HTML style=”text-decoration:none” pada elemen <a href=””>
menggunakan standar atribut HTML style=”text-decoration:none” pada elemen <a href=””>
Contoh :
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tanpa garis bawah</h1>
<a href=”apasaja.html” style=”text-decoration:none”>buka apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tanpa garis bawah</h1>
<a href=”apasaja.html” style=”text-decoration:none”>buka apasaja.html</a>
</body>
</html>
G. Link
dengan Gambar
langkah-langkahnya :
langkah-langkahnya :
1. Pastikan
berada pada folder “Lat_Link” yg telah dibuat sebelumnya
2. Ambilah
sebuah gambar dengan ekstensi .jpeg
3. Copy
file gambar tsb ke dalam folder “Lat_Link”
4. Ubah
nama file gambar tsb mnjd link.jpg
5. Buat
file apasaja.html dan file apasaja.html
Contoh :
Link
dengan Gambar
<html>
<head>
<title>hyperlink dengan gambar</title>
</head>
<body>
<h3>ini adalah link dengan gambar</h3>
<table width=”200” border=”1” cellspacing=”0” cellpadding=”0”>
<tr>
<td><a href=”apasaja.html”><img src=”link.jpg” width=”200” height=”150” border=”0”></a></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>hyperlink dengan gambar</title>
</head>
<body>
<h3>ini adalah link dengan gambar</h3>
<table width=”200” border=”1” cellspacing=”0” cellpadding=”0”>
<tr>
<td><a href=”apasaja.html”><img src=”link.jpg” width=”200” height=”150” border=”0”></a></td>
</tr>
</table>
</body>
</html>
Tujuan
gambar hyperlink
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tujuan gambar</h1>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tujuan gambar</h1>
</body>
</html>
H. Mapping
Gambar
bentuk-bentuk mapping gambar ada 3 macam, yaitu :
bentuk-bentuk mapping gambar ada 3 macam, yaitu :
1. Bentk
rectangle
memiliki bentuk persegi dengan tiap sudut ditentukan berdasarkan koordinatnya.
contoh penggunaannya :
---
<area shape=”rect” coords=”116,60,175,121” href=”apasaja.html”>
memiliki bentuk persegi dengan tiap sudut ditentukan berdasarkan koordinatnya.
contoh penggunaannya :
---
<area shape=”rect” coords=”116,60,175,121” href=”apasaja.html”>
2. Bentuk
circle
untuk membuat mapping gambar berupa bangun ruang lingkaran, ada 3 koordinat yg harus ditentukan yaitu coords=”x,y,radius”
contoh penggunaanya :
---
<area shape=”circle” coords=”48,49,39” href=”apasaja.html”>
untuk membuat mapping gambar berupa bangun ruang lingkaran, ada 3 koordinat yg harus ditentukan yaitu coords=”x,y,radius”
contoh penggunaanya :
---
<area shape=”circle” coords=”48,49,39” href=”apasaja.html”>
3. Bentuk
Poly
bentuk mapping poly tidak ditentukan jumlah titik koordinat yang dibuat
contoh penggunaannya :
---
<area shape=”poly” coords=”300, 35, 350, 73, 432, 98, 372, 39, 329, 18” href=”apasaja.html”>
bentuk mapping poly tidak ditentukan jumlah titik koordinat yang dibuat
contoh penggunaannya :
---
<area shape=”poly” coords=”300, 35, 350, 73, 432, 98, 372, 39, 329, 18” href=”apasaja.html”>
I. Link
dengan Objek Flash
dengan objek multimedia flash juga dapat membuat hyperlink. Contohnya dalam membuat link dengan teks flash menggunakan plugin <object>
contoh penggunaan link dengan teks flash :
dengan objek multimedia flash juga dapat membuat hyperlink. Contohnya dalam membuat link dengan teks flash menggunakan plugin <object>
contoh penggunaan link dengan teks flash :
<html>
<head>
<title>link dengan objek teks
flash</title>
</head>
<body>
<object
classid=”clsid:D27CDB6E-AE6D-11cf-98B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 width=”223”
height=”34”>
<param name=”movie” value=”text1.swf”>
<param name=”quality” value=”high”>
<param name=”base” value=”.f”>
<param name=”bgcolor” value=”#00FF66”>
<param name=”scale” value=”exactfit”>
<embed scr=”text1.swf” base=”.”
Quality=”high” pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?p1_Prod_Version=ShockwaveFlash type=”application/-shockwave-flash”
scale=”exactfit” width=”223” height=”34” bgcolor=”#00FF66”></embed>
</object>
</body>
</html>
contoh penggunaan link dengan tombol flash
:
<html>
<head>
<title>link dengan objek teks
flash</title>
</head>
<body>
<object
classid=”clsid:D27CDB6E-AE6D-11cf-98B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 width=”100”
height=”22”>
<param name=”movie” value=”button1.swf”>
<param name=”quality” value=”high”>
<param name=”base” value=”.”>
<embed scr=”button1.swf” base=”.”
Quality=”high” pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?p1_Prod_Version=ShockwaveFlash type=”application/-shockwave-flash”
width=”100” height=”22” bgcolor=”></embed>
</object>
</body>
</html>
TERIMAKASIH
Diposting oleh nblaaa di 22.07 Tidak
ada komentar:
Rabu, 06 September 2017
OBJEK MULTIMEDIA
A. Objek
Multimedia
Multimedia pada halaman web memiliki
pengertian penggunaan external file yang berisi data dengan format tertentu
pada web. Objek multimedia pada web dapat berupa audio, video, musik, gambar,
animasi, maupun file lainnya yang bertujuan untuk membuat web menjadi lebih
atraktif, menarik dan mudah digunakan. Terdapat beberapa fungsi dalam
pemrograman web yang harus didukung web browser, yaitu sbg berikut.
2. Applet
merupakan program aplikasi yang dijalankan pada browser untuk mengeksekusi
objek multimedia yang disertakan pada halaman web agar berfungsi dan bekerja
semestinya. Pada generasi web browser terbaru tag <applet> sudah tidak
digunakan lagi tetapi diganti dengan penggunaan tag <object>.
Contoh penggunaan tag <object> :
<object code=”namaclassapplet.class”>
<param name=”namaparam”
value=”nilaiparam”>
</object>
3. Plug
in, yaitu program tambahan pada web browser untuk menjalankan berbagai file
multimedia yang disertakan pada halaman web. Plug in pada setiap browser tidak
sama sehingga hasil tampilan, kecepatan, dan model halaman web yang dihasilkan
tiap web browser juga berbeda.
4. ActiveX
merupakan komponen standar yang disediakan sistem operasi windows untuk
mendukung beberapa fungsi dalam web browser khususnya internrt explorer seperti
teknik menampilkan kalender. Namun, tidak semua kode program activeX yg ditulis
dalam HTML file akan dapat dieksekusi oleh web browser.
B. Objek
Gambar
Gambar merupakan salah satu jenis objek
multimedia yang sering dijadikan komponen pembentuk dalam halaman web.
Fungsinya untuk mempercantik tampilan dan membuat halaman web lebih menarik.
1) JPG/JPEG
JPG atau Joint Photographic Group dan JPEG
(Joint Photographic Expert Group) merupakan salah satu jenis file gambar dengan
resolusi tinggi pada mode warna RGB, CMYK, dan garyscale. Kelemahan file gambar
jenis ini adalah rincian komponen gambar menjadi kabur (blur) karena proses
kompresi file yang terlalu banyak.
2) GIF
GIF atau Graphic Interchange Format hanya
mampu menyimpan gambar dalam format 8bit. Format GIF biasanya digunakan untuk
menampilkan animasi 2 dimensi hasil kompilasi flash. Kelemahan GIF yaitu hanya
mampu menampilkan 256 jenis warna sehingga kurang bagus untuk dijadikan
ekstensi gambar hasil fotografi kamera dan juga gambar yang dihasilkan memiliki
ketajaman yang rendah.
3) PNG
Portable Network Graphic merupakan salah
satu bentuk file gambar yang menggabungkan teknik JPG dan GIF yg mampu
menyimpan file dengan bit depth hingga 24bit. Kelemahan file gambar berekstensi
PNG adalah kapasitas file yang cukup besar dibanding dengan jenis JPG.
4) BMP
Atau Bitmap Image adalah jenis format file
yang mamapu menyimpan gambar dengan tingkat kualitas 1 hingga 24bit (warna RGB,
grayscale, indexed color, dan bitmap). Kelemahan file jenis ini adalah tidak
dapat menyimpan dalam mode alpha channel.
Untuk dapat menampilkan sebuah gambar
dengan ekstensi .jpg tau .jpeg, .png atau .gif dapat menggunakan fungsi tag
<img src=”lokasi_file”>.
Contoh penggunaan tag tersebut :
<!-- file apasaja.html-->
<html>
<head>
<title>menampilkan gambar dengan tag
img</title>
</head>
<body>
<img src=”motherboard.jpg” width=”400”
height=”300”>
</body>
</html>
1) Scr=”motherboard.jpg”,
yaitu merujuk lokasi file gambar motherboard.jpg, dengan file yang berada satu
folder dengan file html.
2) Width=”400”,
mengatur dimensi lebar gambar sebesar 400 pixel
3) Height=”300”,
yaitu mengatur dimensi tinggi gambar sebesar 300 pixel
Contah menampilkan gambar dengan tag
<object>
<!—file apasaja.html -->
<html>
<head>
<title>menampilkan gambar dengan tag
object</title>
</head>
<body>
<object data=”motherboard.jpg”
type=”image/jpg” width=”600” height=”400”>
</object>
</body>
<html>
1) Data=”motherboard.jpg”,
yaitu menunjukkan lokasi file gambar yang dipanggil sebagai objek multimedia
pada halaman web.
2) Type=”image/jpg”,
perintah type menunjukkan jenis objek yang dipanggil dalam halaman web.
3) Width=”600”
untuk menentukan dimensi lebar objek sebesar 600 pixel.
4) Height=”400”
yaitu menentukan dimensi tinggi objek sebesar 400 pixel.
C. Objek
Suara
Penambahan objek suara pada halaman web
dapat dilakukan dengan menambahkan tag <object> dan menuliskan lokasi
file dari audio yg akan dimainkan. Pada dasarnya ada 3 kategori format file
audio, yaitu :
1) File
audio tanpa kompresi, yaitu file dengan ekstensi AIFF, AU, WAV, dan raw
header-less PCM.
2) File
audio dengan kompresi lossy, seperti vorbis, ACC, ATRAC, MP3, mousepack dan
lossy windows media audio (WMA)
3) File
audio dengan kompresi lossless, seperti MPEG-4 SLS, MPEG-4 ALS, MPEG-4 DST,
TTA, windows media audio lossless (WMA lossless), FLAC, dan WavPack (file name
extension WV).
File audio dalam halaman web memiliki
beberapa tipe, antara lain sbg berikut.
1) MPEG
(Mp3)
Moving Picture Experts Group merupakan format file audio dengan ekstensi .mp3 yang bekerja pada layer tiga dengan kompresi audio mencapai kualitas setara CD stereo, yaitu 16-bit
Moving Picture Experts Group merupakan format file audio dengan ekstensi .mp3 yang bekerja pada layer tiga dengan kompresi audio mencapai kualitas setara CD stereo, yaitu 16-bit
2) WAV
Waveform Audio Format adalah standar file yang tidak melakukan kompresi terhadap isi audionya.
Waveform Audio Format adalah standar file yang tidak melakukan kompresi terhadap isi audionya.
3) AAC
Advanced Audio Coding merupakan file audio dengan format berbasis MPEG2 dan MPEG4 sebagai pengembangan file mp3.
Advanced Audio Coding merupakan file audio dengan format berbasis MPEG2 dan MPEG4 sebagai pengembangan file mp3.
4) AIFF
Audio Interchange File Format adalah format standar audio tanpa kompresi untuk sistem operasi macintosh.
Audio Interchange File Format adalah format standar audio tanpa kompresi untuk sistem operasi macintosh.
5) Audio
CD
format standar Audio CD memiliki ekstensi file .cda dan merupakan mode audio yang dapat diputar secara langsung dari CD-drive komputer tetapi ketika disalin kedalam hardisk, file audio CD tidak dpt dijalankan.
format standar Audio CD memiliki ekstensi file .cda dan merupakan mode audio yang dapat diputar secara langsung dari CD-drive komputer tetapi ketika disalin kedalam hardisk, file audio CD tidak dpt dijalankan.
6) MIDI
Music Instrument Digital Interface merupakan sebuah standar format audio berbagai software dan hardware yg berkembang saat ini. File standar MIDI biasanya digunakan untuk menyimpan hasil intruksi perangkat musik.
Music Instrument Digital Interface merupakan sebuah standar format audio berbagai software dan hardware yg berkembang saat ini. File standar MIDI biasanya digunakan untuk menyimpan hasil intruksi perangkat musik.
7) WMA
Windows Media Audio adalah salah satu jenis format audio yang dikembangkan oleh microsoft
Windows Media Audio adalah salah satu jenis format audio yang dikembangkan oleh microsoft
8) OGG
merupakan salah satu jenis format file audio sekaligus video dengan lisensi bebas atau oper source
merupakan salah satu jenis format file audio sekaligus video dengan lisensi bebas atau oper source
Ada beberapa syarat yang harus dipenuhi
untuk menjalankan audio file dengan script pemrograman html, yaitu sbg berikut.
Web
browser yang digunakan harus versi terbaru, dengan plug in dan extension sudah
ter-update
Pada
beberapa kondisi, diperlukan kondisi internet untuk menjalankan program
tersebut.
Sediakan
file audio dengan beberapa format tertentu
Buatlah
folder yang menampung file hasil pemrograman tersebut, kemudian pindahkan file
audio tersebut kedalam satu folder dengan file HTML.
Terdapat beberapa teknik memasukkan file
audio kedalam halaman web menggunakan pemrograman HTML, yaitu sbg berikut.
1) Menggunakan
Yahoo Media Player
contoh memainkan musik dengan yahoo media player :
<!--file apasaja.html>
<html>
<head>
<title>musik dengan yahoo media player/title>
</head>
<body>
<!—memanggil yahoo media player -->
<a href=”1.mp3”>mainkan musik</a>
<script type=”text/javascript” src=http://mediaplayer.yahoo.com/js>
</script>
<!—akhir script-->
</body>
</html>
contoh memainkan musik dengan yahoo media player :
<!--file apasaja.html>
<html>
<head>
<title>musik dengan yahoo media player/title>
</head>
<body>
<!—memanggil yahoo media player -->
<a href=”1.mp3”>mainkan musik</a>
<script type=”text/javascript” src=http://mediaplayer.yahoo.com/js>
</script>
<!—akhir script-->
</body>
</html>
2) Menggunakan
plug in elemen <object>
Langkah yg harus dilakukan sbg berikut.
Persiapkan
file audio yang akan disisipkan pada halaman web
Salin
file tersebut kedalam folder yg sma dengan file HTML yang akan dibuat nantinya
Ubah
nama file tersebut menjadi 1.mp3 untuk memudahkan proses pemanggilannya
Selanjutnya,
buat file HTML dengan script seperti contoh
Contoh memutan file audio dengan elemen
object
<!—apasaja.html-->
<html>
<head>
<title>memutar lagu</title>
</head>
<body>
<object data=”1.mp3”>
</object>
</body>
</html>
3) Menggunakan
elemen <audio>
menggunakan tag <audio> dan menambahkan kode <!DOCTYPE HTML> pada awal program html
contohnya :
<!—fileapasaja.html-->
<! DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan audio plugin</title>
</head>
<body>
<!—memanggil elemen <audio>-->
<audio controls=”controls” height=”70px” width=”100px”>
<source src=”1.mp3” type=”audio/mpeg”>
</audio>
<!—akhir elemen <audio>-->
</body>
</html>
menggunakan tag <audio> dan menambahkan kode <!DOCTYPE HTML> pada awal program html
contohnya :
<!—fileapasaja.html-->
<! DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan audio plugin</title>
</head>
<body>
<!—memanggil elemen <audio>-->
<audio controls=”controls” height=”70px” width=”100px”>
<source src=”1.mp3” type=”audio/mpeg”>
</audio>
<!—akhir elemen <audio>-->
</body>
</html>
4) Menggunakan
elemen <embed>
menggunakan tag <embed>
contohnya :
<!-- file apasaja.html>
contohnya :
<!-- file apasaja.html>
<html>
<head>
<title>Hidden object</object>
</head>
<object classid=”1.mp3”
codetype=”application/java”>
<param name=”src” value=”1.mp3”>
<embed src=”1.mp3” hidden=”true”
loop=”true”></embed>
</object>
</body>
</body>
</html>
Src=”1.mp3”
digunakan untuk merujuk lokasi file audio yang dipanggil oleh halaman web
ketika diakses oleh web browser.
Hidden=”true”
digunakan untuk menyembunyikan active object yang sedang berjalan sehingga
tampak pada halaman web ketika diakses.
Loop=”true”
atribut loop jika bernilai true menyebabkan file audio akan diputar
berulang-ulang selama halaman web diakses.
5) Inline
Sound
menggunakan tag <bgsound>
contohnya
<!—file apasaja.html>
<!DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan bgsound</title>
</head>
<body>
<!—memanggil elemen <bgsound>-->
<bgsound src=”1.mp3” loop=”1”>
<!—akhir elemen <bgsound>-->
</body>
</html>
menggunakan tag <bgsound>
contohnya
<!—file apasaja.html>
<!DOCTYPE HTML>
<html>
<head>
<title>memainkan musik dengan bgsound</title>
</head>
<body>
<!—memanggil elemen <bgsound>-->
<bgsound src=”1.mp3” loop=”1”>
<!—akhir elemen <bgsound>-->
</body>
</html>
6) Hyperlink
Sound
menggunakan tag <a href=”namafile”>
contonya :
<!—file apasaja.html>
<html>
<head>
<title>hyperlink file audio</title>
</head>
<body>
<a href=”1.mp3”>
putar musik
</a>
</body>
</html>
menggunakan tag <a href=”namafile”>
contonya :
<!—file apasaja.html>
<html>
<head>
<title>hyperlink file audio</title>
</head>
<body>
<a href=”1.mp3”>
putar musik
</a>
</body>
</html>
D. Objek
Video
Objek multimedia berupa video merupakan
perpaduan antara gambar, gerak, dan suara yang tersusun dalam frame-frame yang
membentuk pla tertentu secara tepat. Terdapat beberapa jenis format standar
video yang dapat disisipkan pada halaman web, yaitu sbg berikut.
1) MPEG
Moving Picture Expert Group adalah format file audio dan video yang saat ini menjadi standar kompresi file dengan kualitas baik
Moving Picture Expert Group adalah format file audio dan video yang saat ini menjadi standar kompresi file dengan kualitas baik
2) AVI
Audio Video Interleaved merupakan format audio video buatan microsoft dengan kualitas dan ketajaman gambar dan suara lebih baik dari standar audio video ASF
Audio Video Interleaved merupakan format audio video buatan microsoft dengan kualitas dan ketajaman gambar dan suara lebih baik dari standar audio video ASF
3) MWV
merupakan salah satu standar audio video yang dikeluarkan microsoft untuk komputer berbasis windows
merupakan salah satu standar audio video yang dikeluarkan microsoft untuk komputer berbasis windows
4) MP4
merupakan generasi baru dari MP3 dengan dukungan audio dan video yang lebih baik
merupakan generasi baru dari MP3 dengan dukungan audio dan video yang lebih baik
5) Real
Video
tipe file ini sering digunakan sebagai standar video streaming seperti tv online dsb.
tipe file ini sering digunakan sebagai standar video streaming seperti tv online dsb.
6) QuickTime
merupakan standar format audio video keluaran MacOS untuk Apple
merupakan standar format audio video keluaran MacOS untuk Apple
7) 3GP
merupakan salah satu generasi terbaru format file audio video ringan, kecil ukurannya, serta didukung berbagai peranti keras, khususnya telepon genggam
merupakan salah satu generasi terbaru format file audio video ringan, kecil ukurannya, serta didukung berbagai peranti keras, khususnya telepon genggam
8) Flash
merupakan standar format audio video keluaran macromedia
merupakan standar format audio video keluaran macromedia
Terdapat beberapa teknik yang dapat
digunakan untuk menjalankan video pada halaman web, seperti berikut.
1) Menggunakan
Elemen <img>
contohnya :
<!-- file apasaja.html-->
<html>
<head>
<title>manjalankan video dengan tag img</title>
</head>
<body>
<img dynsrc=”1.mp4”>
</body>
</html>
contohnya :
<!-- file apasaja.html-->
<html>
<head>
<title>manjalankan video dengan tag img</title>
</head>
<body>
<img dynsrc=”1.mp4”>
</body>
</html>
2) Menggunakan
Elemen <embed>
contoh scriptnya hampir sama dengan yg menggunakan tag img
contoh scriptnya hampir sama dengan yg menggunakan tag img
3) Menggunakan
Elemen <video>
contohnya :
<!-- file apasaja.html-->
<!DOCTYPE HTML>
<html>
<head>
<title>menjalankan video dengan tag video</title>
</head>
<body>
<video width=”420” controls=”controls”>
<source src=”1.mp4” type=”video/mp4”>
<source src=”1.mkv” type=”video/mkv”>
<source src=”1.3gp” type=”video/3gp”>
<source src=”1.flv” type=”video/mp4”>
<!-- jika ketiga file tidak bisa dijalankan, maka muncul pesan kegagalan seperti dibawah -->
browser anda belum mendukung HTML5
</video>
</body>
</html>
contohnya :
<!-- file apasaja.html-->
<!DOCTYPE HTML>
<html>
<head>
<title>menjalankan video dengan tag video</title>
</head>
<body>
<video width=”420” controls=”controls”>
<source src=”1.mp4” type=”video/mp4”>
<source src=”1.mkv” type=”video/mkv”>
<source src=”1.3gp” type=”video/3gp”>
<source src=”1.flv” type=”video/mp4”>
<!-- jika ketiga file tidak bisa dijalankan, maka muncul pesan kegagalan seperti dibawah -->
browser anda belum mendukung HTML5
</video>
</body>
</html>
4) Menggunakan
hyperlink
contohnya :
<!-- file apasaja-->
<html>
<head>
<title>menjalankan video dengan hyperlink</title>
</head>
<body>
<a href=”1.mp4”>
mainkan video
</a>
</body>
</html>
contohnya :
<!-- file apasaja-->
<html>
<head>
<title>menjalankan video dengan hyperlink</title>
</head>
<body>
<a href=”1.mp4”>
mainkan video
</a>
</body>
</html>
5) Menggunakan
elemen <object>
contohnya :
<object data=”1.mp4” type=”video/mp4”>
<embed erc=”1.mp4” width=”400” height=”320”></embed>
</object>
contohnya :
<object data=”1.mp4” type=”video/mp4”>
<embed erc=”1.mp4” width=”400” height=”320”></embed>
</object>
6) Menjalankan
aplikasi flash
contoh script memutar animasi flash .swf
<!-- file apasaja.html>
<html>
<head>
<title>memutar animasi swf flash</title>
</head>
<body>
<object classid=”clsid: D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6, 0, 29, 0 widht=”170” height=”140”>
<param name=”movie” value=”kabel.swf”>
<param name=”quality” value=”high”>
<embed src=”kabel.swf” quality=”high” pluginspage=http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”170” height=”140”>
</embed></object>
</body>
</html>
contoh script memutar animasi flash .swf
<!-- file apasaja.html>
<html>
<head>
<title>memutar animasi swf flash</title>
</head>
<body>
<object classid=”clsid: D27CDB6E-AE6D-11cf-96B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6, 0, 29, 0 widht=”170” height=”140”>
<param name=”movie” value=”kabel.swf”>
<param name=”quality” value=”high”>
<embed src=”kabel.swf” quality=”high” pluginspage=http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”170” height=”140”>
</embed></object>
</body>
</html>
Struktur Tabel HTML
A. Elemen
Dasar Tabel
Tabel adalah salah satu metode untuk menyajikan informasi dlm halaman web. Tabel terdiri atas baris dan kolom. Baris merupakan bagian mendatar dan kolom adalah bagian vertikal.
elemen-elemen yang ada pada tabel sbb.
Tabel adalah salah satu metode untuk menyajikan informasi dlm halaman web. Tabel terdiri atas baris dan kolom. Baris merupakan bagian mendatar dan kolom adalah bagian vertikal.
elemen-elemen yang ada pada tabel sbb.
Nama
|
Fungsi
|
<table>....</table>
|
Untuk mendeskripsikan tabel dalam halaman
web
|
<tr>....</tr>
|
Untuk mendeskripsikan baris dalam tabel
|
<td>....</td>
|
Untuk mendeskripsikan kolom dalam tabel
|
Untuk mengatur posisi objek dalam cell
sebuah tabel, dapat digunakan beberapa atribut dalam tag
<tr>....</tf> sbg berikut.
Align,
digunakan untuk mengatur posisi horizontal sebuah objek dalam cell tabel. Ada 3
jenis align, yaitu: left, center, dan right. Left untuk posisi kiri cell,
center untuk posisi tengah cell, dan right untuk posisi kanan cell.
Valign,
digunakan untuk mengatur posisi peletakan sebuah objek pada cell secara
vertikal. Ada pilihan dalam menentukan atribut valign, yaitu top, middle,
dan bottom. Top digunakan untuk meletakkan sebuah objek pada posisi paling atas
cell, middle untuk meletakkan objek pada tengah cell, dan bottom untuk
meletakkan objek pada posisi paling bawah cell.
Contoh :
<!—file apasaja.html-->
<html>
<head>
<title>struktur tabel</title>
</head>
<body>
<center><h1>Data Siswa TKJ</h1></center>
<table width=”50%” border=”1” cellspacing=”0” cellpadding=”0” align=”center”>
<tr>
<td align=”center”><strong>NIS</strong></td>
<html>
<head>
<title>struktur tabel</title>
</head>
<body>
<center><h1>Data Siswa TKJ</h1></center>
<table width=”50%” border=”1” cellspacing=”0” cellpadding=”0” align=”center”>
<tr>
<td align=”center”><strong>NIS</strong></td>
<td align=”center”><strong>NAMA</strong></td>
<td align=”center”><strong>ALAMAT</strong></td>
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align="center">KURNIA</td>
<td align=”center”>Kediri</td>
<td align=”center”><strong>ALAMAT</strong></td>
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align="center">KURNIA</td>
<td align=”center”>Kediri</td>
</tr>
</table>
</body>
</table>
</body>
B. Atribut Border
Untuk mengatur tebal dan lebar garis pada
tabel, harus mengatur nilai atribut border table ketika mendeklarasikan tabel.
Semakin besar nilai border, semakin tabal pula garis yg ditampilkan. Jika nilai
atribut border semakin besar, lebar garis tabel juga semakin besar.
Contoh men-setting border tabel dalam
halaman web:
<!—file apasaja.html-->
<html>
<head>
<title>mengatur border</title>
</head>
<body>
tabel border berukuran 0
<table width=”10%” border=”0” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
tabel dengan border berukuran 1
<table width=”10%” border=”1” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
tabel dengan border berukuran 12
<table width=”10%” border=”12” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>mengatur border</title>
</head>
<body>
tabel border berukuran 0
<table width=”10%” border=”0” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
tabel dengan border berukuran 1
<table width=”10%” border=”1” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
tabel dengan border berukuran 12
<table width=”10%” border=”12” cellspacing=”0”>
<tr></tr>
<td align=”center”>45</td>
<td align=”center”>46</td>
</tr>
<tr>
<td align=”center”>50</td>
<td align=”center”>51</td>
</tr>
</table>
</body>
</html>
C. Elemen
Header
Header dalam tabel berguna untuk memberikan
informasi data dalam kolom sebuah tabel. Untuk mendeklarasikan header pada
tabel, perlu menambahkan elemen tag </th> pada bagian awal script dan
</th> pada akhir script.
Pada elemen header tabel, dapat menerapkan
atribut scope dan headers untuk menghubungkan kolom atau baris dalam cell.
Atribut scope digunakan untuk menghibungkan data kolom dan baris. Atribut scope
dapat diisi dengan nilai col, colgroup, row, dan rowgroup.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>membuat header tabel dengan scope</title>
</head>
<body>
<table width=”50%” border=”1” cellspacing=”0”>
<tr>
<th> </th>
<th scope=”col”>Senin</th></!--Scope colom-->
<th scope=”col”>Selasa</th></!--Scope colom-->
<th scope=”col”>Rabu</th></!--Scope colom-->
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>membuat header tabel dengan scope</title>
</head>
<body>
<table width=”50%” border=”1” cellspacing=”0”>
<tr>
<th> </th>
<th scope=”col”>Senin</th></!--Scope colom-->
<th scope=”col”>Selasa</th></!--Scope colom-->
<th scope=”col”>Rabu</th></!--Scope colom-->
</tr>
<tr>
<th scope=”row”<X-TKJ</th><!—Scope row-->
<td>sistem Operasi</td>
<td>LAN</td>
<td>Matematika</td>
</tr>
<tr>
<th scope=”row”<XI-TKJ</th><!—Scope row-->
<td>Membangun LAN</td>
<td>Pemrograman Dasar</td>
<td>Web Programming</td>
</tr>
<tr>
<th scope=”row”<XII-TKJ</th><!—Scope row-->
<td>Wide Area Networking</td>
<td>Pemrograman Web Dinamis</td>
<td>IPA</td>
<tr>
</table>
</body>
</html>
<tr>
<th scope=”row”<X-TKJ</th><!—Scope row-->
<td>sistem Operasi</td>
<td>LAN</td>
<td>Matematika</td>
</tr>
<tr>
<th scope=”row”<XI-TKJ</th><!—Scope row-->
<td>Membangun LAN</td>
<td>Pemrograman Dasar</td>
<td>Web Programming</td>
</tr>
<tr>
<th scope=”row”<XII-TKJ</th><!—Scope row-->
<td>Wide Area Networking</td>
<td>Pemrograman Web Dinamis</td>
<td>IPA</td>
<tr>
</table>
</body>
</html>
D. Elemen
Caption
Untuk memberikan sebuah judul pada tabel,
dapat menggunakan elemen caption dengan tag <caption>...</caption>.
Penulisan tag caption diletakkan setelah pendeklarasian tag awal tabel
<table>. Posisi default caption, yaitu berada diatas tabel.
Contoh membuat caption tabel :
<!—file apasaja.html-->
<html>
<head>
<title>membuat captin tabel</title>
</head>
<body>
<table width=”40%” border=”1” cellspacing=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>membuat captin tabel</title>
</head>
<body>
<table width=”40%” border=”1” cellspacing=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
</tr>
</table>
</body>
</html>
E. Atribut
Cellpadding dan Cellspacing
Atribut cellpadding berfungsi untuk
mengatur jarak dari border sisi dalam tabel dengan isi teks tabel dalam cell.
Adapun atribut cellspacing berfungsi untuk mengatur jarak antara border bagian
dalam dan luar. Semakin tinggi nilai atribut cellspacing, semakin lebar pula
jarak antara border dalam dengan luar.
Contoh mengatur cellpadding dan cellspacing
tabel :
<!—file apasaja.html-->
<html>
<head>
<title>mengatur cellpadding dan cellspacing tabel</title>
</head>
<body>
<table width=”30%” border=”1” cellspacing=”2” cellpadding=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>Nabila Mutiara Rachman</td>
</tr>
</table>
</body>
</html>
<!—file apasaja.html-->
<html>
<head>
<title>mengatur cellpadding dan cellspacing tabel</title>
</head>
<body>
<table width=”30%” border=”1” cellspacing=”2” cellpadding=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
<tr>
<th>NIS</th><! --Header tabel-->
<th>NAMA</th><! --Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>Nabila Mutiara Rachman</td>
</tr>
</table>
</body>
</html>
F. Menggabungkan
Cell
Ada 2 atribut yg dapat digunakan untuk
menggabungkan 2 buah cell menjadi 1 cell, yaitu :
a) Colspan
Digunakan untuk menyatukan satu atau lebih
cell berdasarkan kolom.
b) Rowspan
Digunakan untuk menyatukan satu atau lebih
cell berdasarkan baris.
Contoh menggabungkan dua cell menjadi satu
:
<!—file apasaja.html-->
<html>
<head>
<title>mengatur lebar cell tabel</title>
</head>
<body>
<table width=”37%” border=”1” cellspacing=”0” cellpadding=”0”>
<tr>
<html>
<head>
<title>mengatur lebar cell tabel</title>
</head>
<body>
<table width=”37%” border=”1” cellspacing=”0” cellpadding=”0”>
<tr>
<td
width=”22%” rowspan=”2”><div align=”center”>NIS</div></td>
<td
width=”31%” rowspan=”2”><div align=”center”>nama</div></td>
<td
colspan=”3”><div align=”center”>Nilai Pelajaran</div></td>
</tr>
<tr>
<td
width=”15%”><div align=”center”>IPA</div></td>
<td
width=”15%”><div align=”center”>IPS</div></td>
<td
width=”17%”><div align=”center”>AGAMA</div></td>
</tr>
<tr>
<td>1234567890</td>
<td>Nabila Mutiara Rachman</td>
<td>80</td>
<td>88</td>
<td>78</td>
</tr>
</table>
</body>
</html>
</body>
</html>
G. Mengatur
Background
Background secara harfiah berarti latar
belakang. Ada 2 jenis background yg dpt diterapkan pada tabel, yaitu berupa
gambar dan warna. Langkah-langkah menerapkan background gambar pada tabel
adalah sbg berikut.
a. Buatlah
folder BG pada direktori C (C:\BG)
b. Persiapkan
gambar yg akan dijadikan background sebuah tabel, baik dalam format .jpg,
.jpeg, atau .bmp. letakkan file gambar tersebut kedalam folder BG dalam 1
folder dengan file html yg akan dibuat
c. Selanjutnya,
buat file “gambar.html” dan tulis kode seperti contoh berikut
Contoh mengatur background gambar pada
tabel :
<!—file apasaja.html-->
<html>
<head>
<title>background gambar pada tabel</title>
</head>
<body>
<html>
<head>
<title>background gambar pada tabel</title>
</head>
<body>
<table align=”center” width=”30%”
border=”1” background=”foto.jpg”>
<tr>
<th>NIS</th><!--Header tabel-->
<th>NAMA</th><!--Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
</tr>
</table>
</body>
</html>
</body>
</html>
Contoh menagtur background warna pada tabel
:
<!—file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”30%”
border=”1” bgcolor=”#FFFF33”>
<tr>
<th>NIS</th><!--Header tabel-->
<th>NAMA</th><!--Header tabel-->
</tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
</tr>
</table>
</body>
</html>
</body>
</html>
H. Atribut
Align
Ada 3 nilai yang dapat diterapkan pada
atribut align, yaitu left, center, dan right. Left digunakan untuk meletakkan
isi pada sisi sebelah kiri cell, center digunakan untuk meletakkan isi pada
posisi tengah, dan right untuk meletakkan isi pada sisi sebelah kanan
Contoh menentukan posisi isi cell dengan
align :
<!--file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”30%” border=”1” bgcolor=”#FFFF33”>
<tr>
<!--file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”30%” border=”1” bgcolor=”#FFFF33”>
<tr>
<th align=”left”>NIS</th><!--header tabel berada pada posisi
kiri-->
<th align=”right”>NIS</th><!--header tabel berada pada posisi
kanan-->
</tr>
<tr>
<tr>
<td align=”center”>1234567890</th><!--isi sel pada posisi
tengah-->
<td align=”center”>Nabila Mutiara R</td>
</tr>
</table>
</body>
</html>
</table>
</body>
</html>
I. Meletakkan
Tabel di Dalam Tabel
Dengan menggunakan tabel dapat menentukan
struktur utama sebuah web. Teknik sederhana yg dapat digunakan untuk melakukan
hal tersebut adalah meletakkan tabel di tabel utama.
Contoh menentukan isi cell dengan align :
<!--file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”50%” border=”1”>
<tr>
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”50%” border=”1”>
<tr>
<td>
<tablealign=”center”width=”80%”border=”1”bgcolor=”#FFFF33”>
<caption>Tabel terletak pada sel
1</caption>
<tr>
<th>NIS</th>
<th>NAMA</th>
</tr>
<tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
</tr>
</table>
</td>
<td>
<tablealign=”center”width=”80%”border=”1”bgcolor=”#FFFF33”>
<caption>Tabel terletak pada sel
2</caption>
<tr>
<th>NIS</th>
<th>NAMA</th>
</tr>
<tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</td>
</tr>
</table>
</body>
</html>
J. Atribut
Frame
Atribut frame pada tabel digunakan untuk
mengatur jenis border luar pada tabel. Ada beberapa nilai yg digunakan pada
atribut frame, antara lain :
1. Above
2. Bellow
3. Border
4. Box
5. Hsides
6. Lhs
7. Rhs
8. Void
9. Vsides
contoh menggunakan atribut frame :
<table frame=”box”>
<!--isi tabel-->
</table>
<html>
<head>
<title>Tabel dengan Atribut Frame</title>
</head>
<body>
<table frame=”box”>
<tr>
<title>Tabel dengan Atribut Frame</title>
</head>
<body>
<table frame=”box”>
<tr>
<td align=”center><strong>NIS</strong></td>
<td align=”center><strong>NAMA</strong></td>
<td align=”center><strong>ALAMAT</strong></td>
</tr>
<tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
<td align=”center”>Kediri</td>
</tr>
</table>
</body>
</html>
</table>
</body>
</html>
<td align=”center><strong>NIS</strong></td>
<td align=”center><strong>NAMA</strong></td>
<td align=”center><strong>ALAMAT</strong></td>
</tr>
<tr>
<tr>
<td align=”center”>1234567890</td>
<td align=”center”>KURNIA</td>
<td align=”center”>Kediri</td>
</tr>
</table>
</body>
</html>
</table>
</body>
</html>
Komentar
Posting Komentar