Alusplus

Home » Archives for Februari 2012

Tutorial HTML 9 - Membuat Tabel

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

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

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

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

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

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

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

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

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

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

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

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

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

Atribut Border

Judul Tabel

Mengatur Jarak Antara Sel

Mengatur Jarak Antara konten dengan garis sel

Sel yang Menjangkau Lebih Dari Satu Baris Atau Kolom

Menambah Keterangan Pada Tabel

Atribut Frame

Tag Lain di Dalam Tabel

Tag Colgroup dan Col

Tag <colgroup>

Tag <col>

Tag <thead> <tbody> dan <tfoot>

Tag Img dan Atribut Src

Menambahkan Atribut Alt

Mengatur Tinggi dan Lebar Gambar

Mengatur Posisi Gambar

Gambar Sebagai Link

Menentukan Bagian Gambar Yang Akan Menjadi Link

Atribut Target

Gambar sebagai link

Link Menuju Lokasi atau bagian pada Halaman yang sama

Link untuk mengirim Email

Format Teks HTML

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

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

Kode komputer

Definisi dan kutipan

Singkatan dan akronim

Address

Arah teks

Kutipan (Quotations)

Spasi

Baris Baru

Garis Horizontal

Judul

Judul sangatlah penting dalam dokumen HTML

Paragraf

Jangan lupa menambahkan tag penutup

HTML Output

Daftar Tutorial HTML

Tag HTML

Elemen HTML

Di dalam elemen HTML terdapat elemen lain

Elemen kosong

Atribut

Header

Paragraf

Link

Gambar

Tip: Gunakan Huruf Kecil Pada Tag

Posts

Categories

Entri Populer

Share