Rubby blog

SCRIPT DAN PERINTAH-PERINTAH DALAM HATML
Yang saya Posting ini adalah hasil dari Kumpulan tugas kuliah saya

:: PENDAHULUAN HTML = Hyper Text Markup Language
Dokumen HTML (web pages) merupakan file teks murni yang dapat dibuat dengan sembarang editor teks.
Penamaan Dokumen
Nama : sembarang
Ekstensi : ".htm" atau ".html"
Elemen, Tag, Attribut
Dokumen HTML disusun oleh elemen-elemen, contoh : head, body, paragraf, table, list, dsb. Penandaan berbagai elemen dalam suatu dokumen HTML menggunakan Tag (Markup).
Format penulisan tag terdiri atas tanda "<", ">", " /" yaitu
<namatag> ………. </namatag> Penulisan Tag umumnya berpasangan
Contoh:
<P> -> untuk mengawali suatu paragraf.
</P>-> untuk mengakhiri suatu paragraf.
Setiap tag dapat dilengkapi dengan attribut, attribut setiap tag berbeda-beda.
Format penulisan :
<namatag atr1="nilai-atr1" atr2="nilai-atr2"> …… </namatag> Struktur file HTML
<Format HTML> =
<Blok identifikasi><Tag HTML><Blok Head><Blok Body><Tag /HTML>
<Blok identifikasi> tidak mutlak harus ada, dan kalau ada biasanya diisi dengan informasi pembuat page dan dibuat dengan apa page tersebut

    <html>
    <head>
      <TITLE> ……………………  </TITLE>
    </head>
    <body>
 ……………………………
 ……………………………
 ……………………………
    </body>
    </html>

Contoh :

    <html>
    <head>
    <TITLE>Contoh HTML sederhana</TITLE>
    </head>
    <body>
    <H1>HTML itu mudah dipelajari</H1>
    <P>Selamat datang di dunia HTML. 
    Ini adalah paragraph pertama. Meskipun pendek kalimat
    Ini juga bagian dari paragraph!</P>
    <P>Dan ini adalah paragraph kedua.</P>
    </body>
    </html>

<Tag HTML> merupakan tag dasar yang mendefinisikan bahwa doukmen ini adalah dokumen HTML. Bila dilihat dengan editor teks, tag ini dituliskan dengan <HTML> dan terletak pada awal dokumen dan diakhiri dengan </HTML> pada akhir dokumen.
<Blok Head> melingkupi bagian kepala dokumen HTML. Di dalamnya berisi informasi-informasi tentang judul page, basis URL, identifikasi indeks, link, header HTTP, dan nama pengenal. Blok ini dimulai dengan <HEAD> dan diakhiri dengan </HEAD>

Judul Page, ini harus disertakan pada blok head, judul page akan ditampilkan oleh browser pada title-bar browser tersebut atau pada baris Document Name. Tag yang digunakan adalah <TITLE>. Misalnya bila page yang kita buat akan diberi judul "Membuat Page dengan HTML", maka pada lingkup blok head kita tuliskan <TITLE>Membuat Page dengan HTML</TITLE>.
BASE, Tag ini digunakan untuk menyertakan URL atau alamat induk dokumen.
Format : <BASE [TARGET] [HREF=url]>
META, Tag ini digunakan untuk menyertakan informasi pada header HTTP.
Format : <META [HTTP-EQUIV=”refresh”] [CONTENT=”waktu”]>

<Blok Body> melingkupi semua yang ingin ditampilkan pada page, baik itu teks, gambar, animasi/grafik, musik/suara/video, ataupun hubungan dengan page-page lain pada WWW. Blok ini dimulai dengan <BODY> dan diakhiri </ BODY>.
Atribut:
BACKGROUND : menggunakan file latar belakang dokumen
BGCOLOR : mengatur warna latar
LEFTMARGIN : mengatur margin kiri dokumen
TOPMARGIN : mengatur margin kiri dokumen
TEXT : mengatur warna default teks dokumen
LINK : setting warna link yang belum pernah dipilih
ALINK : setting warna link yang sedang aktif
VLINK : setting warna link yang pernah dipilih
Tag dan Kegunaannya

<B>	huruf tebal (bold)
<I>	huruf miring (italics)
<U>	bergaris bawah (underline)
<STRONG>	untuk diperhatikan, biasanya huruf tebal
<EM>	penekanan (emphasis), biasanya huruf miring
<TT>	teletype, biasanya menggunakan typeface Courier, selainnya Times
<SAMP>	karakter literal / sample output
<CODE>	menampilkan kode, dengan typeface Courier, Teks merepresentasikan Elemen HTML
<CITE>	Teks dalam kutipan
<DFN>	Teks merupakan definisi
<KBD>	Teks merepresentasikan tombol keyboard
<VAR>	Teks mendefinisikan variabel
<P>	membuat paragraf
<BR>	membuat line break (tag mandiri)
<PRE>	membuat teks tidak terformat, browser akan menampilkan apa adanya seperti yang kita ketikkan pada editor dan browser akan menggunakan fixed-space font.
<BLOCKQUOTE>	membuat kutipan, blok akan dibuat seperti abstrak pada artikel-artikel tetapi tidak dalam huruf miring
<LI>	membuat entri pada list
<OL>	Ordered List,membuat list terurut. Caranya adalah dengan menyisipkan entri-entri list di dalam tag ini. Browser akan menampilkannya dengan list bernomor
<UL>	Unordered List, membuat list tak terurut. Caranya sama dengan <OL>, tetapi browser menampilkannya dengan bullet, bukan dengan nomor
<DIR>	Directory List, membuat list tak terurut dengan masing-masing entri tidak lebih dari 24 karakter. Caranya sama dengan <OL>
<MENU>	Menu List, membuat list tak terurut dengan masing-masing entry tidak lebih dari satu baris. Caranya sama dengan <OL>
<DT>	term, membuat entri pada list definisi
<DD>	definition, definisi dari kata yang diapit tag term <DT>
<DL>	List of definitions. Membuat list definisi dengan entri <DT> dan <DD>
<ADDRESS>	menuliskan alamat URL pads page dengan huruf miring
<Hx>	membuat heading, x bernilai 1 sampai 6
<BLINK>	Membuat tulisan berkedip (HTML 3.0)
&	Menyisipkan karakter-karakter khusus misalnya tanda & digunakan &AMP, tanda < digunakan &LT dsb.

Karakter Khusus

Character	HTML Code
"	"
&	&
<	<
>	>

©	©
«	«
±	±
»	»
¼	¼
½	½
¾	¾

Contoh:

<HTML>
<!-HTML Yang Pertama Aku Buat-->
<HEAD> <TITLE>Contoh Page dengan HTML</TITLE></HEAD>
<BODY>
<CENTER><H1><B><I>Contoh Page</I></B></H1></CENTER>
<IMG SRC="aas.jpg" ALIGN=RIGHT>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6> 
<P>Dibawah ini ada garis …</P><HR> 
<B>Tebal</B> <I>Miring</I> <U>Garis bawah</U> <HR>
<STRONG>Perhatian !!!</STRONG> <EM>Hati-hati</EM>
<HR>
<TT>ini ada pesan dari Tuan John</TT> 
<CODE>MOV AX, 100h</CODE>
<HR>
<P>Paragraf, ini adalah paragraf. Paragraf paragraf 
paragraf paragraf paragraf paragraf paragraf paragraf 
paragraf paragraf paragraf <B>ada BR
nya</B> <BR>paragraf paragraf
paragraf paragraf paragraf paragraf paragraf paragraf 
paragraf paragraf paragraf paragraf paragraf paragraf 
paragraf paragraf paragraf</P> <HR>
<H3>
  <P>Perhatikan pesan Dosen:</P>
</H3>
<BLOCKQUOTE>Dalam perkuliahan selalu akan diberikan tugas 
baik individu maupun kelompok, selain akan ada quiz, UTS 
dan UAS. 
Tugas-tugas harap diserahkan  dalam disket</BLOCKQUOTE> <HR>
<H3><P>Contoh List Terurut</P></H3>
<P>Keperluan bermain bulutangkis</P>
<OL> 
  <LI>Lapangan</LI>
  <LI>Net</LI>
  <LI>Raket</LI>
  <LI>Shuttlecock</LI>
</OL> <HR>
<H3><P>Contoh List Tidak Terurut</P></H3> 
<P>Buah-buahan lezat &amp bergizi</P>
<UL>
  <LI>Apel</LI>
  <LI>Jeruk</LI>
  <LI>Durian</LI>
  <LI>Mangga</LI>
  <LI>Jambu</LI>
</UL> <HR>
<H3><P>Contoh List Definisi</P></H3> 
<DL>
  <DT>Pesan</DT>
    <DD><P>Dengar isi nasihat bukan siapa yg menasihati.
    </P></DD>
  <DT>BATIG</DT>
    <DD><P>Belajarlah Apabila Tidak Ingin Gagal</P></DD>
  <DT>HTML</DT>
    <DD><P>HyperText Markup Language</P></DD> 
  <DT>Beriman</DT>
    <DD><P>Bersih Indah dan Aman</P></DD> 
</DL><HR>
<A HREF="http://www.unpad.ac.id/">Link ke Website 
Universitas Padjadjaran</A><BR><HR>
&copy 2001 Siapa Saja
</BODY>
</HTML>

:: TEXT
Mengatur Tampilan Teks
Berikut ini adalah label-label tag yang dapat digunakan untuk mengatur tampilan teks

Label <BR> berguna untuk berganti baris.
Label <P> berguna untuk membuat paragraph teks dan menyisipkan satu baris kosong di antara teks.
Label <PRE> dan </PRE> berguna untuk menampilkan teks sesuai dengan letak aslinya, sebab tanpa label ini letak teks akan diatur browser (teks akan otomatis berpindah baris bila teks mencapai margin kanan.

Label <CENTER> dan </CENTER> berguna untuk meletakan objek ditengah-tengah dokumen
Contoh dokumen Web yang menggunakan label di atas :

<HTML> 
<HEAD> 
  <TITLE>Penebalan Label Pengatur Teks</TITLE> 
</HEAD>
<BODY>D3 MIPA UNPAD<BR>
<P>Internet merupakan jaringan komputer global yang<BR> 
mencakup area yang luas, anggotanya mencakup komputer 
dari berbagai jenis mencakup Personal Computer, 
Main Frame, Workstation dan lain-lain.</P>
<P>Sekian<BR>
</BODY>
</HTML>

Menggunakan elemen style, pada HTML terdapat dua jenis style yaitu style Logika dan style Fisik.Tampilan teks dengan style logika sangat tergantung pada jenis Web browser, browser yang berbeda akan menghasilkan efek yang berbeda pula. Tampilan teks dengan style fisik tidak tergantung jenis Web browser karena style fisik merupakan standar untuk perancangan browser, efek style pada tampilan teks akan sama walau browser berbeda. Pengaturan teks yang dapat dilakukan pada suatu dokumen HTML di antaranya adalah
- huruf tebal/miring/garis bawah
- pembuatan headings
- penentuan typeface
- pembuatan paragraf
- pembuatan kutipan
- pembuatan daftar (list)
- penyisipan karakter khusus
Hampir semua tag untuk pengaturan teks berjenis tag lingkup / memiliki atribut. Jadi semua kata/kalimat yang dilingkupi tag tersebut akan mengikuti markup yang telah dirujuk. Tabel dibawah akan memberikan ringkasan tag untuk keperluan ini beserta kegunaannya.
- tinggi (HEIGHT)
- lebar (WIDTH)
- tempat (ALIGN, VSPACE, dan HSPACE)
- bingkai (BORDER)
- judul (ALT)

Membuat Heading
Untuk membuat heading digunakan tag <H1> sampai <H6>. Semakin kecil nilai level, maka huruf semakin besar. Untuk judul page biasanya dibuat dengan <H1>.
Memberi Komentar
Pemberian komentar menggunakan tag khusus yaitu

Menambahkan garis horisontal
Untuk menambahkan garis horisontal pada Web, kita cukup menambahkan tag berikut
<HR>
Tag ini memiliki atribut yang mengatur lebar, panjang, peletakkan, dan bayangan, yaitu:
SIZE : Menentukan tebal dari garis horisontal (dalam satuan Pixel)
WIDTH : Menentukan panjang dari garis horisontal (dalam %)
ALIGN : Menentukan letak garis (LEFT, RIGHT, atau CENTER)
NOSHADE : Mengubah wara garis menjadi hitam
Untuk membuat garis dengan tebal 10 pixel , panjang 50 % dari lebar browser, dan letaknya rata kiri, maka ditambahkan label tag
<HR SIZE=10 WIDTH=50% ALIGN= LEFT>.
Pada dokumen berikut ini akan diperlihatkan penggunaan atribut - atribut <HR>.

<HTML>
<HEAD><TITLE>Home Page D3 Komputer  UNPAD</TITLE></HEAD> 
<BODY>
<HR SIZE=7 WIDTH=25% ALIGN=LEFT> Manajemen Informatika
<HR SIZE=8 WIDTH=50% ALIGN=LEFT> Teknik Informatika
<HR SIZE=10> Teknik Komputer
</BODY> 
</HTML>

:: LISTS
Daftar Berurut
<OL TYPE="field-type" START="n">
   <LI>…………
   <LI>…………
   <LI>…………
</OL> Atribut:

Atribut	Fungsi
TYPE = 1	Daftar berurut 1,2,3,... (default)
TYPE = I	Daftar berurut I,II,III,...
TYPE = i	Daftar berurut i,ii,iii,...
TYPE = A	Daftar berurut A,B,C,...
TYPE = a	Daftar berurut a,b,c,...
n	Nilai urutan awal

Contoh:

<HTML>
<HEAD><TITLE>Ordered List</TITLE></HEAD> 
<BODY>
  Urutan Angka :
  <OL>
    <LI>Satu
    <LI>Dua
    <LI>Tiga
    <LI>Empat
  </OL>
</BODY> 
</HTML>

Daftar Tidak Berurut
<UL TYPE="field-type">
   <LI>…………
   <LI>…………
   <LI>…………
</OL> Atribut:

Atribut	Fungsi
TYPE = circle	Daftar bertanda lingkaran
TYPE = disk	Daftar bertanda cakram
TYPE = square	Daftar bertanda kotak

Contoh:

<HTML>
<HEAD><TITLE>Unordered List</TITLE></HEAD> 
<BODY>
  Urutan Angka :
  <UL>
    <LI>Satu
    <LI>Dua
    <LI>Tiga
    <LI>Empat
  </UL>
</BODY> 
</HTML>

:: FONTS
<font [face="nama font"] [size=ukuran] [color=warna]> ………. </font> Ukuran Font
<font size=n> ………. </font>
n= 0..7 Jenis Font
<font face="………"> ………. </font> contoh:
<font face="Arial"> Arial font!</font> Warna Font
<font color=#RRGGBB> ………. </font>
#RRGGBB: kombinasi warna dalam hexa atau konstanta warna Font Standar
<base font [face="nama font"] [size=ukuran] [color=warna]> contoh:

<HTML>
<HEAD>
<TITLE>Penggunaan Font</TITLE>
</HEAD>
<BODY>
<FONT FACE="Arial" SIZE=1> Font Size 1</FONT><BR>
<FONT FACE="Arial" SIZE=2> Font Size 2</FONT><BR>
<FONT FACE="Arial" SIZE=3> Font Size 3</FONT><BR>
<FONT FACE="Arial" SIZE=4> Font Size 4</FONT><BR>
<FONT FACE="Arial" SIZE=5 color="#008000"> Font Size 5</FONT><BR>
<FONT FACE="Arial" SIZE=6 color="#0000FF"> Font Size 6</FONT><BR>
<FONT FACE="Arial" SIZE=7 color="#FF0000"> Font Size 7</FONT>
</BODY>
</HTML>

:: IMAGE
Menampilkan Gambar
Format Gambar Umum: GIF, JPEG
<img src="…" [align=…][width=m][height=n][alt="komentar">
src : file(+path direktory/URL) gambar
align : posisi teks sekitar gambar (top, middle, bottom, left, right, dll)
width : lebar (pixel)
height : panjang(pixel)
alt : komentar (hint) atau sebagai teks pengganti contoh:
<img src=”unpad.jpg” align=middle width=100 height=100 alt=”Logo UNPAD”> Image Map

<IMG [SRC=file] [ALT=teks] [BORDER=ukuran-bingkai] [ALIGN=…] [HEIGHT=tinggi] [HSPACE=ruang] [ISMAP|USEMAP] [LOOP=perulangan] [LOWSRC=file] [VSPACE=ruang] [WIDTH=lebar]>
USEMAP
<USEMAP=#nama_map><IMG …></USEMAP>

MAP
<MAP [NAME="nama"]>
<AREA SHAPE="bentuk" COORDS="koordinat" HREF="url">
</MAP>

Atribut :
SHAPE = POINTRECT/CIRCLE/POLY :: LINKS
Link Ke Halaman Lain (relatif)
<a href=”……”> ……… </a> contoh: <a href=”guestbook.htm”>Buku Tamu</a> Link Ke Bagian Halaman Sama
Target : <a name=[”target”]></a>
Link : <a href=[”#target”]> ……… </a>
contoh:
<a href=”#top”>Kembali ke atas</a> Link Ke situs / dokumen lain (absolut)
contoh:
<a href=”http://www.unpad.ac.id”>Link Ke Web Site UNPAD</a>
Kirim E-mail
<a href="mailto:namaemail@host">……</a>
:: TABEL

Table Elements
Elemen	Deskripsi
<TABLE> ... </TABLE>	Mendefinisikan tabel
<TR> ... </TR>	Mendefinisikan baris
<TD> ... </TD>	Mendefinisikan kolom

Beberapa Atribut Tabel <TABEL>
Atribut	Description
BGCOLOR=#RRGGBB	Warna Background
BACKGROUND (FILENAME)	Bakground berupa gambar
BORDER=n	Ketebalan border
BORDERCOLOR=#RRGGBB	Warna border
CELLPADING=n	Jarak teks dengan batas cell
CELLSPACING=n	Jarak antar cell
ALIGN (LEFT, CENTER, RIGHT)	Posisi rata teks horisontal dalam tabel
VALIGN (TOP, MIDDLE, BOTTOM)	Posisi rata teks vertikal dalam cell
COLSPAN=n	Merge Cell sebanyak (n) kolom
ROWSPAN=n	Merge Cell sebanyak (n) baris
NOWRAP	No Aktifkan Wrap Text dalam cell.

Beberapa Atribut kolom <TR> dan Baris <TD>
Atribut	Description
ALIGN (LEFT, CENTER, RIGHT)	Posisi rata teks horisontal dalam cell
VALIGN (TOP, MIDDLE, BOTTOM)	Posisi rata teks vertikal dalam cell
COLSPAN=n	Merge Cell sebanyak (n) kolom
ROWSPAN=n	Merge Cell sebanyak (n) baris
NOWRAP	No Aktifkan Wrap Text dalam cell.
WIDTH=n,n%	Lebar Cell
HEIGHT=n,n%	Tinggi Cell

contoh:

<TABLE BORDER=1 BORDERCOLOR=BLACK>
<!-- deklarasi tabel -->
<TR>  
<!-- deklarasi baris ke awal -->
    <TD> baris awal, kolom awal </TD>
    <TD> baris awal, kolom akhir </TD>    
</TR> 
<!-- akhir deklarasi baris awal -->
<TR>  
<!-- deklarasi baris ke akhir -->
    <TD> baris akhir, kolom awal </TD>
    <TD> baris akhir, kolom akhir </TD>    
</TR> 
<!-- akhir deklarasi baris ke akhir -->
</TABLE>
<!-- akhir deklarasi tabel -->

:: FRAME
Frame merupakan elemen dalam HTML yang memungkinkan menampilkan beberapa dokumen web page dalam satu browser
<FRAMESET [COLS=banyak_&_ukuran_kolom | ROWS=banyak_&_ukuran_baris] [FRAMEBORDER=ukuran_bingkai] [SCROLLING=yes/no]>
<FRAME [SRC=file] [BORDERCOLOR=warna] [FRAMEBORDER=1] [FRAMESPACING=jarak] [MARGINWIDTH=besar] [MARGINHEIGHT=tinggi] [NAME=target] [NORESIZE] [SCROLLING=yes/no] Contoh:

<HTML>
<frameset cols="150,*">
</frameset>

<frameset cols="150,*">
     <frame name="left-frame" src="left-frame.html">
     <frame name="right-frame" src="right-frame.html">
</frameset>

<frameset cols="150,*">
     <frame name="left-frame" src="left-frame.html">
     <frame name="right-frame" src="right-frame.html">
     <noframes>
          <body>
               <p>This page uses frames, but your browser 
               doesn't support them.</p>
          </body>
     </noframes>
</frameset>

<frameset cols="150,*">
     <frame name="left-frame" src="left-frame.html" noresize>
     <frame name="right-frame" src="right-frame.html" noresize>
     <noframes>
          <body>
               <p>This page uses frames, but your browser 
               doesn't support them.</p>
          </body>
     </noframes>
</frameset>

<frameset cols="150,*">
     <frame name="left-frame" src="left-frame.html" noresize 
     target="right-frame">
     <frame name="right-frame" src="right-frame.html" noresize>
     <noframes>
          <body>
               <p>This page uses frames, but your browser 
               doesn't support them.</p>
          </body>
     </noframes>
</frameset>

<frameset cols="150,*">
     <frame name="left-frame" src="left-frame.html" noresize 
     target="right-frame">
     <frame name="right-frame" src="right-frame.html" noresize 
     scrolling="no">
     <noframes>
          <body>
               <p>This page uses frames, but your browser 
               doesn't support them.</p>
          </body>
     </noframes>
</frameset>

Left/Right Frames

Dokumen Utama

<html>
<head>
<title>Frames Control Web Page</title>
</head>
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

left-frame.html

<html>
<head>
<title>Left Frame Web Page</title>
<base target="main">
</head>
<body>
<p>This web page is the left frame</p>
</body>
</html>

right-frame.html

<html>
<head>
<title>Right Frame Web Page</title>
<base target="main">
</head>
<body>
<p>This web page is the right frame.</p>
</body>
</html>

Top/Left/Right Frames

Dokumen Utama

<html>
<head>
<title>Controller HTML Page</title>
</head>
<frameset rows="64,*">
<frame name="top-frame" scrolling="no" noresize 
target="right-frame" 
src="top-frame.html">
<frameset cols="150,*">
<frame name="left-frame" target="right-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

top-frame.html

<html>
<head>
<title>Top Frame</title>
<base target="right-frame">
</head>
<body>
<p>This is the Top Frame</p>
</body>
</html>

Top/Left/Right/Bottom Frames

Dokumen Utama

<html>
<head>
<title>Controller HTML File</title>
</head>
<frameset rows="64,*,64">
<frame name="top-frame" scrolling="no" noresize 
target="right-frame" 
src="top-frame.html">
<frameset cols="150,*">
<frame name="left-frame" target="right-frame" 
src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
</frameset>
<frame name="bottom-frame" scrolling="no" noresize 
target="right-frame"
src="bottom-frame.html">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

bottom-frame.html

<html>
<head>
<title>Bottom Frame</title>
<base target="right-frame">
</head>
<body>
<p>This is the Bottom Frame</p>
</body>
</html>

:: STYLE
Memformat dokumen HTML
Style (Internal)
<STYLE>
selector {property:value}
………
</STYLE>

contoh:

<STYLE type="text/css">
  h1 {color:red}
  A:link {COLOR: blue; TEXT-DECORATION: none}
  A:visited {COLOR: blue; TEXT-DECORATION: none}
  A:hover {COLOR: red; TEXT-DECORATION: underline}
  TD {FONT-SIZE: 8pt; FONT-FAMILY: Verdana, Tahoma, Arial, 
      Helvetica, sans-serif}
  FONT.title {FONT-WEIGHT: bold; FONT-SIZE: 24pt; FONT-FAMILY: 
      Helvetica}
</STYLE>

CSS (Cascading Style Sheet)
<link rel="stylesheet" href="*.css" type="text/css">
contoh:

style.css

h1 {color:red}
A:link {COLOR: blue; TEXT-DECORATION: none}
A:visited {COLOR: blue; TEXT-DECORATION: none}
A:hover {COLOR: red; TEXT-DECORATION: underline}
TD {FONT-SIZE: 8pt; FONT-FAMILY: Verdana, Tahoma, Arial, 
    Helvetica, sans-serif}
FONT.title {FONT-WEIGHT: bold; FONT-SIZE: 24pt; FONT-FAMILY: 
    Helvetica}

css.html

<html>
<head>
  <title>Contoh CSS</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
  <FONT class=title>JUDUL</FONT>
  <TABLE cellSpacing=2 border="0" cellpaddin="2">
    <TR><TD align=middle bgColor=#eeeeee>
      <A href="#tes">Coba</A>
    </TD></TR>
  </TABLE>&nbsp;<BR>
 ………
 ………
</body>
</html>

:: FORM

Sebuah form dapat meliputi data entry field:

single line text entry fields

check boxes

radio boxes

hidden fields

password fields

selection lists

multi-line text entry fields

submit / reset buttons
<FORM [METHOD=”[GET | POST]” ACTION=”URL”]>
…
..
</FORM>
<INPUT TYPE="field-type" NAME="Name of field" VALUE="default value">

field-type ialah: text, checkbox, radio, hidden, or password

<SELECT NAME="list title">
    <OPTION>option pertama
    <OPTION>option kedua
: .....
</SELECT>

<TEXTAREA NAME="text area name" ROWS=no-of-rows COLS=no-of-columns>
    // Tempat text dituliskan
</TEXTAREA>

<INPUT TYPE="submit" VALUE="text on button">
<INPUT TYPE="reset" VALUE="text on button">Bottom of Form

Contoh:

<HTML>
  <HEAD>
  <TITLE>BUKU TAMU</TITLE>
  </HEAD>
  <BODY>
  <H3>
  <P ALIGN="center">BUKU TAMU</P>
  </H3>
  <FORM METHOD="POST" ACTION="thanks.html">
  <TABLE BORDER="0" CELLPADDING="2" WIDTH="100%">
    <TR>
      <TD WIDTH="8%">Nama</TD>
      <TD WIDTH="4%">:</TD>
      <TD WIDTH="88%">
        <INPUT TYPE="text" NAME="nama" SIZE="20">
      </TD>
    </TR>
    <TR>
      <TD WIDTH="8%">Asal</TD>
      <TD WIDTH="4%">:</TD>
      <TD WIDTH="88%">
        <INPUT TYPE="text" NAME="asal" SIZE="20">
      </TD>
    </TR>
    <TR>
      <TD WIDTH="8%">Email</TD>
      <TD WIDTH="4%">:</TD>
      <TD WIDTH="88%">
        <INPUT TYPE="text" NAME="email" SIZEe="20">
      </TD>
    </TR>
    <TR>
      <TD WIDTH="8%" VALIGN="top">Homepageku</TD>
      <TD WIDTH="4%" VALIGN="top">:</TD>
      <TD WIDTH="88%">
        <INPUT TYPE="radio" VALUE="V1" CHECKED NAME="R1">Keren man!!
        <BR><INPUT TYPE="radio" VALUE="V2" NAME="R1">Canggih bo!
        <BR><INPUT TYPE="radio" VALUE="V3" NAME="R1">Biasa aja tuh!
      </TD>
    </TR>
  </TABLE>
  <P><INPUT TYPE="submit" VALUE="Kirim" NAME="B1">
  <INPUT TYPE="reset" VALUE="Batal"
  NAME="B2"></P>
  </FORM>
  </BODY>
  </HTML>

thanks.html

<HTML>
  <HEAD>
  <TITLE>Terima kasih</TITLE>
  </HEAD>
  <BODY>
  <P>Terima kasih atas pengisian buku tamunya.</P>
  </BODY>
  </HTML>

CONTOH DATABASE PEGAWAI DENGAN MENGGUNAKAN MY SQL

MySQL-Front Dump 2.5

Host: localhost   Database: pw2
--------------------------------------------------------
Server version 5.0.45-community-nt

Table structure for table 'pegawai'

DROP TABLE IF EXISTS `pegawai`;
CREATE TABLE IF NOT EXISTS `pegawai` (
`nip` varchar(10) NOT NULL DEFAULT '' ,
`nama` varchar(30) NOT NULL DEFAULT '' ,
`tgllahir` date NOT NULL DEFAULT '0000-00-00' ,
`jenkel` enum('0','1') NOT NULL DEFAULT '0' ,
`alamat` text NOT NULL DEFAULT '' ,
`namafoto` varchar(50) NOT NULL DEFAULT '' ,
PRIMARY KEY (`nip`),
UNIQUE KEY nim (`nip`),
   KEY nim_2 (`nip`)
);

Dumping data for table 'pegawai'

INSERT INTO `pegawai` (`nip`, `nama`, `tgllahir`, `jenkel`, `alamat`, `namafoto`) VALUES("0111500382", "Abdul Malik", "1970-01-01", "0", "Jakarta Bagian Selatan", "achmatim-mag.jpg");
INSERT INTO `pegawai` (`nip`, `nama`, `tgllahir`, `jenkel`, `alamat`, `namafoto`) VALUES("0411534000", "Budiono", "1986-01-01", "0", "Bandung", "");
INSERT INTO `pegawai` (`nip`, `nama`, `tgllahir`, `jenkel`, `alamat`, `namafoto`) VALUES("5555555555", "sdsf", "1970-01-01", "0", "sfsf", "180px-DSCN0411.JPG");
INSERT INTO `pegawai` (`nip`, `nama`, `tgllahir`, `jenkel`, `alamat`, `namafoto`) VALUES("5222222222", "sds", "1970-01-01", "0", "dsdsd", "02_lan_router.gif");
% mysql Mysql%

   mysql> USE wbluhm ; mysql> USE wbluhm;

   mysql> SELECT * FROM books; mysql> SELECT * FROM buku;

   mysql> SELECT title, price mysql> SELECT judul, harga
       -> FROM books -> FROM buku
       -> ; ->;

   mysql> SELECT title, author mysql> SELECT judul, penulis
       -> FROM books -> FROM buku
       -> WHERE topic="Java"; -> WHERE topik = "Java";

   mysql> SELECT title, author, price mysql> SELECT judul, penulis, harga
       -> FROM books -> FROM buku
       -> WHERE topic="Java" -> WHERE topik = "Java"
       -> ORDER BY price; -> ORDER BY harga;

   mysql> SELECT title, author, price mysql> SELECT judul, penulis, harga
       -> FROM books -> FROM buku
       -> WHERE topic="Java" -> WHERE topik = "Java"
       -> ORDER BY price DESC; -> ORDER BY harga turun;

   mysql> USE samp_db; mysql> USE samp_db;

   mysql> SHOW TABLES; mysql> SHOW TABEL;

   mysql> DESCRIBE president; mysql> Describe presiden;

   mysql> SELECT last_name, first_name, birth mysql> SELECT last_name, FIRST_NAME, kelahiran
       -> FROM president -> DARI presiden
       -> WHERE death IS NULL -> Kematian WHERE IS NULL
       -> ORDER BY last_name; -> ORDER BY last_name;

   mysql> DESCRIBE student; mysql> Describe siswa;

   mysql> DESCRIBE absence; mysql> Describe ketidakhadiran;

   mysql> SELECT student.name, absence.date mysql> SELECT student.name, absence.date
       -> FROM student JOIN absence -> DARI JOIN ketidakhadiran siswa
       -> WHERE student.student_id = absence.student_id; -> WHERE student.student_id = absence.student_id;

   mysql> exit; mysql> exit;