Pengikut

Diberdayakan oleh Blogger.
Senin, 07 Februari 2011

postheadericon PEMROGRAMAN BERBASIS WEB

TUGAS PRAKTIKUM 2

1. Study kasus



Untuk Html Study kasus silahkan klik disni

2. Tugas praktikum
   a) tugas praktikum no.1

             
                     untuk membuka htmlnya silahkan klik disini

  b) tugas praktikum no.2

   
      untuk melihat html silahkan klik disini
 
NB : untuk melihat script html, silahkan buka html pada link klik disni dan klik kanan pada halaman web dan pilih view page source,... trims...



TUGAS PRAKTIKUM 3
1. Study Kasus

      script pada program ini :
<html>
<head>
<title>Study Kasus Modul 3</title>
<style type="text/css">
<!--

.lingkaran2{
 width:175px;
 height:175px;
 border: 2px solid brown;
 border-radius:100px;
 -moz-border-radius:100px;
 -webkit-border-radius:100px;
 background:#897048;
 text-align:center;
 font-size:18px;
 color:#fff
}

.text-lingkaran{
 padding-top: 100px;
}

.round2 {
 -moz-border-radius-bottomright: 25px 25px;
 border-bottom-right-radius: 25px 25px;
 -moz-border-radius-topleft: 25px 25px;
 border-top-left-radius: 25px 25px;
 border: 4px solid green;
 padding: 10px;
 width: 270px;
 height: 40px;
}

.round3 {
 border: 2px solid #897048;
 padding: 10px;
}

.shadow {
 width: 300px;
 box-shadow: 5px 5px 7px #222;
 -moz-box-shadow: 5px 5px 7px #222;
 -webkit-box-shadow: 5px 5px 7px #222;
}

-->
</style>
</head>
<body>

<p>
<div class="lingkaran2">
<span class="text-lingkaran">
<br>Yang ini </br> border Lingkaran<br />
Pendekatan Yang<br /> digunakan masih <br />
sama lho. Ayo<br /> Kreasikan sendiri<br />
ya??<br />
</span>
</div>

<br />
<div class="round2">
Buat kreasi border seperti ini juga bisa lho.</br>
Mmm...<br /><br />
</div>
<br/>
<div class="shadow">
<p class="round3">Efek Shadow
</div>
<br/>
</body>
</html>


Link to website Klik disini

 2. Membuat tampilan sederhana seperti Facebook



    Script Program :

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Membuat Tampilan FaceBook</title>
</head>

<!DOCTYPE html>
<html lang="en">

<head>
<title>Selamat Datang di faceMood - Masuk, ...</title>
<style type="text/css">
<!--
.box1 {
    float: right;
    padding: 5px;
    height: 100px;
}

.box2 {
    float: right;
    padding: 5px;
    height: 100px;
}

#header{
    height: 80px;
    background:darkblue;
}

#logo{
    float: left;
    padding-left: 100px;
    padding-top: 20px;
}

.box3 {
}


-->
</style>
</head>

<div id="logo">
<img src="logofm.JPG">
</div>

<body background="body.JPG">


<form>
<div id="header">
<div class="box2">
<br><input type="button" value="masuk">
<br>
</div>

<div class="box1">
Password <br><input type="text" size="25">
<br>Lupa kata sandi anda?
</div>

<div class="box1">
Email <br><input type="text" size="25">
<br><input type="checkbox" value="checkbox">Biarkan saya tetap masuk
</div>
</div>

<div class="box3">

</div>
<br />

<table border=0>

Selamat datang di FaceMood.com<br />
Silahkan isi dengan lengkap form pendaftaran<br />
dibawah ini, terima kasih...<br /><br />
<tr>
<td>Nama Depan : </td>
<td><input type="text"></td>
</tr>

<tr>
<td>Nama Belakang : </td>
<td><input type="text"></td>
</tr>

<tr>
<td>Emailmu : </td>
<td><input type="text"></td>
</tr>

<tr>
<td>Tulis ulang Emailmu : </td>
<td><input type="text"></td>
</tr>

<tr>
<td>Password Baru : </td>
<td><input type="text"></td>
</tr></td>

<tr>
<td>Jenis Kelamin : </td>
<td><select name="Jenis Kelamin">
    <option>Laki-laki</option>
    <option>Perempuan</option>
</select>
</td>
</tr>

<tr>
<td>Tanggal Lahir : </td>
<td><select name="Tahun">
    <option>1985</option>
    <option>1986</option>
    <option>1987</option>
    <option>1988</option>
    <option>1989</option>
    <option>1990</option>
    <option>1991</option>
    <option>1992</option>
    <option>1992</option>
    <option>1994</option>
    <option>1995</option>
    <option>1996</option>
</select>
</td>

<td><select name="Bulan">
    <option>Januari</option>
    <option>Februari</option>
    <option>Maret</option>
    <option>April</option>
    <option>Mei</option>
    <option>Juni</option>
    <option>Juli</option>
    <option>Agustus</option>
    <option>September</option>
    <option>Oktober</option>
    <option>November</option>
    <option>Desember</option>
</select>
</td>

<td>
<select name="tanggal">
<option>31</option><option>30</option><option>29</option><option>28</option>
<option>27</option><option>26</option><option>25</option><option>24</option>
<option>23</option><option>22</option><option>21</option><option>20</option>
<option>19</option><option>18</option><option>17</option><option>16</option>
<option>15</option><option>14</option><option>13</option><option>12</option>
<option>11</option><option>10</option><option>9</option><option>8</option>
<option>7</option><option>6</option><option>5</option><option>4</option>
<option>3</option><option>2</option><option>1</option>
</select>
</td>
</tr>



</html>



Link to website Klik disini
0 komentar
Langganan: Postingan (Atom)

Blogger Template created with Artisteer.