Belajar CSS

Sabtu,30 Oleh :


sintak dibawah ini merupakan contoh penggunaan inline dan embeded css
bentuk laporannya dan penjelasan disini

perubahan

1. teks dalam list yang awal ukuran normal dirubah kedalam ukuran sama dengan paragraf sebelumnya dengan menambah fungsi

#isi ul{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}

2. memberi link pada menu dengan menambah tag <a href=""> menu </a> dengan a dipanggil dari #menu a

<td align="center"><a href="">Depan</a></td>
<td align="center"><a href="">Profil</a></td>
<td align="center"><a href="">Produk</a></td>
<td align="center"><a href="">Kontak</a></td>
<td align="center"><a href="">Forum</a></td>

3. Menambah konten yang beri link dan untuk style memanggil dati #konten p

<td width="30%" class="table-menu">
<div id="konten">
<p style="font-weight:bold; text-decoration:underline;">Daftar Konten</p>
<p><a href="">Belajar html</a></p>
<p><a href="">Belajar php</a></p>
<p><a href="">Belajar css</a></p>
</div>
</td>

4. bagian tulisan header ditambah pada bagian sebelum image ( gambar ) dan dibeli css secara inline.

<tr>
<td colspan=2 style="text-align:center; font-style:oblique; font-weight:bold; font-size:25px; color:Blue; background-color:green;">Belajar CSS
<p><img src="header.jpg"></p>
</td>
</tr>



Sintak

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table{
border-colapse:colapse;
border:1px solid black;
}

#menu{
height:40px;
width:960px;
background:url(bg-nav.jpg) repeat-x;
}

#menu table{
border:none;
}

#menu a{
color:white;
text-decoration:none;
}

#menu a:hover{
background-color:yellow;
color:Red;
}

#menu td{
height:40px;
text-align:center;
vertical-align:middle;
color:#fff;
font: bold 14px Candara, Arial, Tahoma;
}

#isi{
padding: 10 10 10 10;
}

#isi p{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}

#isi img{
boder: 1px solid black;
width: 80px;
height: 100px;
}

.table-menu{
vertical-align: top;
border-colapse: colapse;
border: 1px solid black;
background-color: #0066cc;
}

.footer{
background-color:yellow;
}

#isi ul{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}

#konten{
padding: 10 10 10 10;
}

#konten p{
color:white;
font: 14px Candara, Arial, Tahoma;
padding-bottom:5px;
}
#konten a{
color:white;
text-decoration:blink;
font-style:oblique;
}

#konten a:hover{
background-color:white;
color:Red;
}


</style>
</head>

<body>
<table width="70%" align="center">
<tr>
<td colspan=2 style="text-align:center; font-style:oblique; font-weight:bold; font-size:25px; color:Blue; background-color:green;">
Belajar CSS
<p><img src="header.jpg"></p>
</td>
</tr>
<tr>
<td colspan=2>
<div id="menu">
<table width="100%">
<tr>
<td align="center"><a href="">Depan</a></td>
<td align="center"><a href="">Profil</a></td>
<td align="center"><a href="">Produk</a></td>
<td align="center"><a href="">Kontak</a></td>
<td align="center"><a href="">Forum</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div id="isi">
<h1 style="color:blue; font:bold 16px Candara, Arial, Tahoma;"> Ayo Minum Susu</h1>
<img src="susu.jpg"/>
<p>Susu adalah sebuah cairan bergizi yang dihasilkan oleh kelenjar susu dari mamalia betina.
Susu adalah sumber gizi utama bagi bayi sebelum mereka dapat mencerna makanan padat.
Susu binatang (biasanya sapi) juga diolah menjadi berbagai produk seperti mentega, yoghurt, es krim, keju, susu kental manis, susu bubuk dan lain-lainnya untuk konsumsi manusia.
Semua orang di dunia ini membutuhkan susu untuk menopang kehidupannya. Baik dari bayi sampai orang yang sudah lanjut usia.</p>
<p>Khasiat susu sapi ternyata banyak sekali. Susu yang banyak digemari anak-anak ini disebut juga darah putih bagi tubuh karena mengandung banyak viatmin dan berbagai macam asam amino yang baik bagi kesehatan tubuh.
Dalam segelas susu terdapat antara lain:</p>
<ul>
<li>Potasium, yang menggerakkan pembuluh darah agar tetap stabil, menghindarkan Anda dari penyakit darah tinggi dan jantung.</li>
<li>Zat besi, mempertahankan kulit tetap bersinar.</li>
<li>Tyrosine, mendorong hormon kegembiraan dan membuat tidur lebih nyenyak.</li>
<li>Kalsium, menguatkan tulang.</li>
<li>Magnesium, menguatkan jantung dan sistem saraf sehingga tidak mudah lelah.</li>
<li>Yodium, meningkatkan kerja otak cepat.</li>
<li>Seng, menyembuhkan luka dengan cepat.</li>
<li>Vitamin B2, meningkatkan ketajaman penglihatan.</li>
</ul>
</div>
</td>
<td width="30%" class="table-menu">
<div id="konten">
<p style="font-weight:bold; text-decoration:underline;">Daftar Konten</p>
<p><a href="">Belajar html</a></p>
<p><a href="">Belajar php</a></p>
<p><a href="">Belajar css</a></p>
</div>
</td>
</tr>
<tr>
<td colspan=2 height=50 class="footer">
<p style="color:blue; font:bold 12px candara, arial, tahoma; text-align:center;"></p>
</td>
</tr>
</table>
</body>
</html>


Oleh : di Tidak ada komentar

Pertemuan 2

Selasa,19 Oleh :

Tutorial Pembuatan Kalkulator Sederhana :




Kode :

<!DOCTYPE html>
<html>
<head><title>Perhitungan</title></head>
<body>
<form method="post">
<table>
<tr>
<td colspan="3" align="center">
<h1>Perhitungan Matematika Sederhana</h1>
</td>
</tr>
<tr>
<td align="center">Angka 1</td>
<td align="center">operator</td>
<td align="center">Angka 2</td>
</tr>
<tr>
<td align="center"><input type="number" name="angka1" required/></td>
<td align="center">
<select name="pilihan">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
<td align="center"><input type="number" name="angka2" required/></td>
</tr>
<tr>
<?php
$pilih = $_POST["pilihan"];
switch ($pilih){
case "+":
$hasil = $_POST["angka1"] + $_POST["angka2"];
break;
case "-":
$hasil = $_POST["angka1"] - $_POST["angka2"];
break;
case "*":
$hasil = $_POST["angka1"] * $_POST["angka2"];
break;
case "/":
$hasil = $_POST["angka1"] / $_POST["angka2"];
break;
}
?>
<td colspan="3" align="center"><input type="submit" name="hitung" value="Hitung"></td>
</tr>
<tr>
<td colspan="3" align="center"><input type="text" placeholder="Hasil Penghitungan" name="hasil" disabled value="<?php echo $hasil;?>"></td>
</tr>
</table>
</form>
</body>
</html>

Langkah Pembuatan PHP :

   Hal-hal yang dibutuhkan dalam pembuatan PHP adalah xampp, notepad++, browser.
1. Instal xampp, notepad++ dan brower (chrome disarankan)
2. Pada xampp control centang Svc untuk Apache kemudian start.
3. Buka notepate++ kemudian tuliskan atau copas kode diatas dalam notepad++
4. Simpan dalam C:\xampp\htdocs\"nama folder"\ (tanpa petik)
5. Untuk menjalankan, buka browser pada alamat ketik (localhost/"nama folder"/"Namafile.php") tanpa petik contoh sama seperti SS diatas.

Penjelasan Kode
1. Untuk textfield Angka yang pertma dan ke dua
    <input type="number" name="angka1" required/>
    <input type="number" name="angka2" required/>
terdapat required yang berfungsi sebagai pengingat yang apabila textfield tersebut belum disi (kosong) .
2. Untuk Operator menggunakan combobox yang berisi + ; - ; * ; /
      <select name="pilihan">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
     </select>

3. Tombol Hitung
    <input type="submit" name="hitung" value="Hitung">
untuk membuat sebuah buton cukup mengganti type data dengan "submit".

4. TextField Hasil
    <input type="text" placeholder="Hasil Penghitungan" name="hasil" disabled value="<?php echo $hasil;?>">
placeholde berfungsi memberi penaam awal yang otomatis akan hilang bila field tersebut terisi.
disable berfungsi sebagai agar fieldtersebut tidak bisa diedit (read only)
pada value terdapat fungsi "<?php echo $hasil;?>" yang artinya dia akam memanggil fungsi php dari variabel "$hasil", kode yang di jalankan
    <?php
$pilih = $_POST["pilihan"];
switch ($pilih){
case "+":
$hasil = $_POST["angka1"] + $_POST["angka2"];
break;
case "-":
$hasil = $_POST["angka1"] - $_POST["angka2"];
break;
case "*":
$hasil = $_POST["angka1"] * $_POST["angka2"];
break;
case "/":
$hasil = $_POST["angka1"] / $_POST["angka2"];
break;
}
   ?>
pada dasarnya fungsi ini berjalan saat perintah ke 3 (buton hitung diklik)
penjelasan kode :
$pilih = $_POST["pilihan"];  artinya variabel "pilih" mengambil nilai dari "pilihan" (name pada combobox)
$_POST berfungsi mengambil nilai.
untuk fungsi menggunakan switch case :
switch ($pilih) pada variabel "pilih" dia mengambil atau bernilai sama dengan value dari option combobox
setiap setelah penulisan 1 case d akhiri dengan "break;" dengan tujuan agar case yang lain tidak dieksekusi.

Sebenarnya untuk penulisan fungsi bisa juga menggunakan if ... else
contoh :
   <?php
$pilih = $_POST["pilih"];
if($pilih=="+"){
   $hasil = $_POST["angka1"] + $_POST["angka2"];
}else if ($pilih == "-"){
$hasil = $_POST["angka1"] - $_POST["angka2"];
}else if ($pilih == "*"){
$hasil = $_POST["angka1"] * $_POST["angka2"];
}else if ($pilih == "/"){
$hasil = $_POST["angka1"] / $_POST["angka2"];
}
   ?>




Oleh : di Tidak ada komentar

Form Pendaftarar

Rabu,06 Oleh :

Nama
Alamat
Tanggal Lahir
Kecamatan
No. Telpon
Alamat Web
E-mail
Penjelasan

 Kode HTML yang ada dibalik form tersebut :

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
<table>
<tr>
<th align="left">Nama</th>
<td align="left"><input name="nama" placeholder="nama" type="text" /></td>
</tr>
<tr>
<th align="left">Alamat</th>
<td align="left"><input name="alamat" placeholder="alamat" type="text" /></td>
</tr>
<tr>
<th align="left">Tanggal Lahir</th>
<td align="left"><input name="tgllhr" type="date" /></td>
</tr>
<tr>
<th align="left">Kecamatan</th>
<td align="left">
<select align="center" name="kecamatan">
  <option selected="" value="^.^-pilih-^.^">^.^-pilih-^.^</option>
  <option value="Srono">Srono</option>
  <option value="Rogojampi">Rogojampi</option>
  <option value="Banyuwangi">Banyuwangi</option>
  <option value="Kalibaru">Kalibaru</option>
  <option value="Genteng">Genteng</option>
  <option value="Jenggawa">Jenggawa</option>
  <option value="Jelbuk">Jelbuk</option>
</select>
</td>
</tr>
<th align="left">No. Telpon</th>
<td align="left"><input name="notelp" placeholder="ex: 085123123123 " type="tel" /></td>
<tr>
<th align="left">Alamat Web</th>
<td align="left"><input name="web" placeholder="url web" type="url" /></td>
</tr>
<tr>
<th align="left">E-mail</th>
<td align="left"><input name="email" placeholder="alamat e-mail" type="email" /></td>
</tr>
<tr>
<td></td>
<td colspan="2" align="center"><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>

            Dalam pembuatan form ini menggunakan tabel karena bertujuan agar tampilan bisa lebih rapi. Referensi untuk pembuatan tabel : disini .
 <table> perintah untuk membuat table dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel dengan tag penutup </tr> , tag <th> (table header) digunakan sebagai title atau judul dari baris maupun kolom yang ditampilkan dalam bentuk cetakan tebal dengan tag penutup </th>, dan tag <td> (tabel data) untuk membuat kolom pada tabel atau menyatakan data dengan tag penutup </td>.

Fungsi-fungsi kode html dalam form :

Tag <input> berfungsi membuat sebuah field inputan dimana pengguna bisa memasukkan data, dan berada didalam tag <form> . dan tag <input> memiliki atribut yang bervariasi yang dapat disesuaikan dengan kebutuhan. Untuk form Pendaftran diatas tag <input> menggunakan atribut type, name, placeholder.

  • type ( jenis inputan atau tipe data yang akan dimasukan contoh text, url, email, date, dll)
  • name ( memberi nama untuk setiap jenis inputan atau pemberian nama variabel )
  • placeholder ( Memberikan petunjuk singkat yang menggambarkan nilai yang diharapkan pada field tag <input> tersebut)
pada field kecamatan menggunakan fitur combobox
tag <select> berfungsi membuat daftar drop down dengan beberapa plilihan sesuai dengan kebutuhan dan ditutup dengan </select>. Untuk menu pilihan (drop down) menggunakan tag <option> diikuti dengan nama pilihan, dan ditutup dengan </option> dalam option juga terdapat atribut "value" yang berfungsi memberi nilai pada database.




Oleh : di Tidak ada komentar
Langganan: Postingan (Atom)
bayu breeze. Diberdayakan oleh Blogger.
© Belajar Web | Created By Kick Blogger