Hai, kawan berjumpa lagi. Kali ini aku akan berbagi tutorial untuk membuat layout website yang sangat sederhana disertai button warna yang dapat mengubah warna background dan tulisan yang terdapat pada bagian tengah layout(midle).
- Buka aplikasi Sublime Text 3
- Pada index.html masukan syntax seperti dibawah ini:
<<!DOCTYPE html>
<html>
<head>
<title>Latihan CSS</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<!-- Kode ini membuat header-->
<div id="pagewrep">
<div id="header">TUGAS 2 LAYOUT DAN
MERUBAH WARNA BACKGROUND DAN TEKS</div>
<!-- Kode ini membuat button warna merah, biru, hijau
sehingga akan mengubah warna background-->
<div id="menu">
<input type="button"
style="background-color:red;" value="Merah"
class="top-menu" onclick="warna('red')";/>
<input type="button"
style="background-color:blue;" value="Biru"
class="top-menu" onclick="warna('blue')";/>
<input type="button"
style="background-color:green;" value="Hijau"
class="top-menu" onclick="warna('green')";/>
<script
type="text/javascript">
function warna(color){
document.body.style.background=color;
document.getElementById('form').style.color=color;
}
</script>
</div>
<!-- Kode ini membuat menu dan sub menu
yang berada dipinggir kiri-->
<div id="cont-l"><h4
align="center">Sub Menu</h4>
<div class="cont-menu">Sub
Menu 1</div>
<div class="cont-menu">Sub
Menu 2</div>
<div class="cont-menu">Sub
Menu 3</div>
<div class="cont-menu">Sub
Menu 4</div>
<div class="cont-menu">Sub
Menu 5</div>
<div class="cont-menu">Sub
Menu 6</div>
</div>
<!--Kode ini membuat layout bagian
tengah-->
<div id="cont-m">
<form action="tampil.html"
method="post" enctype="multipart/form-data">
<table
width="600" border="0" align="center"
text-align="justify" cellpadding="10"
cellspacing="10" style="backgorund-color: white;">
<!-- Kode ini membuat isian/sebuah paragraf
untuk mengisi bagian tengah-->
<tr>
<td align="justify"
colspan="2" id="form"><h4>
<p>
Biru
<p>
Arti: kesetiaan,
ketenangan, sensitif dan bisa diandalkan.
"Biru memiliki arti
stabil karena itu adalah warna langit," kata Eisman. Meski langit kelabu
dan akan hujan, kita tahu di atas awan-awan itu warna langit tetaplah biru.
Kapan dipakai: Biru tua
lebih cocok untuk acara formal atau seragam, sementara biru muda untuk yang
sifatnya non formal. "Untuk memberi kesan humor dan kreatifitas, cobalah
campuran warna biru dan ungu," kata Eisman.
</p>
</p>
<p>
Merah
<p>
Arti: Kuat, berani, percaya
diri, gairah
Merah adalah warna yang
punya banyak arti, mulai dari cinta yang menggairahkan hingga kekerasan perang.
Warna ini tak cuma memengaruhi psikologi tapi juga fisik. Penelitian
menunjukkan menatap warna merah bisa meningkatkan detak jantung dan membuat
kita bernapas lebih cepat.
Kapan dipakai: Ini adalah
warna yang dinamis dan dramatis. Bila dipakai dalam dunia profesional memiliki
kesan yang sangat kuat. Tapi jangan gunakan baju merah saat wawancara kerja.
"Warna ini bisa menimbulkan konflik saat negosiasi," kata Eisman.
Kenakan warna merah hanya sebagai aksen, misalnya kamisol merah yang dipadankan
dengan blazer abu-abu.
</p>
</p>
<p>
Hijau
<p>
Arti: Kesejukan,
keberuntungan, dan kesehatan.
Hijau melambangkan alam,
kehidupan, dan simbol fertilitas. Para pengantin di abad 15 menggunakan gaun
pengantin berwarna hijau.
Kapan dipakai: Warna hijau
cocok dipakai untuk sore hari. Sedangkan hijau pastel cocok untuk siang hari.
</p>
</p>
</h4></td>
</tr>
</table>
</form>
</div>
<!-- Kode ini membuat footer-->
<div
id="footer"><h3>Footer</h3></div>
<div style="clear:both"></div>
</div>
</body>
</html>- Pada style.css masukan syntax seperti dibawah ini:
#pagewrep{
width: 1024px; margin: 0
auto;
}
#header{
width: 1024px; height:
200px; line-height: 200px; color: black;
text-align: center; font-size: 25px; color:white;
background-color: orange; text-shadow: 2px 2px 5px;
}
#menu{
width: 1024px; height: 50px; background-color: #FE4421;
}
.top-menu{
width: auto; height:
50px; padding-left: 30px;
padding-right: 30px; text-align: center;
line-height: 50px; background-color:
#FE4421; float: left; font-weight:
bold;
}
.top-menu:hover{
color: #FFFFFF; background-color: #FEB721;
}
#cont-l{
width: 250px; height: 320px; background-color: yellow; float:
left;
}
.cont-menu{
width: 200px; height:
30px; background-color: #74E01D; float: left; line-height: 30px;
margin-left: 25px; margin-bottom:
10px; text-align: center;
}
.cont-menu:hover{
color: #FFFFFF; background-color: #FEB721;
}
#cont-m{
width: 754px; height: auto; background-color: gray; float:
left;
padding: 10px;
}
#footer{
width: 1024px; height:
70px; background-color: aqua; float:
left; text-align: center; color:white;
}- Simpan index.html dan style.css dalam 1 folder.
- Buka file yang berextensi html dengan menggunakan web browser(google chrome).
- Tampilan pertama saat terbuka di *google chrome.
- Tampilan saat diklik button merah.
- Tampilan saat diklik button biru.
- Tampilan saat diklik button hijau.
