Senin, 28 Februari 2011

STUDI KASUS MODUL 4

INI ADALAH CSS:

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

header,nav,section,footer{
display:block;
border:1px solid red;
}
header{
height:80px;
}

logo{
float: left;
padding-left: 750px;
padding-top: 80px;
border:1px dashed blue;


}
nav{
height:30px;
}

ul{
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position:relative;
float:left;
width: 100px;
}
li ul{
position: absolute;
top: 30px;
display: none;
}
ul li{
display: block;
text-decoration: none;
line-height: 20px;
color:#FFCC00;
padding: 5px;
background:#FFFF00;
margin: 0 2px;
}
ul li a:haver {background: #66F;}
li:hover ul,li.over ul {display:block;}

section{
height:370px;
}

#article{
float:left;
margin: 10px;
width: 200px;
height: 300px;
border:1px dashed blue;
}
#arside{
float:right;
margin: 10px;
width: 500px;
height: 300px;
border:1px dashed blue;

}

footer{
clear:both;
height:20px;
}

INI ADALAH HTML

<html>
<head>
<title>Desain layout sederhana HTML5</title>
<link rel="stylesheet" href="studikasus.css" type="text/css" />
</head>

<body>
<header>
<logo>
</logo>
</header>

<nav>

<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Profile</a>
<ul>
<li><a href="">web design</a></li>
<li><a href="">Program</a></li>
</ul>
</li>

<li><a href="">contact</a>
<ul>
<li><a href="">Home</a></li>
<li><a href="">mobile</a></li>
</ul>
</li>

<li><a href="">Galeri</a>
<ul>
<li><a href="">Program</a></li>
<li><a href="">Web</a></li>
<li><a href="">Multimedia</a></li>
</ul>
</li>
</ul>
</nav>

<section>
<div id="article">
<div>articleee
</div>
</div>
<div id="arside">
arside
</div>
<p>section
</p>
</section>

<footer>
footer
</footer>

</body>
</html>

Diposting oleh di Tidak ada komentar:

Tugas Pratikum Modul 4

 INI ADALAH CSS
  
body {
margin:5px auto;
padding:0;
font:0.72em/150% Calibri;
}

#wrapper {
margin:auto;
width:980px;
}

#header {
height:80px;
margin:0px auto;
background:#0000;
}

#header-content{
height:70px;
margin:auto;
background-image:url(../pratikum4/image/header.jpg)
}

#menu-top {
font-size:small;
height:20px;
float:right;
padding:0px 50px;
font-weight:bold;
}

#site-title h2{
float:left;
padding:0px 10px;
height:30px;
margin:20px 0px;
font:2.1em/100% 'ravie';
font-weight: bold;
}

#search {
clear:right;
float:right;
margin:20px 50px 0px auto;
height:30px;
font-weight:bold;
}

#inner {
float:left;
margin:0px;
}

#footer {
clear:both;
height:60px;
background:#FF3300;
}

#footer p {
text-align:center;
}

#sidebar {
float:left;
width:200px;
height:400px;
background-color:#FF9900;
}

#content {
float:right;
width:780px;
height:400px;
background:#FFFF00;
}

#content-top {
clear:both;
margin:auto;
width:780px;
height:140px;
background-image:url(TopBg.jpg)
}

#content-main {
float:left;
margin:auto;
width:480px;
height:240px;
}

#content-main p, h3{
padding: 10px 20px 0px 20px;
text-align:justify;
}

.style1 {
font-size:x-small;
}

#content-main hr{
width:440px;
color:#FF9900;
margin: 10px 20px 0px 20px;
}

#content-right {
float:right;
margin:10px auto;
width:260px;
border: 2px solid black;
background:#CCCC00;
}

#content-right h3{
padding: 10px 20px 0px 20px;
text-align:justify;
}

#content-right ul{
padding: 10px 20px 20px 40px;
list-style:square;
}

#leftmenu ul {
width:200px;
list-style-type:none;
padding:0;
margin:0;
}

#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left:15px;
text-decoration:none;
}

#leftmenu a {
padding: 5px 0px 5px 15px;
display:block;
background:#FF6600 no-repeat left center;
margin: 0px 0px 1px; color:#0000FF;
}

#leftmenu a:hover {
background:#FFCC99 no-repeat left center;
color:#0033FF;
}



ini adalah HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Tugas Praktikum Modul 4</title>
<link rel="stylesheet" href="praktikumModul4.css" type="text/css" />
</head>
<body bgcolor=black>
<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>

<div id="site-title">
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
</div>
</div>

<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">

</div>
<div id="content-main">
<h3>Materi Desain Header Web</h3>
<hr />
<p>
Untuk lebih jelasnya liat modul pratikum 4.

</p>
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Pembelajaran Web</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>E-mail: Jack.delphy@yahoo.co.id</b></p>
</div>
</div>
</body>
</html>









Diposting oleh di Tidak ada komentar:

Senin, 14 Februari 2011

Tugas Pratikum 3

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

<head>
<title>Keset Welcome</title>
<link rel ="shortcut icon" href="fM.jpg">
<style type="text/css">
<!--

.box1 {
float: right;
padding: 5px;
height: 100px;
}
.box2 {
float: right;
padding: 5px;
height: 100px;
}
#header{
height: 120px;
background:#fa8a1a;
}
#logo{
float: left;
padding-left: 100px;
padding-top: 20px;
}

.box3 {
}
.box4 {
width: 1300px;
height: 18px;
background: #4169E1;
text-align:left;
font-size:8px;
color:blue
}
#tengah {
float: left;
}
#kiri {
float: left;
width: 780px;
height: 380px;
}
#subkiri{
width: 300px;
height: 200px;
padding: 50px;
color: #4169E1;
}
#kanan {
float: left;
padding: 5px;
width: 370px;
height: 380px;
color: #4169E1;
}
#bottom {
clear: both;
height: 20px;
background: #4169E1;
font-size:6px;
color: #bde0e6;
}

-->
</style>
</head>

<body>
<div id="logo">
<img src="dhelok.jpg">
</div>


<div id="header">
<div class="box2">
<br><input type="button" value="Ublem">
<br>
</div>

<div class="box1">
Ojok Kondo-kondo<br><input type="text" size="25">
<br>lali tah?
</div>

<div class="box1">
Email opo HP<br><input type="text" size="25">
<br><input type="checkbox">Langsung Ublem
</div>
</div>

<form>
<div id="tengah">
<div id="kiri">
<div id="subkiri">

<font size="12">Ndelokanmu iki tok g ngarap tugas!!</font>
</div></form>
</div>
<div id="kanan">
<h2>Yang bergabung Orang Yg beriman!!</h2>
Ora Mbayar.
<hr/>
<form>
<table>
<tr><td>Jeneng Ngarep</td><td><input type="text" size="20"></td></tr>
<tr><td>Jeneng Mburi</td><td><input type="text" size="20"></td></tr>
<tr><td>Email Anda</td><td><input type="text" size="20"></td></tr>
<tr><td>Masukkan Ulang Email</td><td><input type="text" size="20"></td></tr>
<tr><td>Kata Sandi Baru</td><td><input type="text" size="20"></td></tr>
<tr><td>Saya Seorang</td><td>
<select name="kelamin">
<option value="wanita" selected>Wanita
<option value="pria">Pria
<option value="Waria">Waria
<option value="Bencong">Bencong
</select></td></tr>
</table>
</form>
<br><input type="button" value="DAFTAR">
</div>

</div>

</body>
</html>

Diposting oleh di 1 komentar:

Studi kasus modul 3

<html>
<head>
<title>Studi Kasus Modul 3</title>
<style type="text/css">
    <!--
        .lingkaran{
            display: block;
            height: 100em;
            width: 10em;
            font-weight:300;
            border: 0.2em solid #888943;
            background-color: #CACC7F;
            -moz-border-radius: 5em;
            -webkit-border-radius: 5em;
            -khtml-border-radius: 5em;
            border-radius: 5px;
            text-align: center;
        }
        .lingkaran2{
            width:100px;
            height:100px;
            border-radius:50px;
            -moz-border-radius:50px;
            -webkit-border-radius:50px;
            background:#0099FF;
            text-align:center;
            font-size:20px;
            color:#0033FF
        }
        .text-lingkaran{
            padding-top: 37px;
        }
        .border1{
            width:200px;
            text-align:center;
            padding:10px;
            background:#000000;
            color: red;
            font-weight: bold;
            -moz-border-radius: 2em 0;
            -webkit-border-top-left-radius: 30px;
            -webkit-border-bottom-right-radius: 30px;
        }
        .border2{
            font-weight: bold;
            border: 3px solid red;
        }
        .shadow {
            width: 150px;
            box-shadow: 6px 6px 8px #blue;
            -moz-box-shadow: 5px 5px 7px #111;
            -webkit-box-shadow: 6px 6px 6px #111;
        }
    -->
</style>
</head>
<body>
    <div class="lingkaran2">
        <span class="text-lingkaran">
            bunder-bunder
        </span>
    </div>
    <p>
    <div class="border1">
        border biasa sudut tidak sama
    </div>
   
    <div class="shadow">
        <p class="border2">punya bayangan
    </div>
</body>
</html>
Diposting oleh di Tidak ada komentar:

Senin, 07 Februari 2011

STUDI KASUS





Grafik Berbasis Tabel Pengelompokan











PERBANDINGAN FITUR
NO Fitur Enterprise Pro Free
1Garansi Seumur HidupX--
2MultiuserX--
3Update otomatisXX-
4Cetak LaporanXX-
5Notifikasi ErrorXXX
6Ubah temaXXX
7Try ikonXXX

Diposting oleh di Tidak ada komentar:

Tugas Pratikum 2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/frameset.dtd">
<html lang="en">

<head>
<title> Grafik Berbasis Tabel Pengelompokan </title>
</head>

<body>
<table border="1" cellspacing=0 frame="hsides" rules="groups">
<caption>PERBANDINGAN FITUR</caption>
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center" colspan=2>
<thead valign="middle">
<tr>
<th width=40>NO</th>
<th width=200>Fitur</th>
<th width=100>Enterprise</th>
<th width=50>Pro</th>
<th width=50>Free</th>
</tr>
<tbody>
<tr><td>1<td>Garansi Seumur Hidup<td align="center">X<td align="center">-<td align="center">-</tr>
<tr><td>2<td>Multiuser<td align="center">X<td align="center">-<td align="center">-</tr>
<tr><td>3<td>Update otomatis<td align="center">X<td align="center">X<td align="center">-</tr>
<tr><td>4<td>Cetak Laporan<td align="center">X<td align="center">X<td align="center">-</tr>
<tr><td>5<td>Notifikasi Error<td align="center">X<td align="center">X<td align="center">X</tr>
<tbody>
<tr><td>6<td>Ubah tema<td align="center">X<td align="center">X<td align="center">X</tr>
<tr><td>7<td>Try ikon<td align="center">X<td align="center">X<td align="center">X</tr>
</table>
</body>
</html>

Diposting oleh di Tidak ada komentar:

Tugas Pratikum 1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/frameset.dtd">
<html lang="en">

<head>
<title>Grafik Berbasis Tabel</title>
</head>

<table width=600>
<table frame="hsides">
<tr width=600 colspan=2>
<th width=200>Perusahaan</th>
<th width=500>Pendapatan</th>
</tr>
</table>
<table frame="below" align="left" cellspacing=0 cellpadding=3>
<tr>
<td width=200>Angin Reboot Ltd</td>
<td width=25></td>
<td width=25></td>
<td width=25></td>
<td width=25></td>
<td width=150 colspan=5>
<table border=1>
<tr>
<th width=150 height=20 colspan=5 bgcolor="green"></th>
</tr>
</table>
</td>
<td>+150%</td>
<td width=25></td>
<td width=25></td>
<td width=25></td>
</tr>
<tr>
<td width=200>Command Prompt, Inc</td>
<td width=25></td>
<td width=25></td>
<td width=25></td>
<td width=25></td>
<td width=150 colspan=5>
<table border=1>
<tr>
<th width=55 height=20 colspan=2 bgcolor="green"></th>
</tr>
</table>
</td>
<td>+55%</td>
<td width=25></td>
<td width=25></td>
<td width=25></td>
</tr>
<tr>
<td width=200>Hibernate Ltd</td>
<td width=25></td>
<td width=25></td>
<td width=25></td>
<td width=25>-23%
<table border=1 align="right">
<tr>
<th width=23 height=20 colspan=5 bgcolor="yellow"></th>
</tr>
</table>
</td>
<td></td>
<td width=25></td>
<td width=25></td>
</tr>
<tr>
<td width=200>Shutdown Ltd</td>
<td width=25></td>
<td width=25></td>
<td width=25>-75%</td>
<td width=75>
<table border=1>
<tr>
<th width=100 height=20 colspan=2 bgcolor="red"></th>
</tr>
</table>
</td>
<td></td>
<td width=25></td>
<td width=25></td>
</tr>
</table>
</table>
<body>

</body>
</html>

Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)