Archive for Juli 2016

Cara Menampilkan Audio dan Gambar di Web

01.15 Add Comment
Assalamualaikum Wr.Wb.

Hai sahabat blogger, kali ini share tentang cara menampilkan audio dan gambar di web. Mari saksikan kawan.

 


 


Latar Belakang:
Dengan menggunakan latar belakang video kita dapat menyampaikan informasi melalui audio dan gambar.
 
Alat dan Bahan: 
  1. Laptop / Komputer.
  2. Sublime Text.
Maksud dan Tujuan:
Maksud dan tujuan kali ini, agar bisa menampilkan audio maupun gambar di web.
 
Langkah - langkah pembutan web diatas:
  1. Buka sublime text,
  2. Ketikkan syntak tersebut  (syntax audio):
<audio controls>

  <source src="audio/merahputih.mp3" type="audio/mpeg">

</audio>
 
 3. Syntax untuk menampilkan gambar:

<img src="images/c.jpg" height="200px" width="400px">

Penutup: 
Selamat mencoba para blogger.

Wassalamualaikum Wr. Wb

Cara Menampilkan Video di Web

01.15 Add Comment
Assalamualaikum Wr. Wb.

Hallo kawan, masih dengan blog saya kali ini akan share tentang cara menampilkan video di web.

 

Latar Belakang:
Dengan menggunakan latar belakang video kita dapat menyampaikan informasi melalui video.

Alat dan Bahan: 
  1. Komputer / Laptop.
  2. Sublime Text.

Maksud dan Tujuan: 
Maksud dan tujuan kali ini, agar bisa menampilkan video di web.

Langkah - langkah pembuatan:
  1. Buka sublime text,
  2. Ketikkan syntax seperti ini:
<!DOCTYPE html>
<html>
<body>

<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
 
</video>
</body>
</html>

Penutup: 

 Selamat mencoba dan semoga berhasil mencoba syntax diatas.

Wassalamualaikum Wr. Wb.


 
 
 

Cara membuat Menu Horizontal, Hover dan Dropdown

02.02 Add Comment
Assalamualaikum Wr.Wb.

Hai Para Blogger...
Masih dengan blog saya hari ini, kali ini share tentang cara membuat menu horizontal, hover dan dropdown di web.


 

  • Pengertian: 
Dropdown adalah bentuk menu yang menurun kebawah atau kesamping pada tampilan Graphical User Interface. Serupa dengan list box, yang memungkinkan user memilih salah satu opsi dari list yang tersedia.
  • Latar Belakang:
Latar belakang share materi kali ini, agar bisa membuat tampilan web lebih bagus.

  • Alat dan Bahan: 
  1. Laptop/ Komputer.
  2. Sublime text


  • Maksud dan Tujuan:
Maksud dan tujuan share materi diatas ,  untuk mempercantik agar tampilan web lebih bagus dan bisa menghemat link pada menu.

  • Langkah - langkah pembuatan web seperti gambar diatas:
  1. Buka sublime text,
  2. ketikkan syntax html:
 <!DOCTYPE html>
<html>
<head>

</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown</a>
    <div class="dropdown-content" id="myDropdown">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<script>

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}


window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var d = 0; d < dropdowns.length; d++) {
      var openDropdown = dropdowns[d];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>


3.kemudian untuk mempercantiktampilan,ketikkanlah syntax CSS:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: blue;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}
  • Referensi:
  1. http://www.w3schools.com/howto/howto_js_dropdown.asp

  • Penutup:
Selamat mencoba para pengunjung blogger !!!! GoodLuck

Wassalamualaikum Wb. Wb. 

Cara Membuat Menu Vertikal dan Hover dengan CSS

23.12 Add Comment

Assalamualaikum Wr. Wb.

Semangat Pagi..!!!

Hai kawan blogger, hari ini saya akan share tentang cara membuat menu vertikal dan hover di web dengan CSS.

 


 Apa sih arti dari hover itu?

  • Pengertian:
Arti hover dalam internet, hover dalam bahasa Indonesia bisa diartikan "melayang-layang".Dimaksudkan bahwa ketika kita akan mengeklik sebuah link/tautan dan saat kursor berada diatas link dan kita belum melakukan klik , warna link akan berubah dari warna aslinya.

  •  Alat dan Bahan:
  1. Laptop/ komputer.
  2. Sublime Text.

  • Maksud dan Tujuan: 
Untuk memperindah tampilan pada web.


  • Langkah - langkah pembuatan:
  1. Buka sublime text,
  2. ketikkanlah script dibawah ini:
 
<html>
<head>
    <title>Latihan Dasar</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="head">
   
</div>
<div id="kiri">
    <ul id="simple">
    <li><a href="#">Home</a></li>
    <li><a href="#">Login</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
</ul>
</div>
<div id="nav">
   
</div>
<div id="foot">
</div>

</body>
</html>

  •  Script CSS:
#head {
    background-color: black;
    height: 100px;
    width: 100%;
    border-radius: 15px ;
    border-bottom: 8px solid #F39C12;
    }
   

#kiri{
    background-color: #19B5FE;
    height: 400px;
    width: 15%;
   
    border-radius: 15px;
}
#nav{
    background-color: #C5EFF7;
    width: 85%;
    height: 400px;
    margin-left: 140px;
    border-radius: 15px;
    margin-top: -400px;
}
#simple {
    margin: 0;
    padding: 5px;
    width: 140px;
    border-radius: 5px;
}

#simple li {
    background: linear-gradient(-45deg, #19B5FE, #005ddc);
    border-bottom: 3px solid #000;
    list-style: none;
    padding: 0.9em;
    text-align: center;
    width: 100px;
}
#simple li:hover {
    background: linear-gradient(-45deg, yellow, #5ca1ff);
}

#simple li a {
    color: black;
    display: block;
    text-decoration: none;

}

  • Referensi:-

  • Penutup:
Selamat mencoba dan semoga bermanfaat.

Wassalamualaikum Wr. Wb.

Cara Membuat tampilan web / layout dengan HTML

23.12 Add Comment

Assalamualaikum WR. Wb.


Hai kawan masih dengan blog saya , tetap dengan "Semangat pagi,,!". Selasa, 26 July 2016 akan share tentang membuat tampilan web/ layout dengan html.

Untukmembuat website kita harus memiliki pemikiran tentang bagaimana layout dari sebuah website tersebut. Maka dari itu tutorial ini sangatlah penting bagi kawan pembaca yang baru mau mengenal HTMK dan CSS.
  • Pengertian HTML:
Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

  • Pengertian CSS:
 CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

  • Pengertian Layout :
Layout adalah tata letak dari suatu elemen desain yang di tempatkan dalam sebuah bidang menggunakan sebuah media yang sebelumnya sudah di konsep terlebih dahulu. Simplenya layout itu mengatur desain supaya menjadi indah dan enak dilihat serta memanjakan mata.

  • Latar Belakang : 
Perkembangan aplikasi web yang semakin pesat sejak munculnya teknologi internet sangat membantu dalam kemudahan serta kecepatan pengiriman, penyampaian dan penerimaan informasi. Mulai dari perusahaan, sekolah, perguruan tinggi, dan lembaga atau organisasi lainnya telah banyak memanfaatkan aplikasi web dalam kegiatan penjualan, promosi, belajar dan kegiatan lainnya dimana dibutuhkan pengiriman, penyebaran dan penerimaan informasi sehingga memberikan kemudahan bagi pengguna (user) yang membutuhkan. 

  • Alat dan Bahan:
  1. Komputer / Laptop.
  2. Sublime Text. 

  • Maksud dan Tujuan: 
Maksud dan tujuan pembuatan web, untuk merancang suatu aplikasi web yang dinamis yang dimanfaatkan untuk menyebarkan informasi yang baik dengan cepat dan mudah.

  • Langkah-langkah pembuatan web seperti gambar diatas:
  1. Buka sublime text
  2. ketikkan syntax HTML seperti ini:
<!DOCTYPE html>
<html>
<head>
    <title>Latihan Dasar</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="head">
    <center>Header</center><br><br><br><br><br><br><br><br>
</div>
<div id="kiri">
    Kiri
</div>
<div id="nav">
    Navigasi
</div>
<div id="foot"><
Footer</div>

</body>
</html>

3. Untuk mempercantik penampilan web , ketikkan syntax CSS:


#head {
    background-color: #6C7A89;
    height: 90px;
    width: 85%;
    border-radius: 15px ;
    border-left: 30px;
    margin-left: 70px;
    margin-right: 70px;
}

#kiri{
    background-color: #19B5FE;
    height: 330px;
    width: 15%;
    margin-left: 70px;
    border-radius: 15px;
}
#nav{
    background-color: #2ECC71;
    width: 70%;
    height: 330px;
    margin-left: 210px;
    border-radius: 15px;
    margin-top: -330px;
}
#foot{


    background-color: black;
    height: 40px;
    width: 85%;
    border-radius: 15px ;
    border-left: 30px;
    margin-left: 70px;
    margin-right: 70px;
}
Teman-teman  bisa mengembangkan sendiri warna dan letaknya sesuai keinginan. Karena pada tutorial ini kita hanya menjelasakan dasarnya, dengan warna yang berbeda-beda agar pemula yang ingin belajar bisa lebih mudah memahami fungsi dan letaknya. Dan pastikan anda selalu mempraktekkannya langsung bisa mudah untuk memahami setiap baris dari kode html.
  •  Penutup:
Selamat Mencoba. Good Luck..!!!
 Wassalamualaikum Wr. Wb.

Workshop CISCO Data Center Virtualization Fundamental bersama om Danu Wiyoto di RSPD Klaten.

02.08 Add Comment
Assalamualaikum wr.wb
 
kali ini share tentang kegiatan di BLC Telkom Klaten . Minggu, 24 Juli 2016

Masih berlangsung Workshop CISCO Data Center Virtualization Fundamental bersama om Danu Wiyoto di RSPD Klaten.
Menyusul selanjutnya kita akan duetkan bersama kang Nathan Gusti Ryan tuk bahas CISCO Networking & Clouds Data Redundancy, System Disaster Recovery.






Wassalamualaikum wr.wb

Membuat Form Input Sederhana

01.57 Add Comment
Assalamualakum...

Haiii selamat datang kawan, kali ini share tentang membuat form input sederhana.






Untuk membuat form input data seperti diatas,

  • Pertama, buka sublime text
  • kemudian ketikkan script seperti dibawah ini:
<html>
<h2 align="center"> Input Data </h2> <hr />
<form action="artikel/proses_input.php" method="post">
  <table width="200" align="center">
    <center><tr>
      <td>Nama</td>
      <td>:</td>
      <td><input type="text" name="nama" id="nama" /></td>
    </tr>
    <tr>
      <td>Alamat</td>
      <td>:</td>
      <td><textarea name="alamat" id="alamat" cols="45" rows="5"></textarea></td>
    </tr>
    <tr>
      <td>Email</td>
      <td>:</td>
      <td><input type="text" name="email" id="email" /></td>
    </tr></center>
    <tr>
      <td height="21" colspan="3" ><input type="submit" name="button" id="button" value="Simpan"  style="float:right;margin-right:10px"/></td>
    </tr>
  </table>
</form>
</html>


  • Jika ingin mempercantik tampilan, bisa ditambahkan css.


Terima kasih..

Wassalamualaikum...

Membuat Tampilan Login Sederhana

01.40 Add Comment
Assalamualaikum Wb.Wb

Masih sama "Semangat Pagi..!!...

kali ini share tentang cara membuat tampilan login sederhana.


 


  1. Tulislah script seperti dibawah ini:
 <html>
<body>

 <br> <br><br> <br><br> <br> <br><fieldset>
   
    <legend><p>Sign In</p></legend>
<center><p>Silahkan login dengan username dan password anda</p></center>
    <div class="container">
     <center><label><b>Username</b></label>
      <td>:</td>
      <input type="text" placeholder=" Username" name="uname" required><br>

      <label><b>Password</b></label>
      &nbsp;<td>:</td>
      <input type="text" placeholder="Password" name="psw" required>
        </center>
      <center><button type="submit">Login</button>
     
    </div>

   
     
     </fieldset>
    </div>
  </form>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

</body>
</html>

2. Untuk mempercantik tampilan:



< style>
body{
background: url('images/wkr.jpg') no-repeat scroll;
background-size: 100% 100%;
min-height: 700px;
font-family:
}
p {
   color: #22A7F0;
}

 input[type=text] {
    width: 30%;
    padding: 6px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
button {
    background-color: #22A7F0;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 10%;
}


.container {
    padding: 16px;
}
</style>


Sekian dan selamat mecoba script tersebut.

Wassalamualaikum Wr.Wb.

PHP Indonesia MeetUp

01.08 Add Comment
Assalamualaikum wr.wb
 
Semangat pagi..!!!
 
Kali ini share kegiatan Sabtu, 23 Juli 2016:

PHP Indonesia MeetUp 9 Jogloraya
Sabtu, 23 Juli 2016
BLC TELKOM KLATEN
Halal bihalal & Sharing about Laravel Framework













 
Sekian dan terimakasih.
 
Wassalamualaikum wr.wb
Cara menggabungkan HTML dengan CSS

Cara menggabungkan HTML dengan CSS

18.23 Add Comment

Cara menggabungkan HTML dengan CSS

Sebenarnya ada tiga macam cara untuk menggabungkan antara file HTML dengan file CSS.
Berikut ini ketiga cara untuk menggabungkan file HTML dengan CSS :
1.       Inline Style
Inline Style adalah cara penulisan file CSS secara langsung kedalam Tag HTML, berikut ini contoh penulisan Inline Style:
<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
</head>
<body>
<p>
<h2 style=”color:#FFCC00″>Contoh untuk Inline Style  
</p> </h2
</body>
</html>
2.       Embedded Style
Embedded Style merupakan cara penulisan CSS kedalam file HTML per halaman ( Page ) dan penulisan file CSS sebelum ….</head> Berikut ini contoh penulisannya :
<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
<style type=”text/css”>
h2{
color:#FFCC00; background:#CC0000;
}
</style>
</head>
<body>
<p>
<h2>Contoh untuk Embedded Style  
</p>
</h2>
</body>
</html>
3.       Link Style
Untuk penulisan Link Style merupakan penulisan secara terpisah antara file HTML dan file CSS dan kita tinggal memasang link saja, dan pemasangan Link anda bisa taruh di antara <head>…</head>.
Untuk cara Link Style ini yang banyak dipakai oleh para Web Design atau programmer karena cara Link Style adalah cukup satu kali penulisan file CSS yang nantinya dipakai oleh seluruh halaman Website.
Biasanya para Web Design menamai file Link Style CSS dengan nama style.css.
Berikut ini contoh filenya:
<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” /> </head>
<body>
<p>
<h2>Contoh untuk Link Style  
</p>
</h2>
</body>
</html>
                               File CSS biasanya disimpan dengan ekstitensi .css atau dengan nama style.css
h2{
color: #FFCC00;
background: #CC0000;
}
Catatan : 
ü  Untuk menyisipkan Link ke file style.css penempatannya harus diantara  <head>….</head>.
ü  Anda bisa membuat lebih file css lebih dari satu sesuai dengan kebutuhan.

Komponen Property yang digunakan 


Berikut ini adalah komponen property yang digunakan pada CSS :

Property Text Style

Property Text Style bisa anda gunakan untuk membuat gaya tulisan anda pada web. Adapun komponen Text Style atau yang berhubungan dengan model atau gaya tulisan/font dari CSS adalah sebagai berikut ini : 
1.       color
Property ini mengontrol warna dari text penulisannya 
Selektor {color:#000000}
Value bisa warna Hexadesimal bisa hanya tulisan misalnya untuk kuning   menggunakan Yellow.
2.       font-weight
Property ini mengontrol tebal dari text penulisannya
Selektor { font-weight:100}
Value bisa anda tulis dengan angka mulai dari seratus dan dilanjutkan dengan kelipatannya atau bisa anda tulis dengan kata ‘Bold’ atau yang lain.
3.       font-family
Property ini untuk mengatur font yang anda pakai
Selektor{font-family:Arial, Helvetica, sans-serif}
Untuk jenis font sebaiknya menggunakan standard bawaan Windows,jika ingin terbaca oleh seluruh user. 
4.       font-size
Property ini untuk mengatur ukuran font yang akan dipakai
Selektor{ font-size:12px}
Untuk ukuran font anda bisa menggunakan ukuran… px,…em atau small,medium,large dll.
5.       font-variant
Property ini untuk mengatur font yang akan muncul apakah menggunakan huruf kecil atau small caps
Selektor{ font-variant:small-caps} atau anda bisa menggunakan normal.
6.       font-style
Property ini untuk mengatur style font yang akan digunakan pada text 
Selektor{ font-style:italic} pilihan value lain normal, oblique
7.       text-decoration
Property ini untuk mengatur style font lanjutan dari font style.
Selektor{text-decoration:underline} atau value lain : line through, none, blink, overline
8.       text-transform
Property ini untuk mengatur capital font
Selektor{ text-transform:lowercase}  value lain: uppercase, capitalize .
Property Text Layout

Property Text Layout

18.23 Add Comment

Property Text Layout

Property Text Layout ini berfungsi untuk mengatur bagaimana efek dari suatu layout suatu tulisan pada halaman website.
Property ini lebih berfokus pada penempatan dan tampilan yang ditempatkan pada halaman web anda.
Anda bisa mengombinasikan antara tampilan page layout dan text layout supaya tampilan website anda lebih elegant dan sesuai dengan keinginan anda tentunya dan itu yang jelas tidak bisa anda dapatkan pada HTML.
Berikut ini propertynya :
1.       letter-spacing 
Property ini untuk mengontrol jarak space antar karakter
Selektor{letter-spacing:normal} untuk value normal maka akan diatur oleh browser sebagai justify text.
2.       word-spacing
Property ini untuk mengontrol jarak space antar text atau kata
Selektor{ word-spacing:normal}  
3.       line-height
Property ini untuk mengatur jarak line atau garis
Selektor{ line-height:normal} value lain :  …em, …px atau persentase …%
4.       text-indent
Property ini untuk mengatur dari baris pertama yang masuk biasanya untuk awal paragraph. 
Selektor{ text-indent:50px}
5.       text-align
Property ini untuk mengatur posisi dari text
Selektor{ text-align:justify} Value lain : left, right, center
6.       vertical-align
Property ini untuk mengontrol jarak space antar text atau kata
Selektor{ vertical-align:top} value lain: text-top,text-bottom, bottom, middle, baseline, sub, super.
7.       direction
Property ini untuk mengatur dan menentukan arah dari suatu tulisan pada website
Selektor{ direction:ltr} Value lain : rtl
Keterangan : ltr =Tulisan yang terbaca dari kiri ke kanan
                        rtl =Tulisan yang terbaca dari kanan ke kiri     
8.       unicode-bidi
Property ini untuk mengontrol dan mengarahkan pada tulisan unicode Selektor{ unicode-bidi:bidi-override} Value lain : normal, embed

Property Border

Property ini adalah untuk mengatur elemen yang mempunyai garis dengan berbagai variasi lebar,warna serta gaya suatu tampilan.
Anda bisa membuat suatu garis antara kiri-kanan-atas-bawah dengan berbeda style.
Berikut ini propertynya :
1.       border
Property ini untuk mengatur border secara keseluruhan
Selektor{border:normal} Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid
2.       border-width
Property ini untuk mengatur lebar border secara keseluruhan
Selektor{ border-width:thin} Value lain : thick, medium
3.       border-top-width
Property ini untuk mengatur lebar border top
Selektor{ border-top-width:thin} Value lain : thick, medium
4.       border-right-width
Property ini untuk mengatur lebar border right
Selektor{ border-right-width:thin} Value lain : thick, medium
5.       border-bottom-width
Property ini untuk mengatur lebar border bottom
Selektor{ border-bottom-width:thin} Value lain : thick, medium
6.       border-left-width
Property ini untuk mengatur lebar border left 
Selektor{ border-left-width:normal} Value lain : thick, medium
7.       border-color
Property ini untuk mengatur warna dari border 
Selektor{ border-color:#333333} Value lain : anda bisa gunakan warna hexadecimal yang awalnya dimulai dengan tanda #
8.       border-style
Property ini untuk mengatur style dari border 
Selektor{ border-style:normal} Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid
9.       border-top
Property ini untuk mengatur border top
Selektor{ border-top:normal} Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid
10.   border-right
Property ini untuk mengatur border right
Selektor{ border-right:normal} Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid
11.   border-bottom
Property ini untuk mengatur border bottom
Selektor{ border-bottom:normal} Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid
12.   border-left
Property ini untuk mengatur border left
Selektor{ border-left:normal} Value lain : thin, thick, dashed, dotted, double, grove, hidden, inset, none , outset, ridge, solid

Property Margin


Property Margin ini untuk mengatur ruang atau jarak batasan antar elemen, misalnya antara elemen atas dan bawah, atau antara kiri dan bawah dll.
Berikut ini propertynya :
1.       margin
Property ini untuk mengatur jarak meliputi secara keseluruhan antar elemen Selektor{ margin:auto} Value lain bisa ukuran …px,…em atau persentase misalnya 25%
2.       margin-top
Property ini untuk mengatur jarak top dengan elemen
Selektor{ margin-top:auto} Value lain bisa ukuran …px,…em atau persentase misalnya 25%
3.       margin-left
Property ini untuk mengatur jarak left dengan elemen
Selektor{ margin-left:auto} Value lain bisa ukuran …px,…em atau persentase misalnya 25%
4.       margin-right
Property ini untuk mengatur jarak right dengan elemen Selektor{ margin-right:auto} Value lain bisa ukuran …px,…em atau persentase misalnya 25%
5.       margin-bottom
Property ini untuk mengatur jarak bottom dengan elemen Selektor{ margin-bottom:auto} Value lain bisa ukuran …px,…em atau persentase misalnya 25%
  
Property Padding
Property padding adalah untuk mengatur ruang antara elemen dan konten.
Berikut ini propertynya :
1.       padding
Property ini untuk mengatur ruang elemen dengan konten secara global  Selektor{ padding:7px} Value lain bisa ukuran …px,…em atau persentase misalnya 25%
2.       padding-top
Property ini untuk mengatur ruang elemen top  dengan konten
Selektor{ padding-top:7px} Value lain bisa ukuran …px,…em atau persentase misalnya 25%
3.       padding-left
Property ini untuk mengatur ruang elemen left  dengan konten
Selektor{ padding-left:7px} Value lain bisa ukuran …px,…em atau persentase misalnya 25%
4.       padding-right
Property ini untuk mengatur ruang elemen right  dengan konten Selektor{ padding-right:7px} Value lain bisa ukuran …px,…em atau persentase misalnya 25%
5.       padding-bottom
Property ini untuk mengatur ruang elemen bottom  dengan konten Selektor{ padding-bottom:7px} Value lain bisa ukuran …px,…em atau persentase misalnya 25% 

Property Page Layout

Property Page Layout adalah untuk mendesign suatu layout pada halaman web, ini property penting yang harus anda kuasai karena dengan menguasai property ini maka anda bisa membuat suatu halaman web yang bagus dan tentunya harus didukung akan kreatifitas seseorang. 
Pada HTML tidak mendukung akan tampilan layout sebaik CSS, dengan menguasai Property ini anda juga bisa merubah pada themes atau template pada script CMS yang da sekarang ini.
Berikut ini propertynya :
1.       position
Property ini untuk menentukan dimana  elemen  akan ditempatkan juga untuk menempatkan elemen induk. 
Selektor{ position:absolute} Value lain : fixed,relative, static, top, bottom, left, right
2.       top
Property ini untuk menentukan bagian atas dari suatu elemen ditempatkan.
Selektor{ top:absolute} Value lain : fixed,relative, static,auto
3.       left
Property ini untuk menentukan bagian kiri dari suatu elemen ditempatkan.
Selektor{ left:absolute} Value lain : fixed,relative, static,auto
4.       bottom
Property ini untuk menentukan bagian bawah dari suatu elemen ditempatkan.
Selektor{ bottom:absolute} Value lain : fixed,relative, static,auto 5. right
Property ini untuk menentukan bagian kanan dari suatu elemen ditempatkan.
Selektor{ right:absolute} Value lain : fixed,relative, static,auto
6.       width
Property ini untuk menentukan lebar dari suatu elemen
Selektor{width:50%} value lain: …px,…em,auto
7.       min-width
Property ini untuk menentukan lebar minimal dari suatu elemen
Selektor{ min-width:50%} value lain: …px,…em,auto,none
8.       max-width
Property ini untuk menentukan lebar maximal dari suatu elemen
Selektor{ max-width:50%} value lain: …px,…em,auto,none
9.       height
Property ini untuk menentukan tinggi dari suatu elemen
Selektor{ height:50%} value lain: …px,…em,auto,none
10.   min-height
Property ini untuk menentukan tinggi minimal dari suatu elemen
Selektor{ min-height:50%} value lain: …px,…em,auto,none
11.   max-height
Property ini untuk menentukan tinggi maximal dari suatu elemen
Selektor{ max-height:50%} value lain: …px,…em,auto,none
12.   z-index
Property ini untuk mengatur beberpa elemen yang terjadi overlap
Selektor{z-index:auto} value lain mengunakan bilangan bulat ( integer)
13.   visibility
Property ini untuk mengatur  elemen apakah ditampilkan pada browser atau tidak.
Selektor{ visibility:hidden} Value lain : visible, collapse 
14.   overflow
Property ini untuk mengatur menampilkan konten yang tidak bisa ditampung oleh elemen
Selektor{ overflow:auto} Value Lain : hidden, scroll, visible
15.   float
Property ini membuat efek elemen yang keluar dari flow dan ditempatkan disisi kiri atau kanan suatu elemen
Selektor(float:left} Value lain : None, right
16.   clear
Property ini digunakan bersama dengan float dan disini ditentukan apakah elemen bisa menerima suatu float atau tidak.
Selektor{ clear:both} Value lain : left, right, none
17.   clip
Property ini untuk mengatur cupilkan kecil suatu elemen untuk ditampilkan. Selektor{ clip:rect('top', 'right', 'bottom', 'left')} Value lain : both

Property Background

Property ini berguna untuk mengatur tampilan background atau halaman belakang suatu web serta pengaturan suatu background yang lainnya misalnya background dari font.
Berikut ini propertynya :
1.       background
Property ini untuk mengatur background secara luas
Selektor{ background:bottom} Untuk value lain bisa : url, none, center, left, right, top, no-reapet, reapet, reapet-x, reapet-y, fixed, scroll  Untuk contoh penggunaaan value url :
Selektor(background:url(http://rudydevianto.com/background.png)                 fixed no-reapet  top left}
2.       background-color
Property ini untuk mengatur warna dari background
Selektor {background-color:#000033} Value lain anda bisa gunakan pewarnaan hexadecimal.
3.       background-image
Property ini untuk mengatur background gambar dari suatu table , halaman atau elemen yang lain
Selektor(background:url(http://rudydevianto.com/logo.png)} atau value none untuk tidak menampilkan gambar.
4.       background-attachment
Property ini untuk mengatur suatu gambar apakah jika mouse di scroll gambar ikut scroll atau tetap
Selektor{ background-attachment:scroll} Value lain : fixed 
5.       background-repeat
Property ini untuk membuat perintah pada image yang ada pada background untuk perulangan karena disebabkan gambar yang ukuran kecil  Selektor{ background-repeat:repeat} Value lain: no repeat, reapet-x, reapeat-y
6.       background-position
Property ini untuk mengatur posisi dari gambar background pada halaman. Selektor{ background-position:top} Value lain : left, right, bottom, center Property Type Elemen
Property ini untuk mengatur suatu elemen dalam web.
Berikut ini propertynya :
1.       display
Property ini untuk mengatur sebagaimana elemen akan terpasang pada halaman website
Selektor{ display:block} Value lain : compact, inline, inline-table, list-item, marker, none, run-in, table, table-caption, table-cell, table-column, tablecolumn-group, table-footer-group, table-header-group,table-row, table-rowgroup
2.       white-space
Property ini dapat digunakan jika anda menggunakan elemen block dan untuk menentukan apa yang akan browser lakukan kepada white-space ( spasi )
Selektor{ white-space:normal} Value lain : normal, nowrap, pre
3.       list-style-type
Property ini digunakan untuk menentukan suatu Style List Item ( Bullet )  Selektor{ list-style-type:armenian} value lain : cirle, cjk-ideographic, decimal, decimal-leading-zero, disc, georgian, hebrew, hiragana, hiragana-iroha, lower-alpha, lower-greek, lower-latin, lower-roman, none, square, upperalpha, upper-latin, upper-roman
4.       list-style-image
Property ini untuk membuat bullet dari gambar
Selektor{ list-style-image:url(http://rudydevianto.com/bullet.gif)}
5.       list-style-position
Property ini untuk mengatur posisi bullet
Selektor{ list-style-position:inside} Value lain : outside
6.       list-style
Property ini untuk mengatur style dari list ( bullet ) secara global Selektor{ list-style-type:armenian} value lain : url, inside, outside, cirle, cjkideographic, decimal, decimal-leading-zero, disc, georgian, hebrew, hiragana, hiragana-iroha, lower-alpha, lower-greek, lower-latin, lowerroman, none, square, upper-alpha, upper-latin, upper-roman
7.       border-collapse
Property ini untuk mengatur border table
Selektor{border-collapse:collapse} Value lain : separate
8.       border-spacing
Property ini untuk mengatur space pada border
Selektor{border-spacing:0}
9.       caption-side
Property ini untuk mengatur posisi dari caption
Selektor{caption-side:bottom} Value lain : top, left, center, right
10.   empty-cells
Property ini untuk menampilkan atau menyembunyikan cell pada table
Selektor{empty-cells:hide} Value lain : show 
11.   table-layout
Property ini untuk mengatur layout suatu table apakah menyesuaikan atau tetap .
Selektor{table-layout:auto} Value lain : fixed
Property Interface
Property ini untuk mengatur tampilan pada web untuk membuat tampilan yang ditujukan untuk pengguna .
Berikut ini propertynya :
1.       cursor
Property ini untuk mengatur tampilan cursor yang kan dipakai user pada browser
Selektor{cursor:auto} Value lain : url , crosshair, default, e-resize, help, move, ne-resize, n-resize, nw-resize, pointer, se-resize, sw-resize, text, wait, w-resize
2.       outline
Property ini mengatur garis tepi dari elemen secara global Selektor{outline:#333333} untuk warna bisa menggunakan warna hexadecimal lain atau value lain : dashed, dotted, double, groove, hidden, inset, none, outside, ridge, solid, medium, thin, thick
3.       outline-color
Properti ini mengatur warna dari garis tepi suatu elemen Selektor{outline:#333333} untuk warna bisa menggunakan warna hexadecimal lain
4.       outline-style
Property ini untuk mengatur style dari garis tepi suatu elemen
Selektor{outline:dashed} value lain : dotted, double, groove, hidden, inset, none, outside, ridge, solid, medium, thin, thick
5.       outline-width
Property ini untuk mengatur sebeapa lebar garis tepi suatu elemen Selektor{ outline-width:medium} Value lain : thick, thin
                 
Sekarang bagian anda untuk mencoba serta banyak praktek , karena dalam CSS anda harus banyak latihan dan banyak mengexplore, supaya anda paham betul fungsifunsi dari elemen-elemen CC Rule.
Dalam ebook ini saya juga melampirkan contoh website yang menggunakan CSS dan anda bisa meng”oprek”  dan belajar bagaimana CSS dan HTML itu bekerja.
NB :
Untuk mengedit file HTML maupun CSS anda bisa menggunakan software antara lain
:
  • Notepad ( bawaan Windows )
  • Notepad ++
  • CoffeCup
  • Macromedia Dreamweaver
  • dll
Langganan: Postingan (Atom)