›

Membuat Layout Website Sederhana (Part 1)

Ditulis oleh 2024/04/30 Tambah Komentar

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.

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

  • Layout website 1: 1 kolom untuk artikel
  • Layout website 2 terdiri dari: 2 kolom (1 kolom artikel, 1 kolom sidebar kiri)
  • Layout website 3 teridir dari: 3 kolom (2 kolom artikel, 1 kolom sidebar kanan)
  • Layout website 4 terdiri dari: 4 kolom (2 kolom artikel, 2 kolom sidebar kiri-kanan) & header image
  • Layout website 5 terdiri dari: 3 kolom (1 kolom artikel, 2 kolom sidebar kiri-kanan) dan 3 kolom footer

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

Layout Website Sederhana 1: 1 Kolom Artikel


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>

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

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

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

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

<div class="footer">
	<p>&copy; 2021 - Abu Gaza</p>
</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>

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

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

#3 Style pada element container:

  • lebar (width): 900px
  • margin: auto (posisi di tengah browser)
.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;
}

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

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

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

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

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

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

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

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

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

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

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

Layout website pada web browser setelah ditambahkan kode CSS:

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

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel