Langsung ke konten utama

perbedaan div dan class barlianno.

perbedaan div dan class barlianno.

perbedaan antara lain:
dalam penulisan css div diawali dengan(#) sedankan class di awali dengan titik (.)

contoh penulisan div dan class.
.semua_kotak1 {font-family:tahoma, verdana; font-size:24px; color:red;}/*ini adalah class*/
#halaman{ width:980px; margin:0 auto;  background-color:#03438D; /*ini adalah div*/

setiap class bisa di masukan pada div sesuai dengan keinginan kita.untuk lebih jelas kita coba langgsung praktek.
buat 2 fail di satu polder yang di beri nama index.html dan style.css

style.css
===========================================
@charset "utp-8";
/**/
.semua_kotak1 {font-family:tahoma, verdana; font-size:24px; color:red;}/*ini adalah class*/
.semua_kotak2 {font-family:tahoma, verdana; font-size:18px; color:blue;}/*ini adalah class*/

#halaman{
 width:980px;
 margin:0 auto;
  background-color:#03438D;/*warna biru*/
 }   
#header {
 height: 80px;
 padding:10px;
 background-color:#CCCCCC;
 }  
#kiri{
 height:400px;
 padding:10px;background-color:#CCCCCC;
 float:left;
 width:250px;
 margin-top:10px;
border-radius : 10px;
 }  
#kanan {
 height:400px;
 padding:10px;
 background-color:#33FF33;
 float:right;width:250px;
 margin-top:10px;
 }  
#tengah {
 height:400px;
 padding:10px;background-color:#CCCCCC;
 margin:10px 290px 0 290px;
 }  
#footer { clear:both; height:40px;padding:10px; background-color:#CCCCCC; margin-top:10px;}
=======================================
index.html
=======================================
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout 3 kolom dengan css barlianno </title>
<link rel='stylesheet' type='text/css' href='style.css'/>

   </head>
 
   <body>
     <div id="halaman">
   <div id="header">
   HEADER
   </div>
   <div id="kiri"class="semua_kotak1">
  isi  KIRI
  <br> height:400px;
 padding:10px;
 background-color:#CCCCCC;
 float:left;
 width:250px;
 margin-top:10px;
border-radius : 10px;
 pakai class "class="semua_kotak1"
   </div>
   <div id="kanan">
   isi KANAN
   <br>
   height:400px;
 padding:10px;
 background-color:#33FF33;
 float:right;width:250px;
 margin-top:10px;
 tanpa class
   </div>
   <div id="tengah"class="semua_kotak2">
   isi TENGAH
   <br>
   height:400px;
 padding:10px;
 background-color:#CCCCCC;
 margin:10px 290px 0 290px;
 pakai class "class="semua_kotak2"
   </div>
  
   <div id="footer">
 
   FOOTER
   </div>

  
   </div>
   </body>
   </html>
==========================================
hasil
==========================================
keterangan gambar:
pada isi kiri muncul warna tek merah karna menggunakan  class semua_kotak1
pada isi tengah muncul warana biru karna menngunakan class semua_kotak2
pada isi kanan muncul warna tek yang belum di seting pakai class.




cara memasukan di html

semoga bermangfaat
telah di uji coba di lab barlianno.

Komentar

Posting Komentar

Postingan populer dari blog ini

agar phpmyadmin bisa di akses dari luar

Setting local server XAMPP agar bisa di panggil dari komputer lain dalam jaringan katika akan membuat aplikasi client server dengan mengandalkan localserver XAMPP hal yang apling penting yaitu XAMPP pada komputer server dapat dipanggil dari komputer client. Agar XAMPP komputer server dapat dipanggil maka perlu kita lakukan pengaturan sebagai berikut: Buka file httpd.conf   di folder C:\xampp\apache\conf , ggunakan notepad atau notepad++ untuk lebih mudahnya Cari tulisan LoadModule vhost_alias_module modules/mod_vhost_alias.so  dan hilangkan tanda pagar (#) didepannya. Cari tulisan Include "conf/extra/httpd-vhosts.conf" apabila didepanya masih ada tanda # hilangkan tanda tersebut. Selanjutnya kita perlu mengatur siapa saja yang dapat mengakses XAMPP pada komputer server, langkah-langkahnya seperti berikut. Buka file httpd-xampp.conf di C:\xampp\apache\conf\extra . Dibagian paling bawah terdapat tulisan seperti berikut view plain print ?
2 komentar
Baca selengkapnya

CARA MENGHITUNG Solar Charge Controller

CARA MENGHITUNG SOLAR CHARGE CONTROLLER Untuk menghitung kebutuhan solar charge controller, maka kita harus mengetahui dulu karakteristik dan spesifikasi dari solar panel, pada solar panel terdapat spesifikasi sebagai berikut : maximum power (Pm)                            = 110 Wp Optimum Power Voltage (Vmp)             = 16,7 VDC Optimum Operation Current (Imp)        = 6,6 A Open Circuit Voltage (Voc)                    = 20,7 A short circuit current (Isc)                      = 7,5 A yang harus diperhatikan adalah angka Isc (short circuit current) , nilainya dikalikan dengan jumlah panel surya, hasilnya merupakan nilai berapa nilai minimal dari charge controller yang dibutuhkan contoh kita menngunakan 1 panel surya 110 wp maka kita memakai controler 10 A. kalow kita memakai dua buah panel surya dipasang paraler maka kita butuk kontroler 7,5 X 2 = 15 A. maka sebaiknya kita menggunakan controler yang 20 A agar aman. cara kerja controler.   Solar charge controller , ad
Posting Komentar
Baca selengkapnya

cara pasang jarum dot matrix lq 2180

memasang jarum 24 pin dotmatrik merupakan hal yang paling sulit, dan memerlukan kesabaran, apalagi jika kita tidak mengetahui urutan pemasangan jarum nya. di bawah ini saya akan mencoba memasang jarum serta tahapan tahapannya. kunci dari pemasangan terletak pada pemasangan jarum pendek. kita harus memastikan jarum pendek terpasang secara sempurna pada titik lobang yang telah ditentukan.kita harus memasang jarum pendek dari urutan pertama dan meloncati satu lobang untuk nantinya dipasang jarum panjang.kalow pemasangan jarum pendek tidak terpasang dengan sempurna maka pada waktu pemasangan jarum panjang akan susah masuk. dan harus di ulang dari awal capepee dehhh.   gambar di atas memperlihatkan tahap pemasangan jarum pendek sampai ke jarum panjang. setelah pemasangan jarum selesai dan head sdiap di coba . selamat mencoba telah di uji di lab barlianno. http://www.sewadpc.com/
9 komentar
Baca selengkapnya