Membuat Layout Website Sederhana (Part 1)

abugaza_ | November 17, 2021 | HTML, TKJ | 4 Comments

Rate this post

Kali ini kita akan coba belajar membuat website sederhana menggunakan HTML dan CSS dengan berbagai jenis layout. Layout website setidaknya memiliki element-element berikut:

Element header, untuk menempatkan informasi judul maupun tagline web
Element navigasi, menu navigasi yang mengahar ke halaman lain website
Element konten, element yang berfungsi untuk menempatkan konten-konten website
Element sidebar, element satu ini difungsikan untuk menempatkan informasi tambahan seperti, postingan populer, postingan terbaru, arsip, maupun iklan
Element footer, posisi paling akhir atau bawah dari halaman website yang berfungsi untuk menempatkan informasi profil seperti halaman about, contact, atau bisa juga lisensi dari halaman web.

Seri Belajar HTML:

Berikut spesifikasi layout yang akan kita buat menggunakan HTML dan CSS:

Langsung kita eksekusi menggunakan text editor. Kita buat dua buah file untuk HTML menggunakan index.html sedangkan CSS gunakan nama style.css.

Daftar Isi hide

Layout Website Sederhana 1: 1 Kolom Artikel

Bagikan halaman ini:

Kode HTML

Sebelum membuat layout HTML, pahami terlebih dahulu tentang materi element block & inline, div & span, serta atribut class dan id pada HTML, baca selengkapnya di sini. Sekarang kita mulai step by step untuk koding HTML nya:

#1 Pertama kita buat struktur dasar HTML, tambahkan title dan element <link> untuk menghubungkan kode HTML dengan CSS:

<!DOCTYPE html>
<html>
<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>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML</title>

</head>

<body>

</body>

</html>

#2 Pada element <body> buat class container untuk membungkus header, content, dan footer:

<div class="container">
	<div class="header"></div>
	<div class="content"></div>
	<div class="footer"></div>
</div>

</div>

#2.1 Element header terdiri dari 3 buah element, yaitu tag <h1> untuk judul website, tag <p> untuk deskripsi atau tagline web, dan tag <ul> untuk membuat menu navigasi. Kode HTML yang digunakan:

		<div class="header">
			<h1 class="judul">Belajar HTML</h1>
			<p class="tagline">Membuat Layout HTML</p>
			<ul class="menu">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>

<h1 class="judul">Belajar HTML</h1>

<p class="tagline">Membuat Layout HTML</p>

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

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

</ul>

</div>

#2.2 Pada element konten akan kita tambahkan beberapa element yaitu:

judul konten menggunakan tag <h2>,
meta data yang terdiri dari author dan tanggal publikasi menggunakan tag <p>,
isi konten terdiri atas 3 buah paragraf menggunakan element tag <p>

Kode HTML yang digunakan:

<div class="content">
	<h2>Judul Artikel</h2>
	<p class="author">Oleh <a href="#">Rino Safrizal</a> pada 17 November 2021</p>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, quia dolores excepturi. Ad voluptatem nesciunt provident commodi beatae. Voluptatum alias ab ipsa atque vitae odio iure accusamus laboriosam quibusdam, assumenda reprehenderit aperiam, adipisci nostrum fugit. Voluptas quas ipsum officiis dolor, numquam quos, unde ducimus odio animi repudiandae, temporibus alias praesentium esse delectus magnam nihil et est, error ad fuga. Laudantium obcaecati quis officiis est mollitia quibusdam explicabo fugit vel veniam esse non assumenda nisi facere ab, similique molestiae nulla nemo iusto alias quam quisquam nihil quod ratione in. Aliquam, inventore repudiandae tempora nihil in unde adipisci officia. Recusandae, eos perspiciatis!</p>
	<p>Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Voluptate obcaecati possimus eaque fugiat, labore assumenda sed eligendi repellat omnis, libero sequi in vel nesciunt enim, nisi aliquid! Quasi voluptatem ipsa quo recusandae vero, maxime eligendi, optio! Dolorum cupiditate laborum quae, quidem neque consequuntur quam iusto optio nam unde porro explicabo tenetur illo blanditiis ducimus voluptate voluptatem animi possimus est. Tempora, aut accusamus. Doloremque consectetur distinctio impedit maiores, sit atque maxime odio inventore libero nisi voluptate nam eaque ad laboriosam eum corrupti, numquam voluptas dolorem reprehenderit tempora vero minima, aspernatur. Natus, dicta accusantium consequuntur dolores, porro ipsum quibusdam veniam minima asperiores.</p>
</div>

<h2>Judul Artikel</h2>

<p class="author">Oleh <a href="#">Rino Safrizal</a> pada 17 November 2021</p>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, quia dolores excepturi. Ad voluptatem nesciunt provident commodi beatae. Voluptatum alias ab ipsa atque vitae odio iure accusamus laboriosam quibusdam, assumenda reprehenderit aperiam, adipisci nostrum fugit. Voluptas quas ipsum officiis dolor, numquam quos, unde ducimus odio animi repudiandae, temporibus alias praesentium esse delectus magnam nihil et est, error ad fuga. Laudantium obcaecati quis officiis est mollitia quibusdam explicabo fugit vel veniam esse non assumenda nisi facere ab, similique molestiae nulla nemo iusto alias quam quisquam nihil quod ratione in. Aliquam, inventore repudiandae tempora nihil in unde adipisci officia. Recusandae, eos perspiciatis!</p>

<p>Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Voluptate obcaecati possimus eaque fugiat, labore assumenda sed eligendi repellat omnis, libero sequi in vel nesciunt enim, nisi aliquid! Quasi voluptatem ipsa quo recusandae vero, maxime eligendi, optio! Dolorum cupiditate laborum quae, quidem neque consequuntur quam iusto optio nam unde porro explicabo tenetur illo blanditiis ducimus voluptate voluptatem animi possimus est. Tempora, aut accusamus. Doloremque consectetur distinctio impedit maiores, sit atque maxime odio inventore libero nisi voluptate nam eaque ad laboriosam eum corrupti, numquam voluptas dolorem reprehenderit tempora vero minima, aspernatur. Natus, dicta accusantium consequuntur dolores, porro ipsum quibusdam veniam minima asperiores.</p>

</div>

#2.3 Untuk element footer kita gunakan tag <p>, kode HTML yang digunakan:

<div class="footer">
	<p>&copy; 2021 - Abu Gaza</p>
</div>

</div>

#3 Kita susun kode HTML di atas sehingga menjadi sebagai berikut:

<!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 1 Kolom</p>
			<ul class="menu">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
		<div class="content">
			<h2>Judul Artikel</h2>
			<p class="author">Oleh <a href="#">Rino Safrizal</a> pada 17 November 2021</p>
			<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, quia dolores excepturi. Ad voluptatem nesciunt provident commodi beatae. Voluptatum alias ab ipsa atque vitae odio iure accusamus laboriosam quibusdam, assumenda reprehenderit aperiam, adipisci nostrum fugit. Voluptas quas ipsum officiis dolor, numquam quos, unde ducimus odio animi repudiandae, temporibus alias praesentium esse delectus magnam nihil et est, error ad fuga. Laudantium obcaecati quis officiis est mollitia quibusdam explicabo fugit vel veniam esse non assumenda nisi facere ab, similique molestiae nulla nemo iusto alias quam quisquam nihil quod ratione in. Aliquam, inventore repudiandae tempora nihil in unde adipisci officia. Recusandae, eos perspiciatis!</p>
			<p>Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Voluptate obcaecati possimus eaque fugiat, labore assumenda sed eligendi repellat omnis, libero sequi in vel nesciunt enim, nisi aliquid! Quasi voluptatem ipsa quo recusandae vero, maxime eligendi, optio! Dolorum cupiditate laborum quae, quidem neque consequuntur quam iusto optio nam unde porro explicabo tenetur illo blanditiis ducimus voluptate voluptatem animi possimus est. Tempora, aut accusamus. Doloremque consectetur distinctio impedit maiores, sit atque maxime odio inventore libero nisi voluptate nam eaque ad laboriosam eum corrupti, numquam voluptas dolorem reprehenderit tempora vero minima, aspernatur. Natus, dicta accusantium consequuntur dolores, porro ipsum quibusdam veniam minima asperiores.</p>
		</div>
		<div class="footer">
			<p>&copy; 2021 - Abu Gaza</p>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Belajar HTML</title>

</head>

<body>

<h1 class="judul">Membuat Website</h1>

<p class="tagline">Membuat Layout HTML 1 Kolom</p>

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

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

</ul>

</div>

<h2>Judul Artikel</h2>

<p class="author">Oleh <a href="#">Rino Safrizal</a> pada 17 November 2021</p>

</div>

</div>

</body>

</html>

Hasil kode HTML pada web browser tanpa menggunakan CSS:

Kode CSS

Kode CSS berfungsi untuk memberikan style atau gaya dari sebuah website. Dengan kode CSS, satu buah halaman HTML yang sama bisa memiliki lebih dari satu style yang berbeda. Sekarang kita coba untuk memberikan style layout HTML diatas:

#1 Pertama-tama kita tambahkan CSS reset untuk menghilangkan konfigurasi default setiap element HTML. Selain itu, dengan CSS reset memudahkan kita memanipulasi setiap element HTML sesuai selera. Untuk memeret konfigurasi default element HTML, kita tambahkan tool CSS yang dibuat oleh Eric A. and Kathryn S. Meyer, dengan kode CSS berikut:

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

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

}

#2 Style pada element body:

font-family: sans-serif
background-color: #f3f3f3,
font color: #555:

body {
	font-family: sans-serif;
	background-color: #f3f3f3;
	color: #555;
}

body {

font-family: sans-serif;

background-color: #f3f3f3;

color: #555;

}

#3 Style pada element container:

lebar (width): 900px
margin: auto (posisi di tengah browser)

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

.container {

width: 900px;

margin: auto;

}

#4 Style pada element header:

background-color: aquamarine
padding atas kanan bawah kiri: 30px

Padding berfungsi mengatur jarak antara konten header dengan border

.header {
	background-color: aquamarine;
	padding: 30px;
}

.header {

background-color: aquamarine;

padding: 30px;

}

#4.1 Style pada element judul:

font-size: 40px
font-weight: bold (huruf tebal)
margin-bottom: 10px (jarak antara judul dengan tagline)

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

.header .judul {

font-size: 40px;

font-weight: bold;

margin-bottom: 10px;

}

#4.2 Style pada element tagline:

font-size: 18px
margin-bottom: 40px (jarak antara tagline dengan menu)

.header .tagline {
	font-size: 18px;
	margin-top: 40px;
}

.header .tagline {

font-size: 18px;

margin-top: 40px;

}

#4.3 Style pada element menu:

display: inline-block

Fungsi property display dengan value inline-block pada tag <ul> dan <li> adalah mengubah posisi default menu dari vertikal (berupa block) menjadi horizontal (berupa inline).

.header ul li {
	display: inline-block;
	margin-top: 40px;
}

.header ul li {

display: inline-block;

margin-top: 40px;

}

#4.4 Style pada anchor text:

text-decoration: none
font size: 16px
font color: white
padding: 7px
background-color: dodgerblue

property text-decoration dengan value none berfungsi menghilangkan style default (warna biru dan underline) pada anchor text. Padding berfungsi mengatur jarak antara konten dengan border.

.header a {
	text-decoration: none;
	font-size: 16px;
	color: white;
	padding: 7px;
	background-color: dodgerblue;
}

.header a {

text-decoration: none;

font-size: 16px;

color: white;

padding: 7px;

background-color: dodgerblue;

}

#4.5 Memberikan efek ketika mouse diarahkan ke anchor text atau tombol menu navigasi, gunakan pseudo :hover pada selector a:

background-color: tomato
font color: black

.header a:hover {
	background-color: tomato;
	color: white;
}

.header a:hover {

background-color: tomato;

color: white;

}

#5 Style pada element content untuk menempatkan artikel atau isi website:

background-color: lightcyan
padding: 30px

.content {
	background-color: lightcyan;
	padding: 30px;
}

.content {

background-color: lightcyan;

padding: 30px;

}

#5.1 Style pada element judul artikel:

font-size: 26px
font-weight: bold
margin-bottom (jarak antara judul artikel dengan meta data)

.content h2 {
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 15px;
}

.content h2 {

font-size: 26px;

font-weight: bold;

margin-bottom: 15px;

}

#5.2 Style pada element meta data:

font-size: 10px (lebih kecil dari ukuran judul dan isi artikel)
margin-bottom: 15px (jarak antara meta data dengan paragraf pertama)

.content .author {
	font-size: 10px;
	margin-bottom: 15px;
}

.content .author {

font-size: 10px;

margin-bottom: 15px;

}

#5.3 Style pada element artikel:

ukuran font: 13px
line-height: 18px
font-family: courier, monospace
margin-bottom: 10px (jarak antar paragraf)

.content p {
	font: 13px/18px courier, monospace;
	margin-bottom: 10px;
}

.content p {

font: 13px/18px courier, monospace;

margin-bottom: 10px;

}

#6 Style pada element footer:

padding atas/bawah dan kanan/kiri: 10px 0px
background-color: darkgrey
font color: black
text-align: center (posisi konten)

.footer {
	padding: 10px 0px 10px 0px;
	background-color: darkgrey;
	color: black;
	text-align: center;
}

.footer {

padding: 10px 0px 10px 0px;

background-color: darkgrey;

color: black;

text-align: center;

}

#7 Kita susun kode CSS di atas sehingga menjadi sebagai berikut:

/* 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: arial, sans-serif;
	background-color: #f3f3f3;
	color: #555;
}
.container {
	width: 900px;
	margin: auto;
	background-color: #fff;
}
.header {
	background-color: aquamarine;
	padding: 30px;
} 
.header .judul {
	font-size: 40px;
	font-weight: bold;
	margin-bottom: 10px;
}
.header .tagline {
	font-size: 18px;
	margin-bottom: 40px;
}
.header ul li {
	display: inline-block;
}
.header a {
	text-decoration: none;
	font-size: 16px;
	color: white;
	padding: 7px;
	background-color: dodgerblue;
} 
.header a:hover {
	background-color: tomato;
	color: white;
}
.content {
	background-color: lightcyan;
	padding: 30px;
}
.content h2 {
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 15px;
}
.content .author {
	font-size: 10px;
	margin-bottom: 15px;
}
.content p {
	font: 13px/18px courier, monospace;
	margin-bottom: 10px;
}
.footer {
	padding: 10px 0px 10px 0px;
	background-color: darkgrey;
	color: black;
	text-align: center;
}

100

101

102

103

104

105

106

107

108

109

110

111

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

background-color: #f3f3f3;

color: #555;

}

.container {

width: 900px;

margin: auto;

background-color: #fff;

}

.header {

background-color: aquamarine;

padding: 30px;

}

.header .judul {

font-size: 40px;

font-weight: bold;

margin-bottom: 10px;

}

.header .tagline {

font-size: 18px;

margin-bottom: 40px;

}

.header ul li {

display: inline-block;

}

.header a {

text-decoration: none;

font-size: 16px;

color: white;

padding: 7px;

background-color: dodgerblue;

}

.header a:hover {

background-color: tomato;

color: white;

}

.content {

background-color: lightcyan;

padding: 30px;

}

.content h2 {

font-size: 26px;

font-weight: bold;

margin-bottom: 15px;

}

.content .author {

font-size: 10px;

margin-bottom: 15px;

}

.content p {

font: 13px/18px courier, monospace;

margin-bottom: 10px;

}

.footer {

padding: 10px 0px 10px 0px;

background-color: darkgrey;

color: black;

text-align: center;

}

Layout website pada web browser setelah ditambahkan kode CSS:

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

5 1 vote

Article Rating

4 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

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

2 years ago

[…] Membuat Layout Website 1 Kolom Konten/Artikel […]

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

2 years ago

[…] Membuat Layout Website 1 Kolom Artikel […]

Asep Jamil

1 year ago

terimakasih mas… semoga kebaikanya di balas Alloh.

abugaza_

Author

Reply to Asep Jamil

1 year ago

Aamiin, sama-sama Mas.

Layout Website Sederhana 1: 1 Kolom Artikel

Bagikan halaman ini:

Related