Rabu, 12 Oktober 2016

HTML & CSS - Membuat Layout Website Sederhana 2

Pada tutorial sebelumnya, saya telah berbagi artikel mengenai cara membuat layout sederhana, yang menjelaskan dasar -dasar dalam membuat layout sebuah website. Kali ini saya akan membuat layout website yang sedikit lebih sulit dari sebelumya. Pada pembuatan layout website ini menggunakan tag DIV dan CSS.Adapun tampilan website yang akan dibuat adalah sebagai berikut.


Sebelum melanjutkan untuk membuat layout website, perhatikan struktur folder yang digunakan pada gambar di bawah ini kemudian buat struktur folder yang sama di komputer yang anda gunakan.


Sesuai dengan gambar diatas, karena saya menggunakan lamp-server yang terinstall di linux ubuntu 16.04, maka "root folder" adalah "/var/www/html/[folder-website-div-css]", perhatikan output perintah berikut ini.

it916@planning-ho-pc:~$ ls -l /var/www/html/lth6-templsederhanaNext/
total 24
drwxrwxr-x 5 it916 it916 4096 Oct 11 21:27 images
-rw-rw-r-- 1 root  root  2617 Oct 11 02:51 index.php
drwxrwxr-x 2 root  root  4096 Oct 10 05:13 js
drwxrwxr-x 2 root  root  4096 Oct 11 04:51 script
drwxrwxr-x 2 root  root  4096 Oct 11 02:50 style

Setelah mempersiapkan struktur folder, file-file gambar dan javascript yang diperlukan maka sekarang saatnya menuliskan kode program untuk membuat layout website dalam artikel ini.
  1. Membuat File "index.php"

    2. Buat file index.php sebagaimana berikut.

    root@planning-ho-pc:/home/it916# pico /var/www/html/lth6-templsederhanaNext/index.php


    <!--- Baian ini merupakan hasil generate macromedia dreamweaver-->
<!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=iso-8859-1" />
  
  <!-- Bagian ini untuk menampilkan icon website kecil disebelah alamat url -->
  <link rel="Shortcut icon" href="images/favicon.jpg" type="image/x-icon" />

  <!-- Bagian ini untuk menampilkan title halaman website -->
  <title>Tutorial pembelajaran website - Computer Technology</title>

  <!-- Bagian ini digunakan untuk memanggil script css yang berada pada folder style -->
  <link rel="stylesheet" href="style/style.css" type="text/css" />
  <link rel="stylesheet" href="style/slider.css" type="text/css" />

  <!-- Bagian ini digunakan untuk memanggil script javascript yang berada pada folder js -->
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/slider.min.jquery.js"></script>
  <script type="text/javascript" src="js/javascript.js"></script>
 </head>

 <body>
  <!--
   Bagian utama halaman website dengan lebar tertentu yang akan kita posisikan
   pada posisi center browser 
  -->
  <div id="wrapper">
   <!-- Bagian header untuk penempatan logo dan lainnya -->
   <div id="header">
    <div id="logo">
     <img src="images/theme/logo.png" border="0" align="absmiddle" />
    </div>
    <div id="share">
     <img src="images/theme/share.png" border="0" align="absmiddle" />
    </div>
   </div>

   <!-- Bagian Menu -->
   <div id="top-menu">
    <div id="navigasi">
     <a href="#home">Home</a>
     <a href="http://havizul.blogspot.com" title="My Blog">Blog Ku</a>
     <a href="http://havizul.blogspot.co.id/p/source-code.html" title="Source Code">Source Code</a>
     <a href="http://havizul.blogspot.co.id/p/blog-page_22.html" title="Kedai 99">Toko Online</a>
    </div>
   </div>

   <!-- Bagian untuk penempatan banner -->
   <div id="banner_web">
    <div class="slides_container" style="width:900px; height:250px;">
     <a href="#"><img src="images/theme/banner-1.jpg" width="900" height="250" /></a>
     <a href="#"><img src="images/theme/banner-2.jpg" width="900" height="250" /></a>
    </div>
   </div>

   <!-- Bagian content -->
   <div id="content">
    <?php
      include("script/homepage.php");
    ?>
   </div>
  </div>

  <!-- Bagian Footer -->
  <div id="footer">
   <div id="footer-dom">
    <p class="copy">Copyright &copy; 2016 - Havizul Blogspot</p>
   </div>
  </div>
 </body>
</html>

  2. Membuat File CSS

    3. Ada 2 file CSS yang akan dibuat, yaitu "style.css" dan "slider.css". Berikut ini adalah kode program untuk file "style.css". 

    root@planning-ho-pc:/home/it916# cat /var/www/html/lth6-templsederhanaNext/style/style.css


    /*CSS yang umum digunakan dalam halaman website*/
body {
  font: normal 12px Verdana, Arial, Helvetica, sans-serif;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background-image: url('../images/theme/body.png');
  background-position: top left;
  background-repeat: repeat-x;
}

a {
  font: normal 12px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #0066FF;
}

a.judul-halaman {
  font: bold 18px Verdana, Arial, Helvetica, sans-serif;
  color: #1284a5;
}

#wrapper {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
}

#header {
  height: 105px;
}

#header #logo {
  width: 400px;
  float: left;
}

#header #share {
  width: 300px;
  text-align: right;
  float: right;
  margin: 60px 0 0 0;
}

#top-menu {
  height: 105px;
  background-image:url('../images/theme/slogan.png');
  background-position: 550px -10px;
  background-repeat: no-repeat;
}

#top-menu #navigasi {
  height: 35px;
  margin: 30px 0 0 0;
}

#top-menu #navigasi a {
  font: bold 14px Verdana, Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  line-height: 35px;
  text-decoration: none;
  padding: 0 5px 0 5px;
}

#banner_web {
  height: 250px;
  margin: 0 0 20px 0;
}

#content {
  color: #666666;
  text-align: justify;
  letter-spacing: 0.2px;
}

#content p, #content ul li, #content ol li, #content a {
  line-height: 18px;
}

#posting {
  display: block;
  width: 200px;
  float: left;
  margin: 0 10px 0 0;
}

#headline #thumbnail {
  display: block;
  text-align: left;
}

a.judulBerita {
  font: bold 14px Verdana, Arial, Helvetica, sans-serif;
  display: block;
  color: #1284a5;
  text-decoration: none;
}

a.judulterkait {
  font: bold 12px Verdana, Arial, Helvetica, sans-serif;
  display: block;
  color: #1284a5;
  text-decoration: none;
  background-image: url('../images/icons/bullet.png');
  background-position: center left;
  background-repeat: no-repeat;
  padding: 0 0 0 20px;
}

span.by {
  font: normal 12px Verdana, Arial, Helvetica, sans-serif;
  text-align: left;
}

p.more {
  font: normal 12px Verdana, Arial, Helvetica, sans-serif;
  text-align: left;
}

p.more a {
  font-weight: bold;
  color: #1284a5;
  display: block;
  text-decoration: underline;
}

a:hover {
  color: #FF9900;
}

#footer {
  height: 42px;
  background-image: url('../images/theme/footer.png');
  background-position: top left;
  background-repeat: repeat-x;
}

#footer #footer-dom {
 width:900px;
 margin-left:auto;
 margin-right:auto;
}

#footer p.copy {
  font: normal 12px Verdana, Arial, Helvetica, sans-serif;
  display: block;
  width: 300px;
  float: left;
  line-height: 30px;
  color: #FFFFFF;
}

/* CSS untuk TAG HTML standard */
h1,h2,h3 {
  font: bold 18px Verdana, Arial, Helvetica, sans-serif;
  margin: 5px 0 5px 0;
}

h1.judul {
  color: #1284a5;
  display: block;
  border-bottom: #dcdcdc 1px solid;
  padding: 0 0 5px 0;
  line-height: 30px;
}

/* CSS untuk bagian paging */
span.nav {
  font: bold 12px Verdana, Arial, Helvetica, sans-serif;
  display: block;
  text-align: center;
  color: #666666;
}

span.nav a {
  font: bold 12px Verdana, Arial, Helvetica, sans-serif;
  color: #0099FF;
}

/* Span untuk warna */
span.hijau {
  color: #97c43d;
}

span.orange {
  color: #FF9900;
}

span.blue {
  color: #3d73b1;
}

    Dan yang berikut ini adalah kode program untuk file "slider.css". 

    root@planning-ho-pc:/home/it916# cat /var/www/html/lth6-templsederhanaNext/style/slider.css


    #slides {
  position: absolute;
  z-index: 1;
  padding: 0px;
  margin: 0px;
}

.slides-container {
  overflow: hidden;
  position: relative;
}

.slides-container a {
  display: block;
  text-decoration: none;
  line-height: 30px;  
}

.slides-container a img {
  display: block;
  border: 0px;
}

ul.pagination {
  list-style:none;
  position: absolute;
  top: 250px;
  z-index: 10;
}

ul.pagination li {
  display: inline;
  display: block;
  float: left;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

ul.pagination li a {
  display: block;
  line-height: 18px;
  color: transparent;
  background-image: url('../images/icons/silde-nav.gif');
  background-position: 3px 0;
  background-repeat: no-repeat;
}

ul.pagination li.current a {
  background-position: 3px -18px;
  background-repeat: no-repeat;
}

  3. Membuat File Javascript

    4. Tulis kode program javascript seperti berikut ini. 

    root@planning-ho-pc:/home/it916# cat /var/www/html/lth6-templsederhanaNext/js/javascript.js.asli 


    $(document).ready(function(){
 $('#banner_web').slides({
  preload: true,
  play: 3000,
  pause: 2500,
  hoverPause: true
 }),
 $(".btn-slide").click(function(){
  $("#panel").slideToggle("slow");
  $(this).toggleClass("active"); return false;
 });
});

function Konfirmasi(str){
 input=confirm(str);
 if(input==true){
  return true;
 }
 else{
  return false;
 }
return

    Jangan lupa untuk menempatkan file "jquery-1.7.2.min.js" dan "slider.min.jquery.js" dalam folder yang sama dengan file yang telah kita buat barusan (javascript.js), sehingga hasil akhir dari isi folder "js" akan tampak seperti berikut ini. 

    root@planning-ho-pc:/home/it916# ls -l /var/www/html/lth6-templsederhanaNext/js/
total 108
-rw-rw-r-- 1 root root   393 Oct 10 00:05 javascript.js
-rw-rw-r-- 1 root root 94843 Oct 10 00:05 jquery-1.7.2.min.js
-rw-rw-r-- 1 root root  6803 Oct 10 00:05 slider.min.jquery.js

  4. Membuat File "homepage.php"

    5. File "homepage.php" merupakan content dari website. Isi dari file "homepage.php" adalah sebagai berikut.

    root@planning-ho-pc:/home/it916# cat /var/www/html/lth6-templsederhanaNext/script/homepage.php


    <h1 class="judul">Selamat Datang</h1>
 <p>
  <img src="./images/theme/logo.png" title="Website For Sample" alt="website for sample" align="left" class="tumb" />
  Website For Sample merupakan website yang telah kami buat sebagai langkah awal dalam menyediakan pembelajaran dalam bidang website.
  Pada website yang sederhana, telah kami lengkapi dengan menu-menu yang dinamis sehingga
  dapat dikelola dengan mudah oleh Administrator. 
 </p>
 
 <p>
  Dalam program ini, kami mencoba menyediakan script-script program yang dilengkappi
  dengan penjelasan-penjelasan dalam bentuk komentar untuk mempermudah anda sekalian
  dalam mempelajari program ini.
  Dengan metode ini, pembaca sekalian yang ingin belajar tentang website dapat belajar
  dengan lebih mudah.
 </p>

 <p>
  Dalam hal ini, kami juga melengkapi proses pembelajaran dengan forum belajar online 
  pada masing-masing script pembelajaran yangkami sediakan.
  Adapun harga yang kami tetapkan untuk script pembelajaran dan juga penyediaan forum belajar online adalah sebesar <strong>Rp. 50.000,-</strong>.
  Silahkan melakukan pemesanan produk WFS11307 dengan mengisi form pemesanan pada alamat
  berikut :
 </p>
 
 <p align="center">
  <a href="http://havizul.blogspot.co.id/p/blog-page_22.html" title="Pesan Produk Ini Sekarang" target="_blank">
   <img src="images/icons/order-now.png" border="0" alt="Pesan Sekarang" />
  </a>
 </p>

 <p>&nbsp;</p>

 <!-- Untuk menampilkan daftar posting -->
 <h1 class="judul">Posting terbaru</h1>

 <!-- Posting pertama -->
 <div id="posting">
  <div id="thumbnail">
   <img src="./images/post/t_video.png" title="Gambar dari video processing" alt="video.png" class="tumb" />
  </div>
   <a href="?p=24" title="Baca Video Processing selengkapnya" class="judulBerita">Video Processing</a>
  <div id="headline">
   <p>Lorem Ipsum is simply dummy text of the printing and type setting industry.</p>
  </div>
   <p class="tanggal"><span class="orange">12 Desember 2014 13:14:32</span>
    <span class="by">Oleh Admin</span>
   </p>
   <p class="more"><a href="?p=24" title="Baca Video Processing selengkapnya">Readmore...</a></p>
 </div>

 <!-- Posting kedua -->
 <div id="posting">
  <div id="thumbnail">
   <img src="./images/post/t_audio.png" title="Gambar dari software audio" alt="audio.png" class="tumb" />
  </div>
  <a href="?p=23" title="Baca Software Audio selengkapnya" class="judulBerita">Software Audio</a>

  <div id="headline">
   <p>
    Lorem Ipsum is simply dummy text of the printing and type setting.
   </p>
  </div>
  
  <p class="tanggal">
   <span class="orange">10 Oktober 2015 11:35:44</span>
   <span class="by">Oleh Admin</span>
  </p>

  <p class="more">
   <a href="?p=23" title="Baca Software Audio selengkapnya">Readmore...</a>
  </p>
 </div>

 <!-- Posting ketiga -->
 <div id="posting">
  <div id="thumbnail">
   <img src="./images/post/t_linux.png" title="Gambar dari Linux OS" alt="linux.png" class="tumb" />
  </div>
  <a href="?p=22" title="Baca Linux OS selengkapnya" class="judulBerita">Linux OS</a>

  <div id="headline">
   <p>
    Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem&nbsp;
   </p>
  </div>

  <p class="tanggal">
   <span class="orange">15 Januari 2016 10:10:50</span>
   <span class="by">Oleh Admin</span>
  </p>

  <p class="more">
   <a href="?p=22" title="Baca Linux OS selengkapnya">Readmore...</a>
  </p>
 </div>

 <!-- Posting keempat -->
 <div id="posting">
  <div id="thumbnail">
   <img src="./images/post/t_lcd-monitor.png" title="Gambar dari LCD Monitor" alt="lcd-monitor.png" class="tumb" />
  </div>

  <a href="?p=21" title="Baca LCD Monitor selengkapnya" class="judulBerita">LCD Monitor</a>
 
  <div id="headline">
   <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
   </p>
  </div>

  <p class="tanggal">
   <span class="orange">18 Januari 2016 09:10:12 </span>
   <span class="by">Oleh Admin</span>
  </p>

  <p class="more">
   <a href="?p=21" title="Baca LCD Monitor selengkapnya">Readmore...</a>
  </p>
 </div>

<div id="clear" style="height:2px; clear:both; display:block;">&nbsp;</div>
 
  <!-- Posting kelima -->
  <div id="posting">
   <div id="thumbnail">
    <img src="./images/post/t_printer.png" title="Gambar dari Ink Jet Printer" alt="printer.png" class="tumb" />
   </div>

   <a href="?p=20" title="Baca ink Jet Printer selengkapnya" class="judulBerita">Ink Jet Printer</a>

   <div id="headline">
    <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting
    </p>
   </div>

   <p class="tanggal">
    <span class="orange">07 Februari 2016 08:10:15</span>
    <span class="by">Oleh Admin</span>
   </p>

   <p class="more">
    <a href="?p=20" title="Baca Ink Jet Printer selengkapnya">Readmore...</a>
   </p>
  </div>

  <!-- Posting keenam -->
  <div id="posting">
   <div id="thumbnail">
    <img src="./images/post/t_notebook.png" title="Gambar dari Notebook PC" alt="notebook.png" class="tumb" />
   </div>
    
    <a href="?p=19" title="Baca Notebook PC selengkapnya" class="judulBerita">Notebook PC</a>

   <div id="headline">
    <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard
    </p>
   </div>

    <p class="tanggal">
     <span class="orange">12-Desember-2012 13:15:36</span>
     <span class="by">Oleh Admin</span>
    </p>

    <p class="more">
     <a href="?p=19" title="Baca Notebook PC selengkapnya">Readmore...</a>
    </p>
   </div>

   <!-- Posting ketujuh -->
    <div id="posting">
     <div id="thumbnail">
      <img src="./images/post/t_desktop.png" title="Gambar dari Komputer Desktop" alt="desktop.png" class="tumb" />
     </div>

     <a href="?p=18" title="Baca Komputer Desktop selengkapnya" class="judulBerita">Komputer Desktop</a>

     <div id="headline">
      <p>
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard
      </p>
     </div>

     <p class="tanggal">
      <span class="orange">12-Desember-2012 13:15:49</span> 
      <span class="by">Oleh Admin</span>
     </p>

     <p class="more">
      <a href="?p=18" title="Baca Komputer Desktop selengkapnya">Readmore...</a>
     </p>
    </div>

    <!-- Posting ke delapan -->
    <div id="posting">
     <div id="thumbnail">
      <img src="./images/post/t_yellow-4de7531da800e.png" title="Gambar dari Mudah belajar PHP bersama media kreatif" alt="yellow-4de7531da800e.png" class="tumb" />
     </div>

    <a href="?p=2" title="Baca Mudah belajar PHP bersama media kreatif selengkapnya" class="judulBerita">Mudah belajar PHP bersama media kreatif</a>

   <div id="headline">
    <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
    </p>
   </div>

   <p class="tanggal">
    <span class="orange">12-Desember-2012 13:16:02</span> 
    <span class="by">Oleh Admin</span>
   </p>
   
   <p class="more">
    <a href="?p=2" title="Baca Mudah belajar PHP bersama media kreatif selengkapnya">Readmore...</a>
   </p>
  </div>

<div id="clear" style="height:2px;clear:both;display:block;">&nbsp;</div>

<span class="nav">
  1
  <a href="#">2</a>
  <a href="#">&nbsp;&gt;&gt;</a>
</span>
Silahkan tes hasil program yang telah anda buat dengan mengakses alamat url terkait (http://localhost/lth6-templsederhanaNext/). Jika tidak ada kesalahan maka url tersebut akan menampilkan layout seperti berikut ini.


Demikian tutorial kali ini, selamat mencoba.

Sumber : http://media-kreatif.com/home/post/52/belajar-membuat-layout-website-lengkap-dengan-tag-div-dan-css.prm
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)