Selasa, 22 Februari 2011

script mystyle.css tugas rumah modul 4 desain web css. dwi sagitta tjipta. 209533421964

/* CSS Document */
body{
margin:10px auto;
width:750px;
}

header,nav,section,footer{
display:block;
border:thin solid blue;
}

header{
height:100px;
background: url(bg1.jpg);
padding-top:10px;
padding-left:10px;

}

nav{
margin-left:auto;
background:url(bendera-indonesia.jpg);
height:40px;
}

section{
margin-left:auto
width:500;
height:800px;
background:url(batik.jpg)
}

footer{
clear:both;
height:40px;
padding-left:100px;
padding-right:200px;
background: url(RN-2x2-2s-Squeel_motif_8-0_0-3g.png)
}

article{
border:thick dashed blue;
width:450px;
height:750px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
margin-top:10px;
float:left;
}

aside{
border:thick dashed red;
width:200px;
height:300px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
margin-top:10px;
float:right;
background:#99CC00;
}

search{
float:left;
font-family:sans-serif;
font-size:16px;
font-style:oblique;
font-weight:400;
border: thin solid #CCCC00;
background-color: #CCFFCC;
padding:1px;
}

home{
font-family:Arial;
color:#FFFFFF;
border:thin solid #99CC00;
background-color: #6633FF;
float:right;
margin-left:5px;
margin-right:5px;
padding:5px;
}


home2{
font-family:Arial;
color:#FFFFFF;
border:thin solid #00CC99;
background-color: #336699;
float:right;
margin-left:5px;
margin-right:5px;
padding:5px;
}

event{
border: thin solid #003399;
background:url(184_1221_457_Hello%20Kitty%20200x200.jpg);
font-family:arial;
font-style:oblique;
font-weight:600;
width:250px;
height:430px;
float: right;
margin-right:10px;
}

script html tugas rumah modul 4 desain web css. dwi sagitta tjipta. 209533421964

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>desain layout sederhana html5</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
<link rel="stylesheet" href="bgimage.css" type="text/css" />
</head>

<body>
<header>
<img src="logo um copy transparant 600px.png" width="100px" height="100px" />
<img src="sensuspenduduk.png" width="333" height="100px" />

</header>

<nav>
<search>
<form>
<table>
<tr>
<td> search</td>
<td><input type="text" /></td>
</tr>
</table>
</form>
</search>
<home>
downloads
</home>

<home>
tips & trick
</home>

<home>
tutorial
</home>

<home>
news & media
</home>

<home>
home
</home>

</nav>

<section>

<article>

<div id="bg1x">
</div>
</article>
<aside>
aside
<br/>KAMI mhasiswa dan segenap jajaran:
<br/>Tukang portal
<br/>Tukang oncom
<br/>Tukang gorengan
<br/>Tukang bakso
<br/>Tukang pompa
<br/>Tukang jahit
<br/>Tukang palak
<br/>Tukang gali kubur
<br/>Dokter
<br/>dan Seluruh indonesia
<br/>MENYUKAI STATUS Anda!!!!!
</aside>

<event>
event
<ul>
<li><a href="cssfinal.html" >ketika aq belajar CSS</a></li>
<li><a href="csstugas.html">ketika aq ingin membuat lingkaran</a></li>
<li><a href="css9.html">macam macam list</a></li>
<li>nama gadis pemilik foto ini adalah : nike</li>
<li>dia adlah seorang mahasiswa</li>
<li>dia cantik</li>
</ul>
</event>
</section>

<footer>
<home2>
downloads
</home2>

<home2>
tips & trick
</home2>

<home2>
tutorial
</home2>

<home2>
news & media
</home2>

<home2>
home
</home2>
</footer>
</body>
</html>

print screen tugas rumah modul 4. dwi sagitta tjipta 209533421964 off C

Selasa, 15 Februari 2011

script tugas rumah modul 3 css, dwi sagitta tjipta 209533421964 off C

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>embeded style</title>
<style type="text/css">
 <!--
.pertama {
background-color:blue;
padding: 15px;
height: 80px;
}
</style>
<style type="text/css">
 <!--
.kedua {
background-color:blue;
padding: 15px;
height: 20px;
}
</style>
<style type="text/css">
<!--
.hkedua{
font-size:10px;
font-family:sans-serif;
color:#FFFFFF;
}
-->
</style>
<style type="text/css">
<!--
.huruf{
color:#FFFFFF;
font-family:sans-serif;
font-size:18px;
font-style:normal;
font-stretch: ultra-expanded;
font-weight:bolder
}
-->
</style>
<style type="text/css">
<!--
.ketiga{
color: #FFFFFF;
font-family:sans-serif;
font-size:15px;
font-style:normal;
font-stretch:ultra-expanded;
float:right;
}
-->
</style>
<style type="text/css">
<!--
.prem{
padding-right:150px;
height:1px;
float:right;
}
-->
</style>
<style type="text/css">
<!--
.prem3{
float:left;
}
-->
</style>
<style type="text/css">
<!--
.prem2{
padding:100px;
}
-->
</style>
<style type="text/css">
<!--
.prem4{
background-image:url(bg.jpg);
}
-->
</style>
</head>
<body >
<div class="pertama">
<img src="facemu.png" />
<form class="ketiga">
<table border=0 >
<tr></tr>
<tr>
<td>username</td>
<td>password</td>
</tr>
<tr>
<td><input type="text" /></td>
<td><input type="password" /></td>
</tr>
<tr>
<td>
<input type="submit" value="masukin mas..."/>
</td>
</tr>
</table>
</form>
</div>
<div class="prem4">
<img src="gbr.png" />
<form class="prem">
<form action="" method="post" >
<h1>mendaftar kapan ajjach,.. pasti heemaaatt...</h1>
<hr />
<h4>gratis sampai kapan pun,, walaupun dirimu sudah janda.... :</h4>
<table border=0 >
<tr>
<td>nama depan :</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>nama belakang :</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>email anda :</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>masukkan ulang email :</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>kata sandi baru :</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>saya adalah :</td>
<td><input type="radio" />bencong stasiun
<td><input type="radio" />wanita
<td><input type="radio" />waria
<td><input type="radio" />pria
<td><input type="radio" />perawan
</td>
</tr>
<tr><td class="label">Birthday:</td><td> <select name="birthday_month" id="birthday_month" onchange="editor_date_month_change(this, 'birthday_day','birthday_year');" autocomplete="off"><option value="-1">Month:</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select> <select name="birthday_day" id="birthday_day"  autocomplete="off"><option value="-1">Day:</option><option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="birthday_year" id="birthday_year" autocomplete="off"><option value="-1">Year:</option><option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
<option value="1904">1904</option>
<option value="1903">1903</option>
<option value="1902">1902</option>
<option value="1901">1901</option>
<option value="1900">1900</option>
</select></td></tr>
<tr>
<td>
<input type="submit" value="whokey"/>
<input type="submit" value="kancel"/>
</td>
</tr>
</table>
</form>
</form>
<marquee><p>laptop kacer,, sahabat upin ipin</p></marquee>
</div>
<div class="kedua">
<p class="hkedua">
Face-mu @2011-attigas inc.
yang di suport oleh laptop kacer</p>
</div>
</body>
</html>

print screen tugas rumah modul 3. dwi sagitta tjipta 209533421964 off C

Selasa, 08 Februari 2011

link screen shot untuk tugas di modul 2

http://i1210.photobucket.com/albums/cc415/shaniladwi/w6.jpg

tugas rumah modul 2. disusun oleh : Dwi Sagitta Tjipta 209533421964 Off:C

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Grafik Berbasis tabel</title>
</head>
<body background="Foto0515.jpg">
<blink><font color=”Blue” face=”arial” size=”5?>Grafik Berbasis Tabel 1 </font></blink>
<table width=”561? height=”241? border=0>
<tr>
<td colspan=”7? style=”border-top:#000000 solid;border-bottom:#000000 solid;”><b>
<div align=”center”>Perusahaan</div></td>
<td colspan=”7? style=”border-top:#000000 solid;border-bottom:#000000 solid;”><b>
<div align=”center”>Pendapatan</div></td>
</tr>
<tr >
<!–&nbsp;–>
<td width=”172? bgcolor=”red”>Angin Reebot Ltd </td>
<td width=”27?></td>
<td width=”31?></td>
<td width=”25?></td>
<td width=”33?></td>
<td width=”16?></td>
<td width=”13?></td>
<td colspan=”6? bgcolor=”#0000FF”></td>
<td width=”17?>+150%</td>
</tr>
<tr>
<td bgcolor=”red”>Command Prompt, Inc </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan=”4? bgcolor=”#00FFFF”></td>
<td width=”16?>+55%</td>
<td width=”16?></td>
<td></td>
</tr>
<tr>
<td bgcolor=”red”>Hibernate Ltd </td>
<td></td>
<td></td>
<td></td>
<td>-23%</td>
<td colspan=”2? bgcolor=”#FFFF00?></td>
<td width=”34?></td>
<td width=”16?></td>
<td width=”16?></td>
<td width=”16?></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td bgcolor=”red”>Shutdown Ltd </td>
<td></td>
<td>-75%</td>
<td colspan=”4? bgcolor=”#FF0000?></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan=”14? style=”border-top:#000000 solid”></td>
</tr>
</table>
</body>
</html>


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Grafik Berbasis tabel 2</title>
</head>

<body>
<table width=”470? height=”401? border=5>
<tr>
<td colspan=”8? style=”border-bottom:#000000 solid;”><p align=”center”><font color=”black” face=”TIME NEW ROMAN” siz”4?><strong>PERBANDINGAN FITUR</strong></font></td>
</tr>
<tr>
<td width=”31?align=”center”><strong>No</strong></td>
<td width=”0? rowspan=”10? style=”border-left:#000000 solid thin;”>&nbsp;</td>
<td width=”208? align=”center”><strong>Fitur</strong></td>
<td rowspan=”10? style=”border-left:#000000 solid thin;padding-left:-5px;” width=”0?>&nbsp;</td>
<td width=”92? align=”center”><strong>Enterprise</strong></td>
<td width=”0? rowspan=”10? style=”border-left:#000000 solid thin;”>&nbsp;</td>
<td width=”0?align=”center”><strong>Pro</strong></td>
<td width=”0?align=”center”><strong>Free</strong></td>
</tr>
<tr>
<td colspan=”8? style=”border-top:#000000 solid thin;”></td>
</tr>
<tr>
<td align=”center”>1</td>
<td>Garansi seumur hidup </td>
<td align=”center”>X</td>
<td align=”center”>-</td>
<td align=”center”>-</td>
</tr>
<tr>
<td align=”center”>2</td>
<td>Multiuser</td>
<td align=”center”>X</td>
<td align=”center”>-</td>
<td align=”center”>-</td>
</tr>
<tr>
<td align=”center”>3</td>
<td>Update otomatis </td>
<td align=”center”>X</td>
<td align=”center”>X</td>
<td align=”center”>-</td>
</tr>
<tr>
<td align=”center”>4</td>
<td>Cetak Laporan </td>
<td align=”center”>X</td>
<td align=”center”>X</td>
<td align=”center”>-</td>
</tr>
<tr>
<td align=”center”>5</td>
<td>Notifikasi error </td>
<td align=”center”>X</td>
<td align=”center”>X</td>
<td align=”center”>X</td>
</tr>
<tr>
<td colspan=”8? style=”border-top:#000000 solid thin;”></td>
</tr>
<tr>
<td align=”center”>6</td>
<td>Ubah tema </td>
<td align=”center”>X</td>
<td align=”center”>X</td>
<td align=”center”>X</td>
</tr>
<tr>
<td align=”center”>7</td>
<td>Try ikon</td>
<td align=”center”>X</td>
<td align=”center”>X</td>
<td align=”center”>X</td>
</tr>
<tr>
<td colspan=”8? style=”border-top:#000000 solid thin;”></td>
</tr>
</table>

</body>
</html>

studi kasus modul 1 web, disusun : Dwi Sagitta Tjipta 209533421964

<!DECTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">


<html>
<body background = "Foto0514.jpg" >
<h1 align = "center">hot sites yang penting happy...</h1>
<hr />
<h3>
<br/>nie situs isinya masi mewbie bangetttsss
<br/>lha yang bikin juga masi di bawah ratarata
<br/>harap maklum yach...
<br/>
<br/>
<br/>kalo berkenan lihatlihat sejenak..
<br/>silahkan kelikkelik link di bawah ini...
<hr /></h3>

<p align = "center"><a href="link1.html">This is a link to Page 1</a></p>
<h3 align = "center">kebetulan ini link untuk lihat fotofoto lucu kelas Q...</h3>
<hr />
<p align = "center"><a href="http://www.google.com">This is a link to mbah dukun sites</a></p>
<h3 align = "center">yang ini ntuk mbukak mbah google..</h3>
<h3 align = "center">kali aja pengen curhat apa.ta.apa gitu</h3>
<hr />
<p align = "center"><a href="http://www.facebook.com">This is a direct link to surga dunia</a></p>
<h3 align = "center">yang ini untuk yang lagi kangen ma pujaan hati</h3>
<h3 align = "center">ato yang pengen melihat indahnya makhluk ciptaan Tuhan</h3>
<hr />
<p align = "center"><a href="link21.html">This is a link to tugas praktikum 1</a></p>
<h3 align = "center">kebetulan ini link untuk lihat hasil karya ketiga tugas web Q...</h3>
<hr />
<p align = "center"><a href="link3.html">This is a link to tugas praktikum 2</a></p>
<h3 align = "center">kebetulan ini link untuk lihat hasil karya kedua tugas web Q...</h3>
<hr />
<p align = "center"><a href="link34.html">This is a link to studi kasus</a></p>
<h3 align = "center">kebetulan ini link untuk lihat hasil karya ketiga tugas web Q...</h3>
<hr />
</body>
</html>