Senin, 12 Desember 2011

PENGENALAN TAG (KODE) PADA HTML UNTUK PEMBUATAN WEB


 PENGENALAN TAG (KODE) PADA HTML
UNTUK PEMBUATAN WEB

Pada awalnya pembuatan web dilakukan dengan cara menuliskan tag-tag atau
kode HTML (HiperText Markup Language) dimana sangat tidak efisien dan praktis, namun sekarang sudah banyak software-software web design  yang sudah menyediakan fasilitas pembuatan object / komponen untuk halaman Web yang sifatnya  instant lebih praktis dan mudah sehingga kita tidak perlu lagi menuliskan tag-tag atau kode HTML. Adapun software Web Design yang sekarang banyak digunakan adalah Front Page, Macromedia Dreamweaver MX, Page ABC, Web Page Maker dan software-software lain yang bisa mentransfer file ke format  HTML. Namun walaupun perkembangan software untuk pembuatan Web sudah banyak mengalami kemajuan , tetapi alangkah lebih baiknya juga apabila kita mengetahui cara pembuatan Web dengan tag-tag atau kode, karena selain untuk menambah pengetahuan juga melatih cara berpikir dengan logika. Dengan demikian pada bab ini akan dijelaskan cara pembuatan Web dengan tag atau kode. Cara penulisan tanda tag terbagi dua yaitu tag pembuka <tag perintah> , dan tag penutup </tag perintah>.

Dalam pembuatan file web dengan tag atau kode sebaiknya kita mengikuti susunan struktur seperti dibawah ini :

<html>
  <head>
    <title>”Judul untuk file web”</title>
  </head>
  <body>
            …..
            Susunan tag/kode isi
            …..
  </body>
</html>

Dalam membuat suatu tulisan tentunya kita menginginkan format yang rapih dan teratur, apalagi untuk halaman Web Site yang nantinya kita publikasikan melalui internet. Berikut penjelasan penggunaan tag HTML :


I. TAG HTML UNTUK FORMAT TEKS.

Atribut format Teks :

Tag

Fungsi

<b>…</b>

Teks dengan format tebal (Bold)

<i>…</i>

Teks dengan format miring  (Italic)

<u>…</u>

Teks dengan format garis bawah (Underline)


Contoh :

<p><b>ini tulisan teks bold (tebal)</b></p>
<p><i>ini tulisan teks italic (miring)</i></p>
<p><u>ini tulisan teks underilie (garis bawah)</u></p>
<p><u><b><i>ini tulisan teks underline, Italic, Bold (garis bawah, Miring dan Tebal)</i></b></u></p>

Hasil / Output :

ini tulisan teks bold (tebal)
ini tulisan teks italic (miring)
ini tulisan teks underlnie (garis bawah)
ini tulisan teks underiline, Italic, Bold (garis bawah, Miring dan Tebal)

Dalam penulisan dokumen atau teks biasanya diperlukan paragraf baru maka tag-nya adalah <p> … </p>, dan untuk mengganti baris tag-nya adalah <br> … </br> yang berarti Break.



Sedangkan untuk pengaturan warna, font dan ukuran teks adalah dengan tag : <font > … </font>

Atribut Tag  <font> … </font> :

Parameter

Fungsi

Color

Untuk menentukan warna teks

Size

Untuk menentukan ukuran teks

Face

Untuk menentukan jenis font yang digunakan


Apabila ketiga parameter tidak dituliskan dalam tag Font , maka software akan mendefaultkan ketiga parameter tersebut dengan format standar antara lain : Color defaultnya hitam, Size defaulnya 12, Face defaultnya tergantung pada setting software itu sendiri.

Tag lebih lengkap :

<font color="nama / kode warnasize="ukuran teks" face="jenis font”> Teks </font>

Contoh :

<font color="black” size="4" face="arial”> Contoh Font </font>

contoh diatas menampilkan teks dengan warna hitam , ukuran font 4 , jenis font Arial.

Catatan : Untuk atribut warna bisa dituliskan dengan nama warna atau kode warna , contoh diatas penulisan warna dengan warna hitam (black) , apabila menggunakan kode berarti menjadi : color="#000000" , kode warna dari hitam adalah  “#000000".





Atribut Tag <div align> … </div align> :

Format

Fungsi

Center

Menempatkan teks ditengah

Left

Menempatkan teks rata kiri

Right

Menempatkan teks rata kanan

Justify

Menempatkan teks rata kanan kiri


Contoh : (Menempatkan teks di tengah)

<div align="center"> Teks di tengah</div>

Selain atribut diatas sebagai parameter untuk pengaturan teks, ada juga parameter yang berfungsi untuk mengatur format teks yaitu :

Atribut :

Parameter

Fungsi

<p>…</p>

Untuk mengganti paragraf

<pre>…</pre>

Untuk membuat teks dengan ukuran huruf yang sama (performatted)

<h1> … </h1> s.d.

<h6> … </h6>

 

Untuk menentukan ukuran font dengan parameter <h1>,<h2>,<h3>,<h4>,<h5> dan <h6>.  (heading)


Dalam pengaturan letak teks biasanya kita menginginkan letak teks yang tidak terlalu merapat         ke kiri atau kanan melainkan ada spasi atau  jarak sebelum posisi teks tersebut, maka dalam tag HTML kita gunakan parameter : <blockquote> … </blockquote> parameter ini akan memberikan jarak sebanyak lima spasi.

v MEMBUAT FORMAT BULLETS AND NUMBERING

Apabila kita membuat daftar urutan , biasanya kita menggunakan nomor atau tanda bullet, contohnya  dalam Microsoft Word sudah tersedia untuk format Bullets and Numbering, jadi untuk menggunakan format Bullets and Numbering dalam pembuatan website dengan tag, kita bisa menggunakan tag <ol>… </ol> yaitu Ordered List (Number), <ul>… </ul> yaitu Unordered List (Bullet)  dan dimana kedua parameter tersebut didalamnya diikuti dengan parameter <li> yang berarti List Item (daftar item).

1 komentar:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More