Minggu, 02 Januari 2011
Variasi Tag Pada HTML
* Struktur Dokumen HTML
<html>
<head>
<title>Judul Dokumen</title>
</head>
<body>
isi dokumen
</body>
</html>
* Pengaturan Huruf
Ditandai dengan tag <font> dan ditutup dengan tag </font>.
Atribut - atribut :
o Ukuran Font
Untuk membuat ukuran font, digunakan atribut size=n. nilai n berkisar antara 0 sampai dengan 7.
Contoh :
<font size=4>Font Size 4</font>
o Jenis Font
Untuk membuat jenis font, kita gunakan atribut “face=string”. Nilai string berupa string yang menunjukkan nama font.
Contoh :
<font face=”arial”>Arial</font>
o Warna Font
Untuk mengatur warna font, digunakan atribut “color=RRGGBB”. Nilai RRGGBB adalah kombinasi angka dalam bilangan hexa yang menunjukkan kapasitas warna merah (RR), hijau (GG), dan biru (BB). Dapat juga menuliskan langsung jenis warna dengan format bahasa inggris.
Contoh :
<font color=”blue”>Tulisan berwarna biru</font>
o Style Font
Membuat tulisan tercetak tebal, miring atau garis bawah. Kita gunakan atribut :
* <B> untuk menebalkan (bold) tulisan,
Contoh :
<b>Tulisan tebal</b>
* <I> untuk memiringkan (italic) tulisan
Contoh :
<i>Tulisan miring</i>
* <U> untuk menggaris-bawahi (underline)
Contoh :
<u>Tulisan bergaris bawah</u>
o Subscipt Dan Superscript
Untuk membuat tulisan subscript kita gunakan pasangan tag <sub> dan </sub>. Sedangkan untuk tulisan superscript digunakan pasangan tag <sup> dan </sup>.
Contoh :
Tulisan <sub>Subscript</sub>normal
Tulisan <sup>Superscript</sup>normal
* Membuat Headings
Heading adalah huruf-huruf berukuran khusus yang digunakan untuk menuliskan judul bab atau sub bab. Ada enam tingkatan header mulai dari H1 hingga H6. H1 adalah header yang paling besar dan H6 adalah header yang paling kecil.
Contoh :
<body>
<h1>Ukuran paling besar</h1>
<h6>Ukuran paling kecil</h6>
* Membuat Paragraph
Untuk membuat paragraph digunakan tag tunggal <p>.
Atribut - atribut :
o Perataan
Untuk membuat perataan paragraph kita gunakan atribut align=”left” Untuk perataan kiri, align=”center” untuk perataan tengah dan align=”right” untuk rata kanan.
Contoh :
<p align=”left”>Paragraf rata kiri.
<p align=”center”>Paragraf rata tengah.
o Membuat Baris Baru
Untuk membuat baris baru menggunakan tag <br>. Jika tag <br> ditulis dua kali maka akan menghasilkan 2 baris kosong, begitu seterusnya.
Contoh :
<p> Setelah ini akan ada baris baru<br>
o Membuat List
Ada 4 macam list yaitu :
* Unordered List
Biasanya ditandai dengan pemakaian bullet untuk menandai sebuah item pada list. Untuk membuatnya digunakan tag <ul> dan tag penutup </ul>. Dan unutk item-item dalam list harus diawali dengan tag <li>.
Contoh :
<ul>
<li>item Satu
<li>item dua
</ul>
* Ordered List
Membuat daftar yang berupa penomoran. Ditandai dengan tag <ol> dan diakhiri dengan tag </ol>. Ada beberapa tipe yang dapat digunakan, yaitu :
o Type 1 : 1,2,3,…..,n
o Type A : A,B,C,…….
o Type a : a,b,c,……
o Type I : I,II,III,…..
o Type i : I,ii,iii,….
Contoh :
<ol type= 1 start=2>
<li>2. Item nomor dua
<li type=a> c. Item nomor c
</ol>
* Definition List
Adalah daftar yang mempunyai keterangan pada itemnya. Untuk membuatnya digunakan pasangan tag <dl> dan </dl> yang dibantu oleh tag lainnya yaitu tag <dt> yang menandakan item yang dijelaskan dan tag <dd> menyatakan definisi dari item.
Contoh :
<dl>
<dt>Atekpi
<dd>Adalah salah satu perguruan tinggi di Yogyakarta.
<dt>Merapi
<dd>Merupakan gunung berapi yang teraktif di dunia.
</dl>
* Daftar Menu
Untuk membuat daftar menu kita gunakan pasangan tag <menu> dan </menu>.
Contoh :
<menu>
<li>Makanan
<li>Minuman
<li>Buah-buahan
</menu>
o Mengatur Paragraph Agak Menjorok Ke Dalam
Untuk membuat paragraph agak menjorok ke dalam digunakan pasangan tag <blockquote> dan </blockquote>.
Contoh :
Ini adalah paragraph normal
<blokquote>
<p>Ini adalah paragraph yang menjorok ke dalam.
</blockquote>
Ini paragraph kembali normal.
* Membuat Tautan / Link
Untuk membuat link, digunakan tag <a href> dan diakhiri tag </a>. rumusnya <a href=”lokasi_tujuan”>link</a>.
Contoh :
<a href=”http://www.google.com”>google</a>
Untuk membuka link ke jendela baru digunakan atribut “target=”_blank”” pada tag <a href>.
Contoh :
<a href=”webpage.htm” target=”_blank”>
Untuk melakukan link ke bagian lain dari halaman web dengan menandai suatu daerah dengan atribut NAME pada tag <a>.
Contoh :
<a name=”tanda1”>Ini adalah bagian yang ditandai.</a>
Kemudian untuk membuat link ke bagian tersebut, berikan kode :
<a href=”#tanda1”>Menuju bagian yang ditandai</a>
* Menampilkan Gambar
Untuk bisa menampilkan gambar pada html, kita gunakan tag <img>. Untuk rumusnya <img src=”gambar”>. Jika di tambah atribut “alt=”nama””, maka jika browser mematikan fasilitas penampil grafik akan menampilkan text tersebut.
Contoh :
<img src=”gambar1.jpg” alt=”gambar1”>
Untuk gambar dapat juga digabungkan dengan tag <a> untuk membuat link.
Contoh :
<img src=”gambar1.jpg” alt=”gambar 1” href=”www.google.com”>
Untuk membuat frame yang mengelilingi gambar digunakan atribut hspace dan vspace.
Contoh :
<img src=”contoh.gif” align=”middle” hspace=30 vspace=24>
Untuk mengatur lebar dan panjang gambar digunakan property width dan height. Pada tag <img>
Contoh :
<img src=”contoh.gif” align=”middle” width=50 height=50>
Untuk membuat bingkai pada gambar, kita gunakan atribut border.
Contoh :
<img src="kaligrafi.gif" border="2" />
Untuk memberi text penunjuk keterangan gambar. Saat kursor diarahkan pada gambar, maka akan muncul tulisan yang menerangkan gambar tersebut. Maka bias digunakan atribut title.
Contoh :
<img src="kaligrafi.gif" title="Gambar kaligrafi" />
* Membuat Table
Untuk membuat table kita menggunakan tag <table> dan diakhiri tag </table>. Yang dibantu tag <tr></tr> adalah tag yang menandakan suatu baris dalam tabel, dan tag <td></td> adalah tag yang akan membagi baris menjadi beberapa kolom.
Atribut - atribut pada table :
o bgcolor : atribut untuk menentukan warna latar belakang
Contoh :
<table bgcolor=”blue”>
Table berwarna biru
</table
o background : atribut untuk menentukan gambar yang akan menjadi latar belakang tabel / kolom
Contoh :
<table background=”gambar1.gif”>
Gambar1 akan menjadi background dari table.
</table>
o width : atribut untuk menentukan lebar
Contoh :
<TABLE WIDTH="80%">
Table akan berukuran 80% dari layar
</TABLE>
o height : atribut untuk menentukan tinggi
Contoh :
<table>
<tr height=”200”>
Tinggi table 200
</tr>
</table>
o align : mengatur perataan horizontal
Contoh :
<table>
<tr>
<td align=”right”>Ini akan menjadi rata kanan</td>
</tr>
</table>
o valign : mengatur perataan vertical
Contoh :
<table>
<tr>
<td valign=”top”>Ini akan menjadi rata atas</td>
</tr>
</table>
o border : atribut untuk menentukan lebar bingkai table
Contoh :
<table border=1>
ini membuat lebar bingkai table berukuran 1.
</table>
o cellspacing : atribut untuk menentukan jarak antar kolom
Contoh :
<table cellspacing=”2”>
Jarak antar kolom adalah 2.
</table>
o cellpadding : atribut untuk menentukan jarak antara isi dengan tepi kolom
Contoh :
<table cellpadding=”2”>
Jarak antara isi dengan tepi kolom adalah 2.
</table>
o colspan : menentukan berapa kolom yang akan digabung
Contoh :
<table>
<tr>
<td colspan=”2”>Ini gabungan 2 kolom menjadi satu</td>
</tr>
</table>
o rowspan : menentukan berapa baris yang akan digabung
<table>
<tr>
<td rowspan=”2”>Ini gabungan 2 baris menjadi satu</td>
</tr>
</table>
* Membuat Garis Pembatas
Untuk membuat garis pembatas kita menggunakan tag <hr>.adapun atribut-atributnya adalah :
o WIDTH=”angka”: untuk menentukan lebar garis dalam satuan pixel / persen
o ALIGN=”left|right|center” : menentukan perataan garis
o SIZE=”angka” : menentukan ukuran ketebalan garis.
o NOSHADE : menghilangkan bayangan
Contoh :
<hr width=”500” align=”center” size=”2”>
* Membuat Form
Untuk membuat form, digunakan tag <form> dan diakhiri tag </form>. Tag form memiliki 2 atribut yaitu method untuk menentukan bagaimana form diberlakukan dan action yang berisikan URL tempat pemrosesan form selanjutnya.
Struktur dasarnya adalah :
<form [method=[post|get] “action=”url”]>
…
…
</form>
o Input Box
Adalah inputan pada form yang memungkinkan user memasukkan string dalam satu baris. Untuk membuatnya memakai tag <input> dan memanfaatkan atribut type=”text”, NAME untuk menyatakan input tersebut, VALUE untuk menyatakan nilai dari suatu input, dan SIZE untuk menyatakan panjang sebuah input juga type PASSWORD untuk menampilkan karakter “ * ”.
Contoh :
<table>
<tr>
<td>Nama :</td>
<td><input type=”text” name=”varNama” value=”andi kurniawan”></td>
</tr>
</table>
o Radio Button
Bila atribut TYPE pada tag <input> diganti dengan “radio” maka akan di definisikan sebuah radio button, dan hanya bias diaktifkan salah satunya saja.
Contoh :
Jenis Kelamin :
<input checked type=”radio” name=”Kelamin” value=”Pria”>Pria
<input type=”radio” name=”Kelamin” value=”Wanita”>Wanita
o Checked Box
Pada type ini memungkinkan user untuk memilih satu atau beberapa pilihan atau tidak memilih sama sekali. Biasanya dipakai untuk yang sifatnya opsional. Type checkbox digunakan pada tag <input>.
Contoh :
<input checked type=”checkbox” name=”Hobi” value=”Olah Raga”>Sepak bola
<input type=”ckeckbox” name=”Hobi” value=”Song”>Menyanyi
o Button
Digunakan untuk membuat tombol pada form HTML. Yang pertama dengan memberikan “submit” pada atribut TYPE atau dengan menggunakan atribut “reset”. Submit digunakan untuk action pada tag <form>. Sedangkan reset digunakan unutk menghapus nilai pada seluruh isi form.
Contoh :
<input type=”submit” value=”OK”>
<input type=”reset” value=”Cancel”>
* Keterangan Situs (META)
Kita dapat menempatkan keterangan-keterangan umum soal situs kita di antara tag <HEAD> dan </HEAD>. Keterangan-keterangan tersebut di deklarasikan dengan menggunakan tag <META>. Tag-tag keterangan pada meta ini nantinya bakalan di baca oleh Search Engine bila kita mendaftarkan situs kita pada Database mereka.
Contoh :
<HTML>
<HEAD>
<META NAME="Author" Value="Lutvi Avandi"/>
<META NAME="KeyWords" Value="belajar,komputer,gratis">
<META NAME="Description" Value="Belajar Komputer Gratis !
Cara baru pintar komputer tanpa biaya"/>
<TITLE>Belajar Komputer GRATIS</TITLE>
</HEAD>
<BODY>
Teks pada body diletakkan disini
</BODY>
</HTML>
KeyWords yaitu kata kunci. Jadi kalo ada seseorang yang menggunakan Search Engine lalu mengetikkan kata-kata yang kita masukkan diatas, maka link ke situs kita bakalan ditampilkan di Search Engine tersebut.
Discription adalah info singkat seputar web site kita.
TITLE digunakan untuk menamai halaman web site dan nanti text Title ini bakalan ditempatkan di pojok kiri atas browser.
Namun perlu diingat, bahwa informasi pada Meta Tag ini, bukanlah segala-galanya. Karena Search Engine saat ini tak hanya memperhatikan informasi dari Meta Tag. Kebanyaknya search engine justru mengambil informasi dari tagTITLE, H1..H4, Kata-kata yang di bold dan juga link-link yang ada.
* Membuat Tulisan Berjalan
Untuk membuat tulisan bias berjalan, digunakan tag <marquee> dan diakhiri tag </marquee>.
Atribut-atribut :
o Direction : untuk membuat tulisan berjalan kesamping dari kiri ataupun dari kanan. Maupun naik atau turun.
Contoh :
<marquee direction=”right”> Tulisan ini akan berjalan ke kanan</marquee><
o Behavior : untuk membuat tulisan berjalan bolak balik dari atas ke bawah ataupun dari kiri ke kanan
Contoh :
<marquee behavior=”alternate”> Tulisan ini akan berjalan bolak balik ke kiri dank e kanan.</marquee>
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar