Total Pageviews

Blog Archive

Formulir Kontak



Home » Penelusuran Tutorial CMS

mengupas tuntas CMS



Mengupa tuntas CMS merupakan judul pembuakan pembelajaran mengenai CMS yang akan satu persatu saya bahas kedepan. Cukup sering membuaka otakjagat.com anda akan menemui apa yang anda ingin ketahui tentang mengupas tuntas CMS versi otakjagat.com. Sungguh penggunaan CMS merupakan hal yang penting jika kita berusaha untuk membuat website. karena akan mempermudah kita ketika ingin update website kita.

Dapat kita bayang kan kalau kita tidak mempunyai sistem CMS yang telah terinstall di webkita. Kita harus men-upload satu persatu halaman html yang akan kita tampilkan pada user dan itu akan menyita banyak waktu kita. Dan cobalah untuk mengerti yang demikian itu bukan hal yang efektif kalau kita membutuhkan waktu yang singkat untuk meg-update artiket atau product-product kita.

Dalam pembahasan yang menarik yang saya kasih judul mengupas tuntas CMS ini mungkin akan membuat anda penasaran atau sekedar melirik untuk kembali mengunjungi otakjagat.com. Dari yang semua orang ketahui tentang CMS seperti Wordpress ataupun Joomla anda akan menemui CMS CMS yang lain dalam pembahasan mengupas tuntas CMS versi otakjagat.com.

Ingatlah dalam halaman ini hanya sebagai pengantar untuk membahas tuntas CMS yang akan saya postingkan di postingan-postingan berikutnya. Maka tanpa pemberitahuan yang jelas anda tidak boleh ketinggalan uttuk melihat update terbaru mengenai mengupas tuntas CMS versi otakjagat.com selanjudnya.
Bagian Kedua dalam Contoh Pembuatan Layout Menggunakan CSS

Bagian Kedua dalam Contoh Pembuatan Layout Menggunakan CSS

Okey kita akan membahas bagian selanjutnya dari contoh yang kemarin telah otak jagat share ke teman-teman. Dalam bagian kedua dalam contoh pembuatan Layout menggunakan CSS ini kita akan masuk pada code-code CSS yang akan kita gunakan selanjutnya. Beda dari pada pembahasan kemarin yang hanya menuliskan Code-code HTML dengan diikuti <div> di dalam bagian kode HTML tersebut. Pada bagian kedua dalam contoh Pembuatasn layout menggunakan CSS ini kita akan menuliskan apa yang akan terjadi pada bagian code <div id="volue"> atau <div class="volue">. Sampai pada bagian kedua dalam contoh pembuatan layout menggunakan CSS mungkin ada tidak akan paham dengan kefahaman yang sempurna jika anda belum membaca pada bagian pertama dari contoh ini. Silahkan Baca DISINI!

Samapai pada paragraf kedua ini anda akan menemukan apa yang telah anda pelajari pada bagian pertama kemarin. Tidak cukup ribet dalam penempatan code-ccode CSS yang akan kita bahas pada bagian kedua dalam contoh pembuatan layout menggunakan CSS disini. Lihatlah kode-kode CSS berikut ini dan anda tempatka tepat di atas code </head>. Ini lah Code css itu;
<style type="text/css">
body {background-image:url(gambar_kamu.jpg);
}
#content {
    padding-top:30px;
    width:1000px;
    margin:auto;
}
#header {
    border:1px solid #000;
    background-color:#000;
    padding:10px;
}
h1 {
    color:#FFF;
    font-size:40px;
    line-height:5px;
    text-align:center;
}
#footer{
    padding:10px;
    border:1px solid #000;
    background-color:#CCC;
}
#footer p {
    text-align:center;
    font-weight:bold;
}
/* Menu navigasi */
#nav {
height:auto;
width: 1000px; /* lebar menu navigasi*/
margin:0px 1px 1px 1px;
background:#000000; /* Warna latar belakang menu navigasi */
font: 14px arial;
float:left;
}
#nav ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#nav li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#nav ul li {
float: left;
display:inline;
}
#nav li a, #nav li a:link, #nav li a:visited {
color:#ffffff; /* Warna teks */
padding:9px 10px 9px 10px;
text-decoration:none;
display:block;
}
#nav li a:hover {
background:#088A08; /* Warna latar saat kursor mouse berada di atas menu navigasi */
color: blue; /* Warna teks saat kursor mouse berada di atas menu */
}
#menu{
    margin-top:0px;
    height:360px;
    float:right;
    width:110px;
    background-color:#F00;
}
}
#navigasi {
    float:left;
    border:1px dashed #000;
    margin-top:0px;
    padding:0px;
    background-color:#0F0;
}
#navigasi h3 {
    background-color:#000;
    font-size:24px;
    color:#FFF;
    margin-top:0px;
}
#isi {
    width:75
    0px;
    margin-top:10px;
    margin-bottom:10px;
    padding:10px;
    border:1px solid #000;
    background:white;
    float:centar;
}
.gambar {
    float:left;
    margin-top:0px;
    margin-right:10px;
    margin-bottom:20px;
    margin-left:0px;
    border:1px solid #000;
}
#isi p {
    text-align:justify;
    line-height:18px;
    margin-top:0px;
}
</style>

Contoh pertama Membuat Layout dengan CSS

Tidak dipungkiri bahwa penggunaan CSS memang sebagai hal yang sering digunakan untuk memudahkan peng-editan HTML yang membutuhkan waktu yang cukup singkat dan haksilnya maksimal. Pada bagian ini, kita akan mencoba untuk membuat layout dengan CSS. Membuat layout desain halaman web dengan memanfaatkan CSS adalah pelajaran kali ini. Dengan CSS , Anda tidak membutuhkan tabel dalam menata layoutnya. Kelebihan CSS dalam layout web dibandingkan tabel adalah fleksibilitas dan juga lebih meminimalisasi jumlah byte file. apabila anda menggunakan tabel untuk mendesain layout, maka semakin banyak sel yang dibuat, yang demikian itu akan semakin besar ukuran byte file dan mengakibatkan loading web pun membutuhkan waktu yang lebih lama.

Hal yang paling penting yang harus dilakukan untuk membuta layout dengan CSS adalah membagi elemen halaman ke dalam devision-devision tertentu.

berikut ini adalah code halaman web yang belum di layout tampilannya.

<html>
<head>
<title>Otak Jagat</title>
</head>
<body>
   <div id="header">
            <h1>Selamat datang di otakjagat.com</h1>
   </div>

   <div id="navigasi">
            <h3>Menu navigasi</h3>
            <ul>
                  <li><a href="link1.html">Menu</a></li>
                  <li><a href="link2.html">Download</a></li>
                  <li><a href="link3.html">Dokumentasi</a></li>
                  <li><a href="link4.html">Diskusi</a></li>
                  <li><a href="link5.html">Contact</a></li>
            </ul>
   </div>

   <div id="isi">
            <img src="zenaisy.jpg"/>
               <p>Nama saya adalah Achmad Zaenuri<br/>Dalam pembahasan kali ini kita kan membahas mengenai CSS untuk layout desain web yang akan kita buat. Anda akan mememukan hal yang mungkin pernah anda tuliskan dalam pembuatan leayout web dengan menggunakan HTML.</p
          <p>Manfaat dalam pembuatan CSS sungguh banyak sekali selain yang telah otakjagat paparkan diatas. banyak anda temui dipembahasan lain dari yang telah ada ini apa saja manfaat dari penggunaan CSS dalam layout web.</p>
     </div>

     <div id="footer">
              <p>Copyright &copy; 2013 by otakjagat.com</p>
    </div>
</body>
</html>
Pada cotoh ini kita akan membuat layout web sebagai berikut;
  • Yang akan kita buat disini yaitu menggunakan 4 fram dalam layout halaman web kita. Adapun 4 fram tersebut adalah 
  1. Kolom Header yang akan menyambut user yang akan datang pada web kita. 
  2. Kolom Navigasi yang akan kita gunakan untuk mempermudah selancar pengunjung di web kita. 
  3. Kolom Isi yang akan kita tempati diskripsi atau apa yang ada pada web kita.
  4. Kolom Footer yang akan menginformasikan mengenai web kita.
Inilah gambaharan dengan apa yang telah kita imajinasikan diatas.



HEADER
ISI
Navigasi
FOOTER
 
Bagian background kita kasih warna abu-abu

Langkah pertama, seperti biasa kita harus membuat bagian-bagian elemen dahulu menggunakan division (div). Berikut ini adalah code dasar untuk setiap elemennya.

<html>
<head>
<title>Otak Jagat</title>
</head>
<body>
<div id="content">
       <div id="header">
              <h1>Selamat datang di otakjagat.com</h1>
       </div>
       <div id="menu">
                <div class="navigasi">
                      <h3> menu navigasi 1</h3>
                             <ul>
                                   <li><a href="http://otakjagat.com">Profil</a></li>
                                   <li><a href="http://otakjagat.com">Download</a></li>
                                   <li><a href="http://otakjagat.com">Dokumentasi</a></li>
                                   <li><a href="http://otakjagat.com">Contact</a></li>
                             </ul>
               </div>
               <div class="navigasi">
                     <h3>Menu navigasi 2</h3>
                             <ul>
                                   <li><a href="http://otakjagat.com">CSS</a></li>
                                   <li><a href="http://otakjagat.com">HTML</a></li>
                                   <li><a href="http://otakjagat.com">JAVA</a></li>
                                   <li><a href="http://otakjagat.com">PHP</a></li>
                             </ul>
               </div>
       </div>
       <div id="isi">
               <img src="otakjagat.jpg" class="gambar">
               <p>Selamat membuat contoh halaman layout web dengan CSS bagian pertama ini. Anda akan menemui kode-kode yang ada didalam HTML jika anda tidak menggunakan CSS, Penggunaan CSS dapat membuat ringannya web kita karena cuman membutuhkan file yang kecil<p/>
               <p>Selamat membuat contoh halaman layout web dengan CSS bagian pertama ini. Anda akan menemui kode-kode yang ada didalam HTML jika anda tidak menggunakan CSS, Penggunaan CSS dapat membuat ringannya web kita karena cuman membutuhkan file yang kecil<p/>
               <p>Selamat membuat contoh halaman layout web dengan CSS bagian pertama ini. Anda akan menemui kode-kode yang ada didalam HTML jika anda tidak menggunakan CSS, Penggunaan CSS dapat membuat ringannya web kita karena cuman membutuhkan file yang kecil<p/>
       </div>
       <div id="footer">
                <p>Copyright &copy; 2013 by Zenaisy</p>
        </div>
</div>
</body>
</html>
Code-Code diatas merupakan code HTML yang terdalamnya terdapat <div> untuk memberikan lambang bahwasanya <div> akan menjadi penghubung dengan CSS yang akan kita buat.
Code-code diatas setelah kita simpan dalam extensi (.html) maka akan terlihat sebagai berikut dengan gambar yang ada di folder yang sama;

Dalam Selanjutnya Otakjagat.com akan menunjukkan Code CSS yang harus anda letakkan dia atas code </head>
Baca lebih lanjut!
Back To Top