Tugas Membuat Web Berita
Nama: Donny Fitrado
2. css
Kemudian, berikut ini adalah screenshotnya:
Sekian, dan terima kasih.
NRP: 05111740000171
Kelas: PWeb C
Saya membuat sebuah sample web berita dengan menggunakan html dan css. Berikut ini adalah code nya:
1. html
<!DOCTYPE html>
<html>
<head>
<title>Berita Terkini - Donnews</title>
<link rel="stylesheet" type="text/css" href="belajar.css">
</head>
<body>
<div class="menu">
<ul>
<li><a href="berita.html">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="header">
<div class="jarak">
<h1><p>Donnews</p></h1>
</div>
</div>
<div class="content">
<div class="jarak">
<!-- kiri -->
<div class="kiri">
<!-- blog -->
<div class="border">
<div class="jarak">
<br/>
<table width="800">
<tr>
<td><img src="bobotoh.jpg" width="140%"></td>
<td width="90"></td>
<td><h2>Buntut Tewasnya Haringga, Bobotoh Diingatkan soal Hakikat Sepak Bola </h2>
<p>Jajaran petinggi Polres - TNI Kabupaten Garut, Jawa Barat, mengumpulkan Bobotoh dan Viking, seluruh distrik Garut, untuk melakukan pembinaan para pendukung setia klub Persib Bandung, yang berasal dari kota dodol.... <font color="navy"><u><a href="#">Read more</a><u></font></p>
</td>
</tr>
</table>
</div>
</div>
<!-- end blog -->
<!-- blog -->
<div class="border">
<div class="jarak">
<br/>
<table width="800">
<tr>
<td><img src="pilpres 19.jpg" width="140%"></td>
<td width="90"</td>
<td><h2>Hoaks Merajalela Jelang Pilpres 2019, Siapa Memancing di Air Keruh?</h2>
<p>Kabar-kabar terkait Pilpres 2019 ini mungkin sedang beredar di aplikasi perpesanan maupun media sosial yang Anda miliki: percakapan mesra yang konon dilakukan seorang cawapres dengan artis cantik, Israel yang kabarnya mendukung pasangan calon tertentu, hingga hasil-hasil survei yang tak jelas siapa penyelenggara dan metodenya......<font color="navy"><u><a href="#">Read more</a><u></font></p>
</td>
</tr>
</table>
</div>
</div>
<!-- end blog -->
<div class="border">
<div class="jarak">
<br/>
<table width="800">
<tr>
<td align="center"><img src="ma perberat.jpg" width="145%"></td>
<td width="120"></td>
<td><h2>MA Perberat Hukuman Andi Narogong Jadi 13 Tahun</h2>
<p>Mahkamah Agung (MA) memperberat vonis Andi Agustinus alias Andi Narogong menjadi 13 tahun penjara dalam kasus korupsi e-KTP. Putusan itu lebih tinggi dibandingkan di tingkat banding, yaitu 11 tahun penjara.... <font color="navy"><u><a href="#">Read more</a><u></font></p>
</td>
</tr>
</table>
</div>
</div>
<!-- end blog -->
<div class="border">
<div class="jarak">
<br/>
<table width="800">
<tr align="center">
<td><font size="4%"><a href="#" class="undecor" style="color:navy">Read more news</a></font></td>
</tr> s
</table>
</div>
</div>
<!-- end blog -->
</div>
<!-- kiri -->
<!-- kanan -->
<div class="kanan">
<div class="jarak">
<h2>Categories</h2>
<hr/>
<p><a href="#" class="undecor" style="color:#FFFFFF">Technology</a></p>
<p><a href="#" class="undecor" style="color:#FFFFFF">Sports</a></p>
<p><a href="#" class="undecor" style="color:#FFFFFF">Politics</a></p>
<p><a href="#" class="undecor" style="color:#FFFFFF">Health</a></p>
<p><a href="#" class="undecor" style="color:#FFFFFF">Travel</a></p>
<p><a href="#" class="undecor" style="color:#FFFFFF">Entertainment</a></p>
<p><a href="#" class="undecor" style="color:#FFFFFF">Money</a></p>
<p><a href="#" class="undecor" style="color:#FFFFFF">Kids</a></p>
</div>
</div>
<!-- kanan -->
</div>
</div>
<div class="footer">
<div class="jarak">
<p align="right">Copyright 2018</p>
</div>
</div>
</body>
</html>
2. css
h1 {
align-content: left;
}
h2 {
font-family: calibri;
}
p {
font-family: calibri;
}
.header {
width: 90%;
margin: auto;
height: 120px;
line-height: 120px;
background: #FA8072;
color: #000000;
font-family: calibri;
}
.content {
width: 100%;
margin: auto;
height: 890px;
padding :0.1px;
background: #FFFFFF;
color: #333;
}
.kiri {
width: 70%;
float: left;
margin: auto;
background: #FFFFFF;
height: 500px;
}
.kanan {
width: 200px;
height: 850px;
margin-right: 2pc;
margin-top: 2;
background: #E9967A;
float: right;
color: #FFFFFF;
}
.border {
background-color: #FFFFFF;
border: 4px;
margin-top: 1 pc;
padding-bottom: 1pc;
padding-left: 2pc;
padding-right: 2pc;
}
.undecor {
text-decoration: none;
}
.footer {
width: 90%;
margin: auto;
height: 40px;
line-height: 40px;
background: #CD5C5C;
color: #FFFFFF;
}
.jarak {
padding: 0 2pc;
}
.menu {
background-color: #FFA07A;
height: 50px;
line-height:50px;
position: relative;
width: 90%;
margin: 0 auto;
padding: 0;
}
.menu ul {
list-style: none;
}
.menu ul li a {
float: left;
width: 70px;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
font-family: calibri;
font-style: italic;
}
.menu ul li a:hover {
background-color: #74C599;
display: block;
}
Kemudian, berikut ini adalah screenshotnya:
Sekian, dan terima kasih.
Web beritanya bagus, nice job, itu bikinnya berapa lama ya
ReplyDelete