PERTEMUAN II
Pada pertemuan Kali ini akan membahas tentang ‘Pembuatan
Form Tabel pada WEB’
-
Form merupakan element
yang digunakan untuk menampung macam-macam element yang berkaitan.
Dimana Tag form dalam HTML yaitu ; <Form></Form>.
-
Tabel digunakna untuk menyajikan data dalam
bentuk Baris dan Kolom . Dimana tag tabel dalam HTML yaitu ;
<table></table>.
Dalam form tabel
terdapat dua atribut yaitu baris(tr) dan kolom(td).
Maka stuktur Tabel
dalam HTML yaitu;
<Form>
<table>
<tr>
<td></td>
</tr>
</table>
</Form>
Contoh pengaplikasian Penggunaan Tag Form dan Tabel;
1.
Membuat Tabel
Dari Gambar/Capture
diatas dapat dilihat bahwa karakteristik nya yaitu;
-
Background = kuning
-
Background judul = abu-abu
-
Warna Tulisan judul = putih
-
Memiliki 2 baris dan 2 kolom
Struktur HTML ;
<html>
<head>
<title>Buat Tabel</title>
</head>
<body bgcolor=yellow>
<h1 style="color:white;
background-color:grey;
font-family:lucida bright;">Belajar
Buat Tabel </h1>
<table align=center border=2px width=70%
bgcolor=white>
<tr bgcolor=orange>
<td align=center
style="color:white;">
<marquee>
<b>No</b>
</marquee></td>
<td align=center>NPM</td>
<td align=center>Nama</td>
</tr>
<tr>
<td align=center>1</td>
<td align=center>180810010</td>
<td align=center>STEFFANNY</td>
</tr>
</table>
</body>
</html>
Note :
- Bgcolor
: digunakan untuk membuat warna
latarbelakang pada WEB
-
Background-color
: kegunaanya sama dengan Bgcolor, hanya saja peletakan nya yang berbeda.
Bgcolor digunakan dalam Tag/Element
itu sendiri ,sedangkan Background-color
digukanan dalam CSS(style)
- Color : digunakan untuk memberikan warna pada
tulisan
- Align : digunakan dalam pemosisian
tulisan
1.
Rata kiri (Align
= left )
2.
Rata kanan (Align = right)
3.
Rata tengah (Align = center)
-
Font-family : digunakan unutk memebri style atau
penggayaan pada tulisan
-
Tag<marquee> : digunakan untuk Animasi berjalan (dari
kanan ke kiri), beberapa jenis animasi dalam marquee yaitu;
1.
<marquee
direction=”right”>
Kiri ke Kanan </marquee>
2.
<marquee
behavior=”ALTERNATE”>
Kanan kiri/bolak-balik </marquee>
3.
<marquee
direction=”up”>
bawah ke atas </marquee>
4.
<marquee
direction=”down”>
atas ke bawah </marquee> Dll.
2.
Membuat Formulir
Dari
Gambar/Capture diatas memiliki karakteristik;
-
Background = pink
-
Memiliki 3 kolom dan 6 baris
Stuktur HTML ;
<html>
<head>
<title>FORMULIR</title>
</head>
<body bgcolor="pink">
<h1>Belajar Membuat
Formulir</h1>
<form>
<table>
<tr>
<td><b>Input Data Mahasiswa</b></td>
</tr>
<tr>
<td> NPM</td>
<td> :</td>
<td><input type=text
size=9 Name=txtnim><br>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type=text
size=30 Name=txtnama><br>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><input type=text size=50
Name=txtalamat><br>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input type=radio
name=rdojk>Lk
<input type=radio name=rdojk>Pr
</tr>
<tr>
<td><input
type=submit value=SIMPAN>
<input type=reset value=BATAL></td>
</tr>
</form>
</body>
</html>
Note
:
-
Input Type :
digunakan untuk penempatan /pengenalan Tipe data nya.
Ada
beberapa jenis tipe data dalam HTML;
1.
Input type = Text (berbentuk teks,tampak jelas)
2.
Input type = Password (berbentuk bintang /***)
3.
Input type = Hidden (tidak tampak sama sekali)
4.
Input type = Radio (berbentuk Pilihan)
5.
Input type = Submit( buttom yang digunakan untuk
persetujuan)
6.
Input type = Reset (buttom yang digunkan untuk
pembatalan)
-
Size :
ukuran dari Tipe data tersebut .
-
Name :
digunakan untuk pengenalan atribut dari pengimputan data.
-
Jika hanya ingin memilih satu karakter saja
gunakan name yang sama dalam pemilihan.
Cth.
<input type=radio name=rdojk>Lk
<input type=radio name=rdojk>Pr
è
Menggunakan Name yang sama yaitu ; rdojk.
Sekianlah Materi Pembelajaran pertemuan II
TERIMAKASIH ☺
TERIMAKASIH ☺
No comments:
Post a Comment