Alhamdulillah...akhirnya bisa ngupload juga pagi ni, setelah skian lama off (what??? mati?? ah buka jg, tp sakit menahun, pe' pingsan2 nyusahin kerabat,sobat,tp g tobat2, hehehehe maaf y tmen2q tercinta
balik lagi yuk yaaaak yuuuk
kali ini aku ngepost latihan2 yang dikasih mas2 asdos, liat saja ya....
ni cuma tepat buat share, jd kl ada ksalahan, komentar apapun ttap d buka kok,,,,,
oke, yuuuuk liat disini, yang ni adalah contoh pembuatan border2, contoh tampilannya seperti ini
yang kode
programnya...
<!doctype html>
<html lang="en">
<head>
<title>studi kasus <title>
<link rel="shortcut icon" href="pens.jpg"/>
<style type = "text/css">
<!--
.round {
background-color: green;
-moz-border-radius: 150px;
-moz-border-radius: 150px;
border: 8px solid yellow;
padding: 60px;
width: 90px;
height : 90px
}
.round2 {
-moz-border-radius-bottomright: 40px;
-moz-border-radius-topleft: 40px;
border: 7px solid violet;
padding: 40px;
width: 400px;
height : 50px
}
.round3 {
background-color: yellow;
-moz-box-shadow: 10px 10px 15px brown;
border: 5px solid orange;
padding: 45px;
width: 400px;
height : 50px
}
-->
</style>
</head>
<body>
<div class="round"><font color="white">
lingkaran-lingkaran seperti bundaran HI</font>
</div>
<br />
<div class="round2" align="center">
<br><font color="blue" face="Courier New">
bisa juga bikin kreasi border ini, bagus kan????</font>
</div>
<br />
<div class="round3" align="center">
<br>
<font color="brown" face="comic sans MS">
Ini Dia contoh penggunaan efek shadow </font>
</div>
<br />
</body>
</html>
<html lang="en">
<head>
<title>studi kasus <title>
<link rel="shortcut icon" href="pens.jpg"/>
<style type = "text/css">
<!--
.round {
background-color: green;
-moz-border-radius: 150px;
-moz-border-radius: 150px;
border: 8px solid yellow;
padding: 60px;
width: 90px;
height : 90px
}
.round2 {
-moz-border-radius-bottomright: 40px;
-moz-border-radius-topleft: 40px;
border: 7px solid violet;
padding: 40px;
width: 400px;
height : 50px
}
.round3 {
background-color: yellow;
-moz-box-shadow: 10px 10px 15px brown;
border: 5px solid orange;
padding: 45px;
width: 400px;
height : 50px
}
-->
</style>
</head>
<body>
<div class="round"><font color="white">
lingkaran-lingkaran seperti bundaran HI</font>
</div>
<br />
<div class="round2" align="center">
<br><font color="blue" face="Courier New">
bisa juga bikin kreasi border ini, bagus kan????</font>
</div>
<br />
<div class="round3" align="center">
<br>
<font color="brown" face="comic sans MS">
Ini Dia contoh penggunaan efek shadow </font>
</div>
<br />
</body>
</html>
Naaaaaah belajar mencoba ya.......
selanjutnya...
udah pada pinter pesbukan mua kan???
hehehehe
yup, saatnya belajar bikin tampilannya dung, jangan cuma bisa make', hemmmm gmn caranya?
nih liat dlu hasil garapanq, yg punya mas asdos udah q edit ala dini's tyle, heeee yuk cekidot:
gimana?? aneh ya??
hehehe maaf ya mas asdos, tidak bermaksud merusak hak cipta, hihihihi
dan untuk kode html nya seperti berikut ini:
<!DOCTYPE html
public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<title>Selamat Datang di Tut-Twice</title>
<link rel="shortcut icon" href="twc.png"/>
<style type="text/css">
<!--
.header{
background-color:RoyalBlue;
padding: 15px;
height: 55px;
}
.content{
background-image:url(bg.jpg);
padding: 15px;
height: 457px;
}
.footer{
background-color:RoyalBlue;
padding: 1px;
height: 25px;
}
.tabel{
padding-top:5px;
margin-right:45px;
float:right;
width:450px;
}
.font{
font-family: Arial, Helvetica, sans-serif;
color: RoyalBlue;
font-stretch:ultra;
}
.font2{
font-family: Arial, Helvetica, sans-serif;
color: RoyalBlue;
font-size: 12px;
}
.font3{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: RoyalBlue;
font-weight: bold;
}
.font4{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
.font5{
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: RoyalBlue;
font-weight: bold;
}
.font6{
font-family: Arial, Helvetica, sans-serif;
color: White;
font-size: 12px;
}
.font7{
font-family: Arial, Helvetica, sans-serif;
color: White;
font-size: 11px;
}
.font8{
font-family: Arial Unicode MS;
color: RoyalBlue;
}
.group{
float:right;
width:320px;
height:40px;
}
.button-daftar{
-moz-border-radius-topleft:5px 5px;
-moz-border-radius-topright:5px 5px;
-moz-border-radius-bottomleft:5px 5px;
-moz-border-radius-bottomright:5px 5px;
-webkit-border-radius-topleft:5px 5px;
-webkit-border-radius-topright:5px 5px;
-webkit-border-radius-bottomleft:5px 5px;
-webkit-border-radius-bottomright:5px 5px;
-o-border-radius-topleft:5px 5px;
-o-border-radius-topright:5px 5px;
-o-border-radius-bottomleft:5px 5px;
-o-border-radius-bottomright:5px 5px;
-khtml-border-radius-topleft:5px 5px;
-khtml-border-radius-topright:5px 5px;
-khtml-border-radius-bottomleft:5px 5px;
-khtml-border-radius-bottomright:5px 5px;
-ms-border-radius-topleft:5px 5px;
-ms-border-radius-topright:5px 5px;
-ms-border-radius-bottomleft:5px 5px;
-ms-border-radius-bottomright:5px 5px;
-chrome-border-radius-topleft:5px 5px;
-chrome-border-radius-topright:5px 5px;
-chrome-border-radius-bottomleft:5px 5px;
-chrome-border-radius-bottomright:5px 5px;
background-color: RoyalBlue;
border: 1px solid white;
padding: 0px;
width: 100px;
height:25px;
font-family: Arial, Helvetica, sans-serif;
color: White;
font-size: 12px;
font-weight: bold;
}
.button-masuk{
-moz-border-radius-topleft:5px 5px;
-moz-border-radius-topright:5px 5px;
-moz-border-radius-bottomleft:5px 5px;
-moz-border-radius-bottomright:5px 5px;
-webkit-border-radius-topleft:5px 5px;
-webkit-border-radius-topright:5px 5px;
-webkit-border-radius-bottomleft:5px 5px;
-webkit-border-radius-bottomright:5px 5px;
-o-border-radius-topleft:5px 5px;
-o-border-radius-topright:5px 5px;
-o-border-radius-bottomleft:5px 5px;
-o-border-radius-bottomright:5px 5px;
-khtml-border-radius-topleft:5px 5px;
-khtml-border-radius-topright:5px 5px;
-khtml-border-radius-bottomleft:5px 5px;
-khtml-border-radius-bottomright:5px 5px;
-ms-border-radius-topleft:5px 5px;
-ms-border-radius-topright:5px 5px;
-ms-border-radius-bottomleft:5px 5px;
-ms-border-radius-bottomright:5px 5px;
-chrome-border-radius-topleft:5px 5px;
-chrome-border-radius-topright:5px 5px;
-chrome-border-radius-bottomleft:5px 5px;
-chrome-border-radius-bottomright:5px 5px;
background-color: RoyalBlue;
border: 1px solid white;
padding: 0px;
width: 50px;
height:20px;
font-family: Arial, Helvetica, sans-serif;
color: White;
font-size: 11px;
font-weight: bold;
}
-->
</style>
</head>
<body>
<div class="header">
<img src="itwi.png" align="left"/>
<form action="" method="post">
<table border=0 align="right">
<tr>
<td><span class="font6">E-mail :</span></td>
<td>
<span class="font6">Password :</span></td>
<tr><td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td><input type="submit" value="Masuk"
class="button-masuk"/></td>
</tr>
</tr>
<tr>
<td>
<input type="checkbox">
<span class="font7">Biarkan saya tetap masuk</span>
</td>
<td>
<span class="font7"><u>Lupa kata sandi Anda?</u></span>
</td>
</tr>
</table>
</div>
<div class="content">
<img src="twice.png" align="left"/>
<form action="" method="post" >
<div class="group">
<h1><span class="font">Mendaftar</span></h1>
<h4><span class="font8">Gratis, sampai kapanpun</span></h6>
</div> <br/>
<br/>
<br/>
<br/><br/>
<hr align="right" width="410" color="RoyalBlue"/>
<div class="tabel">
<table border=0 align="right">
<tr>
<td><span class="font2">Nama Depan</span></span></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span class="font2">Nama Belakang</span></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span class="font2">E-mail Anda</span></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span class="font2">Masukkan Ulang E-mail
      </span></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><span class="font2">Kata Sandi Baru</span></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span class="font2">Saya Seorang</span></td>
<td>
<select name="Jenis Kelamin"/>
<option>Pria</option>
<option>Wanita</option></select>
</td>
</tr>
<tr>
<td><span class="font2">Tanggal Lahir</span></td>
<td>
<select name="Tanggal"/>
<option>01</option><option>02</option><option>03</option>
<option>04</option><option>05</option><option>06</option>
<option>07</option><option>08</option><option>09</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="Bulan"/>
<option>Jan</option><option>Feb</option><option>Mar</option>
<option>Apr</option><option>Mei</option><option>Jun</option>
<option>Jul</option><option>Agu</option><option>Sep</option>
<option>Okt</option><option>Nov</option><option>Des</option>
</select>
<select name="Tahun"/>
<option>1993</option><option>1992</option><option>1991</option><option>1990</option><option>1989</option>
<option>1988</option><option>1987</option><option>1986</option><option>1985</option><option>1984</option>
<option>1983</option><option>1982</option><option>1981</option><option>1980</option><option>1979</option>
<option>1978</option><option>1977</option><option>1976</option><option>1975</option><option>1974</option>
<option>1973</option><option>1972</option><option>1971</option><option>1970</option><option>1969</option>
<option>1968</option><option>1967</option><option>1966</option><option>1965</option><option>1964</option>
<option>1963</option><option>1962</option><option>1961</option><option>1960</option><option>...</option>
</select>
</td>
</tr>
<tr>
<td><td>
<h6><span class="font8"><u>Mengapa saya perlu mengisinya?
</u></span></h6></td></td>
</tr>
<tr>
<td><td>
<input type="submit" value="Mendaftar" class="button-daftar"/>
</td></td>
</tr>
</table>
</div>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<hr align="right" width="410" color="RoyalBlue"/>
<div class="group">
<tr align="right"><span class="font3">Buat halaman</span>
<span class="font4">untuk selebritis, grup musik, atau bisnis
</span></tr>
</div>
</div>
<div class="footer">
<span class="font6">
Face-mu © 2011 - Created by Dini
</span>
</div>
</body>
</html>
public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<title>Selamat Datang di Tut-Twice</title>
<link rel="shortcut icon" href="twc.png"/>
<style type="text/css">
<!--
.header{
background-color:RoyalBlue;
padding: 15px;
height: 55px;
}
.content{
background-image:url(bg.jpg);
padding: 15px;
height: 457px;
}
.footer{
background-color:RoyalBlue;
padding: 1px;
height: 25px;
}
.tabel{
padding-top:5px;
margin-right:45px;
float:right;
width:450px;
}
.font{
font-family: Arial, Helvetica, sans-serif;
color: RoyalBlue;
font-stretch:ultra;
}
.font2{
font-family: Arial, Helvetica, sans-serif;
color: RoyalBlue;
font-size: 12px;
}
.font3{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: RoyalBlue;
font-weight: bold;
}
.font4{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
.font5{
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: RoyalBlue;
font-weight: bold;
}
.font6{
font-family: Arial, Helvetica, sans-serif;
color: White;
font-size: 12px;
}
.font7{
font-family: Arial, Helvetica, sans-serif;
color: White;
font-size: 11px;
}
.font8{
font-family: Arial Unicode MS;
color: RoyalBlue;
}
.group{
float:right;
width:320px;
height:40px;
}
.button-daftar{
-moz-border-radius-topleft:5px 5px;
-moz-border-radius-topright:5px 5px;
-moz-border-radius-bottomleft:5px 5px;
-moz-border-radius-bottomright:5px 5px;
-webkit-border-radius-topleft:5px 5px;
-webkit-border-radius-topright:5px 5px;
-webkit-border-radius-bottomleft:5px 5px;
-webkit-border-radius-bottomright:5px 5px;
-o-border-radius-topleft:5px 5px;
-o-border-radius-topright:5px 5px;
-o-border-radius-bottomleft:5px 5px;
-o-border-radius-bottomright:5px 5px;
-khtml-border-radius-topleft:5px 5px;
-khtml-border-radius-topright:5px 5px;
-khtml-border-radius-bottomleft:5px 5px;
-khtml-border-radius-bottomright:5px 5px;
-ms-border-radius-topleft:5px 5px;
-ms-border-radius-topright:5px 5px;
-ms-border-radius-bottomleft:5px 5px;
-ms-border-radius-bottomright:5px 5px;
-chrome-border-radius-topleft:5px 5px;
-chrome-border-radius-topright:5px 5px;
-chrome-border-radius-bottomleft:5px 5px;
-chrome-border-radius-bottomright:5px 5px;
background-color: RoyalBlue;
border: 1px solid white;
padding: 0px;
width: 100px;
height:25px;
font-family: Arial, Helvetica, sans-serif;
color: White;
font-size: 12px;
font-weight: bold;
}
.button-masuk{
-moz-border-radius-topleft:5px 5px;
-moz-border-radius-topright:5px 5px;
-moz-border-radius-bottomleft:5px 5px;
-moz-border-radius-bottomright:5px 5px;
-webkit-border-radius-topleft:5px 5px;
-webkit-border-radius-topright:5px 5px;
-webkit-border-radius-bottomleft:5px 5px;
-webkit-border-radius-bottomright:5px 5px;
-o-border-radius-topleft:5px 5px;
-o-border-radius-topright:5px 5px;
-o-border-radius-bottomleft:5px 5px;
-o-border-radius-bottomright:5px 5px;
-khtml-border-radius-topleft:5px 5px;
-khtml-border-radius-topright:5px 5px;
-khtml-border-radius-bottomleft:5px 5px;
-khtml-border-radius-bottomright:5px 5px;
-ms-border-radius-topleft:5px 5px;
-ms-border-radius-topright:5px 5px;
-ms-border-radius-bottomleft:5px 5px;
-ms-border-radius-bottomright:5px 5px;
-chrome-border-radius-topleft:5px 5px;
-chrome-border-radius-topright:5px 5px;
-chrome-border-radius-bottomleft:5px 5px;
-chrome-border-radius-bottomright:5px 5px;
background-color: RoyalBlue;
border: 1px solid white;
padding: 0px;
width: 50px;
height:20px;
font-family: Arial, Helvetica, sans-serif;
color: White;
font-size: 11px;
font-weight: bold;
}
-->
</style>
</head>
<body>
<div class="header">
<img src="itwi.png" align="left"/>
<form action="" method="post">
<table border=0 align="right">
<tr>
<td><span class="font6">E-mail :</span></td>
<td>
<span class="font6">Password :</span></td>
<tr><td>
<input type="text"/>
</td>
<td>
<input type="text"/>
</td>
<td><input type="submit" value="Masuk"
class="button-masuk"/></td>
</tr>
</tr>
<tr>
<td>
<input type="checkbox">
<span class="font7">Biarkan saya tetap masuk</span>
</td>
<td>
<span class="font7"><u>Lupa kata sandi Anda?</u></span>
</td>
</tr>
</table>
</div>
<div class="content">
<img src="twice.png" align="left"/>
<form action="" method="post" >
<div class="group">
<h1><span class="font">Mendaftar</span></h1>
<h4><span class="font8">Gratis, sampai kapanpun</span></h6>
</div> <br/>
<br/>
<br/>
<br/><br/>
<hr align="right" width="410" color="RoyalBlue"/>
<div class="tabel">
<table border=0 align="right">
<tr>
<td><span class="font2">Nama Depan</span></span></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span class="font2">Nama Belakang</span></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span class="font2">E-mail Anda</span></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span class="font2">Masukkan Ulang E-mail
      </span></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><span class="font2">Kata Sandi Baru</span></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><span class="font2">Saya Seorang</span></td>
<td>
<select name="Jenis Kelamin"/>
<option>Pria</option>
<option>Wanita</option></select>
</td>
</tr>
<tr>
<td><span class="font2">Tanggal Lahir</span></td>
<td>
<select name="Tanggal"/>
<option>01</option><option>02</option><option>03</option>
<option>04</option><option>05</option><option>06</option>
<option>07</option><option>08</option><option>09</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="Bulan"/>
<option>Jan</option><option>Feb</option><option>Mar</option>
<option>Apr</option><option>Mei</option><option>Jun</option>
<option>Jul</option><option>Agu</option><option>Sep</option>
<option>Okt</option><option>Nov</option><option>Des</option>
</select>
<select name="Tahun"/>
<option>1993</option><option>1992</option><option>1991</option><option>1990</option><option>1989</option>
<option>1988</option><option>1987</option><option>1986</option><option>1985</option><option>1984</option>
<option>1983</option><option>1982</option><option>1981</option><option>1980</option><option>1979</option>
<option>1978</option><option>1977</option><option>1976</option><option>1975</option><option>1974</option>
<option>1973</option><option>1972</option><option>1971</option><option>1970</option><option>1969</option>
<option>1968</option><option>1967</option><option>1966</option><option>1965</option><option>1964</option>
<option>1963</option><option>1962</option><option>1961</option><option>1960</option><option>...</option>
</select>
</td>
</tr>
<tr>
<td><td>
<h6><span class="font8"><u>Mengapa saya perlu mengisinya?
</u></span></h6></td></td>
</tr>
<tr>
<td><td>
<input type="submit" value="Mendaftar" class="button-daftar"/>
</td></td>
</tr>
</table>
</div>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<hr align="right" width="410" color="RoyalBlue"/>
<div class="group">
<tr align="right"><span class="font3">Buat halaman</span>
<span class="font4">untuk selebritis, grup musik, atau bisnis
</span></tr>
</div>
</div>
<div class="footer">
<span class="font6">
Face-mu © 2011 - Created by Dini
</span>
</div>
</body>
</html>
woooow bnyak banged yah??
ya gitu deh
selamat mencoba buat yang ingin belajar
sekian dulu postinganku kali ini, jumpa lain waktu yah...
hehehehehe
Wassalamu'alaikum.......
0 koment:
Posting Komentar