Beranda › css › css-layouting › web-design

Design Website Part 1

Ditulis Admin Selasa, 02 Juni 2020 Tulis Komentar Edit

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.

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; }

tampilan halaman website dari langkah 6 sampai terakhir

Tampilan Halaman Website Step By Step

hasil dari coding dari step 1-10

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

Langganan: Posting Komentar (Atom)