Skip to main content

Tugas Pemrograman Web: Laman Berita

Untuk tugas membuat laman berita, saya mengambil contoh dari webiste techinasia.com

Tampilan awal dari techinasia.com seperti berikut:

Dari tampilan tersebut, saya mencoba membuat laman berita saya sendiri, yang hasilnya bisa dibuka di link berikut, berikut screenshotnya
Source code html nya adalah
 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Tech in Asia - Connecting Asia's startup ecosystem</title>  
      <link rel="stylesheet" href="customtech.css"/>  
 </head>  
 <body>  
      <div class="header">  
      <div class="menu">  
           <ul>  
                <li><a href="#">News</a></li>  
                <li><a href="#">Job</a></li>  
                <li><a href="#">Companies</a></li>  
                <li><a href="#">Event</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Advertise</a></li>  
           </ul>  
      </div>  
      <div class="menu1">  
           <ul>  
                <li><a href="#">Categories</a></li>  
                <li><a href="#">Markets</a></li>  
                <li><a href="#">Writers</a></li>  
           </ul>  
      </div>  
      </div>  
      <div class="content">  
           <div class="jarak">  
                <!-- kiri -->  
                <div class="kiri">  
                <!-- blog -->  
                <div class="border">  
                     <div class="jarak">  
                          <img src="https://cdn.techinasia.com/wp-content/uploads/2018/09/52689861_m.jpg" style=" float: left; width: 300px;height: 200px;">  
                          <h3>How to run a product team, according to a VP of product</h3>  
                          <p>Lessons on collaboration, culture, recruiting, and alignment.</p>  
                          <button class="btn">Read More..</button>  
                     </div>  
                </div>  
                <!-- end blog-->  
                <!-- blog -->  
                <div class="border">  
                     <div class="jarak">  
                          <img src="https://cdn.techinasia.com/wp-content/uploads/2018/09/Commut4.jpg" style="float: left;width: 300px;height: 200px;">  
                          <h3>In brief: Careem buys Indian bus app Commut, merges assets with rival Shuttl</h3>  
                          <p>The Emirati ride-hailing firm is itself said to be engaged in takeover talks with Uber</p>  
                          <button class="btn">Read More..</button>  
                     </div>  
                </div>  
                <!-- end blog-->  
                <!-- blog -->  
                <div class="border">  
                     <div class="jarak">  
                          <img src="https://cdn.techinasia.com/wp-content/uploads/2017/09/honestbee-GOODSHIP-photo.jpg" style="float: left;width: 300px;height: 200px;">  
                          <h3>Honestbee raised around $46m since series A. Its biggest backer is one of Korea's chaebols</h3>  
                          <p>Honestbee's biggest shareholder is LS Corp, which made US$8.5 billion in revenue in 2017.</p>  
                          <button class="btn">Read More..</button>  
                     </div>  
                </div>  
                <!-- end blog-->  
                </div>  
                <!-- kiri-->  
                <!-- kanan -->  
                <div class="kanan">  
                     <div class="jarak">  
                          <h2>What new?</h2>  
                               <img src="https://cdn.techinasia.com/data/images/b0e36d4894beddd46fe4ed064ba209a2.png" style="float: left;width: 34px;height: 34px;">  
                               <h1>Senior NodeJS Developer</h1>  
                               <p>2359media</p>  
                               <img src="https://cdn.techinasia.com/data/images/fbeb63e022e1ec390dcc5a27fb299ba1.png" style="float: left;width: 34px;height: 34px;">  
                               <h1>BackEnd Engineer</h1>  
                               <p>TokoModal</p>  
                               <img src="https://cdn.techinasia.com/data/images/82d9332d395332b4d14ea2cfeab6568c.png" style="float: left;width: 34px;height:34px;">  
                               <h1>Sales Representative</h1>  
                               <p>Avani</p>  
                               <img src="https://cdn.techinasia.com/data/images/910cb8259a82591e05429ab48c8a486b.png" style="float: left;width: 34px;height: 34px;">  
                               <h1>Content Writer</h1>  
                               <p>ADX Asia</p>  
                               <img src="https://cdn.techinasia.com/data/images/174f0be21fd7fc373631e4d120a0bf1f.png" style="float: left;width: 34px;height: 34px;">  
                               <h1>Sales Executive & Sales Support Executive</h1>  
                               <p>HReasily</p>  
                     </div>  
                     <div class="footer" >  
                          <h2>Copyright 2017 masicobacoba</h2>  
                     </div>  
                </div>  
                <!-- kanan -->  
           </div>  
      </div>  
 </body>  
 </html>  
Source Code CSS nya adalah

 body{  
      background: #FBFAFA;  
      color: #333;  
 /*     width: 100% ;  
      height: 100%;*/  
      font-family: "lato", cursive, sans-serif;  
      /*margin: 0 auto;*/  
 }  
 .content{  
      width: 88%;  
      margin: auto;  
      /*height: 420px;*/  
      padding: 0.1px;  
      background: #fff;  
      color: #333;  
 }  
 .header{  
      margin: 0;  
      background: #fff;  
 }  
 .kiri{  
      width: 70%;  
      float: left;  
      margin: auto;  
      background: #fff;  
      /*height: 420px;*/  
 }  
 .kanan{  
      width: 25%;  
      float: left;  
      margin: auto;  
      background: #fff;  
      /*height: 420px;*/  
 }  
 .border{  
      /*border: 2px solid #000;*/  
      height: 200px;  
      margin-top: 1pc;  
      padding-bottom: 3pc;  
      padding-right: 2pc;  
 }  
 .undecor{  
      text-decoration: none;  
 }  
 .footer{  
      /*width: 90%;*/  
      margin: auto;  
      height: 40px;  
      line-height: 40px;  
      background: #F0EEEE;  
 }  
 .menu{  
      background-color: #F0EEEE;  
      height: 50px;  
      line-height: 50px;  
      /*position: relative;*/  
      /*width: 90%;*/  
      /*margin: 0;*/  
      /*padding:0;*/  
 }  
 .menu1{  
      background-color: #fff;  
      height: 60px;  
      line-height: 60px;  
      /*position: relative;*/  
      /*width: 90%;*/  
      margin: 0;  
      /*padding:0 auto;*/  
 }  
 .jarak{  
      padding: 0 2pc;  
 }  
 .menu ul{  
      list-style: none;  
 }  
 .menu ul li a{  
      float: left;  
      width: 14%;  
      display: block;  
      text-align: center;  
      color: #A4A4A4;  
      text-decoration: none;  
 }  
 .menu ul li a:hover{  
      background-color: #DDDCDC;  
      display:block;  
 }  
 .menu1 ul{  
      list-style: none;  
 }  
 .menu1 ul li a{  
      float: left;  
      width: 14%;  
      display: block;  
      text-align: center;  
      color: #A4A4A4;  
      text-decoration: none;  
 }  
 .menu1 ul li a:hover{  
      background-color: #FAF9F9;  
      display:block;  
 }  
 .kanan p{  
      font-size: 12px;  
      margin: 0;  
      text-align:center;  
      margin: 10px;   
      color:#D9D8D8;  
 }  
 h3{  
      font-family: "Lucida Console";  
      font-weight: bold;  
      font-size: 24px;  
 }  
 p{  
      font-family: "Verdana";  
      font-size: 14px;  
      font-weight: lighter;  
      color: #ADACAC;  
 }  
 h1{  
      font-family: "Verdana";  
      font-size: 13px;  
      font-weight: bold;  
      text-align: center;  
      padding-top: 10px;  
 }  
 h2{  
      font-family: "Lucida Console";  
      font-weight: lighter;  
      font-size: 12px;  
 }  


Nama: Bobbi Aditya
Kelas : Pemrograman Web C
NRP : 05111740000099

Comments

Popular posts from this blog

APSI-TUGAS 1 Sistem Informasi IndoPremier

NAMA: Bobbi Aditya NRP: 05111740000099 KELAS: APSI C Sistem informasi yang saya gunakan adalah IndoPremier. IndoPremier adalah perusahaan penyedia jasa keuangan terintegrasi di bidang pasar modal yang melayani klien individu maupun korporasi. Melalui anak perusahaannya (PT Indo Premier Investment Management), IndoPremier mengembangkan bisnis aset manajemennya. Dan menyadari bahwa salah satu kompetensi utama IndoPremier adalah pengembangan teknologi, maka pada tahun 2007, diluncurkan Exchange Traded Fund saham pertama di Indonesia. Secara singkat, IndoPremier adalah salah satu sekuritas yang bisa dipakai oleh masyarakt Indonesia untuk melakukan trading saham. Fasilitas dari IndoPremier adalah: IPOTGO (Web Investasi) IPOTKU(Cara Modern Menabung) IPOTFUND(Investasi Reksadana) IPOTSTOCK(Investasi Saham) IPOTNEWS(Web Berita Investasi) Sistem Informasi pada umumnya memiliki bagan seperti di bawah ini Pada IndoPremier, sistem informasi ini juga berlaku, penjelasanny...

PBO - ImageViewer 3.0

Nama : Bobbi Aditya Kelas : PBO A Nrp : 05111740000099 Dalam kesempatan kali ini, saya mendapatkan tugas untuk membuat imageviewer 3.0 berdasarkan sumber yang ada di buku. Berikut saaya sertakan design class saya: Berikut saya sertakan source code dari masing-masing class yang telah saya buat: - Darker Filter /** * An image filter to make the image a bit darker. * * @author Bobbi Aditya * @version 1.0 */ public class DarkerFilter extends Filter { /** * Constructor for objects of class DarkerFilter. * @param name The name of the filter. */ public DarkerFilter(String name) { super(name); } /** * Apply this filter to an image. * * @param image The image to be changed by this filter. */ public void apply(OFImage image) { int height = image.getHeight(); int width = image.getWidth(); for(int y = 0; y < height; y++) { for(int x = 0; x <...