Tugas Membuat Web Berita

-
Nama: Donny Fitrado
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.

Comments

Post a Comment

Popular posts from this blog

Tugas 2 - Pemrograman Orientasi Objek

-
Image
Nama: Donny Fitrado NRP : 05111740000171 Kelas: A Berikut ini adalah source codenya: 1. myMain: import static java.lang.Math.sqrt; import java.awt.*; /** * Write a description of class Main here. * * Donny Fitrado * 10-9-2018 */ public class myMain { public static void main(String args[]) { //Circle Circle aCircle; aCircle = new Circle(); aCircle.SetRadius(3.0); aCircle.SetCenter(2.0,2.0); double LuasLingkaran = aCircle.Area(); double KelilingLingkaran = aCircle.Circumference(); System.out.println("Luas lingkaran adalah " + LuasLingkaran + " cm^2"); System.out.println("Keliling lingkaran adalah " + KelilingLingkaran + " cm"); //Square Square aSquare; aSquare = new Square(); aSquare.SetSide(4.0); aSquare.SetCenter(2.0,2.0); double LuasPersegi = aSquare.Area(); double KelilingPersegi = aSq
Read more

Tugas 5 PBKK A

-
Image
Nama: Donny Fitrado NRP: 05111740000171 Kelas: PBKK A Di post kali ini, saya akan melanjutkan tugas mata kuliah PBKK, yaitu CRUD pada CodeIgniter. Ada beberapa langkah yang harus dilakukan: 1. Membuat database dan table di mysql, seperti berikut ini: 2. Melakukan konfigurasi database pada CodeIgniter 3 .Menambahkan database dan session pada file autoload.php. 4. Apabila konfigurasi telah selesai, kita dapat membuat CRUD pada model CodeIgniter Read Record pada CodeIgniter Create Record pada CodeIgniter Update Record pada CodeIgniter Delete Record pada CodeIgniter 5. Kita juga dapat mendeclare initial variable sekaligus rules model pada CodeIgniter Sekian dari post ini, terima kasih dan semoga bermanfaat.
Read more

Tugas PBO - Tech Support

-
Image
Nama: Donny Fitrado NRP: 05111740000171 Kelas: PBO A 1. SupportSystem /** * Write a description of class SupportSystem here. * * @author (Donny Fitrado) * @version (8-10-18) */ public class SupportSystem { private InputReader reader; private Responder responder; /** * Creates a technical support system. */ public SupportSystem() { reader = new InputReader(); responder = new Responder(); } /** * Start the technical support system. This will print a * welcome message and enter into a dialog with the user, * until the user ends the dialog. */ public void start() { boolean finished = false; printWelcome(); while(!finished) { String input = reader.getInput(); if(input.startsWith("bye")) { finished = true; } else { String response = responder.generateResponse(); Syst
Read more