aM_aM ZoNe

Kamis, 11 Maret 2010

Minum Air Membuat Sehat

Semua orang pasti setuju bahwa air sangat diperlukan untuk kelangsungan hidup makhluk hidup. Air diperlukan oleh tumbuhan sehingga menjadi produsen bagi binatang atau manusia juga sebagai elemen dasar dalam mata rantai kehidupan. Bagi sebagian binatang, selain untuk minum, air juga menjadi tempat tinggal mereka. Tidak mengherankan bahwa bumi diciptakan dengan sebagian besar terdiri dari air. Begitu juga, dengan tubuh kita, 80% terdiri dari air.
Manfaat Minum Air
Mengingat pentingnya air, maka anjuran yang diberikan adalah agar kita meminum air sedikitnya 8 gelas sehari atau sekitar dua hingga dua setengah liter air. Berikut adalah beberapa manfaat air bagi tubuh:

• Membuat tubuh lebih sehat
Apabila asupan air mencukupi, hal ini dapat membantu agar distribusi nutrisi ke seluruh tubuh menjadi lancar sehingga semua sel dalam tubuh dapat memperbaiki diri dengan nutrisi tersebut. Dengan minum air sesuai anjuran juga akan meringankan kerja ginjal dan hati sehingga dapat membantu kita terhindar dari penyakit ginjal dan hati.
• Memperlancar pencernaan
Minum air membantu pembuangan racun hasil metabolisme lebih lancar. Ini akan membantu kita terhindar dari penyakit pada pencernaan seperti sakit maag dan sembelit.
• Menambah kecantikan alami
Kekurangan air akan membuat kulit kita terlihat kering dan berkerut. Air akan membantu menjaga kulit agar tetap kenyal sehingga terlihat awet muda dan cantik alami.
• Membuat langsing
Air dapat menurunkan berat badan. Mengapa? Karena air tidak berkalori, bebas lemak, bebas kolesterol, dan rendah natrium.Selain itu, air membantu tubuh menguraikan lemak yang tersimpan.

Bagi yang sedang berdiet, air dapat menjadi teman yang tidak boleh dilupakan. Dengan meminum air hangat sebelum makan, akan membantu kita merasa kenyang sehingga akan mengurangi selera makan dan mengurangi porsi makan kita. Minum air juga tidak akan membuat gemuk karena air tidak mengandung kalori, gula dan lemak.
• Meningkatkan kesuburan
Untuk Anda yang sedang merencanakan kehamilan, ternyata air dapat membantu meningkatkan kesuburan karena akan merangsang produksi hormon testoteron pada pria dan hormon estrogen pada wanita.
Air Minum
Cara Agar Anda Sering Minum Air
Selalu bawa persediaan air minum, misalnya sebotol air.
Setelah makan, jangan lupa minum segelas air.
Minum air sebelum, selama dan setelah berolahraga atau melakukan kegiatan yang berat.
Pilihlah minum air saat beristirahat ketimbang minum kopi, soft drink dan minuman manis lainnya.
Mengingat pentingnya air, pertanyaan selanjutnya adalah bagaimana memilih air minum yang sehat. Bila air minum tidak bersih bisa menyebabkan diare atau penyakit lainnya. Sedangkan saat ini ada berbagai jenis air minum yang ditawarkan seperti air tanah, air dari Perusahaan Air Minum (PAM), Air Minum Dalam Kemasan (AMDK), air mineral dan air heksagonal. Apa saja perbedaan dari masing-masing jenis air tersebut?
• Air tanah
Bagi penduduk di pedesaan air minum dapat diambil dari air tanah yang diambil dari sumur atau sungai. Tetapi, perlu diwaspadai bila sumber air tersebut berada di kawasan industri atau lokasi pembuangan sampah. Sedangkan di kota-kota besar, misalnya Jakarta, air tanah tidak lagi layak untuk dikonsumsi, karena banyak mengandung bakteri Eschericia coli (E-coli), kandungan besi (Fe) dan Mangan (Mn) serta kadar keasaman (pH) yang melebihi kriteria air minum sehat. Ini disebabkan karena banyaknya polutan yang dihasilkan manusia sehingga merusak air tanah.
• Air PAM
Untuk dapat menghasilkan air yang baik, Perusahaan Air Minum (PAM) sebenarnya memiliki teknologi yang sesuai dengan pengolahan air minum, tetapi ini juga dipengaruhi oleh kualitas dari air yang dijadikan sebagai bahan baku apakah air tersebut tercemar atau tidak.
• Air Minum Dalam Kemasan (AMDK)
Adalah air yang diolah dengan teknologi khusus seperti teknologi sterilisasi kemudian dikemas dalam botol plastik atau wadah lainnya. Izin untuk perusahaan ini biasanya baru akan dikeluarkan bila hasil uji laboratorium baik. Agar mendapat air minum yang baik, perusahaan perlu selalu melakukan kontrol terhadap hasil air minum dan merawat peralatan produksinya dengan baik.
• Air Mineral
Adalah air yang diperoleh dari sumbernya, umumnya dari pegunungan dan langsung dikemas sehingga terdapat mineral di dalamnya dengan kadar tertentu yang diperbolehkan.
• Air heksagonal
Air jenis ini memiliki rangkaian molekul yang terstruktur, berbentuk segi enam sehingga disebut heksagonal. Air jenis ini lebih mudah diserap tubuh, lebih cepat menghantar nutrisi untuk seluruh tubuh, membuang racun sisa metabolisme, serta akan mengoptimalkan metabolisme tubuh.

Secara alami, air ini terdapat dalam sumur air zamzam di Mekah, di pegunungan Alpen, Swiss, dan di Lourdes, Perancis. Selain secara alami, air heksagonal dapat dibuat dengan menggunakan mineral-mineral alami yang dapat membantu pembentukan struktur heksagonal dalam air. Suhu saat pembentukan juga harus diperhatikan karena dapat menyebabkan struktur tersebut menjadi terurai sehingga menjadi air biasa.

Air heksagonal umumnya dijual dalam kemasan, tetapi minuman seperti ini dipercaya lebih menyehatkan untuk tubuh juga dapat mencegah penuaan. Dengan meminum air heksagonal dianggap dapat meningkatkan vitalitas, memperlambat proses penuaan dan mencegah penyakit. Hanya saja, air jenis ini umumnya lebih mahal dibandingkan jenis lainnya.
Sekarang, Anda dapat menentukan mana air minum yang layak diminum. Segera tolak apabila air berwarna, keruh atau berbau. Sedangkan bila membeli air yang dikemas, perhatikan segel tidak terbuka atau bocor.
Berapa Banyak yang Harus Diminum?
Tanpa mengkonsumsi air secara cukup, tubuh dapat mudah terserang penyakit. Maka, jangan lupa untuk mengkonsumsinya minimal 8 gelas setiap hari atau sekitar minimal dua liter air. Setiap hari, sekitar dua liter air terbuang melalui kulit, paru-paru, usus, dan ginjal.
Air yang hilang ini harus diganti agar kita tidak mengalami dehidrasi. Jika Anda kekurangan air atau mengalami dehidrasi, maka beberapa tanda seperti sakit kepala, lelah, pegal, air seni yang pekat, tidak tahan terhadap panas, serta mulut dan mata yang kering akan terjadi pada tubuh Anda.
Berapa banyak air yang harus diminum setiap hari? Bagi orang yang sehat membutuhkan minimal dua sampai dua setengah liter air sehari. Jika Anda berolahraga, maka Anda akan membutuhkan lebih banyak air. Demikian juga jika Anda tinggal di iklim panas. Bagi mereka yang mengalami obesitas, perlu minum segelas air ekstra untuk setiap kelebihan 10 kilogram dari berat badan ideal. Namun, sebaliknya bagi beberapa penderita penyakit tertentu seperti gagal jantung atau gangguan fungsi ginjal, maka beberapa dokter menyarankan untuk tidak terlalu banyak minum air. Ini pun harus dengan rekomendasi dokter ahli.
Jangan gantikan air dengan cairan lain seperti jus buah. Meski membuat tubuh sehat, jus buah mengandung kalori. Demikian juga, minuman yang mengandung gula dan susu, juga akan membuat tubuh membutuhkan banyak air untuk mencernanya. Apalagi jika Anda minum banyak minuman beralkohol atau minuman berkafein seperti kopi dan teh. Minuman-minuman ini memiliki sifat diuretik yaitu senyawa yang meningkatkan aliran seni, sehingga kita perlu minum lebih banyak air guna mengganti apa yang dikeluarkan.
Karena itu, jangan minum air ketika Anda sudah merasa haus. Ketika Anda merasa haus, maka Anda mungkin sudah mengalami dehidrasi. Karena itu, minumlah minimal 8 gelas sehari atau 2 hingga 2,5 liter per hari demi kesehatan Anda. Minumlah segelas air sekarang juga.

Selasa, 09 Maret 2010

DHTML DAN JAVASCRIPT

1. Active Web Page
Sebagaimanadiketahui, HTML merupakan model dokumen yang statis— begituditampilkantidakakanberubahsampaiadaaktivitasnavigasi. Adapununtukmenjadikan HTML sebagaihalamandinamisatauaktif, kitabisamemanfaatkanbahasa scripting.
2. DHTML dan JavaScript
Scripting merupakanjenislaindaripemrograman, yang umumnyalebihmudahdipahami. Script dapatdisisipkankedalamdokumen HTML denganmenggunakan tag <script>. Tidakseperti style sheet, script bisaterlihat di dalam <head> ataupun <body>.
DHTML (Dynamic HTML) merupakansuatuteknikuntukmenciptakan
halaman web yang interaktifdengancaramengombinasikanelemen-elemen
seperti HTML, style sheet, dan scripting. Jadi, DHTML bukanlahsuatujenis
bahasapemrogramanmelainkanhanyasekadaristilahsaja.Padabagianini,
pembuatan DHTML akandilakukandenganmemanfaatkan JavaScript.
1. ElemenDasar JavaScript
• Kotak Dialog
JavaScript memungkinkankitauntukmenampilkankotak dialog melaluifungsialert(). Kotak dialog inidapatdimanfaatkanuntukmenyampaikaninformasiataukonfirmasi.
• Dukungan Scripting
Melalui tag <noscript>, denganmudahkitabisamengidentifikasiapakah
browser mendukung scripting atautidak. Padadasarnya, tag initidak
dimaksudkanuntukmenghentikaninterpretasiterhadapkode program.
Dengan kata lain, browser akantetapmenerjemahkanbariskodekecuali tag
<script>.
• MerujukElemen
Salah satukemampuanutama JavaScript adalahmengontrolobjek-objek di halaman web.Sehubungandenganhalini, adaberagampendekatan yang bisadigunakanuntukmengacuataumengakseselemen-elemenobjek.

• Event
Setiapobjek HTML mendefinisikanproperti-properti, method-method, danevent-event.Salah satu event yang sangatpopulerdanfrekuensipenggunaannyacukuptinggiadalahonclick. Event iniakandipicumanakalaobjek—misalnya button atauteks—diklik.
• Linked Scripting
Sepertihalnya CSS, penulisankode JavaScript jugabisadilakukan di file terpisah. Langkahinisebaiknyadigunakanketikamelakukanimplementasinyata, dengantujuanmembuatkode yang bersih. Contohberikutmemperlihatkanpemisahankode JavaScript dan HTML.
2. Me-retrieve Nilai
Saatbekerjadenganelemen-elemenmasukan—seperti text field, select, dancheck box—HTML, kitabisamemanfaatkan JavaScript untukoperasivalidasi. Adapunlangkahpentingterkaitdenganelemen-elemeniniadalahpengambilannilai.
• Text Field
Elemen text field menyediakanproperti value yang bisadigunakanuntukmenetapkanataumendapatkannilaielemen.
• Select (Combo Box)
Secaraumum, properti value tersedia di semuaelemen HTML.Dengandemikian, kitajugabisamemanfaatkannyauntukmendapatkannilai select atau combo box.
• Check Box
Khususuntukpengambilannilai check box, terlebihdahulukitaperlumengidentifikasi item yang dipilih.
3. Memilih Item Check
Agar pemilihan item check box bisalebihefisien, kitadapatmenggunakanpendekatan check/uncheck all.
4. Window
• Menciptakan Window
Di dalam window aktif, kitajugabisamenciptakan window barumelaluimethod window.open().
• Komunikasi Window
Apabiladiperlukan, window induk—yang menciptakansubwindow—jugadapatberkomunikasidengan window buatannya.
Kita sudahseringmenggunakanalatmenghitungyaitukalkulator.Tapiapakahpernahberpikiruntukmembuatsebuah program kalkulatorsecara online di sebuah web atau blog….?????Dalampembahasan DHTML dan Java Script ini, sayaakanmencobamembuatsebuah program kalkulatormenggunakan Java Script. Cobatuliskan source code berikutini :
<html>
<title>Membuat program kalkulatorsederhanamenggunakan textbox </title>
<SCRIPT LANGUAGE="JavaScript">
functiontambah()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.hasil.value = c
}
functionkurang()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a-b
form.hasil.value=c
}
function kali()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a*b
form.hasil.value=c
}
functionbagi()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a/b
form.hasil.value = c
}
functionpangkat()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=Math.pow(a, b)
form.hasil.value = c
}
functionkosong()
{
form.a.focus()
form.a.value=""
form.b.value=""
form.hasil.value=""
}
</SCRIPT>
<bodyonload=kosong()>
<LEFT>
<font size="20">ProgramKalkulatorSederhana</font>

<FORM name="form">
<pre>
<br>
<font color="red"><input type="button" value="ON/C" onClick="kosong()"> </font> <input type="text" name="a"> <select name="operator" onchange="getSelectedValue();">
<option value="+" onClick="tambah()">+</option>
<option value="-" onClick="kurang()">-</option>
<option value="*" onClick="kali()">*</option>
<option value="/" onClick="bagi()">/</option>
<option value="^" onClick="pangkat()">^</option>
<input type="text" name="b"> = <input type "text" name="hasil" disabled="true">
</pre>
</LEFT>
<pre>
<br>
<marquee><font color="purple" face="monotypecorsiva" size="3">by : Amanda RehanaAyudhaTirtani</marquee></font> </pre><br>
</FORM>
</body>
</html>

Makaakantampilsepertiini :

Nah….Sekarangkitaakanmencobamembuatsebuahaplikasi form pemesananmakanan / minuman yang akandigunakanuntukpengoperasian di sebuah cafe. Denganketentuan :
• Field Harga, Jumlah Total, Diskon, danJumlahDIbayarbersifat read-only
• Jikapesandiisi, maka field jumlah total secaraotomatisakanmenghitungtotalnya, termasukjuga field jumlahdibayar.
Rumus :
Jumlah Total = ∑ (Harga * pesan)
Jumlah Bayar = Jumlah Total – Diskon
• JikaPembelianlebihdari 50000, maka field diskonsecaraotomatisakanberisinilaidiskonsebesar 10000 (tidakberlakukelipatannya) danotomatis pula field jumlahbayarakanberkurang
• JikatombolCnceldiklik, makasemua field Pesanakandibersihkan

Source codenyasepertiini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<title>Are Cafe</title>
<script language="JavaScript" type="text/javascript">



</script>
<body>



<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 Kotak</td>

<td width="85px" >@ <input type="text" name="bakso" value="10000" 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>@ <input type="text" name="soto" value="7000" size="6" disabled="true"/></td>

<td><input type="text" name="qSoto" value="0" onChange="hitungPesan()"/></td>

</tr>

<tr>

<td>3</td>

<td>Mie Ayam Jumbo</td>

<td>@ <input type="text" name="mie" value="12500" 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>@ <input type="text" name="degan" value="5000" 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>@ <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>

<td colspan="3" align="right">Jumlah Total</td>

<td><input type="text" name="Total" disabled="true" /></td>

</tr>

<tr>

<td colspan="3" align="right">Diskon</td>

<td><input type="text" name="Diskon" disabled="true" /></td>

</tr>

<tr>

<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="CANCEL" onClick="resetForm()" />
<input type="button" value="SAVE" onClick="saveForm()" />
</form>

</body>

</html>

Makatampilannyaakansepertiini :

Jumat, 05 Maret 2010

Membuat Header Web sederhana

Nah sekarang kita akan membuat sebuah header sederhana pada web menggunakan atau memanfaatkan CSS.
Tulis source code berikut ini ya….!!!!
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">

<head>
<title>display</title>
<style type="text/css" >

</style>
</head>

<body>
<div id="header">
<ul id="menu">
<li>
<a href="aboutus.html">About Us</a>
<a href="contact.html">Contact |</a>
<a href="#">RSS |</a>
<a href="#">Sitemap |</a>
<a href="index.html"> Home |</a></li>
</ul>
<div class="box1">
<h1>TEKNIK ELEKTRO</h1>
<p>Program Studi Pendidikan Teknik Informatika
<div id="search"><form name="form1" method="post" action="">
<label>Search
<input type="text" name="textfield" />
</label>
</form></div>
</div>
</div>
</body>
</html>

maka akan tampil seperti ini :

Rabu, 03 Maret 2010

MEMBUAT DESAIN FRAME

Kemarin kita sudah mempelajari bagaimana membuat sebuah link di membuat website sederhana 2…
Sekarang kita akan mencoba membuat sebuah desain frame yang bisa di link ke beberapa data, dengan model scrolling juga.
Nah kita mulai langsung saja y…!!!
tulislah source code berikut :

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Demo Frame</title>
<frameset rows = "10%,80%,10%" frameborder = "yes" border = "1" framespacing = "1">
<frame src = "Link3.html" name = "topFrame" frameborder = "yes" scrolling = "yes"
noresize = "noresize" bordercolor = "#000000" id = "topFrame" title = "topFrame" />

<frameset cols="25%,50%,25" frameborder="yes" border="3" framespacing="1">
<frame src="Lat.2.html" name="left" frameborder="yes" scrolling="yes"
noresize="noresize" bordercolor="#000000" id="left" title="left" />
<frame src="link2.html" name="main" id="main" />
<frame src="link3.html" />

</frameset>
<frame src="link3.html" frameborder="yes" scrolling="yes" noresize="noresize"
bordercolor="#000000" />

<noframes>
</noframes>
</frameset>
</frameset>
</html>

maka akan tampil seperti ini :

P.S : - link yang digunakan bisa dibuat sendiri dengan membuat halaman web baru lagi, yang bisa digunakan untuk meng-link-kan data tersebut ke halaman yang diinginkan.

Selasa, 02 Maret 2010

MEMBUAT WEBSITE LANJUTAN (Menggunakan CSS dalam Website)

Wah…akhirnya kita bisa melanjutkan belajar membuat website lanjutan. Dalam hal ini, kita akan mulai menggunakan CSS. Sebelum kita ke aplikasi CSS-nya, ikut penjelasan CSS berikut ini dulu ya…!!!

A. Cascading Style Sheet
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:
1. Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
Untuk lebih menspesifikasikan pemberian style, kita bisa menggunakan atribut class atau id. Tekniknya, class dinotasikan dengan titik (.); id dinotasikan dengan pagar (#).
2. Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
Pendekatan ini mirip dengan embedded, kecuali style-nya diletakkan di file terpisah dan berekstensi css. Pemisahan style ini juga menjadikan pendekatan ini sangat efektif dan efisien, khususnya ketika akan digunakan oleh lebih dari satu dokumen.
3. Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.

B. Tipografi
Berkaitan dengan visualisasi teks, ada beragam style yang bisa kita berikan untuk menghasilkan bentuk sesuai keinginan.
1. Style Font
Ada beragam style yang bisa diterapkan pada teks, misalnya bentuk, ukuran, dan warna.
2. Mengatur Spasi
Properti style line-height memungkinkan kita untuk mengubah spasi standar dari suatu teks.
3. Initial Cap
Jika diperlukan, kita bisa mengatur huruf pertama dari paragraph merepresentasikan huruf besar (initial cap) seperti layaknya di majalah

C. Elemen-Elemen Halaman
CSS dapat digunakan untuk memformat elemen-elemen HTML apa pun, misalnya border dan padding.
1. Border
Properti border merepresentasikan batas dari suatu bidang area, misalnya paragraf. Properti ini menyediakan beberapa style yang bisa dimanfaatkan untuk membuat variasi border.
2. Padding
Seperti halnya di tabel, padding berfungsi untuk menetapkan jarak antara border dengan konten.

D. Link
CSS juga memungkinkan kita untuk mengatur style maupun perilaku dari suatu link. Sebagai contoh, kita bisa menghilangkan garis bawah yang normalnya ada di setiap link.

E. List
Kemampuan menarik lainnya dari CSS adalah memformat list menjadi struktur menu yang elegan.

F. Menggunakan Division
Pendekatan yang efektif untuk memformat elemen-elemen HTML—termasuk juga division—adalah dengan menggunakan CSS.
1. Ukuran Area
Seperti di kebanyakan elemen, kita bisa memanfaatkan atribut width dan height untuk menspesifikasikan ukuran area. Selain itu, atribut-atribut seperti padding dan margin juga bisa dimanfaatkan di sini.
2. Format Font
Di dalam suatu area, kita juga bisa menerapkan style spesifik yang tentunya akan terisolasi (unik) dengan keseluruhan area.
3. Posisi Area
Seperti halnya paragraf, elemen-elemen div akan menghasilkan area secara berurutan dari atas ke bawah. Adapun jika dikehendaki, kita bisa mengatur posisi area secara fleksibel dengan memanfaatkan atribut float CSS.

G. Membuat Kerangka
Kerangka dasar merupakan kulit luar atau pembungkus (wrapper) yang umumnya digunakan untuk menampung keseluruhan desain. Sederhananya, karakteristik utama dari kerangka ini adalah terletak di tengah web browser. Untuk menempatkan area kerangka berada di tengah—se cara horizontal—browser, kita dapat memanfaatkan atribut margin. Tekniknya, tetapkan nilai auto pada margin, di mana akan mengakibatkan posisi secara otomatis diatur di tengah.

H. Desain Layout
Setelah mempersiapkan wrapper, langkah selanjutnya adalah membuat desain layout. Sebagai contoh, kita akan membuat layout standar (header, menu, content, dan footer) dengan style terpisah.

Huff…akhirnya selesai juga ya teorinya…!!! Hehehe….
Ok…sekarang kita coba buat aplikasinya y…!!
sekarang kita akan membuat website dengan CSS secara sederhana dulu y…!!!
Sebelum kita menuliskan kode HTML-nya, kita tulis dulu CSS-nya….
Coba tuliskan source code berikut ini ya…:
#wrapper
{ margin:auto;
width:980px;
border:2px solid white;
}
#header
{ height:80px;
border:1px solid orange;
}
#inner
{ float:left;
margin:5px 0;
border:1px solid white;
}
#footer
{ clear:both;
height:50px;
border:1px solid purple;
}
#sidebar
{ float:left;
margin-right:10px;
width:200px;
height:400px;
border:1px solid blue;
}
#content
{ float:left;
width:760px;
height:400px;
border:1px solid white;
}
#content-top
{ clear:both;
margin:auto;
width:760px;
height:120px;
border:1px solid red;
}
#content-main
{ float:left;
margin:auto;
width:480px;
height:260px;
border:1px solid green;
}
#content-right
{ float:right;
margin:auto;
width:260px;
height:270px;
border: 1px solid yellow;
}
Kemudian simpan dengan nama “style.css”
Setelah kita menuliskan css tersebut, sekarang coba tuliskan kode HTML berikut ini :

<!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="style.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>
</div>
</body>
Maka tampilannya akan seperti ini :

Itu masih sederhana lho…
Sekarang kita coba yang agak rumit ya…!!!
seperti biasa, sebelum membuat kode html-nya, kita buat dulu css-nya, seperti berikut ini :
* { margin: 0; }
body { margin:5px auto; padding:0; font:0.72em/150% arial; }
#wrapper
{ margin:auto;
width:980px;}
#header
{ height:80px;
margin:0px auto;
background:#000;}
#header-content
{height:70px;
margin:auto;
background:#fff url(w90.jpg);}
#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:#99FF33;}
#footer p { text-align:center;}
#sidebar
{ float:left;
width:200px;
height:400px;
background-color:#FFCC66}
#content
{ float:right;
width:780px;
height:400px;
background:#FFF}
#content-top
{ clear:both;
margin:auto;
width:780px;
height:170px;
background-image:url(paper.jpg)}
#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: 2px solid green; background:#99FF33}
#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}
Simpan dengan nama “layout.css”
Penamaan sangat berpengaruh dengan kode html yang akan kita tulis berikutnya. Tulis kode html berikut ini:
<!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="layout.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>
<div id="logo">
<img src="images[2].jpg" width="50" alt ="0"/>
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</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="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</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">
Selasa, 02 Maret 2010
</p>
<p>
Hari Selasa kemarin (16/02/2010) Universitas Negeri Malang kedatangan tamu dari TecQuipment Ltd, United Kingdom. Tamu dari perusahaan produsen peralatan pendukung pembelajaran keteknikan ini bermaksud menjalin hubungan kerjasama sekaligus mempresentasikan produk-produknya. Secara kebetulan, lokasi kegiatan dipusatkan di Jurusan Teknik Elektro, tepatnya di Lab. Multimedia.Kegiatan presentasi selain dihadiri bapak ibu dosen Jurusan Teknik Elektro juga dihadiri oleh beberapa undangan dari jurusan-jurusan lain. [...]
</p>
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Lomba Fotografi</a></li>
<li><a href="#">Pelantikan KORPS ASISTEN</a></li>
<li><a href="#">Lomba Desain Grafis</a></li>
<li><a href="#">Seminar Nasional</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>© sushi_hana2@yahoo.com</b></p>
</div>
</div>
</body>
</html>
Maka akan muncul seperti ini :