Tugas Web Berita

Di tugas kali ini saya mendapat tugas untuk membuat sebuah web berita, kami diberi contoh yaitu web www.techinasia.com

berikut hasil dari apa yang telah saya buat

kemudian berikut adalah source code nya :

HTML :

 <!DOCTYPE html>  
 <html lang="en" dir="ltr">  
  <head>  
   <meta charset="utf-8">  
   <title></title>  
   <link rel="stylesheet" href="inicss.css"/>  
  </head>  
  <body>  
   <div class="header">  
    <h1>PIAL ROSE NEWS</h1>  
   </div>  
     <ul>  
      <li><a class="active" href="#">News</a></li>  
      <li><a href="#">Jobs</a></li>  
      <li><a href="#">Companies</a></li>  
      <li><a href="#">Events</a></li>  
     </ul>  
   <div class = "content" >  
     <p style="font-family: Big John; font-size:20px;"><img class="newsimg" src="img/feetup.0.jpg"/>Roku will soon let you control its devices and Roku TVs with Google Assistant</p>  
     <p style="font-family: Slim Joe; font-size:17px;">Users will be able to launch specific streaming apps, control playback (play/pause/etc.), search for content, and “go home” by talking to a nearby Google Home speaker or to Assistant on their mobile phone.This also opens up a lot of potential for incorporating Roku hardware into your Google Assistant routines.</p>  
   </div>  
   <div class = "content" >  
     <p style="font-family: Big John; font-size:20px;"><img class="newsimg" src="img/belkin.jpg"/>Belkin’s Boostup wireless dock can charge three Apple devices at once</p>  
     <p style="font-family: Slim Joe; font-size:17px;">It’s not quite AirPower, but Belkin’s latest charging dock gives you a convenient way of charging up to three Apple devices simultaneously. The Boostup Wireless Charging Dock has a pair of elevated wireless charging pads to power your iPhone and Apple Watch, and a USB Type-A port for charging a third device, like an AirPods case.</p>  
   </div>  
   <div class = "content">  
     <p style="font-family: Big John; font-size:20px;"><img class="newsimg" src="img/iphonexs.0.0.jpg"/>The iPhone XS Max is outselling the iPhone XS, according to analyst report</p>  
     <p style="font-family: Slim Joe; font-size:17px;">Kuo’s report says that demand for the iPhone XS Max is higher than expected, and is about three to four times higher than demand for the iPhone XS. Gold and space grey are far more popular than silver when it comes to color options, and the 256GB version is the most popular. The note also says that the 512GB version could face a shortage because of reliance on Samsung as a supplier.</p>  
   </div>  
   <div class = "footer">  
    <ul>  
     <li><a href="#"><img class = "socialimg" src="img/001-twitter-logo-button.png"/></a></li>  
     <li><a href="#"><img class = "socialimg" src="img/002-facebook-logo-button.png"/></a></li>  
     <li><a href="#"><img class = "socialimg" src="img/003-instagram-logo.png"/></a></li>  
     <li><a href="#"><img class = "socialimg" src="img/004-youtube-symbol.png"/></a></li>  
    </ul>  
   </div>  
  </body>  
 </html>

CSS :

 body{  
  margin: 0;  
 }  
 h1{  
  margin: 0;  
 }  
 ul {  
   list-style-type: none;  
   margin: auto;  
   padding-left: 135px;  
   overflow: hidden;  
   position: -webkit-sticky;  
   position: sticky;  
   top: 0;  
   background-color: #f5f5f0;  
 }  
 li {  
  float: left;  
  padding-right: 10px;  
 }  
 li a {  
   display: block;  
   color: #7a7a52;  
   text-align: center;  
   padding: 14px 16px;  
   text-decoration: none;  
 }  
 li a:hover {  
   color: black;  
 }  
 @font-face {  
   font-family: Slim Joe;  
   src: url(Slim Joe.otf);  
   font-family: Big John;  
   src: url(BIG JOHN.otf);  
 }  
 .header{  
  /* width: 100%; */  
  height: 250px;  
  line-height: 120px;  
  background-image: url("img/Picture1.jpg");  
  background-repeat: no-repeat;  
  background-size:cover;  
 }  
 .header h1{  
  font-size: 50px;  
  color: white;  
  text-align: center;  
  line-height: 200px;  
 }  
 .active {  
   background-color: white;  
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.19);  
 }  
 .container{  
  width: 80%;  
  margin: auto;  
 }  
 .content{  
  padding-top: 20px;  
  padding-bottom: 60px;  
  width: 80%;  
  margin: auto;  
 }  
 .newsimg{  
  float: left;  
  width: 30%;  
  padding-right: 20px;  
 }  
 .footer{  
  width: 100%;  
  padding-top: 20px;  
  height: 70px;  
  text-align: center;  
  background-color: #333;  
 }  
 .footer p{  
  color: cyan;  
 }  
 .footer ul {  
   list-style-type: none;  
   margin: 0;  
   padding: 0;  
   overflow: hidden;  
   background-color: #333;  
 }  
 .footer li {  
   float: right;  
 }  
 .footer li a {  
   display: block;  
   color: white;  
   text-align: center;  
   padding: 5px 5px;  
   text-decoration: none;  
 }  
 .socialimg{  
  width: 70%;  
 }

Nama : Reza Adipatria Maranatha
NRP : 05111740000186
Kelas : PWEB C

SISTEM INFORMASI

Sistem Informasi merupakan suatu sistem di dalam organisasi yang mempertemukan kebutuhan dalam pengelolaan transaksi, menjalankan operasi, dan kegiatan strategi lainnya yang bersifat manajerial serta mampu menyediakan informasi bagi pihak luar untuk laporan tertentu. Sistem Informasi sendiri memiliki beberapa fungsi, seperti: Memperbaiki produktivitas aplikasi pengembangan serta dalam pemeliharaan sebuah sistem Menjamin kualitas serta keterampilan dalam penggunaan Sistem Informasi Mengidentifikasi kebutuhan apa saja yang dapat mendukung sistem informasi Mengantisipasi serta memahami akan adanya konsekuensi secara ekonomi Menetapkan investasi yang akan diarahkan pada sistem informasi Mengembangkan proses perencanaan yang efektif Bagan Sistem Informasi Transaction Processing Systems Merupakan sebuah sistem pemrosesan informasi untuk bisnis transaksi yang melibatkan pengambilan, perubahan dan pengembalian dari seluruh transaksi data. Ciri khas dari sebuah TPS i...

PWEB

Search This Blog

Tugas Web Berita

Comments

Post a Comment

Popular posts from this blog

Tugas Membuat Forms

SISTEM INFORMASI