Penyisipan File

Assalamu;alaikum…

A. Pendahuluan
Hai kawan… dalam kesempatan ini saya akan memberitahu cara membuat Hyperlink pada HTML,Penyisipan file seperti: MP3,IMAGE,VIDEO dll. Dan juga yang pokok dalam praktik kali ini adalah membuat desain halaman web pada browser kita sendiri, pasti kalian bingung bagaimana sih cara pembuatannya. Mari kita simak sama sama pembahasan saya kali ini.

B. Pengertian
Penyisipan file adalah Memasukkan Gambar ke dalam Halaman Web, tidak hanya gambar saja akan tetapi mp3,video juga bisa di masukkan ke halaman web.

C. Latar Belakang
Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan
bila tidak disertai dengan gambar. Kita bisa lihat saat ini, halaman web yang ada
di internet, hampir semuanya memasukkan unsur gambar, animasi, bahkan
audio dan video untuk menarik dan membuat tercengang para pengunjungnya. Cara yang diperlukan untuk memasukkan atau menambah gambar ke halaman web, HTML sudah menyediakan tag khusus yaitu <img>.

Atribut terpenting dari tag <img> adalah SRC (source atau sumber), yang berisi file gambar yang akan ditampilkan ke halaman web.
Contoh:
<img src=”namafile”>

Untuk menampilkan format gambar digunakan tag <img>, dengan atribut
src=”letak dan nama file gambar”, serta ukuran width=”” untuk lebar
gambar dan height=”” untuk tinggi gambar.

Contoh penerapannya :

Coding :
<html>
<head>
<title>gambar</title>
</head>
<body>
<img src="../Downloads/info.jpeg" width="150" height="150">
</body>
</html>

Hasilnya :








berikut juga contoh penerapan hyperlink :

Coding :
<html>
<head>
<title> Belajar HTML </title>
</head>
<hr width="80">
<body bgcolor="violet">
<marquee behavior="alternate" direction="right">Ayo sama sama belajar HTML</marquee>
<h1 align="center"><font color ="blue"> Belajar HTML </font> </h1>
<center><a href="Home.html">Home</a><center>
<p>
<a href="gambar.html" align="center">Gambar</a>
</p>
</hr>
</body>
</html>

Hasilnya :





Dalam Hyperlink kita dapat berpindah halaman hanya dengan mengeklik pada tulisan maupun gambar. hasil diatas jika kita klik pada tulisan "Home" akan menampilkan gambar sebagai berikut :







Dan jika kita klik pada tulisan HTML akan muncul halaman web seperti dibawah ini :







kembali lagi pada tampilan awal jika kita klik tulisan "gambar" maka yang akan muncul adalah gambar yang diinginkan sudah dijelaskan diatas tadi bagaimana memasukkan gambar pada halaman web. pada Hyperlink mempunyai ciri khas yaitu garis bawah. ini hasil tampilan dari gambar :



  1.  Format tampilan audio
    Kebanyakan file audio diputar melalui sebuah plug-in, misalnya seperti flash. Namun, browser yang berbeda mungkin memiliki berbagai plug-in. HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan file audio pada halaman web: elemen <audio> </audio>.
    Untuk memasukkan suara pada html bisa menggunakan tag <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.
    Tidak semua tipe file audio tersebut didukung oleh browser.
    • OGG merupakan format audio yang didukung oleh Mozilla firefox, opera, dan google chrome.
    • MP3 merupakan format audio yang didukung oleh Google Chrome dan safari.
    • WAV merupakan format audio yang didukung oleh Mozilla Firefox dan Opera.
  1. saat meletakan file mp3 di web yang kita buat, akan ada beberapa orang yang tidak bisa memutar hasil embed mp3 di web yan telah kita buat tersebut. Hal tersebut bisa jadi disebabkan browser yang digunakan tidak support pada file berekstensi mp3.
  2. MIME untuk format audio
    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 audio.

Format
MIME-type
MP3
Audio/mpeg
Ogg
Audio/Ogg
Wav
Audio/Wav

Menyajikan audio dalam tampilan web

berikut ini adalah contoh coding yang digunakan :


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

Ketika mencoba listing program diatas , file audio ditempatkan dalam satu
folder yang sama dengan file *.htm dan nama file audio nya disesuaikan dengan
file audio yang anda gunakan. Untuk listing program di atas menggunakan file
audio bernama "house.mp3" dan "house.ogg".

Menerapkan listing program memasukkan video ke dalam halaman web :

Untuk menampilkan video pada halaman web dapat ditangani secara
langsung oleh HTML5. Tag yang digunakan untuk menampilkan video adalah
<video> </video>. Namun tidak semua format videonya dapat ditampilkan di web.
Sementara ini, hanya beberapa format video yang bisa diproses, di antaranya
adalah WebM ,OGG , MP4.
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.

<html>
<head>
<title>cek video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="bola.mp4" type="video/mp4">
browser anda tidak mendukung format video ini.
</video>
</body>
</html>


D. Maksud dan Tujuan
mengenal lebih lagi tentang Hyperlink,penyisipan file dan membuat tampilan halaman web dengan benar.

E. Alat dan Bahan
1. Laptop
2. File Items
3. Software aplikasi yang mendukung penggunaan HTML

F. Hasil yang diharapkan
mempraktikkan dengan benar dan bisa memahami masing-masing penggunaan coding yang terdapat pada contoh di atas.

G. Referensi