Tugas Praktikum Pemrograman Web ke-5

Studi Kasus

Source Code

css file

body, header, section, footer{
width : 500px;
}

header, footer{
background-color : blue;
border-radius : 10px;
}

header{
padding-top : 10px;
height : 75px;
}

.title{
width : 450px;
font-style : italic;
background-color : rgba(255, 255, 255, 0.4);
border-bottom-right-radius : 30px;
border-top-left-radius : 30px;
}

section{
text-align : left;
}
footer{
color : white;
font-size : small;
height : 20px;
padding-top : 5px;
padding-bottom : 5px;
}

Javascript file

function hitung(){
var komponen = document.calc;
var bil1 = parseInt(komponen.bil1.value);
var bil2 = parseInt(komponen.bil2.value);
var op = komponen.op.value;
var hasil;

if(op == “add”){
hasil = bil1 + bil2;
}
else if(op == “sub”){
hasil = bil1 – bil2;
}
else if(op == “mpy”){
hasil = bil1 * bil2;
}
else{
hasil = bil1 / bil2;
}

komponen.hasil.value = hasil;
}

Html File

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Simple Calculator</title>
<script language=”JavaScript” type=”text/javascript” src=”javstyle.js”></script>
</head>
<body bgcolor=”black”>
<h2><font color=”white”>Studi kasus Praktikum</font></h2>
<form name=”calc” action=”#”>
<input type=”text” size=”5″ name=”bil1″>
<select name=”op”>
<option value=”add”>+</option>
<option value=”sub”>-</option>
<option value=”mpy”>*</option>
<option value=”div”>:</option>
</select>
<input type=”text” size=”5″ name=”bil2″>
<input type=”button” value=”=” onclick=”hitung()”/>
<input type=”text” size=”10″ name=”hasil” readonly>
</form>
<font face=”monotype corsiva” size=3 color=”white”> Developed by @zard</font>
</body>
</html>

Tugas Rumah

Advertisements

tugas praktikum pemrograman web ke-4

Source Code

Css File

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

header, logo, um, te, nav, search, box, section, pict, article, event, footer{
display : block;
}

header{
height: 90px;
width: auto;
background-image : url(images/header.jpg);
}

logo{
float : left;
margin-left : 30px;
height : 90px;
width : 90px;
background-image : url(images/um2.png);
}

te{
padding: 30px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}

um{
float: right;
margin-right : 2px;
margin-top : 30px;
height : 70px;
width : 100px;
background-image : url(images/um.jpg);
}

nav{
width: 900px;
height: 40px;
background-color : #bbdefb;
color : #459dff;
font-family: Times New Roman;
}

search{
float : left;
margin-top: 2px;
margin-left : 20px;
width : 50px;
height: 20px;
}

box{
margin-top: 2px;
float: left;
width: 150px;
height: 20px;
}

home, news, tutorial, tips, download{
display: block;
float: left;
background-color: #316bff;
margin-top: 0px;
float: left;
text-align : center;
color : #ffffff;
font-size: 14px;
font-family: times new roman;
font-weight: bold;
}

home{
float: left;
margin-left: 287px;
width: 50px;
height: 23px;
}

news{
float: left;
margin-left: 2px;
width: 110px;
height: 23px;
}

tutorial{
float: left;
margin-left: 2px;
width: 60px;
height: 23px;
}

tips{
float: left;
margin-left: 2px;
width: 90px;
height: 23px;
}

download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}

section{
width : 900px;
height : 450px;
background-color : #bbdefb;
}

pict{
float: left;
width: 300px;
height: 450px;
background-image : url(images/pict3.jpg);
}

article{
float : left;
text-align: center;
margin-left: 10px;
width: 580px;
height: 310px;
background-color : #ffffff;
font-size : 11px;
font-family : Lucida Console;
}

info{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-top: 1px;
margin-left: 10px;
width: 580px;
height: 20px;
background-color : #dcf4ff;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : #459dff;
margin-left: 10px;
width: 580px;
height: 115px;
background-color : #bbdefb;
}

footer{
clear : both;
height : 35px;
background-image : url(images/footer.jpg);
text-align : center;
font-weight: bold;
font-family: times new roman;
color: white;
font-size: 12px;
}

linkmenu a:link, linkmenu a:visited, linkmenu a:active{
padding-left:2px;
text-decoration: none;
}

linkmenu a{
padding: 2px 0px 2px 5px; display: block;

margin: 0px 0px 1px; color: #ffffff;
}

linkmenu a:hover {
background: 376aeb no-repeat left center; color:#fffff;
}

list{
list-style-position: inside;
}

Html File

<!Doctype HTML>
<html lang=”en”>

<HEAD>
<TITLE>Desain Layout Halaman Web</TITLE>
<link rel=”stylesheet” href=”praktikum.css” type=”text/css” />
</HEAD>

<BODY>

<HEADER>
<LOGO></LOGO>
<TE>TEKNIK ELEKTRO</TE>

</HEADER>

<NAV><SEARCH>Search</SEARCH><BOX>
<INPUT type=”text” size=”20″ />
</BOX>
<LINKMENU>
<HOME><a href=”#” target=”_blank” title=”Halaman Utama”>Home</a></HOME>
<NEWS><a href=”#” target=”_blank” title=”Baca Berita dan Info Media Terbaru”>News & Media</a></NEWS>
<TUTORIAL><a href=”#” target=”_blank” title=”Tutorial Belajar”>Tutorial</a></TUTORIAL>
<TIPS><a href=”#” target=”_blank” title=”Tips-tips dan trik-trik terkini”>Tips & Trick</a></TIPS>
<DOWNLOAD><a href=”#” target=”_blank” title=”Mengunduh Data”>Download</a></DOWNLOAD>
</LINKMENU>
</NAV>

<SECTION>
<PICT></PICT>
<ARTICLE>
</ARTICLE>
<EVENT><a href=”http://www.um.ac.id&#8221; target=”_blank” title=”The Learning University”><UM></UM></a>
<B> &nbsp ELECTRO EVENT :</B>
</EVENT>
</SECTION>
<FOOTER>
Home | News & Media | Tutorial | Tips & Tricks | Download
<BR>
</FOOTER>
</BODY>
</HTML>

Tugas Pemrograman Web 2 :: layout depan facebook

Tugas kedua dari praktikum pemrograman web adalah membuat tampilan halaman login facebook tanpa bagian daftar di tengah. berikut adalah source code nya :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>

<head>

<title>Fakebook bukan sekedar buku palsu biasa</title>

<link rel=”stylesheet” href=”style.css” type=”text/css” />

<link rel=”icon” href=”icon.png” type=”image/x-icon” />

<div id=”header”>

<div id=”facebook”>

<font color=”white” face=”calibri” size=7><b> fakebook </b></font>

</div>

<div id=”table”>

<font color=”white” face=”calibri” size=2>

<table>

<tr>

<td><u>Email:</u></td>

<td><u>Password:</u></td>

</tr>

<tr>

<td>

<input type=”text”>

</td>

<td>

<input type=”password”>

</td>

<td><input id=”bgbutton” type=”button” maxlength=10 value=”Mlebu”></td>

</tr>

<tr>

<td><input type=”checkbox” checked>Jarno aku nang njero</td>

<td>Lupa kata sandi?</td>

</tr>

</table></font></div></div></head><body><div id=”content”></div><div id=”footer”>

<font color=”white” face=”calibri”>

Fakebook &trade; @2011 it is a fake site made by Nizaruddin

</font></div></body></html>

dan tampilannya adalah :

Selesai dalam 3 jam ><

Tugas Modul 1 : Pemrograman Berbasis Web

1. Studi Kasus : Membuat halaman HTML yang memiliki 4 frame

Halaman web dengan 4 frame setidaknya memiliki 5 frame (ditambah frame tengah) seperti pada gambar berikut


Source Code ::

a. frame 1

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title></title>
</head>
<body>
Untuk kembali ke halaman pertama <a href=”awal.html”>klik disini</a>
</body>
</html>

b. frame 2

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title></title>
</head>
<body>
<a href=”awal.html”>klik disini</a>
</body>
</html>

c. frame 3

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title>utama</title>
</head>
<body>
<h3 id=”x”><b>Pendahuluan</b></h3>
<ul>
<li><a href=”#x1″> Pendahuluan</a></li>
<li><a href=”#x2″> Pembahasan</a></li>
<li><a href=”#x3″> Kesimpulan</a></li>
</body>
</ul>
<h3 id=”x1″><b>Pendahuluan</b></h3>
<p>

[content]

<a href=”#x”><b>kembali ke menu awal</b></a>

<h3 id=”x2″><b>Pembahasan</b></h3>
<p>
[content]

<a href=”#x”><b>kembali ke menu awal</b></a>

<h3 id=”x3″><b>Kesimpulan</b></h3>
<p>
[content]

<a href=”#x”><b>kembali ke menu awal</b></a>

</body>
</html>

d. frame 4

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title></title>
</head>
<body>
<a href=”awal.html”>klik disini</a>
</body>
</html>
e. frame 5

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title></title>
</head>
<body>
Untuk kembali ke halaman pertama <a href=”awal.html”>klik disini</a>
</body>
</html>

f. Penggabungan frame

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title>frame</title>
</head>
<frameset rows=”15%,*,10%”>
<frame src=”1.html” name=”atas” id=”atas”/>
<frameset cols=”20%,*,20%”>
<frame src=”2.html” name=”kiri” id=”kiri”/>
<frame src=”3.html” name=”tengah” id=”tengah”/>
<frame src=”4.html” name=”kanan” id=”kanan”/>
</frameset>
<frame src=”5.html” name=”bawah” id=”bawah”/>
</frameset>
</html>

Tugas Rumah

1. Membuat Tabel Grafik


<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title>Grafik Berbasis Tabel</title>
</head>
<body>
<table frame=”above” align=”left” cellspacing=5 cellpadding=5>
<tr>
<th width=”300″>Perusahaan</th>
<th width=”105″ colspan=3></th>
<th width=”190″ colspan=3>Pendapatan</th>
</tr>

<tr>
<td>Agen Robot Ltd</td>
<td width=”30″></td>
<td width=”52″></td>
<td width=”23″></td>
<td width=”150″ colspan=”2″ bgcolor=”green”></td>
<td width=”40″ align=”left”>+150%</td>
</tr>

<tr>
<td>Command Prompt, Inc</td>
<td width=”30″></td>
<td width=”52″></td>
<td width=”23″></td>
<td width=”55″ bgcolor=”green”></td>
<td width=”90″ align=”left”>+55%</td>
<td width=”40″></td>
</tr>

<tr>
<td>Hibernate Ltd</td>
<td width=”30″></td>
<td width=”52″ align=”right”>-23%</td>
<td width=”23″ bgcolor=”yellow”></td>
<td width=”55″></td>
<td width=”90″></td>
<td width=”40″></td>
</tr>

<tr frame=”below”>
<td>Shutdown Ltd</td>
<td width=”30″ align=”right”>-75%</td>
<td width=”52″ colspan=”2″ bgcolor=”red” border=></td>
<td width=”55″></td>
<td width=”90″></td>
<td width=”40″></td>
</tr>

</body>
</html>

2. Membuat Tabel


<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<title>Grafik Berbasis Tabel</title>
</head>
<body background=”1.gif”>
<h3 align=”center”>Perbandingan Fitur</h3>
<table frame=”above” border=”1″ align=”center” cellspacing=3 cellpadding=3>
<tr>
<th width=”30″>No</th>
<th width=”180″>Fitur</th>
<th width=”50″>Enterprise</th>
<th width=”40″>Pro</th>
<th width=”40″>Free</th>
</tr>

<tr>
<td width=”30″>1
<br>2
<br>3
<br>4
<br>5
</td>
<td width=”180″>Garansi seumur hidup
<br>Multiuser
<br>Update otomatis
<br>Cetak laporan
<br>Notifikasi error
</td>
<td width=”50″ align=”center”>X
<br>X
<br>X
<br>X
<br>X</td>
<td width=”40″ align=”center”>-
<br>-
<br>X
<br>X
<br>X
</td>
<td width=”40″ align=”center”>-
<br>-
<br>-
<br>-
<br>X
</td>
</tr>

<tr>
<td width=”30″>6
<br>7
</td>

<td width=”180″>Ubah tema
<br>Try ikon
</td>

<td width=”50″ align=”center”>X
<br>X
</td>

<td width=”40″ align=”center”>X
<br>X
</td>

<td width=”40″ align=”center”>X
<br>X
</td></tr>
</body>
</html>