1. Pertama, buka tools Sublime Text 3, bisa menggunakan Notepad, Notepad++, Dreamweaver, Netbeans, dll. Disini ane menggunakan Sublime Text 3.
2. Kemudian buatlah file .html dan .css untuk memulai.
3. Yang pertama buat index.html terlebih dahulu. Tuliskan syntax dasar pembuatan web html.
<!DOCTYPE
html>
<html>
<head>
<title>Latihan
CSS</title>
<link
rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
</body>
</html>
4. Buat style.css untuk memulai mendesain layout.5. Masih di style.css, buat pagewrap sebagai bungkus.
#pagewrep{
width:
1024px;
margin: 0 auto; }
6. Langkah berikutnya membuat header.
#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; }
7. Buat bungkus menu, format untuk posisi menu, dan menu hover.
#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; }8. Setelah itu buat konten kiri dan hover di setiap konten pada layout.
#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;
/*border-bottom: 1px solid #000000 font-weight:
bold;*/ }
.cont-menu:hover{
color: #FFFFFF; background-color:
#FEB721; }
9. Kemudian buat konten tengah untuk meletakkan text yang akan dirubah warna.
#cont-m{
width: 754px; height: auto; background-color:
#FF33FF; float: left;
padding: 10px; }
10. Terakhir untuk style.css, buatlah footer.
#footer{
width: 1024px; height: 70px; background-color:
aqua; float: left; text-align: center; color:white; }
11. Sekarang masuk ke index.html, buat div untuk id pagerwrep dan div untuk id header.
<div id="pagewrep">
<div id="header">TUGAS 2
LAYOUT DAN MERUBAH WARNA BACKGROUND DAN TEKS</div>
</div>
12. Buat div untuk menu untuk meletakkan button yang berfungsi sebagai pengubah warna background dan text. Disini menggunakan function javascript sebagai trigger merubah warna.
<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>
13. Kemudian beralih ke konten kiri, buat Sub Menu.
<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>
14. Setelah itu beralih ke konten tengah, buat div id cont-m sebagai wadah untuk text.
<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;">
<tr>
<td align="center"
colspan="2" id="form">
<h4>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</h4>
</td>
</tr>
</table>
</form>
15. Membuat footer, jangan lupa untuk selalu menyimpan setiap langkah proses pembuatan.
</div>
<div
id="footer"><h3>Footer</h3></div>
<div
style="clear:both"></div>
</div>
</body>
</html>
16. Buka index.html untuk melihat hasil.
17. Klik Button Merah untuk menampilkan hasil.
18. Klik Button Biru untuk menampilkan hasil.
19. Klik Button Hijau untuk menampilkan hasil.
20. Selesai.
0 komentar:
Posting Komentar