LANGKAH
BERIKUTNYA MEMBUAT HTML DENGAN TABEL DAN
BENTUK KOLOM
Assalamualaikum Wr. Wb
Berjumpa kembali,kali ini saya membahas HTML lagi ..Anda
sudah tahu desain web itu seperti apa?....Kesempatan ini saya menunjukan cara
membuat HTML dengan kolom dan tabel. .
CONTOH
=
Disini
Sricpt I (DATA KELULUSAN) :
<!DOCTYPE HTML>
<html>
<head>
<meta
http-equiv="content-type" content="text/html" />
<meta
name="author" content="ramon" />
<title>Untitled
1</title>
</head>
<body>
<!DOCTYPE HTML>
<html>
<head>
<meta
http-equiv="content-type" content="text/html" />
<meta
name="author" content="hafidh" />
<title>Untitled
9</title>
</head>
<body>
<table border=1 align="center" cellspasing=0
cellpadding=5>
<tr>
<td
rowspan="2">Nim</td></td>
<td rowspan="2">Nama</td></td>
<td
rowspan="2">Kelas</td></td>
<th
colspan="2">Keterangan</th>
</tr>
<tr>
<th>lulus</th>
<th>tidak
lulus</th>
</tr>
<tr>
<th>101</th>
<th>ida</th>
<th>TI-2</th>
<td rowspan="2"
align="center">V</td></td>
<th>-</th>
</tr>
<tr>
<th>102</th>
<th>Rika</th>
<td rowspan="3"
align="center">TI-4</td>
<th>-</th>
</tr>
<tr>
<th>103</th>
<th>kiki</th>
<th>-</th>
<th>V</th>
</tr>
<tr>
<th>104</th>
<th>buri</th>
<td rowspan="2"align="center">V</td>
<th>-</th>
</tr>
<tr>
<th>105</th>
<th>koko</th>
<th>TI-3</th>
<th>-</th>
</tr>
</table>
</body>
</html>
</body>
</html>
Tak lupa PrtSc
SysRq I :
Disini
Sricpt II(FORMULIR) :
<!DOCTYPE HTML>
<html>
<head>
<meta
http-equiv="content-type" content="text/html" />
<meta
name="author" content="ramon" />
<title>Untitled
1</title>
</head>
<body>
<!DOCTYPE HTML>
<html>
<head>
<meta
http-equiv="content-type" content="text/html" />
<meta
name="author" content="ramon" />
<title>Untitled
4</title>
</head>
<body>
<!DOCTYPE HTML>
<html>
<head>
<meta
http-equiv="content-type" content="text/html" />
<meta
name="author" content="ramon" />
<title>Untitled
11</title>
</head>
<body>
<table width="600" border=0 align="center"
cellspacing=5 cellpadding=0>
<tr>
<th colspan="10"
align="center">PROVINSI JAWA TIMUR<br />KOTA
SURABAYA</th>
</tr>
<tr>
<td
align="left">Nik</td>
<td>:</td>
<th colspan="8"
align="left">350810211039000003</th>
</tr>
<tr>
<td
align="left">Nama</td>
<td>:</td>
<th colspan="7"
align="left">Gubernur Suryo</th>
<th rowspan="5"
width="60" align="right" style="background-color:
bisque;">Foto</th>
</tr>
<tr>
<td
align="left">Tempat/Tgl Lahir</td>
<td>:</td>
<th colspan="7"
align="left">Surabaya, 11-05-1990</th>
</tr>
<tr>
<td
align="left">Jenis Kelamin</td>
<td>:</td>
<th
align="left">Laki-Laki</th>
<td
align="right" colspan="5">Gol Darah
:<b>B</b></td>
</tr>
<tr>
<td
align="left">Alamat</td>
<td>:</th>
<th colspan="7"
align="left">Jl. Pemuda 01</th>
</tr>
<tr>
<td
align="left">RT/RW</td>
<td>:</td>
<th colspan="7"
align="left">002 / 023</th>
</tr>
<tr>
<td
align="left">Kel/Desa</td>
<td>:</td>
<th colspan="8"
align="left">Rungkut</th>
</tr>
<tr>
<td
align="left">Kecamatan</td>
<td>:</td>
<th colspan="8"
align="left">Rungkut</th>
</tr>
<tr>
<td
align="left">Agama</td>
<td>:</td>
<th
align="left">Islam</th>
<td
align="center" colspan="6">Status :</td>
</tr>
<tr>
<td
align="left">Pekerjaan</td>
<td>:</td>
<th
align="left">Pelajar / Mahasiswa</th>
</tr>
<tr>
<td
align="left">Berlaku hingga</td>
<td>:</td>
<th
align="left">18-04-2017</th>
</tr>
<tr>
<td
align="left">Kewarganegaraan</td>
<td
align="left">:</td>
<th
align="left">WNI</th>
</tr>
<th width="600" colspan="10"
style="background-color:#66FF99" align="left">Syarat
Pengambilan e-KTP :
<br/>
1. Membawa pas foto ukuran 3x4 berwarna
<br/>
2. Membawa KTP lama
<br/>
3. Membawa Kartu Keluarga</th>
</table>
</body>
</html>
</body>
</html>
</body>
</html>
Tak lupa PrtSc
SysRq II :
Antara dua Link Bisa saling di hubungkan ,menggunakan
HTML .Mari simak contoh berikut agar
tidak pusing..Hehehehehehehe..
Saya tadi sudah membuat contoh HTML :”DATA dan FORMULIR “
HTML ini akan saya hubungkan.
Contoh:
Disini Sricpt :
DATA :
<!DOCTYPE HTML>
<html>
<head>
<meta
http-equiv="content-type" content="text/html" />
<meta
name="author" content="ramon" />
<title>Untitled
9</title>
</head>
<body>
<a href="formulir.html"
style="background-color:#66ff99"align="justify" >BALIK
KE MODUL II</a>
<table border=1 align="center" cellspacing=0 cellpadding=5
width=350>
<tr>
<td rowspan="2"
align="center"><b>Nim</b></td>
<td rowspan="2"
align="center"><b>Nama</b></td>
<td rowspan="2"
align="center"><b>Kelas</b></td>
<th colspan="2"
align="center">Keterangan</th>
</tr>
<tr>
<th
align="center">lulus</th>
<th
align="center">tidak lulus</th>
</tr>
<tr>
<td>101</td>
<td>IDA</td>
<td
align="center">TI-2</td>
<td rowspan="2"
align="center">V</td></td>
<td
align="center">-</td>
</tr>
<tr>
<td>102</td>
<td>RIKA</td>
<td rowspan="3"
align="center">TI-4</td>
<td
align="center">-</td>
</tr>
<tr>
<td>103</td>
<td>KIKI</td>
<td
align="center">-</td>
<td
align="center">V</td>
</tr>
<tr>
<td>104</td>
<td>BURI</td>
<td
rowspan="2"align="center">V</td>
<td
align="center">-</td>
</tr>
<tr>
<td>105</td>
<td>KOKO</td>
<td
align="center">TI-3</td>
<td
align="center">-</td>
</tr>
</table>
</body>
</html>
FORMULIR :
<!DOCTYPE
HTML>
<html>
<head>
<meta
http-equiv="content-type" content="text/html" />
<meta name="author"
content="ramon" />
<title>Untitled
11</title>
</head>
<a
href="data.html"
style="background-color:#33ccff"align="justify" > BALIK
KE MODUL I</a>
<body>
<table width="600"
border=0 align="center" cellspacing=5 cellpadding=0>
<tr>
<th colspan="10"
style="background-color:#33ccff" align="center">PROVINSI
JAWA TIMUR<br />KABUPATEN BOJONEGORO</th>
</tr>
<tr>
<td
align="left">Nik</td>
<td>:</td>
<th colspan="8"
align="left">3522011804950001</th>
</tr>
<tr>
<td
align="left">Nama</td>
<td>:</td>
<th colspan="7"
align="left">M.EDI SANTOSA</th>
<th rowspan="5"
width="2" align="right" style="background-color:
bisque;"><img src="../../../../DOCUMANT ME/RAMON/RAMON/kakak
me/guuee.jpg" width="130" height="140"
/></th>
</tr>
<tr>
<td align="left">Tempat/Tgl
Lahir</td>
<td>:</td>
<th colspan="7"
align="left">BOJONEGORO, 18-04-1995</th>
</tr>
<tr>
<td align="left">Jenis
Kelamin</td>
<td>:</td>
<th
align="left">Laki-Laki</th>
<td align="right"
colspan="5">Gol Darah :<b>B</b></td>
</tr>
<tr>
<td
align="left">Alamat</td>
<td>:</th>
<th colspan="7"
align="left">MOJOREJO</th>
</tr>
<tr>
<td align="left">RT/RW</td>
<td>:</td>
<th colspan="7"
align="left">006 / 003</th>
</tr>
<tr>
<td
align="left">Kel/Desa</td>
<td>:</td>
<th colspan="8"
align="left">MOJOREJO</th>
</tr>
<tr>
<td
align="left">Kecamatan</td>
<td>:</td>
<th colspan="8"
align="left">NGRAHO</th>
</tr>
<tr>
<td
align="left">Agama</td>
<td>:</td>
<th
align="left">Islam</th>
<td align="center"
colspan="6">Status :</td>
</tr>
<tr>
<td
align="left">Pekerjaan</td>
<td>:</td>
<th align="left">Pelajar /
Mahasiswa</th>
</tr>
<tr>
<td align="left">Berlaku
hingga</td>
<td>:</td>
<th
align="left">18-04-2017</th>
</tr>
<tr>
<td
align="left">Kewarganegaraan</td>
<td
align="left">:</td>
<th
align="left">WNI</th>
</tr>
<th
width="600" colspan="10"
style="background-color:#66FF99" align="left">Syarat
Pengambilan e-KTP :
<br/>
1. Membawa pas foto ukuran 3x4 berwarna
<br/>
2. Membawa KTP lama
<br/>
3. Membawa Kartu Keluarga</th>
</table>
</body>
</html>
Sebenarnya sama dengan yang pertama hanya benghubungkanya dengan Link
data Script Berikut :
DATA
: <a href="formulir.html"
style="background-color:#66ff99"align="justify" >BALIK
KE MODUL II</a>(Jika Diklik Tulisan
BALIK KE MODUL II maka akan menuju ke Link FORMULIR)
FORMULIR : <a href="data.html"
style="background-color:#33ccff"align="justify" > BALIK
KE MODUL I</a>( Jika Diklik Tulisan BALIK KE MODUL I maka akan menuju
ke Link DATA)
Saya siapkan Juga
gambarnya untuk memperjelas keterangan diatas.
Ini PrtSc
SysRq :
DATA:
FORMULIR:
Sekian Terimakasih dari saya telah mengunjungi blog
sederhana ini,Semoga yang salah tulis
Bermanfaat untuk kalian Para Pembaca sekalian.
Jika masih banyak
kekurangan saya mohon Maaf sebesar – besarnya.
Wassalamualaikum Wr. Wb
NAMA :
M.EDI SANTOSO
KELAS :TEKNIK
INFORMATIKA .5
Tidak ada komentar:
Posting Komentar