PERINTAH-PERINTAH
HTML
Ayo buat kamu yang belum punya dasar html, disini saya coba share html dasar untuk pemula
Berikut ini adalah perintah-perintah HTML untuk
penanganan TEKS.
<H1> Sampai <H6>
fungsi : untuk membuat (memilih) ukuran
teks.
Sintak :
<H1>
</H1>
Contoh
<HTML>
<HEAD><TITLE>Contoh
Heading</TITLE></HEAD>
<BODY>
<H1> Teks dengan Heading 1</H1>
<H2> Teks dengan Heading 2</H2>
<H3> Teks dengan Heading 3</H3>
<H4> Teks dengan Heading 4</H4>
<H5> Teks dengan Heading 5</H5>
<H6> Teks dengan Heading 6</H6>
</BODY>
</HTML>
<HR>
Perintah ini digunakan untuk membuat garis
horizontal penuh layar
Sintaks
: <HR>
Contoh
:
<HTML>
<HEAD><TITLE>
</TITLE></HEAD>
<BODY>
<HR> Kalimat ini diapit oleh 2 buah
garis<HR>
</BODY>
</HTML>
<I>
Perintah ini digunakan untuk membuat teks
miring.
Sintaks
: <I> </I>
Contoh
<HTML>
<HEAD><TITLE>
</TITLE></HEAD>
<BODY>
<I> Selamat Datang Ke Websiteku</I>
</BODY>
</HTML>
<B>
Perintah ini digunakan untuk membuat teks tebal.
Sintaks
: <B> </B>
Contoh
<HTML>
<HEAD><TITLE>
</TITLE></HEAD>
<BODY>
<B> Selamat Datang Ke Websiteku</B>
</BODY>
</HTML>
<U>
Perintah ini digunakan untuk membuat teks
bergaris bawah.
Sintaks
: <U> </U>
<HTML>
<HEAD><TITLE>
</TITLE></HEAD>
<BODY>
<U> Selamat Datang Ke Websiteku</U>
<U><B> Selamat Datang Ke
Websiteku</U></B>
</BODY>
</HTML>
<CENTER>
Perintah ini untuk membuat teks ke tengah layar.
Sintaks
: <CENTER> </CENTER>
Contoh
:
<HTML>
<HEAD><TITLE>
</TITLE></HEAD>
<BODY>
<H1><CENTER> Selamat Datang Ke
Websiteku</CENTER></H1>
</BODY>
</HTML>
ALIGN
Digunakan untuk membuat teks rata kiri, tengah,
kanan atau rata kanan dan kiri.
Sintaks
:
<P
ALIGN=right> → Rata Kanan
<P
ALIGN=left> → Rata Kiri
<P ALIGN=center> → Rata Tengah
<P ALIGN=justify> → Rata Kanan dan Kiri
atau
<H ALIGN=right>
<H ALIGN=left>
<H ALIGN=center>
<H ALIGN=justify>
Contoh pemakaian :
<H2 ALIGN=center>SELAMAT DATANG
</H2>
<BR> (Line Break)
Perintah ini digunakan untuk memasukan fungsi
Enter. Sebagai contoh, jika perintah <BR> diberikan di akhir baris, maka
kalimat berikutnya akan dicetak pada baris berikutnya.
<!–
Perintah untuk membuat KOMENTAR. Semua teks atau
perintah yang diapit perintah ini tidak akan dijalankan. Ini hanya komentar
untuk program.
Sintaks
: <!– –>
Contoh
: <!—Ini adalah contoh komentar –>
<SMALL>
Perintah untuk membuat teks berukuran kecil.
<BIG>
Perintah untuk membuat teks berukuran besar
<P> (Paragraph)
Perintah ini digunakan untuk memisahkan
paragraph yang satu dengan paragraph yang lain.
Sintaks
: <P> </P>
<DD>
Perintah ini digunakan untuk membuat teks atau
sebuah paragraph agak masuk ke dalam.
Sintaks
: <DD>
BASEFONT
Perintah ini digunakan untuk mengubah ukuran
font.
Contoh
:
<HTML>
<HEAD><TITLE>
</TITLE></HEAD>
<BODY>
<BASEFONT SIZE=6>
Teks dengan ukuran 6 pt<BR>
<B>Teks dengan ukuran 6 pt dan
tebal</B>
<BASEFONT SIZE=10>
<BR>
Teks dengan ukuran 10 pt
</BODY>
</HTML>
FONT
Juga untuk mengubah ukuran font, tetapi angka
yang terdapat dalam SIZE yang merupkan ukuran font harus diberi tanda kutip.
FACE
Untuk mengubah jenis font
Contoh :
<HTML>
<HEAD><TITLE>
</TITLE>
</HEAD>
<BODY>
<FONT SIZE =”6” FACE=”Times New Roman”>
Teks dengan jenis font Times New Roman.
<FONT SIZE =”6” FACE=”Arial”>
Teks dengan jenis font Arial.
</BODY>
</HTML>
<SUP>
Perintah ini digunakan untuk membuat cetak naik
suatu teks.
Contoh :
<HTML>
<HEAD><TITLE>
</TITLE>
</HEAD>
<BODY>
Kami adalah yang pertama :
1<SUP>st</SUP> in the world.
</BODY>
</HTML>
<SUB>
Perintah ini digunakan untuk membuat cetak turun
suatu teks.
Contoh :
<HTML>
<HEAD><TITLE>
</TITLE></HEAD>
<BODY>
H<SUB>2</SUB>O (disebut air(
</BODY>
</HTML>
<UL>
Perintah <UL> (Unordered List) adalah
perintah untuk membuat daftar (list).
<LI>
Perintah <LI> (List Item) adalah perintah
untuk membuat daftar (list)
CATATAN : Perintah <LI> harus berada dalam
perintah OL, UL, DIR, MENU.
Contoh
:
<HTML>
<HEAD><TITLE>
</TITLE>
</HEAD>
<BODY>
<UL>
<LI>
<H2>JAWA TIMUR</H2>
<UL>
<LI>SURABAYA</LI>
<LI>MALANG</LI>
<LI>GRESIK</LI>
</UL>
</LI>
<BR>
<LI>
<H2>JAWA BARAT</H2>
<UL>
<LI>BANDUNG</LI>
<LI>SUKABUMI</LI>
<LI>BOGOR</LI>
</UL>
</LI>
</BODY>
</HTML>
BODY
<BODY … </BODY>
Perintah BODY adalah perintah untuk membuat
warna latar belakang pada layar, mengubah warna link, mengubah warna dasar
link, menampilkan pesan ketika halaman ditutup, dan lain-lain sesuai dengan
atribut yang diberikan. Sedangkan BODY memiliki 8 atribut, antara lain :
TEXT=warna
|
Untuk menentukan warna teks.
|
BGCOLOR=warna
|
Untuk mengubah warna dasar layar (halaman).
|
BACKGROUND=URL
|
Untuk mengatur warna latar belakang gambar.
|
LINK=warna
|
Untuk menentukan warna link.
|
ALINK=warna
|
Untuk menentukan warna link yang sedang dipilih.
|
VLINK=warna
|
Untuk menentukan warna link yang sudah dikunjungi.
|
ONLOAD=string
|
Perintah yang akan dilaksanakan ketika halaman Website
selesai di Download
|
ONUNLOAD=string
|
Perintah yang akan dilaksanakan ketika halaman Website
ditutup.
|
Contoh :
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000”
LINK=”#0000FF” VLINK=”#800080”>
<BODY ONUNLOAD=”window.alert(‘Terima
kasih!’)”>
INPUT
<INPUT>
Adalah perintah untuk meminta memasukan (input)
dari pengunjung, sedangkan INPUT memiliki cukup banyak atribut, antara lain:
- TYPE=[text
| password | checkbox | radio | submit | reset | file | hidden | image |
button] (jenis input)
- NAME=string
(kunci dalam form submit)
- VALUE=string
(nilai dari input)
- CHECKED
(tombol check radio atau checkbox)
- SIZE=number(panjang
kotak teks)
- MAXLENGHT=number
(panjang karakter)
- SCR=URL
(lokasi URL atau gambar)
- ALT=string
(keterangan untuk gambar)
- ALIGN=[top
| middle | bottom | left | right] (pengaturan teks atau gambar)
- DISABLED
(menyembunyikan elemen)
- READONLY
(mencegah perubahan)
- ACCEPT=string
(media untuk upload file)
- ACCESSKEY=character
(tombol shortcut)
- TABINDEX=number
(posisi tab)
- ONFOCUS=string
(kotak teks yang menerima fokus / kursor)
- ONBLUR=string
(kotak teks yang ditinggalkan focus / kursor)
- ONSELECT=string
(teks yang dipilih)
- ONCHANGE=string
(nilai yang akan diganti)
- ONCLICK=string
(perintah yang akan dilaksanakan apabila tombol di klik)
Contoh :
Program 1
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″
LINK=”#0000FF” VLINK=”#800080″>
<p> <label accesskey=u>Nama Anda:
<input type=”text” name=”username” size=”20″
maxlength=”30″></label></p>
<p> <label accesskey=p>Password:
<input type=”password” name=”pw” size=”20″
maxlength=”20″></label></p>
</BODY>
</HTML>
Program 2
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″
LINK=”#0000FF” VLINK=”#800080″>
<p> Silahkan pilih jenis pembayaran Anda
:</p>
<p><label accesskey=c><input
type=”radio” name=”jenis pembayaran” value=”master card” checked>Master card
</label><br>
<p><label accesskey=d><input
type=”radio” name=”jenis pembayaran” value=”visa card” checked>Visa card
</label><br>
<p><label accesskey=m><input
type=”radio” name=”jenis pembayaran” value=”wesel pos” checked>Wesel pos
</label><br>
<p><label accesskey=s><input
type=”checkbox” name=”kirim” value=”yes” checked>Kirim vie e-mail
</label><br>
</BODY>
</HTML>
FORM
<FORM> </FORM>
Perintah FORM adalah suatu metode untuk membuat
format input seperti formulir, dan terdiri dari beberapa atribut:
ACTION=URL
|
Penanganan form
|
METHOD=[get | post]
|
Metode HTTP untuk submit form.
|
ENCTYPE=string
|
Tipe isi submit form.
|
TARGET=string
|
Target berupa jendela atau frame.
|
ONSUBMIT=string
|
From yang sudah di-Submit.
|
ONRESET=string
|
Form yang di-reset.
|
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″
LINK=”#0000FF” VLINK=”#800080″>
<form>
<p>
1:<INPUT type=”radio” NAME=”radio”
value=”Anda Memilih Nomor ” onclick=”alert(Value)”>
2:<INPUT type=”radio” NAME=”radio”
value=”Anda Memilih Nomor ” onclick=”alert(Value)”>
3:<INPUT type=”radio” NAME=”radio”
value=”Anda Memilih Nomor ” onclick=”alert(Value)”>
</form>
</BODY>
</HTML>
LABEL
<LABEL> </LABEL>
adalah suatu perintah untuk membuat keterangan field (kotak input) dalam pembuatan form, dan umumnya
digunakan dengan perintah INPUT. Sedangkan LABEL terdiri dari beberapa atribut
:
ACCESSKEY=character
|
Tombol shortcut.
|
ONFOCUS=script
|
Elemen yang menerima fokus (kursor)
|
ONBLUR=script
|
Elemen yang ditinggalkan fokus (kursor).
|
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″
LINK=”#0000FF” VLINK=”#800080″>
<p>
<label accesskey=U>Nama Anda :
<input type=”text” name=”username” size=”20″
maxlength=”15″></label>
</p>
<p>
<label accesskey=P>Password :
<input type=”password” name=”pw” size=”20″
maxlength=”20″></label>
</p>
</BODY>
</HTML>
TEXTAREA
<TEXTAREA> </TEXTAREA>
adalah suatu perintah untuk membuat pengunjung
dapat mengetik sekumpulan teks dalam sebuah kotak. Atribut yang dapat digunakan
dengan perintah TEXTAREA adalah sebagai berikut :
- NAME=string
(kunci untuk submit form)
- ROW=number
(jumlah baris)
- COLS=number
(jumlah kolom)
- DISABLE=menyembunyikan
elemen
- READONLY=mencegah
perubahan
- ACCESSKEY=character
(tombol shortcut)
- TABINDEX=number
(posisi tab)
- ONFOCUS=string
(kotak teks yang menerima fokus/kursor)
- ONBLUR=string
(kotak teks yang ditinggalkan focus/kursor)
- ONSELECT=string
(teks yang dipilih)
- ONCHANGE=string
(nilai yang akan diganti)
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″
LINK=”#0000FF” VLINK=”#800080″>
<p>
<label accesskey=C>
Ketik pesan Anda dalam kotak di bawah ini :
<br>
<textarea name=”komentar” cols=”50″
rows=”8″> </textarea>
</label>
</p>
</BODY>
</HTML>
FIELDSET
<FIELDSET> </FIELDSET>
adalah suatu perintah untuk membuat beberapa
formulir yang terdiri dari beberapa bagian:
PEMBUATAN MENU
<SELECT>
</SELECT>
Perintah ini digunakan untuk membuat daftar menu
pilihan (options selector), dan umumnya digunakan dengan perintah OPTIONS
(pembuat menu pilihan) dan OPTGROUP (pembuat group pilihan). Dengan perintah
ini maka Anda akan dapat membuat daftar pilihan seperti yang sering Anda lihat
dalam Website professional:
ATRIBUT :
- NAME=string
(kunci untuk submit form)
- MULTIPLE=dapat
membuat menu pilihan berganda
- SIZE=number
(jumlah pilihan yang tampak)
- DISABLE=menyembunyikan
elemen
- TABINDEX=number
(posisi tab)
- ONFOCUS=string
(kotak teks yang menerima fokus/kursor)
- ONBLUR=string
(kotak teks yang ditinggalkan focus/kursor)
- ONCHANGE=string
(nilai yang akan diganti)
<OPTIONS> </OPTIONS>
Perintah ini untuk membuat menu pilihan, dan
umumnya digunakan dengan perintah kontrol SELECT :
ATRIBUT :
- VALUE=string
(nilai pilihan)
- SELECTED=pilihan
berupa inisial
- DISABLE=menyembunyikan
pilihan
- LABEL=string
(pilihan label)
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″
LINK=”#0000FF” VLINK=”#800080″>
Pilih status perkawinan Anda :
<select name=”status”>
<option selected value=”">Status …
</option>
<option> Belum kawin </option>
<option> kawin </option>
<option> Janda </option>
<option> Duda </option>
</select>
</BODY>
</HTML>
STYLE
<STYLE> </STYLE>
adalah perintah untuk memasukan (embedding)
stylr sheet, misalnya untuk penanganan warna latar belakang halaman
(background).
ATRIBUT :
- TYPE=string(harus
“text/css”)
- MEDIA=MediaDesc
(jenis media yang akan dimasukan)
- TITLE=strings
(judul style sheet)
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
<META name=”description” content=”">
<META name=”keywords” content=”">
<META name=”generator” content=”CuteHTML”>
</HEAD>
<font color=”white”><h1> Selamat
datang ke Websiteku. </h1> </font>
<style type=”text/css” media=screen>
BODY {background: red; color:black }
</style>
</BODY>
</HTML>
KETERANGAN
Perintah ini untuk membuat warna teks
(foreground) dengan warna putih. Jika ingin warna lain, misalnya merah, ganti
dengan RED.
- BODY
{ background: red; color:black}
Perintah untuk membuat warna latar belakang
halaman Website, jika ingin warna aqua misalnya, ganti red dengan aqua.
TABEL & KOTAK
Perintah-perintah yang termasuk ke dalam
kategori TABEL adalah sebagai berikut :
- TABLE
- CAPTION
- COLGROUP
- COL
– Table Column
- THEAD
– Table Head
- TFOOT
– Table Foot
- TBODY
– Table Body
- TR
– Table Row
- TTD
– Table Data Cell
- TH
– Table Header Cell
<TABLE> </TABLE>
Perintah untuk membuat table. Dan terdiri dari
beberapa atribut:
- SUMMARY=string
(struktur table)
- WIDTH=length
(lebar table)
- BORDER=pixels
(lebar border)
- FRAME=[void
| above | hsides | lhs | rhs | vsides | box | border] (bagian luar border)
- RULES=[none
| groups | row | cols | all] (bagian dalam border)
- CELLSPACING=length
(spasi antara cell)
- CELLPADDING=length
(spasi dalam cell)
- ALIGN=[left
| center | right] (perata tabel)
- BGCOLOR=color
(warna background table)
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″
LINK=”#0000FF” VLINK=”#800080″>
<table>
<tr align=”left”>
<th scope=”col”>Nama</th>
<th scope=”col”>Umur</th>
<th scope=”col”>Alamat</th>
</tr>
<tr align=”left”>
<td>Hans </td>
<td>22 </td>
<td>Paingan </td>
</tr>
</table>
</BODY>
</HTML>
MEMBUAT KOTAK
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″
LINK=”#0000FF” VLINK=”#800080″>
<table width=”400″ cellspacing=”0″
cellpadding=”5″ border=”2″>
<tr>
<td width=”400″ bgcolor=”#ffcb10″>
<font size=”2″ face=”MS Sans Serif”>
Kalimat biasa dalam kotak <br>
<b>Kalimat tebal dalam kotak</b>
<br>
<i>Kalimat miring dalam kotak</i>
<br>
</tr>
</table>
</BODY>
</HTML>
MEMBUAT TABLE & KOTAK
Contoh :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″
LINK=”#0000FF” VLINK=”#800080″>
<table width=”544″ cellspacing=”0″
cellpadding=”5″ border=”2″>
<tr align=”left”>
<th scope=”col”>Nama</th>
<th scope=”col”>Umur</th>
<th scope=”col”>Alamat</th>
</tr>
<tr align=”left”>
<td>Hans </td>
<td>22 </td>
<td>Paingan </td>
</tr>
</table>
</BODY>
</HTML>
WARNA
