Kamis, 03 Agustus 2017

Frame Element - Border CSS

Comment 


Judul : Frame Element - Border CSS.
Tujuan : Mempelajari cara mengatur Border pada tampilan html menggunakan CSS.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Padding CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai Frame Element sesi terakhir yaitu Border CSS. Sesi ini juga mengakhiri dari materi CSS yang dimulai dari sesi materi Apa Itu CSS sampai dengan Frame Element.

<!DOCTYPE html>
<html>
 <head>
  <style type="text/css">
   #biru{
     height: 300px;
     width: 300px;
     border:solid yellow 5px;
   }
   
   #merah{
     Height: 300px;
     width: 300px;
     border-right:solid black 2px;
   }
  </style>
 
  <title>border</title>
 </head>
 <body>
  <div id="biru">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div id="merah">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
 </body>
</html>

Frame Element - Padding CSS

Comment 


Judul : Frame Element - Padding CSS.
Tujuan : Mempelajari cara mengatur Padding pada tampilan html menggunakan CSS.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Margin CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai Frame Element - Padding pada CSS. Frame Element ini di bagi menjadi 3 bagian yaitu margin, padding, dan border. Materi akan di bawas per sesi pada setiap materi mulai dari Margin CSS dan akan dilanjutkan dengan pembahasan Padding CSS dan sesi terakhir pada Frame Element adalah Border CSS.

<!DOCTYPE html>
<html>
 <head> 
  <style type="text/css">

   #biru{
     Height: 300px;
     width: 300px;
     background: blue;
     padding:10px;
   }
   
   #merah{
     Height: 300px;
     widht: 300px;
     background: red;
     padding-left:20px;
     padding-top:50px;
   }
  </style>

  <title>Padding</title>
 </head>

 <body>
  <div id="biru">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>  
  <div id="merah">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
 </body>
</html>

Frame Element - Margin CSS

Comment 


Judul : Frame Element - Margin CSS.
Tujuan : Mempelajari cara mengatur margin atau pembatas pada tampilan html menggunakan CSS.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Background CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai Frame Element pada CSS. Frame Element ini di bagi menjadi 3 bagian yaitu margin, padding, dan border. Materi akan di bahas per sesi pada setiap materi mulai dari Margin CSS dan akan dilanjutkan dengan pembahasan Padding CSS.

<!DOCTYPE html>

<html>
 <head>
  <style type="text/css">
   #biru {
     height: 300px;
     width: 300px;
     background: blue;
     margin:10px;
   }
   
   #merah {
     height: 300px;
     width: 300px;
     background: red;
   }
  </style>
  <title>Margin</title>
 </head>

 <body>
  <div id="biru">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div id="merah">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
 </body>

</html>

Belajar Background CSS

Comment 


Judul : Belajar Background CSS.
Tujuan : Mempelajari cara mengatur Background CSS untuk tampilan pada html.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Width CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai Background CSS. Background ini digunakan untuk memasukkan gambar atau warna dalam halaman html. Kegunaan background ada beberapa jenis pertama itu penggunaan background untuk gambar dan penggunaan background untuk warna solid. Pembahasaan CSS setelah materi ini adalah materi Frame Element CSS.

<!DOCTYPE html>
<html>
 <head>
  <style type="text/css">
   #warna_solid{
       height: 300px;
       width: 300px;
       background:red;
   }

   #warna_solid_code_warna{
       height: 300px;
       width: 300px;
       background:#666;
   }

   #gambar {
      height: 300px;
      width: 300px;
      background:url(gambar/gambarPertama.jpg);
   }
  </style>

  <title>Background</title> 
 </head>

 <body>
  <div id="warna_solid">WARNA SOLID</div>
  <div id="warna_solid_code_warna">WARNA SOLID MENGGUNAKAN KODE WARNA</div>
  <div id="gambar">BACKGROUND MENGGUNAKAN GAMBAR</div>
 </body>
</html>

Belajar Width CSS

Comment 


Judul : Belajar Width CSS.
Tujuan : Mempelajari cara menggunakan width pada CSS untuk mengatur lebar.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Height CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai Width CSS. Hampir sama dengan Height yang digunakan untuk mengatur dan menentukan tinggi pada tampilan, sedangkan Width digunakan untuk mengatur dan menentukan lebar pada tampilan. Pembasahan selanjutnya tentang CSS adalah tentang Background pada CSS.

<!DOCTYPE html>
<html>
 <head> 
  <style type="text/css">

  #lebar_min{
     min-width: 400px;
     background: red;
  }

  #lebar_max{
     max-width: 400px;
     background: red;
  }
  
  #lebar{
    width:400px;
    background:red;
  }

  </style>
  <title>Width</title>
 </head>

 <body>
  <p id="lebar_min"><b>CONTOH MIN WIDTH</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p id="lebar_max"><b>CONTOH MAX WIDTH</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p id="lebar"><b>CONTOH WIDTH</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 </body>
</html>

Belajar Height CSS

Comment 


Judul : Belajar Height CSS.
Tujuan : Mempelajari cara menggunakan height pada CSS untuk mengatur tinggi.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Penulisan CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai Height pada CSS. Height pada CSS di bagi menjadi 3 bagian utuh yaitu max-height, min-height, dan height itu sendiri. Fungsinya terurut adalah untuk menentukan tinggi maksimal, tinggi minimal dan tinggi. Pada penggunaan height biasanya akan diikuti oleh width yang berguna untuk menentukan lebar pada tampilan. Untuk Width CSS akan dibahas pada sesi setelah ini.

<!DOCTYPE html>
<html>
 <head>

  <style type="text/css">
  #tinggi_min{
     min-height: 100px;
     width: 300px;
     background:red;
  }
  
  #tinggi_max {
      max-height: 100px;
      width: 300px;
      background:red;
  }

  #tinggi{
    height: 200px;
    width: 300px;
    background: red;
  }

  </style>
  <title>Height</title>

 </head>
 <body>
 
  <p id="tinggi_min"><b>CONTOH MIN HEIGHT</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  <p id="tinggi_max"><b>CONTOH MAX HEIGHT</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>

  <p id="tinggi"><b>CONTOH HEIGHT</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

 </body>

</html>

Belajar Penulisan CSS - External CSS

Comment 


Judul : Belajar Penulisan CSS - External CSS.
Tujuan : Mempelajari cara penulisan CSS di luar file html.
Target : Dapat memahami struktur dari pemrograman CSS.

Setelah mempelajari Belajar Membuat Selector CSS pada sesi sebelumnya, sekarang kita akan mempelajari mengenai penulisan CSS. Penulisan pada CSS terbagi menjadi 3 bagian yaitu inline css, internal css dan external css. Pada materi kali ini akan membahas tentang External CSS. External CSS yaitu penulisan CSS pada file lain dan diluar file html yang dibangun. Selanjutnya pembahasan pada materi  Height CSS.

<!DOCTYPE html>

<html>

 <head>

  <title>External CSS</title>
  <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

  <p> Tag p akan dibaca sebagai selector oleh CSS.</p>
  <p id="merah">Tag p memiliki id merah.</p>
  <p class="biru besar">Tag p memiliki class besar dan juga kelas biru.</p>

 </body>

</html>


p{
 color:yellow; }

#merah{
 color:red; }

.besar{
 font-size:20px; }

.biru{
 color:blue; }
Langganan: Komentar (Atom)