CSS LAYOUT WEB (*Mt.Kuliah Web STT.Pelita Bangsa)

Ikuti step berikut :

Instalasi Server Apacahe dan Mysql.(jika sudah ada, abaikan) -ikuti step di website ini http://www.apachefriends.org/en/xampp-windows.html
Buat Struktur Folder Aplikasi sbb : C:\ ->xampp ->htdocs ->myweb - css - images
Download Image yang diperlukan, dan simpan di folder images (lihat no.2) :

Buat file html index.html, simpan di folder myweb. (lihat no.2)

<html>
<head>
 <title>Belajar Membuat Layout Website</title>
 <link type="text/css" rel="stylesheet" href="css/mystyle.css" />
</head>
<body>
<div id="page">
  <div id="header"></div>
  <div id="menu">
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Program Studi</a></li>
    <li><a href="#">Kemahasiswaan</a></li>
    <li><a href="#">PMB</a></li>
    <li><a href="#">Download</a></li>
   </ul>
  </div>
  <div id="content">
   <h1>Welcome to STT Pelita Bangsa</h1>
   <h3>Visi</h3>
   <p>Menjadi Sekolah Tinggi Teknologi yang unggul dengan standar mutu tertinggi dalam bidang Teknik Informatika, 
      Teknik Aristektur dan Teknik Lingkungan pada tahun 2020 dengan dilandasi wawasan kebangsaan dan wawasan 
      global serta didukung teknologi informasi dan komunikasi (TIK).</p>

   <h3>Misi</h3>
   <ul>
   <li>Menyelenggarakan pendidikan dan pengajaran yang berbasis teknologi informasi dan komunikasi.</li>
   <li>Memfasilitasi dan memotivasi sivitas akademika untuk mempublikasikan hasil penelitian dan karya 
   ilmiahnya serta memiliki hak atas kekayaan intelektual sebagai aktualisasi pencapaian mutu penelitian di 
   bidang teknik informatika, teknik arsitektur dan teknik lingkungan.</li>
   <li>Menyelenggarakan, memfasilitasi, dan memotivasi implementasi hasil penelitian untuk diimplementasikan dalam 
   kegiatan pengabdian kepada masyarakat.</li>
   <li>Menjalin kerjasama dengan institusi pemerintah maupun swasta, dalam maupun luar negri dengan prinsip kesetaraan 
   dalam mendukung pelaksanaan kegiatan Tridharma Perguruan Tinggi.</li>
   </ul>
  </div>
  <div id="footer">
   <span>Copyright &copy STT Pelita Bangsa </span>
  </div>
 </div>
</body>
</html>

Buat file mystyle.css, simpan di folder css. (lihat no.2)

body{
 background:url(../images/Page-BgTexture.jpg)repeat;
}

#page{
 margin:10px auto;
 background:#ddd;
 width:900;
 padding:10px;
 border:solid 1px #999;
 box-shadow:1px 1px 5px 2px #ccccc5;
}
#header{
 background:url(../images/gbanner1.jpg)no-repeat;
 height:152px;
}

#menu{
 background:#a90329;
 height:20px;
 border-top:solid 2px #999;
 padding:3px 0px;
}
#menu ul{ 
 list-style:none;
 margin:0;
 padding:0;
}
#menu li a{
 float:left;
 width:100px;
 font-size:13px;
 color:#eee;
 text-decoration:none;
 padding:3px 5px;
 border-right:solid 1px #ccc;
 text-align:center;
}
#menu a:hover{
 background:#6d0019;
}
#content{
 background:#fff;
 padding:10px;
 margin-bottom:20px;
}
#footer{
 background:#dfdfdf;
 padding:10px;
 text-align:center;
 border-top:solid 1px #999;
 font-size:12px;
}

Asep Muhidin

CSS LAYOUT WEB (*Mt.Kuliah Web STT.Pelita Bangsa)

Comments

Post a Comment

Popular posts from this blog

Resultset Java - DefaultDataModel

Download Kuliah Pemogaraman 2 (.NET)

Syntax Highlighter Blogger