Membuat Layout Website Sederhana (Part 3)

abugaza_ | November 22, 2021 | CSS, HTML, TKJ | 4 Comments

Rate this post

Untuk layout website yang ketiga ini, kita buat dua buah kolom untuk konten/artikel dan 1 kolom sidebar yang berada di sebelah kanan konten.

Seri Belajar HTML:

Seri Belajar Membuat Layout Website Sederhana:

Kode HTML

<!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>Membuat Website</h1>
			<p>Membuat Layout HTML 3 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="article1">
				<h2>Judul Artikel Kolom 1</h2>
				<p class="author">Diposting oleh <a href="#">Rino Safrizal</a> pada tanggal 19 November 2021</p>
				<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Modi quia asperiores accusamus dicta doloremque dolor facilis eaque laborum vero veritatis necessitatibus ab labore quas perspiciatis laudantium, odio fugit quod neque officia quo repellendus tempora. Consectetur deserunt itaque illum fuga dolore qui, ad minus sunt iste, saepe, accusamus ipsa maxime iusto culpa dignissimos recusandae et molestias iure quaerat nobis, harum? Quisquam.</p>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error reiciendis eos asperiores tenetur officia repudiandae enim sequi voluptates exercitationem, rem eveniet, necessitatibus laudantium quis officiis! Et est tempore ipsam a fugiat porro omnis inventore animi mollitia reprehenderit. Labore recusandae inventore unde? Quidem, animi porro quis accusamus veniam impedit, pariatur! Incidunt, deserunt. Aliquid sed temporibus odit fugit quas inventore autem fuga dolore obcaecati? Ducimus deserunt quisquam voluptatem vitae culpa labore quasi dolorum est velit nihil dignissimos recusandae magnam, repellendus, aliquid sequi.</p>
			</div>
			<div class="article2">
				<h2>Judul Artikel Kolom 2</h2>
				<p class="author">Diposting oleh <a href="#">Rino Safrizal</a> pada tanggal 19 November 2021</p>
				<p>Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Soluta, corporis esse hic similique ab aut eveniet necessitatibus praesentium eligendi! Autem, fugit vitae ipsa error illum magnam laboriosam molestias illo, inventore id perferendis repudiandae quisquam quas, harum est excepturi repellendus quos perspiciatis eaque repellat nemo sequi ad adipisci corrupti a. Possimus rem porro nulla, mollitia error blanditiis molestias aut, exercitationem voluptas. Explicabo, eveniet laboriosam cum non, facilis qui iusto fugiat sint.</p>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora commodi quis vero blanditiis neque voluptatibus est delectus assumenda architecto reprehenderit voluptatem rerum dolores laboriosam iste cupiditate, obcaecati facere? Reprehenderit voluptate iusto neque ex iure, temporibus unde atque magnam explicabo reiciendis esse eum vitae voluptatibus repellat quis animi quibusdam porro laudantium nulla error nemo. Maiores illum exercitationem sapiente voluptates incidunt officiis.</p>
			</div>
			<div class="sidebar">
				<h2>Postingan Terbaru</h2>
				<ul>
					<li><a href="#">Judul Artikel 1</a></li>
					<li><a href="#">Judul Artikel 2</a></li>
					<li><a href="#">Judul Artikel 3</a></li>
					<li><a href="#">Judul 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>
		<div class="clear"></div>
		<div class="footer">
			<p>&copy; 2021 - Abu Gaza</p>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Belajar HTML</title>

</head>

<body>

<h1>Membuat Website</h1>

<p>Membuat Layout HTML 3 Kolom</p>

</div>

<ul>

<li><a href="#">ABOUT</a></li>

<li><a href="#">CONTACT</a></li>

</ul>

</div>

<h2>Judul Artikel Kolom 1</h2>

<p class="author">Diposting oleh <a href="#">Rino Safrizal</a> pada tanggal 19 November 2021</p>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Modi quia asperiores accusamus dicta doloremque dolor facilis eaque laborum vero veritatis necessitatibus ab labore quas perspiciatis laudantium, odio fugit quod neque officia quo repellendus tempora. Consectetur deserunt itaque illum fuga dolore qui, ad minus sunt iste, saepe, accusamus ipsa maxime iusto culpa dignissimos recusandae et molestias iure quaerat nobis, harum? Quisquam.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error reiciendis eos asperiores tenetur officia repudiandae enim sequi voluptates exercitationem, rem eveniet, necessitatibus laudantium quis officiis! Et est tempore ipsam a fugiat porro omnis inventore animi mollitia reprehenderit. Labore recusandae inventore unde? Quidem, animi porro quis accusamus veniam impedit, pariatur! Incidunt, deserunt. Aliquid sed temporibus odit fugit quas inventore autem fuga dolore obcaecati? Ducimus deserunt quisquam voluptatem vitae culpa labore quasi dolorum est velit nihil dignissimos recusandae magnam, repellendus, aliquid sequi.</p>

</div>

<h2>Judul Artikel Kolom 2</h2>

<p class="author">Diposting oleh <a href="#">Rino Safrizal</a> pada tanggal 19 November 2021</p>

<p>Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Soluta, corporis esse hic similique ab aut eveniet necessitatibus praesentium eligendi! Autem, fugit vitae ipsa error illum magnam laboriosam molestias illo, inventore id perferendis repudiandae quisquam quas, harum est excepturi repellendus quos perspiciatis eaque repellat nemo sequi ad adipisci corrupti a. Possimus rem porro nulla, mollitia error blanditiis molestias aut, exercitationem voluptas. Explicabo, eveniet laboriosam cum non, facilis qui iusto fugiat sint.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora commodi quis vero blanditiis neque voluptatibus est delectus assumenda architecto reprehenderit voluptatem rerum dolores laboriosam iste cupiditate, obcaecati facere? Reprehenderit voluptate iusto neque ex iure, temporibus unde atque magnam explicabo reiciendis esse eum vitae voluptatibus repellat quis animi quibusdam porro laudantium nulla error nemo. Maiores illum exercitationem sapiente voluptates incidunt officiis.</p>

</div>

<h2>Postingan Terbaru</h2>

<ul>

<li><a href="#">Judul Artikel 1</a></li>

<li><a href="#">Judul Artikel 2</a></li>

<li><a href="#">Judul Artikel 3</a></li>

<li><a href="#">Judul 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>

</body>

</html>

Hasil kode HTML pada web browser tanpa menggunakan CSS:

Kode CSS

Style untuk masing-masing element dapat kita jabarkan sebagai berikut (selalu tambahkan kode CSS reset di awal):

#1 Style pada element body:

font-family: sans-serif
background-color: #F5F5F5
font color: #010101

body {
	font-family: sans-serif;
	background-color: #F5F5F5;
	color: #010101;
}

body {

font-family: sans-serif;

background-color: #F5F5F5;

color: #010101;

}

#2 Style pada element container:

width: 1200px
background-color: #FFFAFA
margin: auto

.container {
	width: 1200px;
	background-color: #FFFAFA;
	margin: auto;
}

.container {

width: 1200px;

background-color: #FFFAFA;

margin: auto;

}

#3 Style pada element header:

background-color: #5F9EA0
padding atas/bawah dan kanan/kiri: 35px 25px
font color: #FFF

.header {
	background-color: #5F9EA0;
	padding: 35px 25px;
	color: #FFF;
}

.header {

background-color: #5F9EA0;

padding: 35px 25px;

color: #FFF;

}

#3.1 Style heading 1 pada element header:

font-weight: bold
font-size: 30px
font-family: monospace
margin-bottom: 10px

.header h1 {
	font: bold 30px monospace;
	margin-bottom: 10px;
}

.header h1 {

font: bold 30px monospace;

margin-bottom: 10px;

}

#3.2 Style tagline pada element header:

font-weight: italix
font size: 16px
font-family: georgia, serif

.header p {
	font: italic 16px georgia, serif;
}

.header p {

font: italic 16px georgia, serif;

}

#4 Style pada element menu:

background-color: #4682B4

.menu {
	background-color: #4682B4;
}

.menu {

background-color: #4682B4;

}

#4.1 Style pada menu navigasi:

display: inline-block
font-weight: bold
font-size: 15px
font-family: sans-serif

.menu ul li {
	display: inline-block;
	font: bold 15px sans-serif;
	padding: 10px 0px 10px 25px;
}

.menu ul li {

display: inline-block;

font: bold 15px sans-serif;

padding: 10px 0px 10px 25px;

}

#4.2 Style anchor text pada element menu:

text-decoration: none
font color: #E0FFFF

.menu a {
	text-decoration: none;
	color: #E0FFFF;
}

.menu a {

text-decoration: none;

color: #E0FFFF;

}

#5 Style pada element content:

font-size: 15px
line-height: 20px
font-family: georgina, serif
text-align: justify

.content {
	font: 15px/20px georgia, serif;
	text-align: justify;
}

.content {

font: 15px/20px georgia, serif;

text-align: justify;

}

#5.1 Style heading 2 pada element content:

font-weight: 20px
font-family: sans-serif
margin-bottom: 10px

.content h2 {
	font: bold 20px sans-serif;
	margin-bottom: 10px ;
}

.content h2 {

font: bold 20px sans-serif;

margin-bottom: 10px ;

}

#5.2 Style meta data (class=”author”) pada element content:

font-size: 11px
margin-bottom: 5px

.content .author {
	font-size: 11px;
	margin-bottom: 5px;
}

.content .author {

font-size: 11px;

margin-bottom: 5px;

}

#5.3 Style paragraf pada element content:

margin-bottom: 10px

.content p {
	padding-bottom: 10px;
}

.content p {

padding-bottom: 10px;

}

#5.4 Style menu pada element content:

padding-buttom: 15px

.content ul {
	padding-bottom: 15px;
}

.content ul {

padding-bottom: 15px;

}

#5.5 Style anchor text pada element content:

text-decoration: none
color: darkblue

.content a {
	text-decoration: none;
	color: darkblue;
}

.content a {

text-decoration: none;

color: darkblue;

}

#5.6 Style pada kolom artikel 1:

width: 420px
float: left
padding: 25px 15px 15px 25px

.article1 {
	width: 420px;
	float: left;
	padding: 25px 15px 15px 25px;
}

.article1 {

width: 420px;

float: left;

padding: 25px 15px 15px 25px;

}

#5.7 Style pada kolom artikel 2:

width: 420px
float: left
padding: 25px 15px 15px 15px

.article2 {
	width: 420px;
	float: left;
	padding: 25px 15px 15px 15px;
}

.article2 {

width: 420px;

float: left;

padding: 25px 15px 15px 15px;

}

#5.8 Style pada sidebar:

width: 250px
float: left
padding 25px 25px 15px 15px

.sidebar {
	width: 250px;
	float: left;
	padding: 25px 25px 15px 15px;
}

.sidebar {

width: 250px;

float: left;

padding: 25px 25px 15px 15px;

}

#6 Hapus style float dengan menambahkan property clear pada class=”clear”

clear: both

.clear {
	clear: both;
}

.clear {

clear: both;

}

#7 Style pada element footer:

background-color: #E9967A
padding: 10px 0px 10px 25px
font-style: italic
font-weight: bold
font-size: 12px
font-family: monospace

.footer {
	background-color: #E9967A;
	padding: 10px 0px 10px 25px;
	font: italic bold 12px monospace;
	color: white;
}

.footer {

background-color: #E9967A;

padding: 10px 0px 10px 25px;

font: italic bold 12px monospace;

color: white;

}

#8 Terakhir kita gabungkan kode di atas sehingga menjadi seperti berikut ini:

/* 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: 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: 0;
}
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://rinosafrizal.com/instalasi-linux-dengan-metode-dualbooting/" target="_blank" rel="nofollow" class="ud4cdb09518725e1a84b0e72bb6045f3a"><!-- INLINE RELATED POSTS 3/3 //--><style> .ud4cdb09518725e1a84b0e72bb6045f3a , .ud4cdb09518725e1a84b0e72bb6045f3a .postImageUrl , .ud4cdb09518725e1a84b0e72bb6045f3a .centered-text-area { min-height: 80px; position: relative; } .ud4cdb09518725e1a84b0e72bb6045f3a , .ud4cdb09518725e1a84b0e72bb6045f3a:hover , .ud4cdb09518725e1a84b0e72bb6045f3a:visited , .ud4cdb09518725e1a84b0e72bb6045f3a:active { border:0!important; } .ud4cdb09518725e1a84b0e72bb6045f3a .clearfix:after { content: ""; display: table; clear: both; } .ud4cdb09518725e1a84b0e72bb6045f3a { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #E67E22; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .ud4cdb09518725e1a84b0e72bb6045f3a:active , .ud4cdb09518725e1a84b0e72bb6045f3a:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #D35400; } .ud4cdb09518725e1a84b0e72bb6045f3a .centered-text-area { width: 100%; position: relative; } .ud4cdb09518725e1a84b0e72bb6045f3a .ctaText { border-bottom: 0 solid #fff; color: #ECF0F1; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .ud4cdb09518725e1a84b0e72bb6045f3a .postTitle { color: #2C3E50; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .ud4cdb09518725e1a84b0e72bb6045f3a .ctaButton { background-color: #D35400!important; color: #ECF0F1; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; moz-border-radius: 3px; text-align: center; text-decoration: none; text-shadow: none; width: 80px; min-height: 80px; background: url(https://rinosafrizal.com/wp-content/plugins/intelly-related-posts/assets/images/simple-arrow.png)no-repeat; position: absolute; right: 0; top: 0; } .ud4cdb09518725e1a84b0e72bb6045f3a:hover .ctaButton { background-color: #E67E22!important; } .ud4cdb09518725e1a84b0e72bb6045f3a .centered-text { display: table; height: 80px; padding-left: 18px; top: 0; } .ud4cdb09518725e1a84b0e72bb6045f3a .ud4cdb09518725e1a84b0e72bb6045f3a-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .ud4cdb09518725e1a84b0e72bb6045f3a:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text" style="float: left;"><div class="ud4cdb09518725e1a84b0e72bb6045f3a-content"><span class="ctaText">Baca Juga:</span>  <span class="postTitle">Instalasi Sistem Operasi Linux Mint Dual Boot dengan Windows 10</span></div></div></div><div class="ctaButton"></div></a></div>
/* Style */

body {
    font-family: sans-serif;
    background-color: #F5F5F5;
    color: #010101;
}
.container {
    width: 1200px;
    background-color: #FFFAFA;
    margin: auto;
}
.header {
    background-color: #5F9EA0;
    padding: 35px 25px;
    color: #FFF;
}
.header h1 {
    font: bold 30px monospace;
    margin-bottom: 10px;
}
.header p {
    font: italic 16px georgia, serif;
}
.menu {
    background-color: #4682B4;
}
.menu ul li {
    display: inline-block;
    font: bold 15px sans-serif;
    padding: 10px 0px 10px 25px;
}
.menu a {
    text-decoration: none;
    color: #E0FFFF;
}
.content {
    font: 15px/20px georgia, serif;
    text-align: justify;
}
.content h2 {
    font: bold 20px sans-serif;
    margin-bottom: 10px ;
}
.content .author {
    font-size: 11px;
    margin-bottom: 5px;
}
.content p {
    padding-bottom: 10px;
}
.content ul {
    padding-bottom: 15px;
}
.content a {
    text-decoration: none;
    color: darkblue;
}
.article1 {
    width: 420px;
    float: left;
    padding: 25px 15px 15px 25px;
}
.article2 {
    width: 420px;
    float: left;
    padding: 25px 15px 15px 15px;
}
.sidebar {
    width: 250px;
    float: left;
    padding: 25px 25px 15px 15px;
}
.clear {
    clear: both;
}
.footer {
    background-color: #E9967A;
    padding: 10px 0px 10px 25px;
    font: italic bold 12px monospace;
    color: white;
}

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: #F5F5F5;

color: #010101;

}

.container {

width: 1200px;

background-color: #FFFAFA;

margin: auto;

}

.header {

background-color: #5F9EA0;

padding: 35px 25px;

color: #FFF;

}

.header h1 {

font: bold 30px monospace;

margin-bottom: 10px;

}

.header p {

font: italic 16px georgia, serif;

}

.menu {

background-color: #4682B4;

}

.menu ul li {

display: inline-block;

font: bold 15px sans-serif;

padding: 10px 0px 10px 25px;

}

.menu a {

text-decoration: none;

color: #E0FFFF;

}

.content {

font: 15px/20px georgia, serif;

text-align: justify;

}

.content h2 {

font: bold 20px sans-serif;

margin-bottom: 10px ;

}

.content .author {

font-size: 11px;

margin-bottom: 5px;

}

.content p {

padding-bottom: 10px;

}

.content ul {

padding-bottom: 15px;

}

.content a {

text-decoration: none;

color: darkblue;

}

.article1 {

width: 420px;

float: left;

padding: 25px 15px 15px 25px;

}

.article2 {

width: 420px;

float: left;

padding: 25px 15px 15px 15px;

}

.sidebar {

width: 250px;

float: left;

padding: 25px 25px 15px 15px;

}

.clear {

clear: both;

}

.footer {

background-color: #E9967A;

padding: 10px 0px 10px 25px;

font: italic bold 12px monospace;

color: white;

}

Layout website pada web browser setelah ditambahkan kode CSS:

Tags:layout html, layout website sederhana, membuat layout html, membuat layout website

0 0 votes

Article Rating

4 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Membuat Layout Website Sederhana (Part 1) - rinosafrizal.com

1 year ago

[…] Layout website 3 teridir dari: 3 kolom (2 kolom artikel, 1 kolom sidebar kanan) […]

Membuat Layout Website Sederhana (Part 4) - rinosafrizal.com

1 year ago

[…] Membuat Layout Website 3 Kolom (2 Artikel & 1 Sidebar Kanan) […]

Membuat Layout Website Sederhana (Part 2) - rinosafrizal.com

1 year ago

[…] Membuat Layout Website 3 Kolom (2 Kolom Artikel & 1 Kolom Sidebar Kanan) […]

Membuat Layout Website Sederhana (Part 5) - rinosafrizal.com

1 year ago

[…] Membuat Layout Website 3 Kolom (2 Artikel & 1 Sidebar Kanan) […]

Bagikan halaman ini:

Related