Kali ini kita akan melanjutkan tutorial membuat website sederhana HTML CSS dari tutorial sebelumnya (Part 1), pastikan kalian sudah membaca Part 1 sebelum memulai tutorial dibawah ini.

Belajar membuat sebuah bagian / kolom yang didalamnya akan dibagi menjadi dua, misalnya pada sebuah kotak artikel disarankan akan dibagi menjadi dua bagian. Pada part kedua ini kita membahas sampai tuntas tentang membuat 2 bagian kanan dan kiri di dalam satu kotak atau didalam tempat yang sama menggunakan overflow: hidden.

Pertama, silahkan buat bungkus utamanya. Disini saya contoh kan dengan <div style=””> dan style nya memiliki lebar 100%, overflow hidden. Didalam div tersebut akan saya beri h1 terlebih dahulu sebagai judul, disini saya kasih judulnya “Artikel Disarankan” dan h1 ini akan diterapkan di tengah maka berikan style di CSS nya dengan text-align: center;.

Selanjutnya, karena kita akan bagi menjadi 2 kolom maka saya akan buat 2 div lagi yaitu div untuk sebelah kiri dan div untuk sebelah kanan. Pada masing-masing kolom nanti akan diterapkan gambar, makanya pada kolom ini terdapat tag img untuk memasukkan gambar. Silahkan tentukan gambar yang ingin kalian gunakan.

Selain gambar, ada juga judul untuk artikelnya. Misalnya disini saya akan tampilkan artikel dengan judul “Tutorial Bagi Pemula“, untuk judulnya ini saya gunakan h3 saja supaya tidak terlalu besar.

Setelah itu, kita terapkan kutipan atau excerpt menggunakan tag p saja. Untuk excerpt ini silahkan terapkan deskripsi dari isi blog tersebut dan silahkan sesuaikan panjang kalimatnya supaya terlihat rapih.

Jangan lupa juga berikan link untuk mengarahkan bagian ini ke artikel tersebut dengan tulisan “Baca Selengkapnya / Read More” agar para pengunjung nanti bisa membaca artikel itu secara keseluruhan dengan cara mengklik linknya.

Beginilah code yang saya buat untuk penjelasan diatas:

<div class="recomended">
	<h1>Artikel Disarankan</h1>
		<div class="recomendedKiri">
			<img src="images/dua.jpg">
			<h3><a href="single-post.html">Tutorial Bagi Pemula</a></h3>
			<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
		</div><!--akhir class recomendedKiri-->
		<div class="recomendedKanan">
			<img src="images/tiga.jpg">
			<h3><a href="">Hi, There</a></h3>
			<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href=""><strong>Baca Selengkapnya</strong></a></p>
		</div><!--akhir class recomendedKanan-->
	</div><!--akhir class recomended-->

Perhatikan di dalam div class recomended terdapat 2 div lagi yaitu div class recomendedKiri dan div clas recomendedKanan, 2 div tersebut akan kita terapkan bersampingan (kiri dan kanan) didalam div utama nya yaitu div class recomended sebagai pembungkus.

Seperti yang saya jelaskan diatas, didalam div kiri dan kanan ini akan kita terapkan gambar, judul dan excerpt. Maka didalamnya terdapat tag img, h3 sebagai judul dan p sebagai excerpt.

Silahkan masukkan gambar yang ingin kalian gunakan, masukkan judul dan masukkan juga excerpt. Sesuaikan semuanya agar terlihat menarik dan rapih.

Selanjutnya silahkan terapkan code berikut pada file CSS yang sudah disediakan seperti yang dijelaskan pada part 1 (style.css):

/* class recomended */
.recomended {
	width: 100%;
	overflow: hidden;
	background-color: #a9a9a9;
	margin-top: 5px;
}
.recomended h1 {
	text-align: center;
}
.recomended .recomendedKiri {
	width: 435px;
	float: left;
	margin: 10px 5px 5px 10px;
}
.recomended img {
	width: 150px;
	height: 100px;
	float: left;
	margin: 0 5px 5px 0;
	box-shadow: 2px 2px 2px #333;
}
.recomended p {
	text-align: justify;
}
.recomended .recomendedKanan {
	width: 435px;
	margin: 10px 10px 5px 5px;
	float: left;
}
.recomended a {
	text-decoration: none;
	color: #140fcd;
}
.recomended a:hover {
	color: #000;
}
.recomended h3 {
	color: #140fcd;
}
/* akhir class recomended */

Perhatikan pada .recomended saya terapkan overflow:hidden, apa fungsinya ?

Yaitu untuk menghilangkan bagian bawaan div pada class tersebut karena didalamnya kita akan menerapkan 2 div / di kolom bukan 1 kolom seperti bawaannya div.

Tapi, jangan lupa pada recomendedKiri diterapkan float:left agar dia mengapung ke kiri dan secara otomatis si recomended kanan akan ikut disampingnya, pastikan juga lebarnya cukup untuk 2 kolom karena kalo lebih salah satu akan turun kebawah (tidak sejajar).

Perhatikan pada gambar (img), silahkan atur float:left agar nanti gambar dan excerpt bersampingan. Jika tidak ingin bersampingan (gambar diatas dan excertp dibawah) maka jangan atur img dengan float:left.

Silahkan Save dan lihat hasilnya di browser. (lihat gambar)

Pada tag img pun saya terapkan box shadow dan margin. Fungsi box–shadow untuk memberikan bayangan pada pinggiran gambar, silahkan lihat disini untuk mempelajari selengkapnya tentang memberi bayangan pada gambar. Sedangkan fungsi margin pada tag img ini untuk memberikan jarak dengan excerpt agar tidak terlalu rapat karena gambar dan excerpt ini saya buat saling bersampingan.

Masih bingung ? Lihat : Video Tutorial Cara Membuat Website Sendiri Part 2 / 11.

Kesimpulan

Pada part 2 ini kita telah mempelajari cara membuat 2 kolom didalam div, membuat gambar dan text bersampingan, membuat link untuk read more dan hal lainnya yang dijelaskan diatas. Semoga bisa menjadi ilmu baru untuk temen-temen yang belum tau. Silahkan sesuaikan warna pada tutorial diatas sesuai selera, jangan lupa tentukan juga excerpt nya agar terlihat menarik dan rapih.

Maka sekarang keseluruhan code HTML CSS dari part 1 – part 2 seperti ini:

HTML

<!doctype html>
<html>
	<head>
		<title>Membuat Website - HTML Rio Bermano</title>
	<link href="css/style.css" type="text/css" rel="stylesheet">
	</head>
<body>
	<header>
		<img src="images/satu.jpg">
	</header>
	<menu>
		<li><a href="">Home</a></li>
		<li><a href="">Download</a></li>
		<li><a href="">Tutorial</a></li>
		<li><a href="">Software</a></li>
		<li><a href="">Design</a></li>
		<li><a href="">Support</a></li>
		<li><a href="contoh-halaman.html">Kontak</a></li>
	</menu>
	<div class="recomended">
	<h1>Artikel Disarankan</h1>
		<div class="recomendedKiri">
			<img src="images/dua.jpg">
			<h3><a href="single-post.html">Tutorial Bagi Pemula</a></h3>
			<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
		</div><!--akhir class recomendedKiri-->
		<div class="recomendedKanan">
			<img src="images/tiga.jpg">
			<h3><a href="">Hi, There</a></h3>
			<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href=""><strong>Baca Selengkapnya</strong></a></p>
		</div><!--akhir class recomendedKanan-->
	</div><!--akhir class recomended-->
</body>
</html>

CSS

* {margin: 0; padding: 0;}
body {
	width: 900px;
	margin: auto;
}

header {
	width: 900px;
	height: 250px;
}
header img {
	width: 900px;
	height: 250px;
}

menu {
	width: 880px;
	height: 30px;
	background-color: blue;
	padding: 10px;
	margin-top: 5px;
}

menu li {
	list-style: none;
	float: left;
	margin-right: 20px;
	margin-top: 5px;
	color: #fff;
}
menu li a {
	text-decoration: none;
	color: #fff;
}
menu li a:hover {
	color: orange;
}

/* class recomended */
.recomended {
	width: 100%;
	overflow: hidden;
	background-color: #a9a9a9;
	margin-top: 5px;
}
.recomended h1 {
	text-align: center;
}
.recomended .recomendedKiri {
	width: 435px;
	float: left;
	margin: 10px 5px 5px 10px;
}
.recomended img {
	width: 150px;
	height: 100px;
	float: left;
	margin: 0 5px 5px 0;
	box-shadow: 2px 2px 2px #333;
}
.recomended p {
	text-align: justify;
}
.recomended .recomendedKanan {
	width: 435px;
	margin: 10px 10px 5px 5px;
	float: left;
}
.recomended a {
	text-decoration: none;
	color: #140fcd;
}
.recomended a:hover {
	color: #000;
}
.recomended h3 {
	color: #140fcd;
}
/* akhir class recomended */

Jika dirasa sudah paham part 2 ini, silahkan lajurkan ke Part 3 atau tinggalkan komentar jika ada yang ingin ditanyakan.

Selamat mencoba !