Selamat malam teman-teman =)
Nah, kali ini sudah sampai ke modul 4, di mana kita dituntut mampu membuat sebuah halaman web dengan menggunakan CSS.
Nah, mau tahu bagaimana caranya?
body {
margin: 10px auto;
width: 850px;
}
header,nav,section,footer {
display:block;
}
button input{
height:30px;
width:50px;
border: 1px solid black;
}
menukanan :hover{
color : blue;
background-color : white;
text-align : center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
header{
background-image: url(desa.png);
height:250px;
}
nav{
background-image : url(menubarcolor.jpg);
height: 32px;
padding-top: 10px;
padding-left: 10px;
border: 1px solid blue;
font-family: Arial;
font-size: 15px;
color: white;
}
menukiri {
float: left;
margin-left: 2px;
}
menukanan{
float: right;
margin-right: 15px;
}
section{
float:left;
background-image : url(peta.jpg);
height:380px;
width: 240px;
border: 1px solid red;
}
article, aside{
padding-left: 10px;
font-family: Arial;
font-size: 15px;
color: blue;
border: 1px dashed blue;
}
article{
background-image : url(artikelbgcolor.jpg);
float:right;
width:595px;
height:250px;
line-height: 20px;
}
aside{
background-image : url(asidebgcolor.jpg);
float:right;
width:595px;
height:129px;
}
footer{
background-image : url(footercolor.jpg);
clear:both;
padding:12px;
border: 1px solid blue;
height: 26px;
font-family: Arial Rounded mt bold;
font-size: 15px;
color: white;
line-height: 20px;
}
margin: 10px auto;
width: 850px;
}
header,nav,section,footer {
display:block;
}
button input{
height:30px;
width:50px;
border: 1px solid black;
}
menukanan :hover{
color : blue;
background-color : white;
text-align : center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
header{
background-image: url(desa.png);
height:250px;
}
nav{
background-image : url(menubarcolor.jpg);
height: 32px;
padding-top: 10px;
padding-left: 10px;
border: 1px solid blue;
font-family: Arial;
font-size: 15px;
color: white;
}
menukiri {
float: left;
margin-left: 2px;
}
menukanan{
float: right;
margin-right: 15px;
}
section{
float:left;
background-image : url(peta.jpg);
height:380px;
width: 240px;
border: 1px solid red;
}
article, aside{
padding-left: 10px;
font-family: Arial;
font-size: 15px;
color: blue;
border: 1px dashed blue;
}
article{
background-image : url(artikelbgcolor.jpg);
float:right;
width:595px;
height:250px;
line-height: 20px;
}
aside{
background-image : url(asidebgcolor.jpg);
float:right;
width:595px;
height:129px;
}
footer{
background-image : url(footercolor.jpg);
clear:both;
padding:12px;
border: 1px solid blue;
height: 26px;
font-family: Arial Rounded mt bold;
font-size: 15px;
color: white;
line-height: 20px;
}
Untuk sintaks HTMLnya
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Selamat Datang di Situs Desa Pesanggrahan</title>
<link rel="stylesheet" href="Mod4TgsPrak.css" type="text/css" />
<link rel="icon" type="image/x-icon" href="batu.jpg">
</head>
<body>
<header>
</header>
<nav>
<menukiri>
Cari di Situs Ini <input type="text">
</menukiri>
<menukanan>
<button>
Beranda
</button>
<button>
Tentang Kami
</button>
<button>
Layanan
</button>
<button>
Hubungi Kami
</button>
</menukanan>
</nav>
<section>
</section>
<article>
<strong>Pesanggrahan</strong>, pada zaman dahulu adalah sebuah tempat dimana para Petinggi Kerajaan beristirahat.
Konon para Raja, Ratu, Adipati dan Punggawa Kerajaan antara lain Raja Mataram bersama para Istri selirnya sering mandi di sumber mata air panas Songgoriti dan beristirahat atau “Mesanggrah” (bersinggah) di tempat yang sekarang ini orang menyebut <strong>Desa Pesanggrahan</strong>. <br />
Desa Pesanggrahan berlokasi tepat pada lereng gunung Panderman persis berada pada lereng sebelah utara gunung panderman.
Wilayah Pesanggrahan yang karena letaknya di bawah lereng Gunung Panderman, panoramanya yang indah serta hawanya yang sangat sejuk menjadi daya tarik tersendiri bagi orang dari luar untuk beristirahat di tempat ini, disamping itu tempat ini sudah menjadi salah satu tempat di mana banyak Petinggi Kerajaan beristirahat pada zaman itu, maka pada akhirnya wilayah ini dinamakan Desa Pesanggrahan.
</article>
<aside>
<br/><strong>Berita terkait:</strong>
<ul>
<li><a href="coba.html">Sejarah Desa Pesanggrahan</a><br/></li>
<li><a href="coba.html">Struktur Desa Pesanggrahan</a><br/></li>
<li><a href="coba.html">Data Penduduk</a><br/></li>
<li><a href="coba.html">Organisasi Desa</a><br/></li>
</ul>
</aside>
<footer>
<marquee direction="alternate">©2011 by Agung Panji Sasmito - Tugas Praktikum Modul 4 - Dedicated for My Homeland</marquee>
</footer>
</body>
</html>
;
<html lang="en">
<head>
<title>Selamat Datang di Situs Desa Pesanggrahan</title>
<link rel="stylesheet" href="Mod4TgsPrak.css" type="text/css" />
<link rel="icon" type="image/x-icon" href="batu.jpg">
</head>
<body>
<header>
</header>
<nav>
<menukiri>
Cari di Situs Ini <input type="text">
</menukiri>
<menukanan>
<button>
Beranda
</button>
<button>
Tentang Kami
</button>
<button>
Layanan
</button>
<button>
Hubungi Kami
</button>
</menukanan>
</nav>
<section>
</section>
<article>
<strong>Pesanggrahan</strong>, pada zaman dahulu adalah sebuah tempat dimana para Petinggi Kerajaan beristirahat.
Konon para Raja, Ratu, Adipati dan Punggawa Kerajaan antara lain Raja Mataram bersama para Istri selirnya sering mandi di sumber mata air panas Songgoriti dan beristirahat atau “Mesanggrah” (bersinggah) di tempat yang sekarang ini orang menyebut <strong>Desa Pesanggrahan</strong>. <br />
Desa Pesanggrahan berlokasi tepat pada lereng gunung Panderman persis berada pada lereng sebelah utara gunung panderman.
Wilayah Pesanggrahan yang karena letaknya di bawah lereng Gunung Panderman, panoramanya yang indah serta hawanya yang sangat sejuk menjadi daya tarik tersendiri bagi orang dari luar untuk beristirahat di tempat ini, disamping itu tempat ini sudah menjadi salah satu tempat di mana banyak Petinggi Kerajaan beristirahat pada zaman itu, maka pada akhirnya wilayah ini dinamakan Desa Pesanggrahan.
</article>
<aside>
<br/><strong>Berita terkait:</strong>
<ul>
<li><a href="coba.html">Sejarah Desa Pesanggrahan</a><br/></li>
<li><a href="coba.html">Struktur Desa Pesanggrahan</a><br/></li>
<li><a href="coba.html">Data Penduduk</a><br/></li>
<li><a href="coba.html">Organisasi Desa</a><br/></li>
</ul>
</aside>
<footer>
<marquee direction="alternate">©2011 by Agung Panji Sasmito - Tugas Praktikum Modul 4 - Dedicated for My Homeland</marquee>
</footer>
</body>
</html>
;
Screenshoot
Untuk demo bisa klik di sini.
Tidak ada komentar:
Posting Komentar
Jangan lupa memberi komentar pada setiap postingan saya!