Minggu, 13 Maret 2011
Minggu, 06 Maret 2011
Membuat Menu Pujasera
Script HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Pemesanan Menu Pujasera</title>
<script language="JavaScript" type="text/javascript" src="cantin.js"></script>
<link rel="stylesheet" href="cantin.css" type="text/css" />
</head>
<body>
<header>
<h1 align="center">MENU MAKANAN<br/>PUJASERA UM</h1>
</header>
<section>
<form name="form_menu" action="#">
<table border=1 cellpadding=3>
<tr>
<th><div class="baris_satu">No.<div></th>
<th width = 350px ><div class="baris_satu">Makanan / Minuman </div></th>
<th width = 120px ><div class="baris_satu">Harga</div></th>
<th width = 100px><div class="baris_satu">Jumlah</div></th>
</tr>
<tr>
<td><div class="huruf_isi">1</div></td>
<td><div class="huruf_isi">Tahu Telor</div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga1" value="5000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan1" value="0" size="3" onChange ="proses()"/> porsi</div></td>
</tr>
<tr>
<td><div class="huruf_isi">2</div></td>
<td><div class="huruf_isi">Bakso </td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga2" value="5000" size="6" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan2" value="0" size="3" onChange ="proses()" /> porsi</div></td>
</tr>
<tr>
<td><div class="huruf_isi">3</div></td>
<td><div class="huruf_isi">Nasi Goreng </div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga3" value="5000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan3" value="0" size="3" onChange ="proses()" /> porsi</div></td>
</tr>
<tr>
<td><div class="huruf_isi">4</div></td>
<td><div class="huruf_isi">Teh Racek</div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga4" value="2500" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan4" value="0" size="3" onChange ="proses()" /> gelas</div></td>
</tr>
<tr>
<td><div class="huruf_isi">5</div></td>
<td><div class="huruf_isi">Jus Jambu</div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga5" value="3000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan5" value="0" size="3" onChange ="proses()" /> gelas</div></td>
</tr>
<tr>
<td colspan=3><div class="huruf_bawah">Jumlah</div></td>
<td><div class="huruf_bawah">Rp <input type="text" size="6" style="text-align:right" name="JumTotal" readonly /></div></td>
<tr>
<tr>
<td colspan=3><div class="huruf_bawah">Diskon</div></td>
<td><div class="huruf_bawah">Rp <input type="text" size="6" style="text-align:right" name="Diskon" readonly /></div></td>
<tr>
<tr>
<td colspan=3><div class="huruf_bawah">Jumlah Dibayar</div></td>
<td><div class="huruf_bawah">Rp <input type="text" size="6" style="text-align:right" name="JumBayar" readonly /></div></td>
<tr>
</table>
<br>
<input type="button" name="batal" value="Batal" onclick="reset()"/>
<input type="submit" value="Pesan" onclick="pesan()" />
</form>
</section>
<footer>
© vertika 2011
</footer>
</body>
</html>
Kode CSS:
body {
margin: 10px auto;
width: 580px;
}
header,section,footer{
display:block;
border:1px solid green;
}
header{
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
text-align: center;
color: white;
float:center;
height:100px;
background : #00CC00;
}
section{
padding: 10px;
height:350px;
}
footer{
clear:both;
height:20px;
background : #00CC00;
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
color: white;
}
.baris_satu{
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
text-align: center;
color: #00CC00;
float:center;
}
.huruf_isi{
font-family: Tahoma;
font-size: 15px;
text-align: center;
color: #33CC00;
float:left;
}
.huruf_bawah{
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
text-align: center;
color: #33CC00;
float:right;
}
Kode Java Script:
function JumlahTotal(){
var myForm=document.form_menu;
var total1;
var total2;
var total3;
var total4;
var total5;
total1 =parseInt(myForm.harga1.value) * parseInt(myForm.pesan1.value);
total2 =parseInt(myForm.harga2.value) * parseInt(myForm.pesan2.value);
total3 =parseInt(myForm.harga3.value) * parseInt(myForm.pesan3.value);
total4 =parseInt(myForm.harga4.value) * parseInt(myForm.pesan4.value);
total5 =parseInt(myForm.harga5.value) * parseInt(myForm.pesan5.value);
myForm.JumTotal.value=total1+total2+total3+total4+total5;
}
function potongan(){
var myForm=document.form_menu;
if (myForm.JumTotal.value < value =" 0;" value =" 2000;" myform="document.form_menu;" value =" myForm.JumTotal.value" elemen =" document.pemesanan;" value = "" value = "" value = "" value = "" value = "" value = "" value = "" value = "" myform =" document.form_menu;" value="=" value="=">
Hasil:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Pemesanan Menu Pujasera</title>
<script language="JavaScript" type="text/javascript" src="cantin.js"></script>
<link rel="stylesheet" href="cantin.css" type="text/css" />
</head>
<body>
<header>
<h1 align="center">MENU MAKANAN<br/>PUJASERA UM</h1>
</header>
<section>
<form name="form_menu" action="#">
<table border=1 cellpadding=3>
<tr>
<th><div class="baris_satu">No.<div></th>
<th width = 350px ><div class="baris_satu">Makanan / Minuman </div></th>
<th width = 120px ><div class="baris_satu">Harga</div></th>
<th width = 100px><div class="baris_satu">Jumlah</div></th>
</tr>
<tr>
<td><div class="huruf_isi">1</div></td>
<td><div class="huruf_isi">Tahu Telor</div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga1" value="5000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan1" value="0" size="3" onChange ="proses()"/> porsi</div></td>
</tr>
<tr>
<td><div class="huruf_isi">2</div></td>
<td><div class="huruf_isi">Bakso </td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga2" value="5000" size="6" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan2" value="0" size="3" onChange ="proses()" /> porsi</div></td>
</tr>
<tr>
<td><div class="huruf_isi">3</div></td>
<td><div class="huruf_isi">Nasi Goreng </div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga3" value="5000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan3" value="0" size="3" onChange ="proses()" /> porsi</div></td>
</tr>
<tr>
<td><div class="huruf_isi">4</div></td>
<td><div class="huruf_isi">Teh Racek</div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga4" value="2500" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan4" value="0" size="3" onChange ="proses()" /> gelas</div></td>
</tr>
<tr>
<td><div class="huruf_isi">5</div></td>
<td><div class="huruf_isi">Jus Jambu</div></td>
<td><div class="huruf_isi">@ Rp <input type="text" name="harga5" value="3000" size="6" style="text-align:right" readonly /></div></td>
<td><div class="huruf_isi"><input type="text" name="pesan5" value="0" size="3" onChange ="proses()" /> gelas</div></td>
</tr>
<tr>
<td colspan=3><div class="huruf_bawah">Jumlah</div></td>
<td><div class="huruf_bawah">Rp <input type="text" size="6" style="text-align:right" name="JumTotal" readonly /></div></td>
<tr>
<tr>
<td colspan=3><div class="huruf_bawah">Diskon</div></td>
<td><div class="huruf_bawah">Rp <input type="text" size="6" style="text-align:right" name="Diskon" readonly /></div></td>
<tr>
<tr>
<td colspan=3><div class="huruf_bawah">Jumlah Dibayar</div></td>
<td><div class="huruf_bawah">Rp <input type="text" size="6" style="text-align:right" name="JumBayar" readonly /></div></td>
<tr>
</table>
<br>
<input type="button" name="batal" value="Batal" onclick="reset()"/>
<input type="submit" value="Pesan" onclick="pesan()" />
</form>
</section>
<footer>
© vertika 2011
</footer>
</body>
</html>
Kode CSS:
body {
margin: 10px auto;
width: 580px;
}
header,section,footer{
display:block;
border:1px solid green;
}
header{
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
text-align: center;
color: white;
float:center;
height:100px;
background : #00CC00;
}
section{
padding: 10px;
height:350px;
}
footer{
clear:both;
height:20px;
background : #00CC00;
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
color: white;
}
.baris_satu{
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
text-align: center;
color: #00CC00;
float:center;
}
.huruf_isi{
font-family: Tahoma;
font-size: 15px;
text-align: center;
color: #33CC00;
float:left;
}
.huruf_bawah{
font-family: Tahoma;
font-size: 15px;
font-weight:bold;
text-align: center;
color: #33CC00;
float:right;
}
Kode Java Script:
function JumlahTotal(){
var myForm=document.form_menu;
var total1;
var total2;
var total3;
var total4;
var total5;
total1 =parseInt(myForm.harga1.value) * parseInt(myForm.pesan1.value);
total2 =parseInt(myForm.harga2.value) * parseInt(myForm.pesan2.value);
total3 =parseInt(myForm.harga3.value) * parseInt(myForm.pesan3.value);
total4 =parseInt(myForm.harga4.value) * parseInt(myForm.pesan4.value);
total5 =parseInt(myForm.harga5.value) * parseInt(myForm.pesan5.value);
myForm.JumTotal.value=total1+total2+total3+total4+total5;
}
function potongan(){
var myForm=document.form_menu;
if (myForm.JumTotal.value < value =" 0;" value =" 2000;" myform="document.form_menu;" value =" myForm.JumTotal.value" elemen =" document.pemesanan;" value = "" value = "" value = "" value = "" value = "" value = "" value = "" value = "" myform =" document.form_menu;" value="=" value="=">
Hasil:
Menbuat kalkulator sederhana
Script HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kalkulator Sederhana_Vertika</title>
<script language="JavaScript" type="text/javascript" src="calculator.js"></script>
<style type="text/css">
<!--
.huruf_header{
font-family: Berlin Sans FB;
font-size: 40px;
text-align: center;
color: #990066;
float:center;
}
-->
</style>
<link rel="icon" type="image/x-icon" href="a.jpg">
</head>
<body bgcolor="#CC33CC">
<center>
<table bgcolor="#CC99FF" border=0 align="justify" cellspacing=0 cellpadding=5>
<tr>
<td width="1600"><div class="huruf_header">KALKULATOR SEDERHANA</div></td>
</tr>
</table>
<br/>
<form name=form_kalkulator action="#">
<table border ="0">
<tr>
<td><input type="text" name="bil1" value="Input 1"/></td>
<td><select name="operasi" >
<option>Operator</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select></td>
<td><input type="text" name="bil2" value="Input 2"/></td>
<td><input type="button" value="PROSES" onclick="proses()" /></td>
<td><input type="text" name="hasil"/></td>
<td><input type="button" value="Clear" onclick="reset()" /></td>
<td><input type="button" value="Cetak" onclick="cetak()" /></td>
</tr>
</table>
</form>
</center>
</body>
</html>
Kode Java Script:
function proses(){
var myForm=document.form_kalkulator;
if (myForm.operasi.value == "+"){
myForm.hasil.value = parseInt(myForm.bil1.value) + parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "-"){
myForm.hasil.value = parseInt(myForm.bil1.value) - parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "*"){
myForm.hasil.value = parseInt(myForm.bil1.value) * parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "/"){
myForm.hasil.value = parseInt(myForm.bil1.value) / parseInt(myForm.bil2.value);
}
}
function reset(){
var elemen = document.form_kalkulator;
elemen.bil1.value = "";
elemen.bil2.value = "";
elemen.hasil.value = "";
}
function cetak()
{
var myForm = document.form_kalkulator;
if (myForm.bil1.value=="Input 1" || myForm.operasi.value=="Operator" || myForm.bil1.value=="Input 2")
{
alert("Lengkapi Data Anda..");
}
else
{
alert("Hasil Perhitungan dari " + myForm.bil1.value + " " + myForm.operasi.value + " " + myForm.bil2.value + " = " + myForm.hasil.value);
}
}
Hasil:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kalkulator Sederhana_Vertika</title>
<script language="JavaScript" type="text/javascript" src="calculator.js"></script>
<style type="text/css">
<!--
.huruf_header{
font-family: Berlin Sans FB;
font-size: 40px;
text-align: center;
color: #990066;
float:center;
}
-->
</style>
<link rel="icon" type="image/x-icon" href="a.jpg">
</head>
<body bgcolor="#CC33CC">
<center>
<table bgcolor="#CC99FF" border=0 align="justify" cellspacing=0 cellpadding=5>
<tr>
<td width="1600"><div class="huruf_header">KALKULATOR SEDERHANA</div></td>
</tr>
</table>
<br/>
<form name=form_kalkulator action="#">
<table border ="0">
<tr>
<td><input type="text" name="bil1" value="Input 1"/></td>
<td><select name="operasi" >
<option>Operator</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select></td>
<td><input type="text" name="bil2" value="Input 2"/></td>
<td><input type="button" value="PROSES" onclick="proses()" /></td>
<td><input type="text" name="hasil"/></td>
<td><input type="button" value="Clear" onclick="reset()" /></td>
<td><input type="button" value="Cetak" onclick="cetak()" /></td>
</tr>
</table>
</form>
</center>
</body>
</html>
Kode Java Script:
function proses(){
var myForm=document.form_kalkulator;
if (myForm.operasi.value == "+"){
myForm.hasil.value = parseInt(myForm.bil1.value) + parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "-"){
myForm.hasil.value = parseInt(myForm.bil1.value) - parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "*"){
myForm.hasil.value = parseInt(myForm.bil1.value) * parseInt(myForm.bil2.value);
}
else if (myForm.operasi.value == "/"){
myForm.hasil.value = parseInt(myForm.bil1.value) / parseInt(myForm.bil2.value);
}
}
function reset(){
var elemen = document.form_kalkulator;
elemen.bil1.value = "";
elemen.bil2.value = "";
elemen.hasil.value = "";
}
function cetak()
{
var myForm = document.form_kalkulator;
if (myForm.bil1.value=="Input 1" || myForm.operasi.value=="Operator" || myForm.bil1.value=="Input 2")
{
alert("Lengkapi Data Anda..");
}
else
{
alert("Hasil Perhitungan dari " + myForm.bil1.value + " " + myForm.operasi.value + " " + myForm.bil2.value + " = " + myForm.hasil.value);
}
}
Hasil:
Membuat Web sederhana
Script HTML
<!Doctype HTML>
<html lang="en">
<head>
<title>Tugas Rumah Modul 4</title>
<link rel="stylesheet" href="gambar.css" type="text/css" />
</head>
<body>
<header>
<logo></logo>
<nama>TEKNIK ELEKTRO</nama>
<info><MARQUEE>SELAMAT DATANG</MARQUEE></info>
</header>
<nav><search>Search</search><box>
<input type="text" size="20">
</box>
<linkmenu>
<home><a href="#" target="_blank" title="About TE UM">Home</a></home>
<materi><a href="#" target="_blank" title="Materi Kuliah">Materi</a></materi>
<jurnal><a href="#" target="_blank" title="Artikel dan Jurnal">Jurnal</a></jurnal>
<agenda><a href="#" target="_blank" title="Acara">Agenda</a></agenda>
<download><a href="#" target="_blank" title="Mengunduh Data">Download</a></download>
</linkmenu>
</nav>
<section>
<gambar></gambar>
<article>
<b>~SEKILAS PTI~</b><br><br>
Pendidikan Teknik Informatika merupakan salah satu prodi di jurusan Elektro, Program Studi ini ada sejak tahun 2007. Lulusan Pendidikan Teknik Informatika ini diharapkan akan menjadi tenaga pendidik profesional.<br>
Tahun ini prodi PTI akan meluluskan mahasiswa untuk tahun pertama. Selain itu, saat ini PTI sedang melakukan proses akreditasi.
Semoga tahun ini PTI segera memperoleh akreditasi secepatnya...
</article>
<event><a href="#" target="_blank" title="Teknik Elektro"></a>
<b>   EVENTS :</b>
<ul>
<li><a href="#" target="_blank" title="Lomba Design Web">Lomba Design Web</a></li>
<li><a href="#" target="_blank" title="Kajur Cup">Kajur Cup</a></li>
<li><a href="#" target="_blank" title="LTDC">LTDC</a></li>
<li><a href="#" target="_blank" title="Kontes Band">Kontes Band</a></li>
</ul>
</event>
</section>
<footer>
Home | Materi | Jurnal | Agenda | Download
<br>© CopyRight Vertika Panggayuh
</footer>
</body>
</html>
Script CSS
body{
margin: 10px auto;
width : 1000px;
}
header, logo, nama, nav, search, box, section, gambar, article, event, footer{
display : block;
}
header{
height: 130px;
width: auto;
}
logo{
float : left;
padding-top: 5px;
margin-top: 5px;
margin-left : 25px;
height : 90px;
width : 100px;
background-image : url(um.jpg)
}
nama{
background-color : #990099;
padding: 35px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}
info{
float: left;
font-family : Arial ;
font-size : 20px;
font-weight: bold;
color : white;
margin-top: 1px;
margin-left: 0px;
width: 1000px;
height: 25px;
background-color : #9900FF;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
nav{
width: 1000px;
height: 30px;
background-color : #CC33CC ;
color : black;
font-family: Times New Roman;
}
search{
float : left;
margin-top: 5px;
margin-left : 20px;
width : 50px;
height: 20px;
}
box{
margin-top: 5px;
float: left;
width: 165px;
height: 20px;
}
home, materi, jurnal, agenda, download{
display: block;
float: left;
background-color: #990099;
margin-top: 10px;
float: left;
text-align : center;
color : white;
font-size: 14px;
font-family: calibri;
font-weight: bold;
}
home{
float: left;
margin-left: 372px;
width: 75px;
height: 23px;
}
materi{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
jurnal{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
agenda{
float: left;
margin-left: 2px;
width: 85px;
height: 23px;
}
download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
section{
width : 1000px;
height : 415px;
background-color : #9900FF;
}
gambar{
float: left;
margin-left: 5px;
width: 270px;
height: 400px;
background-image : url(AN_diff.jpg);
}
article{
float : left;
text-align: left;
margin-left: 5px;
width: 705px;
height: 300px;
background-color : #CC99CC;
font-size : 15px;
font-family : Berlin Sans FB;
}
event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : black;
margin-top: 5px;
margin-left: 5px;
width: 705px;
height: 100px;
background-color : #CC33CC ;
}
footer{
border-top: 1px solid white;
padding-top: 5px;
clear : both;
height : 40px;
background-color : #990099;
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: white;
}
linkmenu a:hover {
background: 376aeb no-repeat left center; color:black;
}
list{
list-style-position: inside;
}
Hasil
<!Doctype HTML>
<html lang="en">
<head>
<title>Tugas Rumah Modul 4</title>
<link rel="stylesheet" href="gambar.css" type="text/css" />
</head>
<body>
<header>
<logo></logo>
<nama>TEKNIK ELEKTRO</nama>
<info><MARQUEE>SELAMAT DATANG</MARQUEE></info>
</header>
<nav><search>Search</search><box>
<input type="text" size="20">
</box>
<linkmenu>
<home><a href="#" target="_blank" title="About TE UM">Home</a></home>
<materi><a href="#" target="_blank" title="Materi Kuliah">Materi</a></materi>
<jurnal><a href="#" target="_blank" title="Artikel dan Jurnal">Jurnal</a></jurnal>
<agenda><a href="#" target="_blank" title="Acara">Agenda</a></agenda>
<download><a href="#" target="_blank" title="Mengunduh Data">Download</a></download>
</linkmenu>
</nav>
<section>
<gambar></gambar>
<article>
<b>~SEKILAS PTI~</b><br><br>
Pendidikan Teknik Informatika merupakan salah satu prodi di jurusan Elektro, Program Studi ini ada sejak tahun 2007. Lulusan Pendidikan Teknik Informatika ini diharapkan akan menjadi tenaga pendidik profesional.<br>
Tahun ini prodi PTI akan meluluskan mahasiswa untuk tahun pertama. Selain itu, saat ini PTI sedang melakukan proses akreditasi.
Semoga tahun ini PTI segera memperoleh akreditasi secepatnya...
</article>
<event><a href="#" target="_blank" title="Teknik Elektro"></a>
<b>   EVENTS :</b>
<ul>
<li><a href="#" target="_blank" title="Lomba Design Web">Lomba Design Web</a></li>
<li><a href="#" target="_blank" title="Kajur Cup">Kajur Cup</a></li>
<li><a href="#" target="_blank" title="LTDC">LTDC</a></li>
<li><a href="#" target="_blank" title="Kontes Band">Kontes Band</a></li>
</ul>
</event>
</section>
<footer>
Home | Materi | Jurnal | Agenda | Download
<br>© CopyRight Vertika Panggayuh
</footer>
</body>
</html>
Script CSS
body{
margin: 10px auto;
width : 1000px;
}
header, logo, nama, nav, search, box, section, gambar, article, event, footer{
display : block;
}
header{
height: 130px;
width: auto;
}
logo{
float : left;
padding-top: 5px;
margin-top: 5px;
margin-left : 25px;
height : 90px;
width : 100px;
background-image : url(um.jpg)
}
nama{
background-color : #990099;
padding: 35px;
font-family : Times New Roman;
font-weight: bold;
font-size : 32px;
color : white;
}
info{
float: left;
font-family : Arial ;
font-size : 20px;
font-weight: bold;
color : white;
margin-top: 1px;
margin-left: 0px;
width: 1000px;
height: 25px;
background-color : #9900FF;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
nav{
width: 1000px;
height: 30px;
background-color : #CC33CC ;
color : black;
font-family: Times New Roman;
}
search{
float : left;
margin-top: 5px;
margin-left : 20px;
width : 50px;
height: 20px;
}
box{
margin-top: 5px;
float: left;
width: 165px;
height: 20px;
}
home, materi, jurnal, agenda, download{
display: block;
float: left;
background-color: #990099;
margin-top: 10px;
float: left;
text-align : center;
color : white;
font-size: 14px;
font-family: calibri;
font-weight: bold;
}
home{
float: left;
margin-left: 372px;
width: 75px;
height: 23px;
}
materi{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
jurnal{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
agenda{
float: left;
margin-left: 2px;
width: 85px;
height: 23px;
}
download{
float: left;
margin-left: 2px;
width: 75px;
height: 23px;
}
section{
width : 1000px;
height : 415px;
background-color : #9900FF;
}
gambar{
float: left;
margin-left: 5px;
width: 270px;
height: 400px;
background-image : url(AN_diff.jpg);
}
article{
float : left;
text-align: left;
margin-left: 5px;
width: 705px;
height: 300px;
background-color : #CC99CC;
font-size : 15px;
font-family : Berlin Sans FB;
}
event{
float: left;
font-family : Times New Roman ;
font-size : 12px;
font-weight: bold;
color : black;
margin-top: 5px;
margin-left: 5px;
width: 705px;
height: 100px;
background-color : #CC33CC ;
}
footer{
border-top: 1px solid white;
padding-top: 5px;
clear : both;
height : 40px;
background-color : #990099;
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: white;
}
linkmenu a:hover {
background: 376aeb no-repeat left center; color:black;
}
list{
list-style-position: inside;
}
Hasil
membuat dasar web
Script Program HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Design Layout Sederhana HTML5</title>
<link rel="stylesheet" href="design.css" type="text/css" />
</head>
<body>
<header>
header
</header>
<nav>
nav
<button>Home</button>
<button>Article</button>
<button>Download</button>
<button>About Us</button>
</nav>
<section>
<article>-article-
</article>
<aside>
<button >L O G I N</button>
<br>
-aside-
</aside>
section
</section>
<footer>
footer
</footer>
</body>
</html>
Script CSS
body{
margin : 10px auto;
width : 900px;
border : 1px solid green ;
}
header, nav, section, article, aside, footer{
display : block;
}
header{
padding-top: 30px;
height: 50px;
border : 1px solid green;
}
nav{
padding-top: 7px;
width: 900px;
height: 30px;
border : 1px solid blue;
}
section{
width : 900px;
height : 450px;
border : 1px solid red;
}
article{
padding-top: 5px;
float: left;
margin : 20px;
width: 700px;
height: 385px;
border: 1px dashed red;
}
aside{
padding-top: 5px;
margin : 20px;
margin-left: 725px;
width: 150px;
height: 385px;
border: 1px dashed black;
}
button{
font-family : calibri;
color : blue;
height :30px;
}
footer{
clear : both;
height : 30px;
}
Hasil:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Design Layout Sederhana HTML5</title>
<link rel="stylesheet" href="design.css" type="text/css" />
</head>
<body>
<header>
header
</header>
<nav>
nav
<button>Home</button>
<button>Article</button>
<button>Download</button>
<button>About Us</button>
</nav>
<section>
<article>-article-
</article>
<aside>
<button >L O G I N</button>
<br>
-aside-
</aside>
section
</section>
<footer>
footer
</footer>
</body>
</html>
Script CSS
body{
margin : 10px auto;
width : 900px;
border : 1px solid green ;
}
header, nav, section, article, aside, footer{
display : block;
}
header{
padding-top: 30px;
height: 50px;
border : 1px solid green;
}
nav{
padding-top: 7px;
width: 900px;
height: 30px;
border : 1px solid blue;
}
section{
width : 900px;
height : 450px;
border : 1px solid red;
}
article{
padding-top: 5px;
float: left;
margin : 20px;
width: 700px;
height: 385px;
border: 1px dashed red;
}
aside{
padding-top: 5px;
margin : 20px;
margin-left: 725px;
width: 150px;
height: 385px;
border: 1px dashed black;
}
button{
font-family : calibri;
color : blue;
height :30px;
}
footer{
clear : both;
height : 30px;
}
Hasil:
Rabu, 23 Februari 2011
Membuat Tampilan Face-mu
Dibawah ini scriptnya...cekidot
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to face-mu</title>
<link type="icon" rel="icon" href="icon.png">
<style type="text/css">
.header{
height : 75px;
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
background-color:purple;
}
#tengah{
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
width: 200px;
height: 200px;
font-family : Calibri;
font-size : big;
font-weight : bold;
color: purple;
}
.footer{
padding-top : 5px;
padding-bottom : 5px;
padding-right : 200px;
padding-left : 30px;
color : white;
font-family : Calibri;
font-size : big;
background-color:purple;
}
#button_masuk , #button_daftar{
background-color : purple;
color : white;
}
#lebar{
width : 1000px;
}
.background{
height : 700px;
background-image : url(bg.bmp);
background-color : white;
background-repeat : repeat-x;
}
.login{
float : right;
color : white;
font-family : Calibri;
font-size : big;
}
#kiri {
padding: 5px;
float: left;
width: 780px;
height: 480px;
}
#kanan{
float: right;
padding: 10px;
width:500px;
height: 480px;
}
#font{
font-family : Calibri;
font-size : big;
font-weight : bold;
line-height : 30px;
color: black;
}
#logo{
float : left;
margin-top : 20px;
height : 35px;
}
</style>
</head>
<body>
<div class="header">
<div id="lebar">
<div id="logo">
<img src="facemu.png">
</div>
<div class="login">
<table>
<tr>
<td>Email</td>
<td>Password</td>
<td></td>
</tr>
<tr>
<td ><input type="text"></td>
<td ><input type="password"></td>
<td ><input type="submit" value="Masuk" id="button_masuk"></td>
</tr>
<tr>
<td ><input type="checkbox" checked>Ingat password</td>
<td >Lupa password ?</td>
</tr>
</table>
</div>
</div>
</div>
<div class="background">
<form action="indah.jpg">
<div id="kiri">
<div id="tengah">
<font size="4">Face-mu membantu Anda bertemu dengan banyak orang<br></font>
<hr style="color:purple" width="600">
<img src="jingga.jpg">
<hr style="color:purple" width="600">
<font size="3">Segera daftarkan orang disekeliling Anda<br>
</font>
</div>
</div>
</form>
<div id="kanan">
<div id="font">
<h2>Silahkan Registrasi</h2>
<form action="jingga.jpg">
<table>
<tr>
<td>Nama Depan :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Nama Belakang :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Email :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" size="35"></td>
</tr>
<tr>
<td>Ulangi Password:</td>
<td><input type="password" size="35"></td>
</tr>
<tr>
<td>Jenis Kelamin :</td>
<td><select name="kelamin">
<option >Laki-laki
<option >Perempuan
</select></td>
</tr>
</table>
</form>
<input type="submit" value="Daftar" id="button_daftar">
</div>
</div>
</div>
<div class="footer">
face-mu © 2011 - vertika
</div>
</body>
</html>
Hasilnya sebagai berikut
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to face-mu</title>
<link type="icon" rel="icon" href="icon.png">
<style type="text/css">
.header{
height : 75px;
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
background-color:purple;
}
#tengah{
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
width: 200px;
height: 200px;
font-family : Calibri;
font-size : big;
font-weight : bold;
color: purple;
}
.footer{
padding-top : 5px;
padding-bottom : 5px;
padding-right : 200px;
padding-left : 30px;
color : white;
font-family : Calibri;
font-size : big;
background-color:purple;
}
#button_masuk , #button_daftar{
background-color : purple;
color : white;
}
#lebar{
width : 1000px;
}
.background{
height : 700px;
background-image : url(bg.bmp);
background-color : white;
background-repeat : repeat-x;
}
.login{
float : right;
color : white;
font-family : Calibri;
font-size : big;
}
#kiri {
padding: 5px;
float: left;
width: 780px;
height: 480px;
}
#kanan{
float: right;
padding: 10px;
width:500px;
height: 480px;
}
#font{
font-family : Calibri;
font-size : big;
font-weight : bold;
line-height : 30px;
color: black;
}
#logo{
float : left;
margin-top : 20px;
height : 35px;
}
</style>
</head>
<body>
<div class="header">
<div id="lebar">
<div id="logo">
<img src="facemu.png">
</div>
<div class="login">
<table>
<tr>
<td>Email</td>
<td>Password</td>
<td></td>
</tr>
<tr>
<td ><input type="text"></td>
<td ><input type="password"></td>
<td ><input type="submit" value="Masuk" id="button_masuk"></td>
</tr>
<tr>
<td ><input type="checkbox" checked>Ingat password</td>
<td >Lupa password ?</td>
</tr>
</table>
</div>
</div>
</div>
<div class="background">
<form action="indah.jpg">
<div id="kiri">
<div id="tengah">
<font size="4">Face-mu membantu Anda bertemu dengan banyak orang<br></font>
<hr style="color:purple" width="600">
<img src="jingga.jpg">
<hr style="color:purple" width="600">
<font size="3">Segera daftarkan orang disekeliling Anda<br>
</font>
</div>
</div>
</form>
<div id="kanan">
<div id="font">
<h2>Silahkan Registrasi</h2>
<form action="jingga.jpg">
<table>
<tr>
<td>Nama Depan :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Nama Belakang :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Email :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" size="35"></td>
</tr>
<tr>
<td>Ulangi Password:</td>
<td><input type="password" size="35"></td>
</tr>
<tr>
<td>Jenis Kelamin :</td>
<td><select name="kelamin">
<option >Laki-laki
<option >Perempuan
</select></td>
</tr>
</table>
</form>
<input type="submit" value="Daftar" id="button_daftar">
</div>
</div>
</div>
<div class="footer">
face-mu © 2011 - vertika
</div>
</body>
</html>
Hasilnya sebagai berikut
Membuat Shape dalam CSS
Berikut ini Scriptnya...
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> Studi Kasus-Modul3</title>
<style type="text/css">
<!--
.round {background-color:purple;
-moz-border-radius:100%;
-webkit-border-radius:0%;
border:2px solid black;
padding:15px;
width:130px;
height:130px;}
.ketupat{background-color:purple;
-moz-border-radius-bottomright:10%;
-moz-border-radius-topleft:10%;
border:2px solid black;
padding:15px;
width:250px;
height:30px;
}
.bayangan{background-color:purple;
border:2px solid black;
padding:15px;
width:250px;
height:40px;
-moz-box-shadow: -5px 10px 10px #222;}
-->
</style>
</head>
<body>
<div class ="round" align="center">
Lingkaran merupakan suatu bentuk yang memiliki jari-jari..
</div><br>
<div class="ketupat">
Bentuk ketupat dengan round kiri atas dan kanan bawah.
</div><br>
<div class="bayangan" align="center">
Bentuk segiempat dengan diberi efek bayangan.
</div>
</body>
</html>
Hasilnya adalah sebagai berikut...
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> Studi Kasus-Modul3</title>
<style type="text/css">
<!--
.round {background-color:purple;
-moz-border-radius:100%;
-webkit-border-radius:0%;
border:2px solid black;
padding:15px;
width:130px;
height:130px;}
.ketupat{background-color:purple;
-moz-border-radius-bottomright:10%;
-moz-border-radius-topleft:10%;
border:2px solid black;
padding:15px;
width:250px;
height:30px;
}
.bayangan{background-color:purple;
border:2px solid black;
padding:15px;
width:250px;
height:40px;
-moz-box-shadow: -5px 10px 10px #222;}
-->
</style>
</head>
<body>
<div class ="round" align="center">
Lingkaran merupakan suatu bentuk yang memiliki jari-jari..
</div><br>
<div class="ketupat">
Bentuk ketupat dengan round kiri atas dan kanan bawah.
</div><br>
<div class="bayangan" align="center">
Bentuk segiempat dengan diberi efek bayangan.
</div>
</body>
</html>
Hasilnya adalah sebagai berikut...
Minggu, 13 Februari 2011
Membuat Desain Tabel Menggunakan Fitur Pengelompokan
Berikut Scriptnya...<!DOCTYPE HTML>
<html lang="en">
<head>
<title> PERBANDINGAN SIKAP </title>
</head>
<body>
<table border="5" cellspacing=1 frame="hsides" rules="groups">
<caption><b>PERBANDINGAN SIKAP</b></caption>
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<tr><th width="35">No.<th width="250">Spesifikasi Sikap
<th width="50">Poin
<th width="200"> Vertika
<th width="200">Agung
<th width="200">Alif
<th width="200">Rastra</tr>
<tbody>
<tr><td align="center">1
<td>Kerja Keras
<td align="center">8<td align="center">X
<td align="center">X
<td align="center">-
<td align="center">-
</tr>
<tr><td align="center">2
<td>Tekun
<td align="center">9<td align="center">X
<td align="center">X
<td align="center">X
<td align="center">-
</tr>
<tr><td align="center">3
<td>Tidak Sombong
<td align="center">6<td align="center">X
<td align="center">-
<td align="center">-
<td align="center">-
</tr>
<tr><td align="center">4
<td>Sabar
<td align="center">7<td align="center">X
<td align="center">-
<td align="center">-
<td align="center">-
</tr>
<tr><td align="center">5
<td>Pemaaf
<td align="center">10<td align="center">X
<td align="center">-
<td align="center">X
<td align="center">-
</tr>
<tbody>
<tr><td align="center">6
<td>Pemalas
<td align="center">-5<td align="center">-
<td align="center">-
<td align="center">X
<td align="center">X
</tr>
<tr><td align="center">7
<td>Ceroboh
<td align="center">-3<td align="center">-
<td align="center">-
<td align="center">X
<td align="center">X
</tr>
<tr><td align="center">8
<td>Tinggi Hati
<td align="center">-7<td align="center">-
<td align="center">X
<td align="center">-
<td align="center">X
</tr>
<tr><td align="center">9
<td>Pendendam
<td align="center">-10<td align="center">-
<td align="center">X
<td align="center">X
<td align="center">X
</tr>
<tr><td align="center">10
<td>Kurang Vitamin
<td align="center">-11<td align="center">-
<td align="center">X
<td align="center">-
<td align="center">X
</tr>
<tbody>
<tr>
<td colspan=3 align="center"><b>Jumlah Poin</b></td>
<td align="center">40</td>
<td align="center">-11</td>
<td align="center">1</td>
<td align="center">-36</td>
</tr>
</table>
<i>Source: Forbes Magazine - February. 2011 </i></br>
<br>© vertika </br>
</body>
</html>
Membuat Grafik Batang Statis
Beriku ini scriptnya....<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Grafik Batang</title>
</head>
<body>
<table border=0 align="center" cellspacing=0 cellpadding=3>
<caption><b>GRAFIK HASIL TES SD NEGERI PANDEAN</b></caption>
<tr>
<td align="right">100</td>
<td rowspan=11 bgcolor=black></td>
<td width="15" height="20" colspan=25>
</tr>
<tr>
<td align="right">90</td>
<td width="15" height="20" colspan=26></td>
</tr>
<tr>
<td align="right">80</td>
<td width="15" height="20" colspan=25></td>
</tr>
<tr>
<td align="right">70</td>
<td width ="15" rowspan=7></td>
<td width ="15" height="40" rowspan=2></td>
<td width ="15" height="140" bgcolor=yellow rowspan=7></td>
<td width ="15" height="20" rowspan=1></td>
<td width ="15" rowspan=3></td>
<td width ="15" bgcolor=purple rowspan=7></td>
<td width ="15" rowspan=7></td>
<td width ="15" rowspan=1></td>
<td width ="15" rowspan=3></td>
<td width ="15" rowspan=5></td>
<td width ="15" rowspan=5></td>
<td width ="15" rowspan=4></td>
<td width ="15" rowspan=7></td>
<td width ="15" rowspan=3></td>
<td width ="15" rowspan=3></td>
<td width ="15" rowspan=3></td>
<td width ="15" rowspan=4></td>
<td width ="15" rowspan=5></td>
<td width ="15" rowspan=7></td>
<td rowspan=5></td>
<td rowspan=6></td>
<td rowspan=6></td>
<td rowspan=4></td>
<td rowspan=3></td>
<td width ="15" rowspan=7></td>
</tr>
<tr >
<td align="right">60</td>
<td width ="15" bgcolor=green rowspan=6></td>
<td width ="15" height="120" bgcolor=red rowspan=6></td>
</tr>
<tr>
<td align="right">50</td>
<td width ="15" height="120" rowspan=5 bgcolor=red></td>
</tr>
<tr >
<td align="right">40</td>
<td width ="15" height="80" bgcolor=blue rowspan=4></td>
<td width ="15" bgcolor=yellow rowspan=4></td>
<td width="15" bgcolor=red rowspan=4></td>
<td width="15" bgcolor=yellow rowspan=4></td>
<td width="15" bgcolor=green rowspan=4></td>
<td width="15" bgcolor=purple rowspan=4></td>
</tr>
<tr >
<td align="right">30</td>
<td width ="15" height="60" bgcolor=purple rowspan=3></td>
<td width ="15" bgcolor=blue rowspan=3></td>
<td width ="15" bgcolor=blue rowspan=3></td>
</tr>
<tr >
<td align="right">20</td>
<td width ="15" height="40" bgcolor=green rowspan=2></td>
<td width ="15" bgcolor=blue rowspan=2></td>
<td width="15" bgcolor=purple rowspan=2></td>
<td width="15" bgcolor=red rowspan=2></td>
</tr>
<tr >
<td align="right">10</td>
<td width="15" height="20" bgcolor=yellow rowspan=1></td>
<td width="15" bgcolor=green rowspan=1></td>
</tr>
<tr>
<td></td>
<td height="25" colspan=25 bgcolor=black></td>
</tr>
<tr>
<td colspan=3></td>
<td colspan=5 align="center"><b>Herlambang</b></td>
<td></td>
<td colspan=5 align="center"><b>Nidhom</b></td>
<td></td>
<td colspan=5 align="center"><b>Bian</b></td>
<td></td>
<td colspan=5 align="center"><b>Sonny</b></td>
<td></td>
</table>
<br>
<br>
<table border=0 align="left" cellspacing=0 cellpadding=0>
<tr>
<td><b><i>Keterangan:</i></b></td>
</tr>
<tr>
<td bgcolor=red width="40"></td>
<td><i> : Kemampuan membaca</i></td>
</tr>
<tr>
<td bgcolor=yellow width="40"></td>
<td><i> : Kemampuan menulis</i></td>
</tr>
<tr>
<td bgcolor=green width="40"></td>
<td><i> : Kemampuan mendengar</i></td>
</tr>
<tr>
<td bgcolor=blue width="40"></td>
<td><i> : Kemampuan berbicara</i></td>
</tr>
<tr>
<td bgcolor=purple width="40"></td>
<td><i> : Kemampuan menggambar</i></td>
</tr>
</table>
<pre>
<font face="times new roman">
© vertika.com
</font>
</pre>
</body>
</html>
Jumat, 11 Februari 2011
Memanfaatkan Elemen Tabel dan Hyperlink
ini dia scriptnya, cekidot...
<!DOCTYPE HTML>
<html lang="en">
<link rel="shortcut icon" href="http://localhost/PBW/MODUL2/bug.ico">
<head>
<title>Download Dokumen</title>
</head>
<body>
<table border=0 align="center" cellspacing=0
cellpadding=10>
<caption>~~ZONA DOWNLOAD~~</caption>
<!-- Header -->
<tr>
<!-- Mengatur lebar kolom -->
<th width="30" bgcolor="#0d5d12"></th>
<th width="5"></th>
<th width="300" bgcolor="#0d5d12"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="#47f20b"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="#0d5d12"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="#0d5d12"></th></tr>
<tr>
<td rowspan=12 bgcolor="#0d5d12"></td>
<td colspan = 7 bgcolor="#47f20b"><ol>
<li><a href="www.4shared.com" title="Download Now">Foto PTI'09 OFF B</a></li>
<li><a href="www.4shared.com" title="Download Now">Foto BIOZ tour to Bali</a></li>
<li><a href="www.4shared.com" title="Download Now">Foto BIOZ tour to Blitar</a></li>
<li><a href="www.4shared.com" title="Download Now">Foto BIOZ tour to Bondowoso</a></li>
<li><a href="www.4shared.com" title="Download Now">Foto BIOZ tour to Mojokerto</a></li>
</ol>
</td>
<td rowspan=10 bgcolor="#0d5d12"></td>
</tr>
<tr>
<td colspan=12 bgcolor="#0d5d12"><p align="center"> © Vertika </b></p></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en">
<link rel="shortcut icon" href="http://localhost/PBW/MODUL2/bug.ico">
<head>
<title>Download Film</title>
</head>
<body>
<table border=0 align="center" cellspacing=0
cellpadding=10>
<caption>~~ZONA DOWNLOAD~~</caption>
<!-- Header -->
<tr>
<!-- Mengatur lebar kolom -->
<th width="30" bgcolor="#0d5d12"></th>
<th width="5"></th>
<th width="300" bgcolor="#47f20b"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="#0d5d12"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="#0d5d12"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="#0d5d12"></th></tr>
<tr>
<td rowspan=12 bgcolor="#0d5d12"></td>
<td colspan = 7 bgcolor="#47f20b"><ol>
<li><a href="www.4shared.com" title="Download Now">The Crazies</a></li>
<li><a href="www.4shared.com" title="Download Now">Harry Potter 7</a></li>
<li><a href="www.4shared.com" title="Download Now">In the Name of God</a></li>
<li><a href="www.4shared.com" title="Download Now">You Again</a></li>
<li><a href="www.4shared.com" title="Download Now">The Social Network</a></li>
</ol>
</td>
<td rowspan=10 bgcolor="#0d5d12"></td>
</tr>
<tr>
<td colspan=12 bgcolor="#0d5d12"><p align="center"> © Vertika </b></p></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en">
<link rel="shortcut icon" href="http://localhost/PBW/MODUL2/bug.ico">
<head>
<title>Download Musik</title>
</head>
<body>
<table border=0 align="center" cellspacing=0
cellpadding=10>
<caption>~~ZONA DOWNLOAD~~</caption>
<!-- Header -->
<tr>
<!-- Mengatur lebar kolom -->
<th width="30" bgcolor="#0d5d12"></th>
<th width="5"></th>
<th width="300" bgcolor="#0d5d12"><a href="film.html">Film</a></th>
<th width="30"></th>
<th width="300" bgcolor="#0d5d12"><a href="dokumen.html">Dokumen</a></th>
<th width="30"></th>
<th width="300" bgcolor="#47f20b"><a href="musik.html">Musik</a></th>
<th width="5"></th>
<th width="30" bgcolor="#0d5d12"></th></tr>
<tr>
<td rowspan=12 bgcolor="#0d5d12"></td>
<td colspan = 7 bgcolor="#47f20b"><ol>
<li><a href="www.4shared.com" title="Download Now">Rihanna - Only Girl (In The World)</a></li>
<li><a href="www.4shared.com" title="Download Now">Sm*sh - I heart You</a></li>
<li><a href="www.4shared.com" title="Download Now"> Kerispatih – Tetap Mengerti (Menunggu)</a></li>
<li><a href="www.4shared.com" title="Download Now">Ungu – Dirimu Satu</a></li>
<li><a href="www.4shared.com" title="Download Now"> Dmasiv – Semakin</a></li>
</ol>
</td>
<td rowspan=10 bgcolor="#0d5d12"></td>
</tr>
<tr>
<td colspan=12 bgcolor="#0d5d12"><p align="center"> © Vertika </b></p></td>
</tr>
</table>
</body>
</html>
Membuat WEB Sederhana dengan HTML 5
Hasil web sederhana...
berikut scriptnya...
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> WELCOME </title>
</head>
<body background="images/dasar.jpg">
<link rel="shortcut icon" href="images/jempol1.gif">
<h1>
<marquee direction=left bgcolor="green" scrolldelay=100>
<font face="Sin City">
<font color="black">...SELAMAT DATANG...</h1>
<hr/ color="purple">
</marquee>
<p align="center">
<font color="green">
<b>
<font face="Flubber" size=5>Inilah wadah apresiasi diri..
<br/>
</b>
<hr/ color="purple">
<p align="center">
<font color="purple">
<b>
<font face="a bug's life" size=4>
PROFIL
<br/>
</b>
<title>List</title>
<ol>
<li> Foto:</li><br/>
<img border=5 src="images/ve.jpg">
<li> Nama: Vertika Panggayuh</li><br/>
<hr color="purple" width="300" align="left">
<hr color="purple">
</ol>
</p>
</body>
</html>
Minggu, 06 Februari 2011
PERKEMBANGAN TEKNOLOGI INFORMASI
SEJARAH TEKNOLOGI INFORMASI
Ø Natural / manual
- Menggunakan tenaga manusia
Ø Mekanis
- Peralatan berbentuk mekanik yang digerakkan oleh tangan manusia
- Muncul kartu perforasi (Hollerith, 1889), yang berfungsi mempercepat perhitungan sesnsus.
Ø Elektronis
- Peralatan yang bekerja secara elektronik
- Terjadi perkembangan computer:
· Komputer generasi I
o ENIAC (Electronic Numerical Integrator And Computer)
· Komputer generasi II
o Menggunakan transistor pada tahun 1956
o Menggantikan bahasa mesin dengan bahasa assembly
o Ada bahasa pemrograman, misal COBOL, FORTRAN, ALGOL
o Contoh computer : UNIVAC
· Komputer generasi III
o Penggunaan transistor menyebabkan panas
o Munculnya IC (Integrated Circuit)
o Munculnya Microprocessor pertama (1971)
o Menggunakan
· Komputer generasi IV
o Tujuan lebih jelas yaitu mengecilkan sirkuit sedangkan kemampuan ditingkatkan.
o LSI (Large Scale Integration)
Dapat memuat ratusan komponen dalam sebuah chip.
· Komputer Generasi V (1980)
o Memuat ribuan komponen dalam sebuah chip (VLSI).
· Komputer Generasi VI (sekarang)
o Meningkatkan jumlah tersebut menjadi jutaan (ULSI).
PERBANDINGAN KOMPUTER DARI GENERASI PERTAMA – KELIMA
Ø Ukuran semakin kecil
Ø Harga semakin murah
Ø Kecepatan semaikin tinggi
Ø Memori semakin besar
KLASIFIKASI KOMPUTER
Ø Supercomputer
Ø Mainframe (digunakan di perusahaan)
Ø Workstation
Ø Microcomputer
Dimiliki secara personal, missal: computer, laptop, PDA (Personal Digital Computer )
Ø Microcontroller
Digunakan pada robot, kulkas, AC.
Perbedaan processor, microprocessor, dan microcontroller:
- Processor merupakan pengendali suatu computer/ PC.
- Microprocessor: hampir sama dengan processor tapi memiliki ukuran yang lebih kecil. Contoh: pada simulator.
- Microcontroller: sudah mencangkup microprocessor dengan tujuan yang lebih khusus, misalnya untuk robot dan kulkas.
Langganan:
Postingan (Atom)
