Selasa, 22 Februari 2011

Tugas Praktikum 4

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

<head>
<title>mbah</title>
<style type="text/css">
    body{
    margin : 10px auto;
    width: 1000px;
    float: center;
    }

    header,logo,teknik,home,newsmedia,tutorial,search,tipstricks,
    downloads,nav,article,section,footer,aside,aside2{
    display:block;
    border: 1px;}

    header {
        width: 1000px;
        height: 100px;
        margin-top:10px;
        border: 1px;
        background-color:#1589ff;}
   
    logo{}
   
    teknik{
    margin-left:100px;
    margin-top:-60px;}
       
    nav{
    width:1000px;
    height:35px;
    border:1px solid green;
    background-color:#3bb9ff;
    }
    search{
    margin-left:10px;
    margin-top:10px;
    }
   
    home{
    float:right;
    margin-left:10px;
    margin-top:10px;
    border:0px solid green;
    background-color:#3090c7;
    }
   
    newsmedia{
    float:right;
    margin-left:10px;
    margin-top:10px;
    border:0px solid green;
    background-color:#3090c7;
    }

    tutorial{
    float:right;
    margin-left:10px;
    margin-top:10px;
    border:0px solid green;
    background-color:#3090c7;
    }
   
    tipstricks{
    float:right;
    margin-left:10px;
    margin-top:10px;
    border:0px solid green;
    background-color:#3090c7;
    }
   
    downloads{
    float:right;
    margin-left:10px;
    margin-top:10px;
    border:0px solid green;
    background-color:#3090c7;
    }

    section{
    width:1000px;
    height:450px;
    display:block;
    border:1px solid black;
    }
   
    article {
    width:250px;
    height:350px;
    border: 10px solid black;
    }

    aside{
    margin-top:-340px;
    margin-left:300px;
    width :650px;
    height :200px;
    border : 0px dashed red;
    }
   
    aside2{
    margin-top:40px;
    margin-left:300px;
    width :650px;
    height :150px;
    border : 0px dashed red;
    background-color:#3bb9ff;
    }

    footer{
    width:1000px;
    height:30px;
    display:block;
    border:0px solid red;
    background-color:#1589ff;
    }
</style>
</head>

<body>
<header>
    <logo><img src="UM2.jpg"></logo>
    <teknik><FONT FACE="Tahoma" SIZE="20" color=white><b>TEKNIK ELEKTRO</b></font></teknik>
</header>

<nav>
    <downloads><a href=""><font color=white>Downloads</font></a></downloads>
    <tipstricks><a href=""><font color=white>Tips&Tricks</font></a></tipstricks>
    <tutorial><a href=""><font color=white>tutorials</font></a></tutorial>
    <newsmedia><a href=""><font color=white>News&Media</font></a></newsmedia>
    <home><a href=""><font color=white>Home</font></a></home>
   
    <search>
            <label><font size = "gen.jpg"><b>Search</b></label></font>
            <input type="text" name="email">
        </search>
   
   
   
   
</nav>

<section>
    <article>
        <img src="gen.jpg" height=350 width=250></article>
    <aside>Generator listrik adalah sebuah alat yang memproduksi energi listrik dari sumber energi mekanikal, biasanya dengan menggunakan induksi elektromagnetik. Proses ini dikenal sebagai pembangkit listrik. Walau generator dan motor punya banyak kesamaan, tapi motor adalah alat yang mengubah energi listrik menjadi energi mekanik. Generator mendorong muatan listrik untuk bergerak melalui sebuah sirkuit listrik eksternal, tapi generator tidak menciptakan listrik yang sudah ada di dalam kabel lilitannya. Hal ini bisa dianalogikan dengan sebuah pompa air, yang menciptakan aliran air tapi tidak menciptakan air di dalamnya. Sumber enegi mekanik bisa berupa resiprokat maupun turbin mesin uap, air yang jatuh melakui sebuah turbin maupun kincir air, mesin pembakaran dalam, turbin angin, engkol tangan, energi surya atau matahari, udara yang dimampatkan, atau apapun sumber energi mekanik yang lain. (source: wikipedia)</aside>
    <aside2>
    <b>Terlaris Dibaca</b><hr>
        <ul>
            <li><a href="">Lampu Jalan Tenaga Surya</a></li>
            <li><a href="">PLTA</a></li>
            <li><a href="">Robot Pembersih</a></li></ul>
    </aside2>
</section>


<footer><center>
        | <a href="">Home</a>| <a href="">News&Media</a> | <a href="">Tutorials</a>
        | <a href="">Tips&Tricks</a> | <a href="">Downloads</a> |</center>
</footer>

</body>
</html>


Selasa, 15 Februari 2011

Tugas Modul 3

<!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 Face-mu - Masuk, Daftar, atau Pelajari Selengkapnya</title>
<link rel="Shortcut Icon" href="icon.png">
<style type="text/css">
<!--
.utama {
background-image:url(bg.jpg);
padding: 15px;
height: 470px;}

.utama1 {
position:absolute;
left:250px;
top:100px;
padding: 15px;
height: 300px;
width: 450px;
}

.utama2 {
position:absolute;
left:760px;
top:100px;
padding: 15px;
height: 450px;
width: 450px;
}

.utama2a {
position:absolute;
top:380px;
height: 50px;
width: 450px;
}

.utama2b {
position:absolute;
top:75px;
padding: 15px;
height: 250px;
width: 100px;
}

.utama2c {
line-height: 11px;
position:absolute;
top:75px;
left:130px;
padding: 15px;
height: 250px;
width: 250px;
}

.utama1a {
background-image:url(file:///C:/wamp/www/wamphtml/BFOd681AL3h.png);
position:absolute;
top:200px;
padding: 15px;
height: 100px;
width: 450px;
}

.logo {
position:absolute;
left:250px;
top:30px;
padding: 15px;
height: 28px;
width: 150px;
}

.katasandi {
position:absolute;
right:100px;
top:10px;
padding: 15px;
height: 28px;
width: 300px;
}

.mendaftar {
    background-color: "blue";
    position:absolute;
    top:268px;
    padding: 10px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-bottomright: 6px;  
    -moz-box-shadow: 0px 2px 2px black;
    border: 1px groove white;
    height: 10px;
    width: 100px;  
  }

.masuk {
    background-color: #6495ED;
    position:absolute;
    top:40px;
    right:200px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 2px;
    -moz-border-radius-bottomright: 2px;  
    -moz-box-shadow: 0px 2px 2px black;
    border: 1px groove white;
    height: 18px;
    width: 50px;  
  }

.email {
position:absolute;
top:10px;
right:400px;
padding: 15px;
height: 28px;
width: 170px;
}

.kepala {
background-color:#3b5998;
padding: 15px;
height: 50px;
}
.bawah {
background-color:#3b5998;
padding: 0.1cm;
height: 17px;
}
-->
</style>
</head>
<body>

<div class="kepala">
<img src="facemu.png" />
<div class="logo">
</div>
<div class="email">
<FONT FACE="Tahoma" SIZE="2" color="white">
email:</br>
<input type="text" name="nama"></br>
<input type="checkbox" name="msk"><FONT FACE="Tahoma" SIZE="1" color="white"><SUP>Biarkan saya tetap masuk</sup></font></font><br/></div>
<div class="katasandi">
<FONT FACE="Tahoma" SIZE="2" color="white">
kata sandi:</br>
<input type="text" name="pasword"></br>
<FONT FACE="Tahoma" SIZE="1" color="white">Lupa kata sandi Anda?</font></font></div>
<div class="masuk" align="center">
<FONT FACE="Tahoma" SIZE="2" color="black"><b style="text-shadow: black 0px 0px 3px; color:white;">Masuk</b></font>
</div>
</div>

<div class="utama">

<div class="utama1">
<FONT FACE="Tahoma" SIZE="4" color=#6495ED><b>FACE-MU management production mempersembahkan</b></font>
<img src="2.jpg" align = "left" width="500" height= "300"/>
<div class="utama1a">
</div></div>
<div class="utama2" >
<FONT FACE="Tahoma" SIZE="4" color="blue"><b>Mendaftar</b></font></br>
<FONT FACE="Tahoma" SIZE="3" color="blue">Gratis, sampai kapanpun</font><hr color="blue"/><br/>
<div class="utama2b" align="right">
<FONT FACE="Tahoma" SIZE="2" color="blue">
Nama Depan:    </br></br>
Nama Belakang:    </br></br>
Email Anda:    </br></br>
Masukkan Ulang Email:</br></br>  
Kata sandi Baru:    </br></br>
Saya seorang:    </br></br>
Tanggal Lahir:</br></br></font>
</div>
<div class="utama2c" >
<input type="text" name="namad"></br></br>
<input type="text" name="namab"></br></br>
<input type="text" name="email"></br></br>
<input type="text" name="ktsandi"></br></br></br>
<input type="text" name="ktsandibr"></br></br>
<select name="pilihan"> <option value="Pria">Pria</option> <option value="Wanita">Wanita</option> </select></br></br>
<select name="tgl"> <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="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="bln"> <option value="januari">januari</option><option value="februari">februari</option><option value="maret">maret</option><option value="april">april</option><option value="mei">mei</option><option value="juni">juni</option><option value="juli">juli</option><option value="agustus">agustus</option><option value="septembet">September</option><option value="oktober">oktober</option><option value="nopember">nopember</option><option value="desember">desember</option> </select>
<select name="thn"> <option value="1990">1990</option><option value="1991">1991</option><option value="1992">1992</option><option value="1993">1993</option><option value="1994">1994</option><option value="1995">1995</option> </select></br>
<FONT FACE="Tahoma" SIZE="1" color="blue">Mengapa saya perlu mengisinya?</font></br>
<div class="mendaftar" align="center" valign="middle">
<FONT FACE="Tahoma" SIZE="3" color="blue"><b style="text-shadow: black 0px 0px 3px; color:white;">Mendaftar</b></font>
</div>
</div>
<div class="utama2a" align="center" >
<hr color="blue"/>
<FONT FACE="Tahoma" SIZE="1" color="blue">Buat halaman </font>
<FONT FACE="Tahoma" SIZE="1" color="black">untuk selebritis, grup music atau bisnis</font>
</div>
</div>
</div>
<div class="bawah">
<FONT FACE="Tahoma" SIZE="2" color="black">&nbsp;&nbsp;&nbsp;Face-mu &copy; 2011, andyjefri corporation</font>
</div>
</body>
</html>