Harapan saya tutorial tersebut dibaca berurutan dan jangan diloncati, dan bisa saja di copas atau jika ingin lebih mantapkan ingatan sebaiknya di ketik ulang.
Baiklah, untuk kesempatan kali ini akan kita bahas studi kasus membuat web statis, seperti yang tampil diatas, dan semoga ada yang berusaha melengkapi agar dihasilkan tampilan web statis yang indah. Setelah web statis ini dilengkapi, silahkan coment di blog ini kembali agar kita bersama-sama belajar, karena penulis sendiri juga masih banyak kekurangan dan dalam taraf belajar.
Adapun dokumen html layout adalah sebagai berikut :
<html>
<html>
<head>
<title>Latihan Layout</title>
<link href='style1.css' type='text/css' rel=stylesheet>
</head>
<body>
<div id='kontainer'>
<div id='header'>
<h3>Web Statis</h3>
<p>Ini adalah bagian header, dengan gambar sebagai background...tetapi kita bisa juga menggunakan warna sebagai background. Silahkan berkreasi menurut keahlian sendiri-sendiri agar dihasilkan tampilan yang indah untuk dipandang. Selamat Berkarya. Thx.</p>
</div>
<nav>
<ul class="menu">
<li><a href='index.html'>Home</a></li>
<li><a href='#'>About</a>
<ul>
<li><a href='team.html'>The Team</a></li>
<li><a href='#'>History</a></li>
</ul>
</li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Product</a>
<ul>
<li><a href='#'>Laptop</a></li>
<li><a href='#'>Computer</a></li>
<li><a href='#'>Flashdisc</a></li>
<li><a href='#'>Hard Disc</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
</nav>
<div id='kiri'>
<h3>Konten Kiri</h3>
<p>Silahkan Diisi bagian konten kiri ini</p>
</div>
<div id='isi'>
<p><img src="img/1.jpg">ZAMAN MAJAPAHIT : Empu Prapanca menilis Negarakertagama yang memuat istilah Pancasila. Begitu juga Empu Tantular yang mengarang kitab Sutasoma yang memuat Bhineka Tunggal Ika Tan Hana Dharma Magrua yang berarti walau berbeda namun satu jua adanya sebab tidak ada agama yang memiliki Tuhan yang berbeda. Hal ini menunjukkan adanya realitas kehidupan agama pada saat itu, yaitu Hindu dan Budha.
Sumpah Palapa yang diucapkan oleh Mahapatih Gajah Mada dalam sidang Ratu dan Menteri-menteri di paseban keprabuan Majapahit tahun 1331, yang berisi cita-cita mempersatukan seluruh nusantara raya sebagai berikut : “Saya barua akan berhenti berpuasa makan pelapa, jikalau seluruh nusantara bertakluk di bawah kekuasaan negara.Impian ini telah mempersatukan silayah nusantara dalam sebuah kesatuan menjadi kenyataan hingga saat ini.
ZAMAN PENJAJAHAN : Belanda terbukti menindas rakyat Indonesia melalui berbagai cara, namun berkat kegigihan para pejuang untuk bebas dari penjajah, kerajaan dan pemerintahan yang ada saat itu melakukan perundingan silih berganti.
Namun, semua perlawanan senantiasa kandas karena tidka disertai rasa persatuan dan kesatuan dalam menaklukkan penjajah</p>
<p><img src="img/2.jpg">KEBANGKITAN NASIONAL : Terjadinya pergolakkan kebangkitan dunia timur mendorong bangkitnya semangat kesadaran berbangsa yang ditandai dengan lahirnya Budi Utomo, disusul dengan lahirnya SDI, SI, Indische Partij, PNI, dll.
Munculnya organisasi kepemudaan menunjukkan bahwa persatuan untuk melawan penjajah mulai terealisasikan
</p>
</div>
<div id='footer'>
<p>Bagian Footer</p>
</div>
</div>
</body>
</html>
File gambar yang tercantum dalam tag
<img src diletakkan di dalam folder img dengan nama 1.jpg. Kita bisa merubah file gambar yang lain sesuai dengan keinginan kita. Yang perlu diketahui adalah letak folder img dan dokumen html dan code css adalah satu folder, yaitu misal di bawah folder d:/xampp/htdocs/belajar/Sedangkan code CSS yang bernama style1.css adalah seperti berikut :
body
{
text-align:center;
background:#CCC;
}
#kontainer{
background:#E4E4E4;
display:fixed block;
}
#kontainer
{
margin: 0 auto;
width: 960px;
/*border:1px solid gray;*/
text-align:justify;
}
#header
{
/*width: 1000px;*/
width: 920px;
height:100px;
/*background-color:#6CF;*/
background-image:url(img/header-black-1.png);
float: left;
padding:20px;
color:#FFF;
}
#header p{
padding:5px;
font-family:"Comic Sans MS", cursive;
font-size:14px;
}
#header h3{
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
text-transform:uppercase;
}
/* CSS Main Menu */
nav {display:block;background:#000;margin:0;}
.menu {display:block;margin:0;}
.menu ul {display:none;margin:0;padding:0;width:100%;min-width:160px;position:absolute;left:0px;background:#f5f7fa;z-index:99;transition:initial;}
.menu ul li {display:block;float:none;margin:0;padding:0;}
.menu li {display:inline-block;position:relative;margin:0;}
.menu li a { font-family:Arial, Helvetica, sans-serif;text-transform:uppercase;font-size:14px;font-weight:700;text-decoration:none;padding:20px 15px;display:block;color:#fff;transition:initial;}
.menu li a:hover{background:#999999;color:#fff;}
.menu li:hover ul {display:block;}
.menu li ul {display:none;}
.menu ul li a {font-size:12px;font-weight:700;display:block;background:#333;color:#9ca3ab;transition:initial;border-top:1px solid #9ca3ab;padding:5px 15px 5px 15px;white-space:nowrap;}
.menu ul li a:hover{background:#f78297;color:#fff;}
.menu ul ul {left:160px;top:0px;display:none;transition:initial;}
.menu li ul ul:hover {display:block;}
.responsive-menu {font-size:18px;display:none;padding:20px 15px;background:#30abd5;text-transform:uppercase;font-weight:400;font-family:'Open Sans';}
.responsive-menu:hover {background:#0099cc;color:#fff;text-decoration:none;}
.responsive-menu a,.responsive-menu a:hover,.responsive-menu i,.responsive-menu i:hover,a#resp-menu,a#resp-menu:hover {color:#fff;}
/*..*/
#kiri
{
/* width: 200px;*/
float: left;
width: 182px;
background-color:#FFCECE;
padding:10px;
height:400px;
}
#isi
{
float:left;
/*height:800px;*/
/* background-color:#FFC;*/
width: 758px;
}
#isi h1,h2,h3,h4,h5{
padding:10px;
}
#footer
{
clear:left;
text-align:center;
background:#003;
color:#ffffff;
}
p {
padding:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
img{
display:block;
float:left;
width:150px;
height:100px;
padding-right:10px;
}
Demikian Studi kasus dalam membuat Web Statis, semoga bisa dikembangkan yang lebih baik.
Selamat Belajar, Selamat berkarya dan Salam Coding.
Thx
Download file web statis beserta gambar serta konten dari menu about dan sub menu team ini bisa di download pada GitHub disini
Sign up here with your email