Kode HTML (tugasLoginForm.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>Login Form by_Venty Yulita</title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:380px;
height:330px;
z-index:1;
left: 449px;
top: 136px;
background-color: #00F8FE;
border: 2px solid Blue;
}
#apDiv3 {
position:absolute;
width:80px;
height:25px;
z-index:2;
left: 289px;
top: 274px;
}
.style3 {
font-size: 10px;
font-weight: bold;
}
#apDiv2 {
position:absolute;
width:412px;
height:115px;
z-index:2;
top: 0px;
left: 2px;
}
#header{
width:380px;
height:98px;
}
#footer{
width:380px;
height:40px;
}
body {
background-image: url(GAMBARKU.JPG);
}
</style>
<script type="text/javascript">
function error1()
{
alert('Masukkan User Name dan Password Terlebih Dahulu
');
}
function check()
{
if(form1.pass.value == "" || form1.user.value=="")
{
error1();
}
}
</script>
</head>
<body onLoad="document.form1.user.focus();">
<form name="form1" method="post" action="check.php">
<div id="apDiv1">
<div id="header">
</div>
<div>
<div align="center"><strong><br>User Name :</strong>
<br>
<input type="text" name="user" size="35" value=""
style="background-color:#FDF7D1">
<br>
<br>
<strong>Password : </strong>
<br>
<input type="password" name="pass" size="35"
style="background-color:#FDF7D1">
<br>
<br>
</div>
</div>
<br>
<div id="apDiv3">
<input type="submit" name="submit" value=" L O G I N "
onClick="check()">
</div>
<div id="footer" align="left"><br>
</div>
</div>
</form>
</body>
</html>
Script PHP (check.php)
<!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">
<head>
<title>Form Administrator</title>
</head>
<body>
<?php
if(($_POST['user']=='vjline') AND
($_POST['pass']=='ituaku')) {
echo 'Sukses, Anda Telah Masuk Halaman Administrator
Dengan User Name :'.$_POST['user'];
echo '<br><br>Hallo, Mr/Mrs ' . $_POST['user'];
}
else {
echo "<br><br><br><body text='red'><strong><center>Ada
Kesalahan Pada Waktu Anda Login...!<br><br><a
href='tugasLoginForm.html'><h4>Kembali Ke
Login</h4></a></center></strong></body>";
}
?>
</body>
</html>
» Read More...
Java script:
<body>
<?php
$rows = 1;
$columns = 1;
$cells = 1;
?>
<?php $rows = (int) $_POST["totalBaris"]; ?>
<?php $columns = (int) $_POST["totalKolom"]; ?>
<?php $cells = (int) $_POST["totalSel"]; ?>
You pick <?php echo $rows; ?> rows,<br />
You pick <?php echo $columns; ?> columns,<br />
and you need <?php echo $cells; ?> cells,<br />
<br /><br />
<?php
$width = $columns * 75;
echo "<table width=".$width." border=1>";
$rw = 0;
$cel = 1;
while ($rw < $rows && $cel <= $cells)
{
echo "<tr>";
$cl = 0;
while ($cl < $columns)
{
if ($cel <= $cells)
{
echo "<td><div align=center>".$cel."</div></td>";
$cel++;
}
$cl++;
}
echo "</tr>";
$rw++;
}
echo "</table>";
?>
</body>
script html:
<body>
<form method="post" action="GenerateSel.php">
<p><font face="Bauhaus 93" color="#FF0000" size="5"><strong>GENERATE SEL TABEL</strong></font><br></p>
<table width="277" border="0">
<tr>
<td width="89">Jumlah Baris</td>
<td width="172"><strong>: </strong><input name="totalBaris" type="text" id="totalBaris" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr>
<td><label>Jumlah Kolom</label></td>
<td><strong>: </strong><input name="totalKolom" type="text" id="totalKolom" onKeyUp="getmax();" onfocus="this.select();"></td>
</tr>
<tr>
<td>Jumlah Sel</td>
<td><strong>: </strong><input name="totalSel" type="text" id="totalSel" onKeyUp="getmax();" onFocus="this.select();"></td>
</tr>
<tr>
<td>Sel Maksimal</td>
<td><strong>: </strong><input name="jmlSelMax" type="text" id="jmlSelMax" readonly="true" style="background-color:#999999">
</td>
</tr>
<tr>
<td>
<div align="center">
<br />
<input type="reset" name="Reset" value="Reset">
</div></td>
<td>
<div align="right">
<br />
<input type="submit" name="Generate" value="Generate">
</div></td>
</tr>
</table>
</form>
<script language="JavaScript" type="text/javascript">
<!--
function getmax() {
var R = parseInt(document.getElementById('totalBaris').value);
var C = parseInt(document.getElementById('totalKolom').value);
var X = parseInt(document.getElementById('totalSel').value);
var cellmax = document.getElementById('jmlSelMax');
var total = 0;
total = R * C;
cellmax.value = new String(total);
if (X > total)
{
alert('Jumlah sel yang anda inginkan melewati batas maksimal sel =' + total);
document.getElementById('totalSel').value = new String();
}
}
Tampilan keluaran:
DOWNLOAD TUTORIAL SELENGKAPNYA...
» Read More...
PHP kepanjangan dari Hypertext Preprocessor, PHP sendiri dibuat oleh Rasmus Lerdorf, PHP bersifat open source dan telah digunakan oleh hampir seluruh web developer di seluruh dunia, situs resmi php bisa dikunjungi di www.php.net. Karena sifatnya yang open source dan semakin banyaknya user membuat bahasa pemprogaman ini mengalami perkembangan yang sangat cepat. Sintak atau strukturnya hampir mirip dengan bahasa pemprogaman C, Java dan Perl sehingga dengan begitu bagi mereka yang sudah mempelajari bahasa tersebut tidak akan mengalami kesulitan, selain itu bagi para pemula yang baru memulai bahasa pemprogaman web rasanya PHP turut diperhitungkan, karena pemanfaatan bahasa PHP tidak hanya sekedar untuk web dan aplikasinya tetapi sudah merambah kedunia desktop windows, namanya yaitu PHP GTK.
Fungsi pass by value dan pass by reference adalah :
• Fungsi adalah subprogram/subrutin program yang terdiri dari sekumpulan perintah yang akan melaksanakan suatu tugas tertentu
• Fungsi memungkinkan program menjadi lebih terstruktur dan juga memudahkan pelacakan kesalahan.
• Menggunakan fungsi akan mempersingkat waktu pemrogram untuk menuliskan sekumpulan perintah yang sama berkali-kali
Sintaks:
function nama_fungsi($arg1, $arg2, .., arg_n)
{
blok pernyataan fungsi
}
Keterangan:
• Nama_fungsi adalah nama yang akan digunakan untuk memanggil fungsi
• $arg1, $arg2, …, $arg_n adalah argumen-argumen (parameter) yang akan disertakan
pada saat pemanggilan fungsi untuk diproses dalam fungsi. $arg dapat berupa tipe data integer, float atau $variabel.
Blok pernyataan fungsi adalah pernyataan-pernyataan yang terdapat dalam apitan tanda
({ }) dimana dikerjakan fungsi untuk tugas tertentu.
Contoh:
>?
$x=2+3;
$y=$x+5;
echo "$y
";
$x=2+3;
$y=$x+5;
echo "$y
";
$x=2+3;
$y=$x+5;
echo "$y
";
$x=2+3;
$y=$x+5;
echo "$y
";
?<
Jika kita perhatikan kode di atas, maka penjumlahan yang sama berulang-ulang dituliskan dan merupakan pemborosan. Dengan adanya fungsi maka program diatas bisa dibuatkan ke dalam fungsi dan bisa dipanggil beberapa kali.
PASS BY VALUE
Argumen fungsi yang dilewatkan secara pass by value (default dalam php) berarti
membuat copy dari argumen yang asli sehingga argumen asli tersebut tidak ikut berubah
dengan adanya proses pada fungsi terhadap argumen tersebut.
Secara default, semua nilai yang di-pass masuk atau keluar dari fungsi adalah passing by value, bukan by reference. Ini berarti PHP membuat copian dari nilai original dan nilai copian itulah yang kita akses dan kita manipulasi, bukan nilai originalnya. Dengan begitu bagaimanapun kita mengubah nilai itu, tidak akan mengubah nilai originalnya.
Berikut contoh dari fungsi pass by value :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>passbyvalue</title>
</head>
<body>
<?php
function jumlah($nilai) {
$nilai++;
}
$input=30;
jumlah($input);
echo $input;
?>
</body>
</html>
Simpan dengan nama passbyval.php dan berikut penjelasannya :
Pada saat fungsi jumlah dipanggil,
jumlah($input);
maka fungsi tersebut akan memasukkan nilai dari variabel $input kedalam argumennya, jadi disini argumen fungsi jumlah adalah 30 (ini adalah nilai aslinya). Selanjutnya PHP meng-copy nilai asli tersebut, kemudian hasil copyan-nya digunakan untuk proses manipulasi fungsi, sedangkan nilai yang asli dibiarkan tidak berubah. Proses manipulasinya sebagai berikut:
$nilai++;
$nilai = $nilai + 1
$nilai = 30 + 1
$nilai = 31
Untuk output,
echo $input;
nilai variabel $input yang diambil disini adalah nilai variabel aslinya, sehingga hasil manipulasi fungsi tadi tidak dipakai, karena bukan nilai asli. Jadi outputnya adalah 30. Contoh tampilan terlihat pada Gambar 1 dibawah ini:
Gambar 1. PASS BY VALUE
PASSING BY REFERENCE
Argumen fungsi yang dilewatkan secara pass by reference berarti membawa argumen asli ke dalam fungsi sehingga argumen asli tersebut akan ikut berubah dengan adanya proses
pada fungsi terhadap argumen tersebut.
Berbeda dengan passing by value yang bersifat mengkopi, passing by reference memberikan nilai aslinya untuk diakses dan dimanipulasi, dengan contoh yang sama seperti diatas, kita akan modifikasi menjadi mekanisme passing by reference.
Untuk mengubah jadi passing by reference, kita hanya cukup menambahkan operator & pada argumennya.
Berikut contoh dari passing by reference :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>passbyreference</title>
</head>
<body>
<?php
function jumlah(&$nilai) {
$nilai++;
}
$input=30;
jumlah($input);
echo $input;
?>
</body>
</html>
Simpan dengan nama passbyref.php dan berikut penjelasannya:
Sesuai dengan penjelasan passing by reference diatas, nilai yang diakses & dimanipulasi adalah nilai aslinya, dengan begitu hasil manipulasi fungsilah yang gunakan sebagai outputnya, yaitu 31.
Tampilan passbyref dapat dilihat pada Gambar 2. dibawah ini:
Gambar 2. PASSING BY REFERENCE
DOWNLOAD TUTORIAL LENGKAP
» Read More...
DHTML dan JavaScript : Form Pemesanan
Gambar. Desain Form Pemesanan Makanan dan Minuman
DHTML (Dynamic HTML) merupakan suatu teknik untuk menciptakan halaman web yang interaktif dengan cara mengombinasikan elemen-elemen seperti HTML, style sheet, dan scripting. Jadi, DHTML bukanlah suatu jenis bahasa pemrograman melainkan hanya sekadar istilah saja. Pembuatan DHTML dapat memanfaatkan JavaScript. JavaScript terbentuk atas
elemen-elemen fundamental. Dengan menggunakan JavaSript memungkinkan Anda untuk menampilkan Kotak Dialog, Dukungan Scripting, Merujuk Elemen, Event, Linked Scripting, dan lain sebagainya. Berikut pemanfaatan JavaScript didalam penggunaan kalkulator.
Berikut source code HTML-nya: (formPemesanan.html)
<script language="JavaScript" type="text/javascript">
<!--
function hitungPesan(){
var nota = document.form2;
var hargaBakso = 12000 * eval(nota.qBakso.value);
var hargaSoto = 10000 * eval(nota.qSoto.value);
var hargaMie = 15000 * eval(nota.qMie.value);
var hargaDegan = 5000 * eval(nota.qDegan.value);
var hargaCampur = 7000 * eval(nota.qCampur.value);
var jumlahTotal = hargaBakso + hargaSoto + hargaMie + hargaDegan + hargaCampur;
if (jumlahTotal > 50000){
nota.Total.value = jumlahTotal;
nota.Diskon.value = 10000;
nota.Bayar.value = jumlahTotal - eval(nota.Diskon.value);
} else {
nota.Total.value = jumlahTotal;
nota.Diskon.value = 0;
nota.Bayar.value = jumlahTotal - eval(nota.Diskon.value);
}
}
function resetForm(){
document.form2.reset();
}
//-->
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Warung "Cangkruk"</title>
</head>
<body>
<!--Letakkan Listing Code JavaScript disini-->
<h3>Form Pemesanan Berbasis JavaScript</h3>
<form name="form2" action="#">
<table border="1px">
<tr>
<th>No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td width="15px">1</td>
<td width="200px">Bakso Istimewa</td>
<td width="85px" bgcolor="#F87267">@ <input type="text" name="bakso" value="12000" size="6" disabled="true"/></td>
<td width="150px"><input type="text" name="qBakso" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td bgcolor="#F87267">@ <input type="text" name="soto" value="10000" size="6" disabled="true"/></td>
<td><input type="text" name="qSoto" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td bgcolor="#F87267">@ <input type="text" name="mie" value="15000" size="6" disabled="true"/></td>
<td><input type="text" name="qMie" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td bgcolor="#F87267">@ <input type="text" name="degan" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qDegan" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td bgcolor="#F87267">@ <input type="text" name="campur" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qCampur" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr bgcolor="#F87267">
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="Total" disabled="true" /></td>
</tr>
<tr bgcolor="#F87267">
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="Diskon" disabled="true" /></td>
</tr>
<tr bgcolor="#F87267">
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="Bayar" disabled="true" align="right"/></td>
</tr>
</table><br/>
<input type="button" value="BATAL" onClick="resetForm()" />
</form>
</body>
</html>
Download Selengkapnya DISINI
» Read More...
DHTML dan JavaScript : Kalkulator Sederhana
Gambar. Desain Kalkulator Sederhana
DHTML (Dynamic HTML) merupakan suatu teknik untuk menciptakan halaman web yang interaktif dengan cara mengombinasikan elemen-elemen seperti HTML, style sheet, dan scripting. Jadi, DHTML bukanlah suatu jenis bahasa pemrograman melainkan hanya sekadar istilah saja. Pembuatan DHTML dapat memanfaatkan JavaScript. JavaScript terbentuk atas
elemen-elemen fundamental. Dengan menggunakan JavaSript memungkinkan Anda untuk menampilkan Kotak Dialog, Dukungan Scripting, Merujuk Elemen, Event, Linked Scripting, dan lain sebagainya. Berikut pemanfaatan JavaScript didalam penggunaan kalkulator.
Berikut source code HTML-nya: (Kalkulator.html)
<script language="JavaScript" type="text/javascript">
<!--
function hitung(){
var myForm = document.form1;
var x=eval(myForm.x.value);
var y=eval(myForm.y.value);
var pil= myForm.opt.value;
if (pil == "tambah") {
var z = x + y;
}else if (pil == "kurang") {
var z = x - y;
} else if (pil == "kali") {
var z = x * y;
} else if (pil == "bagi") {
var z = x / y;
} else if (pil == "pangkat") {
var z = Math.pow(x, y);
}
myForm.hasil.value = z;
myForm.x.value = "";
myForm.y.value = "";
}
function resetForm(){
document.form1.reset();
}
//-->
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Kalkulator</title>
</head>
<body>
<!--Letakkan listing code Javascript disini-->
<h3>Kalkulator Berbasis Javascript</h3>
<form name="form1" action="#">
<input type="text" name="x" />
<select name="opt">
<option value="tambah"> + </option>
<option value="kurang"> - </option>
<option value="kali"> * </option>
<option value="bagi"> / </option>
<option value="pangkat"> ^ </option>
</select>
<input type="text" name="y" />
<input type="button" value="=" onClick="hitung()" />
<input type="text" name="hasil" disabled="true" /><br/>
<input type="button" value="Refresh" onClick="resetForm()" />
</form>
</body>
</html>
download selengkapnya DISINI
» Read More...
Gambar. Desain Halaman Web Interaktif
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen. Rekomendasi CSS menguraikan tiga jenis style:
Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
Selain mengulas tentang pemanfaatan CSS, bagian ini juga menekankan pada pembuatan desain dengan menggunakan division. Bagaimanapun, untuk menghasilkan desain halaman web yang baik, penggunaan tabel tidak disarankan dan sebagai gantinya adalah dengan memanfaatkan division.
Berikut source code HTML-nya: (halamanWebCommunity.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="layoutCommunity.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Forum | Blogs | What's New? | Log In
</div>
<div id="logo">
<img src="logo_um.png" width="60"/>
</div>
<div id="site-title">
<h2>UM COMMUNITY</h2>
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Sekitar Forum</a></li>
<li><a href="#">Kesehatan dan Tips</a></li>
<li><a href="#">Teknologi Informasi dan Komunikasi</a></li>
<li><a href="#">Mahasiswa dan Alumni</a></li>
<li><a href="#">Bisnis</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">
</div>
<div id="content-main">
<h3>Presentasi dari TecQuipment Ltd, UK</h3>
<hr />
<p class="style1">
Minggu, 1 Maret 2010
<p>
UM selenggarakan lomba desain Brand Name Logo, hadiah total 50 juta.
Universitas Negeri Malang (UM) menyelenggarakan Lomba Perancangan Brand Name Logo dan Desain Sticker �UM: The Learning University�. Kegiatan yang sasaran utama audiens ialah komunitas bisnis, masyarakat umum peminat pendidikan, para pelajar SMA, dan civitas akademika UM ini berhadiah total 50 juta. Karya yang dilombakan terdiri atas 2 kategori yaitu (a) lomba brand name logo dan (b) lomba desain sticker. Jenis lomba yang diadakan ini antara lain, Perancangan brand name logo Universitas Negeri Malang (UM),
Read more...
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Kepala Pusat TIK UM, Dr. Muladi, ST, MT: Peningkatan Peringkat Web UM Menjadi Motivasi Kedepan</a></li>
<li><a href="#">Pembelajaran Pengelolaan Arsip di Unit Arsip UM</a></li>
<li><a href="#">2010 UM Terima Dana BLOC GRANT 7 Milyar Lebih</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>Copyright @ 2010 Universitas Negeri Malang.</b></p>
</div>
</div>
</body>
Berikut ini code CSS-nya: (layoutCommunity.css)
* { margin: 0; }
body { margin:5px auto; padding:0; font:0.72em/150% verdana; }
#wrapper { margin:auto; width:980px;}
#header { height:80px; margin:0px auto;background:#000;}
#header-content{height:70px; margin:auto; background:#fff url(bg_top.gif);}
#menu-top { font-size:small; height:20px; float:right; padding:0px 50px; font-weight:bold;}
#logo { float:left; margin:10px 10px 10px 50px; height:50px;}
#site-title h2{ float:left; padding:0px 10px; height:30px; margin:20px 0px; font:2.1em/100% 'Verdana'; font-weight: bold;}
#search { clear:right; float:right; margin:20px 50px 0px auto; height:30px; font-weight:bold;}
#inner { float:left; margin:0px;}
#footer { clear:both; height:60px; background:#FF0000;}
#footer p { text-align:center;}
#sidebar { float:left; width:200px; height:400px; background-color:#FFFFCC}
#content { float:right; width:780px; height:400px; background:#FFF}
#content-top { clear:both; margin:auto; width:600px; height:99px; border: 2spx solid black; background-image:url(banner.png)}
#content-main { float:left; margin:auto; width:480px; height:240px;}
#content-main p, h3{ padding: 10px 20px 0px 20px; text-align:justify;}
.style1 {font-size:x-small}
#content-main hr{ width:440px; color:#FF9900; margin: 10px 20px 0px 20px;}
#content-right { float:right; margin:10px auto; width:260px; border: 3px solid black; background:#FF0000}
#content-right h3{ padding: 10px 20px 0px 20px; text-align:justify;}
#content-right ul{ padding: 10px 20px 20px 40px; list-style:square;}
#leftmenu ul { width:200px; list-style-type:none; padding:0; margin:0;}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active { padding-left:15px; text-decoration:none;}
#leftmenu a { padding: 5px 0px 5px 15px; display:block; background:#6cae15 no-repeat left center; margin: 0px 0px 1px; color:#000 }
#leftmenu a:hover { background:#5e9711 no-repeat left center; color:#fff}
SELAMAT MENCOBA KAWAND
» Read More...
Gambar. Desain Halaman Web Interaktif
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen. Rekomendasi CSS menguraikan tiga jenis style:
Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
Selain mengulas tentang pemanfaatan CSS, bagian ini juga menekankan pada pembuatan desain dengan menggunakan division. Bagaimanapun, untuk menghasilkan desain halaman web yang baik, penggunaan tabel tidak disarankan dan sebagai gantinya adalah dengan memanfaatkan division.
Berikut source code HTML-nya: (layoutHalamanWeb.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="layout1.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
sidebar
</div>
<div id="content">
<div id="content-top">
Top Content
</div>
<div id="content-main">
Main Content
</div>
<div id="content-right">
Right Content
</div>
</div>
</div>
<div id="footer">
Footer
</div>
<font color="black" face="time new roman" size="4">by:Venty Yulita Fajarwati</font>
</div>
</body>
Berikut ini code CSS-nya: (layout1.css)
#wrapper { margin:auto; width:980px; border:2px solid black;}
#header { height:80px; border:1px solid red}
#inner { float:left; margin:5px 0; border:1px solid green}
#footer { clear:both; height:50px; border:1px solid blue}
#sidebar { float:left; margin-right:10px; width:200px; height:400px; border:1px solid orange;}
#content { float:left; width:760px; height:400px; border:1px solid orange;}
#content-top { clear:both; margin:auto; width:760px; height:120px; border:1px dotted blue;}
#content-main { float:left; margin:auto; width:480px; height:260px; border:1px dotted blue;}
#content-right { float:right; margin:auto; width:260px; height:180px; border:1px dotted blue;}
SELAMAT MENCOBA KAWAND...
» Read More...
Gambar. Desain Laporan Berbasis Tabel
Telah kita ketahui bahwasannya elemen-elemen fundamental dari HTML/XHTML, antara lain:
Link : Untuk mengaitkan satu dokumen dengan dokumen-dokumen lainnya (atau bisa juga mengaitkan blok-blok didalam satu dokumen)
Tabel : Untuk menghasilkan data dalam bentuk tabular.
Frame : Untuk membagi halaman web secara independent
Form : Untuk menghasilkan form masukan data.
Pada tutorial HTML kali ini, kita akan menggunakan salah satu elemen fundamental dari HTML yaitu tabel. Melalui tabel, kita coba mengkerasikannya dalam berbagai bentuk. Salah satu yang telah saya kerjakan yaitu mendesan laporan menggunakan tabel.
Download source code Desain Laporan Berbasis Tabel
» Read More...
Gambar. Kreasi Grafik Batang Berbasis Tabel
Telah kita ketahui bahwasannya elemen-elemen fundamental dari HTML/XHTML, antara lain:
Link : Untuk mengaitkan satu dokumen dengan dokumen-dokumen lainnya (atau bisa juga mengaitkan blok-blok didalam satu dokumen)
Tabel : Untuk menghasilkan data dalam bentuk tabular.
Frame : Untuk membagi halaman web secara independent
Form : Untuk menghasilkan form masukan data.
Pada tutorial HTML kali ini, kita akan menggunakan salah satu elemen fundamental dari HTML yaitu tabel. Melalui tabel, kita coba mengkerasikannya dalam berbagai bentuk. Salah satu yang telah saya kerjakan yaitu mengkreasikan grafik batang dengan menggunakan tabel.
Download source code HTML Kreasi Grafik Batang Berbasis Tabel
» Read More...
