Membuat Layout Website Sederhana (Part 2)
Untuk layout website yang kedua ini, terdapat element baru yaitu siderbar yang berfungsi untuk menempatkan informasi tambahan seperti postingan terakhir dan arsip blog. Jika contoh layout pertama element menu berada di dalam element header, sekarang kita akan pisahkan element tersebut sehingga berada di luar element header.
Seri Belajar HTML:
Seri Belajar Membuat Layout Website Sederhana:
- Membuat Layout Website 1 Kolom Konten/Artikel
- Membuat Layout Website 3 Kolom (2 Kolom Artikel & 1 Kolom Sidebar Kanan)
- Membuat Layout Website 4 Kolom (2 Artikel & 2 Sidebar) dengan Header Image
- Membuat Layout Website 3 Kolom Konten (1 Artikel & 2 Sidebar) & 4 Kolom Footer
Kode HTML
Kode HTML untuk layout website dengan 2 kolom (1 kolom konten dan 1 kolom sidebar):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Belajar HTML</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="header"> <h1 class="judul">Membuat Website</h1> <p class="tagline">Membuat Layout HTML 2 Kolom</p> </div> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="content"> <div class="sidebar"> <h2>Postingan Terakhir</h2> <ul> <li><a href="#">Artikel 1</a></li> <li><a href="#">Artikel 2</a></li> <li><a href="#">Artikel 3</a></li> <li><a href="#">Artikel 4</a></li> </ul> <h2>Arsip Blog</h2> <ul> <li><a href="#">November 2021</a></li> <li><a href="#">Oktober 2021</a></li> <li><a href="#">September 2021</a></li> <li><a href="#">Agustus 2021</a></li> </ul> </div> <div class="article"> <h2>Judul Artikel</h2> <p class="author">Oleh <a href="#">Rino Safrizal</a> pada 18 November 2021</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio cumque quisquam ullam soluta minus quidem, adipisci, natus possimus, aspernatur nulla officiis facilis amet, quasi. Ea eaque nisi, nihil, cumque velit voluptatum molestiae itaque magni maxime asperiores vero totam minima doloribus voluptatibus, ut ad odit accusamus suscipit temporibus et perferendis? Molestias quaerat, animi adipisci odit. Natus, non, saepe! Ullam doloribus vel necessitatibus. Rerum similique fugit culpa aliquam ipsa consectetur optio accusamus, veritatis, reiciendis labore, voluptatibus fuga sapiente voluptas, quisquam impedit. Beatae, similique! Accusantium et quia voluptates officia officiis maiores soluta! Perspiciatis necessitatibus fugit itaque, voluptate, corrupti rerum laborum sit voluptatem sequi!</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit eligendi doloribus dolorum illum laboriosam aliquid expedita repellendus cupiditate nostrum, minima quidem distinctio ad rem cum ex pariatur esse voluptatem dolorem, explicabo consequuntur facilis debitis! Molestias alias sint ad earum fugit consequuntur aperiam repellendus quas hic suscipit, ipsa est possimus eos dolore laborum dolorum sed maxime error! Dolorum, ipsam! Iure, incidunt. Voluptatem cumque vel iure ducimus mollitia ipsum quam eum animi, dignissimos, accusamus tempora libero sunt iusto, unde, laudantium. Tempora, expedita magni ab perferendis corporis ducimus ipsam illum veritatis dolore minima.</p> </div> <div class="clear"></div> </div> <div class="footer"> <p>© 2021 - Abu Gaza</p> </div> </div> </body> </html> |
Hasil kode HTML pada web browser tanpa menggunakan CSS:
Kode CSS
Sekarang kita berikan style untuk layout website yang kedua ini, sebelumnya tambahkan terlebih dahulu kode CSS reset seperti layout pertama.
#1 Style pada element body:
- font-family: sans-serif
- background-color: #E6E6FA
- font color: #000111
|
1 2 3 4 5 |
body { font-family: sans-serif; background-color: #E6E6FA; color: #000111; } |
#2 Style pada element container:
- lebar website 900px
- margin auto
|
1 2 3 4 |
.container { width: 900px; margin: auto; } |
#3 Style pada element header:
- font-family: serif
- background-color: slategray
- padding atas/bawah kanan/kiri: 40px 20px
- font color: white
- text-align: center
|
1 2 3 4 5 6 7 |
.header { font-family: serif; background-color: slategray; padding: 40px 20px; color: white; text-align: center; } |
#3.1 Style judul pada header:
- font-size: 40px
- font-weight: bold
- margin-bottom: 10px
|
1 2 3 4 5 |
.header .judul { font-size: 40px; font-weight: bold; margin-bottom: 10px; } |
#3.2 Style tagline pada header:
- font-size: 15px
- font color: lightcyan
|
1 2 3 4 |
.header .tagline { font-size: 15px; color: lightcyan; } |
#4 Untuk layout ke dua ini, menu navigasi kita pisahkan dari header:
- background-color: darkslategray
|
1 2 3 |
.menu { background-color: darkslategray; } |
#4.1 Style pada menu navigasi:
- display: inline-block
- font-size: 15px
- padding: 10px 0px 10px 20px
|
1 2 3 4 5 |
.menu ul li { display: inline-block; font-size: 15px; padding: 10px 0px 10px 20px; } |
#4.2 Style anchor text:
- text-decoration: none
- color: ghostwhite
|
1 2 3 4 |
.menu a { text-decoration: none; color: ghostwhite; } |
#5 Style pada element content:
- background-color: white
|
1 2 3 |
.content { background-color: white; } |
#5.1 Style heading 2 pada element content:
- font-weight: bold
- font-size: 20px
- font-family: sans-serif
- margin-bottom: 10px
|
1 2 3 4 |
.content h2 { font: bold 22px sans-serif; margin-bottom: 10px; } |
#5.2 Style anchor text pada element content:
- text-decoration: none
- font color: darkred
|
1 2 3 4 |
.content a { text-decoration: none; color: darkred; } |
#5.3 Style pada element sidebar:
- lebar sidebar: 250
- float: left
- padding: 20px 15px 10px 20px
|
1 2 3 4 5 |
.sidebar { width: 250px; float: left; padding: 20px 15px 10px 20px; } |
#5.4 Style list menu pada element sidebar:
- margin-bottom: 20px (jarak antara menu dengan heading 2)
|
1 2 3 |
.content ul { margin-bottom: 20px; } |
- margin-bottom: 8px (jarak antar list pada menu)
|
1 2 3 |
.sidebar li { margin-bottom: 8px; } |
#5.5 Style pada element article:
- lebar article: 580px
- float: left
- padding 20px 20px 10px 15px
|
1 2 3 4 5 |
.article { width: 580px; float: left; padding: 20px 20px 10px 15px; } |
#5.6 Style meta data pada element article:
- font-size: 12px
|
1 2 3 |
.article .author { font-size: 12px; } |
#5.7 Style paragraf pada element article:
- font-weight: normal
- ukuran font: 15px
- line-height: 20px (jarak antar baris paragraf
- font-family: ‘times new romans’, serif
- padding-buttom: 10px (jarak antar paragraf)
|
1 2 3 4 |
.article p { font: normal 15px/20px 'times new roman', serif; padding-bottom: 10px; } |
#6 Agar element footer tidak bersembunyi di belakang sidebar dan article, kita hapus setingan float dengan menambahkan property clear dengan value both (atau boleh juga left) pada selector .clear:
|
1 2 3 |
.clear { clear: both; } |
#7 Terakhir style untuk element footer:
- background-color: teal
- padding atas/bawah kiri/kanan: 10px 0px
- font color: white
- text-align: center
|
1 2 3 4 5 6 |
.footer { background-color: teal; padding: 10px 0px; color: white; text-align: center; } |
Kita susun kode CSS di atas sehingga menjadi seperti berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
/* 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: ; padding: ; border: ; 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: 1; } 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: ; } /* Style */ body { font-family: sans-serif; background-color: #E6E6FA; color: #000111; } .container { width: 900px; margin: auto; } .header { font-family: serif; background-color: slategray; padding: 40px 20px; color: white; text-align: center; } .header .judul { font-size: 40px; font-weight: bold; margin-bottom: 10px; } .header .tagline { font-size: 15px; color: lightcyan; } .menu { background-color: darkslategray; } .menu ul li { display: inline-block; font-size: 15px; padding: 10px 0px 10px 20px; } .menu a { text-decoration: none; color: ghostwhite; } .content { background-color: white; } .content h2 { font: bold 22px sans-serif; margin-bottom: 10px; } .content a { text-decoration: none; color: darkred; } .sidebar { width: 250px; float: left; padding: 20px 15px 10px 20px; } .sidebar ul { margin-bottom: 20px; } .sidebar li { margin-bottom: 8px; } .article { width: 580px; float: left; padding: 20px 20px 10px 15px; } .article .author { font-size: 12px; } .article p { font: normal 15px/20px 'times new roman', serif; padding-bottom: 10px; } .clear { clear: both; } .footer { background-color: teal; padding: 10px 0px; color: white; text-align: center; } |
Layout website pada web browser setelah ditambahkan kode CSS:
[…] Layout website 2 terdiri dari: 2 kolom (1 kolom artikel, 1 kolom sidebar kiri) […]