Jawaban Quiz Online No.3

Source Programnya :

Public Class Form1

Private Sub btnnama_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnnama.Click

If nama.Text = "ismail" And password.Text = "ismail" Then

FormMenu.Show()

Me.Hide()

Else

MsgBox("data username/password salah")

nama.Text = ""

password.Text = ""

End If

End Sub

End Class

Hasil Program

Source Pgogramnya :

Public Class FormMenu

Private Sub DaftarPenggajianKaryawanToolStripMenuItem_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles DaftarPenggajianKaryawanToolStripMenuItem.Click

Penggajian_Karyawan.Show()

End Sub

End Class

Tampilan Setelah Log in

Source Program nya:

Public Class Penggajian_Karyawan

Private Sub Penggajian_Karyawan_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

a()

Jabatan.Items.Add("Mandor")

Jabatan.Items.Add("Kepala Bagian")

Jabatan.Items.Add("Staf")

status.Items.Add("menikah")

status.Items.Add("belum menikah")

End Sub

Private Sub status_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles status.SelectedIndexChanged

If status.Text = "tidak menikah" Then

tunjangananak.Text = 0

tunjangankeluarga.Text = 0

ElseIf status.Text = "menikah" Then

tunjangankeluarga.Text = 0.09 * gajipoko.Text

End If

End Sub

Private Sub Jabatan_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Jabatan.SelectedIndexChanged

If Jabatan.Text = "Mandor" Then

gajipoko.Text = 1750000

ElseIf Jabatan.Text = "Kepala Bagian" Then

gajipoko.Text = 2500000

ElseIf Jabatan.Text = "Staf" Then

gajipoko.Text = 1250000

End If

End Sub

Sub a()

Lv.Columns.Add("NIK", 80, HorizontalAlignment.Left)

Lv.Columns.Add("nama", 80, HorizontalAlignment.Left)

Lv.Columns.Add("golongan", 80, HorizontalAlignment.Left)

Lv.Columns.Add("gaji pokok", 80, HorizontalAlignment.Left)

Lv.Columns.Add("lembur", 80, HorizontalAlignment.Left)

Lv.Columns.Add("jumlah lembur", 80, HorizontalAlignment.Left)

Lv.Columns.Add("pajak", 80, HorizontalAlignment.Left)

Lv.Columns.Add("status", 80, HorizontalAlignment.Left)

Lv.Columns.Add("jumlah anak", 80, HorizontalAlignment.Left)

Lv.Columns.Add("tunjangan istri", 80, HorizontalAlignment.Left)

Lv.Columns.Add("tunjangan anak", 80, HorizontalAlignment.Left)

Lv.Columns.Add("total gaji", 80, HorizontalAlignment.Left)

Lv.View = View.Details

Lv.GridLines = True

Lv.FullRowSelect = True

End Sub

Sub isi()

Dim Lst As New ListViewItem

Lst.Text = NIK.Text

Lst.SubItems.Add(nama.Text)

Lst.SubItems.Add(Jabatan.Text)

Lst.SubItems.Add(gajipoko.Text)

Lst.SubItems.Add(Pajak.Text)

Lst.SubItems.Add(Jumbur.Text)

Lst.SubItems.Add(Lembur.Text)

Lst.SubItems.Add(status.Text)

Lst.SubItems.Add(jumlahanak.Text)

Lst.SubItems.Add(tunjangankeluarga.Text)

Lst.SubItems.Add(tunjangananak.Text)

Lst.SubItems.Add(totalgaji.Text)

Lv.Items.Add(Lst)

End Sub

Private Sub Pajak_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Pajak.TextChanged

Pajak.Text = 0.15 * gajipoko.Text

End Sub

Private Sub btnproses_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnproses.Click

isi()

If jumlahanak.Text = 1 Then

tunjangananak.Text = 0.03 * gajipoko.Text

ElseIf jumlahanak.Text >= 2 Then

tunjangananak.Text = 0.07 * gajipoko.Text

Else

tunjangananak.Text = 0

End If

totalgaji.Text = Val(gajipoko.Text) + Val(totalgaji.Text) + Val(tunjangananak.Text) + Val(Lembur.Text) - Val(Pajak.Text)

End Sub

Private Sub Jumbur_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Jumbur.TextChanged

If Jabatan.Text = "Mandor" Then

If Jumbur.Text = 1 Then

Lembur.Text = 7500

ElseIf Jumbur.Text >= 2 Then

Lembur.Text = Jumbur.Text * 7500

Else

Lembur.Text = 0

End If

If Jabatan.Text = "Kepala Bagian" Then

If Jumbur.Text = 1 Then

Lembur.Text = 10000

ElseIf Jumbur.Text >= 2 Then

Lembur.Text = Jumbur.Text * 10000

Else

Lembur.Text = 0

End If

If Jabatan.Text = "staf" Then

If Lembur.Text = 1 Then

Lembur.Text = 5000

ElseIf Lembur.Text >= 2 Then

Lembur.Text = Jumbur.Text * 5000

Else : gajipoko.Text = 0

End If

End Sub

End Class

Hasil Program

Klik Disini Untuk Melihat Kasus dari Soal Ini

Posted by welcome to dochi blog

on -

jawaban Quiz Online No.2

Soucre Pgrogram:

Public Class Form1

Private Sub npm_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles npm.TextChanged

Dim x As String

tahunmasuk.Text = "20" & Microsoft.VisualBasic.Left(npm.Text, 2)

x = Microsoft.VisualBasic.Mid(npm.Text, 3)

If x = "1" Then

jenjang.Text = "diploma1"

ElseIf x = "2" Then

jenjang.Text = "diploma3"

ElseIf x = "3" Then

jenjang.Text = "stara1"

ElseIf x = "4" Then

jenjang.Text = "stara2"

End If

x = Microsoft.VisualBasic.Right(npm.Text, 2)

If x = "01" Then

jurusan.Text = "teknik informatika"

ElseIf x = "02" Then

jurusan.Text = "sistem informasi"

ElseIf x = "03" Then

jurusan.Text = "menajemen informatika"

End If

End Sub

Private Sub nilaiangka_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles nilaiangka.TextChanged

If nilaiangka.Text >= "80" Then

nilaihrf.Text = "A"

ElseIf nilaiangka.Text >= "70" Then

nilaihrf.Text = "B"

ElseIf nilaiangka.Text >= "60" Then

nilaihrf.Text = "C"

ElseIf nilaiangka.Text >= "50" Then

nilaihrf.Text = "D"

Else

nilaihrf.Text = "E"

End If

End Sub

Sub baru()

lv.Columns.Add("npm", 80, HorizontalAlignment.Center)

lv.Columns.Add("nama", 80, HorizontalAlignment.Center)

lv.Columns.Add("jurusan", 80, HorizontalAlignment.Center)

lv.Columns.Add("jenjang", 80, HorizontalAlignment.Center)

lv.Columns.Add("tahunmasuk", 80, HorizontalAlignment.Center)

lv.Columns.Add("nilaiangka", 80, HorizontalAlignment.Center)

lv.Columns.Add("nilaihuruf", 80, HorizontalAlignment.Center)

lv.View = View.Details

lv.GridLines = True

lv.FullRowSelect = True

End Sub

Sub isi()

Dim a As New ListViewItem

a.Text = npm.Text

a.SubItems.Add(nama.Text)

a.SubItems.Add(jurusan.Text)

a.SubItems.Add(jenjang.Text)

a.SubItems.Add(tahunmasuk.Text)

a.SubItems.Add(nilaiangka.Text)

a.SubItems.Add(nilaihrf.Text)

lv.Items.Add(a)

End Sub

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

baru()

End Sub

Private Sub btnlistview_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnlistview.Click

isi()

npm.Text = ""

nama.Text = ""

jurusan.Text = ""

jenjang.Text = ""

tahunmasuk.Text = ""

nilaiangka.Text = ""

nilaihrf.Text = ""

End Sub

End Class

Hasil Gambar

klik disini untuk melihat kasus dari soal ini

Posted by welcome to dochi blog

on -

ingin belajar HTML,CSS,XML lebih mahir

huy guyssss,,,,,,,, kata nya belajar sendiri tu kan lebih asyik N lebih cepat paham nya...........
jadi maels cuma bisa kasih link ni moga manfaat yo guyysssss....... :)
:)

silahkan link kesini aja ya??

Posted by welcome to dochi blog

on -

BERMAIN CSS DAN HTML

Haii guySs...
sekarang kita belajar HTML lagi ya..
yang lalu kita kan belajar html aja kaNn, jadi sekarang kita akan mengkombinasikan script html dengan fungsi CSS, jadi pada prinsipnya, kalu tanpa CSS ketika kita membuat kolom yg banyak berisi konten di dalamnya ita pasti sedikit kesulitan mengenai logika untuk membuat tabel, dan utuk mengedit balik pun juga sulit. maka dari itu, kali ini saya akan memperkenalkan pembelajaran dengan menggunakan CSS ( meskipun saya sendiri juga baru belajar sih ) hehheeee,
semua postingan saya selalu ada yg nge Suport Guys,

Support by :

jadi untuk menyimpan file pada css, sbenarnya sama sih dengan kita menulis di html, silahkan kalian menulis di editor teks ( pada notepad, atau notepad++, bisa jadi yg lain nya juga ) lalu save file klaian dengan tipe "namaFile.css", lanjutnyauntuk pemanggilan file CSS anda, kita panggil melalui HTML nya sebagai hasil tampilan dari file yg aanda buat.
NaHh, berikut akan saya contohkan program sederhana dari aplikasi yg saya buat, pada prinsipnya sebenarnya ini mirip seperti tampilan pada facebook. hehe
jadi,
untuk script pada file CSS nya sbb :

<div style="overflow:auto; padding:5px; width:450px; height:400px;
background-color: rgb(255, 255, 255); border:2px solid #ccc;
"> #wrapped {
width : 70%;
margin : auto;
}

#border {
height : 100px;
background : pink;
}

#borderkanan{
float : right;
height : auto;
width : 40%;
}

#middle {
height : 525px;
background-image : url("middle2.jpg");
}

#kolomkiri{
float : left;
height : auto;
width : 60%;
background-image : url();
}

#kolomkanan{
float : right;
height : auto;
width : 40%;
}

.mlebu {
background : transparent url("p.jpg") no-repeat bottom left;
display : block;
float : left;
width : 60px;
height : 24px;
font : tahoma 14px;
text-decoration : none;
color : white;
}
.mlebuok{
overflow : hidden;
width: 100%;
}

.daftar {
background : transparent url("daftar.jpg") no-repeat right;
display : block;
float : left;
width : 150px;
height : 30px;
font : tahoma 14px;
padding : 10px 0px 0px 0px;
text-decoration : none;
}

.tulisan{
    font-family: tahoma;
    font-size: 14px;
    text-align: left;
    color: white;
    border: 0px;
}

.kata{
    font-family: tahoma;
    font-size: 26px;
    text-align: left;
    color: #5d3c1c;
    border: 0px;
}

.tulisan2{
    font-family: tahoma;
    font-size: 13px;
    text-align: left;
    color: #5d3c1c;
    border: 0px;
}

.tulisan3{
    font-family: tahoma;
    font-size: 16px;
    text-align: left;
    color: #5d3c1c;
    border: 0px;
}

.kopi {
font-family: tahoma;
    font-size: 13px;
    text-align: left;
    color: gray;
}

.bahasa {
display : block;
color : #5d3c1c;
text-decoration : none;
overflow : hidden;
}

#footer {
clear : both;
background : white;
height : 75px;
}</div>

kemudian kita akan panggil file yg sudah kita buat di CSS pada script yg di HTML sebagai tampilan nya nanti.
Berikut adalah Script HTML nya :
<div style="overflow:auto; padding:5px; width:450px; height:400px;
background-color: rgb(255, 255, 255); border:2px solid #ccc;
"><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional.dtd">
<html xlmns="htt<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional.dtd">
<html xlmns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<HEAD>
<TITLE>Welome to Komunitas Balita</TITLE>
<link rel="ICON" href="ym.ico" />

<link rel="stylesheet" href="kode css.css" type="text/css" />
</HEAD>
<BODY>
<div id="border">
<div id="wrapped">
<div class="tulisan">
<br>
<img src="bayi.jpg" height="85" width="200">
<div id="borderkanan">
<table border=0 align="right" cellspacing=0 cellpadding=2>
<tr>
<td>Email</td>
<td width=10 ></td>
<td>Kata Sandi</td>
</tr>
<tr>
<td><form><input type="email" name="email" size="25" /></form></td>
<td></td>
<td><form><input type="password" name="pwd" size="25" /></form></td>
<td width=3></td>
<td><div class="mlebuok" align="center">
<a class="mlebu" href="http://www.facebook.com">
<span>Masuk</span></a></div>
</td>
</tr>
<tr>
<td><input type="checkbox" />stay in page</td>
<td></td>
<td>Lupa kata sandi ? </td>
</tr>
</table></div>
</div></div>
</div></div>
<div id="middle">
<div id="wrapped">
<div id="kolomkiri">
<div class="kata">
<br>
Daftarkan Balita Anda<br>
Dalam Komunitas Balita Indonesia<br>
Sebagai Simbol Putra Bangsa
<br><br>
<div align="left">
<img src="indonesia.png" height="200" >
</div>
</div>
</div>
<div id="kolomkanan">
<div class="tulisan3">
<br><br>
<font size="5"><b> Mendaftar</b></font><br>
<font size="4"> Gratis, sampai kapan pun.</font>
<Table Border=0 cellspacing=10 align="right">
<tr>
<td colspan=2 style="border-bottom:#5d3c1c solid thin"></td>
</tr>
<tr>
<td align="right">Nama Depan:</td>
<td><input nama="nama" size="40" type="text" /></td>
</tr>
<tr>
<td align="right">Nama Belakang:</td>
<td><input nama="nama" size="40" type="text" /></td>
</tr>
<tr>
<td align="right">Email :</td>
<td><form><input type="email" name="email" size="40" /></form></td>
</tr>
<tr>
<td align="right">ReType Email:</td>
<td><form><input type="email" name="email" size="40" /></form></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><form><input type="password" name="pwd" size="40" /></form></td>
</tr>
<tr>
<td align="right">Kelamin:</td>
<td><select><option value="-1">Jenis Kelamin:</option>
<option>laki-laki</option>
<option>perempuan</option>
</select>
</tr>
<tr>
<td align="right">Tanggal Lahir:</td>
<td>
<select><option value="-1">Tanggal:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select>
<option value="-1">Bulan:</option>
<option value="1">Januari</option>
<option value="2">Februari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Agustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Desember</option>
</select>
<select><option value="-1">Tahun:</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
</select>
</td>
</td>
</td>
<tr>
<td></td>
<td><font size=2>Mengapa saya perlu mengisinya ?</font></td>
</tr>
<tr>
<td></td>
<td><div class="mlebuok" align="center">
<a class="daftar" href="http://www.facebook.com/signup">
<font color="white"><b>Mendaftar</a></font></b></div></td>
</tr>
<tr>
<td colspan=2 style="border-bottom:#5d3c1c solid thin"></td>
</tr>
<td colspan=2 align="center">
<b>Category Balita</b> <font color=#464646>cute, lucu, dan familiar.</font>
</td>
</table>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="wrapped">
<div class="tulisan2">
<table width=100% border=0 align="left">
<tr>
<td><a class="bahasa" href="http://www.indonesia.com">Bahasa Indonesia</a></td>
<td><a class="bahasa" href="http://www.sunda.com">Bahasa Sunda</a></td></td>
<td><a class="bahasa" href="http://www.bali.com">Bahasa Bali</a></td>
<td><a class="bahasa" href="http://www.bahasatubuh.com">Bahasa Tubuh</a></td></td>
<td><a class="bahasa" href="http://www.melayu.com">Bahasa Melayu</a></td>
<td><a class="bahasa" href="http://www.next.com">>></a></td>
<td width=500px></td>
</tr>
<tr>
<td colspan=8 style="border-bottom:#5d3c1c solid thin"></td>
</tr>
</table><br>
<table border=0 cellspacing=1 cellpadding=2>
<tr>
<td width="155px"><a class="kopi">Balita Indonesia © Copyright 2011</a></td>
<td width=""><a class="bahasa" href="http://www.aksarajawa.com">Indonesia</a></td>
<td width="299px"></td>
<td><a class="bahasa" href="http://www.seluler.com">Seluler</a></td>
<td><a class="bahasa" href="http://www.cariteman.com">Cari Teman</a></td>
<td><a class="bahasa" href="http://www.lencana.com">Lencana</a></td>
<td><a class="bahasa" href="http://www.orang.com">Orang</a></td>
<td><a class="bahasa" href="http://www.halaman.com">Halaman</a></td>
<td><a class="bahasa" href="http://www.tentang.com">Tentang</a></td>
<td><a class="bahasa" href="http://www.iklan.com">Iklan</a></td>
<td><a class="bahasa" href="http://www.foto.com">foto</a></td>
<td><a class="bahasa" href="http://www.karier.com">Karier</a></td>
<td><a class="bahasa" href="http://www.privasi.com">Privasi</a></td>
<td><a class="bahasa" href="http://www.ketentuan.com">Ketentuan</a></td>
<td><a class="bahasa" href="http://www.bantuan.com">Bantuan</a></td>
</tr>
</table>
</div>
</div>
</div>
</BODY>
</HTML></div>

Dan untuk tampilan nya saya disini ingin memberikan contoh,bagaimana cara membuat sebuah Header, Content, dan Footeru jika menggunakan CSS
Hasil dari Script yg saya share sbb :
untuk menampilkan semua gambar maka kalian harus menyimpan semua file nya pada satu folder yaa..

naHh begitulahh kawaNn, apa yg bisa saya share kan dengan kalian..
semoga apa yg saya share kan dapat menjadi manfaat dan berkah bagi kalian semua nya..
tak lupa kritik dan saran, yg membangun selalu diharapkan sebagai evaluasi perbaikan materi kedepan...
Selamat mencoba dan Gud Luck GuySs..

Posted by welcome to dochi blog

on -

Membuat Kreasi Objek Dengan HTML

Ok guys ini nantinya gambar yg pingin aq share sama kalian semua, maksud aq bentuk jadinya sih cuman bentuk bangun sederhana seperti ini aja.. hehe

Nah simpel kan ternyata gambarnya.. so, ini dia guys scriptnya buat ngebuat gambar seperti gambar di atas : rumit
juga kalu mikir buat dari 0 gitu itu, hehe

<title>Studi Kasus</title>
<style type="text/css">

</style>

<div align="center" class="andi">
Yang ini border lingkaran.
Gawenen..
OJO ONLEN AE!!!</div>

<div align="center" class="bayu">
KOtaKk.........</div>

<div align="center" class="sulistiya">
efeeKk shadoWw....</div>

naHh, silahkan di coba guYyss,, moga kalian berhasil yaa...
banyak latihan makin pintar dah kaliaNn.. hehe

Posted by welcome to dochi blog

on -

Pembuatan Halaman Web Sederhana Kosongan Dengan CSS

NaHh, kawaNn jumpa lagi daHh,, makin rumit aja ini pembelajaran html kita..
heHheee,,
masalahnya kita harus combine script html kita dengan menggunakan CSS.
pada dasarnya ini semua masih pada program latihan saja..
sponsored by

aq sih pengen nampilin halaman seperti inini guyss,, jadi ntar kalian tinggal nginputin content, terserah dah mau diisi apa'an, sekaligus pengen kasih link event
terserah dehh, suka suka kalian ntar yang ngebuat nya.. hehe
nihh halaman nya guYyss..

bnernya sih tampilan diatas itu belum sesuai sama apa yg aq inginkan guyss, tapi ntar biar aq perbaikin lagiduludah,, g penting aq ingin ngeshare ilmunya dulu sama kalian kalu kita pengen mendisain halaman web dengan CSS.
petama,
buat script CSS nya kawaNn..
nih script nya guys..

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

section{
width : 900px;
height : 450px;body{
margin : 10px auto;
width : 900px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

list{
list-style-position: inside;
}
background-color : #bbdefb;
}

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

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

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

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

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

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

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

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

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

list{
list-style-position: inside;
}

lalu kita panggil script di atas menggunakan script HTML sperti yg kita ketahui bersama guySs,,
dan ini untuk script HTML nya guyss..

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

<HEAD>
<TITLE>Your Title</TITLE>
<link rel="stylesheet" href="rumah4.css" type="text/css" />
</HEAD>

<BODY>

<HEADER>
<LOGO></LOGO>
<TE>WEB DESIGN</TE>
</HEADER>

<NAV><SEARCH>Search</SEARCH><BOX>
<INPUT type="text" size="20" />
</BOX>
<LINKMENU>
<HOME><a href="#">Home</a></HOME>
<NEWS><a href="#">News & Media</a></NEWS>
<TUTORIAL><a href="#">Tutorial</a></TUTORIAL>
<TIPS><a href="#">Tips & Trick</a></TIPS>
<DOWNLOAD><a href="#">Download</a></DOWNLOAD>
</LINKMENU>
</NAV>

<SECTION>
<PICT></PICT>
<ARTICLE>
Kamu dapat berkreasi sesuai dengan apa yg kalian mau pada halaman ini, seperti pada halaman web pada umumnya jadi kita menyediakan sebuah konten yg nantinya dapat kita gunakan untuk memberikan sebuah informasi bagi pengunjung.
</ARTICLE>
<INFO>Your_Information</INFO>
<EVENT><B>ELECTRO EVENT :</B>
<ul><li><a href="#">FUTSAL COMPETITION</a></li>
<li><a href="#"">ELEKTRO BAND</a></li>
<li><a href="#">LINE TRACER RoBOTIC</a></li>
<li><a href="#">WEB DESIGN</a></li>
</ul>
</EVENT>
</SECTION>
<FOOTER>
Home | News & Media | Tutorial | Tips & Tricks | Download
<BR>&copy CopyRight andibayu 2011
</FOOTER>
</BODY>
</HTML>

Soo, begitulah kawaNn cara kerja kita klau meng combine script css dengan script html,
benernya gambar diatas masih kurang dari sempurna sih, keburu aq upload aja di blogQ, hehHeeee
ntar pasti aq perbaikin kok,, update info dari blog ini yahh guySs..
Coba dulu daHh..
Gud Luck guyysss..

Posted by welcome to dochi blog

on -

Pages

Jawaban Quiz Online No.3

jawaban Quiz Online No.2

ingin belajar HTML,CSS,XML lebih mahir

BERMAIN CSS DAN HTML

BERMAIN CSS DAN HTML

Membuat Kreasi Objek Dengan HTML

Membuat Kreasi Objek Dengan HTML

Pembuatan Halaman Web Sederhana Kosongan Dengan CSS

Pembuatan Halaman Web Sederhana Kosongan Dengan CSS

About Me

Blog Archive

Followers

VB tutorial

About