HYPERLINK PADA HTML

Diposting oleh Unknown

Dalam pembelajaran kali ini akan dibahas mengenai penggunaan hyperlink pada html,
Karena sebuah halaman web akanlah sangat membosankan apabila hanya akan memuat satu halaman saja tanpa ada penggunaan secara dinamis, ntah itu hanya link antar halaman ataupun sampai ke aplikasi download. semoga isi dari materi ini bisa menjadi referensi anda dalam pembelajaran html.

Suported By :



Berikut ini akan saya contohkan, aplikasi sederhana akan konsep penggunaan hyperlink.
pertama kita akan membuat menu untuk mendownload sebuah dokumen file, yang lngsung diarahkan ke layanan download.
Untuk scriptnya silahkan diamati dan di analisis ya preNn :

<!DOCTYPE HTML>
<html lang="en">
<link rel="shortcut icon" href="matrix.ico">
<head>
<title>Dokumen</title>
</head>
<body>
<table border=0 align="center" cellspacing=0
cellpadding=10>
<caption> :: UNLIMITED DOWNLOAD :: </caption>

<tr>
<th width="30" bgcolor="teal"></th>
<th width="5"></th>
<th width="300" bgcolor="teal"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="yellow"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="teal"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="teal"></th></tr>
<tr>
<td rowspan=12 bgcolor="teal"></td>
<td colspan = 7 bgcolor="yellow"><ol>
<li><a href="www.4shared.com" title="Download file"> BIOZ in Blitar</a></li>
<li><a href="www.4shared.com" title="Download file"> BIOZ in Mojokerto</a></li>
<li><a href="www.4shared.com" title="Download file"> PTI'09 OFF B</a></li>
<li><a href="www.4shared.com" title="Download file"> BIOZ in Bondowoso</a></li>
<li><a href="www.4shared.com" title="Download file"> BIOZ in Bali</a></li>
</ol>
</td>
<td rowspan=10 bgcolor="teal"></td>
</tr>
<tr>
<td colspan=12 bgcolor="teal"><p align="center"> &copy; andibayu </b></p></td>
</tr>
</table>
</body>
</html>

Dan tampilan dari scipt di atas yakni sbb :

 

Jika kita ingin mendownload film, maka kita langsung saja clik pada tulisan film, maka secara otomatis tampilan menu akan menampilkan tampilan menu daftar download film, untuk lebih jelasnya silahkan perhatikan script berikut ini guys :


<!DOCTYPE HTML>
<html lang="en">
<link rel="shortcut icon" href="matrix.ico">
<head>
<title> Film</title>
</head>
<body>
<table border=0 align="center" cellspacing=0
cellpadding=10>
<caption> :: UNLIMITED DOWNLOAD ::</caption>


<tr>
<th width="30" bgcolor="teal"></th>
<th width="5"></th>
<th width="300" bgcolor="yellow"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="teal"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="teal"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="teal"></th></tr>
<tr>
<td rowspan=12 bgcolor="teal"></td>
<td colspan = 7 bgcolor="yellow"><ol>
<li><a href="sinema3satu.com" title="Download file">The Crazies</a></li>
<li><a href="sinema3satu.com" title="Download file">Harry Potter 7</a></li>
<li><a href="sinema3satu.com" title="Download file">In the Name of God</a></li>
<li><a href="sinema3satu.com" title="Download file">You Again</a></li>
<li><a href="sinema3satu.com" title="Download file">The Social Network</a></li>
</ol>
</td>
<td rowspan=10 bgcolor="teal"></td>
</tr>
<tr>
<td colspan=12 bgcolor="teal"><p align="center"> &copy; andibayu </b></p></td>
</tr>
</table>
</body>
</html>

Dari script diatas maka akan muncul tampilan sperti ini kawaNn :

Lanjutnya ketika kita ingin menampilkan layanan untuk mendownload film, maka kita langsung saja meng click tulisan musik.
adapun script nya seperti ini preNn :

<!DOCTYPE HTML>
<html lang="en">
<link rel="shortcut icon" href="matrix.ico">
<head>
<title>Musik</title>
</head>
<body>
<table border=0 align="center" cellspacing=0
cellpadding=10>
<caption> :: UNLIMITED DOWNLOAD ::</caption>

<tr>

<th width="30" bgcolor="teal"></th>
<th width="5"></th>
<th width="300" bgcolor="teal"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="teal"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="yellow"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="teal"></th></tr>
<tr>
<td rowspan=12 bgcolor="teal"></td>
<td colspan = 7 bgcolor="yellow"><ol>
<li><a href="http://beemp3.com/" title="Download file">westlife - miss you</a></li>
<li><a href="http://beemp3.com/" title="Download file">westlife - I have a dream</a></li>
<li><a href="http://beemp3.com/" title="Download file"> westlife - change the world</a></li>
<li><a href="http://beemp3.com/" title="Download file">westlife - my love</a></li>
<li><a href="http://beemp3.com/" title="Download file">westlife - soledad></li>
</ol>
</td>
<td rowspan=10 bgcolor="teal"></td>
</tr>
<tr>
<td colspan=12 bgcolor="teal"><p align="center"> &copy; andibayu </b></p></td>
</tr>
</table>
</body>
</html>

Dan untuk tampilan dari script di atas, dapat dilihat seperti gambar dibawah ini guys...


 ANALISIS ---> Jadi pada dasarnya file script pada halaman tampilan itu sebenarnya ada 3, yakni :
                            dokumen.html , musik.html ,  film.html

                            ke 3 halaman itu di jadikan link antar halaman sehingga ketiganya bisa saling berkaitan,                                  ditambah lagi link dengan sebuah koneksi download pada layanan yg berbeda, sesuai                                     dengan file yang ingin di download guys..


Bagaimana kawaNn, apakah kallian udah ada gambaran mengenai konsep nya? kalu belum ya jangan di terusin preNn ( gak tanggung ya aq kalu ntar tiba2 ada yang langsung pusing, hehe ^_^ )
silahkan mencoba latian guys..
See you next time..
Bye...

Category: 0 komentar

GRAFIK BATANG STATIS DI HTML

Diposting oleh Unknown

Halo KawaNn..
ini adalah tutorial baru lagi yang saya temuin dan coba aq share kan lagi sama kalian, moga pembelajaran kali ini semakin lebih baik ( mksudnya sih nambah ilmu aja, hehe ). sebenarnya mudah sih kalu ngerti konsepan nya, tapi kalu yang belum tau sama sekali ya pasti bakalan pusing 7 keliling, seperti saya pada awalnya, tapi akhirnya bisa juga terselesaikan.
Pada dasarnya pembuatan grafik ini menggunakan elemen pembuatan tabel, trus untuk menegak kan tabel yang ingin kalian buat. bisa menggunakan perintah "rowspan" kemudian atur letak dan ketinggian nya, merubah satu sama dengan merubah semuanya.

Sponsored by : 

 
Untuk lebih jelasnya bisa dilihat pada script yang sudah aq share kan :


<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Grafik</title>
</head>
<body>
<table border=0 align="center" cellspacing=0 cellpadding=3>
<caption><b>GRAFIK PERBANDINGAN SIKAP</b></caption>
<pre>
<font face="consolas ">
@andibayu.blogspot.com</br>
209533420400
pti b 2009
</font>
</pre>

<tr>
<td align="right">100</td>
<td rowspan=10 bgcolor=black></td>
<td width="25" height="20" colspan=25>
</tr>

<tr>
<td align="right">90</td>
<td width="15" height="20" colspan=26></td>
</tr>

<tr>
<td align="right">80</td>
<td width="15" height="20" colspan=25></td>
</tr>

<tr>
<td align="right">70</td>
<td width ="30" rowspan=7></td>
<td width ="20" height="30" rowspan=2></td>
<td width ="20" height="200" bgcolor=aqua rowspan=7></td>
<td width ="20" height="20" rowspan=1></td>
<td width ="20" rowspan=3></td>
<td width ="20" bgcolor=purple rowspan=7></td>
<td width ="20" rowspan=7></td>

<td width ="20" rowspan=1></td>
<td width ="20" rowspan=3></td>
<td width ="20" rowspan=5></td>
<td width ="20" rowspan=5></td>
<td width ="20" rowspan=4></td>
<td width ="20" rowspan=7></td>

<td width ="20" rowspan=3></td>
<td width ="20" rowspan=3></td>
<td width ="20" rowspan=3></td>
<td width ="20" rowspan=4></td>
<td width ="20" rowspan=5></td>
<td width ="20" rowspan=7></td>

<td rowspan=5></td>
<td rowspan=6></td>
<td rowspan=6></td>
<td rowspan=4></td>
<td rowspan=3></td>

<td width ="15" rowspan=7></td>
</tr>

<tr >
<td align="right">60</td>
<td width ="15" bgcolor=yellow rowspan=6></td>
<td width ="15" height="120" bgcolor=red rowspan=6></td>
</tr>

<tr>
<td align="right">50</td>
<td width ="15" height="120" rowspan=5 bgcolor=red></td>
</tr>

<tr >
<td align="right">40</td>
<td width ="15" height="80" bgcolor=grey rowspan=4></td>
<td width ="15" bgcolor=aqua rowspan=4></td>
<td width="15" bgcolor=red rowspan=4></td>
<td width="15" bgcolor=aqua rowspan=4></td>
<td width="15" bgcolor=yellow rowspan=4></td>
<td width="15" bgcolor=purple rowspan=4></td>
</tr>

<tr >
<td align="right">30</td>
<td width ="15" height="60" bgcolor=purple rowspan=3></td>
<td width ="15" bgcolor=grey rowspan=3></td>
<td width ="15" bgcolor=grey rowspan=3></td>
</tr>

<tr >
<td align="right">20</td>
<td width ="15" height="40" bgcolor=yellow rowspan=2></td>
<td width ="15" bgcolor=grey rowspan=2></td>
<td width="15" bgcolor=purple rowspan=2></td>
<td width="15" bgcolor=red rowspan=2></td>
</tr>

<tr >
<td align="right">10</td>
<td width="15" height="20" bgcolor=aqua rowspan=1></td>
<td width="15" bgcolor=yellow rowspan=1></td>
</tr>

<tr>
<td></td>
<td height="25" colspan=25 bgcolor=black></td>
</tr>

<tr>
<td colspan=3></td>
<td colspan=5 align="center"><b>Andi</b></td>
<td></td>
<td colspan=5 align="center"><b>Agus</b></td>
<td></td>
<td colspan=5 align="center"><b>Riris</b></td>
<td></td>
<td colspan=5 align="center"><b>Melinda</b></td>
<td></td>
</table>

<br>
<br>

<table border=0 align="left" cellspacing=3 cellpadding=3>
<tr>
<td><b><i>Keterangan:</i></b></td>
</tr>

<tr>
<td bgcolor=red width="40"></td>
<td><i> : Pemarah</i></td>
</tr>

<tr>
<td bgcolor=aqua width="40"></td>
<td><i> : Mudah Bergaul</i></td>
</tr>

<tr>
<td bgcolor=yellow width="40"></td>
<td><i> : Mudah Memaafkan</i></td>
</tr>

<tr>
<td bgcolor=grey width="40"></td>
<td><i> : Pendendam</i></td>
</tr>

<tr>
<td bgcolor=purple width="40"></td>
<td><i> : Kritis </i></td>
</tr>

</table>


</body>
</html>

gimana?? udah ngerti? silahkanlangsung di coba..
agar lebih membantu lebih memahami lagi, di sini aq tampilkan hasil dari script diatas :





















Nah, gambar diatas adalah hasil tampilan dari script yang sudah saya share kan, semoga pembelajaran kali ini semakin dapat memberikan kebermanfaatan bagi saya pribadi khususnya dan kalian semua pada umumnya guys....
Sekian dari saya, apabila ada kekurangan di di berikan saran dan kritik yang membangun ya preNn. makasiHh..
See you next time..
Bye..

Category: 0 komentar

Tabel Dengan Fitur Pengelompokan pada HTML

Diposting oleh Unknown

Ini adalah lanjutan tutorial saya dari postingan sebelumnya Gan, semakin banyak tutorial yang saya pelajari di html ternyata membuat saya semakin berkreasi kembali untuk mencoba men share apa yang saya coba, mungkin tutorial ini nantinya bisa berguna bagi kalian yang sedang belajar html.

Sponsored By : 
Ini adalah Scipt nya kawaNn, jika kesalahan mohon di share ilmunya, karena ini sifatnya pembelajaran jadi kita bisa saling share ilmu.. Keys
silahkan diamati --> dianalisis --> jangan di apalin ( isa semalem g tidur nanti, hehe )

<!DOCTYPE HTML>
<html lang="en">
<head>
<title> TABEL KOREKSI </title>
</head>
<body>
<table border="10" cellspacing=5 frame="hsides" rules="groups">
<caption><b>TABEL PERBANDINGAN SIKAP</b></caption>

<pre>
<font face="consolas ">
@andibayu.blogspot.com</br>
209533420400
pti b 2009
</font>
</pre>

<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<tr><th width="35">No.<th width="250">Spesifikasi Sikap
<th width="50">Poin
<th width="200"> Andi
<th width="200">Agus
<th width="200">Melinda
<th width="200">Riris</tr>

<tbody>
<tr><td align="center">1
<td>Kerja Keras
<td align="center">8<td align="center">X
<td align="center">X
<td align="center">-
<td align="center">-
</tr>
<tr><td align="center">2
<td>Tekun
<td align="center">9<td align="center">X
<td align="center">X
<td align="center">X
<td align="center">-
</tr>
<tr><td align="center">3
<td>Tidak Sombong
<td align="center">6<td align="center">X
<td align="center">-
<td align="center">-
<td align="center">-
</tr>
<tr><td align="center">4
<td>Sabar
<td align="center">7<td align="center">X
<td align="center">-
<td align="center">-
<td align="center">-
</tr>
<tr><td align="center">5
<td>Pemaaf
<td align="center">10<td align="center">X
<td align="center">-
<td align="center">X
<td align="center">-
</tr>
<tbody>
<tr><td align="center">6
<td>Pemalas
<td align="center">-5<td align="center">-
<td align="center">-
<td align="center">X
<td align="center">X
</tr>
<tr><td align="center">7
<td>Cengeng
<td align="center">-3<td align="center">-
<td align="center">-
<td align="center">X
<td align="center">X
</tr>
<tr><td align="center">8
<td>Egois
<td align="center">-7<td align="center">-
<td align="center">X
<td align="center">-
<td align="center">X
</tr>
<tr><td align="center">9
<td>Suka Hutang
<td align="center">-10<td align="center">-
<td align="center">X
<td align="center">X
<td align="center">X
</tr>
<tr><td align="center">10
<td>Pemarah
<td align="center">-11<td align="center">-
<td align="center">X
<td align="center">-
<td align="center">X
</tr>
<tbody>
<tr>
<td colspan=3 align="center"><b>Total Point</b></td>
<td align="center">40</td>
<td align="center">-11</td>
<td align="center">1</td>
<td align="center">-36</td>
</tr>
</table>
</br></br>
<i>Source: Script Magazine - February. 2011 </i></br>
<br>&copy; andibayu </br>

</body>
</html>

Rumit juga sih script nya, namun itu semua menyenangkan kalu kita liat hasilnya sesuai dengan apa yang kita inginkan ( benar kan!! ), so ini kawan untuk hasil tampilan dari script html di atas :
Sekali lagi tutorial ini hanya sebagai pembelajaran bagi saya khususnya di bidang IT, yang mengkaji masalah HTML, karena pada dasarnya pembelajaran sudah bukan menjadi hal asing lagi di era teknologi seperti saat ini saat ini.
Semoga  Tutorial html ini bisa membawa manfaat bagi pembaca, sampai jumpa di pembelajaran selanjutnya...

Bye...

Category: 0 komentar

Cara Membuat Halaman Web Yang Simpel

Diposting oleh Unknown


Ini adalah tutorial kalu kita pengen buat halaman web yang sederhana guys, tapi ini cuma sekedar contoh halaman biasa aja karena saya sendiri asih dalam tahap pembelajaran, jadi mohon di maklumi jika masih terjadi kesalahan script di sana sini. ( kalu  aq sih ngomong nya ya sip sip aja, kan kerjaan Q, hehe), dari bahan ini setidaknya kalian bisa contoh dan kembangin lagi, karena aq yakin kalian lebih kreatif dan inovatif ( harapan saya kepada pembaca )

<!DOCTYPE HTML>
<html lang="en">

<hr color="yellow" />
<head>
<title>the story</title>
</head>
<body background="bus.jpg">
<link rel ="icon" href ="rap.ico">
<h1><font face="constantia">
<font color=" brown "> MUSIC IS MY LIFE</h1>
<hr color="brown" />
 <ol>
<li>Picture</li>
<img src="andi.jpg" width=200 height=150 alt="MUSIC IS MY LIFE"/>
<li>Name :</li>
BAYU ANDI SULISTIYA

<li>AGAMA :</li>
Moslem

<li> Lagu di sukai saat ini :</li>
<ul>
<li>a.Steven Coconut, dengan karakter alunan musik reage nya yang seakan larut dalam alunan nya</li>
<li>b.Evanenscene, dengan karakter music pop rock yang kalem namun metal </li>
</ul>

<li> Tentang Music :</li>
Saya pikir dengan musik banyak bermunculan inovasi dan kreasi baru, mungkn itu hanya muncul pada diri saya, ntah dengan anda..
<p>Tiap orang kan punya karakter yg berbeda, tentunya anda pasti punya sumber inspirasi yang Unik juga..
</ol>
</li> <hr color="red" width=100 / align=left>

<hr color="blue" />
</body>
</html>
 Untuk tampilan programnya seperti ini kawaNn :




Ya, begitulah preNn yang bisa saya Unggah, semoga tutorial ini membawa manfaat bagi kalian semua..
Silahkan di tunggu the next tutorial mengenai fiture2 di hml.. akan saya posting lagi...

See you next time..

Category: 0 komentar
Langganan: Postingan (Atom)
andibayu. Diberdayakan oleh Blogger.

PEMBELAJARAN BERBASIS ONLINE