Contoh Tutorial Listing program HTML untuk Pemula

Berikut contoh simple yang sempat saya berikan, ini cukup mudah bagi newbie ya :

<HTML>

<HEAD>

<TITLE> RIWAYAT HIDUP </TITLE>

</HEAD>

<BODY BGCOLOR=”#53C001” TEXT=”#0000CC”>

<TABLE ALIGN=”CENTER” BGCOLOR=”#66CCCC” BORDER=”3″ HEIGHT=:”800″ WIDTH=”500″>

<TR>

<BR><TD COLSPAN=3><CENTER><H2><U><FONT SIZE=”10″ COLOR=”#8600C6″><MARQUEE></BIODATAKU</FONT></MARQUEE></U></H2></CENTER></TD>

</TR>

<TR>

<TD><B>NAMA</B></TD>

<TD><B> : </B></TD>

<TD><INPUT NAME = NAMA SIZE=55></TD>

</TR>

<TR>

<BR><BR><TD><B>JENIS KELAMIN</B></TD>

<TD><B> : </B></TD>

<TD><B><INPUT NAME = J_KEL TYPE=RADIO> LAKI-LAKI

<INPUT NAME = J_KEL TYPE=RADIO> PEREMPUAN</B></TD>

</TR>

<TR>

<BR><BR><TD><B>TEMPAT LAHIR</B></TD>

<TD><B> : </B></TD>

<TD><INPUT NAME = NAMA SIZE=40></TD>

</TR>

<TR>

<BR><BR><TD><B>TANGGAL LAHIR</B></TD>

<TD><B> : </B></TD>

<TD><SELECT NAME=”TANGGAL LAHIR”>

<OPTION SELECT>

<OPTION> 1

<OPTION> 2

<OPTION> 3

<OPTION> 4

<OPTION> 5

<OPTION> 6

<OPTION> 7

<OPTION> 8

<OPTION> 9

<OPTION> 10

<OPTION> 11

<OPTION> 12

<OPTION> 13

<OPTION> 14

<OPTION> 15

<OPTION> 16

<OPTION> 17

<OPTION> 18

<OPTION> 19

<OPTION> 20

<OPTION> 21

<OPTION> 22

<OPTION> 23

<OPTION> 24

<OPTION> 25

<OPTION> 26

<OPTION> 27

<OPTION> 28

<OPTION> 29

<OPTION> 30

<OPTION> 31

</SELECT>

<SELECT NAME=”BULAN LAHIR”>

<OPTION SELECT>

<OPTION> JANUARI

<OPTION> FEBRUARI

<OPTION> MARET

<OPTION> APRIL

<OPTION> MEI

<OPTION> JUNI

<OPTION> JULI

<OPTION> AGUSTUS

<OPTION> SEPTEMBER

<OPTION> OKTOBER

<OPTION> NOVEMBER

<OPTION> DESEMBER

</SELECT>

<SELECT NAME=”TAHUN LAHIR”>

<OPTION SELECT>

<OPTION> 1999

<OPTION> 1998

<OPTION> 1997

<OPTION> 1996

<OPTION> 1995

<OPTION> 1994

<OPTION> 1993

<OPTION> 1992

<OPTION> 1991

<OPTION> 1990

<OPTION> 1989

<OPTION> 1988

<OPTION> 1987

<OPTION> 1986

<OPTION> 1985

<OPTION> 1984

<OPTION> 1983

<OPTION> 1982

<OPTION> 1981

<OPTION> 1980

</SELECT></TD>

</TR>

<TR>

<BR><BR><TD><B>PENDIDIKAN AKHIR</B></TD>

<TD><B> : </B></TD>

<TD><SELECT NAME=TINGKAT PENDIDIKAN>

<OPTION SELECT> SMU

<OPTION> D3

<OPTION> S1

<OPTION> S2

<OPTION> S3

</SELECT></TD>

</TR>

<TR>

<BR><BR><TD><B>KEWARGANEGARAAN</B></TD>

<TD><B> : </B></TD>

<TD><INPUT NAME = NAMA SIZE=25></TD>

</TR>

<TR>

<BR><BR><TD><B>STATUS PERNIKAHAN</B></TD>

<TD><B> : </B></TD>

<TD><INPUT NAME = NAMA SIZE=30></TD>

</TR>

<TR>

<BR><BR><TD><B>TINGGI/BERAT BADAN</B></TD>

<TD><B> : </B></TD>

<TD><INPUT NAME = NAMA SIZE=20></TD>

</TR>

<TR>

<BR><BR><TD><B>KESEHATAN</B></TD>

<TD><B> : </B></TD>

<TD><INPUT NAME = NAMA SIZE=20></TD>

</TR>

<TR>

<BR><BR><TD><B>AGAMA</B></TD>

<TD><B> : </B></TD>

<TD><SELECT NAME=AGAMA>

<OPTION SELECT> ISLAM

<OPTION> KRISTEN PROTESTAN

<OPTION> HINDU

<OPTION> KATOLIK

<OPTION> BUDHA

</SELECT></TD>

</TR>

<TR>

<BR><BR><TD><B>ALAMAT LENGKAP</B></TD>

<TD><B> : </B></TD>

<TD><INPUT NAME = NAMA SIZE=70></TD>

</TR>

<TR>

<BR><BR><TD><B>NO.TELEPON/HP</B></TD>

<TD><B> : </B></TD>

<TD><INPUT NAME = NAMA SIZE=30></TD>

</TR>

<TR>

<BR><BR><TD><B>EMAIL</B></TD>

<TD><B> : </B></TD>

<TD><INPUT NAME = NAMA SIZE=40></TD>

</TR>

<TR>

<BR><BR><TD><B>HOBBY</B></TD>

<TD><B> : </B></TD>

<TD><INPUT NAME=”HOBBY” TYPE=”CHECKBOX”><B>OLAHRAGA<INPUT NAME=”HOBBY” TYPE=”CHECKBOX”>MEMBACA<INPUT NAME=”HOBBY” TYPE=”CHECKBOX”>MENYANYI</B></TD>

</TR>

<TR>

<TD><B>KETERANGAN</B></TD>

<TD><B> : </B></TD>

<TD><TEXTAREA></TEXTAREA></TD>

</TR>

<TR>

<BR><BR><BR><TD COLSPAN=3>

<CENTER><INPUT TYPE=BUTTON VALUE=Simpan> <INPUT TYPE=Reset></CENTER></TD>

</TR>

</TABLE>

</BODY>

</HTML>

Output sebagai berikut :

Output program HTML

**********

Software/Program yang biasa di gunakan untuk memudahkan EDITPLUS – Appserv – web browser yang digunakan bisa dengan Microsoft Internet Explorer, dll.

Untuk tulisan Warna Merah pada listing program di atas, kamu bisa ganti sesuai warna kesukaan, atau sesuai dengan keinginan masing-masing.

Untuk membuat sebuah web page, yang paling umum banyak digunakan untuk menampilkannya adalah tag HTML (Hyper Text Markup Languge) dan JavaScript dalam pemrograman web.

Tag adalah suatu simpul yang digunakan untuk member tanda pada dokumen html. Menggunakan tanda < dan >.

Tag-tag dasar terdiri dari :

<HTML> : Tag dasar HTML, mendefinisikan bawah dokumen adalah HTML.

<HEAD> : Menuliskan keterangan tentang dokumen web.

<TITLE> : Memberi Judul/Caption browser web.

<BODY> : Section utama dari dokumen web.

Sampai jumpa di tutorial selanjutnya….

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: