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 acara buat membuat halaman website.
Dua. Web Browser buat menampilkan page website yang kita buat yg asal berdasarkan kode-kode program yg kita tuliskan pada Code Editor.
3. Pengetahuan dasar mengenai HTML, CSS, & CSS layouting. Jika sahabat-teman butuh berita mengenai tiga materi tadi, silakan kunjungi materi berikut :
Referensi HTML Dasar
Part 1
Pengenalan HTML
Part dua
Hello World
Part tiga
Tag Head Dan Tag Body
Part 4
Paragraph
Part lima
Heading
Part 6
List
Part 7
Hyperlink
Part 8
Image
Part 9
Table
Part 10
Form
Part 1
Pengenalan CSS
Part dua
Anatomi CSS
Part tiga
Penempatan File CSS
Part 4
CSS Font Styling
Part lima
CSS Text Styling
Part 6
CSS Background Styling
Part 7
CSS Selector
Part 8
CSS Inheritance
Part 9
CSS Pseudo-Class
Part 10
CSS Specifity
Part 1
Konsep CSS Layouting
Part dua
CSS Display
Part tiga
Dimensi Website
Part 4
CSS Box Model
Part lima
CSS Reset
Part 6
CSS Float & ClearFix
Part 7
CSS Position
Part 8
CSS Pseudo-Class Target
Part 9
CSS Z-Index
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.
 |
| 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; }
 |
| Tampilan Halaman Website Step By Step |
 |
| Halaman Website |
Finally It’s Done. Untuk source code-nya silakan download di bawah ini ya 😉😉😉 ...
Belum ada Komentar untuk "Design Website Part 1"
Posting Komentar