Selasa, 25 September 2018

PWEB C Membuat Berita

Pada kesempatan kali ini saya diberi tugas membuat halaman berita dengan kombinasi antara bahasa html dan css. sumber berita dari techinasia.com. Berikut saya lampirkan hasil compile:
1. Halaman Utama

2. Halaman Berita

Berikut sayaa lampirkan pula source codenya:
1. Index
<!DOCTYPE html>  
 <html>  
 <head>  
      <title>Berita Apa Aja</title>  
      <link rel="stylesheet" type="text/css" href="custom.css">  
 </head>  
 <body>  
      <div class="menu">  
           <ul>  
                <li><a href="index.htm">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Blog</a></li>  
                <li><a href="#">Contact</a></li>  
           </ul>  
      </div>  
      <div class="header">  
           <div class="jarak">  
                <h2>BERITA ASING</h2>  
           </div>  
      </div>  
      <div class="content">  
           <div class="jarak">  
                <!-- kiri -->  
                <div class="kiri">  
                     <!--blog-->  
                     <div class="border">  
                          <div class="jarak">  
                               <table>  
                                    <tr>  
                                         <td><img src="berita 1.jpg" width="134" height="75">  
                                         <td>  
                                         <td><a class="header3" href="berita.html">How one Silicon Valley investor helps US startups enter Japan</a>  
                                         <p>Hire the right country manager...</p>  
                                    </tr>  
                               </table>  
                          </div>  
                     </div>  
                     <!--end blog -->  
                     <!--blog-->  
                     <div class="border">  
                          <div class="jarak">  
                               <table>  
                                    <tr>  
                                         <td><img src="berita 2.jpg" width="134" height="75">  
                                         <td>  
                                         <td><a class="header3" href="">Singapore introduces new rules for bike-share users, fines for abusers</a>  
                                         <p>The rules are part of the Land Transport Authority’s new licensing regime for bike-sharing services...</p>  
                                    </tr>  
                               </table>  
                          </div>  
                     </div>  
                     <!--end blog-->  
                     <!--blog-->  
                     <div class="border">  
                          <div class="jarak">  
                               <table>  
                                    <tr>  
                                         <td><img src="berita 3.png" width="134" height="75">  
                                         <td>  
                                         <td><a class="header3" href="">In brief: Oyo Rooms books $1b from Sequoia, Softbank, and others</a>  
                                         <p>The capital will fuel the Indian startup’s international expansion.</p>  
                                    </tr>  
                               </table>  
                          </div>  
                     </div>  
                     <!--end blog-->  
                </div>  
                <!--kiri-->  
                <!--kanan-->  
                <div class="kanan">  
                     <div class="jarak">  
                          <h3>TAG</h3>  
                          <hr/>  
                          <p><a href="#" class="undecor">Teknologi</a></p>  
                     </div>  
                </div>  
                <!--kanan-->  
           </div>  
      </div>  
      <div class="footer">  
           <div class="jarak">  
                <p>copyright 2018 Shawn Timothy Mulya Putra    all reserved</p>  
           </div>  
      </div>  
 </body>  
 </html>  

2. berita
<!DOCTYPE html>  
 <html>  
 <head>  
      <title>Berita Apa Aja</title>  
      <link rel="stylesheet" type="text/css" href="custom.css">  
 </head>  
 <body>  
      <div class="header">  
           <div class="jarak">  
                <h2>BERITA ASING</h2>  
           </div>  
      </div>  
      <div class="menu">  
           <ul>  
                <li><a href="index.html">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Blog</a></li>  
                <li><a href="#">Contact</a></li>  
           </ul>  
      </div>  
      <div class="content">  
           <div class="jarak">  
                <!-- kiri -->  
                <div class="kiri">  
                     <!--blog-->  
                     <div class="jarak">  
                          <h3>How one Silicon Valley investor helps US startups enter Japan</h3>  
                          <p>Sep 25, 2018</p>  
                          <img class="content_img" src="berita 1.jpg">  
                     </div>  
                     <p><h4>Inti Berita</h4>  
                          <ul>  
                               When Geodesic Capital, a US-based venture capital firm that counts Snap, Airbnb, and Uber in its portfolio, closed its US$335 million first fund in 2016, it had a mission: helping US startups enter Japan.

Cultural and language differences remain hurdles to Western tech companies as they aim to get a foothold in the world’s third-largest economy.

A lot of them are looking to work with someone they feel comfortable with, and they often prioritize hiring a country manager who speaks perfect English.

But that’s not what Geodesic founding partner Ashvin Bachireddy wants for those startups./ul>  
                     </p>  
                     <p>  
                          <h4>Sweet Spot</h4>  
                          <ul>  
“You need to find someone who knows how to do business in Japan but [whom] you can trust, even if English is their second language,” Bachireddy said recently at Tech in Asia Tokyo 2018.

“It’s not just a country manager who can be an advocate for your company, someone who can go and sell your product. It really has to be someone who can not only be trusted by the community here [in Japan] and also by the headquarters,” suggested the investor, a former partner at Silicon Valley’s influential venture capital firm Andreessen Horowitz.

That’s because a lot of the work needs to be done on the ground locally, he adds. What works in Silicon Valley doesn’t always apply to Japan. Unless the American company finds someone it trusts, it’s unlikely to let that person take the reins.

                    </p>  
                                         <p>  
                          <h4>Japanese fit</h4>  
                          <ul>  
One key discrepancy between the two countries is how they perceive product-market fit – the idea of identifying a compelling value proposition for why customers will use a product.

In Silicon Valley, the process normally involves rounds of iteration.
With a small amount of initial capital, American startups will quickly churn out a product to be tested on the market. As such, the product usually isn’t perfect, but it will undergo iterations until it becomes “really good” and sees “demonstrated traction,” explained Bachireddy. Then, the startup can go out and raise more money.

Japanese consumers, however, don’t usually tolerate a not-so-perfect product. “They are much more rigorous in what they expect out of a product, in terms of quality, service, and things that work for them in a unique way,” noted Bachiereddy. “You should really understand what the market wants before you launch.”

To establish its Japanese edge, Geodesic has partnered with local corporate giants, including trading and investment company Mitsubishi, which helps support the American firm’s portfolio startups in entering Japan.
</ul>  
                    </p>  
                  <p>Sumber: <a href="https://www.techinasia.com/geodesic-us-startups-japan">https://id.techinasia.com/amazon-ekspansi-indonesia</a></p>  
                     <!--end blog -->  
                </div>  
                <!--kiri-->  
                <!--kanan-->  
                <div class="kanan">  
                     <div class="jarak">  
                          <h3>TAG</h3>  
                          <hr/>  
                          <p><a href="#" class="undecor">Teknologi</a></p>  
                     </div>  
                </div>  
                <!--kanan-->  
           </div>  
      </div>  
      <div class="footer">  
           <div class="jarak">  
                <p>copyright 2018 Shawn Timothy Mulya Putra    all reserved</p>  
           </div>  
      </div>  
 </body>  
 </html>  

3. CSS
body{  
      background: #fff;  
      color: #333;  
      width: 100%;  
      font-family: sans-serif;  
      margin: 0 auto;  
 }  
 .header{  
      width: 90%;  
      margin: auto;  
      height: 120px;  
      line-height: 120px;  
      background: #EA2323;  
      color: #fff;   
 }  
 .content{  
      width: 90%;  
      margin: auto;  
      height: 900px;  
      padding: 0.1px;  
      background: #fff;  
      color: #333;  
 }  
 .kiri{  
      width: 70%;  
      float: left;  
      margin: auto;  
      background: #fff;  
      height: 420px;  
 }  
 .kanan{  
      width: 30%;  
      float: left;  
      margin: auto;  
      background: #fff;  
      height: 420px;  
 }  
 .border{  
      border: 2px solid #BF1F1F;  
      margin-top: 1pc;  
      margin-bottom: 1pc;  
      margin-left: 2pc;  
      margin-right: 2pc;  
 }  
 .undecor{  
      text-decoration: none;  
 }  
 .footer{  
      width: 90%;  
      margin: auto;  
      height: 40px;  
      line-height: 40px;  
      background: #BF1F1F;  
      color: #fff;  
 }  
 .menu{  
      background-color: #BF1F1F;  
      height: 50px;  
      line-height: 50px;  
      position: relative;  
      width: 90%;  
      margin: 0 auto;  
      padding: 0;  
 }  
 .jarak{  
      padding: 0 2pc;  
 }  
 .menu ul{  
      list-style: none;  
 }  
 .menu ul li a{  
      float: left;  
      width: 70px;  
      display: block;  
      text-align: center;  
      color: #fff;  
      text-decoration: none;  
 }  
 .menu ul li a:hover{  
      background-color: #74C599;  
      display: block;  
 }  
 .content_img{  
      width: 70%;  
      height: 70%;  
 }  

Tidak ada komentar:

Posting Komentar