Pada pertemuan kali ini membahas tentang tata letak(Layout) web secara umum, seperti dibawah ini:
|
||
|
||
|
Seperti biasa, langkah awal untuk memulainya adalah:
1. Buka
aplikasi Notepad
Start – klik Notepad
2. Buat
ketiga struktur HTML
<html>
<head>
</head>
<body>
</body>
</html>
CODE:
<html>
<head>
<title> Layout-1 </title>
<style>
#header
{
width : 100%;
background-color:white;
height : 70px;
}
#content {
width : 100%;
background-color: darkorange;
height : 500px;
color : white;
}
#footer
{
width : 100%;
background-color: darksalmon;
height : 50px;
color : white;
}
</style>
</head>
<body>
<!-Bagian Header->
<div
id=header>
<img
src= logo1.png>
</div>
<!-Bagian Content->
<div
id=content>
<h1> Pendaftaran Anggota</h1>
<p> Unit Kegiatan Mahasiswa (UKM)
"Web Club" menerima anggota baru tahun ajaran 2019/2020
untuk itu dibutuhkan data anggota yang akan digunakan untuk
pengolahan lebih lanjut guna kebutuhan UKM. Silahkan Anda
isikan data dibawah ini:</p>
<form>
<table style=color:white;>
<tr>
<td colspan=3> Input Data Anggota </td>
</tr>
<tr>
<td> Nama </td>
<td> : </td>
<td><input type=text
size=25></td>
</tr>
<tr>
<td> Alamat </td>
<td> : </td>
<td><input type=text size=50></td>
</tr>
<tr>
<td>Tempat/Tanggal Lahir</td>
<td> : </td>
<td><input type=text size=25>
<select>
<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>
<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>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
</select>
</td>
</tr>
<tr>
<td> Jenis Kelamin </td>
<td> : </td>
<td><input type=radio name=jk>Laki-laki
<input type=radio name=jk>Perempuan</td>
</tr>
<tr>
<td> Catatan </td>
<td> : </td>
<td><textarea cols= 40 rows=7></textarea></td>
</tr>
<tr>
<td colspan=3>
<input type=submit value=Simpan>
<input type=reset value=Batal>
</td>
</tr>
</table>
</form>
</div>
<!-Bagian Footer->
<div
id=footer>
<h2> Hakcipta ©Oleh: Etta 2019 </h2>
</div>
</body>
</html>
*NOTE:
1.Tag <div > </div>
Divisio: Digunakan untuk mengatur tata letak
data/informasi di web
2.#
: sebagai ID(Pengenal) dan “unik”
Cth: #header{
}
#content{
}
3 3. <!-
-> : hanya sebagai komentar, tidak
akan ditampilkan saat kode dijalankan
Contoh :
<!-Bagian Header->
4 4. <td><input
type=text size=25></td> :Text size agar bisa diisi,dengan panjang
karakter 25
5 5. Untuk
pilihan Tgl Lahir harus digunakan :
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Agar tampil seperti berikut:
6. <td><input
type =radio
name=jk>Laki-laki
<input type =radio name=jk>Perempuan</td>
Radio: untuk tombol
pilihan
Kenapa
harus ada “name” dikeduanya? Supaya hanya 1 pilihan
yang boleh dipilih
7. <td><textarea
cols= 40 rows=7></textarea></td>
Textarea: Agar lebih
banyak teks yang dapat diisi, boleh juga ditentukan ukuran dengan menggunakan
“cols” dan “rows”.
Maka beginilah hasil akhir dari program yang dibuat:
Terimakasih untuk kunjungan anda
Please like , comment and share
Semoga Bermanfaat dan Selamat Mencoba
Tidak ada komentar:
Posting Komentar