Membuat Layout Website Sederhana (Part 4)

abugaza_ | November 24, 2021 | CSS, HTML, TKJ | 1 Comment

Rate this post

Pada bagian keempat ini, kita akan membuat 4 (empat) kolom konten masing-masing terdiri dari 2 kolom untuk artikel dan dua kolom untuk siderbar. Selain itu, kita coba tambahkan header image dan posisi menu kita atur di bagian atas kanan header. Untuk image silakan siapkan terlebih dahulu dan simpan pada folder yang sama dengan file index.html.

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="menu">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Blog</a></li>
			</ul>
		</div>
		<div class="header">
			<h1>Membuat Website</h1>
			<p>Membuat Layout HTML 4 Kolom</p>
		</div>
		<div class="image">
			<img src="img.jpg">
		</div>
		<div class="body">
			<div class="kiri">
				<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>
				<h2>Kategori</h2>
				<ul class="kategori">
					<li><a href="#">HTML</a></li>
					<li><a href="#">CSS</a></li>
					<li><a href="#">PHP</a></li>
					<li><a href="#">SQL</a></li>
					<li><a href="#">JAVASCRIPT</a></li>
					<li><a href="#">JQUERY</a></li>
					<li><a href="#">JSON</a></li>
					<li><a href="#">AJAX</a></li>
					<li><a href="#">JAVA</a></li>
					<li><a href="#">C++</a></li>
					<li><a href="#">C#</a></li>
				</ul>
			</div>	
			<div class="article1">
				<h2>Judul Artikel Kolom 1</h2>
				<p class="author">Dipostkan oleh <a href="#">Rino Safrizal</a> pada tanggal 19 November 2021</p>
				<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Dignissimos, veritatis blanditiis aperiam reprehenderit animi harum, facilis neque deserunt debitis odit. Eligendi labore magni consequatur molestiae itaque dicta, eos voluptatibus at fuga explicabo laboriosam fugit dolor sequi perferendis saepe dolorem molestias ea fugiat harum rem accusantium voluptate quas deserunt quia facilis. Laudantium at atque provident! Harum eos pariatur reiciendis repellat, minus?</p>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, sequi minima vitae sunt explicabo tempora molestias magni inventore atque nemo repellendus recusandae ea aut labore temporibus itaque est, repudiandae corrupti consectetur cum quisquam voluptate minus quam id rem. Repudiandae minima dignissimos officiis, enim illum aperiam accusantium, consequatur iste fugit voluptatum, omnis. Nam, harum sed quis magnam quas sunt perferendis explicabo sapiente aut molestiae et voluptatum. Corrupti, mollitia porro? Quos, repellat. Corrupti, optio fugiat, tempora maiores repellat inventore nemo nesciunt ea.</p>
			</div>
			<div class="article2">
				<h2>Judul Artikel Kolom 2</h2>
				<p class="author">Dipostkan oleh <a href="#">Rino Safrizal</a> pada tanggal 19 November 2021</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa consequatur nihil corporis hic animi, delectus laudantium accusamus quo odio aliquid, similique quas? Fugit saepe odio eaque doloribus provident, ut explicabo eum quo laboriosam ducimus deleniti consequatur libero nesciunt quos aspernatur cum! Laboriosam sequi eaque in nulla eum corrupti. A in, quae magnam officia dolores? Sint reprehenderit optio vitae alias perferendis aliquam voluptas possimus praesentium, ex doloremque sit earum omnis non temporibus obcaecati quaerat cumque ut deleniti vel expedita veniam iusto ad assumenda? Id magnam cupiditate nobis porro temporibus est dolores.</p>
				<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Magnam praesentium quod omnis. Quidem quisquam, tempore quae obcaecati vero et, voluptatem nesciunt expedita maiores quam rem dolore, autem nam in ex molestias minima, accusantium similique? Vel mollitia, excepturi, alias, quo ratione possimus reprehenderit, placeat optio dolore veritatis tempore? Atque facilis, blanditiis.</p>
			</div>
			<div class="kanan">
				<h2>Postingan Terbaru</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>Postingan Populer</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>	
			</div>
			<div class="clear"></div>
		</div>
		<div class="footer">
			<p>&copy; 2021 - Abu Gaza</p>
		</div>	
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Belajar HTML</title>

</head>

<body>

<ul>

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

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

</ul>

</div>

<h1>Membuat Website</h1>

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

</div>

</div>

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

<h2>Kategori</h2>

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

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

</ul>

</div>

<h2>Judul Artikel Kolom 1</h2>

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

<p>Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Dignissimos, veritatis blanditiis aperiam reprehenderit animi harum, facilis neque deserunt debitis odit. Eligendi labore magni consequatur molestiae itaque dicta, eos voluptatibus at fuga explicabo laboriosam fugit dolor sequi perferendis saepe dolorem molestias ea fugiat harum rem accusantium voluptate quas deserunt quia facilis. Laudantium at atque provident! Harum eos pariatur reiciendis repellat, minus?</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, sequi minima vitae sunt explicabo tempora molestias magni inventore atque nemo repellendus recusandae ea aut labore temporibus itaque est, repudiandae corrupti consectetur cum quisquam voluptate minus quam id rem. Repudiandae minima dignissimos officiis, enim illum aperiam accusantium, consequatur iste fugit voluptatum, omnis. Nam, harum sed quis magnam quas sunt perferendis explicabo sapiente aut molestiae et voluptatum. Corrupti, mollitia porro? Quos, repellat. Corrupti, optio fugiat, tempora maiores repellat inventore nemo nesciunt ea.</p>

</div>

<h2>Judul Artikel Kolom 2</h2>

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

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa consequatur nihil corporis hic animi, delectus laudantium accusamus quo odio aliquid, similique quas? Fugit saepe odio eaque doloribus provident, ut explicabo eum quo laboriosam ducimus deleniti consequatur libero nesciunt quos aspernatur cum! Laboriosam sequi eaque in nulla eum corrupti. A in, quae magnam officia dolores? Sint reprehenderit optio vitae alias perferendis aliquam voluptas possimus praesentium, ex doloremque sit earum omnis non temporibus obcaecati quaerat cumque ut deleniti vel expedita veniam iusto ad assumenda? Id magnam cupiditate nobis porro temporibus est dolores.</p>

<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Magnam praesentium quod omnis. Quidem quisquam, tempore quae obcaecati vero et, voluptatem nesciunt expedita maiores quam rem dolore, autem nam in ex molestias minima, accusantium similique? Vel mollitia, excepturi, alias, quo ratione possimus reprehenderit, placeat optio dolore veritatis tempore? Atque facilis, blanditiis.</p>

</div>

<h2>Postingan Terbaru</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>Postingan Populer</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>

</div>

</div>

</div>

</body>

</html>

Kode CSS

#1 Style pada element body:

font-family: georgia, serif
background-color: #E6E6FA
font color: #111

body {
	font-family: georgia, serif;
	background-color: #E6E6FA;
	color: #111;
}

body {

font-family: georgia, serif;

background-color: #E6E6FA;

color: #111;

}

#2 Style pada element container:

width: 1200px
margin: auto

.container {
	width: 1200px;
	margin: auto;
}

.container {

width: 1200px;

margin: auto;

}

#3 Style pada element menu:

text-align: right
background-color: #D3D3D3

.menu {
	text-align: right;
	background-color: #D3D3D3;
}

.menu {

text-align: right;

background-color: #D3D3D3;

}

#3.1 Style pada list menu:

display: inline-block
padding atas/bawah kanan/kiri: 10px 20px
background-color: #778899

.menu ul li {
	display: inline-block;
	padding: 10px 20px;
	background-color: #778899;
}

.menu ul li {

display: inline-block;

padding: 10px 20px;

background-color: #778899;

}

#3.2 Menambahkan efek hover pada list menu:

background-color: #FFFF00
font color: #778899

.menu li:hover {
	background-color: #FFFF00;
	color: #778899;
}

.menu li:hover {

background-color: #FFFF00;

color: #778899;

}

#3.3 Style anchor text pada element menu:

text-decoration: none
font-weight: bold
font-size: 20px
font-family: sans-serif

.menu a {
	text-decoration: none;
	font: bold 20px sans-serif;
	color: #FFF;
}

.menu a {

text-decoration: none;

font: bold 20px sans-serif;

color: #FFF;

}

#3.4 Menambahkan efek hover pada anchor text:

font-color: #778899

.menu a:hover {
	color: #778899;
}

.menu a:hover {

color: #778899;

}

#4 Style pada element header:

padding atas/bawah kanan/kiri: 40px 20px
font-family: serif
backgroun-color: #D3D3D3

.header {
	padding: 40px 20px;
	font-family: serif;
	background-color: #D3D3D3;
}

.header {

padding: 40px 20px;

font-family: serif;

background-color: #D3D3D3;

}

#4.1 Style judul pada element header:

font-size: 40px
font-weight: bold
margin-bottom: 10px

.header h1 {
	font-size: 40px;
	font-weight: bold;
	margin-bottom: 10px;
}

.header h1 {

font-size: 40px;

font-weight: bold;

margin-bottom: 10px;

}

#4.2 Style tagline pada element header:

font-size: 18px

.header p {
	font-size: 18px;
}

.header p {

font-size: 18px;

}

#5 Style pada header image:

border-top: 5px solid #FF4500
border-bottom: 5px solid #B0E0E6

.image {
	border-top: 5px solid #FF4500;
	border-bottom: 5px solid #B0E0E6;
}

.image {

border-top: 5px solid #FF4500;

border-bottom: 5px solid #B0E0E6;

}

#6 Style pada element body:

background-color: #F5FFFA

.body {
	background-color: #F5FFFA;
}

.body {

background-color: #F5FFFA;

}

#6.1 Style tag <h2> pada element body:

font-weight: bold
font-size: 20px
font-family: sans-serif

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

.body h2 {

font: bold 20px sans-serif;

margin-bottom: 10px;

}

#6.2 Style meta data pada element body:

font-style: italic
font-size: 12px
font-family: serif

.body .author {
	font: italic 12px serif;
}

.body .author {

font: italic 12px serif;

}

#6.3 Style tag <p> pada element body:

font-size: 16px
line-height: 20px
font-family: serif
margin-bottom: 10px

.body p {
	font: 16px/20px serif;
	padding-bottom: 10px;
}

.body p {

font: 16px/20px serif;

padding-bottom: 10px;

}

#6.4 Style tag <ul> pada element body:

margin-bottom: 20px

.body ul {
	margin-bottom: 20px;
}

.body ul {

margin-bottom: 20px;

}

#6.5 Style tag <li> pada element body:

margin-bottom: 10px

.body li {
	margin-bottom: 10px;
}

.body li {

margin-bottom: 10px;

}

#6.6 Style tag <a> pada element body:

text-decoration: none
font color: #000

.body a {
	text-decoration: none;
	color: #000;
}

.body a {

text-decoration: none;

color: #000;

}

#6.7 Style pada siderbar kiri:

width: 200px
float: left
padding atas kanan bawah kiri: 20px 15px 10px 20px

.kiri {
	width: 200px;
	float: left;
	padding: 20px 15px 10px 20px;
}

.kiri {

width: 200px;

float: left;

padding: 20px 15px 10px 20px;

}

#6.8 Style tag <li> pada kategori:

display: inline-block
padding: 7px
margin-right: 5px
background-color: #7FFFD4
font color: #000

.kategori li {
	display: inline-block;
	padding: 7px;
	margin-right: 5px;
	background-color: #7FFFD4;
	color: #000;
}

.kategori li {

display: inline-block;

padding: 7px;

margin-right: 5px;

background-color: #7FFFD4;

color: #000;

}

#6.9 Style pada kolom artikel 1:

width: 335px
float: left
padding atas kanan bawah kiri: 20px 15px 10px 15px

.article1 {
	width: 335px;
	float: left;
	padding: 20px 15px 10px 15px;
}

.article1 {

width: 335px;

float: left;

padding: 20px 15px 10px 15px;

}

#6.10 Style pada kolom artikel 2:

width: 335px
float: left
padding atas kanan bawah kiri: 20px 15px 10px 15px

.article2 {
	width: 335px;
	float: left;
	padding: 20px 15px 10px 15px;
}

.article2 {

width: 335px;

float: left;

padding: 20px 15px 10px 15px;

}

#6.11 Style pada sidebar kanan:

width: 200px
float: left
padding atas kanan bawah kiri: 20px 20px 10px 15px

.kanan {
	width: 200px;
	float: left;
	padding: 20px 20px 10px 15px;
}

.kanan {

width: 200px;

float: left;

padding: 20px 20px 10px 15px;

}

#6.12 Hasus style float:

clear: both

.clear {
	clear: both;
}

.clear {

clear: both;

}

#7 Style pada element footer:

background-color: #191970
font color: #F5FFFA
padding atas/bawah kanan/kiri: 10px 0px
text-align: center

.footer {
	background-color: #191970;
	color: #F5FFFA;
	padding: 10px 0px;
	text-align: center;
}

.footer {

background-color: #191970;

color: #F5FFFA;

padding: 10px 0px;

text-align: center;

}

#8 Kode CSS lengkap:

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

/* Style */

body {
	font-family: georgia, serif;
	background-color: #E6E6FA;
	color: #111;
}
.container {
	width: 1200px;
	margin: auto;
}
.menu {
	text-align: right;
	background-color: #D3D3D3;
}
.menu ul li {
	display: inline-block;
	padding: 10px 20px;
	background-color: #778899;
}
.menu li:hover {
	background-color: #FFFF00;
	color: #778899;
}
.menu a {
	text-decoration: none;
	font: bold 20px sans-serif;
	color: #FFF;
}
.menu a:hover {
	color: #778899;
}
.header {
	padding: 40px 20px;
	font-family: serif;
	background-color: #D3D3D3;
}
.header h1 {
	font-size: 40px;
	font-weight: bold;
	margin-bottom: 10px;
}
.header p {
	font-size: 18px;
}
.image {
	border-top: 5px solid #FF4500;
	border-bottom: 5px solid #B0E0E6;
}
.body {
	background-color: #F5FFFA;
}
.body h2 {
	font: bold 20px sans-serif;
	margin-bottom: 10px;
}
.body .author {
	font: 12px serif;
}
.body p {
	font: 16px/20px serif;
	padding-bottom: 10px;
}
.body ul {
	margin-bottom: 20px;
}
.body li {
	margin-bottom: 10px;
}
.body a {
	text-decoration: none;
	color: #000;
}
.kiri {
	width: 200px;
	float: left;
	padding: 20px 15px 10px 20px;
}
.kategori li {
	display: inline-block;
	padding: 7px;
	margin-right: 5px;
	background-color: #7FFFD4;
	color: #000;
}
.article1 {
	width: 335px;
	float: left;
	padding: 20px 15px 10px 15px;
}
.article2 {
	width: 335px;
	float: left;
	padding: 20px 15px 10px 15px;
}
.kanan {
	width: 200px;
	float: left;
	padding: 20px 20px 10px 15px;
}
.clear {
	clear: both;
}
.footer {
	background-color: #191970;
	color: #F5FFFA;
}
.footer p {
	padding: 10px 0px;
	text-align: center;
}

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

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

/* 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: georgia, serif;

background-color: #E6E6FA;

color: #111;

}

.container {

width: 1200px;

margin: auto;

}

.menu {

text-align: right;

background-color: #D3D3D3;

}

.menu ul li {

display: inline-block;

padding: 10px 20px;

background-color: #778899;

}

.menu li:hover {

background-color: #FFFF00;

color: #778899;

}

.menu a {

text-decoration: none;

font: bold 20px sans-serif;

color: #FFF;

}

.menu a:hover {

color: #778899;

}

.header {

padding: 40px 20px;

font-family: serif;

background-color: #D3D3D3;

}

.header h1 {

font-size: 40px;

font-weight: bold;

margin-bottom: 10px;

}

.header p {

font-size: 18px;

}

.image {

border-top: 5px solid #FF4500;

border-bottom: 5px solid #B0E0E6;

}

.body {

background-color: #F5FFFA;

}

.body h2 {

font: bold 20px sans-serif;

margin-bottom: 10px;

}

.body .author {

font: 12px serif;

}

.body p {

font: 16px/20px serif;

padding-bottom: 10px;

}

.body ul {

margin-bottom: 20px;

}

.body li {

margin-bottom: 10px;

}

.body a {

text-decoration: none;

color: #000;

}

.kiri {

width: 200px;

float: left;

padding: 20px 15px 10px 20px;

}

.kategori li {

display: inline-block;

padding: 7px;

margin-right: 5px;

background-color: #7FFFD4;

color: #000;

}

.article1 {

width: 335px;

float: left;

padding: 20px 15px 10px 15px;

}

.article2 {

width: 335px;

float: left;

padding: 20px 15px 10px 15px;

}

.kanan {

width: 200px;

float: left;

padding: 20px 20px 10px 15px;

}

.clear {

clear: both;

}

.footer {

background-color: #191970;

color: #F5FFFA;

}

.footer p {

padding: 10px 0px;

text-align: center;

}

Layout website setelah ditambahkan kode CSS:

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

0 0 votes

Article Rating

1 Comment

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

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

1 year ago

[…] Membuat Layout Website 4 Kolom (2 Artikel & 2 Sidebar) dengan Header Image […]

Bagikan halaman ini:

Related