Membuat Playlist Musik / Lagu di HTML

Membuat Playlist Musik / Lagu di HTML - Seperti hal nya pada postingan sebelumnya dimana dengan mengangkat tema yang sama yaitu mengenai pemasangan musik di halaman web dengan menggunakan bahasa struktur HTML. Namun ada yang berbeda dari sebelumnya itu bisa terlihat dari jumlah lagu yang bisa di play nya, pada postingan sebelumnya kita hanya bisa memutar 1 lagu dengan pemutar 1 pemutar lagu sedangkan sekarang didalam 1 pemutar lagu bisa memutar beberapa lagu atau yang biasa di sebut dengan playlist music.

baca juga : Menyisipkan audio/lagu di HTML

Bila kita bicara tentang musik itu tidak akan ada habisnya, semua di belahan dunia pasti sudah mengetahui apa itu musik, meski berbeda - beda jenis musik yang disukai dalam setiap orang. Tanpa kita sadari musik bisa salah satu sarana penghibur jiwa dikala kita yang sedang sedih, entah itu sedang senang. Dan juga bisa untuk sebagai obat dikala pikiran kita sedang stress yang disebabkan oleh beberapa faktor. Tidak percaya? Silakan dicoba yaa ^_^

Musik dahulu hanya bisa dinikmati dengan keping CD (Compact Disc) saja kini bisa dinikmati di hp - hp  yang mempunyai fitur pemutar musik dan sekarang website yang biasa kita gunakan untuk browsing informasi - informasi ternyata bisa juga lho di pasang pemutar musik, jadi kegunaannya untuk hiburan saja, misal kan kita boring (baca : bosan) baca artikel bisa sambil sambil memutar lagu.

Akan sedikit berbeda bila kita cara memasang nya, sebab tutorial sekarang berbeda dengan tutorial - tutorial sebelumnya yang berfokus pada tag HTML saja. Karena yang akan dibutuhkan sekarang tidak hanya HTML saja katakan saja ada JS(JavaScript), XML, CSS serta file - file pelengkap lainnya. Tetapi mohon maaf mungkin ini tutorialnya agak sedikit melompat ya, sebab pada tutorial sebelumnya belum dijelaskan penjelasan dasar - dasar dari bahasa yang akan kita pakai sekarang. Mungkin di tutorial selanjutnya akan dibahas.

Screenshot

Tools

• Web Editor (notepad++, DW,dll)
• Web Browser (Mozilla firefox, Chrome, dll)

Cara Pasang

• Download dahulu perlengkapannya disini
• Ekstrak didalam folder dengan nama bebeas, misa saya buat namanya playlist
• Buat folder dengan nama mp3 didalam folder playlist dan masukan musik mp3 nya ke dalam fodler mp
• Ketikan sintax/kode dibagian paling bawah artikel ini ke web editor
• Simpan dengan nama index.html dan simpan di dalam folder playlist
• Sekarang buka playlist.xml dan ganti nama yang dilingkari dibawah ini sesuai dengan nama mp3 yang anda masukan ke folder mp3

• Buka file index.html
• Selesai

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>GW Player</title>

<link rel="stylesheet" type="text/css" href="styles.css" />



</head>



<body id="dewbody">



    <div id="content">

      

        <div id="players">

                 

            <h2>Playlist</h2>

         

            <object type="application/x-shockwave-flash" data="dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer">

            <param name="wmode" value="transparent" />

            <param name="movie" value="dewplayer-playlist.swf" />

            <param name="flashvars" value="showtime=true&autoreplay=true&xml=playlist.xml" />

            </object>





        </div> <!-- #players -->



    </div> <!-- #content -->



</body>

</html>

Credit : Dewplayer

Mengenal tag, elemen dan atribut HTML

Mengenal tag, elemen dan atribut HTML - Mengenal tag, elemen dan atribut HTML - Bagian - bagian HTML mempunyai 3 susunan baku dari sintak HTML, yaitu ada tag, attribut dan elemen. Itu disebabkan karena HTML merupakan bahasa struktur bukan bahasa pemrograman. Baik mari kita sama - sama simak penjabaran mengenai 3 susunan baku dair HTML.

Pada dasar nya HTML secara umum mempunyai struktur baku dimana bisa anda lihat disini
Gimana sudah dilihat struktur penulisan HTML nya? dari situlah kita bisa melihat dari tag, attribut dan elemen.

Tag HTML
Tag adalah teks khusus (markup) yang mempunyai 2 karakter yaitu "<" dan ">". Dimana dalam penulisan contoh nya seperti ini <html> kita bisa sama - sama membaca html adalah tag dengan nama html. Didalam tag mempunyai pasangan dimana ada tag pembuka dan tag penutup. Pada tag pembuka tidak mempunyai  karakter tambahan sedangkan pada tag penutup mempunyai karakter tambahan yaitu "/" setelah tanda "<". Contohnya seperti dibawah ini :
<head> adalah tag pembuka
</head> adalah tag penutup

Elemen HTML
Elemen adalah isi dari tag di antara tag pembuka dan penutup. Terdiri atas tag pembuka, isi dan tag penutup, sebagai contoh pada penulisan judul di tab browser. <title>Mengenal Elemen HTML</title> keterangannya seperti dibawah ini :

• <title> adalah tag pembuka
• Mengenal Elemen HTML adalah isi dari tag tersebut
• </title> adalah tag penutup

Atribut HTML
Atribut adalah memberikan informasi tambahan kepada tag. Pemberian informasi tersebut bisa berupa perubahan - perubahan  warna pada teks, ukuran pada teks, memberikan warna background, dll.
Setiap atribut mempunyai nama(name) dan nilai(value), seperti ini name="value"
Contoh nya kita ingin memberikan warna pada teks, <font color="yellow">Semangatt</font>
didalam tag tersebut ada :

• color adalah sebagai bagian dari atribut name
• yellow adalah pemberian nilai yang diberikan kepada tag

Memberikan warna background HTML

Memberikan warna background HTML - Memberikan warna pada background di halaman website sangatlah penting, mengingat untuk sebagai pembeda dari beberapa bagian diwebsite, bagaimana tidak, gimana jadinya apabila website kita warna nya disetting secara default, maka website tidak akan menarik untuk dilihat, pengunjung pun akan bosan untuk mengunjungi lagi, imbas nya ke website kita maka akan sepi pengunjungnya.

Screenshot

Cara pasang
Coba copas sintak dibawah ke dalam notepad atau web editor lainnya

<html>

<head>

<title>Membuat Background Warna</title>

</head>

<body bgcolor="yellow">

Latihan Membuat background warna di HTML<br />



</body>

</html>

Simpan dengan ekstensi *.html atau misal dengan nama latbgwarna.html

Keterangan
Dalam pembuatan background warna pada halaman website, menyisipkan tag "bgcolor" didalam tag "body", yang diberi atribut warna bisa menggunakan kode warna atau bisa juga dengan kata warna nya misal yellow, blue, red, dll.

Membuat Garis / Underline pada HTML

Membuat Garis / Underline pada HTML - Kembali lagi akan membagikan sebuah tutorial bagaimana cara nya untuk membuat sebuah garis sederhana di HTML, seperti yang sudah dibahas sebelumnya HTML merupakan bahasa struktur berbasis website, dimana garis yang akan sekarang kita buat akan tampil di web browser seperti mozilla, google chrome, dll. Dalam penggunaan garis ini sangat lah beragam bisa untuk sebagai pembatas antara bagian atas dan bawah atau untuk sebagai penegas bagian header. Yaa. . . semua tergantung kebutuhan para user garis ini digunakan buat apa.

Screenshot

Cara Pembuatannya
Buka Aplikasi editor web, bisa dengan notepad/notepad++.
Copas sintax dibawah ini

<html>

<head>

<title>Membuat Garis di HTML</title>

</head>

<body>

<hr>

</body>

</html>

Simpan dengan ekstensi *.html atau misal dengan nama latgaris.html
Buka file yang disimpan tadi dan lihat hasilnya

Keterangan
<hr> -> tag pembuat garis, dimana artinya adalah horizontal line.

Membuat judul dengan tag h1 sampai h6 di HTML

Membuat judul dengan tag h1 sampai h6 di HTML - Tag h1 s/d h6 merupakan tag untuk memberikan judul di halaman web/blog dan arti dari "h" berarti heading. Bedanya h1, h2, h3, h4, h5, h6 adalah dari ukuran huruf nya, dimana pada tag h1 mempunyai ukuran huruf lebih besar dari h2 sampai h6 yang paling kecil. Mungkin untuk mengatur besar kecil suatu huruf bisa dengan tag <font size="value"> tapi dengan tag h1 s/d h6 ukuran nya baku, cocok sekali untuk pemberian ukuran huruf pada judul postingan atau heading sidebar.

Screenshot

Contoh nya dibawah ini, copas ke notepad atau ke web editor lainnya

<html>

<head>

<title>Membuat Tag Heading</title>

</head>

<body>

<h1>Tag Heading 1</h1>

<h2>Tag Heading 2</h2>

<h3>Tag Heading 3</h3>

<h4>Tag Heading 4</h4>

<h5>Tag Heading 5</h5>

<h6>Tag Heading 6</h6>

</body>

</html>

Simpan dengan ekstensi *.html atau misal dengan nama latihantagheading.html

Membuat Tabel sederhana pada HTML

Membuat tabel sederhana pada HTML - Tabel merupakan gabungan dari baris dan kolom. Dengan membuat tabel bisa memudahkan kita untuk membuat suatu informasi fakta/opini sehingga menjadi lebih menarik dibandingkan dengan kata - kata biasa. Pada awalnya tabel hanya bisa dibuat secara manual yang ditulis dengan pena di atas kertas, dengan manual itu kita tidak bisa mengolah nya secara dinamis. Seiring berkembangnya zaman yang sekarang semakin mudah saja, kini tabel bisa dibuat secara komputerisasi, yang sifatnya lebih dinamis. Pada contoh kali ini menggunakan bahasa pemrograman HTML yang ditampilkan di web browser.

Screenshot

Contoh nya dibawah langsung dicoba di web editor bisa dengan notepad / notepad++ / dreamweaver, dll

<html>

<head>

<title>Membuat Tabel Sederhana</title>

</head>

<body>



<table border="1" cellpadding="4" cellspacing="2">

<tr>

<th>Nama</th>

<th>Alamat</th>

</tr>

<tr>

<td>Dina</td>

<td>Majalengka</td>

</tr>

<tr>

<td>Lili</td>

<td>Cirebon</td>

</tr>

</table>

</body>

 </html>

Keterangan
table = tag pembuatan tabel
cellpadding = untuk memberikan jarak antara teks dengan garis tepi tabel
cellspacing = memberikan efek tebal pada garis tepi
tag th = table heading, untuk membuat heading pada tabel
tag td = table data, untuk memberikan isi pada tabel tersebut
tag tr = table row, untuk mendefinisikan tabel
Simpan dengan ekstensi *.html misalnya tabelsederhana.html

Untuk mengembangkan nya lagi boleh di coba yang satu ini : Memberikan warna background di tabel HTML dan Menggabungkan beberapa cell tabel HTML

Mengatur Warna, Ukuran dan Jenis huruf di HTML

Mengatur Warna, Ukuran dan Jenis huruf di HTML - Mengatur warna, ukuran serta jenis huruf seperti nya sudah biasa kita lakukan saat mengolah kata di aplikasi Microsoft Word, namun kali ini akan membahas bagaimana mengatur style huruf di bahasa pemrograman HTML. Yang tentunya berbasis web, baik akan segera dipaparkan mulai dari screenshot sampai cara menggunakannya.

Screenshot

Dibawah merupakan sintak nya yang bisa dicoba di notepad atau web editor lainnya

<html>

<head>

<title>Mengatur warna, jenis dan ukuran huruf di HTML</title>

</head>

<body>

<font color="#80FFFE">Warna huruf dengan kode</font><br>

<font color="red">Warna huruf tanpa kode</font><br>

<font face="comic sans ms">Jenis huruf Comic sans ms</font><br>

<font size=1>Huruf dengan ukuran 1</font><br>

<font size=2>Huruf dengan ukuran 2</font><br>

<font size=3>Huruf dengan ukuran 3</font><br>

</body>

 </html>

Simpan dengan ekstensi *.html atau contoh nya gayahuruf.html dan buka hasilnya

Keterangan
font color="#80FFFE" = Bisa di ubah warna nya dengan menggunakan kode, untuk mengetahui kodenya bisa dilihat di widget paling bawah blog ini. Bedanya mengatur dengan teks saja, dengan kode kita bisa mengatur lebih banyak warna dari berbagai warna yang ada, dimulai dari yang gelap sampai yang terang.
font color="red" -> Bisa di ubah warnna nya tanpa menggunakan kode, misalkan kita ingin memberikan warna merah berarti red, biru berarti blue, dst.
font face -> Untuk memberikan jenis huruf, pada contoh kali ini jenis huruf nya Comic Sans Ms, bisa dicoba dengan jenis huruf yang lain misalnya Times New Roman, Calibri, Arial, dst. bisa dilihat di Microsoft Word.
font size -> Untuk memberikan nilai huruf mengatur besar kecil nya huruf