# Dasar-Dasar HTML
# Elemen Form pada HTML
# Website MP3 Streaming Sederhana (HTML)
Tampilkan postingan dengan label tutorial html. Tampilkan semua postingan
Tampilkan postingan dengan label tutorial html. Tampilkan semua postingan
29 Maret 2011
22 Maret 2011
Website Multimedia - mp3 streaming
sekarang banyak website multimedia, seiring dengan kebutuhan website multimedia tidak hanya menyuguhkan download file multimedia tetapi juga menyediakan layanan streaming. sehingga memanjakan pengunjung website multimedia tersebut. karena pengunjung tidak hanya download file, pengunjung bisa langsung mengetes kualitas (seperti suara, gambar, dll).
di sini saya akan share bagaimana membuat/menampilkan website multimedia.
agar file multimedia bisa di putar/streaming dibutuhkan player yang bisa dijalankan di website. sekarang ini banyak sekali yang menyediakan player (flash player) tersebut dari yang gratisan sampai yang berbayar. disini saya sudah download player (flash player mp3), dan sudah saya edit scriptnya agar mudah digunakan.
langusng saja kita ke pokok permasalahan, sebenarnya scriptnya sangat sederhana, seperti dibawah ini :
<html>
<head>
<title>Website MP3 Streaming </title>
</head>
<object type="application/x-shockwave-flash" id="player1" allowscriptaccess="always" allowfullscreen="true" data="ThinMusicPlayer.swf" height="21" width="220">
<param name="movie" value="ThinMusicPlayer.swf">
<param name="FlashVars" value="mediaPath=GejolakKawulaMuda.mp3">
</object>
</html>
hasil dari script diatas :
script di atas adalah script html, sehingga aka menampilkan website yang statis, untuk membuat agar dinamis, anda memerlukan sentuhan script PHP. dengan sedikit sentuhan script PHP website mp3 streaming di atas akan sayang menarik.
nah cukup mudah bukan, sekarang anda bisa mencobanya. skrng anda sudah bisa membuat website mp3 streaming.
Anda bisa download script+mp3_player+contoh lagu di sini
atau melihat demonya di sini
di sini saya akan share bagaimana membuat/menampilkan website multimedia.
agar file multimedia bisa di putar/streaming dibutuhkan player yang bisa dijalankan di website. sekarang ini banyak sekali yang menyediakan player (flash player) tersebut dari yang gratisan sampai yang berbayar. disini saya sudah download player (flash player mp3), dan sudah saya edit scriptnya agar mudah digunakan.
langusng saja kita ke pokok permasalahan, sebenarnya scriptnya sangat sederhana, seperti dibawah ini :
<html>
<head>
<title>Website MP3 Streaming </title>
</head>
<object type="application/x-shockwave-flash" id="player1" allowscriptaccess="always" allowfullscreen="true" data="ThinMusicPlayer.swf" height="21" width="220">
<param name="movie" value="ThinMusicPlayer.swf">
<param name="FlashVars" value="mediaPath=GejolakKawulaMuda.mp3">
</object>
</html>
hasil dari script diatas :
script di atas adalah script html, sehingga aka menampilkan website yang statis, untuk membuat agar dinamis, anda memerlukan sentuhan script PHP. dengan sedikit sentuhan script PHP website mp3 streaming di atas akan sayang menarik.
nah cukup mudah bukan, sekarang anda bisa mencobanya. skrng anda sudah bisa membuat website mp3 streaming.
Anda bisa download script+mp3_player+contoh lagu di sini
atau melihat demonya di sini
29 Maret 2010
Javascript Checkbox Checked / Javascript Check All Checkbox
Kalian tahu kan fungsi checkall? Yupz, ini adalah fungsi yang digunakan untuk mencentang semua kolom cek list ataupun sebaliknya untuk menghilangkan semua centang yang ada pada kolom cek list. Untuk membuat fungsi ini kita hanya memerlukan sebuah script javascript yang digunakan untuk mencentang semua cek list maupun menghilangkan semua centang pada cek list.
Untuk melihat demonya silahkan kunjungi:
[Demo @ catment.co.cc/demo/checkall]
Download scriptnya:
http://catment.co.cc/download/check_all.zip
Secara keseluruhan script tersebut seperti dibawah ini:
<html>
<body>
<center>
<table border="1px" width="180">
<tr>
<td>
<ul>
<li>
<input type="checkbox" name="check_ctrl" onClick="Check(document.myform.check_list)" /> <b id=message>Check All</b>
</li>
<li><input type="button" name="button" id="button" onClick="Check(document.myform.check_list)" value="Check All" /></li>
</ul>
<hr>
<ol>
<li><input type="checkbox" name="check_list" value="1"> ASP</li>
<li><input type="checkbox" name="check_list" value="2"> PHP</li>
<li><input type="checkbox" name="check_list" value="3"> JavaScript</li>
<li><input type="checkbox" name="check_list" value="4"> HTML</li>
<li><input type="checkbox" name="check_list" value="5"> MySQL</li>
</ol>
</td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
<!--
function Check(chk)
{
if(document.myform.check_ctrl.checked==true || document.getElementById("button").value=="Check All")
{
for(i=0;i<chk.length;i++)
chk[i].checked=true ;
document.getElementById("message").innerHTML="UnCheck All";
document.getElementById("button").value="UnCheck All";
}
else
{
for(i=0;i<chk.length;i++)
chk[i].checked=false;
document.getElementById("message").innerHTML="Check All";
document.getElementById("button").value="Check All";
}
}
//-->
</script>
</center>
</body>
</html>
Untuk melihat demonya silahkan kunjungi:
[Demo @ catment.co.cc/demo/checkall]
Download scriptnya:
http://catment.co.cc/download/check_all.zip
10 Maret 2010
Elemen FORM pada HTML
Form pada HTML digunakan untuk menerima masukan uatau isian dari user kemudian di olah lebih lanjut menjadi informasi yang dibutuhkan, baik oleh user ataupun pihak yang punya web. Elemen dari form HTML adalah <form> yang menunjukan awal dari suatau form HTML dan di akhiri dengan </form>. Dalam sebuah dokumen dapat memiliki lebih dari satu form HTML.
Kegunaan Form
Berikut ini adalah beberapa contoh kegunaan form dalam web:
- Memperoleh data-data user.
- Untuk mendaftar pada service yang disediakan.
- Memperoleh feedback dari user mengenai website anda.
Sintak penulisan Form:
<form methode="post atau get" action="url">
Elemen-elemen FORM
</form>
Tag <form> digunakan untuk membuat form dalam dokumen HTML.
Atribut | Deskripsi |
method | Menentukan bagaimana data akan dikirim ke server. get- data akan dikirim dengan menggunakan query string pada url. post- data akan dikirim ke server sebagai block datake script. Syntax: method="post/get" |
action | Menentukan lokasi dari script yang akan memproses data dari form Syntax: action="url" |
Membuat input field
Dalam form, kita dapat membuat input atau kotak isian yang dapat di isi dengan suatu data oleh user. Tag yang digunakan untuk membuat kotak isisan adalah tag<input>. Type-type input yang tersedia adalah sebagai berikut:
# Type=TEXT
Kotak isian bertype text ini menerimadata dari karakter (default) sebanyak satu baris.
Atribut | Deskripsi |
Name | Nama vareable dari control yang akan menyimpan nilai dari input field |
Type | <input type="text"> |
Value | Untuk memberikan value ke input field |
Size | Jumlah karakter dari input field |
Maxlength | Jumlah karakter maxsimum untuk input field |
Contoh:
<input type="text" name="text" size="20">
Tampilan:
# Type= PASSWORD
Kotak isian bertipe password ini menerima data karakter, tapi tidak akan ditampilkan karena kebutuhan masukan password yang bersifat rahasia. Atributnya sama denganinput field type text
Atribut | Deskripsi |
Name | Nama vareable dari control yang akan menyimpan nilai dari input field |
Type | <input type="password"> |
Value | Untuk memberikan value ke input field |
Size | Jumlah karakter dari input field |
Maxlength | Jumlah karakter maxsimum untuk input field |
Contoh:
<input type="password" name="pwd" size="20">
Tampilan:
# Type=CHECKBOX
Suatu inputan yang memungkinkan kita memilih satu atau lebih pilihan atau tidak memilih samasekali, dengan memberikan tanda pada checkbok tersebut.
Atribut | Deskripsi |
Checked | Untuk memberi default check |
Name | Nama vareable dari control yang akan menyimpan nilai dari input field |
Type | <input type="checkbox"> |
Value | Untuk pemberian value ke input |
Size | Ukuran control |
Contoh:
<input type="checkbox" name="renang" value="renang">Renang <br>
<input type="checkbox" name="sepak bola" value="sepak bola">Sepak Bola <br>
<input type="checkbox" name="Tenis Meja" value="Tenis Meja">Tenis Meja <br>
Tampilan :
Renang
Sepak Bola
Tenis Meja
# Type = RADIO
Hanya mengijinkan satu dari banyak pilihan. Setiap radio button control harus memiliki nama yang sama, sehingga user hanya bisa memilih satu option saja. Radio button harus secara explisit memberikan nilai ke atribut value.
Atribut | Deskripsi |
Checked | Untuk memberi default check |
Name | Nama vareable dari control yang akan menyimpan nilai dari input field |
Type | <input type="radio"> |
value | Untuk memberikan value ke input |
Size | Ukuran control |
Contoh:
<input type="radio" name="jenis kelamin" value="laki-lahi">Laki-laki <br>
<input type="radio" name="jenis kelamin" value="Perempuan">Perempuan
Tampilan:
Laki-laki
Perempuan
# Type= BUTTON
Atribut | Deskripsi |
Name | Nama vareable dari control yang akan menyimpan nilai dari input field |
Type | <input type="submit"> : mengirimkan form ke url yang telah di definisikan pada atribut action pada tag <form> <input type="reset">: Browser mengembalikan field dalam form ke dalam nilai default (mengosongkan nilai semua elemen form) |
Value | Memberikan nama label pada button |
Size | Memberikan lebar button |
Contoh:
<input type="submit" value="Submit"><input type="reset" value="reset">
Tampilan :
# Tag <TEXTAREA>
Tag ini digunakan untuk membuat input text yang lebar, bisa menampung lebih banyak karakter dibanding input field bertype TEXT. Text yang berada di antara tag <TEXTAREA>dan </TEXTAREA> secara default akan ditampilkan sesuai aslinya
Atribut | Deskripsi |
Name | Nama vareable dari control yang akan menyimpan nilai dari input field |
Rows | Jumlah baris textarea |
Cols | Lebar kolom textarea |
Wrap | WRAP=PHYSICAL –tampilan word-wrap. Default WRAP=OFF |
Contoh:
<textarea name="textarea" cols="15" rows="3">ini adalah textarea</textarea>
Tampilan:
# TYPE=IMAGE NAME=SUBMIT SRC="...."
Mengirimkan informasi form seperti halnya tombol submit, hanya saja berbentuk gambar.
Contoh:
<input type="image" name="submit" src="catment/Pictures/play.jpg">
Tampilan:
# tag <SELECT> dan <OPTION>
Digunakan untuk membuat field yang berbentuk pilihan. Tag <select> dan <option> ini harus digunakan secara bersama-sama. tag <option> mendefinisikan pilihan dari item-item. Tag ini dipasang diantara tag <select> dan </select>.
Atribut | Deskripsi |
Name | Nama vareable dari control yang akan menyimpan nilai dari input field |
Value | Text yang di tampilkan pada tombol, default = "submit query" |
Size | Untuk menampilkan jumlah baris |
Multiple | Untuk menentukan apakah user boleh memilih lebih dari satu option apa tidak |
Selected | Pilihan ini di pilih secara default |
Contoh:
<select name="propinsi">
<option value="">Propinsi</option>
<option value="Jawa Tengah">Jawa Tengah</option>
<option value="Jawa Barat">Jawa Barat</option>
<option value="Jawa Timur">Jawa Timur</option>
</select>
Tampilan:
1 Maret 2010
Check Javascript Browser Enabled / Disabled
Javascript biasa digunakan untuk membuat suatu validasi dari suatu form input karena javascript merupakan bahasa pemrograman web yang bersifat client side, yaitu bahasa pemrograman yang proses eksekusi perintahnya dilakukan pada sisi client, sehingga membuat validasi dengan javascript tanpa perlu mereload suatu halaman. Tetapi javascript memiliki suatu kelamahan. Dalam hal validasi seseorang bisa saja memasukan data yang tidak sesuai dengan aturan validasi yang dibuat dengan script javascript, untuk memasukan data yang tidak valid tersebut user cukup mematikan / disable javascript browser yang digunakan, selanjutnya user dapat menginputkan data yang tidak sesuai dengan aturan validasi yang dibuat. Bayangkan jika validasi extensi file upload bisa diabaikan..? Jika validasi extensi file upload tersebut hanya memperbolehkan seorang user mengupload file extensi jpg, dan user tersebut me- nonaktif / disable javascript browser yang digunakan, maka ia dapat mengupload file dengan extensi apa saja misalkan exe. Bayangkan jika user tersebut mengupload sebuah virus?
Untuk mengatasi masalah tersebut kita dapat membuat suatu aturan yang mengharuskan user meng- aktif / enable javascript browser yang digunakan, jika javascript browser disable / nonaktif kita dapat meng-kick user tersebut sehingga ia tidak dapat memasukan data jika javascript browser disable / nonaktif. Untuk dapat membuat aturan tersebut kita harus dapat melakukan check javascript browser enabled / disabled dengan membuat suatu script yang akan disisipkan ditiap halaman atau dihalaman yang anda anggap perlu, dan sebuah halaman kita buat sebagai output dari user yang kita kick.
- Script yang disisipkan:
js_disable.php adalah halaman tujuan kick dari user yang nonaktif / disable javascript browser yang digunakannya.
- js_disable.php
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Javascript Disabled</title>
</head>
<body>
<center>
<noscript>
<h3>Javascript anda tidak aktif mohon aktifkan / enabled javascript browser anda.</h3>
</noscript>
</center>
</body>
</html>
Dengan begitu user yang nonaktif / disable javascript browser yang digunakannya akan dialihkan kehalaman js_disable.php dan diberikan sebuah peringatan untuk meng- aktif / enable javascript browser yang digunakannya.
[DOWNLOAD SCRIPT DISINI]
Untuk mengatasi masalah tersebut kita dapat membuat suatu aturan yang mengharuskan user meng- aktif / enable javascript browser yang digunakan, jika javascript browser disable / nonaktif kita dapat meng-kick user tersebut sehingga ia tidak dapat memasukan data jika javascript browser disable / nonaktif. Untuk dapat membuat aturan tersebut kita harus dapat melakukan check javascript browser enabled / disabled dengan membuat suatu script yang akan disisipkan ditiap halaman atau dihalaman yang anda anggap perlu, dan sebuah halaman kita buat sebagai output dari user yang kita kick.
- Script yang disisipkan:
<noscript>
<meta http-equiv="refresh" content="0;URL=js_disable.php" />
</noscript>
js_disable.php adalah halaman tujuan kick dari user yang nonaktif / disable javascript browser yang digunakannya.
- js_disable.php
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Javascript Disabled</title>
</head>
<body>
<center>
<noscript>
<h3>Javascript anda tidak aktif mohon aktifkan / enabled javascript browser anda.</h3>
</noscript>
</center>
</body>
</html>
Dengan begitu user yang nonaktif / disable javascript browser yang digunakannya akan dialihkan kehalaman js_disable.php dan diberikan sebuah peringatan untuk meng- aktif / enable javascript browser yang digunakannya.
[DOWNLOAD SCRIPT DISINI]
25 Februari 2010
Script untuk mengubah ukuran ( resize ) gambar menggunakan javascript
Di sini saya akan mencoba membahas bagaimana cara mengubah ukuran gambar menggunakan javascript. Karena script yang saya gunakan adalah javascript maka proses dari mengubah ukuran gambar ini tidak memerlukan local server, seperti php.
ukuran Gambar normal
Ukuran gambar di perkecil
Ukuran gambar di perbesar
Scriptnya seperti ni:
<html>
<head>
<title>mengubah ukuran gambar menggunakan javascript</title>
<script type="text/javascript">
var panjang;
var lebar;
var x = 0;
function bacaUkuran()
{
panjang = document.getElementById("gambar").width;
lebar = document.getElementById("gambar").height;
}
function tambahSize()
{
x++;
document.getElementById("gambar").width = Math.pow(2, x) * panjang;
document.getElementById("gambar").height = Math.pow(2, x) * lebar;
}
function kurangiSize()
{
x--;
document.getElementById("gambar").width = Math.pow(2, x) * panjang;
document.getElementById("gambar").height = Math.pow(2, x) * lebar;
}
function resetSize()
{
x = 0;
document.getElementById("gambar").width = Math.pow(2, x) * panjang;
document.getElementById("gambar").height = Math.pow(2, x) * lebar;
}
</script>
</head>
<body onload="bacaUkuran()">
<div align="center">
<h1>contoh mengubah ukuran gambar dengan javascript</h1>
<input type="button" value="perkecil" onclick="kurangiSize()" />
<input type="button" value="ukuran semula" onclick="resetSize()" />
<input type="button" value="perbesar" onclick="tambahSize()" />
<br/><br/>
<img id="gambar" src="Sunset.jpg"/>
</div>
</body>
</html>
Keterangan dari javascript di atas adalah :
var panjang;
var lebar;
var x = 0;
function bacaUkuran()
{
panjang = document.getElementById("gambar").width;
lebar = document.getElementById("gambar").height;
}
Buat 3 button/tombol, yang masing-masing namanya perbesar, perkecil dan ukuran semula. Tombol “perbesar” di gunakan untuk memperbesar ukuran gambar 2 kali dari ukuran gambar seblumnya. Tombol “perkecil” di gunakan untuk untuk memperkecil ½ kali dari ukuran gambar sebelumnya. Dan tombol “ ukuran semulah digunakan untuk mengubah gambar ke ukuran aslinya.
Perhatikan Javascript di atas, bahwa variabel panjang dan lebar sengaja dibuat sebagai variabel global karena nantinya akan digunakan dalam proses perhitungan untuk setiap proses (perbesar ukuran dan perkecil ukuran). Apabila kedua variabel tersebut dibuat lokal dalam function bacaUkuran() maka nilai-nilainya hanya bisa dikenal dalam function tersebut saja.
Misalkan mula-mula panjang imagenya adalah x. Setelah diperbesar 2 kali maka panjang imagenya adalah 2x. Bila diperbesar lagi maka panjang imagenya menjadi 4x, dst. Secara umum panjang image setelah diperbesar n kali adalah 2nx. Bila n = 0, maka akan diperoleh panjang image mula-mula. Hal yang sama juga berlaku untuk lebar imagenya. Nah… ide ini bisa kita terapkan dalam bentuk script.
Perintah Math.pow(2, x) digunakan untuk menghitung 2x pada Javascript.
Perintah document.getElementById("gambar").width = Math.pow(2, x) * panjang; digunakan untuk mengubah panjang image yang tampil dalam browser menjadi 2x * panjang aslinya.
Sedangkan untuk memperkecil ukuran image, kita cukup melakukan decrement pada variabel x nya saja (x--). Misal mula-mula panjang image adalah x (20x) pixel, lalu diperbesar menjadi 2x (20+1x = 21x), lalu diperbesar lagi menjadi 4x (21+1x = 22x). Selanjutnya diperkecil, maka panjangnya menjadi kembali ke 2x (22-1x = 21x). Bila diperkecil lagi menjadi x (21-1x = 20x), dan bila diperkecil lagi menjadi 1/2 x (20 – 1x = 2-1x) dst.
Yang terakhir, untuk tombol ketiga (=) dimana bila tombol ini ukuran image akan direset menjadi ukuran aslinya. Idenya adalah dengan memberi nilai x = 0, untuk mendapatkan panjang dan lebar image aslinya. Bila nilai x = 0, dan panjang image aslinya x, maka 20x = x (sama seperti ukuran aslinya), demikian pula untuk lebarnya
[download script]
dasar-dasar HTML
Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan sebut sebagai Markup Language yakni bahasa yang mendukung kode penanda yang si sebut HTML yang di gunakan untuk mengatur format tampilan suatu dokumen. Kode ini di selipkan ke dalam teks HTML, berfungsi untuk mengontrol format dan layout dalam dokumen, menunjuk ke suatu hyperlink, dan lain-lain. Tag HTML ini menggunakan simbol khusus dan untuk menandakan suatu kode instruksi, simbol ini adalah kurung siku < dan >.
Hal yang harus di perhatikan adalah kode tag HTML ini taidak bersifat case-senditif artinya <body> sama dengan <BODY> ataupun <bOdY>. Pada umumnya banyak dari pemakai HTML menggunakan hufur besar dalam penulisan tag HTML sehingga kode-kode ini terlihat jelas, sehingga mempermudah proses pembacaan. Semua bagian HTML terdiri dari dua bagian logikal yaitu :
Setiap dokumen HTML harus dimulai dan di akhiri dengan tag <HTML> yang mendeklarasikan suatu dokumen sebagai dokumen HTML. Sruktur dasarnya adalah sebagai berikut:
<html>
<head>
<title>Judul</title>
</head>
<body>
ISI WEB
</body>
</html>
Keterangan:
<html> ... </html>
Mendefinisika bahwa text yang berada di antara kedua tag tersebut adalah file HTML.
<head> ... </head>
Sebagai informasi tag header. Di dalam tag ini kita bisa meletakan tag-tag TITLE, BASE, ISIINSEX, LINK, SCRIP, STYLE dan META
<title> ...</title>
Sebagai titel atau judul halaman/form, digunakan sebagai identifikasi dokumen. Dokumen yang terletak dalam tag ini akan muncul pada bagian atas browser anda (pada title bar).
<body> ...</body>
Mendefinisikan teks beserta formatnya yang hendak di tampilkan sebagi isi halam web. Di dalam tag ini bisa di letakan berbagai page atribut seperti bgcolor, baground, text, dan lain-lain.
[download ebook]
Hal yang harus di perhatikan adalah kode tag HTML ini taidak bersifat case-senditif artinya <body> sama dengan <BODY> ataupun <bOdY>. Pada umumnya banyak dari pemakai HTML menggunakan hufur besar dalam penulisan tag HTML sehingga kode-kode ini terlihat jelas, sehingga mempermudah proses pembacaan. Semua bagian HTML terdiri dari dua bagian logikal yaitu :
- Bagian kepala (head). Secara umum, bagian kepala terdiri dari dokumen HTML berisi informasi umum mengenai dokumen.
- Dan bagian badan (body) yaitu berisi dokumen yang sebenarnya.
Setiap dokumen HTML harus dimulai dan di akhiri dengan tag <HTML> yang mendeklarasikan suatu dokumen sebagai dokumen HTML. Sruktur dasarnya adalah sebagai berikut:
<html>
<head>
<title>Judul</title>
</head>
<body>
ISI WEB
</body>
</html>
Keterangan:
<html> ... </html>
Mendefinisika bahwa text yang berada di antara kedua tag tersebut adalah file HTML.
<head> ... </head>
Sebagai informasi tag header. Di dalam tag ini kita bisa meletakan tag-tag TITLE, BASE, ISIINSEX, LINK, SCRIP, STYLE dan META
<title> ...</title>
Sebagai titel atau judul halaman/form, digunakan sebagai identifikasi dokumen. Dokumen yang terletak dalam tag ini akan muncul pada bagian atas browser anda (pada title bar).
<body> ...</body>
Mendefinisikan teks beserta formatnya yang hendak di tampilkan sebagi isi halam web. Di dalam tag ini bisa di letakan berbagai page atribut seperti bgcolor, baground, text, dan lain-lain.
[download ebook]
