Membuat Model Post Artikel Keren

Pada kesempatan kali ini kita akan membuat project sederhana yang sering digunakan dalam website, yaitu Model Post Artikel, dimana pada tutorial ini kita menggunakan HTML dan CSS. Pada tutorial sebelumnya kita sudah mengenal apa itu CSS, Selektor, Property, Value dan cara menghubungkan HTML dan CSS, saya harap teman-teman sudah mengerti semua tentang tutorial tersebut. Berikut adalah hasil yang akan kita peroleh dari project ini :

Dibawah ini adalah kode HTML dan CSS yang sudah saya buat untuk model post artikel pada website, untuk lebih jelas nya teman-teman mari kita buat struktur directory nya seperti berikut ini :

Jika teman-teman sudah membuat Directory seperti gambar diatas, kemudian untuk code HTML nya teman-teman dapat menulisnya seperti dibawah ini dan disimpan di dalam Folder LatihanWeb dengan nama index.html

<!DOCTYPE html>

<html>

<head>

<title>Point Website</title>

</head>

<body>

</a>

<li>

</li>

<li>

<a href="#">Pemograman</a>

</li>

<li>

<a href="#">CSS Dasar</a>

</li>

</ul>

<h2>

Mengenal Aturan dan Cara Penulisan Kode CSS

</h2>

<p class="post_info"><a href="#">eLMarco</a> on sep 23rd 2016 with<a href="#"> 44 comments</a></p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit .

</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

</p>

</div>

</div>

</article>

</body>

</html>

Setelah teman-teman menulis code HTML diatas kita harus membuat CSS-nya untuk mengatur tampilan dari code HTML diatas. Untuk kode CSS nya seperti dibawah ini dan teman-teman dapat menyimpan nya dalam Folder Style dengan nama style.css

body {

width: 600px;

margin: 20px auto;

font-family: sans-serif;

}

article h2 {

font-size: 39px;

line-height: 45px;

margin-top: 0px;

margin: 0px;

letter-spacing: -1px;

}

a {

color: #28b39b;

font-size: 14px;

}

a:hover {

color: black;

}

p {

font-size: 14px;

line-height: 21px;

}

article img {

float: left;

margin-right: 30px;

width: 200px;

}

.continue {

float: right;

}

.continue:after {

content: ')';

}

.continue:before {

content: '(';

}

.meta {

padding-left: 0px;

margin: 0px 0px 8px;

}

.meta a, .post_info a {

font-style: italic;

font-size: 14px;

}

.meta li:after {

content: '\\';

padding: 0 5px;

}

.meta li:last-child:after {

content: none;

}

.meta li {

display: inline;

}

.meta li a{

text-decoration: none;

}

.preview {

float: right;

width: 370px;

}

.post_info {

background:#f3f3f3;

color: #999;

padding: 3px;

float: left;

font-size: 14px;

}

.post_info a {

color: #999;

text-decoration: none;

}

.body {

clear: both;

color: #575757;

}

Oke kita sudah selesai membuat code HTML dan CSS nya untuk gambar teman-teman bebas mau gambar apa saja yang jelas di simpan di Folder image dan extensi nya harus jpg, karena pada code HTML diatas kita menggunakan <img src="image/bg.jpg" alt="Keterangan dari gambar" /> jika teman-teman ingin gambar nya yang extensi PNG teman-teman dapat mengubah code HTML nya seperti berikut <img src="image/bg.png" alt="Keterangan dari gambar" />. Sedikit penjelasan dari saya mengenai code HTML ini (src="image/bg.png" alt="Keterangan dari gambar" />) code tersebut menjelaskan tetang cara memanggil gambar dalah folder “image” yang nama dari gambar tersebut adalah “bg.png” sedangkan “alt” saya kira teman-teman sudah mengerti, yaitu tentang keterangan dari gambar yang kita panggil.

Pada code HTML di atas kita menghubungkan CSS nya mengunakan external link, jika teman-teman belum mengeti tentang cara menghubungkan CSS dengan HTML saya sudah buat tutorial nya disini.

Sekian tutorial pembuatan Model Post Artikel ini semoga dapat membantu teman-teman dalam membuat webiste, terimakasih atas kunjungan nya..