Praktukum : II
Hari/Tanggal :
Kamis,27.02.2020
Materi :
-
Tag <table>
-
Tag <img>
-
Tag<form>
-
Format tag Menggunakan Cascendng Style Sheet (CSS)
Ø Topic I :
Belajar membuat Sebuah Table (Tabel)
Latihan I . Buatlah kode Html untuk menampilkan tampilan web seperti di bawah ini :
No
|
Nim
|
Nama
|
1
|
180840001
|
Irwan
Amriando Purba
|
2
|
180840002
|
David calvin
Sihotang
|
3
|
180840003
|
Adil hulu
|
4
|
180840004
|
Sangkot
Siregar
|
5
|
180840005
|
Samuel
Pardede
|
Jawab :
1. Buka
notepad .
2. Untuk
mengaktifkan notepad à klik strat
à notepad
3. Ketikkan
Sturktur html
<html>
<head>
<titele>Belajar
table </title>
</head>
<body>
</body>
</html>
4. Untuk
membuat table 6 baris 3 kolom ketikkan kode html seperti berikut
Diantara tag<body>{….}</body> :
<table>
<tr>
<td>No</td>
<td>Nim</td>
<td>Nama</td>
</tr>
<tr>
<td>1</td>
<td>180840001</td>
<td>Irwan amriando Purba</td>
</tr>
<tr>
<td>1</td>
<td>180840002</td>
<td>David Calvin
Sithotang</td>
</tr>
<tr>
<td>1</td>
<td>180840003</td>
<td>Adil hulu</td>
</tr>
<tr>
<td>1</td>
<td>180840004</td>
<td>Sangkot Siregar</td>
</tr>
<tr>
<td>1</td>
<td>180840005</td>
<td>Samuel Pardede</td>
</tr>
</table>
|
5. Selanjutnya
save file notepad yang kita buat sebelumnya di folder yang telah kita buat
sebelumnya.
6. Kita buka
file notepad tadi pada web browser .
7. Dan
hasilnya sepert berikut :
Latihan 1.
Buatlah kode html untuk membuat tampilan seperti berikut :
TA
|
Jumlah Masiswa
|
|||||
Genap
|
Ganjil
|
Genap
|
Ganjil
|
Genap
|
Ganjil
|
|
2018
|
150
|
150
|
150
|
150
|
150
|
150
|
2019
|
150
|
150
|
150
|
150
|
150
|
150
|
2020
|
150
|
150
|
150
|
150
|
150
|
150
|
Ø Topic II : Belajar membuat Sebuah gambar (Image) dan form
Cara Memasukkan Gambar kedalam Web :
|
<html>
<head>
<titele>Belajar
Membuat Formulir</title>
</head>
<body>
<img src= “fotokhu.jpg”>
</body>
</html>
|
1. Buka file notepad
2. Ketikkan Kode Program Dibawah ini :
|
<html>
<head>
<titele>Belajar
Membuat Formulir</title>
</head>
<body>
<form>
Login<br>
User Name : <input type=text size=20
name=txtuser><br>
Password : <input type=password size=20
name=txtpass><br>
<input type=submit
value=Proses>
</form>
</body>
</html>
|
4. Buka file pada web browser
dan hasil tampilannya sebagai berikut :
|
<html>
<head>
<title>Belajar
Membuat Formulir</title>
<style>
table{
background-color: #fff000;
}
input{
background-color : #f0f0ff;
}
body{
background-color : teal;
}
</style>
</head>
<body>
<form>
<table>
<tr font-color:red>
<td colspan=3 align=
center >Login</td>
</tr>
<tr>
<td> User
Name</td>
<td> :</td>
<td><input
type=text size=20 name=txtuser></td>
</tr>
<tr>
<td>
Password</td>
<td> : </td>
<td><input
type=password size=20 name=txtpass></td>
</tr>
<tr>
<td colspan=3 align=
center>
<input type=submit
value=Proses
</td>
</tr>
</table>
</form>
</body>
</html>
|
|
<html>
<head>
<title>Belajar
Membuat Formulir Biodata Mahasiswa</title>
<style>
table{
background-color: #fff000;
}
input{
background-color :skyblue;
}
body{
background-color : teal;
}
</style>
</head>
<body>
<form>
<table>
<tr font-color:red>
<td colspan=3 align=
center >Input Biodata Mahasiswa</td>
</tr>
<tr font-color:red>
<td colspan=3 align=
center ></td>
</tr>
<tr>
<td> Nim</td>
<td> :</td>
<td><input
type=text size=9 name=txtnim></td>
</tr>
<tr>
<td>
Nama</td>
<td> : </td>
<td><input
type=text size=30 name=txtnama></td>
</tr>
<tr>
<td> Tempat/Tgl
Lahir</td>
<td> : </td>
<td>
<input type=text
size=20 name=txttempat>
<select
name=slttgl>
<option>Tanggal</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option></select>
<select
name=sltbln>
<option>Bulan</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select
name=sltthn>
<option>Tahun</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
</select>
</td>
</tr>
<tr>
<td>Jenis
Kelamin</td>
<td>:</td>
<td><input
type= radio name=jenkel>Laki Laki
<input
type=radio name=jenkel>Perempuan
</td>
</tr>
<tr>
<td>Agama</td>
<td>:</td>
<td><select
name=sltthn>
<option>Agama</option>
<option>Kristen</option>
<option>Islam</option>
<option>Hindu</option>
<option>Budha</option>
<option>Konghucu</option>
<option>lainnya</option>
</select>
</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><input
type=text size=25 name=txtalamat ></td>
<tr>
<td>Hobby</td>
<td>:</td>
<td><input
type=checkbox name=hob >Makan
<input
type=checkbox name=hob >Rebahan
<input
type=checkbox name=hob >lari dari Kenyataan
<input type=checkbox name=hob
>Bermimpi
</td>
<tr>
<td
>Foto</td>
<td >:</td>
<td ><input
type=file></td>
</tr>
<tr>
<td>Keterangan</td>
<td>:</td>
<td>
<textarea cols=40
rows=5></textarea>
</td>
</tr>
<tr>
<td colspan=3 align=
center>
<input type=submit
value=Proses
</td>
</tr>
</table>
</form>
</body>
</html>
|
