Pembuatan HTML Tabel
I.
Dasar
Teori
HTML(Hypertext
MarkUp Language) a
dalah bahasa yang dugunakan untuk menulis halaman web. HTML
merupakan pengembangan dari standart pemformatan dokumen teks yaitu standart
Generalized Markup language (SGML). HTML sebenarya merupakan dokumen ASCII atau
teks biasa, yang dirancang untuk tidak tergantung pada satu system operasi
tertentu.
Struktur
Dokumen HTML
Standart
penulisannya adalah :
<HTML>
<HEAD>
Deskripsi Dokumen
</HEAD>
<BODY>
Isi Dokumen
</BODY>
Dan disini saya akan
membuat list program html ada tabel di dalam tabel dengan scrip program yang
saya jelaskan dibawah ini.
II.
Tujuan
ð Siswa
mampu menguasai HTML
ð Siswa
mampu menyusun strukttur HTML dengan tepat dan pas
III.
Alat dan Bahan
ð PC
/ Laptop
ð Macromedia
Dreamweafer/Notepad++
ð
IV.
Langkah kerja
ð Hidupka
PC
ð Buka
aplikasi Macromedia Dreamweafer
ð Susun
program disini saya akan membuat listing program yang berjudul “Form
Pendaftaran Workshop Macromedia Dreamweafer”
ð Akan
menampilkan beberapa ketentuan yang akan di isi seperti : Nama, Alamat, Tempat,
Tanggal Lahir, Hobi siPengisi data. Dan kemudian akan menggunakan Submit dan
Reset
ð Pertama-tama
kita menulis listing program dahulu awalan terlebih dahulu
ð Dan
beginilah scriptnya:
<html>
<head>
<title>Tabel
Formulir biodata</title>
<div
id="header">
<font
color="white"> <h1> Form Pendaftaran Workshop
Dreamweafer</h1>
</font>
</head>
ð Kemudian
saya kasih background gambar dan saya ambil ganbar KAGAYA024
ð Dan
beginilah scriptnya
<body
background="KAGAYA024.jpg">
<form
action ="hasil.html" menthod= "post">
ð Selanjutnya
kita susun table, Nama, Alamat, Tempat.
ð Dan
beginilah scriptnya
<table
border="1">
<th><th>Nama</th><th><input
type="text" Name = "Nama" SIZE = "20" maxlength =
"40"></th><tr>
<th><th>Alamat</th><th><input
type="text" Name = "Alamat" SIZE = "20" maxlength =
"40"></th><tr>
<th><th>Tempat</th><th><input
type="text" Name = "Tempat" SIZE = "20" maxlength =
"40"></th><tr>
ð Dan
sekarang saya akan menyusun Tanggal, Bulan, dan Tahun Lahir dan masing-masing
keterangan saya kasih pilihan agar memudahkan pengisian.
ð Dan
ini script untuk Tanggal:
<th><th>Tanggal</th><th>
<select
name : "Pilih">
<option
value="1"selected>1
<option
value="2">2
<option
value="3">3
<option
value="4">4
<option
value="5">5
<option
value="6">6
<option
value="7">7
<option
value="8">8
<option
value="9">9
<option
value="10">10
<option
value="11">11
<option
value="12">12
<option
value="13">13
<option
value="14">14
<option
value="15">15
<option
value="16">16
<option
value="17">17
<option
value="18">18
<option
value="19">19
<option
value="20">20
<option
value="21">21
<option
value="22">22
<option
value="23">23
<option
value="24">24
<option
value="25">25
<option
value="26">26
<option
value="27">27
<option
value="28">28
<option
value="29">29
<option
value="30">30
<option
value="31">31
</select>
ð Ini
script untuk bulan:
<select
name : "Pilih">
<option
value="Januari"selected>Januari
<option
value="Februari">Februari
<option
value="Maret">Maret
<option
value="April">April
<option
value="Mei">Mei
<option
value="Juni">Juni
<option
value="Juli">Juli
<option
value="Agustus">Agustus
<option
value="September">September
<option
value="Oktober">Oktober
<option
value="November">November
<option
value="Desember">Desember
</select>
ð Dan
ini script untuk tahun tetapi saya tulis tahun 1995-2000 saja karena para
pengisi data tahun lahirnya antara tahun tersebut
<select
name : "Pilih">
<option
value="1995"selected>1995
<option
value="1996">1996
<option
value="1997">1997
<option
value="1998">1998
<option
value="1999">1999
<option
value="2000">2000
</select>
</th></tr>
ð Selanjutnya
saya menambahkan pengisian tentang jenis kelamin dan hobi si pengisi formulir
ð Dan
beginilah scriptnya
<th><th>Jenis
Kelamin</th><th>
<input
type="radio"
name="sex" checked>Pria <input type="radio"
name="sex" checked>Wanita</th></tr>
<th><th>Hobi
Anda :</th><th>
<input
type="checkbox" name="MUSIK"
checked/>Musik</th></tr>
<th><th></th><th> <input
type="CHEckbox"name="OLAHRAGA" >Olahraga
</th><tr> <th><th></th><th> <input
type="CHEckbox"name="Membaca" > Membaca
</th><tr> <th><th><th><th><input
type="CHEckbox"name="LAINNYA" > Lainnya
</th><tr>
ð Setelah semua kolom pengisian data kita
tambahkan tombol submit dan reset.
ð Dan ini script nya
<input type="submit"
value="Dafter"> <input type="reset"
value="Batal">
ð Setelah semua selesa kita tutup
scriptnya
ð Dan ini scriptnya
</form>
</pre>
</body>
</html>
ð Dan inilah script utuh yang saya buat
<html>
<head>
<title>Tabel
Formulir biodata</title>
<div
id="header">
<font
color="white"> <h1> Form Pendaftaran Workshop
Dreamweafer</h1>
</font>
</head>
<body
background="KAGAYA024.jpg">
<form
action ="hasil.html" menthod= "post">
<table
border="1">
<th><th>Nama</th><th><input
type="text" Name = "Nama" SIZE = "20" maxlength =
"40"></th><tr>
<th><th>Alamat</th><th><input
type="text" Name = "Alamat" SIZE = "20" maxlength =
"40"></th><tr>
<th><th>Tempat</th><th><input
type="text" Name = "Tempat" SIZE = "20" maxlength =
"40"></th><tr>
<th><th>Tanggal</th><th>
<select
name : "Pilih">
<option
value="1"selected>1
<option
value="2">2
<option
value="3">3
<option
value="4">4
<option
value="5">5
<option
value="6">6
<option
value="7">7
<option
value="8">8
<option
value="9">9
<option
value="10">10
<option
value="11">11
<option
value="12">12
<option
value="13">13
<option
value="14">14
<option
value="15">15
<option
value="16">16
<option
value="17">17
<option
value="18">18
<option
value="19">19
<option
value="20">20
<option
value="21">21
<option
value="22">22
<option
value="23">23
<option
value="24">24
<option
value="25">25
<option
value="26">26
<option
value="27">27
<option
value="28">28
<option
value="29">29
<option
value="30">30
<option
value="31">31
</select>
<select
name : "Pilih">
<option
value="Januari"selected>Januari
<option
value="Februari">Februari
<option
value="Maret">Maret
<option
value="April">April
<option
value="Mei">Mei
<option
value="Juni">Juni
<option
value="Juli">Juli
<option
value="Agustus">Agustus
<option
value="September">September
<option
value="Oktober">Oktober
<option
value="November">November
<option
value="Desember">Desember
</select>
<select
name : "Pilih">
<option
value="1995"selected>1995
<option
value="1996">1996
<option
value="1997">1997
<option
value="1998">1998
<option
value="1999">1999
<option
value="2000">2000
</select>
</th></tr>
<th><th>Jenis
Kelamin</th><th>
<input
type="radio" name="sex" checked>Pria <input
type="radio" name="sex"
checked>Wanita</th></tr>
<th><th>Hobi
Anda :</th><th>
<input
type="checkbox" name="MUSIK"
checked/>Musik</th></tr>
<th><th></th><th> <input
type="CHEckbox"name="OLAHRAGA" >Olahraga
</th><tr> <th><th></th><th> <input
type="CHEckbox"name="Membaca" > Membaca
</th><tr> <th><th><th><th><input
type="CHEckbox"name="LAINNYA" > Lainnya
</th><tr>
<th><th></th><th><th><input
type="submit" value="Dafter"> <input
type="reset" value="Batal"></th><tr>
</form>
</body>
</html>
ð Dan hasilnya akan seperti ini
ð Setelah itu kita buat lagi script agar
jika kita klik daftar bisa ada tampilan yang lain
ð Dan beginilah script yang saya buat
<html>
<head>
<title></title>
<style
type="text/css">
<!--
.style
{
color:#cc0033;
font-family: :Agnency FB", Andalus;
Font-size xxx-large;
font-weight: Bold;
}
--->
</style>
</head>
<body Background=">
<span class="style">Selamat
Biodata Anda Sudah Tersimpan<br>
Terima Kasih Sudah mengisi Biodata<br>
<br>
</span>
</body>
</html>
ð Script ini di save dengan nama
Hasil.htm sesuai dengan yang di tuliskan di script yang pertama
ð Dan jika kita klik daftar hasilnya akan
seperti ini
ð Itulah hasil kerjaan yang saya buat
pada Tugas 2
V.
KESIMPULAN
Pada pembuatan script html ini kita dalam penulisannya harus
benar. Jika kita salah bisa jadi program yang kita buat tidak bisa terbaca dan
hasilnya akan tidak memuaskan. Dalam pembuatannya kita dapat menggunakan
beberapa software alikasi misalnya, Macromedia Dreamweafer, Notepad++ dll akan
tetapi lebih mudah menggunakan Macromedia Dreamweafer karena list yang kita
buat sewaktu-waktu dapat kita lihat hasilnya.
0 komentar:
Posting Komentar