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>


Tidak ada komentar:

Posting Komentar