Catatan Kuliah ku

harga indukan yang sudah siap dikawinkan bisa mencapai 50rb-60rb/ekor. kebayang gak kalu kita punya 100 ekor lobster. 100xRp.50000 = Rp.5.000.000 (lumayan kan ).

nah lebih menarik lagi apabila kita mempunyai indukan betina yang sedang bertelur dan siap untuk ditetaskan. harga jualnya bisa mencapai 100rb sampai 150rb.

untuk tempat pun tidak perlu repot. hanya dengan kolam terpal kita dapat membudidayakan lobster air tawar. nah bagaimana? tertarik ingin memulai usaha pembududayaan lobster?

silahkan saja call atau SMS +6285278007500 (Maulana) atau +6285265522600 (Aritha)

atau bisa juga pesan by email : aritha.mail@gmail.com
by facebook : Maulana atau Aritha

1. masuk ke dashbor
2. pilih rancangan kemudian edit html.
3. masukkan koding berikut diantara tag <head> </head>.

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

4. simpan template. dan blog/web anda akan secara otomatis terpasang energy saving mode.

dapet tutorial dari http://wonaza.blogspot.com/ tentang bagaimana caranya mengganti gambar yang ditampilkan pada saat energy saving mode.
Silahkan Copy dan Paste script berikut dan pasang di gadget/widget anda :

<style type='text/css'>
div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(http://urlgambaranda/) no-repeat center center fixed black; }
div#energysaving p { margin: 0; padding: 0; width: 100%; font-size: 0px; font-family: arial; color: transparent; position: relative; top: 40%; line-height: 20px; font-weight: bold; text-align: center; text-shadow: none; display: none; }
div#energysaving p span { color: transparent; font-size: 0px; font-weight: normal; display: none; }
</style>

dan jangan lupa script di atas .. anda edit sedikit dengan mengganti link url gambar anda sendiri .. url(http://urlgambaranda/) <-- yang ini ya :)

selesai ....

hasilnya akan seprti ini.

1. Pertama sediakan sebuah file html yang memuat link file css. Save dengan nama personal.html

<html>
<head>
<title>Personal WEB</title>
</head>
<link href="webstyle.css" rel="stylesheet" type="text/css"/>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
</body>
</html>

Penjelasan : href="webstyle.css" adalah nama file css yang kita gunakan.

2. Selanjutnya pada bagian body, bagi halaman menjadi 3 bagian dengan cara memberi tag <div>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

Fungsi tag <div> adalah untuk membagi halaman menjadi beberapa bagian. Pada masing-masing <div> diberi id agar bisa di seleksi pada file css.

3. Buat file css simpan dengan nama "webstyle.css", (letakkan difolder yang sama dengan file personal.html). buka file css tersebut dan masukkan koding berikut.

#header {
Width:90%; height:50px;
Padding: 10px 5% 10px 5%;
Background-color : #efeffe;
}

Coba save file css kemudian buka personal.html, terlihat berbeda kan?. Lanjutkan dengan mengetik koding berikut

#footer {
Width:100%; height:50px;
Padding: 10px 0 5px 0;
Text-align:center; Font-size:12px; Color:#ffffff;
Background-color : #3f3f3f;
}

Kemudian berikan property untuk id content di file css.

#content{
Width:1000px; height:450px;
margin:auto;
border-left: 3px #efefff solid;
border-right: 3px #efefff solid;
}

Oke silahkan buka file html kamu dan lihat hasilnya akan seperti ini.


4. Kemudian beri tulisan pada file HTML kamu

<div id="header"><h2>WEB Personal<h2></div>
<div id="content">Isi dari web ini dapat berupa artikel dan lain lain</div>
<div id="footer">© WEB Personal 2011<br> Workshop Pemrograman WEB</div>

Simpan dan refresh file personal.html kamu.

5. Percantik header dengan menambahkan koding berikut yang bertujuan mengubah format h2 yang ada didalam tag <div id="header"> pada file css

#header h2 {
font-family : tahoma, verdana, serif;
font-size: 18px;
color : #e33;
}

6. Ubah isi content!, Pada bagian content kita akan membuat sebuah form inputan yang akan digunakan ketika mempelajari php. Lihat koding berikut.

<div id="content">
<form name="form1" action="">
<table>
<tr> <td width="120px">Nama </td> <td><input type="text" name="nama"></td></tr>
<tr> <td>Jenis Kelamin </td> <td><input type="radio" name="jkel" value="Pria"> Pria <input type="radio" name="jkel" value="Wanita"> Wanita</td></tr>
<tr> <td>Jurusan </td> <td>
<select name="jurusan">
<option>T Informatika</option>
<option> T Industri </option>
<option> Matematika </option>
<option> Sis Informasi </option>
<option> T Elektro </option>
</select>
</td></tr>

<tr><td> </td> <td><input type="submit" name="submit" value="submit"></td></tr>

</table>
</form>
</div>

hasil akhir seperti ini



personal.html :

<html>
<head><title>Personal WEB</title>
<link href="webstyle.css" rel="stylesheet" type="text/css"/>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<div id="header"><h2>WEB Personal<h2></div>
<div id="content">
<form name="form1" action="">
<table>
<tr> <td width="120px">Nama </td> <td><input type="text" name="nama"></td></tr>
<tr> <td>Jenis Kelamin </td> <td><input type="radio" name="jkel" value="Pria"> Pria <input type="radio" name="jkel" value="Wanita"> Wanita</td></tr>
<tr> <td>Jurusan </td> <td>
<select name="jurusan">
<option>T Informatika</option>
<option> T Industri </option>
<option> Matematika </option>
<option> Sis Informasi </option>
<option> T Elektro </option>
</select>
</td></tr>

<tr><td> </td> <td><input type="submit" name="kirim" value="kirim"></td></tr>

</table>
</form>
</div>
<div id="footer">© WEB Personal 2011<br> Workshop Pemrograman WEB</div>


</body>
</html>

webstyle.css :

#header {
Width:90%; height:50px;
Padding: 10px 5% 10px 5%;
Background-color : #efeffe;

}
#header h2 {
font-family : tahoma, verdana, serif;
font-size: 18px;
color : #e33;
}
#footer {
Width:100%; height:50px;
Padding: 10px 0 5px 0;
Text-align:center; Font-size:12px; Color:#ffffff;
Background-color : #3f3f3f;
}
#content{
Width:1000px; height:450px;
margin:auto;
border-left: 3px #efefff solid;
border-right: 3px #efefff solid;
}

good luck.. :)

Contoh CSS

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}

Styles Dapat Menyelesaikan Permasalahan Yang Besar

HTML tidak dibuat untuk mengatur format dari dokumen. Kalaupun ada itupun hanya yang penting-penting saja seprti mempertebal, align, mengganti warna dari teks, dan kita harus mengatur format teks tersebut secara manual (satu persatu).
HTML lebih mengarah untuk mendefinisikan content dari dokumen,seprti:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Pada html, apabila kita ingin memberi warna merah pada setiap tag <a>. maka caranya yaitu dengan memberikan tag <font>,dan menspesifikasikan atribut warna nya apa, <font color="red">merah</font>, hal ini menjadi mimpi buruk bagi developer, karena mereka harus menambahkan tag font dan atribut colornya setiap ingin mengubah warna dari sebuah teks.
Untuk menyelesaikan masalah tersebut, the World Wide Web Consortium (W3C) membuat CSS.
Pada HTML 4.0, semua format dokumen (CSS) bisa dihilangkan dari dokumen HTML, dan dipisahkan menjadi 1 dokumen CSS yang terpisah.
Pada saat ini semua browser sudah support CSS.

CSS Menghemat Banyak Pekerjaan!

CSS mendefinisikan BAGAIMANA elemen HTML akan ditampilkan.
Biasanya file css disimpan di luar dari dokumen HTML/ external .css files. External style sheets memungkinkan kita untuk mengganti tampilan layout dari semua halaman website. Dengan hanya mengedit 1 file CSS saja, menakjubkan bukan!

Syntax CSS

Aturan dari CSS sangat lah simpel, aturan ini memiliki 2 bagian utama : selector (yang digunakan untuk menyeleksi bagian mana yang mau di format), dan 1 atau lebih declarations (isi dari format css, bisa menggati warna, ukuran font dll):

Selector diatas akan menyekesi semua tag h1 dan menggati ukuran font menjadi 12px dan warnanya menjadi biru. Hanya dengan 1 baris kode tersebut secara ajaib semua teks yang berada pada tag <h1> akan berubah secara otomatis.
Setiap deklarasi akan berisi property and a value. property adalah atribut dari style yang ingin kamu ubah. Dan setiap atribut akan memiliki nilai, misalnya property font-size: memiliki nilai 12 pixel.
Contoh CSS
Deklarasi CSS selalu diakhiri dengan semicolon/titik koma (;), dan deklarasi dari grup property (apabila ada banyak property) berada didalahm tanda kurung siku {},:

p {color:red;text-align:center;}

Untuk membuat CSS lebih mudah dibaca,kita dapat memisahkan property pada setiap bari, seperti berikut:
Contoh

p
{
color:red;
text-align:center;
}

Komentar pada CSS

Komentar digunakan untuk menjelaskan kode yang dibuat, dan sangat berguna ketika kamu ingin mengedit source codenya. Komentar tidak akan dibaca oleh browser.
Komentar CSS diawali dengan "/*", dan diakhiri dengan "*/", seperti ini:

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

Id (#) and class (.) Selectors

Untuk mengatur style pada elemen HTML, CSS mengijinkan kita untuk membuat sendiri selektor yang sering disebut "id" and "class".

id Selector

Id selector digunnakan untuk mengatur style untuk 1 element tunggal yang unik.
Selektor id menggunakan atribut "id" pada HTML, dan didefinisikan dengan tanda "#" pada CSS.
Contoh
HTML : <div id="header">
Pada file CSS nya #header { properti yang ingin diberikan}
Jangan memmulai nama ID dengan angka/nomor! Karena tidak akan berkerja pada Mozilla/Firefox.

class Selector

Class selektor digunakan untuk menspesifikasikan style dari kumpulan element-element HTML (group elements). Tidak seperti selektor id, selektor class lebih sering digunakan pada beberapa elemen.
Selektor class menggunakan atribut "class" pada HTML, dan didefinisikan dengan tanda "." pada CSS.
Pada contoh berikut, semua elemen HTML dengan class="center" akan menjadi rata tengah:
Example
.center {text-align:center;}

Kamu juga dapat menspesifikasikan elemen mana yang ingin dirubah. Misalnya kita hanya ingin melakukan perubahan pada teks yang berada pada tag <p> dengan class center.
Pada contoh berikut, semua elemen p dengan class="center"akan menjadi rata tengah:
Example
p.center {text-align:center;}

Jangan memulai nama class dengan angka/nomor! Karena ini hanya suport pada internet explorer.
Ketika browser membaca style sheet, maka browser akan memformat document berdasarkan style sheet tersebut.

Tiga cara memasukkan CSS

Ada 3 cara untuk memasukkan style sheet kedalam dokumen HTML:
• External style sheet
• Internal style sheet
• Inline style

External Style Sheet

External style sheet idealnya digunakan untuk mengatur format bebarapa dokumen HTML .dengan external style sheet, kita dapat mengubah format seluruh halaman web dengan mengedit 1 file css saja.setiap halaman harus memberi link ke file css dengan menggunakan tag <link>. Didalam tag <link>masukkan koding berikut:
admin siswa blom bisa edit<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

External style sheet dapat ditulis dengan menggunakan teks editor apa saja.didalam file css tidak tedapat tag HTML. Style sheet seharusnya disimpan dengan ekstensi .css.contoh dari file style sheet seperti berikut:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Jangan gunakan spasi antara property value dan unitsnya! contoh "margin-left:20 px" antar 20 dan px ada spasi (seharusnya "margin-left:20px") ini bekerja di IE, tetapi tidak di Firefox atau Opera.

Internal Style Sheet

Internal style sheet digunakan ketika sebuah dokumen memiliki style yang unik. Kamu mendefinisikan style sheet dibagian <head> pada halaman HTML, dengan menggunakan tag <style>,seprti ini:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline Styles

Untuk menggunakan inline styes sheet, kita menggunakan attibut style pada elemen tag HTM L yang ingin diubah style nya. Atribut style dapat berisi : CSS property. contoh berikut menunjukkan bagaimana cara meriubah warna left margin dari paragraf:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Margin dan Padding pada CSS

Margin dan padding merupakan hal yang mirip tetapi berbeda. Fugsi nya sama-sama untuk memberi jarak darisatu elemen ke elemen lainnya untuk merapikan dokumen. Agar lebih jelas lihat gambar.

Jelaslah bahwa padding memberikan jarak antara border dan content ( isi dari elemen tersebut). Sedangkan margin memberikan jarak antara border elemen dengan bagian luar dari elemen
Kita juga dapat melakukan seperti ini
- padding:25px 50px 75px 100px; artinya :
• top padding 25px
• right padding 50px
• bottom padding 75px
• left padding 100px
- padding :25px; berarti semua padding baik top bottom left right bernilai 25px;

source : http://w3schools.com