Tugas Praktikum Modul 4

Senin, 28 Februari 2011

Screen Shoot Untuk Tugas Praktikum Modul 4 :



Source code CSS :


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

header,nav,section,footer {
display:block;}

header {
height:200px;
width:1350px;
background-image:url(header.jpg);}

nav{float:left;
width:1350px;
height:60px;
background:black;
margin-right:5px;}

.nav #button a:active{
background-color:red;
}

.nav #search{
margin:5px;
margin-left:700px;
}

section{float:left;
width:1350px;
height:517px;
background-image:url(jjjj.jpg);}


side1 {float:left;
height:360px;
width:480px;
border:6px solid black;

margin:20px;}

side2 {float: right;
height:358px;
width:780px;
border:2px dashed black;
background:#F80;}

side3 {float: right;
height:157px;
width:780px;
border:2px solid black;
background:#F20;}

footer {width:1350px;
clear:both;
height:60px;
background-image:url(footer.jpg);}


ul li a {display: block;
text-decoration:none;
line-height:2px;
color:#F90;
padding:10px;
background:#505050;
margin:1px 1px;}

ul {margin:1;
padding:0;
list-style: none;}

ul li {position: relative;
float: left;
width:100px;}

li ul {position: absolute;
top: 1px;
display: none;}


Source Code Html :


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Romanisti Site</title>
<link rel="stylesheet" href="tugasprak4.css" type="text/css">
<link rel="shortcut icon" href="ikon.ico" type="image/x-icon">

</head>
<body>
<header>

</header>

<nav>
<font face="comic sans" size="4"><div align="center">
</div>
<div class="nav">
<ul id="button">
<li><a href="#">home</a></li>
<li><a href="#">tips</a></li>
<li><a href="#">news</a></li>
<li><a href="#">downloads</a></li>
<li><a href="#">about us</a></li>
</ul>

<font color="#F90" face="cambria" size="3">
<div align ="right">
<div id="search">search : <input></input></div>
</div></div></font>
</nav>

<font face="comic sans" size="3">
<font color="#F90" face="cambria" size="4">
<section>
<side1>
<img src="0.jpg">
</side1>

<side2>
<font color="#FF0" face="cambria" size="4">
<br>
A.S. Roma didirikan pada musim panas 1927 oleh Italo Foschi dengan cara
menggabungkan 3 klub sepak bola dari kota Roma,Italia yaitu Roman FC,
SS Alba-Audace dan Fortitudo-Pro Roma SGS. Alasan dari merger ketiga
klub ini adalah untuk membentuk sebuah klub sepak bola yang kuat untuk
menjadi rival dari klub-klub sepak bola Italia bagian Utara. Namun
demikian dari penggabungan ini, ada satu klub di kota Roma waktu itu
yang tidak ikut bergabung, yaitu SS Lazio.
<br>
<br>
PRESTASI :<br>
3 Serie A (1941-1942, 1982-1983 dan 2000-2001)<br>
9 Piala Italia (1963-1964, 1968-1969, 1979-1980, 1980-1981, 1983-1984, 1985-1986, 1990-1991, 2006-2007, 2007-2008);
<br>2 Piala Super Italia (2001 dan 2007)<br>
1 Piala UEFA (1960-1961)
<br>

</font></side2>

<side3>
<font color="black" face="cambria" size="4" align="center">
Recomended page :
<br><a href="http://www.asromacalcio.it//"><center>Situs Resmi AS ROMA </a>
<br><a href="http://www.romanisti-indonesia.or.id/">Romanisti Indonesia</a></center>
</font></side3></section>

<font color="#F90" face="cambria" size="2">
<font color="#F90" face="cambria" size="4"><font color="#3c26e3" face="cambria" size="3">

<footer>
<font color="#fffff" face="cambria" size="2"><div align="center">
<table color="#fffff" cellpadding="5" width="1350",height="200">
<tbody><tr><td align="right" width="200">
</td>
<td><hr color="#ffffff" size="1" width="950"></td><td width="200"></td></tr>
</tbody></table>
copyright © 2011 Rizka Pandhu Setyawan 209533425526 . Pendidikan Teknik Informatika OFF D 2009
</div></font></footer><font color="#fffff" face="cambria" size="2">
</font></font></font></font></font></font>
</body>
</html>

STUDI KASUS MODUL 4



Source kode CSS :
body{
margin: 10px auto;
width:950px
}
.header{
border:1px solid green;
height:100px;
}
.nav{

border:1px solid blue;
height:70px;
}
.nav #button a:active{
background-color:aqua;
}

.nav #search{
margin:5px;
margin-left:700px;
}
.section{
border:1px solid red;
}
.section #article{
border:1px dotted orange;
float:left;
width:650px;
height:390px;
margin-left:8px;
margin-top:10px;
margin-right:15px;
margin-bottom:0px;
}
.section #sidebar{
border:1px dotted purple;
margin-left:650px;
margin-top:10px;
margin-right:;
margin-bottom:0px;
width:240px;
height:390px;
}
.footer{
border:1px solid brown;
height:20px;
}

ul li a {display: block;
text-decoration:none;
line-height:2px;
color:#dedede;
padding:10px;
background:#505050;
margin:1px 1px;}

ul {margin:1;
padding:0;
list-style: none;}

ul li {position: relative;
float: left;
width:90px;}

li ul {position: absolute;
top: 1px;
display: none;}



Source kode HTML :

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<link rel="stylesheet" href="studikasusstyle.css" type=text/css />
<title>Studi Kasus</title>
</head>
<body>
<div class="header">
header
</div>
<div class="nav">
<ul id="button">
<li><a href="">home</a></li>
<li><a href="">tips</a></li>
<li><a href="">tutorial</a></li>
<li><a href="">news</a></li>
<li><a href="">downloads</a></li>

</ul>
<div id="search">search : <input></input></div>
</div>
<div class="section">
<div id="article">
article
</div>
<div id="sidebar">
sidebar
</div>
section
</div>
<div class="footer">
footer
</div>
</body>
</html>

Tugas Rumah Modul 3

Rabu, 16 Februari 2011

Inilah gambar untuk membuat tampilan web "face-mu"






Script untuk tampilan di atas :

<em><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/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, ...</title>

<link rel="shortcut icon" href="icon.png">
<style type="text/css">
<!--
.box1 {
float: right;
padding: 5px;
height: 100px;
}
.box2 {
float: right;
padding: 5px;
height: 100px;
}
#header{
height: 80px;
background:#4169E1;
}
#logo{
float: left;
padding-left: 100px;
padding-top: 20px;
}


#inner {
float: left;
}
#left {
float: left;
width: 780px;
height: 380px;
}
#subleft{
width: 300px;
height: 200px;
padding: 50px;
color: #4169E1;
}
#rightmenu {
float: left;
padding: 5px;
width: 370px;
height: 380px;
color: #4169E1;
}
.box3 {
width:500px;
height:300px;
}
.box4 {
width: 1260px;
height: 18px;
background: #4169E1;
text-align:center;
font-size:5px;
color:#fff
}
-->
</style>
</head>

<div id="logo">
<img src="facemu.png">
</div>
<div id="header">
<div class="box2">
<br><input type="button" value="Masuk">
<br>
</div>

<div class="box1">
<font color="white">Kata Sandi <br><input type="text" size="25">
<br>Lupa Kata Sandi?
</div>

<div class="box1">
Email<br><input type="text" size="25">
<br><input type="checkbox">Biarkan Saya Masuk

</div>
</div>

<form>
<div id="inner">
<div id="left">
<div id="subleft">
<img align= left img src="indo.png" height=300px width=600px>

</div></form>

</div>
<div id="rightmenu">
<h2><font size ="6"><font color = "blue">Mendaftar</h2>
Gratis, sampai kapanpun.

<hr/>
<form>
<table>
<tr><td><font color = "#000080">Nama Depan</td><td><input type="text" size="35"></td></tr>
<tr><td><font color = "#000080">Nama Belakang</td><td><input type="text" size="35"></td></tr>
<tr><td><font color = "#000080">Email Anda</td><td><input type="text" size="35"></td></tr>
<tr><td><font color = "#000080">Masukkan Ulang Email</td><td><input type="text" size="35"></td></tr>
<tr><td><font color = "#000080">Kata Sandi Baru</td><td><input type="text" size="35"></td></tr>
<tr><td><font color = "#000080">Saya Seorang</td><td>
<select name="jenis kelamin">
<option value="Pilih Jenis Kelamin" selected>Pilih Sesuai Kepribadian:
<option value="perempuan">Perempuan
<option value="laki-laki">Laki-Laki
</select></td></tr>
</table>

<br><input type="button" value="DAFTAR">
</div>
</div>
<div class="box3">
<body bgcolor = "#E6E6FA">
<img src="bg.jpg" width='1' height='420' >


<div class="box4" >
<p>
<h1><font color=white>
Face-mu © 2011
</h1>
</p>
</div>

</form>
</body>
</html>

CASCADING STYLE SHEET ( CSS )

Senin, 14 Februari 2011

CSS dapat digunakan untuk memformat elemen-elemen HTML apa pun,
misalnya border dan padding.

- Border
Properti border merepresentasikan batas dari suatu bidang area, misalnya
paragraf. Properti ini menyediakan beberapa style yang bisa dimanfaatkan
untuk membuat variasi border.

Berikut beberapa contoh border dan objek yang dapat dilakukan dengan CSS3 :



Ini dia Scriptnya biyar lebih jelasnya :

<em><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>STUDI KASUS</title>
<style type="text/css">
<!--
.lingkaran{
width:200px;
height:200px;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
background:#F90;
border: 2px solid #FF0;
text-align:center;
font-size:20px;
color:#fff
}
.text-lingkaran{
padding-top: 100px;
}
.round {
background-color: aqua;
-moz-border-radius-bottomright:15px;
-moz-border-radius-topleft:15px;
-webkit-border-radius: 5px;
border: 2px solid blue;
padding: 10px;
width: 310px;
font-weight: bold;
font-size: 12px;
color: #800000;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
.shadow {
background-color: yellow;
border-bottom-left-top:25px 25px;
box-shadow: 5px 5px 7px #222;
-moz-box-shadow: 5px 5px 7px #222;
-webkit-box-shadow: 5px 5px 7px #222;
border: 2px solid red;
padding: 10px;
width: 310px;
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline overline;
}

-->
</style>
</head>
<body>
<p>
<div class="lingkaran">
<span class="text-lingkaran">
<br/><br/>

Ini adalah border lingkaran!!
....
....
....

</span>
</div
<br/><br/>
<div class="round">
Bisa juga bikin kreasi border seperti ini.
Mmmmmmmm :-)
</div>
<br />
<div class="shadow">
Kalau yang ini semacam efek shadow.
Dan tambahan dekorasi pada text nya..
Keren kannnnnn?????? < biasa aja >
</div>
</body>
</html>

pemrograman web modul 2

Senin, 07 Februari 2011

A. Tugas Praktikum
1. Membuat desain frame



source kode untuk tampilan di atas :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">

<head>
<title>studi kasus frame</title>
</head>


<frameset rows="15%,70%,15%">
<frame src="link2.html" noresize name="top" id="top">

<frameset cols="200,900,*">
<frame src="link1.html" noresize name="left" id="left" >
<frame src="link internal.html" noresize name="main" id="main">
<frame src="link1.html" noresize name="right" id="right">

</frameset>
<frame src="link2.html" noresize name="bottom" id="bottom">

</html>

B. Tugas Praktikum
1. Membuat kreasi grafik batang statis dengan memanfaatkan elemen tabel, contoh
hasilnya terlihat seperti di bawah



source kode untuk tampilan di atas adalah :

<!DOCTYPE html
PUBLIC �-//W3C//DTD XHTML 1.0 Transitional//EN"
�http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Grafik Berbasis tabel</title>
</head>
<body>

<font color="blue" face="monotype corsiva" size="7" >Grafik Berbasis Tabel </font></blink>
<table width="561" height="241">

<tr>
<td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>
<div align="center">Perusahaan</div></td>
<td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>
<div align="center">Pendapatan</div></td>
</tr>
<tr >
<td width="172" >Angin Reebot Ltd </td>
<td width="27"></td>
<td width="31"></td>
<td width="25"></td>
<td width="33"></td>
<td width="16"></td>
<td width="13"></td>
<td colspan="6" bgcolor="red"></td>
<td width="17">+150%</td>
</tr>
<tr>
<td>Command Prompt, Inc </td>
<td></td>
<td></td>
<td></

2. Membuat desain tabel perbandingan item dengan memanfaatkan fitur pengelompokan.
contoh hasilnya terlihat seperti di bawah


source kode untuk tampilan di atas adalah :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">
<head>
<title>Grafik Berbasis tabel 2</title>
</head>

<body>

<table width="600" height="500" border="0">
<tr>
<td colspan="8" style="border-bottom:#000000 solid;">
<p align="center">
<font color="black" face="monotype corsiva" size="9" > Perbandingan Fitur </font>
</tr>

<tr>
<td colspan="8" style="border-bottom:#000000 solid thin;"></td>
</tr>

<tr>
<td width="25" align="center"><strong>No</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="150" align="center"><strong>Fitur</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="75" align="center"><strong>Enterprise</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="25" align="center"><strong>Pro</strong></td>
<td width="50" align="center"><strong>Free</strong></td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td align="center">1</td>
<td>Garansi seumur hidup </td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">2</td>
<td>Multiuser</td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">3</td>
<td>Update otomatis </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">4</td>
<td>Cetak Laporan </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">5</td>
<td>Notifikasi error </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>

<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>

<tr>
<td align="center">6</td>
<td>Ubah tema </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>

<tr>
<td align="center">7</td>
<td>Try ikon</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>

<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>

</table>
<hr color="black" size=5 align='left' width=600 /><br>
</hr>

</body>
</html>