Pada kesempatan kali ini kita akan menciptakan project sederhana yang sering dipakai dalam website, yaitu Model Post Artikel, dimana pada tutorial ini kita memakai HTML dan CSS. Pada tutorial sebelumnya kita sudah mengenal apa itu CSS, Selektor, Property, Value dan cara menghubungkan HTML dan CSS, aku harap teman-teman sudah mengerti semua wacana tutorial tersebut. Berikut yakni hasil yang akan kita peroleh dari project ini :
Dibawah ini yakni arahan HTML dan CSS yang sudah aku buat untuk model post artikel pada website, untuk lebih terang nya teman-teman mari kita buat struktur directory nya menyerupai berikut ini :
Jika teman-teman sudah menciptakan Directory menyerupai gambar diatas, lalu untuk code HTML nya teman-teman dapat menulisnya menyerupai dibawah ini dan disimpan di dalam Folder LatihanWeb dengan nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Point Website</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<article>
<a href="#">
<img src="image/bg.jpg" alt=" Pada kesempatan kali ini kita akan menciptakan project sederhana yang sering dipakai dalam Membuat Model Post Artikel Keren" />
</a>
<div class="preview">
<ul class="meta">
<li>
<a href="#">Home</a>
</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>
<div class="body">
<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>
<a href="#" class="continue">Read More</a>
</div>
</article>
</body>
</html>
Setelah teman-teman menulis code HTML diatas kita harus menciptakan CSS-nya untuk mengatur tampilan dari code HTML diatas. Untuk arahan CSS nya menyerupai dibawah ini dan teman-teman sanggup 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 tamat menciptakan code HTML dan CSS nya untuk gambar teman-teman bebas mau gambar apa saja yang terang di simpan di Folder image dan extensi nya harus jpg, alasannya yakni pada code HTML diatas kita memakai <img src="image/bg.jpg" alt=" Pada kesempatan kali ini kita akan menciptakan project sederhana yang sering dipakai dalam Membuat Model Post Artikel Keren" /> bila teman-teman ingin gambar nya yang extensi PNG teman-teman sanggup mengubah code HTML nya menyerupai berikut <img src="image/bg.png" alt=" Pada kesempatan kali ini kita akan menciptakan project sederhana yang sering dipakai dalam Membuat Model Post Artikel Keren" />. Sedikit klarifikasi dari aku mengenai code HTML ini (src="image/bg.png" alt=" Pada kesempatan kali ini kita akan menciptakan project sederhana yang sering dipakai dalam Membuat Model Post Artikel Keren" />) code tersebut menjelaskan tetang cara memanggil gambar dalah folder “image” yang nama dari gambar tersebut yakni “bg.png” sedangkan “alt” aku kira teman-teman sudah mengerti, yaitu wacana keterangan dari gambar yang kita panggil.
Pada code HTML di atas kita menghubungkan CSS nya mengunakan external link, bila teman-teman belum mengeti wacana cara menghubungkan CSS dengan HTML aku sudah buat tutorial nya disini.
Sekian tutorial pembuatan Model Post Artikel ini biar sanggup membantu teman-teman dalam menciptakan webiste, terimakasih atas kunjungan nya..
No comments:
Post a Comment