Skip to content

tgs modul 4

February 26, 2011

 

pd index.html:

<!–DOCTYPE html>
<head>
<span class=”hiddenSpellError” pre=””>Tugas</span> 3 Praktikum WebProg
css” href=”index.css” />
</head>
<body>
<header>
<div>
<div>
<div>

<a href=#>Home</a>|<a href=#>SiteMap</a>|<a href=#>RSS</a>|<a

href=#>Contanct</a>|<a href=#>AboutUs</a></div>
<div>Search <input type=”text”></div>
</div>
<img src=”logo.jpg” width=”50px” height=”50px”>

TEKNIK ELEKTRO

</div>
</header>
<nav>
<div>
<a href=#><div><div>Home</div></div></a>
<a href=#><div><div>News & Media</div></div></a>

<a href=#><div><div>Tutorials</div></div></a>
<a href=#><div><div>Tips & Tricks</div></div></a>
<a href=#><div><div>Downloads</div></div></a>
</div>
</nav>

<section>
<div>

<img src=”photo.jpg” width=”600px”>
<div>
<div>Lomba</div>
<ul>

  • Lomba Panjat Pinang
  • Lomba Makan Kerupuk
  • Lomba Maen Kelereng
  • Lomba Hacking
  • </ul>
    </div>

    Lorem ipsum dolor
    24 Februari 2011 – 10:01 PM

    <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a,

    porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac,

    lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam

    turpis vel lacus. In pellentesque nisl non sem.
    <a href=”#”><div>Read Mode …</a></div></div>

    Aliquam commodo
    25 Februari 2011 – 10:02 PM

    <div>
    Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet.

    Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed,

    luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.
    <a href=”#”><div>Read Mode …</a></div></div>
    </div>
    </section>

    <footer>

    <div>

    M. Zuari Antoni Arip – 100533406915

    </div>
    </footer>

    </body>

    </html>

    Pd index.css:

    body {
    margin:10px auto;
    width:750px;
    }

    header,nav,section,footer {
    display:block;
    border:0px solid red;
    background-color:#333333;
    }
    a{
    cursor:pointer;
    text-decoration:none;
    }
    a:hover{
    text-decoration:underline;
    }

    header {
    height:90px;
    margin-top:-10px;
    border:1px solid #333333;
    }
    .box-header {
    margin-top:10px;
    margin-bottom:10px;
    background-color:black;
    height:70px;
    }
    .logo-pic {
    margin-top:10px;
    margin-left:5px;
    }
    .logo-title {
    position: relative;
    left:70px;
    top: -40px;
    font-family: Helvetica;
    font-size:20px;
    font-weight:bolder;
    color:#666666;
    height: auto;
    width: 200px;
    }
    .header-rtext,.box-header a {
    color:white;
    }
    .header-link {
    margin-right:5px;
    font-family: “Courier New”;
    font-size:12px;
    }
    .header-search {
    margin-top:30px;
    padding-left:45px;
    font-family:”Courier New”;
    font-size:12px;
    }
    .input-search {
    border:0px solid #000000;
    width:135px;
    }

    nav {
    float:left;
    width:150px;
    height:400px;
    }
    .box-nav {
    margin-left:3px;
    background-color:#999999;
    height:inherit;
    }
    .menu-nav {
    margin-left:-3px;
    background-color: #666666;
    height:30px;
    border-width:3px;
    border-style:solid;
    border-color:#666666 #333333 #333333 #666666;
    font-weight:lighter;
    }
    .menu-text {
    font-family:”Verdana”;
    font-size:12px;
    font-weight:bold;
    color:#CCCCCC;
    margin-top:5px;
    margin-left:10px;
    }
    .menu-nav:hover {
    cursor:pointer;
    margin-left:0px;
    background-color: #555555;
    height:30px;
    border-width:3px;
    border-style:solid;
    border-color:#666666 #333333 #333333 #666666;
    }

    section {
    margin-left:150px;
    width:auto;
    height:400px;
    }
    .box-sect {
    background-color:#CCCCCC;
    height:inherit;
    margin-right:3px;
    }
    .subtitle {
    margin-top:5px;
    margin-left:10px;
    font-family:”Verdana”;
    font-size:16px;
    font-weight:bolder;
    color:black;
    height: auto;
    width: 200px;
    }
    .datepost {
    padding-left:10px;
    font-family:”Courier New”;
    font-size:12px;
    }
    .content {
    margin-top:5px;
    margin-left:10px;
    font-family: Verdana;
    font-size:12px;
    color:black;
    }
    .more {
    position:relative;
    color:#666666;
    font-family:”Courier New”;
    font-size:12px;
    }
    .more:hover {
    text-decoration:overline underline;
    }
    .box-rsect {
    width:200px;
    height:auto;
    margin-top:5px;
    margin-right:10px;
    padding-bottom:5px;
    background-color:#CCCCCC;
    border-width:3px;
    border-style:solid;
    border-color:#333333 #666666 #999999 #666666;
    .rsect-list ul, .rsect-list a{
    list-style-type:disc;
    color:black;
    font-family:”Courier New”;
    font-size:12px;
    }

    footer {
    clear:both;
    height:65px;
    border:1px solid #333333;
    }
    .box-footer {
    margin-top:5px;
    margin-bottom:10px;
    background-color:black;
    height:50px;
    }
    .footer-text {
    padding-top:20px;
    padding-left:275px;
    }
    .footer-text,.box-footer  a {
    color:white;
    font-family:”Courier New”;
    font-size:12px;
    }

    .rightfloat {
    float:right;
    }

    No comments yet

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s

    %d bloggers like this: