My Blog Is Not Go Blocked: Praktikum Pemrograman Berbasis Web

STUDI KASUS

css

body{
    margin:10px auto;
    width:750px;
}
header{
    height:80px;
    display:block;
    border:1px solid green;
    background-color:green;
}
nav{
    float:top;
    width:748px;
    height:30px;
    display:block;
    border:1px solid blue;
    background-color:blue;
}
section{
    width:748px;
    height:370px;
    display:block;
    border:1px solid red;
    background-color:red;
}
footer{
    clear:both;
    height:20px;
    display:block;
    border:1px solid green;
    background-color:green;
}
article{
    float:left;
    margin-top:20px;
    margin-left:20px;
    height:325px;
    width:500px;
    border:1px dashed black;
    background-color:white;
}
aside{
    float:right;
    margin-top:20px;
    margin-right:20px;
    height:325px;
    width:180px;
    border:1px dashed black;
    background-color:white;
}

html

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

<head>
    <title>Studi Kasus Modul 4</title>
    <link rel="stylesheet" href="style_sk.css" type="text/css"/>
</head>

<body>
<header>header</header>
<nav>nav</nav>
<section>
    <article>article</article>
    <aside>aside</aside>
    section
</section>
<footer>footer</footer>
</body>
</html>

Screenshot

TUGAS PRAKTIKUM

css

body{
    margin:10px auto;
    width:1100px;
    background-color:silver;
}
header{
    background-image:url(Header.jpg);
    height:80px;
    display:block;
    padding:3px;
}
nav{
    float:top;
    width:1100px;
    height:50px;
    display:block;
    background-color:#B0E0E6;
}
.button_nav{
    background-color:RoyalBlue;
    float:right;
    color:white;
    margin-left:2px;
    height:30px;
    border:1px solid RoyalBlue;
}
section{
    width:1100px;
    height:425px;
    display:block;
    background-color:#AFEEEE;
}
aside{
    float:left;
    height:418px;
    width:300px;
    border:4px solid black;
}
article{
    margin-right:9px;
    float:right;
    height:300px;
    width:782px;
    background-color:white;
}
events{
    background-color:#B0E0E6;
    float:right;
    border:1px solid blue;
    margin-right:9px;
    margin-left:1px;
    margin-top:1px;
    margin-bottom:1px;
    height:122px;
    width:780px;
}
footer{
    background-image:url(Footer.jpg);
    clear:both;
    height:43px;
    display:block;
    padding:1px;
}
.text_footer{
    color:white;
    margin:1px;
}
#logo{
    margin-top:3px;
    margin-left:50px;
    float:left;
}
#text_logo{
    margin-top:15px;
    margin-left:30px;
    float:left;
    color:white;
    font-size:40px;
    font-weight:bold;
}
#text_search{
    margin-top:15px;
    margin-left:30px;
    float:left;
    color:#0099CC;
}
#box_search{
    margin-top:15px;
    margin-left:10px;
    float:left;
}
.text_events{
    color:#0099CC;
    font-size:20px;
    font-weight:bold;
}
a{color:purple;}
li{color:#0099CC;}

html

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

<head>
    <title>Tugas Praktikum Modul 4</title>
    <link rel="shortcut icon" href="Logo UM.png"/>
    <link rel="stylesheet" href="style_tp.css" type="text/css"/>
</head>

<body>
<header>
    <div id="logo"><img src="Logo UM.png" width="73" height="73"/></div>
    <div id="text_logo">S1 PTI 2009 OFFERING C</div>
</header>
<nav>
    <div id="text_search">Search</div>
    <div id="box_search"><input type="text"/></td></div>
    <input type="submit" value="Downloads" class="button_nav"/>
    <input type="submit" value="Tips & Tricks" class="button_nav"/>
    <input type="submit" value="Tutorials" class="button_nav"/>
    <input type="submit" value="News & Media" class="button_nav"/>
    <input type="submit" value="Home" class="button_nav"/>
</nav>
<section>
    <aside>
        <img src="Gunung Baung.jpg" width="300" height="418"/>
    </aside>
    <article>
    Nama saya Hendriyanto, biasa dipanggil Hendri.<br>
    Saya berasal dari Sumenep, kabupaten paling timur pulau Madura.<br>
    Saya kuliah di Universitas Negeri Malang (UM), Fakultas Teknik,
    Jurusan Teknik Elektro, Program Studi S1 Pendidikan Teknik Informatika.
    <br><br>
    Halaman web ini adalah halaman tugas praktikum modul 4.<br>
    Text link di bawah ini tidak terhubung dengan link manapun,
    melainkan link "no action".
    </article>
    <events>
    <div class="text_events">Events:</div>
    <ul>
    <li><a href="#">Mengerjakan Tugas Kuliah</a></li>
    <li><a href="#">Nyanyi Dangdut Lawas (Bukan Koplo, Apalagi Remix)</a></li>
    <li><a href="#">Freestyle Soccer</a></li>
    <li><a href="#">Capoeira</a></li>
    </ul>
    </events>
</section>
<footer>
    <div class="text_footer" align="center">
    Home | News & Media | Tutorials | Tips & Tricks | Downloads</div>
    <div class="text_footer" align="right">
    &copy bang_hendri</div>
</footer>
</body>
</html>

Screenshot

My Blog Is Not Go Blocked

Selasa, 22 Februari 2011

Praktikum Pemrograman Berbasis Web - Modul 4

Tidak ada komentar:

Posting Komentar