NRP : 05111740000068
Kelas : Pemrograman Web C
Tugas : Membuat halaman berita dengan HTML dan CSS
Pada postingan kali ini, saya akan berbagi hasil tugas kelas Pemrograman Web C yaitu membuat halaman berita menggunakan HTML dan CSS berikut gambar halaman dan Source Code tersebut
1. Tampilan Halaman Berita
2. Source code
- HTML code
<!DOCTYPE html>
<html>
<head>
<title>The News</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>Rich Pplz News</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="trump.jpg" width="140%"></td>
<td width="90"></td>
<td><h2>Fake Photo Of Trump 'Rescuing' Flood Victims Goes Viral</h2>
<p>An edited photo that appears to show President Donald Trump floating in a raft, extending a red Make America Great Again hat to a flood victim, has gone viral in the wake of... <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="twitter.jpg" width="140%"></td>
<td width="90"></td>
<td><h2>Twitter releases new policy to ban dehumanizing speech</h2>
<p>Twitter has released a new moderation policy explicitly banning dehumanizing speech. In a post on Tuesday morning, Twitter executives Del Harvey and Vijaya Gadde described the proposed rule as part of an ongoing effort to promote... <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="japan.jpg" width="145%"></td>
<td width="120"></td>
<td><h2>Japan preschools using tablets to prep tots for digital age</h2>
<p>YOSHIKAWA, Japan - It's drawing time at this suburban nursery school in Japan, but instead of crayons, tiny fingers are tapping on colors on iPad screens and taking selfies. Digital schooling has arrived in this nation long known for... <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>
</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>
- CSS code
h1 {
align-content: left;
}
h2 {
font-family: calibri;
}
p {
font-family: calibri;
}
.header {
width: 90%;
margin: auto;
height: 120px;
line-height: 120px;
background: #00008B;
color: #FFFFFF;
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: #4169E1;
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: #4169E1;
color: #FFFFFF;
}
.jarak {
padding: 0 2pc;
}
.menu {
background-color: #4169E1;
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;
}
Sekian postingan saya pada kali ini.
