Alusplus

Tutorial HTML 10 - Membuat Daftar

noreply@blogger.com (Anonymous) — Thu, 1 Mar 2012 12:21:00 +0700

List atau daftar pada HTML yang sering di pakai umumnya ada dua yaitu daftar beraturan dan daftar tidak beraturan

<html>
<body>

<h4>Daftar beraturan (ordered lists)</h4>
<ol>
<li>Gula</li>
<li>Keju</li>
<li>Mentega</li>
</ol>

<h4>Daftar tidak beraturan (unordered lists)</h4>
<ul>
<li>Rusa</li>
<li>Kerbau</li>
<li>Zebra</li>
</ul>

</body>
</html>

Coba di sini! >>>

Nah ini hasilya.

Daftar beraturan (ordered lists)

Gula
Keju
Mentega

Daftar tidak beraturan (unordered lists)

Rusa
Kerbau
Zebra

Sudah tau kan bedanya.
Tag <ol> (di gunakan untuk membuat daftar secara berurut atau beraturan, sedangkant tag <ul> (unordered list) diginakam untuk membuat daftar tidak beraturan, dan untuk daftarnya menggunakan tag <li> (list item).

Daftar Berurut (Ordered List)

Seperti disebutkan diatas, untuk membuat daftar secara berurut pada HTML yaitu menggunakan tag <ol> (ordered list), sedangkan untuk menentukan daftarnya yaitu dengan tag <li> (list item).

Daftar HTML secara berurut ditandai dengan angka, namun bisa juga diganti dengan huruf atau angka Romawi.

<html>
<body>

<h4>Daftar dengan angka</h4>
<ol>
<li>Gula</li>
<li>Keju</li>
<li>Mentega</li>
</ol>

<h4>Daftar dengan huruf</h4>
<ol type="A">
<li>Gula</li>
<li>Keju</li>
<li>Mentega</li>
</ol>

<h4>Daftar dengan huruf kecil</h4>

<ol type="a">

<li>Gula</li>

<li>Keju</li>

<li>Mentega</li>

</ol>



<h4>Daftar dengan anka Romawi</h4>


<ol type="I">

<li>Gula</li>

<li>Keju</li>

<li>Mentega</li>

</ol>



<h4>Daftar dengan anka Romawi kecil</h4>

<ol type="i">

<li>Gula</li>

<li>Keju</li>

<li>Mentega</li>

</ol>




</body>

</html>

Coba di sini! >>>

Daftar Tidak Berurut (Unordered List)

Daftar tidak beaturan di tentukan oleh tag <ul> (unordered list) dan untuk daftarnya menggunakan tag <li>.

Daftar tidak beraturan ditandai dengan lingkaran hitam kecil, namun bisa juga di ganti.

<html>
<body>

<ul type="disc">
<li>Gula</li>
<li>Keju</li>
<li>Mentega</li>
</ul>
<br />

<ul type="circle">
<li>Gula</li>
<li>Keju</li>
<li>Mentega</li>
</ul>
<br />

<ul type="square">
<li>Gula</li>
<li>Keju</li>
<li>Mentega</li>
</ul>

</body>
</html>

Coba di sini! >>>

Daftar Definisi (Definition List)

Daftar definisi digunakan untuk mendeskripsikan istilah, contoh seperti pada kamus. Untuk membuatnya dengan menggunakan tag <dl> (definition list).
Untuk istilahnya ditentukan oleh tag <dt> (definition term), dan untuk mendeskripsikan istilah tadi yaitu dengan menggunakan tag <dd> (defining definition).

Supaya tidak bingung lihat contoh dibawah

<html>
<body>

<dl>
<dt>Gunting</dt>
<dd>Alat yang di gunakan untuk memotong</dd>

<dt>Lem</dt>
<dd>Bahan yang digunakan untuk menempelkan/merekatkan benda</dd>

<dt>Kertas</dt>
<dd>Bahan yang tipis dan rata, hasil dari kompresi serat yang berasal dari pulp</dd>
</dl>

</body>
</html>

Coba di sini! >>>

Hasilnya

Gunting: Alat yang di gunakan untuk memotong
Lem: Bahan yang digunakan untuk menempelkan/merekatkan benda
Kertas: Bahan yang tipis dan rata, hasil dari kompresi serat yang berasal dari pulp

Perhatikan, setiap istilah pada daftar, terdapat penjelasan dibawahnya.

Daftar Didalam Daftar

Langsung saja lihat contoh berikut

<html>
<body>

<ul>
<li>Laptop</li>
<li>Handphone</li>
  <ul type="circle">
   <li>Feature Phone</li>
   <li>Smatphone</li>
      <ul type="square">
      <li>Android</li>
      <li>Symbian</li>
      <li>Windows Phone</li>
      </ul>
   </ul>
<li>Tablet</li>
</ul>

</body>
</html>

Coba di sini! >>>

Hasilnya seperti ini

Laptop
Handphone

Feature Phone
Smatphone

Android
Symbian
Windows Phone

Tablet

Tutorial HTML 9 - Membuat Tabel

noreply@blogger.com (Anonymous) — Mon, 27 Feb 2012 14:46:00 +0700

Tabel terdiri dari baris dan kolom, pada dokumen HTML tabel di tentukan oleh tag <table> dan untuk membuat barisnya dengan tag <tr>, serta kolom nya di tentukan oleh tag <td> kependekan dari table data, pada tag td ini yang nantinya dapat di isi dengan teks, link, gambar, dan lainnya, bahkan dapat berisi tabel lain.

<html>
<body>

<table border="1">

<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
<tr>
<td>Baris 3, kolom 1</td><td>Baris 3, kolom 2</td>
</tr>

</table>

</body>
</html>

Coba di sini! >>>

Contoh diatas akan menghasilkan tabel seperti dibawah

Baris 1, kolom 1	Baris 1, kolom 2
Baris 2, kolom 1	Baris 2, kolom 2
Baris 3, kolom 1	Baris 3, kolom 2

Atribut Border

Border atau garis pembatas adalah atribut untuk membuat garis pada tabel HTML, tanpa atribut ini tabel pada HTML tidak akan memiliki garis-garis pembatas

<html>
<body>

<h4>Tabel tanpa atribut border</h4>
<table>
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Tabel dengan nilai border 1</h4>
<table border="1">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Tabel dengan nilai border 5</h4>
<table border="5">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

</body>
</html>

Coba di sini! >>>

Judul Tabel

Membuat judul atau header pada tabel memakai tag <th>, tag ini akan menampilkan teks menjadi tebal dan posisi di tengah.

<html>
<body>

<h4>Header tabel</h4>
<table border="1">
<tr>
<th>Nama</th><th>Telepon</th><th>Telepon</th>
</tr>
<tr>
<td>Heri</td><td>123456</td><td>456789</td>
</tr>
</table>

<h4>Header vertikal</h4>
<table border="1">
<tr>
<th>Nama : </td><td>Heri</td>
</tr>
<tr>
<th>Telepon : </th></td><td>123456</td>
</tr>
<tr>
<th>Telepon : </th></td><td>456789</td>
</tr>
</table>

</body>
</html>

Coba di sini! >>>

Mengatur Jarak Antara Sel

Jarak antara sel pada tabel HTML diatur oleh atribut cellspacing

<html>
<body>

<h4>Tabel tanpa atribut cellspacing</h4>
<table border="1">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Tabel dengan nilai atribut cellspacing="0"</h4>
<table border="1" cellspacing="0">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Tabel dengan nilai atribut cellspacing="10"</h4>
<table border="1" cellspacing="10">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

</body>
</html>

Coba di sini! >>>

Penting: Kebanyakan tabel pada umumnya tidak diberi jarak antara sel-selnya, tapi pada tabel HTML secara default akan menghasilkan jarak antara sel, jadi jika ingin membuat tabel secara umum (tanpa jarak antara sel) berikan atribut cellspacing dengan nilai nol (cellspacing="0").

Mengatur Jarak Antara konten dengan garis sel

mengatur jarak antara konten pada sel dengan batas pinggir cel tersebut dapat dilakukan dengan menambahkan atribut cellpadding

<html>
<body>

<h4>Tabel tanpa atribut cellpadding</h4>
<table border="1">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Tabel dengan nilai atribut cellpadding="10"</h4>
<table border="1" cellpadding="10">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

</body>
</html>

Coba di sini! >>>

Sel yang Menjangkau Lebih Dari Satu Baris Atau Kolom

Untuk membuat sel pada tabel yang menjangkau lebih dari satu baris atau kolom yaitu dengan memakai atribut colspans dan rowspan. Dari pada bingung lihat dan praktekan contoh dibawah

<html>
<body>

<h4>Sel yang menjangkau 2 kolom</h4>
<table border="1">
<tr>
<th>Nama</th><th colspan="2">Telepon</th>
</tr>
<tr>
<td>Heri</td><td>123456</td><td>456789</td>
</tr>
</table>

<h4>Header vertikal</h4>
<table border="1">
<tr>
<th>Nama : </td><td>Heri</td>
</tr>
<tr>
<th rowspan="2">Telepon : </th></td><td>123456</td>
</tr>
<tr>
</td><td>456789</td>
</tr>
</table>

</body>
</html>

Coba di sini! >>>

Menambah Keterangan Pada Tabel

Untuk menambahkan keterangan berupa teks pada tabel yaitu dengan menggunakan tag <caption>.

<html>
<body>

<table border="1">
<caption>Pendapatan bulanan</caption>
<tr>
<th>Bulan</th><th>Pendapaatan</th>
</tr>
<tr>
<td>Januari</td><td>Rp 3.000.000</td>
</tr>
<tr>
<td>Februari</td><td>Rp 5.000.000</td>
</tr>
</table>

</body>
</html>

Coba di sini! >>>

Atribut Frame

Atribut ini di gunakan untuk mengatur border atau batasan pada tabel

<html>
<body>

<h4>Dengan atribut frame="border"</h4>
<table frame="border">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Dengan atribut frame="box"</h4>
<table frame="box">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Dengan atribut frame="void"</h4>
<table frame="void">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>



<h4>Dengan atribut frame="above"</h4>
<table frame="above">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Dengan atribut frame="below"</h4>
<table frame="below">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Dengan atribut frame="hsides"</h4>
<table frame="hsides">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Dengan atribut frame="vsides"</h4>
<table frame="vsides">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Dengan atribut frame="lhs"</h4>
<table frame="lhs">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>

<h4>Dengan atribut frame="rhs"</h4>
<table frame="rhs">
<tr>
<td>Baris 1, kolom 1</td><td>Baris 1, kolom 2</td>
</tr>
<tr>
<td>Baris 2, kolom 1</td><td>Baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>

Coba di sini! >>>

Jika kalian tidak melihat semua border pada hasil contoh di atas, berarti browsernya tidak mendukung atribut frame

Tag Lain di Dalam Tabel

Tag td (tabel data) pada tabel dapat mengandung elemen HTML lainnya termasul tabel

<html>
<body>

<table border="1">
<tr>
<td>
<h1>Judul</h1>
<p>Ini paragraf</p>
<p>Dan ini paragraf lainnya</p>
</td>
<td>Sel ini mengandung tabel
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>

<tr>
<td>Pada sel ini ter dapat daftar
<ul>
<li>Burung</li>
<li>Kelinci</li>
<li>Ikan</li>
</ul>
</td>
<td>Teks biasa</td>
</tr>
</table>

</body>
</html>

Coba di sini! >>>

Tag Colgroup dan Col

Tag <colgroup>

Digunakan untuk mengelompolkan kolom pada tabel untuk di fornat. Tag ini hanya bisa digunakan di dalam elemen <table>

<html>
<body>

<table border="1">
<colgroup span="2" style="background-color:red;"></colgroup>
<colgroup style="background-color:green;">

<tr>
<th>Nomor</th><th>Nama barang</th><th>Harga</th>
</tr>


<tr>

<td>1</td><td>CPU</td><td>Rp3.000.000</td>

</tr>

<tr>

<td>2</td><td>Monitor</td><td>Rp1.000.000</td>

</tr>


</table>

</body>
</html>

Coba di sini! >>>

Tag <col>

Mendefinisikan nilai atribut untuk satu atau lebih kolom dalam sebuah tabel, hampir sama dengan colgroup tapi tag col ini adalah tag tunggal
Tag col hanya dapat di gunakan didalam elemen <table> atau <colgroup>.

<hml>
<body>

<table border="1">
<colgroup>
<col style="background-color:blue; width:100px;" />
<col span="2" style=" background-color:red; width:200px;" />
</colgroup>

<tr>
<th>Nama</th><th>ID</th><th>Kota</th>
</tr>


<tr>

<td>Heru</td><td>1234567</td><td>Bandung</td>

</tr>

<tr>

<td>Randi</td><td>7654321</td><td>Jakarta</td>

</tr>
</table>

</body>
</html>

Coba di sini! >>>

Tag <thead> <tbody> dan <tfoot>

<html>
<body>

<table border="1">
<tfoot>
<tr>
<td>Jumlah</td><td>25</td>
</tr>
</tfoot>



<thead>

<tr>

<th>Nama</th><th>Nilai</th>

</tr>

</thead>

</tbody>

<tr>

<td>Heru</td><td>8</td>

</tr>

<tr>

<td>Randi</td><td>9</td>

</tr>


<tr>

<td>Sandi</td><td>8</td>

</tr>

</tbody>

</table>

</body>
</html>

Coba di sini! >>>

Pada contoh diatas bisa kita lihat untuk bagian judul <thead> di letakan ditengah, isi (tbody) dibawah, dan untuk kaki (tfoot) di paling atas. Tapi pada hasilnya akan tetap berurut yaitu kepala, isi lalu kaki.

Nama	Nilai
Jumlah	25
Heru	8
Randi	9
Sandi	8

Tutorial HTML 8 - Menampilkan Gambar

noreply@blogger.com (Anonymous) — Sun, 26 Feb 2012 13:04:00 +0700

Menampilkan gambar pada HTML yaitu dengan menggunakan tag <img> dan atribut scr.

Tag Img dan Atribut Src

Tag <img> adalah tag tunggal dan harus memakai atribut, atribut scr kependekan dari source yang berarti sumber digunakan untuk menentukan alamat atau sumber dari gambar yang akan di tampilkan.

<html>
<body>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtRO0TPNBllFAVPMrml4jnXZMBTMdFpW7Bu7a01QVdT07sU6gLFydwITcOBoceokUYqaQFFh_vqEIa-ru4ibU4GXWcDI_Ca3jvDj6tPHiutJngEDn1YNeqe8pJjaJ_ViKV7oLnEvReqHI/s320/logo+alusplus.png" />

</body>
</html>

Coba di sini! >>>

Contoh di atas menggunakan alamat https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtRO0TPNBllFAVPMrml4jnXZMBTMdFpW7Bu7a01QVdT07sU6gLFydwITcOBoceokUYqaQFFh_vqEIa-ru4ibU4GXWcDI_Ca3jvDj6tPHiutJngEDn1YNeqe8pJjaJ_ViKV7oLnEvReqHI/s320/logo+alusplus.png sebagai nilai dari atribut scr. Nah itu adalah alamat atau sumber dari gambarnya, hasilnya akan menampilka gambar seperti dibawah ini

Menambahkan Atribut Alt

Atribut alt (alternative) digunakan sebagai teks alternatif jika gambar yang di maksud tidak bisa di tampilkan karena beberapa alasan seperti koneksi yang lambat, error pada atribut scr, dan lainnya.

<html>
<body>

<img src="mobil.jpg" alt="mobil sedan">

</body>
</html>

Coba di sini! >>>

Pada contoh diatas jika gambar yang dimaksud tidak muncul, maka akan di gantikan dengan teks mobil sedan. Tapi pada beberapa browser mungkin tidak muncul, seperti pada Chrome.

Menambahkan atribut alt juga baik untuk seo, yaitu pada pencarian gambar.

Mengatur Tinggi dan Lebar Gambar

Mengatur tinggi gambar dapat menggunakan atribut heigh dan untuk mengatur lebar dengan atribut width

<html>
<body>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtRO0TPNBllFAVPMrml4jnXZMBTMdFpW7Bu7a01QVdT07sU6gLFydwITcOBoceokUYqaQFFh_vqEIa-ru4ibU4GXWcDI_Ca3jvDj6tPHiutJngEDn1YNeqe8pJjaJ_ViKV7oLnEvReqHI/s320/logo+alusplus.png" alt="alusplus logo" width="200px" height="200px"/>

</body>
</html>

Coba di sini! >>>

Pada contoh diatas atribut width (lebar) di beri nilai 200 piksel, begitu juga dengan height (tinggi) yaitu 200 piksel. Maka akan menghasilkan gambar seperti di baawah

Mengatur Posisi Gambar

pesisi gambar tergantung di mana kita meletakan tag <img>.
Contoh teks1<img>teks2 , maka gambar akan muncul sesudah teks1 dan sebelum teks2.

Peraktekan contoh di bawah untuk melihat contoh serta cara lainnya


<html>
<body>

<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" />Gambar sebelum teks</p>

<br/>

<p>Gambar sesudah teks<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" /></p>

<br/><hr />

<p>Gambar dengan atribut align nilai left<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" align="left" /></p>

<br/>

<p>Gambar dengan atribut align nilai right<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" align="right" /></p>

<br/>

<p>Gambar <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" align="bottom" /> dengan atribut align nilai bottom</p>

<br/>

<p>Gambar <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" align="middle" /> dengan atribut align nilai middle</p>

<br/>

<p>Gambar <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" align="top" /> dengan atribut align nilai top</p>

<br/>

</body>
</html>

Coba di sini! >>>

Gambar Sebagai Link

Pada tutorial sebelumnya juga sudah di bahas cara membuat link termasuk membuat gambar sebagai link

<html>
<body>

<a href="http://alusplus.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" alt="bola" /></a>

</body>
</html>

Coba di sini! >>>

Ini adalah hasil contoh di atas

Menentukan Bagian Gambar Yang Akan Menjadi Link

Dengan ini kita dapat menentukan bagian mana dari gambar yang dapat di klik sebagai link, jadi satu gambar dapat menghasilkan beberapa link dengan menentukan koordinat pada gambar.

Untuk lebih jelasnya lihat di sini

Tutorial HTML 7 - Membuat Link

noreply@blogger.com (Anonymous) — Fri, 24 Feb 2012 11:10:00 +0700

Link digunakan untuk berpindah dari halaman ke halaman lain, atau dari website yang satu ke website lainya, atau berpindah ke bagian lain pada halaman yang sama saat kita klik.

Link berbentuk teks atau gambar, jika kita mengarahkan kursor ke link tersebut, maka kursor akan berubah dari bentuk panah menjadi tangan, yah sudah pada tau lah.

Untuk membuat link pada dokumen HTML menggunakan tag <a> dan atribut href

<html>
<body>

<a href="http://alusplus.blogspot.com">Ini sebuah link</a>

</body>
</html>

Coba di sini! >>>

Pada contoh diatas alamat dari link nya di tentukan oleh atribut href.

Atribut Target

Dengan menggunakan atribut ini, maka saat kita men klik link tersebut maka akan terbuka pada tab baru

<html>
<body>

<a href="http://alusplus.blogspot.com" target ="_blank">Link ini akan terbuka pada tab baru</a>

</body>
</html>

Coba di sini! >>>

Contoh diatas menggunakan atribut target dan _blank sebagai nilainya (target ="_blank")

Gambar sebagai link

<html>
<body>

<a href="http://alusplus.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtRO0TPNBllFAVPMrml4jnXZMBTMdFpW7Bu7a01QVdT07sU6gLFydwITcOBoceokUYqaQFFh_vqEIa-ru4ibU4GXWcDI_Ca3jvDj6tPHiutJngEDn1YNeqe8pJjaJ_ViKV7oLnEvReqHI/s320/logo+alusplus.png">
</a> 

</body>
</html>

Coba di sini! >>>

Contoh di atas akan menghasilkan gambar sebagai link seperti gambar di bawah ini yang dapat kita klik

Link Menuju Lokasi atau bagian pada Halaman yang sama

<html>
<body>

<p><a href="#bagian3">Lihat bagian 3</a></p>
<p><a href="#bagian6">Lihat bagian 6</a></p>
<p><a href="#b10">Lihat bagian 10</a></p>


<h2>Bagian 1</h2>
<p>Isi................................</p>

<h2>Bagian 2</h2>
<p>Isi................................</p>

<h2><a name="bagian3">Bagian 3</a></h2>
<p>Isi................................</p>

<h2>Bagian 4</h2>
<p>Isi................................</p>

<h2>Bagian 5</h2>
<p>Isi................................</p>

<h2><a name="bagian6">Bagian 6</a></h2>
<p>Isi................................</p>

<h2>Bagian 7</h2>
<p>Isi................................</p>

<h2>Bagian 8</h2>
<p>Isi................................</p>

<h2>Bagian 9</h2>
<p>Isi................................</p>

<h2><a name="b10">Bagian 10</a></h2>
<p>Isi................................</p>

</body>
</html>

Coba di sini! >>>

Saat kita klik link-link diatas pada contoh, maka browser akan otomatis menuju bagian tertentu pada halaman tersebut.

Link untuk mengirim Email

<html>
<body>

<p>Ini adalah link email:
<a href="mailto:nama@contoh.com?Subject=Halo%20Kawan&body=Salam%20kenal%20sobat">Kirim email!</a>
</p>

</body>
</html>

Coba di sini! >>>

Contoh diatas akan menghasilkan link yang jika di klik akan mengirim email ke nama@contoh.com dengan subjek Halo Kawan serta isi Salam kenal sobat

Kirim email!

Spasi antara kata pada subjek dan isi memakai %20 untuk memastikan browser akan menampikan teks dengan benar.

Contoh lainnya untuk mengirim email ke banyak kontak

<html>
<body>

<p>Ini adalah link email: 
<a href="mailto:nama@contoh.com?
cc=nama2@contoh.com&bcc=nama3@contoh.com&Subject=Undangan%20ulang%20tahun&body=Hai%20kawan-kawan%20kalian%20diundang%20untuk%20datang%20kepesta%20ulang%20tahunku">Kirim email!</a>
</p>

</body>
</html>

Coba di sini! >>>

Kirim email!

Contoh diatas akan mengirim email ke 3 alamat.

Tutorial HTML 6 - Mengatur Font HTML

noreply@blogger.com (Anonymous) — Wed, 22 Feb 2012 19:03:00 +0700

Tag <font> di gunakan untuk mengatur ukuran, warna, serta jenis font pada teks.

Tag font beserta atributnya sebenarnya sudah tidak direkomendasikan lagi oleh W3C.
Pada HTML4 penggunaannya sudah usang dan di tinggalkan dan di hapus pada HTML5.
Dianjurkan untuk menggunakan CSS untuk menggantikannya

Contoh HTML dengan tag <font>

<html>
<body>

<p>

<font size="20px" face="sans" color="red" >Paragraf ini memiliki ukuran 20 piksel dengan font sans dan berwarna merah.
</font>
</p>

</body>
</html>

Contoh pengaturan Font dengan CSS

<html>
<body>

<p style="font-family:ubuntu;">Paragraf ini memakai jenis font Ubuntu</p>
<p style="font-size:25px;">Paragraf ini berukuran 25 piksel</p>
<p style="color:blue;">Teks pada paragraf ini berwarna biru</p>
<br />

<p style="font-family:ubuntu; font-size:30px; color:blue; ">Teks pada paragraf ini </p>

</body>
</html>

Tutorial HTML 5 - Format Teks

noreply@blogger.com (Anonymous) — Tue, 21 Feb 2012 19:40:00 +0700

Memformat teks seperti membuat teks menjadi miring, tebal, besar, dan sebagainya dapat dilakukan dengan menambahkan tag-tag untuk memformat HTML.
Coba lihat contoh berikut!

<html>
<body>

<p><b> Teks tebal </b></p>
<p><strong> Teks tebal dengan tag strong </strong></p>
<p><i> Teks miring </i></p>
<p><em> Teks miring dengan tag em (emphasize) </em></p>
<p><u>Teks ini bergaris bawah </u></p>
<p><strike> Teks tercoret dengan garis tengah </strike></p>
<p><big> Teks ini besar </big> </p>
<p><small> Teksini kecil</small></p>
<p><tt> Teks mesin ketik</tt></p>
<p>Teks kecil di bawah: H<sub>2</sub></p>
<p>Teks kecil di atas: 20<sup>10</sup></p>

</body>
</html>

Kode HTML di atas akan menghasilkan seperti dibawah ini

Format Teks HTML

<html>
<body>

<p><b>Teks tebal</b></p>
<p><strong>Teks tebal (strong)</strong></p>
<p><i>Teks miring</i></p>
<p><em>Teks miring (emphasize)</em><p>
<p><u>Teks bergaris bawah</u></p>
<p><strike>Teks tercoret</strike></p>
<p><big>Teks besar</big></p>
<p><small>Teks kecil</small></p>
<p><sub>Teks kecil di bawah</sub></p>
<p><sup>Teks kecil di atas</sup></p>
<p><ins>Teks bergaris bawah (Inserted text) </ins></p>
<p><del>Teks tercoret (di hapus)</del></p>

</body>
</html>

Perbedaan <b>, <i> dengan <strong>, <em>

Walaupun <b> dengan <strong> dan <i> dengan <em> menghasilkan output yang sama, tapi itu berbeda dalam pengartiannya.
<b> dan <i> mendefinisikan teks tebal dan miring saja. Sedangkan <strong> dan <em> mendefinisikan bahwa sebuah teks diartikan sebagai "penting".
Tapi sekarang semua Browser utama (Firefox, Chrome, Opera, IE, Safari) telah merender (mengubah) <strong> sebagai <b>, dan <em> sebvagai <i>.

Teks yang dihapus dan dimasukan (<del> dan <ins>)

Gunakan tag del dengan ins.
ins digunakan untuk teks yang dimasukan (dipilih), dan tag del menndakakn bahwa teks tersebut dihapus
Praktekan contoh berikut dan lihat hasilnya

<html>
<body>

<p>Saya memilih Partai <del>Satu</del> <ins>Dua</ins></p>

<body>
<html>

Pada cotoh di atas teks satu akan dicoret dan teks dua akan digaris bawahi.
Maksud kalimat di atas adalah memilih Partai Dua, tetapi partai satu sengaja ditampilkan dengan dicoret (tidak dipilih), karena alasan tertentu, ngerti kan maksudnya?

Tag	Fungsi
<b>	Membuat teks tebal (Bold)
<strong>	Membuat teks tebal (Strong)
<i>	Membuat teks miring (Italic)
<em>	Membuat teks miring (Emphasiz)
<u>	Membuat teks bergaris bawah (Underlined)
<strike>	Membuat teks tercoret dengan garis di tengah
<big>	Membuat teks besat (Big)
<small>	Membuat teks kecil (Small)
<sub>	Membuat teks kecil di bawah (Subscript)
<sup>	Membuat teks kecil di atas (Superscript)
<ins>	Membuat teks bergaris bawah (yang benar dari yang di coret) (Inserted)
<del>	Membuat teks dicoret tengah (teks salah) (Deleted)

Kode komputer

<html>
<body>

<code>Teks kode komputer</code>
<kbd>Keyboard input</kbd>
<samp>Sampel kode</samp>
<tt>Teks teletip (Teletype)</tt>
<pre>Teks terformat (Preformatted)</pre>
<var>Teks variabel</var>

</body>
</html>

Kode di atas bagus untuk menampilkan kode komputer, lihat contoh di bawah

<pre>
harga = 1000
if harga:
     print <var>"Harga Barang - "</var>, harga
</pre>

Kode di atas akan menghasilkan tampilan seperti ini

harga = 1000
if harga:
     print "Harga Barang - ", harga

Tag	Fungsi
<code>	Teks kode komputer
<kbd>	Teks keyboard
<samp>	Sampel kode komputer (Sample)
<tt>	Teks Teletip (Teletype)
<pre>	Teks terformat (Preformatted)
<var>	Membuat teks variabel (Variable)

Definisi dan kutipan

Singkatan dan akronim

<html>
<body>

<p>
<abbr title="Tentara Nasional Indonesia">TNI</abbr><br />
<abbr title="Hyper Text Markup Language">HTML</abbr><br />
<abbr title="Random Access Memory">RAM</abbr>
</p>
<p>

<acronym title="Surat Tanda Nomor Kendaraan">STNK</acronym><br />
<acronym title="Kepala Desa">Kades</acronym><br />
<acronym title="Sinema elektronik">Sinetron</acronym>
</p>
<p>Letakan pointer mouse pada teks diatas</p>

</body>
</html>

Dengan meletakan pointer mouse pada teks dengan tag <abbr> atau <acronym>, maka akan tampil teks akronim atau singkatan dari teks tersebut.

Address

Mendefinisikan informasi kontak dari penulis/pemilik dari dokumen HTML

<html>
<body>

<address>
Writteb by Alusplus<br />
<a href="mailto:nama@contoh.com">Email us</a><br />
Address: Jl. dunia maya, indonesia<br />
Phone: +12345678
</address>

</body>
</html>

Arah teks

Contoh dibawah akan membuat teks ditulis dari kanan ke kiri

<html>
<body>

<bdo dir="rtl">Teks ini ditulis dari kanan ke kiri</bdo>
<p>Jika browser kalian mendukung bi-directional override (bdo), maka teks di atas akan ditulis dari kanan ke kiri / right to left (rtl) </p>

</body>
</html>

Kutipan (Quotations)

<html>
<body>

Kutipan panjang:
<blockquote>
Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang. Ini kutipan panjang.
</blockquote>

<p>Browser akan memberikan beberapa jarak dari kiri dan memberikan baris kosong sebelum dan sesudah elemen blockquote</p>

Kutipan pendek: <q>Ini adalah kutipan pendek</q>
<p>Browser akan memberikan tanda kutip antara teks diatas</p>

</body>
</html>

Tag	Fungsi
<abbr>	Membuat singkatan (Abbrevations)
<acronym>	Membuat akronim
<address>	Mendefinisikan informasi kontak dari penulis
<bdo>	Mendefinisikan arah teks (Bi-Directional Override)
<blockquote>	Mendefinisikan kutipan panjang (long quotation)
<q>	Mendefinisikan kutipan pendek (Short quotation)
<cite>	Mendefinisikan kutipan (Citation)
<dfn>	Mendefinisikan istilah (Definition term)

Cara Agar Blog Kita Tidak di Copy Paste

noreply@blogger.com (Anonymous) — Mon, 20 Feb 2012 18:04:00 +0700

Para blogger copy paste memang sangat meresahkan, mereka tidak akan malu untuk meng copy paste artikel tanpa seizin pemiliknya. Mereka juga tidak akan peduli betapa susahnya seseorang membuat sebuah artikel yang bermutu , dan yang paling parah mereka tidak mencantumkan sumber yang mereka copy serta mengaku-ngaku bahwa artikel pada blognya itu asli tulisan mereka.

Nah jika artikel kita tidak ingin jadi korban para plagiator atau blogger copy paste, kita dapat melakukan beberapa cara, salah satunya dengan mematikan fungsi text selecting atau drag teks.

Menurut saya cara ini lebih baik dari pada harus dengan cara mematikan pungsi klik kanan, karena klik kanan memiliki beberapa fungsi lain seperti reload, kembali ke halaman sebelumnya, menyimpan halaman, melihat kode sumber, dan lainnya. Itu dapat membuat pengunjug blog kita kurang nyaman.

Untuk caranya hanya menambahkan code javascript pada widget blogger, yaitu masuk ke blogger, lalu pilih rancangan.
Untuk antar muka baru, klik ikon opsi lainnya lalu pilih tata letak, seperti gambar di bawah

Setelah itu klik Tambahkan Gadget, lalu pilih HTML/JavaScript.

Masukan kode javascript di bawah ini

<script type="text/javascript">

/***********************************************

* Disable select-text script- © Dynamic Drive (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/


//form tags to omit in NS6+:

var omitformtags=["input", "textarea", "select"]



omitformtags=omitformtags.join("|")



function disableselect(e){

if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)

return false

}



function reEnable(){

return true

}



if (typeof document.onselectstart!="undefined")

document.onselectstart=new Function ("return false")

else{

document.onmousedown=disableselect

document.onmouseup=reEnable

}


</script>

Jika sudah klik Simpan, lalu klik Simpan pengaturan

Selesai!

Kode Javascript di atas sangat ampuh, saya sudah coba pada beberapa browser, seperti Firefox, Chrome, Opera, Internet Explorer, dan bekerja dengan baik.

Tapi ingat, cara seperti ini tidak cocok untuk untuk blog yang memiliki banyak script atau tutorial seperti HTML, atau pemrograman lainnya seperti blog saya ini, karena kasian juga kalo para pembacanya harus mengetik kode-kodenya langsung satu-persatu.

Satu lagi, sebenarnya trik ini mungkin hanya berlaku untuk plagiator pemula saja, karena untuk para plagiator kelas atas mereka memiliki beberapa cara untuk mengatasinya.

Tutorial HTML 4 - Mengatasi Masalah Pemformatan Pada HTML

noreply@blogger.com (Anonymous) — Thu, 16 Feb 2012 12:42:00 +0700

Pada tutorial HTML sebelumnya terdapat masalah pada pemformatan paragraf, yaitu jika kita memberi spasi lebih maka hasilnya hanya akan menghasilkan satu spasi saja. Begitupun dengan baris baru, berapa kalipun kita menekan tombol enter untuk memberi baris baru pada dokumen yang kita ketik, malah yang dihasilkan hanya spasi saja (satu spasi).

Lihat contoh kode HTML di bawah

<html>
<body>

<p>Spasi lebih.           spasi lebih.          spasi lebih.           spasi lebih.</p>
<p>
Baris baru lebih.



baris baru lebih.



baris baru lebih.



baris baru lebih.
</p>



<p>Baris baru lebih antar paragraf</p>

</html>
</html>

Kode HTML di atas akan menghasilkan seperti ini

Nah penasaran kan kenapa hasilnya begitu? Ok langsung saja

Spasi

Untuk membuat spasi pada HTML, kita harus menggunakan kode entitas HTML untuk menggantikan spasi yaitu dengan mengetik nama entitas spasi   atau nomor entitas untuk spasi yaitu  ,

Peraktekan contoh dibawah dan lihat hasilnya

<html>
<body>

<p>Spasi lebih.&nbsp;&nbsp;&nbsp;&nbsp;spasi lebih.&#160;&#160;&#160;&#160;spasi lebih.&nbsp;&nbsp;&#160;&#160;spasi lebih.</p>

</body>
</html>

Untuk entitas karakter HTML lainnya, kita akan pelajari di lain waktu

Baris Baru

Seperti di jelaskan diatas, menekan tombol Enter untuk membuat baris baru hanya akan menghasilkan spasi.
Membuat baris baru pada HTML memerlukan sebuah tag yaitu <br />


<html>
<body>

<p>Baris baru lebih.<br /><br /><br />Baris baru lebih.<br /><br /><br />baris baru lebih</p> 

</body>
</html>

Garis Horizontal

Untuk membuat garis horizontal kita memerlukan tag <hr />

Coba lihat hasil dari kode di bawah

<html>
<body>

<p>Dibawah terdapat garis horizontal yang membatasi<hr /></p>
<hr />
<p>garis horizontal di atas</p> 



</body>
</html>

Catatan: Tag br dan hr termasuk tag tunggal, jadi tambahkan garis miring pada tag tersebut seperti ini <br />,<hr />.
Walaupun <br> dan <hr> dapat berjalan di semua browser, tapi menulis <br /> atau <hr /> akan lebih baik, karena pada XML dan XHTML, elemen tanpa tag penutup tidak di izinkan.

Tutorial HTML 3 - Judul dan Paragraf

noreply@blogger.com (Anonymous) — Wed, 15 Feb 2012 21:12:00 +0700

Sebelumnya saya sudah bahas sedikit cara membuat judul dan paragraf pada tutorial HTML pertama, namun itu hanya pengenalan saja. Sekarang saya akan coba bahas lebih detail lagi.

Judul

Judul atau heading merupakan elemen yang penting dalam pembuatan dokumen HTML.
Judul ditentukan oleh tag <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Semakin besar nilainya, maka semakin kecil ukuran teks judulnya.

Coba peraktekan contoh di bawah

<html>
<body>
 
<h1>Ini Sebuah Judul</h1>
<h2>Ini Sebuah Judul</h2>
<h3>Ini Sebuah Judul</h3>
<h4>Ini Sebuah Judul</h4>
<h5>Ini Sebuah Judul</h5>
<h6>Ini Sebuah Judul</h6>
 
</body>
</html>

Code HTML di atas akan menghasilkan seperti ini

Judul sangatlah penting dalam dokumen HTML

Gunakan tag judul hanya untuk membuat judul, jangan menggunakannya untuk membuat teks tebal dan besar, karena mesin pencari menggunakan judul untuk mengindeks struktur dan isi konten dari halaman web kita.

Tag H1 memiliki ukuran teks yang paling besar seharusnya di gunakan untuk judul utama, di lanjutkan H2, dan seterusnya, semakin besar maka judul tersebut semakin kurang penting.

Paragraf

Untuk membuat sebuah dokumen pasti memerlukan paragraf, membuat paragraf pada HTML menggunakan tag <p> yang berarti paragraph.

Coba praktekan dan lihat hasilnya

<html>
<body>

<p>Ini sebuah paragraf</p>
<p>Ini sebuah paragraf</p>
<p>Ini sebuah paragraf</p>

</body>
</html>

Dari hasil kode HTML di atas, kita bisa lihat setiap menambahkan paragraf baru, maka secara otomatis akan terdapat baris kosong antara atas dan bawah paragraf.

Jangan lupa menambahkan tag penutup

<p>Ini sebuah paragraf
<p>Ini sebuah paragraf
<p>Ini sebuah paragraf

Walaupun kode di atas akan di tampilkan dengan benar oleh kebanyakan browser, tapi jangan pedulikan itu. Melupakan tag penutup dapat menghasilkan error atau hasil yang tidak di inginkan.

Catatan: Versi HTML yang akan datang tidak akan mengijinkan untuk melewatkan tag penutup.

HTML Output

Kita tidak akan yakin bagai mana HTML akan ditampilkan, layar besar atau kecil, serta ukuran jendela akan membuat hasil yang berbeda.

Pada HTML kita tidak bisa mengubah output hanya dengan menambahkan jarak atau spasi lebih, serta baris baru lebih dari kode HTML yang kita buat.

Browser akan menghapus spasi serta garis baru yang berlebihan saat di tampilkan.

Spasi yang banyak hanya akan di tampilkan menjadi satu spasi saja, dan baris baru yang lebih juga hanya akan menjadi satu spasi saja, sedangkan baris baru antar paragraf tidak akan menghasilkan apa-apa.

Dari pada bingung, coba praktekan contoh di bawah, dan lihat hasilnya

<html>
<body>

<p>Spasi lebih.           spasi lebih.          spasi lebih.           spasi lebih.</p>
<p>
Baris baru lebih.



baris baru lebih.



baris baru lebih.



baris baru lebih.
</p>





<p>Baris baru lebih antar paragraf</p>

</html>
</html>

Pada contoh diatas, pada kode HTML paragraf pertama menggunakan spasi lebih banyak, dan hasilnya cuma menghasilkan satu spasi.
Paragraf kedua menggunakan baris baru yang lebih, tapi hanya menghasilkan spasi juga (satu spasi).
Jarak antara paragraf 2 dan 3 ditambahkan baris baru yang lebih, tapi tidak menghasilkan apa-apa.

Oke cukup dulu sampai di sini, tidak usah terlalu panjang supaya tidak enek belajarnya. Kita lanjutkan pada artikel selanjutnya beserta penyelesaian masalah pada kode di atas.

Tutorial HTML

noreply@blogger.com (Anonymous) — Tue, 14 Feb 2012 09:54:00 +0700

Seperti yang sudah di jelaskan sebelumnya sebuah halaman web pada dasarnya dibangun dengan menggunakan kode-kode HTML.
Jadi HTML adalah dasar yang harus di pelajari jika ingin membuat website sendiri.

HTML sangat mudah di pelajari, oleh karena itu tidak ada salahnya meluangkan waktu untuk mempelajarinya.

Tutorial HTML pada blog ini berdasarkan referensi dari www.w3schools.com karena menurut saya tutorial pada website tersebut sangat mudah di mengerti, jika anda bisa bahasa inggris tidak ada salahnya belajar di sana. Tidak hanya HTML, di website tersebut dipelajari semua pembelajaran tentang pembuatan website seperti CSS, XML, Java Script, SQL, PHP, dan lainnya.

Seperti yang di jelaskan diatas, HTML adalah dasar dalam pembuatan website, jadi tanpa HTML tidak akan ada halaman web. Mungkin pada tutorial HTML di sini akan sedikit berbeda dengan sumber referensi di atas, bahkan mungkin akan berbeda sama sekali, saya akan buat sebisa mungkin untuk lebih mudah di mengerti.

Daftar Tutorial HTML

Dapatkan Dolar di Adfly

noreply@blogger.com (Anonymous) — Wed, 8 Feb 2012 21:56:00 +0700

Get paid to share your links!

Nah bagi yang ingin ngumpulin recehan dolar lewat internet bisa coba Adfly. Adfly ini adalah situs untuk memperpendek link dan sekaligus menyembunyikannya dan menggantinya dengan link dari adfly.

Gimana cara kerjanya? cukup masukan link yang akan kita promosikan misalkan link download, gambar, link ke situs lain, atau link apa aja, contoh di bawah saya memakai link ke blog saya sendiri, jika sudah klik tombol shrink.

Maka akan keluar link adfly, nah link ini adalah link yang akan kita promosikan, jika orang mengklik link tersebut, maka kita akan di bayar.

Dengan mengklik link tersebut kita akan di bawa ke situs adply yang berisi iklan dan menunggu sekitar 5 detik sampai muncul tombol skip di pojok atas kanan, setelah itu baru kita akan menuju link tujuan, contoh.

Untuk pembayarannya akan di lakukan setiap tanggal 7 jika pendapatan kita sudah minimal 5 Dolar lewat Paypal dan Alertpay (untuk pembuatan paypal di googling aja).

Untuk bayarannya sendiri kita di bayar 2 Dolar lebih per 1000 klik tergantung dari negara mana pengunjung yang mengklik, sedikit memang tapi gak ada ruginya gabung, dan justru itu memberi bukti bahwa adfly bukan scam atau penipu.

Kita juga akan mendafatkan keuntungan 20% dari referal kita, jadi semakin banyak referal, semakin besar pula peluang penghasilan kita.

Untuk bergabung klik disini

klik join now

Masukan identitas anda

Tunggu email dari adfly, yang berisi link konfirmasi beserta kode aktivasinya. Jika sudah buka email dari adfly pada inbox, klik link konfirmasi lalu masukan kode aktivasinya, maka selesai untuk pendaftarannya.

Sedikit tipsl promosikan link adfly serta link referal kita di facebook di grup dan page facebook, twitter, di forum-forum besar seperti Kaskus, IDWS, blog, atau situs lainnya.
Semoga sukses!

Get paid to share your links!

Tutorial HTML 2 - Pengenalan Tag, Atribut, dan Elemen HTML

noreply@blogger.com (Anonymous) — Tue, 7 Feb 2012 16:34:00 +0700

Jika sebelumnya sudah di bahas tentang pengertian html, dan sebelum mempelajari kode HTML, alangkah baiknya mengetahui dasar-dasarnya dulu seperti tag, atribut dan elemen html.

Tag HTML

Seperti pada penjelasan sebelumnya HTML dokumen atau halaman web di bentuk oleh sekumpulan teks-teks kode yang disebut tag.
Tag terdiri dari teks atau kode yang di kurung oleh tanda lebih kecil (<), dan tanda lebih beser (>).
Tag biasanya memiliki pasangan, contoh <html> dan </html>.
Tag pertama di sebut tag pembuka atau tag awal ( <html> ) dan yang terakhir di sebut tag penutup atau tag akhir ( </html> ), namun ada pula tag yang tidak memiliki pasangan atau tag tunggal, contohnya seperti <hr />, <br />.

Elemen HTML

Elemen html adalah semua yang dimulai dari tag pembuka sampai tag penutup.
Contoh:

<p>Ini paragraf</p>

Elemen ini memiliki tag pembuka <p> dan tag penutup </p>,
dan kalimat di antara tag diatas (Ini paragraf) disebut konten atau isi dari elemen, lihat tabel di bawah

Tag Awal	Isi Elemen	Tag Akhir
<p>	ini paragraf	<p>
<a href="www.contoh.com">	ini link	</a>
<br />

Dari tabel di atas dapat di simpulkan

Elemen HTML di mulai dengan tag pembuka atau tag awal
Elemen HTML di akhiri dengan tag penutup atau tag akhir
Isi dari elemen HTML terdapat di antara tag awal dan tag akhir
Kebanyakan elemen HTML dapat diberi atribut ( href="" )
Beberapa elemen HTML tidak memiliki isi dan di tutup pada tag awal ( <br /> )

Di dalam elemen HTML terdapat elemen lain

Contoh:

<html>
<body>
<p>Paragraf</p>
</body>
</body>

Pada kode HTML di atas terdapat 3 elemen HTML, yaitu elemen <html>, <body> dan <p>.
Pada elemen <html> mengandung elemen HTML lain yaitu elemen <body> sebagai isi elemennya.
Elemen <body> juga mengandung elemen HTML lain sebagai isi elemennya yaitu elemen <p>.
Isi elemen pada elemen <p> yaitu: Ini sebuah paragraf

Elemen kosong

Elemen yang tidak memiliki Isi atau konten elemen di sebut elemen kosong (empty element) seperti <br> (untuk membuat baris baru) <hr> (membuat garis horizontal sebagai pembatas) Pada penulisan kode XHTML atau XML, diharuskan memakai garis miring seperti ini <br />, dan <hr />.

Atribut

Atribut di gunakan memberikan informasi tambahan pada suatu elemen HTML. Atribut di tulis pada di awal tag. Atribut di awali dengan memberikan nama kemudian nilai , di tulis seperti ini nama="nilai", contoh:

<a href="http://alusplus.blogspot.com">Ini adalah link</a>
<img src="gambar.jpg">

Tag <a> mendefinisikan link HTML, sedangkan alamat link nya di tentukan oleh atribut href.
Tag <img> di gunakan untuk menampilkan gambar, dan sumber gambarnya di tentukan oleh atribut scr.
Nilai dari atribut mengunakan tanda kutif, umunnya mengunakan tanda kutip ganda ("), tapi menggunakan tanda kutip tunggal (') juga di perbolehkan.

Tip: Gunakan huruf kecil pada penulisan tag dan atribut
World Wide Consortium (W3C) merekomendasikan menggunakan huruf keci pada tag, nama artibut serta nilai atributnya pada HTML 4 mereka, serta menuntut penggunaan hurup kecil pada XHTML.

Tutorial HTML 1 - HTML Dasar

noreply@blogger.com (Anonymous) — Sun, 5 Feb 2012 15:39:00 +0700

Tutorial Ini hanya dasar saja, tidak akan ada banyak yang di bahas di sini. hanya pengenalan singkat serta cara membuat header, paragraf, link, dan cara menampilkan gambar.

Header

Header atau heding pada html ada enam, yaitu
H1, H2, H3, H4, H5, H6
Perbedaannya yaitu semakin besar angkanya, maka semakin kecil tulisan headernya.
Coba kode di bawah menggunakan text editor

<html>
<body>

<h1>Ini Header Satu</h1>
<h2>Ini Header Dua</h2>
<h3>Ini Header Tiga</h3>
<h4>Ini Header Empat</h4>
<h5>Ini Header Lima</h5>
<h6>Ini Header Enam</h6>

</body>
</html>

Paragraf

Paragraf html menggunakan tag <p>, menggunakan tag ini akan memberikan baris kosong

<html>
<body>

<p>Ini paragraf satu</p>
<p>Ini paragraf dua</p>
<p>Ini paragraf tiga</p>

</body>
</html>

Link

Untuk membuat sebuh link yaitu menggunakan tag <a> dan menggunakan atribut href untuk menentukan alamat linknya

<html>
<body>

<a href="www.google.co.id">Klik di sini</a>

</body>
</html>

Saya pakai alamat google untuk linknya.

Gambar

Gambar menggunakan tag <img> kepanjangan dari image atau gambar dan menggunakan atribut src yang berarti source atau sumber, yaitu sumber gambarnya bisa dari komputer atau dari internet.

<html>
<body>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtRO0TPNBllFAVPMrml4jnXZMBTMdFpW7Bu7a01QVdT07sU6gLFydwITcOBoceokUYqaQFFh_vqEIa-ru4ibU4GXWcDI_Ca3jvDj6tPHiutJngEDn1YNeqe8pJjaJ_ViKV7oLnEvReqHI/s320/logo+alusplus.png">

</body>
</html>

Coba kode di atas, maka akan menghasilkan gambar seperti dibawah ini, dan teks yang di beri warna merah adalah alamat dari gambarnya

Gambar bisa di ambil langsung dari komputer juga, yaitu dengan cara menyinpan file html dan file gambar (gif, jpg, png, dll) di folder yang sama dan ganti source atau sumber gambarnya dengan nama gambar tersebut contoh


<body>
<html>

<img src="gambar.jpg">

</body>
</html>

Buat dan simpan dokumen HTML seperti di atas di suatu folder dan simpan pula gambar berformat jpg di folder yang sama, lalu ganti namanya menjadi gambar.jpg (sesuai dengan atribut src). Lalu buka file html nya dengan browser internet.

Tip: Gunakan Huruf Kecil Pada Tag

Dalam membuat tag pada HTML dapat menggunakan hurup besar maupun kecil, contoh tag <P> dan tag <p> sama saja. Banyak website yang menggunakan hurup besar pada pembuatan tag.

Tapi sebaiknya jangan pedulikan itu, karena World Wide Web Consortium (W3C) merekomendasikan huruf kecil pada HTML 4, dan menuntut tag dengan huruf kecil pada XHTML.

Membuat Bola Billiard Dengan Inkscape

noreply@blogger.com (Anonymous) — Fri, 3 Feb 2012 19:36:00 +0700

Pada tutorial Inkscape kali ini saya akan buat bola billiard seperti gambar di bawah ini

Oke langsung saja!

Pertama pilih tool untuk membuat lingkaran (Create circles, ellipses, and arcs) atau tekan F5 pada keyboard. Lalu buat lingkaran sambil menekan tombol CTRL agar rapi.
buang dulu aris pinggirannya jika masih ada dengan klik kanan Flat color stroke di bagian paling pojok kiri bawah lalu pilih remove stroke.

Lalu pilih gradient tool (Create and edit gradients) atau tekan CTRL + F1 di keyboard, pilih radial gradient dengan cara pilih menu Object lalu pilih fill and stroke setelah jendela baru keluar pilih Radial gradient pada bagian fill, atau bisa langsung seperti gambar di bawah pada langkah ketiga, lalu atur gradiant serta warnanya.

Untuk lebih jelas, lihat gambar!

Buat lingkaran kecil sambil menekan CTRL, lalu atur pula gradient nya tapi gunakan liniar gradient, langkahnya sama seperti di atas.

Sekarang membuat angka, ganti dulu tool nya dengan Create and edit text objects atau tekan F8, lalu ketik angkanya terserah, saya gunakan angka 5, atur besarnya beri sedikit blur jika perlu.

Buat bentuk elips dan beri warna putih lalu atur besarnya dan putar sedikit

Atur gradientnya gunakan Linear gradient

Selesai rupanya, mudah bukan

Jika ingin file .svg nya langsung, download di sini

Menggunakan Software Bajakan Itu Ilegal dan diharamkan

noreply@blogger.com (Anonymous) — Thu, 2 Feb 2012 14:44:00 +0700

Seiring dengan berkembangnya teknologi, semakin banyak pula software-software yang di ciptakan para programer yang dapat berjalan entah itu di komputer, hanphone, serta gadget lainnya yang bisa di dapat dengan gratis maupun berbayar.

Bagi yang belum tau aja nih, software berbayar maksudnya software yang setelah di instal tidak akan bisa di pakai secara full atau tidak dapat dipakai sama sekali sebelum anda membeli lisensi berupa kode atau key kepada pengembangnya untuk dapat membuka software tersebut sehingga dapat di gunakan.

Lalu bagaimana dengan program atau software bajakan, garatis juga kan, ya emang gratis. Software bajakan adalah software yang berbayar seperti disebutkan di atas, tetapi telah di otak-atik oleh orang (di sebut hacker) sehingga dapat di gunakan tanpa membeli lisensinya terlebih dahulu, beberapa software bajakan yang sering digunakan adalah Produk keluaran Microsoft seperti sistem operasi nya yaitu Windows pada komputer, serta beberapa aplikasinya seperti Microsoft Office dan lainnya, Adobe seperti Photoshop, Corel seperti CorelDraw, dan software lainnya yang berjalan di sistem operasi Windows.

Pembajakan ini sudah jelas perbuatan yang ilegal dan untuk Undang-Undang nya sendiri sudah ada yaitu UU no. 19 tahun 2002 tentang hak cipta termasuk software dan untuk pelanggarannya di hukum dengan hukuman penjara paling lama 7 tahun dan denda maksimal 5 miliar rupiah, dan jika di kaitkan dengan aturan agama manapun memang sudah jelas ini dilarang atau haram.

Kenapa haram?, contoh saja sistem operasi Windows 7 yang berharga sekitar satu juta untuk versi yang Home Premiun, lalu kita menggunakan yang bajakan, berarti bisa di bilang kita telah mengambil barang seharga satu juta tersebut tanpa seizin pemiliknya kasarnya mencuri lah.

Menurut saya sendiri ini bisa di bilang payah, karena kebanyakan pemakai software bajakan, khususnya di Indonesia tidak tahu software yang di pakainya bajakan serta tidak mengetahui apa itu software bajakan. Dan masih banyak pula organisasi atau perusahaan yang memanfaatkan software bajakan untuk kepentingan komersial.

Memang harga software atau aplikasi tersebut bisa dibilang cukup mahal, contoh lainnya untuk software pengedit gambar yang cukup populer seperti Adobe photoshop berharga sekitar 9 ratus ribuan, tapi itu untuk versi yang Element 10, dan yang paling tinggi yaitu Photoshop CS5 Extended yaitu seharga 9 jutaan, wow mahal bukan. Tapi itu bisa di bilang sebanding dengan dengan fitur yang di tawarkan jika kita tau betapa sulitnya membuat suatu program.

Yah tapi itu kan hanyalah sebuah software, masih ada software lain yang lebih murah bahkan gratis, tidak usah terlalu fanatik terhadap suatu software apalagi jika itu bajakan, dari pada kita memakai yang bukan hak kita sendiri. Tetapi kualitasnya berarti lebih rendah dong?, yah bisa saja, malah bisa juga sebaliknya, khususnya software yang open source.

Kita bisa beralih menggunakan software yang gratis khususnya yang open source, seperti Untuk sistem operasinya kita bisa menggunakan Linux, untuk aplikasi Office bisa menggunakan Open Office atau Libre Office, GIMP untuk aplikasi pengedit gambar, dan untuk mengolah gambar vektor bisa menggunakan Inkscape, dan masih banyak lagi.

Open source gratis bukan berarti kualisnya rendah, kenapa? karena pengembangan software opensource di kembangkan oleh para programer di seluruh dunia yang terhubung melalui media internet dengan memanfaatkan kode sumbernya, bahkan kita sendiri bisa melakukannya jika mampu.

Bagaimana?, tidak ada ruginya mencoba, apalagi mencoba yang gratis!

Membuat Ikon Download Sederhana Dengan Inkscape

noreply@blogger.com (Anonymous) — Tue, 31 Jan 2012 17:55:00 +0700

Pada tutorial pertama Inkscape ini sangat mudah dan simpel, membuat tanda panah download sederhana seperti ini gambar di bawah

Ok langsung saja
Pertama buat persegi dan persegi panjang

Buang stroke nya, yaitu garis-garis pinggir objek dengan cara klik kanan pada bagian warna stroke di bagian paling pojok kiri bawah lalu pilih remove stroke.

Lalu geser tanda bulat di pojok persegi panjang sampai ujung-ujung nya membulat, ingat tool yang di gunakan masih Create rectangles and squares atau tekan F4

Beralih ke bangun persegi, ganti toolnya ke Select and transform objects di bagian kiri atau tekan F1 pada keyboard, lalu klik persegi tadi sampai bisa di putar

Lalu putar dengan klik dan tahan tanda di pojok persegi dan gerakan ke bawah sampai miring, ingat sambil menekan tombol CTRL pada keyboard ketika melakukannya agar miringnya rata

Ganti toolnya menjadi Edit paths by nodes atau tekan F2 pada keyboard, lalu klik menu Path dan pilih Object to path. Lalu tarik sudut bagian atas ke bawah dengan men dragnya sampai membentuk segitiga.

Setelah keduanya jadi lalu dekatkan lalu pilih keduanya dengan mengklik keduanya bergantian sambil menekan tombol SHIFT

Lalu ikuti langkah seperti pada gambar di atas.

Setelah tergabung lalu pilih menu Object lalu pilih Group, tapi ingat kedua gambar masih terpilih.

Setelah itu duplikat gambar dengan cara klik menu Edit lalu pilih Duplicate atau tekan CTRL+D. Geser sedikit hasil duplikat tadi, lalu beri warna hitam dan simpan di bagian paling bawah, lihat gambar

Jika sudah klik ikon kuas di bagian atas lalu atur blur untuk bayangannya, pilih saja 3, lihat gambar di bawah

Selesai, dengan sedikit tambahan jadi seperti ini

Playstation Vita

noreply@blogger.com (Anonymous) — Mon, 30 Jan 2012 20:16:00 +0700

Belum lama ini Sony merilis konsol game portable barunya yaitu Playstation Vita setelah sukses dengan konsol portable psp generasi pertama, dengan perbedaan yang cukup signifikan seperti adanya 2 analog, 2 kamera di depan dan belakang), layar sentuh OLED 5 inchi kapasitif (multi touch), serta tambahan koneksi 3G, dengan prosessor ARM^® Cortex™- A9 core (4 core) dan untuk grafik dibekali dengan SGX543MP4+ jadi bisa di bilang setara dengan PS3, dan masih banyak lagi.

Playstation Vita (PSVita) di rilis di jepang pada tanggal 17 Desember 2011, dengan harga sekitar 299.99 USD untuk Wifi+3G, dan 249.99 USD untuk yang wifi saja.
Dan untuk wilayah Eropa dan Amerika Utara 22 Febuari 2012.

Untuk di Indonesia sendiri harus sedikit bersabar tunggu rilisnya, walaupun sudah ada beberapa yang jual import dari Jepang tetapi dengan harga yang lebih mahal.

Berikut Spesifikasi PSvita:

- CPU : ARM^® Cortex™- A9 core (4 core)

- GPU : SGX543MP4+

- External Dimensions : Approx. 182.0 x 18.6 x 83.5mm (width x height x depth)
(tentative, excludes largest projection)

- Screen (Touch Screen) : 5 inches (16:9), 960 x 544, Approx. 16 million colors, OLED
Multi touch screen (capacitive type)

- Rear Touch Pad : Multi touch pad (capacitive type)

- Cameras : Front camera, Rear camera

- Sound : Built-in stereo speakers, Built-in microphone

- Sensors : Six-axis motion sensing system (three-axis gyroscope,
three-axis accelerometer), Three-axis electronic compass

- Location : Built-in GPS
Wi-Fi location service support

- Keys / Switches : PS button
Power button
Directional buttons (Up/Down/Right/Left)
Action buttons (Triangle, Circle, Cross, Square)
Shoulder buttons (Right/Left)
Right stick, Left stick
START button, SELECT button
Volume buttons (+/-)

- Wireless Communications : Mobile network connectivity (3G)
IEEE 802.11b/g/n (n = 1x1)(Wi-Fi)(Infrastructure mode/Ad-hoc mode)
Bluetooth^® 2.1+EDR (A2DP/AVRCP/HSP)

Ini beberapa video dari youtube

Mengenal Inkscape

noreply@blogger.com (Anonymous) — Mon, 30 Jan 2012 16:27:00 +0700

Coba-coba download dan instal Inkscape karena gratis dan ukurannya yang tidak begitu besar, lalu coba utak-atik sendiri sambil nyari tutorial di internet, ternyata mudah sekali membuat gambar dengan aplikasi ini, selain simpel aplikasi ini juga bisa di bilang powerfull serta fitur yang di sediakan lumayan banyak, dan hasil gambarnya sangat bagus dan lembut.

Inkscape adalah software open source untuk menggambar atau mengolah gambar vektor, layaknya Freehand, Adobe Ilustrator, Corel Draw, atau Xara X.

Kelebihan lain software ini adalah bersifat cross-platform jadi bisa berjalan di banyak sistem operasi seperti Unix, Windows, Mac OS X.

Untuk fiturnya sendiri sepertinya tidak kalah dengan aplikasi sejenis yang berbayar seperti CorelDraw atau Ilustrator, dan karena Inkscape ini di khususkan untuk mengolah file ber fotmat .svg, maka hasil gambarnya lebih bagus dan lembut.

Kekurangan Inkscape yaitu jika file nya di simpan ke format lain selain .svg, khususnya .png, maka kemungkinan gambarnya tidak sempurna, karena Inkscape ini sebenarnya lebih di khususkan untuk mengolah file .svg.
Tapi tenang ada cara yang baik untuk mengatasinya yaitu dengan memkai aplikasi pengedit gambar bitmap yaitu Gimp, Gimp dapat mengkonversi gambar vektor ke bitmap dengan baik dengan ukuran yang kecil serta file yang di dukungnya juga banyak.

Ini adalah beberapa hasil karya saya menggunakan Inkscape

Gimana, Bagus ga? maklum lah designer amatiran, hehe..

Tidak ada salahnya mencoba aplikasi ini, filenya juga tidak terlalu besar, hanya sekitar
18MB (Linux), dan jadi sekitar 65MB setelah di Install

Untuk versi sekarang adalah 0.48.2. Ini link downloadnya

Windows - Inkscape-0.48.2-1-win32.exe (34MB)

Linux - Inkscape-0.48.2.tar.bz2 (18,7MB)

MAC - Inkscape-0.48.2-1-SNOWLEOPARD.dmg (83MB)

Atau bisa langsung ke situsnya http://inkscape.org

Cara Membedakan Madu Asli Atau Palsu

noreply@blogger.com (Anonymous) — Sun, 29 Jan 2012 15:29:00 +0700

Siapa yang tak tau madu, cairan manis ini memiliki kandungan gizi yang baik untuk kesehatan. Banyak jenis produk madu yang di jual di pasaran, tapi taukah bahwa madu yang di jual itu belum tentu asli. Banyaknya produk yang di jual di pasaran membuat madu tersebut rentan terhadap pemalsuan.

Madu bisa saja di campurkan bahan lain seperti air, gula, ragi atau zat lain, bahkan ada juga madu yang bukan 100% madu asli atau madu buatan. Memang jika di lihat agak sulit membedakan mana yang asli.

Berikut pemahaman yang suka salah artikan terhadap madu asli dan palsu

- Madu alami tidak dikerubutin semut, ini belum tentu karena memang ada sebagian semut yang tidak suka madu umumnya adalah semut besar, dan untuk semut kecil biasanya akan menyukainya.

- Madu asli tidak haru selalu manis, ini tergantung jenis bunganya

- Madu asli tidak akan membeku jika di masukan ke dalam kulkas, ini belum tentu benar, karena madu asli juga mengandung mineral yang dapat mencapai 25%, jadi bisa saja membeku.

Ada beberapa cara untuk membedakan mana madu yang asli dan madu yang palsu

- Dengan mencampurkan madu dengan air, madu yang asli tidak akan tercampur, dan sebaliknya bagi yang palsu

- Jika di masukan ke piring yang berisi air, lalu di goyang-goyang, maka madu yang asli akan membentuk pola yang mirip dengan sarang lebah, sedangkan yang palsu tidak, bahkan akan bercampur karena memiliki kadar air yang tinggi.

- Teteskan madu pada kertas, madu yang palsu akan terserap oleh kertas karena kadar airnya tinggi

- Panaskan madu pada sebuah sendok yang di bakar dengan lilin, madu yang asli akan mendidih hingga busanya tumpah, sedangkan yang palsu tidak dan busanya sedikit

- Memasukan batang korek api pada madu beberapa saat, setelah itu di pantik (dibakar) dengan korek api, jika masih korek tersebut masih menyala, berarti madu itu asli

- Mencampurkan madu dengan kuning telur, maka telur tersebut akan ter-koagulasi yang terlihat seperti matang, karena madu mengandung asam, dan telur mengandung protein yang bila di campur akan menggumpal dan terlihat seperti matang.

Demikian beberapa tips cara membedakan madu yang asli.
Semoga bisa bermanfaat.

Bagaimana Cara Membuat Game Atau Aplikasi

noreply@blogger.com (Anonymous) — Sun, 29 Jan 2012 11:03:00 +0700

Sebelumnya minta maaf nih bagi para programer, atau para master TI karena share hal kecil begini, hehe..
Berhubung ternyata masih banyak juga yang tidak tahu hal kecil seperti ini khususnya di Negri kita ini,

Sering saya melihat seseorang yang sedang bermain game lalu orang tersebut kagum dengan game yang di mainkannya, lalu dia bertanya sendiri, kenapa bisa bagus seperti ini? bagaimana game ini dibuat?, bagaimana cara membuatnya?, dan sebagainya.
Atau seseorang yang sedang menjalankan aplikasi, karena kagum dan pemasaran lalu timbul pertanyan tersebut.

Lalu taukah bagai mana itu di buat? yang udah tau nyimak aja yah.
Semua itu di buat dengan menggunakan bahasa pemrograman, yaitu instruksi atau komando untuk memerintah komputer dengan mengetikan kode-kode yang di mengerti oleh komputer.

Layaknya bahasa manusia, semua bahasa memiliki aturan serta tata tulis tertentu.

Jadi singkatnya kita memerintah komputer untuk melakukan hal tertentu seperti menggerakan objek, menampilkan gambar, suara dan masih banyak lagi, dengan bahasa yang hanya di mengerti oleh komputer berupa teks kode tertentu.

Bahasa pemrograman dapat di klasifikasikan menjadi beberapa tingkat, dan semakin tinggi tinkatnya maka akan sedikit lebih dekat dengan bahasa manusia.

Bahasa Tingkat Tinggi

yaitu bahasa yang yang memiliki ciri-ciri mudah di mengeti karena memakai intruksi dari unsur kata-kata bahasa manusia seperti, if, and, end, or, dan lainnya, bahasa pemrograman yang termasuk tingkat tinggi adalah Python, C++, Java, Pascal, .NET dan lainnya.

Bahasa Tingkat Menengah

Yaitu bahasa yang komputer yang memakai campuran bahasa intruksi dalam bahasa manusia seperti dan sebagainya. yang termasuk tingkat ini adalah bahasa C

Bahasa Tingkat Rendah

memberikan perintah pada komputer dengan memakai kode-kode singkat, contoh SUB, CMP, JMP, JGE, JL, dan lainnya. contoh bahasa tingkat rendah adalah assembly

Bahasa Mesin

memberikan perintah kepada komputer dengan menggunakan kode bahasa binner, contoh 01100101100110

Pemrograman sebenarnya tidak hanya untuk komputer saja, kita dapat memprogram aplikasi pada handphone, atau gadged lainnya, kita juga dapat memprogram sebuah robot, sehingga dapat melakukan intruksi sesuai yang kita inginkan.

IMO Tab X-One Tablet Android Murah Dengan Dual-Sim Card dan TV Analog

noreply@blogger.com (Anonymous) — Sun, 29 Jan 2012 08:45:00 +0700

Tablet baru keluaran IMO ini bisa di bilang memiliki sepesifikasi yang lumayan lengkap.
Tablet Android ini memilikiki fitur yang jarang bahkan tidak di miliki oleh vendor lain khususnya vendor besar, seperti dual sim card dan TV analog.

Dengan layar sentuh 7 inchi yang sudah kapasitif dengan resolusi 480x800 piksel dapat mempernyamanan penggunanya untuk menjelajahi tablet ini. Dan yang menarik lagi IMO ini sudah menggunakan koneksi 3G atau HSDPA sebagai koneksinya pada sim card 1 dan untuk sim card 2 hanya menggunakan kanal GPRS/EDGE.

Dukungan psessor MTK 6573 dengan clock speed 650 Mhz dan ram 512 MB sudah cukup untuk menjalankan aplikasi multitasking. Dan dengan Memory internal yang cukup lega 4GB serta dapat di tambah dengann memory eksternal sampai 32GB menggunakan kartu memori microSD

Tablet ini dapat di gunakan untuk kegiatan telpon dan sms serta menyediakan dual kamera dengan kamera belakang 2 megapiksel, dan vga untuk kamera depan. wah lumayan lengkap kan.

Tablet ini diperkirakan akan hadir pada kuartal pertama, dengan harga sekitar 1,7 juta.

Spesifikasi IMO Tab X-One:

- OS: Android OS v2.3 (Gingerbread)
- Jaringan: Quad band GSM, HSDPA
- Dimensi: 194.7 x 180.4 x 13 mm
- Layar: capacitive touchscreen, 480 x 800 piksel, 7 inchi
- Kamera utama: 2 MP, LED flash, geo tagging, image stabilization, video
- Kamera sekunder: VGA
- Memori internal: 512 MB RAM, 512 MB ROM
- \Memori eksternal: microSD hingga 32 GB
- Prosesor: 650 Mhz, MTK 6573
- Transfer data: HSDPA, 7.2 Mbps; HSUPA, 5.76 Mbps, Wi-Fi 802.11 a/b/g/n, WiFi direct, DLNA
- Konektivitas: Bluetooth v2.0 with A2DP, EDR, HS, microUSB v2.0
- Fitur lain: Dual SIM, Multi touch input method, G-sensor, browser HTML, A-GPS, TV Analog (PAL/NTSC/SECAM), MP3/WAV/eAAC+/WMA/FLAC player, MP4/H.264/H.263/WMV player, PDF viewer, Office (Word, Excel, PowerPoint)
- Baterai: Li-Ion 3500 mAh

Pengertian HTML

noreply@blogger.com (Anonymous) — Sat, 28 Jan 2012 17:07:00 +0700

Bagi para penguna dunia maya sudah tak asing lagi dengan yang namanya halaman internet, ya iyalah kalo gak ada halaman internet apa yang mau di lihat, hehe.
Tapi taukah bagai mana itu di buat? sering kita melihat halaman dengan antar muka yang bagus dan menarik, lalu timbul pertanyaan bagai mana itu di buat.

Pada dasarnya halaman internet atau web page di buat dengan mengetikan kode-kode HTML disebut pula tag HTML, walaupun nantinya dapat di barengi dengan CSS, Java Script, dan lainnya.
Jadi apa HTML itu?. HTML singkatan dari Hyper Text Markup Language adalah bahasa standar yang di gunakan untuk membuat suatu dokumen HTML (halaman web) dengan menetikan kode-kode tertentu.

Jadi suatu halaman internet pada dasarnya hanyalah sebuah dokumen yang terdiri dari teks-teks (kode) saja, lalu teks yang berisi kode-kode tersebut di terjemahkan oleh web browser (Firefox, Opera, IE, dan lainnya) menjadi halaman web. Intinya kita memasukan kode atau bahasa yang di mengerti oleh web browser berupa teks, lalu web browser tersebut menterjemahkannya seperti tabel, warna text, link, gambar, dan lainnya.

Jika anda ingin melihat kode HTML dari halaman yang kita lihat, yaitu dengan klik kanan lalu pilih lihat kode sumber laman (view source) atau tekan CTRL+U , maka akan terlihat kode-kode yang membentuk halaman tersebut. Tapi mungkin akan sedikit bingung khususnya pemula bila melihat kode halaman web yang lengkap.

Anda sendiri bisa membuat halaman web yang sangat sederhana, coba ketik kode berikut di text editor (notepad, gedit, atau lainnya)

<html>



<head>

<title>BELAJAR HTML</title>

</head>



<body>



<h1>Ini Judul Halaman</h1>

<p>Ini paragraf halaman web</p>



</body>

</html>

Jika sudah simpan dan beri nama percobaan.html , setelah itu klik kanan pada file yang sudah kita buat tadi, lalu open with firefox, atau browser lainnya yang ada atau bisa juga di double klik, lalu lihat hasilnya.

Walaupun sekarang sudah serba praktis, kita hanya perlu mengetik artikel saja di website kita dan semua beres, tapi tidak ada salahnya kita mempelajarinya, dengannya kita dapat mengubah dan mempercantik halaman web sesuai keinginan kita.

Jika tidak ingin repot sudah disediakan HTML editor buatan Mohammad Mustafa Ahmedzai (http://www.mybloggertricks.com/). Editor ini diginakan untuk mengedit HTML, CSS, dan Java script dan kita dapat melihat hasilnya. Filenya juga kecil ber format .html sekitar 8KB dan kelebihannya yaitu bisa di gunakan secara offline, serta gratis pula.
Untuk mendownload dan informasi lebih lanjut bisa lihat langsung di situsnya.

Untuk mencobanya klik tombol di bawah (Coba disini!), ketik atau copy kode HTML di atas sebagai contoh, dan pastekan pada editor di sebelah kiri (sebelumnya hapus dulu teksnya dengan meng klik tombol Clear di bawah), lalu klik tombol Preview untuk melihat hasilnya.

Perbedaan Istilah Bit Dan Byte

noreply@blogger.com (Anonymous) — Fri, 27 Jan 2012 10:26:00 +0700

Sudah tidak asing lagi bagi para pengguna internet bila mendengar istilah kbps atau mbps yang sering kita lihat pada iklan operator seluler, tapi taukah apa maksudnya? ya jelas tau lah masa pengguna internet kaga tau hehe. ya yang udah tau nyimak aja lah, hanya share dikit aja bagi yang belum tau.

bps di tulis juga b/s (bit per secon) bahasa Indonesianya bit per detik adalah istilah yang di gunakan pada kecepatan internet (bandwitch) misal 128 kbps, 512kbps, 1,2mbps, dan lainnya

Tapi kenapa ketika kita mendownload file, kecepatannya tidak sesuai, contoh kecepatan yang di tawarkan operator 512kbps, tapi yang muncul hanya 64kBps saja, gak beres nih operator!. Tenang gak usah nyalahin operator dulu, memang para operator menggunakan istilah kbps beda halnya pada download manager yang menggunakan istilah kBps. lalu apa bedanya? jelas beda, walaupun hanya beda huruf B saja.

b = bit
B = byte

pada pengucapan memang aga sulit membedakannya, tapi pengertiannya pun berbeda

1 Byte = 8 bit

Jadi 512 kbps : 8 Bite = 64 kBps

Jadi jika mendownload file berukuran 5MB membutuhkan waktu sekitar 78 detik
(5MB = 5000KB : 64KB = 78,125)

Membuka Akun yang Sama Secara Bersamaan di Google Chrome

noreply@blogger.com (Anonymous) — Thu, 26 Jan 2012 10:29:00 +0700

Jika kita memiliki lebih dari satu akun di situs yang sama contoh kita memiliki 2 akun gmail, dan ingin membuka keduanya, maka terpaksa kita harus bergantian membukanya dengan logout akun yang satu dan login akun yang lainnya, ya ini memang sedikit ribet juga, maka tak jarang ada lebih dari satu browser dalam satu komputer (Firefox, Opera, IE, dll).

Tapi jika kita punya browser Google Chrome, kita dapat memanaat kan fitur jendela penyamaran, yang dapat membuka 2 akun yang sama secara bersamaan.

Oke langsung saja
Pertama klik ikon kunci inggris di pojok kanan atas

Lalu pilih Jendela Penyamaran Baru

Maka akan keluar jendela baru yang siap di pakai untuk membuka akun lain pada situs yang sama

Jendela yang baru tidak akan menyimpan catatan login kita, jadi jika kita menutupnya kita harus login kembali jika ingin membukanya lagi.
Ini bekerja hanya untuk dua akun saja, jadi akan percuma jika kita membuka lebih dari 2 jendela.

Kenapa Orang Kurus Susah Gemuk Yang Gemuk Susah Kurus

noreply@blogger.com (Anonymous) — Wed, 25 Jan 2012 19:33:00 +0700

Memiliki tubuh yang ideal merupakan keinginan hampir semua orang, selain enak di lihat, juga terkesan sehat, beda halnya dengan orang yang kurus ataupun gemuk, kesan nya selalu negatif kurang sehat lah, kolestrol, kurang gizi, penyakitan dan lain-lain. dan bukan hanya itu orangnya juga menjadi kurang pd dengan penampilannya, dan memang juga kurang sedap dipandang.

Bukannya kalau kurus tinggal makan banyak saja biar badan berisi, dan sebaliknya bagi yang gemuk, ya mungkin hampir semua orang yang punya tubuh ideal bilang begitu. sedangkan orang yang punya tubuh kurus banting tulang olah raga, makan yang serba bergizi, serta tidur teratur, serta yang gemuk pun sibuk dengan dietnya demi mencapai tubuh yang ideal, tapi ko tetap saja ya. sampai-sampai banyak dari mereka yang putus asa, wah bahaya juga nih.

Pada intinya orang yang gemuk atau kurus di pengaruhi oleh beberapa faktor seperti pencernaan yang terganggu, ada penyakit tertentu, karena faktor keturunan (genetik), banyak pikiran (stress), kelainan pada kerja metabolisme.
Orang yang kurus atau gemuk kebanyakan di pengaruhi karena kelainan pada kerja metabolisme. Lau apa metabolisme itu? singkata saja ya, orang dengan badan kurus memiliki kerja metabolisme yang terlalu cepat, jadi seberapa banyak dia makan, maka tubuhnya tetap kurus karena makanan yang ia makan akan cepat di bakar oleh kerja metabolisme yang cepat tersebut menjadi energi, dan sebaliknya pada orang yang gemuk, hasil pembakaran makanan yang ia makan aakan tersimpan di dalam tubuh karena kerja metabolisme yang lambat, jadi akan percuma saja walau pun orang tersebut tidak makan, lalu jika tiba ia makan maka kalorinya akan tersimpan lagi menjadi lemak. Dan tidak banyak orang yang tau tentang hal ini.
Kelainan metabolisme sendiri bisa di sebabkan oleh beberapa penyakit seperti pada hormon tiroid, yang saya tau saat ini seperti hipertiroid, dan hipotiroid.

Jadi bagaimana cara mengatasinya, tetap pola hidup sehat harus di jaga seperti makan teratur dengan porsi pas dan bergizi, tidur yang cukup , minum air putih 2 liter perhari (8 gelas), olah raga ringan, angkat beban agar dapat mengubah lemak menjadi otot.

Mohon maaf untuk tips nya, sesuai judul ini bukan tips menaikan atau menurunkan berat badan.
Semoga artikel saya yang sedikit ini bisa bermanfaat.