Contoh-contoh Kode Dasar Tag HTML

Berikut Contoh-contoh Kode Dasar Tag HTML

1. Huruf tebal (bold), kodenya <b>Tulisan</b> dan hasil: Tulisan
2. Huruf Miring (italics), kodenya <i>Tulisan</i> dan hasil Tulisan
3. Tulisan garis bawah, kodenya <u>Tulisan</u> dan hasil Tulisan
4. Garis baru (enter), kodenya <br /> Contoh Tulisan pertama<br />Tulisan kedua ,maka hasilinya:
       Tulisan pertama
       Tulisan kedua
5. Rataan Tulisan kiri, kodenya <p align="left">Tulisan</p>
8. Rataan Tulisan kanan, kodenya <p align="right">Tulisan</p>
9. Rataan Tulisan Tengah, kodenya <center>Tulisan</center>
10. Memberi warna tulisan, kodenya <font color="#ED1C24">Tulisan</font> dan hasilnya Tulisan
      (ini contoh dengan kode warna merah, ganti kode colornya jika dengan warna lain)
11. Karakter Tulisan (heading) h6, kodenya <h6>Tulisan</h6>
12. Karakter Tulisan (heading)  h5, kodenya <h5>Tulisan</h5>
13. Karakter Tulisan (heading)  h4, kodenya <h4>Tulisan</h4>
14. Karakter Tulisan (heading)  h3, kodenya <h3>Tulisan</h3>
15. Karakter Tulisan (heading)  h2, kodenya <h2>Tulisan</h2>
16. Karakter Tulisan (heading)  h1, kodenya <h1>Tulisan</h1>
17. Memasang Gambar, Kodenya <img src="URL-Gambar" />
18. Membuat garis kotak, atau pengelompokan, kodenya
       <div style="width:400px; height:100px; border:solid 1px #000000; padding: 10px;">Element</div>
dan hasilnya:

Element
Catatan: Tinggi panjang bisa disesuaikan dengan mengatur nilai width dan height pada atribut style,
Ukuran garis kotaknya bisa disesuaikan dengan mengubah nilai 1px pada border
dan garis warnanya bisa dirubah dengan mengganti kode warna #000000 pada border, dan bisa ditambah warna background dengan menambahkan kode ini background-color:#fff; kedalam atribut style. sesuaikan kode warnanya dengan mengganti #fff
"Element" bisa di isi dengan tag-tag HTML atau tulisan

19. Membuat kotak input, kodenya <input type="text" /> dan hasilnya
20. Membuat kotak text area, kodenya <textarea cols="40" rows="5"></textarea>
       dan hasilnya:
       
        Catatan: Nilai cols dan rows bisa disesuaikan dengan keinginan
21. Membuat Ordered List, kodenya
        <ol>
        <li>list satu</li>
        <li>list dua</li>
        </ol>
       hsilnya:
  1. list satu
  2. list dua

22. Membuat Unordered List, kodenya
        <ul>
        <li>list satu</li>
        <li>list dua</li>
        </ul>
       hsilnya:
  • list satu
  • list dua

23. Membuat Table, kodenya
<table style="border-collapse:collapse;background:none" width="400px" border="1">
<tr>
<th style="background:none;width:50%;">Header Kolom 1</th>
<th style="background:none;">Header Kolom 2</th> </tr>
<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>
hasilnya:
Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2

23. Membuat tombol, kodenya <button>Tombol</button> dan hasilnya
24. Membuat tulisan Link, kodenya <a href="http://desain-wbsite.blogspot.com/">klik disini</a> dan hasilnya sprti ini klik
disini