Design Website Part 1

Design Website Part 1 – Membuat Website Sederhana Versi S.1 - Untuk membuat sebuah halaman website, mari kita mulai dengan sebuah halaman website sederhana. Apa saja yang perlu kita persiapkan?.

1. Code editor sebagai media untuk menuliskan kode-kode program untuk membuat halaman website.

2. Web Browser untuk menampilkan halaman website yang kita buat yang berasal dari kode-kode program yang kita tuliskan dalam Code Editor.

3. Pengetahuan dasar mengenai HTML, CSS, dan CSS layouting. Apabila teman-teman butuh informasi mengenai 3 materi tersebut, silakan kunjungi materi berikut :

4. Layout Website. Kita perlu membuat sebuah layout website yang akan kita buat, sebagai sketsa awal untuk memulai membuat website. Dibutuhkan imajinasi yang kemudian kita bisa tuangkan dalam sebuah aplikasi untuk membuat layout website. Atau kita bisa membuatnya sendiri dengan menggunakan aplikasi design grafis seperti photoshop, coreldraw, dll. Saya ingin membuat sebuah website Pet Shop sederhana. Berikut saya buat untuk layout-nya.

menjelaskan cara membuat layout dan halaman website

Layout & Tampilan Website

5. Buat Struktur HTML seperti dibawah ini, jangan lupa isikan judul dalam tag <title>

File HTML :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Pet's Shop</title>
</head>
<body>
 
</body>
</html>

6. Buat tag <div> di dalam tag <body> yang fungsinya sebagai container untuk membungkus elemen dari banner picture sampai footer. Untuk navigation bar, kita akan kerjakan paling akhir. tag <div> tersebut beri class container. Dan sekaligus beri style untuk elemen body serta container tersebut. hubungkan file HTML dan File CSS. Jangan lupa lakukan reset CSS terlebih dahulu, agar kita bisa memegang kendali penuh dari website yang akan kita buat.

File HTML :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Pet's Shop</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

 <div class="container">
  
 </div>
 
</body>
</html>

File CSS :

/*Reset CSS*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 0;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

/*style*/
body {
 font:16px/26px arial, sans-serif;
 background-color: #dad7d7;
 color: #5f5b5b;
}

.container {
 width: 900px;
 background-color: #ffffff;
 margin: 0 auto 10px;
}

7. Buatlah tag <div> di dalam tag <div> yang tadi dibuat untuk membungkus elemen header. Sekaligus beri style pada header.

File HTML :

<div class="container">
 <div class="header">
  <h1>Your Pet's Shop</h1>
  <ol>
   <li><a href="#" target="_blank">Home</a></li><li><a href="" target="_blank">Contact</a></li><li><a href="#" target="_blank">Product</a></li><li><a href="#" target="_blank">Menu 1</a></li><li><a href="#" target="_blank">Menu 2</a></li><li><a href="#" target="_blank">Menu 3</a></li>
  </ol>
 </div>
</div>

File CSS :

.header {
 padding: 15px;
}
.header h1 {
 font-size: 75px;
 font-weight: bold;
 text-align: center;
 margin: 20px;
}
.header li {
 display: inline-block;
 margin-top: 20px;
 width: 100px;
 padding: 5px;
 text-align: center;
}
.header li:nth-child(odd) {
 background-color: #4a5557;
}
.header li:nth-child(even) {
 background-color: yellow;
}
.header li a {
 text-decoration: none;
 color: white;
 font-size: 1.2em;
 font-weight: bold;
}
.header li a:hover {
 font-size: 1.25em;
}

8. Buatlah tag <div> di dalam tag <div> yang tadi dibuat untuk membungkus elemen Banner Picture. Sekaligus beri style pada elemen tersebut

File HTML :

<div class="container">
 <div class="header">
  <h1>Your Pet's Shop</h1>
  <ol>
   <li><a href="#" target="_blank">Home</a></li><li><a href="" target="_blank">Contact</a></li><li><a href="#" target="_blank">Product</a></li><li><a href="#" target="_blank">Menu 1</a></li><li><a href="#" target="_blank">Menu 2</a></li><li><a href="#" target="_blank">Menu 3</a></li>
  </ol>
 </div>
 <div class="bannerPicture"></div>
</div>

File CSS :

.container .bannerPicture {
 height: 300px;
 background-image: url(img/pet.png);
 background-size: cover;
 background-position: 0 -50px;
 border-left: 4px solid #4a5557;
 border-bottom: 4px solid #4a5557;
 border-right: 4px solid yellow;
 border-top: 4px solid yellow;

}

9. Buatlah satu tag <div> di dalam tag <div> class container, kemudian di dalam tag <div> yang baru dibuat tersebut, berilah nama class ‘main’. Kemudian buatlah 2 buat tag <div> dalam tag <div> class ‘main’ tersebut. Satu tag <div> untuk membungkus ‘content’ dan tag <div> lainnya untuk membungkus ‘profile’. Sekaligus hias kedua tag <div> tersebut.

File HTML :

<div class="main">
  <div class="content">
   <h2>Your Favorite Pet's Shop</h2>
   <p class="writer">Written By <a href="https://digitaladies.blogspot.com" target="_blank">Your Pet's Shop</a></p>
   <hr>
   <br>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt numquam eligendi at quidem, ad accusantium vel nulla, reprehenderit rem nam cupiditate ea aperiam suscipit repellendus aliquid atque doloremque consequuntur tempora possimus. Unde perspiciatis quos, dolorum, non soluta nam ad ducimus magni eum voluptatum eaque dignissimos obcaecati enim aliquam eius! Debitis totam similique laudantium iste voluptas dolor omnis quia.</p>
   <br>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui excepturi assumenda sit, ratione voluptas nobis dolor delectus! Aut sapiente ratione inventore distinctio unde, voluptatem quaerat commodi dignissimos perferendis, minus labore eum saepe iste deserunt et reiciendis! Quis, explicabo. Voluptas non vero culpa soluta natus. Et id deserunt sint, beatae veritatis?</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quas maxime obcaecati corporis debitis voluptatum, aut aliquid sit accusamus, dolor quo at, numquam. Sunt vel molestiae, voluptatum ipsum deserunt eaque.</p>
   <br>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>
  <div class="profile">
   <h3>Our Profile</h3>
   <img src="img/profile.png" alt="profile">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod natus illo dolore libero, asperiores, error mollitia suscipit praesentium incidunt culpa repudiandae cupiditate, quia deserunt quos similique adipisci.</p>
   
  </div>
  <div class="clear"></div>
</div>

File CSS :

.main .content {
 width: 600px;
 box-sizing: border-box;
 float: left;
 padding: 15px;
 border-right: 2px dotted black;
}

.main .content h2 {
 font-size: 30px;
 font-weight: bold;
}
.main .content .writer {
  color: red;
 }

.main .content a {
 text-decoration: none;
 color: turquoise;
}
.main .content hr {
 border: 3px dashed pink;
}

.main .content p {
 text-align: justify;
}
.main .profile {
 width: 300px;
 box-sizing: border-box;
 float: left;
 padding: 15px;
}

.main .profile h3 {
 font-size: 30px;
 font-weight: bold;
 text-align: center;
 margin-bottom: 10px;
 color: 
}

.main .profile p {
 text-align: justify;
 font-size: 1.1em;
}

.main .profile img {
 float: left;
 margin: 8px 5px 5px 0;
 border: 2px solid aqua;
}

.clear {
 clear: left;
}

10. Buatlah satu tag <footer> di dalam tag <div> class container. Tag <footer> dibuat setelah tag <div> class main.

File HTML :

<footer>
  <p>CopyRight 2018. Built By My Love For You Are</p>
</footer>

File CSS :

footer p {
 font-size: 0.8em;
 color: white;
 background-color: #4a5557;
 text-align: center;
 padding: 10px;

}

Sampai sini, design website sederhana saya sudah jadi. Tapi saya akan tambahkan menu navigasi dibagian atas, sebelum header. Buatlah tag <div> diatas tag <div> class container. Kemudian beri class ‘navbar’ untuk tag <div> yang baru. Buat posisinya fix. Kemudian di dalam tag <div> tersebut, buatlah tag <div> dengan class ‘medsos’, karena navbar ini saya akan isi dengan link medsos.

File HTML :

<div class="navbar">
 <div class="medsos">
  <a href="https://digitaladies.blogspot.com" target="_blank"><img src="img/blogspot.png" alt="medsos" title="medsos"></a>
  <a href="https://www.facebook.com/digitaladies" target="_blank"><img src="img/facebook.png" alt="medsos" title="medsos"></a>
  <a href="https://plus.google.com/digitaladies" target="_blank"><img src="img/googlePlus.png" alt="medsos" title="medsos"></a>
  <a href="https://www.instagram.com/digitaladies" target="_blank"><img src="img/instagram.png" alt="medsos" title="medsos"></a>
  <a href="https://www.twitter.com/digitaladies" target="_blank"><img src="img/twitter.png" alt="medsos" title="medsos"></a>
  <a href="https://www.youtube.com/digitaladies" target="_blank"><img src="img/youtube.png" alt="medsos" title="medsos"></a>
 </div>
</div>

File CSS :
.navbar {
 width: 100%;
 height: 40px;
 position: fixed;
 top: 0;
 background-color: #5f5b5b;
}

.medsos {
 width: 900px;
 height: 35px;
 margin: 0 auto;
 text-align: center;
}

.medsos a img{
 display: inline-block;
 width: 25px;
 height: 25px;
 margin: 5px 10px;
 box-sizing: border-box;
 opacity: .50;
}