›

Membuat Layout Website Sederhana (Part 4)

Ditulis oleh 2024/04/30 Tambah Komentar

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 Membuat Layout Website Sederhana:

  • Membuat Layout Website 1 Kolom Artikel
  • Membuat Layout Website 2 Kolom (1 Artikel & 1 Sidebar Kiri)
  • Membuat Layout Website 3 Kolom (2 Artikel & 1 Sidebar Kanan)
  • Membuat Layout Website 3 Kolom Konten (1 Artikel & 2 Sidebar) & 4 Kolom Footer

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>

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

#2 Style pada element 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;
}

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

#3.2 Menambahkan efek hover pada list menu:

  • background-color: #FFFF00
  • font 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;
}

#3.4 Menambahkan efek hover pada anchor text:

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

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

#4.2 Style tagline pada element header:

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

#6 Style pada element 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;
}

#6.2 Style meta data pada element body:

  • font-style: italic
  • font-size: 12px
  • font-family: 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;
}

#6.4 Style tag <ul> pada element body:

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

#6.5 Style tag <li> pada element body:

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

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

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

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

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

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

#6.12 Hasus style float:

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

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

Layout website setelah ditambahkan kode CSS:



Belum ada Komentar untuk "Membuat Layout Website Sederhana (Part 4)"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel