Kamis, 12 Juli 2012

yummy...

es LingLing Fresh @LingLing FruitBar...yuk dicobaa... :)
Es ini sangat segar,,berisi aneka buah pilihan, diantaranya buah kiwi, strawbery, buah naga, anggur, apel, peer.. minuman ini bisa dikategorikan sebagai soup buah dengan kuah jus jeruk dan susu..
Dijamin rasanya maknyuuuuusssss...

Yang ingin kesana silahkan ajak saya ya... :D
Diposting oleh Vertika di 19.33 0 komentar
Label:

Minggu, 13 Maret 2011

Program sederhana Men-generate sel tabel

Masih Proses...
Diposting oleh Vertika di 20.58 0 komentar
Label:

Passing argumen

Masih proses...
Diposting oleh Vertika di 20.58 0 komentar
Label:

Membuat Fungsi Greeting

Masih Proses...
Diposting oleh Vertika di 20.57 0 komentar
Label:

Generate table

Masih Proses...
Diposting oleh Vertika di 20.53 0 komentar
Label:

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>
&copy; 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:
Diposting oleh Vertika di 18.13 0 komentar
Label:

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:
Diposting oleh Vertika di 17.53 0 komentar
Label:

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> &nbsp 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>&copy 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
Diposting oleh Vertika di 04.32 0 komentar
Label:

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:
Diposting oleh Vertika di 04.22 0 komentar
Label:

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 &copy; 2011 - vertika
</div>
</body>
</html>


Hasilnya sebagai berikut

Diposting oleh Vertika di 19.57 0 komentar
Label:

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...


Diposting oleh Vertika di 17.56 0 komentar
Label:

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>&copy; vertika </br>

</body>
</html>
Diposting oleh Vertika di 03.17 0 komentar
Label:

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">
&copy; vertika.com
</font>
</pre>
</body>
</html>

Diposting oleh Vertika di 03.11 0 komentar
Label:

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"> &copy; 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"> &copy; 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"> &copy; Vertika </b></p></td>
</tr>
</table>
</body>
</html>
Diposting oleh Vertika di 22.59 0 komentar
Label:

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>



Diposting oleh Vertika di 22.14 0 komentar
Label:

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.

Diposting oleh Vertika di 19.17 0 komentar
Langganan: Postingan (Atom)