Tag HTML – Sekilas Info

HTML (HyperText Markup Language)

HTML  adalah bahasa yang digunakan untuk membuat sebuah halaman web (dokumen HTML).

Ciri dokumen HTML adalah mempunyai elemen dan tag.

“Di sini saya akan membahas mengenai Tag yang ada pada HTML. “

Langsung saja kita masuk ke macam-macam Tag pada HTML :

  • Property Tag <body>

Tag <body> memiliki sejumlah property yang berguna untuk menentukan latar belakang dari tampilan sebuah halaman Web seperti :

bgcolor

Untuk menentukan warna latar belakang halaman.

Contoh : <body bgcolor=”blue”> /* Halaman Web yang dibuat akan berwarna latar biru */

Background

Untuk mengambil sebuah file image menjadi latar belakang halaman Web.

Contoh : <body background=”image.jpg”> /*File image.jpg akan menjadi latar belakang halaman*/

topmargin

Menentukan lebar margin atas.

Contoh : <body topmargin=”10”> /*Lebar margin atas 10 piksel*/

leftmargin

Menentukan lebar margin kiri.

Contoh : <body leftmargin=”20”> /*Lebar margin kiri 20 piksel*/

rightmargin

Menentukan lebar margin kanan.

Contoh : <body rightmargin=”30”> /*Lebar margin kanan 30 piksel*/

bottommargin

Menentukan lebar margin bawah.

Contoh : <body bottommargin=”40”> /*Lebar margin bawah 40 piksel*/

Text

Menentukan warna teks (tulisan) standar.

Contoh : <body text=”white”> /*Tulisan standar dalam halaman Web akan berwarna putih*/

  • Tag <H>

Pasangan tag <Hn> dan tag </Hn> (n adalah angka dari 1 sampai 6) berguna untuk menampilkan tulisan yang bergaya seperti judul.

Contoh :

<body background=”BG.jpg”>

<H1>Ini Tulisan Judul Paling Besar</H1>

<H2>Judul ini lebih kecil dari di atas</H2>

<H3>Ini lebih kecil lagi</H3>

<H4>Tambah kecil saja</H4>

<H5>Apa cukup kecil?</H5>

<H6>Belum, ini yang paling kecil</H6>

</body>

  • Tag <P>

Pasangan tag <P> dan tag </P> berguna untuk membuat tulisan dalam paragraf.

  • Tag <font> dan properti-propertinya.

Pasangan tag  <font>  dan </font>  digunakan untuk menentukan font yang digunakan untuk teks yang berada di antara pasangan tag ini.

Tag <font> memiliki property-property sebagai berikut :

face

Menentukan jenis font yang digunakan.

Contoh : <font face=”Arial”>Ini font Arial</font>

color

Menentukan warna tulisan.

Contoh : <font face=”Verdana” color=”#0000FF”>Ini font Verdana warna biru</font>

size

Menentukan ukuran font. Ukuran font ditentukan berdasarkan tabel berikut:

Ukuran                   Konversi

1                              8pt

2                              10pt

3                              12pt

4                              18pt

  • Tag <b> dan <i>

Tag <b>, tag <i>, dan tag <u> adalah tag berpasangan.

Pasangan tag <b></b> menentukan teks ditampilkan secara bold,

Pasangan tag <i></i> menentukan teks ditampilkan secara italic.

Pasangan tag <u></u> menentukan teks ditampilkan secara underline.

Tag-tag tersebut dapat dikombinasikan.

Contoh :

<b>Bold</b>

<i>Italic</i>

<u>Underlined</u>

<b><i>Bold dan Italic</i></b>

<b><i><u>Bold, Italic, Underlined</u></i>Bold saja.</b>

  • Tag <BR>

Tag <BR> berguna untuk mengganti baris.

Contoh :

Baris ke-1.<br>Baris ke-2.

  • Tag <A>

Tag <A> berguna untuk menentukan suatu teks menjadi sebuah Hyperlink.

Hyperlink adalah penghubung antara satu halaman Web dengan halaman Web yang lain. Jika seorang pengguna meng-klik sebuah hyperlink, browser akan membuka halaman Web yang ditentukan oleh property “href” dari hyperlink tersebut.

Contoh: Klik <a href=”hal2.html”>di sini</a> untuk lanjut.

  • Tag <img>

Tag <img> berguna untuk menempatkan sebuah file image ke dalam halaman Web. Tag <img> memiliki property-property sebagai berikut :

src

Menentukan lokasi dari file image yang hendak ditampilkan

Contoh : <img src=”judul.gif”>

height

Menentukan tinggi (dalam piksel) dari file image yang akan ditampilkan

width

Menentukan lebar (dalam piksel) dari file image yang akan ditampilkan

Contoh : <img src=”/foto/judul.gif” height=”50” width=”200”>

Keterangan : Menampilkan gambar ‘judul.gif’ dengan tinggi 50 piksel dan lebar 200 piksel; dimana gambar tersebut ada di dalam sub direktori ‘foto’.

border

Menentukan lebar garis keliling (frame) dalam satuan piksel.

Contoh : <img src=”/foto/google.jpg” border=”1”>

Keterangan : akan menampilkan file image ‘google.jpg’  dengan border = 1 piksel.

  • Tag <OL>

Tag <OL> (ordered list) adalah tag berpasangan yang menandakan paragraf numbering. Di antara tag <OL> dan tag </OL> kita meletakkan pasangan tag <LI> dan </LI> untuk setiap item nomor.

Tag <OL> memiliki property start (Menandakan nomor pertama yang digunakan).

Contoh :

<OL start=”3”>

<LI>Baris ini akan memiliki nomor 3</LI>

<LI>Baris ini akan memiliki nomor 4</LI>

</OL>

  • Tag <UL>

Tag <UL> (unordered list) adalah tag berpasangan yang menandakan paragraf bullet. Di antara tag <UL> dan tag </UL> kita meletakkan pasangan tag <LI> dan </LI> untuk setiap item bullet. Tag <UL> memiliki property :

imagesrc

Digunakan apabila kita hendak menggunakan sebuah file image sebagai pengganti bullet standar. Property ini menunjuk kepada file image yang hendak digunakan.

Contoh :

<UL imagesrc=”panah.gif”>

<LI>Contoh 1</LI>

<LI>Contoh 2</LI>

</UL>

Keterangan : akan menghasilkan paragraf bullet dengan menggunakan file gambar “panah.gif” sebagai bullet-nya.

type

Menentukan penggunaan bullet standar lain. Property ini dapat memiliki nilai “circle” untuk bullet berbentuk bulat dan nilai “square” untuk bullet berbentuk kotak.

Contoh :

<UL type=”circle”>

<LI>Ini bullet berbentuk bulat</LI>

</UL>

<UL type=”square”>

<LI>Sedangkan ini berbentuk kotak</LI>

</UL>

  • Tag <LI> (Paired)

Seperti yang telah disebutkan di atas, pasangan tag <LI> dan </LI> menandakan setiap item dalam paragraf numbering atau bullet. Tag <LI> memiliki properti sebagai berikut :

value

Digunakan hanya untuk tag <OL>, menentukan loncatan nomor.

Contoh :

<OL start=”3”>

<LI>Ini nomor 3</LI>

<LI>Ini nomor 4</LI>

<LI value=”7”>Ini nomor 7</LI>

<LI>Ini nomor 8</LI>

</OL>

type

Digunakan hanya untuk tag <UL>, menentukan jenis bullet untuk item tertentu jika berbeda dengan yang ditentukan pada tag <UL>.

Contoh :

<UL type=”circle”>

<LI>Yang ini menggunakan bullet circle</LI>

<LI type=”square”>Tapi yang ini square</LI>

<LI>Yang ini tetap circle</LI>

</UL>

Terima Kasih kepada Mas Bram yang sudah memberikan dasar HTML kepada saya ketika kuliah dulu… hehe…

Rate this article!
Tag HTML – Sekilas Info,0 / 5 ( 0votes )
Tags:

2 Responses

  1. author

    BimaSakti857 years ago

    semangat bung … ben iso entuk alexa & PR’e heheh 😀

    Reply
  2. author
    Author

    L13min7 years ago

    Oke.. Oke…. semangat… (gym) =))

    Reply

Leave a Reply