MENAMBAHKAN KOMPONEN DI HALAMAN WEB

Untuk menjadikan web lebih aktaktif, tak jarang halaman sering ditambahkan gambar, musik,
halaman lain serta video. Dengan ditambahkan elemen tersebut, otomatis dapat menarik
beberapa penunjung. Ada beberapa cara, antara lain :

1. Mengambil konten online (eksternal resource atau hotlink )

Syarat : konten yang ditampilkan harus tetap online, harus memperhatikan hak cipta
Keunggulan : file halaman web yang dihasilkan semakin ringan
Kekurangan : file harus tetap online (bergantung dari web sumber)
Contoh :
<img src=”www.komputerhamam/gpu_n_cpu.jpg”>
<a href=”www.google.com”>ke halaman selanjutnya</a>

2. Langsung sebut nama file (internal resource)

Syarat : file web html harus 1 tempat/domain/file dengan file komponennya
Keunggulan : kemudahan dalam koding
Kekurangan : manajemen file semakin rumit
Contoh :
<img src=”sapi.jpg”>
<a href=”halaman2.html”>ke halaman selanjutnya</a>

3. Sebut tempat lalu nama filenya (disebur juga relative folder)

Syarat : file web dan konten (gambar, video, suara, halaman web lain) tidak dalam satu
folder
Keunggulan : kemudahan dalam manajemen file
Kekurangan : koding sedikit lebih rumit
Contoh :
<img src=”gambar/sapi.jpg”>
<a href=”/informasi/halaman2.html”>ke halaman selanjutnya</a>

Jenis-jenis konten

A. GAMBAR
Sintag :
<img src=”nama_file_gambar.ekstensi”>
Contoh
<img src=”mudah.jpg”>
Atau
Sintag :
<img src=”nama_folder/nama_file_gambar.ekstensi”>
1
 Contoh
<img src=”latihan/mudah.jpg”>
Atribut yang dimiliki img
1. Src
Fungsi Untuk menampilkan gambar
2. Alt
Fungsi untuk menampilkan tulisan jika gambar rusak/salah
Sintag :
<img src=”cuci.jpg” alt=”maaf gambar rusak”>
3. Title
Fungsi Menampilkan judul ketika kursor diletakkan di gambar
sintag
<img src=”cuci.jpg” title=”gambar apik”>

4. Width
Fungsi mengatur lebar
Sintag
<img src=”cuci.jpg” width=”200px”>

5. Height
Fungsi mengatur lebar
Sintag
<img src=”cuci.jpg” height=”50%”>
B. HALAMAN LAIN (HYPERLINK/WEB LINK)
Sintag
<a href=”halaman2.html”>ke halaman selanjutnya</a>
Atau
<a href=”www.google.co.id”>Tanya mbah</a>
Atau
< a href=”../informasi/halaman2.html”>></a>
Fungsi lainnya adalah untuk menampilkan halaman tertentu dari sebuah halaman web
Contoh sintag
<a href=”#bagian1”>ke bagian 1</a>
Jangan lupa ditandai id untuk identitas yang akan ditampilkan
Contoh :
<h2 id=”bagian1”>bagian 1 pengertian</h2>
Adapun atribut lain yang bias digunakan adalah target
Contoh :

2
 <a href=”halama2.html” target =_self>ke bagian 1</a>
Fungsi menampilkan halaman ke dua di tab sekarang
<a href=”halama2.html” target =_blank>ke bagian 1</a>
Fungsi menampilkan halaman ke dua di tab yang baru

3
C. AUDIO
Mulai dari HTML 5, browser sudah mendukung audio dan video tanpa harus
install aplikasi bawaan lagi. HTML5 mendefinisikan elemen baru yang menentukan cara
standar untuk menanamkan file audio pada halaman web: elemen . Untuk memasukkan
suara pada html bisa menggunakan tag .
<audio></audio>
Format suara yang telah didukung hingga saat ini adalah MP3, Ogg dan WAP.
File-file Audio yang didukung HTML5 adalah MP3,WAV, dan OGG. Tidak semua tipe
file audio tersebut didukung oleh browser.
MIME untuk FORMAT AUDIO
MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanismeuntuk
mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain
sebagainya agar browser tidak salah menterjemahkan konten yg diterima. Tidak hanya
pada web, email juga menggunakan MIME. Berikut adalah tipe mime untuk format
audio.

Sintagnya
<audio controls>
<source src="namafile.ekstensi" type="MIME-type">
</audio>
Contoh
<audio controls>
<source src="house.mp3" type="audio/mp3">
</audio>
Atribut-atribut
Atribut yang digunakan pada tag <audio> </audio> dapat juga menggunakan atribut
autoplay, loop dan controls. Detail atribut pada audio adalah sebagai berikut :

Atribut sintag Keterangan

autoplay <audio autoplay="autoplay"> memulai audio secara otomatis
pada web terbuka
controls <audio controls="controls"> menampilkan kontrol seperti
volume, audio, dan juga tombol
untuk memulai/pause
loop <audio loop="loop"> mengulang audio kembali
setelah pemutaran awal selesai
4
 Muted <audio muted="muted"> mematikan suara
preload <audio preload="preload"> memuat ulang audio ketika
halaman dimuat ulang
src <audio> Value dari src adalah file audio
<source src="house.mp3" tersebut berserta lokasi filenya
type="audio/mp3"> bisa juga mengarahkan suatu

</audio> alamat url/web audio tertentu

Contoh sintag yang lengkap

<!doctype html>
<html>
<head>
<title>cek suara</title>
</head>
<body>
<audio controls = "controls" autoplay="autoplay" loop="loop" >
<source src="house.mp3" type="audio/mp3">
<source src="house.ogg" type="audio/ogg">
</audio>
</body>
</html>

D. VIDEO
Untuk menampilkan video pada halaman web dapat ditangani secara langsung oleh
HTML5. Tag yang digunakan untuk menampilkan video adalah . Namun tidak semua format
videonya dapat ditampilkan di web. Sementara ini, hanya beberapa format video yang bisa
diproses, di antaranya adalah WebM ,OGG , MP4.
MIME untuk format Video
MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk
mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain
sebagainya agar browser tidak salah menterjemahkan konten yg diterima. Tidak hanya
pada web, email juga menggunakan MIME. Berikut adalah tipe mime untuk format
video.

5
 File video seperti mp4 dapat dimainkan pada halaman web melalui tag
<video> < /video>
Ketika mencoba menjalankan video pada halaman web , file video ditempatkan
dalam satu folder yang sama dengan file *.htm dan nama file audio nya disesuaikan
dengan file audio yang anda gunakan.
Tag memiliki beberapa atribut, tidak hanya width dan height saja. Kontrol atribut
menambahkan kontrol video, seperti play, pause, dan volume. Berikut ini adalah atribut –
atribut yang digunakan pada tag .

Poster
Atribute poster berfungsi untuk memunculkan poster/gambar pada saat video
buffer atau diunduh. Misalnya saat buffer video akan muncul gambar “anak.gif” maka
dalam tak <video> disisipkan atribut poster=”anak.gif” dengan catatan file anak.gif
diletakan dalam folder yang sama dengan file html nya. Berikut adalah potongan kode yang
menggunakan atribut poster.
<video width="320" height="240" controls poster="anak.gif">
<source src="bola.mp4" type="video/mp4">
</video>