PART 2 - MEMBUAT TAMPILAN WEBSITE SEDERHANA
Baik kita lanjut lagi untuk part 2 nya kita akan membuat tampilan website sederhana menggunakan html 5 dan css 3.
Apa itu HTML?
HTML Merupakan Singkatan Dari Hypertex Markup Language, Yaitu bahasa markup standar untuk membuat dan menyusun halaman dan aplikasi web.
Apa itu Css (Cascading Style Sheet)?
Css adalah kepanjangan dari Cascading Style Sheets Yang berguna untuk menyederhanakan proses pembuatan website dengan mengatur elemen yang tertulis di bahasa markup.
Nah Jadi Udah Tau kan tujuan dari html dan css itu apa?, yah intinya html itu untuk menyusun halaman web dan css itu untuk membuat tampillannya.
Okey Kita Lanjut Ke Tutorial
Sebelumnya bagi yang langsung menemukan artikel ini alangkah baiknya kalian mulai dari awal dulu ke Part 1 nya dengan klik link di bawah ini.
Baca Juga : Part 1 - Tutorial Website
Sebelumnya kita sudah membuat folder dengan nama web_sederhana dengan nama file connect.php.
Langkah Selanjutnya Buat 1 File lagi dan beri nama index.html dan ikut source codenya seperi pada gambar di bawah ini
Atau Copy Source Code berikut :
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Website - MR. F Computer</title>
</head>
<body>
</body>
</html>
Note : Pada bagian title bebas kalian mengisi apa saja, tapi disarankan sesuai dengan nama website yang akan kalian buat nanti.
Lanjuttt!!!
Langkah Selanjutnya Membuat File style.css Untuk membuat tampilan seperti warna dll, dan tambahkan script ini di dalam tag <head></head>
<link rel="stylesheet" type="text/css" href="style.css">
Selanjutnya Kita akan membuat navbar dengan mengetikan script di bawah ini di dalam tag <body> </body> ....
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Post</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Dan Untuk File cssnya kita ketik script di bawah ini .
*{
padding: 0;
margin:0;
}
a{
text-decoration: none;
font-size: 20px;
font-family: sans-serif;
padding: 14px 10px
}
ul{
padding: 14px
}
li{
list-style: none;
display: inline;
}
li a{
background: #222;
color:#d4d4d4;
}
li a:hover{
background: #4da4ff;
color:#fff;
}
.nav{
background: #222;
height: 50px
}
Nah Sampai Disini Belum Cukup Kita Perlu Membuat Tampilan Setelah Navbarnya
Ketik Script html dibawah ini..
<div class="postingan">
<div class="single">
<h4>
<a href="">Artikel 1</a>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<div class="single">
<h4>
<a href="">Artikel 2</a>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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</p>
</div>
</div>
Dan Untuk File Css nya Seperti ini
.postingan{
margin : 10px 10px;
height: auto;
background-color: #ebe8e8;
}
.postingan .single{
padding: 12px;
}
.postingan .single a{
color: black;
text-transform: uppercase;
text-decoration: underline;
}
.postingan .single p{
margin-left: 10px;
margin-top: 12px;
}
Dan Coba di Running Tampilannya akan seperti ini
Kayaknya Saya rasa untuk sesi kali ini udah cukup, nanti kita lanjut di Part 3 Tutorial Website
Ikuti terus perkembangan blog saya bila kalian rasa blog ini membantu kalian untuk belajar, jangan lupa bagikan ke teman - teman kalian agar kita semua menjadi anak - anak muda yang cerdas.
Ditunggu Part Selanjutnya.
Terimakasih .....
0 Post a Comment: