Langsung ke konten utama
cara memasukan image dengan css

buat fail index.html buat fail style.css buat satu polder untuk menyimpan fail gambar

 ferintah untuk cssnya
=========================================================
img.format1 { width:60px; height:60px; float:left;border:1px solid blue;border-radius:10px;}
img.format2 { width:100px; height:100px; float:right;border:3px solid red;}
img.format3 { width:120px; height:120px;;border:1px solid blue;border-radius:10px;box-shadow:5px;}
==========================================================
perintah di cssnya

perintah di htmlnya

dibawah ini scrif fullnya
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>memasukan image dengan css </title>
<link rel='stylesheet' type='text/css' href='style.css'/>

   </head>
 
   <body>
     <div id="halaman">
   <div id="header">
  <br> image dengan format css <br/>
<img src="image/barlianno.jpg" class="format1" alt="gb barlianno" title="text" />
<img src="image/barlianno.jpg" class="format2" alt="gb barlianno" title="text" />
<img src="image/kunkunmarkun.jpg" class="format1" alt="gb kunkun" title="text" />
<img src="image/kunkunmarkun.jpg" class="format2" alt="gb kunkun" title="text" />
<img src="image/barlin_nadin.jpg" class="format3" alt="gb kunkun" title="text" />
   </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
   <img src="image/kunkunmarkun.jpg" class="format3" alt="gb kunkun" title="text" />
   <br>
   height:400px;
 padding:10px;
 background-color:#33FF33;
 float:right;width:250px;
 margin-top:10px;
 tanpa class
 <br>
 <img src="image/barlin_nadin.jpg" class="format2" alt="gb kunkun" title="text" />
   </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"
 contoh gambar dengan format css
 <br>
 <img src="image/barlianno.jpg" class="format1" alt="gb kunkun" title="text" />
 <img src="image/kunkunmarkun.jpg" class="format1" alt="gb kunkun" title="text" />
 <img src="image/barlin_nadin.jpg" class="format1" alt="gb kunkun" title="text" />
 <img src="image/gundul.jpg" class="format1" alt="gb kunkun" title="text" />
   </div>
   <div id="footer">
 
   FOOTER
   </div>

  
   </div>
   </body>
   </html>
=======================================
fail 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*/
img.format1 { width:60px; height:60px; float:left;border:1px solid blue;border-radius:10px;}
img.format2 { width:100px; height:100px; float:right;border:3px solid red;}
img.format3 { width:120px; height:120px;;border:1px solid blue;border-radius:10px;box-shadow:5px;}
#halaman{
 width:980px;
 margin:0 auto;
  background-color:#03438D;/*warna biru*/
 }   
#header {
 height: 250px;
 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;}
================================================
hasil broser
telah di uji coba di lab barlianno

semoga bermangfaat
kunjugi juga ke
www.barliannet.com

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