Tag / Kode / Perintah dari HTML

Posted by Salsa.net | Posted in

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>
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>
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>
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>
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.
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.
Setelah Anda menjalankannya di Browser, maka Kalimat diatas akan menjadi seperti ini.

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
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 :


X <sup>2</sup> + Y <sup>2</sup> + 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
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 :
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>
Maka setelah dijalankan pada browser akan tampak sepertidi bawah ini :

Jadwal kegiatan untuk hari ini :
  1. Mandi
  2. Sarapan pagi
  3. Berangkat ke Kantor
  4. Meeting dengan Kepala Bagian
  5. Pulang dari Kantor
  6. Mandi Sore
  7. 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 :
  • Mandi
  • Sarapan pagi
  • Berangkat ke Kantor
  • Meeting dengan Kepala Bagian
  • Pulang dari Kantor
  • Mandi Sore
  • Istirahat

Comments (1)

    Anonymous Said...

    Pembesar Penis

    Vimax Pill Canada

    ObatPerangsang Sex Toys Pria

    Posted on: December 31, 2014 at 9:52 PM

Post a Comment

Subscribe to: Post Comments (Atom)