Tag / Kode / Perintah dari HTML
Pada Halaman sebelumnya, Anda sudah diperkenalkan tata cara atau aturan penulisan kode HTML beserta urutan-urutannya. Nah setelah Anda paham mengenai tata cara penulisan kode-kode HTML sekarang saatnya bagi Anda untuk dibawa lebih jauh mengenai tag atau perintah yang berlaku pada HTML. Tak perlu banyak pengantar lagi, sekarang saya akan menjelaskan mengenai TAG HTML ini satu persatu.
Pada Halaman sebelumnya, Anda sudah diperkenalkan tata cara atau aturan penulisan kode HTML beserta urutan-urutannya. Nah setelah Anda paham mengenai tata cara penulisan kode-kode HTML sekarang saatnya bagi Anda untuk dibawa lebih jauh mengenai tag atau perintah yang berlaku pada HTML. Tak perlu banyak pengantar lagi, sekarang saya akan menjelaskan mengenai TAG HTML ini satu persatu.
1. <center> dan </center>
Tag ini mempunyai fungsi untuk membuat suatu objek
berada di tengah suatu bidang yang ditentukan. Objek itu dapat berupa teks,
image maupun tabel. Suatu objek akan tetap berada di tengah sampai Tag penutup </center> ditemukan. Jadi setelah Anda memberi
Tag <center> jangan lupa untuk memberikan
Tag penutupnya yaitu </center> pada akhir
dari objek yang akan diposisikan pada tengah suatu bidang.
Contoh : modifikasi dari latihan1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.0 Transitional//EN">
<html>
<head>
<title>Latihan Membuat File HTML</title>
<meta name="author" content="Malih Tongtong">
<meta name="description" content="Uji coba pembuatan file HTML yang sederhana">
<meta name="keywords" content="Latihan,HTML,Malih,berjalan,baik,atau,tidak">
</head>
<body>
<center>
Ini adalah program HTML pertamaku.
</center>
</body>
</html>
<html>
<head>
<title>Latihan Membuat File HTML</title>
<meta name="author" content="Malih Tongtong">
<meta name="description" content="Uji coba pembuatan file HTML yang sederhana">
<meta name="keywords" content="Latihan,HTML,Malih,berjalan,baik,atau,tidak">
</head>
<body>
<center>
Ini adalah program HTML pertamaku.
</center>
</body>
</html>
Pada file latihan1.html yang belum ditambahkan tag
<center> teks berada pada keadaan default yaitu rata kiri, sedangkan
setelah diberi tag <center> maka teks akan berada pada tengah layar
monitor.
2. <b> dan </b>
Tag ini mempunyai fungsi untuk membuat huruf atau karakter yang ditampilkan menjadi tebal (BOLD).
Contoh penggunaan nya di dalam program :
Ini adalah <b>program HTML</b> pertamaku.
Ini adalah program HTML pertamaku.
Pada contoh diatas, kalimat program
HTML diapit dengan tag <b> dan </b> , maka ketika Anda
jalankan di browser kalimat tersebut akan tercetak dengan huruf tebal.
3. <font> dan </font>
Tag ini berfungsi untuk mengatur tampilan jenis,
warna, dan ukuran suatu karakter atau huruf (font), Anda lihat huruf-huruf yang
ada pada tutorial ini, warna-warna dari huruf-huruf itu sengaja saya buat
demikian agar Anda dapat membedakan yang mana Objek, keterangan, dan subjek
nya. Huruf pada Objek ini ditandai dengan huruf berwarna merah, keterangan
ditandai dengan huruf hitam dan subjek dengan warna biru.
Atribut dari Tag <font> ini ada beberapa jenis
antara lain :
a. color
|
:
|
Untuk merubah warna dari huruf atau karakter.
|
b. size
|
:
|
Untuk merubah ukuran huruf, besar kecilnya ukuran
huruf di deklarasikan dengan angka 1 sampai 6.
|
c. face
|
:
|
Untuk merubah jenis dari huruf yang akan kita
gunakan seperti Arial, Times New Roman, Verdana dan sebagainya.
|
Atribut color :
contoh penggunaan nya di dalam program :
<font color="black">Tulisan ini berwarna hitam</font>
<font color="red">Tulisan ini berwarna merah</font>
<font color="blue">Tulisan ini berwarna biru</font>
<font color="green">Tulisan ini berwarna hijau</font>
<font color="white">Tulisan ini berwarna putih</font>
contoh penggunaan nya di dalam program :
<font color="black">Tulisan ini berwarna hitam</font>
<font color="red">Tulisan ini berwarna merah</font>
<font color="blue">Tulisan ini berwarna biru</font>
<font color="green">Tulisan ini berwarna hijau</font>
<font color="white">Tulisan ini berwarna putih</font>
Anda dapat merubah warna dari huruf atau karakter
sesuka hati Anda, contoh diatas hanya beberapa warna saja yang di sajikan.
Selain dengan nama warna dalam bahasa inggris, Anda juga dapat menggunakan kode
HEXA seperti pada table dibawah ini.
DAFTAR WARNA - WARNA
DAN KODE NYA
|
|||||||
#000000
|
#333300
|
#003366
|
#333399
|
||||
#800000
|
#808000
|
#008080
|
#666699
|
||||
#FF0000
|
#99CC00
|
#33CCCC
|
#800080
|
||||
#FF00FF
|
#FFFF00
|
#00FFFF
|
#993366
|
||||
#FF99CC
|
#FFFF99
|
#CCFFFF
|
#CC99FF
|
||||
#993300
|
#003300
|
#000080
|
#333333
|
||||
#FF6600
|
#008000
|
#0000FF
|
#808080
|
||||
#FF9900
|
#339966
|
#3366FF
|
#969696
|
||||
#FFCC00
|
#00FF00
|
#00CCFF
|
#C0C0C0
|
||||
#FFCC99
|
#CCFFCC
|
#99CCFF
|
#FFFFFF
|
||||
Atribut size :
Contoh penggunaan nya di dalam program :
<font size="1">Huruf ini mempunyai ukuran 1</font>
<font size="2">Huruf ini mempunyai ukuran 2</font>
<font size="3">Huruf ini mempunyai ukuran 3</font>
<font size="4">Huruf ini mempunyai ukuran 4</font>
<font size="5">Huruf ini mempunyai ukuran 5</font>
Contoh penggunaan nya di dalam program :
<font size="1">Huruf ini mempunyai ukuran 1</font>
<font size="2">Huruf ini mempunyai ukuran 2</font>
<font size="3">Huruf ini mempunyai ukuran 3</font>
<font size="4">Huruf ini mempunyai ukuran 4</font>
<font size="5">Huruf ini mempunyai ukuran 5</font>
Selain dengan angka, Anda juga dapat mendeklarasikan
ukuran huruf dengan besarnya PIXEL contoh : <font
size="1px">
Atribut face :
Contoh penggunaan nya di dalam program :
<font face="arial">Huruf ini type ARIAL</font>
<font face="times new roman">Huruf ini type TIMES NEW ROMAN</font>
<font face="verdana">Huruf ini type VERDANA</font>
<font face="tahoma">Huruf ini type TAHOMA</font>
Atribut face :
Contoh penggunaan nya di dalam program :
<font face="arial">Huruf ini type ARIAL</font>
<font face="times new roman">Huruf ini type TIMES NEW ROMAN</font>
<font face="verdana">Huruf ini type VERDANA</font>
<font face="tahoma">Huruf ini type TAHOMA</font>
4. <u> dan </u>
Tag ini berfungsi untuk memberikan efek garis bawah
(underlines) pada suatu huruf atau karakter.
Contoh penulisannya di dalam program :
Menteri Pendidikan Nasional <u>memberikan sumbangan </u> untuk kaum miskin.
Menteri Pendidikan Nasional memberikan sumbangan untuk kaum miskin.
Contoh penulisannya di dalam program :
Menteri Pendidikan Nasional <u>memberikan sumbangan </u> untuk kaum miskin.
Menteri Pendidikan Nasional memberikan sumbangan untuk kaum miskin.
Pada contoh kalimat diatas kalimat MEMBERIKAN
SUMBANGAN diapit oleh tag <u> dan </u> bila dijalankan pada browser maka kalimat
yang di apit oleh tag itu akan diberi tanda garis bawah (underlines).
5. <br>
Tag ini berfungsi untuk berpindah baris ke baris
berikutnya. Misalkan Anda membuat sebuah karya tulis yang tentunya tulisan itu
cukup panjang untuk dibaca, atau Anda mennginginkan sesuatu kalimat harus
berada dibawahnya walaupun kalimat itu hanya terdiri dari beberapa kata, Anda
dapat menggunakan tag <br> untuk
memisahkannya. Untuk Tag <br> tidak perlu
ditutup seperti halnya tag-tag yang telah disinggung diatas. jadi cukup Anda
berikan tag <br> dimana Anda
menginginkannya.
Contoh penggunaanya dalam program :
Ini baris kesatu, <br>Ini baris kedua, <br>Ini baris ketiga.
Ini baris kesatu, <br>Ini baris kedua, <br>Ini baris ketiga.
Setelah Anda menjalankannya di Browser, maka Kalimat
diatas akan menjadi seperti ini.
Ini baris kesatu,
Ini Baris kedua,
Ini baris ketiga.
Ini baris kesatu,
Ini Baris kedua,
Ini baris ketiga.
6. <p>
Tag ini mempunyai fungsi untuk membuat sebuah paragraf
baru. Didalam sebuahartikel tentunya banyak sekali paragraf-paragraf untuk
memisahkan pokok pikiran yang terkandung dalam kumpulan kalimat tersebut, untuk
memisahkan paragraf yang satu dengan yang lainnya, maka Tag <p> ini
digunakan. Atribut dari Tag <p> ini ada 3 jenis yaitu Rata kanan ( align="right" ) , rata kiri ( align="left" ), rata kanan kiri ( align="justify" ). dan rata tengah ( align="center" ).
Contoh penggunaan nya di dalam program :
Rata kiri <p align="left">
|
paragraf yang ada di bagian ini akan disusun
berdasarkan paragraf dengan aturan rata kiri, sehingga semua huruf yang
berada di bagian kiri halaman akan terlihat rapi.
|
Rata kanan <p align="right">
|
paragraf yang ada di
bagian ini akan disusun berdasarkan paragraf dengan aturan rata kanan,
sehingga semua huruf yang berada di bagian kanan halaman akan terlihat rapi.
|
Rata kanan-kiri <p align="justify">
|
paragraf yang ada di bagian ini akan disusun
berdasarkan paragraf dengan aturan rata kanan-kiri, sehingga semua huruf yang
berada di bagian kanan dan kiri halaman akan terlihat rapi.
|
Rata tengah <p align="center">
|
paragraf yang ada di
bagian ini akan disusun berdasarkan paragraf dengan aturan rata tengah,
sehingga semua huruf akan terpusatkan dibagian tengah.
|
7. <sub> dan </sub>
Tag ini mempunyai fungsi untuk membuat sebuah huruf
atau karakter berada sedikit kebawah dari huruf atau karakter yang lain.
Misalnya kita ingin menuliskan rumus suatu senyawa kimia, maka tag <sub>
ini diperlukan.
Contoh penggunaan nya di dalam program :
H<sub>2</sub>O tampilan di browser : H2O
FeCl<sub>3</sub> tampilan di browser : FeCl3
CO<sub>2</sub> tampilan di browser : CO2
Contoh penggunaan nya di dalam program :
H<sub>2</sub>O tampilan di browser : H2O
FeCl<sub>3</sub> tampilan di browser : FeCl3
CO<sub>2</sub> tampilan di browser : CO2
8. <sup> dan </sup>
Tag ini merupakan kebalikan dari tag <sub>, bila
kita ingin membuat suatu huruf atau karakter agak sedikit keatas maka tag <sup> ini diperlukan. Misalnya kita ingin
menuliskan suatu persamaan matematika maka kita gunakan tag ini untuk membuat
suatu karakter atau huruf berada sedikit diatas yang lainnya.
Contoh penggunaan nya di dalam program :
Contoh penggunaan nya di dalam program :
X <sup>2</sup>
+ Y <sup>2</sup> + X + Y + 1 = 0
tampilan di browser : X 2 + Y 2 + X + Y + 1 = 0
tampilan di browser : X 2 + Y 2 + X + Y + 1 = 0
9. <i> dan </i>
Tag <i> ini
berfungsi untuk membuat huruf atau karakter menjadi ITALIC.
Contoh penggunaan nya di dalam program :
Menteri Pendidikan Nasional <i>memberikan santunan</i> untuk anak yatim piatu
Kalimat diatas bila di jalankan pada browser menjadi seperti berikut ini :
Menteri Pendidikan Nasional memberikan santunan untuk anak yatim piatu
Contoh penggunaan nya di dalam program :
Menteri Pendidikan Nasional <i>memberikan santunan</i> untuk anak yatim piatu
Kalimat diatas bila di jalankan pada browser menjadi seperti berikut ini :
Menteri Pendidikan Nasional memberikan santunan untuk anak yatim piatu
10. <hr>
Tag ini berfungsi untuk memberikan garis batas. Anda
lihat Halaman web ini, Untuk memisahkan Materi yang satu dengan yang lain saya
memberi batas dengan garis. Yah itulah kegunaan dari tag <hr>
11. <ol>, <li>, </li> dan </ol>
Terkadang suatu tulisan perlu diberi penjelasan dengan
tanda-tanda tertentu, agar si pembaca memahami bahwa tulisan itu merupakan satu
kesatuan yang terdiri dari beberapa point. Sebagai contoh sekali lagi Anda
perhatikan Halaman web ini. Untuk memperjelas sesuatu bagian dari pokok
pembahasan, saya menggunakan angka-angka yang merupakan point-point dari suatu
bahasan dalam satu kesatuan. Tag ini saya beri nomor urut ke 11. Dengan
perintah atau tag <ol> ini maka nomor urut akan dibuat secara otomatis.>
Contoh penggunaan nya di dalam program :
Contoh penggunaan nya di dalam program :
Jadwal kegiatan untuk hari ini :
<ol>
<li>Mandi.</li>
<li>Sarapan pagi.</li>
<li>Berangkat ke Kantor.</li>
<li>Meeting dengan Kepala Bagian.</li>
<li>Pulang dari Kantor.</li>
<li>Mandi Sore.</li>
<li>Istirahat.</li>
</ol>
<ol>
<li>Mandi.</li>
<li>Sarapan pagi.</li>
<li>Berangkat ke Kantor.</li>
<li>Meeting dengan Kepala Bagian.</li>
<li>Pulang dari Kantor.</li>
<li>Mandi Sore.</li>
<li>Istirahat.</li>
</ol>
Maka setelah dijalankan pada browser akan tampak
sepertidi bawah ini :
Jadwal kegiatan untuk hari ini :
Jadwal kegiatan untuk hari ini :
- Mandi
- Sarapan pagi
- Berangkat ke Kantor
- Meeting dengan Kepala Bagian
- Pulang dari Kantor
- Mandi Sore
- Istirahat
Perhatikan.., setiap item di apit oleh tag <li> dan </li>,
dan Tag <li> , </li> ini harus berada diantara Tag <ol> dan
</ol> .
12. <ul>, <li>, </li> dan </ul>
Tag ini hampir mirip dengan tag <ol> diatas,
bedanya adalah item-item nya bukan ditandai dengan angka melainkan ditandai
dengan titik atau DOT yang besar.
Contoh penggunaan nya di dalam program :
Jadwal kegiatan untuk hari ini :
<ul>
<li>Mandi</li>
<li>Sarapan pagi</li>
<li>Berangkat ke Kantor</li>
<li>Meeting dengan Kepala Bagian</li>
<li>Pulang dari Kantor</li>
<li>Mandi Sore</li>
<li>Istirahat</li>
</ul>
Maka setelah dijalankan di Browser akan terlihat seperti dibawah ini.
Jadwal kegiatan untuk hari ini :
<ul>
<li>Mandi</li>
<li>Sarapan pagi</li>
<li>Berangkat ke Kantor</li>
<li>Meeting dengan Kepala Bagian</li>
<li>Pulang dari Kantor</li>
<li>Mandi Sore</li>
<li>Istirahat</li>
</ul>
Maka setelah dijalankan di Browser akan terlihat seperti dibawah ini.
Jadwal kegiatan untuk hari ini :
- Mandi
- Sarapan pagi
- Berangkat ke Kantor
- Meeting dengan Kepala Bagian
- Pulang dari Kantor
- Mandi Sore
- Istirahat
Wow...! Sampai disini, bila Anda menguasai tag-tag
yang telah disajikan diatas. Saya ucapkan selamat..!, sebab dengan beberapa TAG
itu KELAHIRAN SEORANG DESIGNER SEJATI dimulai.
Tidak ada komentar:
Posting Komentar