Alusplus

Tutorial HTML 10 - Membuat Daftar

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

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.

Alusplus

Daftar beraturan (ordered lists)

Daftar tidak beraturan (unordered lists)

Daftar Berurut (Ordered List)

Daftar Tidak Berurut (Unordered List)

Daftar Definisi (Definition List)

Daftar Didalam Daftar

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

Posts

Categories

Entri Populer

Share