iSaya-IntelegentSaya: Tugas Pemrigraman Web Dasar

Tugas 1.Menu dropdown

<html>
<title> Hermawan Saputro </title>
<head>
<style>
.tab{
 
 border: 3px solid blue;
 width:20%;
 margin: 50 0 0 300;
 background-color:crome;
 color:Black;
 font-size:20;
 text-decoration:none;
 border-radius:0px;
 }
 
a{text-decoration:none;}
td,tr {
  font-family:Century Gothic, Century Gothic, Century Gothic, sans-serif;
  color:green;

}

.dropv
  {
  padding: 30;
  margin: 5; 
  
  }
.dropv a
  {
  display: inline;
  width: 300px;
  }
.dropv li 
  {
  float:left;
  padding: 0px 10px 5px 0px;
  }
.dropv li ul
  {
  position: absolute;
  background:green; 
  padding: 0px 0px 0px 5px;
  width: 300px;
  right: -9999px;
  }
.dropv li:hover ul 
  {
  border-radius:1px;
  right: auto;
  }
.dropv li ul a 
  {
  border-radius:1px;
  color: blue;
  text-decoration: none;
  display: block;
  }
.dropv li ul a:hover 
  {
  color: red;
  background:yellow;
  }
</style>
</head>
<table class="tab">
 <tr>
 <td>
  <ul class="dropv">
   <li><a href="#">Editing Video</a> 
    <ul>
     <li><a href="#">Sony Vegas</a></li>
     <li><a href="#">Adobe Premiere Pro</a></li>
     <li><a href="#">Adobe After Effect</a></li>
     <li><a href="#">Corel VideoStudio Pro</a></li>
     
    </ul>
 </td>
 <td>
  <ul class="dropv">
   <li><a href="#">Editing Audio</a> 
    <ul>
      <li><a href="#">FL Studio</a></li>
      <li><a href="#">Auiocity</a></li>
      <li><a href="#">Cool Edit Pro</a></li>  
    </ul>
   </li>
  </ul> 
 </td>
    <td>
  <ul class="dropv">
   <li><a href="#">Editing Gambar</a> 
    <ul>
      <li><a href="#">CorelDraw</a></li>
      <li><a href="#">Manga studio</a></li>
      <li><a href="#">Adobe Photoshop</a></li>
      <li><a href="#">Paint Tool SAI</a></li>
      <li><a href="#">Paint NET.</a></li>
       
    </ul>
   </li>
  </ul> 
 </td>
 <td>
  <ul class="dropv">
   <li><a href="#">Animasi</a> 
    <ul>
     <li><a href="#">Toon Boom Animate Pro</a></li>
     <li><a href="#">blender</a></li>
     <li><a href="#">Macromedia flash</a></li>
     <li><a href="#">Toon Boom Animate Studio</a></li>
     
    </ul>
 </td> 
 </tr>
</table>
</html>

Tugas 2.
Zebra

<html>
<title>Hermawan Saputro</title>
<head>

.anime
 { 
   width:80%;
   margin-top:24px;
   margin-left:130px;
   border:1px solid #000;
   font-family:Centabel Book, Arial, Helvetica, sans-serif;
   text-align:center;
   border-radius:7px;
   
 }
   td{border: 1px solid #0000B7;border-radius:5px;
 }
 
 th
   {
   text-align:center;
   align:center;
   background-color:blue;
   color:white;border-radius:5px;
   }
 .anime1
   {
   text-align:center;
   background-color:blue;
   border-radius:30px;
   }
 
   tr:hover   {color:red;cursor: pointer;}
   transition: all 1s;
   
</style>

</head>
<body>
<body id="body">
</div>

</body>
<table class="anime">
 <tr>
  <th>Nama penyanyi</th>
  <th>Album</th>
  <th>Release (tahun)</th>
  <th>Best Song</th>
  </tr>
    <tr class="anime">
      <td>Afilia Saga</td>
  <td>prismatic infinity carat</td>
  <td>2013</td>
  <td>prismatic infinity carat</td>
 </tr>
    <tr class="anime1">
  <td>Supercell</td>
  <td>ZIGAEXPERIENTIA</td>
  <td>2013</td>
  <td>The Bravery</td>
 </tr>
 <tr class="anime">
         <td>One Ok Rock</td>
  <td>Zankyo Reference</td>
  <td>2011</td>
  <td>Re_make</td>
 </tr>
 <tr class="anime1">
      <td>nano.RIPE</td>
  <td>Plus to Minus no Shikumi</td>
  <td>2012</td>
  <td>Hana no iru</td>
 </tr>
 <tr class="anime">
         <td>miwa</td>
  <td>guitarium</td>
  <td>2011/2012</td>
  <td>FRiDAY-MA-MAGiC</td>
 </tr>
 <tr class="anime1">
      <td>LiSA</td>
  <td>LANDSCPE</td>
  <td>2012/2013</td>
  <td>Traumerei</td>
 </tr>
 <tr class="anime">
         <td>Ikimonogakari</td>
  <td>NEWTRAL</td>
  <td>Unknown</td>
  <td>Aruite Ikou</td>
 </tr>
 <tr class="anime1">
      <td>Haruna Luna</td>
  <td>Oversky</td>
  <td>2011/2012</td>
  <td>Overfly</td>
 
</table>
</html>

Rabu, 18 Desember 2013

Tugas Pemrigraman Web Dasar

Tidak ada komentar:

GoolePlus

Arsip Saya.