Laman Berita
Laman Berita Menggunakan HTML dan CSS
Tugas PWEB C
Kali ini saya akan membuat laman berita menggunakan HTML dan CSS. Berikut adalah source code dan hasil akhirnya. Saya menggunakan aplikasi Sublime Text 3 dan Xamp.
1. Source Code index.html
<html>
<head>
<title>Belajar Membuat Layout Dengan HTML dan CSS</title>
<link rel = "stylesheet" href = "custom.css"/>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="signindiv">
Sign In
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search"/>
</div>
</div>
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
<p id="newsheader">NEWS<span id = "uk">INDONESIA</span></p>
<div id="rss">
IDN
</div>
<div class="break"></div>
<div id="topicmenu">
<ul>
<li>Home</li>
<li>World</li>
<li class="selected">IDN</li>
<li>England</li>
<li>N. Ireland</li>
<li>Scotland</li>
<li>Wales</li>
<li>Business</li>
<li>Politics</li>
<li>Health</li>
<li>Education</li>
<li>Sci/Environment</li>
<li>Technology</li>
<li style="border-right: none">Entertainment & Arts</li>
</ul>
</div>
</div>
</div>
<div class="break"></div>
<div id="content">
<div class="fixedwidth">
<p><span class="date">23 September 2018</span> Last Updated at 17:34</p>
<h1>Ginting Raih Juara China Open 2018</h1>
<img class="headlineimage" src="images/Ginting.jpg"/>
<div class="newsitem">
<p>Pebulu tangkis tunggal putra Indonesia, Anthony Sinisuka Ginting berhasil meraih gelar juara China Open 2018</p>
<p class="links"><a class="video" href="">Bagaimana keseruan perebutan juara?</a><br/>
<a class="video" href="">Berapa skor akhir pertandingan?</a></br>
<a class="video" href="">Siapa lawan Ginting di final?</a></br>
<a href="">Bagaimana menurut Ginting lawannya tsb?</a></br>
<a class="video" href="">Bagaimana perasaan Ginting?</a>
</p>
</div>
<div id="watchlisten">
<h2>Watch/Listen</h2>
<div class="wlblock">
<img src="images/lalala1.jpg">
<p><a href="">Titanic letter could fetch $100.000</a></p>
</div>
<div class="wlblock">
<img src="images/lalala1.jpg">
<p><a href="">Cameron defends 'Muppet' remark</a></p>
</div>
<div>
<ul>
<li class="bb"><a href="">MENU</a></li>
<li class="bb"><a href="">Radio 5 Live</a></li>
<li><a href="">Osborne questioned on budget</a></li>
</ul>
</div>
</div>
<div class="break"></div>
<div id="content2">
<div class="fixedwidth">
<p><span class="date2">23 September 2018</span> Last Updated at 17:34</p>
<h1>Jokowi No.1 Prabowo No.2, Pilihanmu?</h1>
<img class="headlineimage2" src="images/Presiden.jpg"/>
<div class="newsitem2">
<p>Pasangan Jokowi-Ma'ruf mendapat no.urut 1 dan pasangan Prabowo-Sandi mendapat no.urut 2 sebagai peserta Pemilu Presiden 2019</p>
<p class="links2"><a class="video" href="">Bagaimana persiapan pilpres 2019?</a><br/>
<a class="video2" href="">Kapan pilpres 2019 diselenggarakan?</a></br>
<a class="video2" href="">Bagaimana perasaan Jokowi mendapat no.urut 1?</a></br>
<a href="">Bagaimana perasaan Prabowo mendapat no.urut 2?</a></br>
<a class="video2" href="">Siapa kira-kira pemenang pemilu kali ini?</a>
<br>
</p>
</div>
<div id="watchlisten">
<h2>Trending Topic</h2>
<div class="wlblock">
<img src="images/Cie.jpg">
<p><a href="">Ginting taklukan China Open 2018</a></p>
</div>
<div class="wlblock">
<img src="images/Jabat.jpeg">
<p><a href="">Jokowi-Prabowo saat deklarasi damai</a></p>
</div>
</div>
</div>
<div class="break"></div>
<div id="content2">
<div class="fixedwidth2">
<p><span class="date2">19 September 2018</span> Last Updated at 17:34</p>
<h1>CPNS 2018</h1>
<img class="headlineimage2" src="images/CPNS.jpg"/>
<div class="newsitem2">
<p>Kementerian Pendayagunaan Aparatur Negara dan Reformasi Birokrasi (Kemenpan RB) menyatakan pendaftaran CPNS dibuka sekarang</p>
<p class="links2"><a class="video" href="">Bagaimana antusias CPNS 2018?</a><br/>
<a class="video2" href="">Bagaimana alur pendaftarannya?</a></br>
<a class="video2" href="">Bidang apa saja yang dibuka di CPNS kali ini?</a></br>
<a href="">Bidang apa yang paling diminati?</a></br>
<a class="video2" href="">Berapa CPNS yang akan diterima?</a>
<br>
<br>
<br>
</p>
</div>
</div>
<div class="break"></div>
<div id="content2">
<div class="fixedwidth2">
<p><span class="date2">19 September 2018</span> Last Updated at 17:34</p>
<h1>Wajah "Resmi" Smartphone Nokia 7.1 Plus</h1>
<img class="headlineimage2" src="images/HP.jpg"/>
<div class="newsitem2">
<p>Setelah Nokia 6.1 Plus hadir di Indonesia awal September, HMD Global bersiap merilis smartphone Nokia 7.1 Plus</p>
<p class="links2"><a class="video" href="">Fitur apa saja yang dihadirkan Nokia 7.1 Plus?</a><br/>
<a class="video2" href="">Berapa harganya?</a></br>
<a class="video2" href="">Apa keunggulan dari Nokia 6.1 Plus?</a></br>
<a href="">Apa kelemahannya?</a></br>
<a class="video2" href="">Bagaimana prediksi pasaran?</a>
<br>
<br>
<br>
</p>
</div>
</div>
<div class="break"></div>
<div id="content2">
<div class="fixedwidth2">
<p><span class="date2">19 September 2018</span> Last Updated at 17:34</p>
<h1>5Superhero Wanita DC Kolaborasi Di Film "Bird of Prey"</h1>
<img class="headlineimage2" src="images/Superhero.jpg"/>
<div class="newsitem2">
<p>Warner Bros dan DC Films siap untuk bangkit dari kegagalan film "Justice League" dalam waktu dekat ini</p>
<p class="links2"><a class="video" href="">Kapan film "Bird of Prey" akan rilis?</a><br/>
<a class="video2" href="">Siapa saja yang membintangi film ini?</a></br>
<a class="video2" href="">Apa maksud dari judul "Bird of Prey"?</a></br>
<a href="">Bagaimana sinopsisnya?</a></br>
<a class="video2" href="">Bagaimana harapannya untuk film ini?</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
2. Source code custom.css
body {
margin: 0;
font-family: arial,helvetica,sans-serif;
}
#topbar {
background-color: #7A0000;
width: 100%;
height: 40px;
color: white;
}
.fixedwidth{
width: 1050px;
margin: 0 auto;
}
#signindiv{
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 10px 20px 12px 20px;
float: left;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 10px 20px 12px 20px;
float: left;
}
#searchdiv {
float: left;
padding: 5px 0 0 10px;
}
#searchdiv input {
height: 25px;
border: none;
font-size: 0.9em;
padding-left: 10px;
}
.break {
clear:both;
}
#newsbar {
background-color: #990000;
width: 100%;
height: 90px;
color: white;
}
#newsbar p {
margin: 0;
padding: 0;
padding-top: 10px;
float: left;
}
#newsheader {
font-size: 3em;
}
#uk {
font-size: 0.7em;
padding-left: 20px;
}
#rss {
float: right;
margin-top: 38px;
}
#topicmenu {
}
#topicmenu ul {
background-color: #3E0C0D;
padding: 5px 0 0 5px;
margin: 0;
height: 20px;
}
#topicmenu li {
list-style: none;
font-size: 0.8em;
border-right: 1px solid #990000;
padding: 0 6px 0 6px;
float: left;
background-color: none;
}
.selected {
background-color: #EDEDED;
color: #666666;
height: 20px;
position: relative;
top: -4px;
padding-top: 4px !important;
}
#content {
width: 100%;
color: #535353;
font-size: 0.75em;
}
.date {
font-weight: bold;
}
h1 {
color: #1F4F82;
font-size: 2.5em;
}
.headlineimage {
float: left;
}
.newsitem {
position: relative;
left: 10px;
top: -15px;
width: 240px;
float: left;
font-size: 1.1em;
}
.newsitem a {
color: #1F4F82;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.video {
background-image: url("images/unnamed.png");
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
.links {
line-height: 1.6em;
}
#watchlisten {
background-color: #EEEEEE;
float: right;
width: 316px;
position: relative;
top: -80px;
}
h2 {
color: #505050;
margin: 10px 0 10px 10px;
font-size: 1.8em;
}
.wlblock {
float: left;
background-color: #D1700E;
width: 157px;
border-right: 1px solid white;
bottom: 10px;
}
.wlblock a {
color: white;
}
.wlblock p {
margin: 9px 10px 8px 10px;
}
#watchlisten ul {
margin: 0;
padding: 0px 10px 10px 10px;
}
#watchlisten li {
list-style: none;
background-image: url("images/live.png");
background-repeat: no-repeat;
background-position: left center;
padding: 10px 0px 10px 50px;
font-size: 1.1em;
}
.bb {
border-bottom: 1px solid #DDDDDD;
}
#content2 {
width: 100%;
color: #535353;
font-size: 1em;
}
.date2 {
font-weight: bold;
}
h1 {
color: #1F4F82;
font-size: 2.5em;
}
.headlineimage2 {
float: left;
}
.newsitem2 {
position: relative;
left: 10px;
top: -15px;
width: 240px;
float: left;
font-size: 1.1em;
}
.newsitem2 a {
color: #1F4F82;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.video2 {
background-image: url("images/unnamed.png");
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}
.links2 {
line-height: 1.6em;
}
3. Hasil Akhir
Sekian, semoga bermanfaat.
Komentar
Posting Komentar