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