Penerapan Tag Dasar HTML

Posted by : wiwin Sunday 2 March 2014

Sesuai janji sebelumnya, kali ini ane akan ngebahas penggunaan tag dalam HTML. Tag-tag di dalam html memiliki pasangan masing-masing. Contohnya tag <title> memiliki pasangan yaitu . Begitu juga dengan tag lainnya. Semua tag dalam HTML pasti memiliki pasangan yang diawali dengan backslash “/”. Fungsi dari pasangannya ini adalah sebagai penutup atau batas suatu tag, sampai mana tag itu berlaku. Jadi area di luar dari tag tersebut, maksudnya di luar dari penutup tag itu sudah tidak menjadi wewenang dari tag itu lagi. Atau tidak akan mendapatkan efek dari tag tersebut. Maka dari itu sangatlah penting penggunaan penutup atau pasangan tag-nya. Jangan sampai keseringan lupa ngisi ya... *kayak saya.

Nah, berikut akan dibahas beberapa contoh penggunaan tag-tag dasar yang berada dalam HTML :

1. Tag Judul (Heading)

Tag judul dilambangkan dengan tag
< h_n >, n di sini menyatakan tingkat judul = 1,2,3,4,5,6. Berikut contoh penggunaannya :

Berikut hasilnya :

2. Tag Paragraf

Cara penulisannya :

isi paragraf

Fungsinya untuk menandai sebuah paragraf. Suatu paragraf akan terlihat dibatasi oleh suatu garis kosong sebelum dan sesudahnya. Contoh penggunaanya sebagai berikut :

<p>
 Ini adalah halaman pertama 
 saya. Saya baru belajar tentang
 bagaimana membuat sebuah halaman
 website.
</p>

<p>Halaman website saya ini masih sangat
sederhana. Karena saya masih dalam proses
belajar.</p><p>Makasih buat agan-agan yang
masih mau mengunjungi website saya ini. 
Nantinya website ini akan saya kembangkan
menjadi lebih baik lagi.</p>

Berikut hasilnya :

3. Tag Atribut (Bold, Italic, Underline)

Atribut ini sama halnya jika kita mengetik di perangkat lunak pengolah kata. untuk cetak tebal, untuk garis miring dan untuk garis bawah. Cara penulisanya sebagai berikut:

kalimat yang dicetak tebal

kalimat yang dicetak miring

kalimat yang digaris bawah
Berikut contoh penggunaannya :
```
Kata dapat dicetak tebal, miring, garis bawah. Atau bisa juga kombinasi dari ketiganya.
```
Berikut hasilnya :
4. Tag Superscript dan Subscript

Superscript digunakan untuk menandai bagian karakter agar dicetak tinggi. Sedagkan Subscript digunakan untuk menandai bagian karakter agar dicetak rendah. Cara penulisannya sebagai berikut :

bagian yang dicetak tinggi

bagian yang dicetak rendah
Berikut contoh penggunaannya :
```
(X1 + X2)2 = X1 + 2X1X2 + X22

2H2 + O2 = 2H2O
```
Berikut hasilnya :

5. Tag Ganti Baris (Break Line)

Untuk ganti baris biasanya menggunakan tag tapi ada bentuk lain yang dianjurkan dalam XML style yaitu Apa perbedaan keduannya? Mari kita lihat pada contoh berikut :

<p>Perkenalkan, nama saya Wiwin Savitri.<br />
Ini adalah halaman website saya. <br />
Di halaman ini saya mencontohkan bagaimana penggunaan tag ganti baris. <br />
Di mana, ini merupakan contoh penggnaan tag ganti baris<br />
berdasarkan XML style.</p>

Selanjutnya,
<br>
Ini merupakan contoh penerapan tag ganti baris standar
<br>

<p>Sekian. Terima kasih telah mengujungi website saya.</p>

Berikut hasilnya :

6. Tag Font

Tag font digunakan untuk mengatur huruf sesuai dengan keinginan kita. Mulai dari ukuran, jenis serta warna huruf. Beberapa parameter yang sering digunakan dalam tag font, yaitu:

<font size="1">satu</font>
<font size="2">dua</font>
<font size="3">tiga</font>
<font size="4">empat</font>
<font size="5">lima</font>
<font size="6">enam</font>
<font size="7">tujuh</font>

<br />

<font size="-6">MinEnam</font>
<font size="-5">MinLima</font>
<font size="-4">MinEmpat</font>
<font size="-3">MinTiga</font>
<font size="-2">MinDua</font>
<font size="-1">MinSatu</font>
<font size="0">NOL</font>
<font size="+1">PlusSatu</font>
<font size="+2">PlusDua</font>
<font size="+3">PlusTiga</font>
<font size="+4">PlusEmpat</font>
<font size="+5">PlusLima</font>
<font size="+6">PlusEnam</font>

Berikut hasilnya :

Font Face

Digunakan untuk mengatur jenis huruf. Cara penulisannya sebagai berikut :kalimat</font&gt

bisa diganti dengan : Times New Roman, Arial, Courier New, Verdana, dll.

Contoh penerapannya :

<font face="Times New Roman">Ini contoh penggunaan font face</font> <br />
<font face="Arial">Ini contoh penggunaan font face</font> <br />
<font face="Courier New">Ini contoh penggunaan font face</font> <br />
<font face="Verdana, Arial, Helvetica, sans-serif">Ini contoh penggunaan font face</font> <br />
<font face="Geneva">Ini contoh penggunaan font face</font> <br />
<font face="Janda Celebration Script">Ini contoh penggunaan font face</font> <br />
<font face="Dark Garden">Ini contoh penggunaan font face</font>

Ini hasilnya:

7. Tag Enumerasi (List, Unordered List, Ordered List)
- <li></li>: tag umum yang diginakan untuk menandai suatu item dari daftar (enumerasi).
- <ul></ul> : untuk menandai dengan bullet.
- <ol></ol> : untuk menandai enumerasi dengan angka.
Contoh penerapannya :
```
Menu makanan:
<li>Sate Kambing</li>
<li>Bakso Ayam</li>
<li>Nasi Goreng</li>

 
Jenis-jenis tempat makan : 
<ol>
 <li>Restaurant</li>
 <li>Rumah makan :</li>
 <ul>
 <li>Rumah makan Padang</li>
 <li>Rumah makan khas Bali</li>
 </ul>
</ol>
```
Hasilnya sebagai berikut :

8. Tag Garis Mendatar (Horisontal Line)

Digunakan untuk membuat garis pemisah mendatar. Seperti halnya tag , tag ini juga memiliki 2 jenis, yaitu :

<hr>(tag garis pemisah mendatar yang umum digunakan)

<hr />(tag garis pemisah yang dianjurkan berdasarkan XML style)

O, iya. Untuk tag yang satu ini agan tidak perlu menambahkan penutup tag. Tidak perlu menambahkan </hr> ya... Berikut contoh penerapannya :
```
Halo, selamat datang. Perkenalkan nama saya Wiwin Savitri. Ini adalah homepage sederhana saya.
<hr />
Di sini saya menerangkan contoh penerapan tag garis mendatar. Terima kasih agan, telah mengunjungi homepage saya.
```
Berikut hasilnya :