STIKOMBALI – Tugas Perancangan Web – Membuat Biodata Dengan HTML dan CSS

LAPORAN TUGAS PERANCANGAN WEB
I MADE PIRMAN DWIANA (130030347)

TUGAS MEMBUAT BIODATA DENGAN HTML DAN CSS
DEWA GEDE HENDRA DIVAYANA.,PHD

TOOLS
1. Macromedia Dreamweaver,
2. Browser Google Chrome,
3. Photo Editor Photoshop CS

STRUKTUR FILE & FOLDER
Struktur file dan folder dibedakan antara *.html, *.css, *.js dan images. Adapun detailnya adalah sebagai berikut:
1. cvindex.html
Adalah file utama html, struktur desain HTML tersimpan disini.
2. jquery-ui.css
Aadalah file css untuk mempercantik tampilan dialog BIODATA DETAIL.
3. jquery-ui.js
Adalah file javascript, didalamnya terdapat fungsi-fungsi yang sudah tercompile sehingga sudah siap digunakan (jquery).
4. Folder css terdiri dari 2 file didalamnya:
a. style.css
Adalah file css yang khusus menyimpan style dari table-table yang terdapat dalam desain html
b. content.css
Adalah file css yang khusus menyimpan style dari content yang terdapat dalam desain html, kecuali tag
5. Folder external/jquery
a. jquery.js
Adalah file standar jquery, dimana setiap penggunaan jquery file ini harus selalu disertakan tanpa membedakan apapun object jquery-nya.
6. Folder images
Folder ini menampung semua file-file gambar yang dibutuhkan dalam desain.

KODE HTML, CSS DAN JAVASCRIPT


cvindex.html

 <html>  
 <head>  
  <title>Tugas Perancangan WEB - 130030347</title>  
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>  
  <link rel="stylesheet" href="css/content.css" type="text/css" media="screen"/>  
  <link href="jquery-ui.css" rel="stylesheet">       
 </head>  
 <body>     
  <div id="content">  
  <a class="back" href=""></a>  
  <table border="0" width="100%">  
   <tr>  
    <td width="24%">  
    <img src="images/stikomlogo.jpg" class="stikomlogo">  
    </td>  
    <td width="76%">  
    <p class="head">  
    TUGAS PERANCANGAN WEB  
    <br>MEMBUAT BIODATA DENGAN HTML & CSS  
    <br>I Made Pirman Dwiana  
    <br>NIM 130030347  
    </p>  
    </td>  
   </tr>  
  </table>  
  <h2>Data Mahasiswa</h2>  
  <table class="table1" width="100%">  
   <tbody>  
    <tr>  
    <th width="24%" scope="row">Nama Mahasiswa</th>  
    <td width="76%">I Made Pirman Dwiana</td>  
    </tr>  
    <tr>  
    <th scope="row">NIM</th>  
    <td>130030347</td>  
    </tr>  
    <tr>  
    <th scope="row">Photo</th>  
    <td><img src="images/photo.jpg" class="photo"></td>  
    </tr>  
    <tr>  
    <th scope="row">Riwayat</th>  
    <td>                                
    <p><a href="#" id="dialog-link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Lihat Detail</a></p>                                     
    <!-- ui-dialog -->  
    <div id="dialog" title="Biodata Detail (130030347)">  
    <p>  
    <table width="100%" border="0" class="dialogtbl">  
     <tr class="tbltitle">  
     <td colspan="2">  
     Data Pribadi  
     </td>                                     
     </tr>  
     <tr class="tblcont">  
     <td>  
     Nama Lengkap  
     <br>Jenis Kelamin  
     <br>Tempat/tgl lahir  
     <br>Status  
     <br>Alamat  
     </td>  
     <td>  
     : I Made Pirman Dwiana  
     <br>: Laki-laki  
     <br>: Tabanan, 18 September 1990  
     <br>: Belum kawin  
     <br>: Tabanan  
     </td>       
     </tr>  
     <tr class="tbltitle">  
     <td colspan="2">  
     Pendidikan  
     </td>                                     
     </tr>  
     <tr class="tblcont">  
     <td>  
     Sekolah Menengah Pertama  
     <br>Sekolah Menengah Atas  
     <br>Diploma III  
     <br>Strata I  
     </td>  
     <td>  
     : SMP Negeri 2 Kerambitan  
     <br>: SMA Negeri 1 Tabanan  
     <br>: LP3I Bali  
     <br>: STIKOM Bali  
     </td>       
     </tr>  
     <tr class="tbltitle">  
     <td colspan="2">  
     Tentang Saya  
     </td>                                     
     </tr>  
     <tr class="tblcont">  
     <td colspan="2">  
     Saya ini lahir di Tabanan, besar di Tabanan, waktu kuliah Diploma III tinggal di Dalung.  
     Saat ini bekerja di Kuta jadi kuli/buruh bulanan. :D. Suka makan nasi, ngerokok kadang-kadang aja.  
     </td>  
     </tr>  
     <tr class="tbltitle">  
     <td colspan="2">  
     Kontak  
     </td>                                     
     </tr>  
     <tr class="tblcont">  
     <td>  
     Email  
     <br>Blogsite  
     <br>Twitter                                          
     </td>  
     <td>  
     : <a href="mailto:pirmandwiana@yahoo.com">pirmandwiana@yahoo.com</a>  
     <br>: <a href="https://wrongtabs.wordpress.com">www.wrongtabs.wordpress.com</a>  
     <br>: <a href=" http://twitter.com/pirmandwiana">@pirmandwiana</a>                      
     </td>                                          
     </tr>                                                              
    </table>  
    </p>  
    </div>   
    </td>  
    </tr>  
   </tbody>  
  </table>  
  </div>  
  <script src="external/jquery/jquery.js"></script>  
  <script src="jquery-ui.js"></script>  
  <script>            
  $( "#dialog" ).dialog({  
  autoOpen: false,  
  width: 600,  
  height: 445,  
  modal: true,  
  buttons: [  
  {  
  text: "Close",  
  click: function() {  
  $( this ).dialog( "close" );  
  }  
  }  
  ]  
  });                      
  // Link untuk membuka dialog  
  $( "#dialog-link" ).click(function( event ) {  
  $( "#dialog" ).dialog( "open" );  
  event.preventDefault();  
  });                      
  // Hover untuk widget  
  $( "#dialog-link, #icons li" ).hover(  
  function() {  
  $( this ).addClass( "ui-state-hover" );  
  },  
  function() {  
  $( this ).removeClass( "ui-state-hover" );  
  }  
  );  
  </script>  
 </body>  
 </html>  

content.css

 *{  
      margin:0;  
      padding:0;  
 }  
 body{  
      font-family: Georgia, serif;  
      font-size: 20px;  
      font-style: italic;  
      font-weight: normal;  
      letter-spacing: normal;  
      background: #f0f0f0;  
 }  
 .stikomlogo{  
      width: 126px;  
      height: 126px;  
 }  
 .photo{  
      width: 150px;  
      height: 150px;  
      padding: 3px;  
      background-color: white;  
 }  
 #content{  
      background-color:#fff;  
      width:750px;  
      padding:10px;  
      margin:0 auto;  
      border-left:30px solid #1D81B6;  
      border-right:1px solid #ddd;  
      -moz-box-shadow:0px 0px 16px #aaa;  
 }  
 .head{  
   color: #1D81B6;  
   font-size:20px;  
   text-align:center;  
   padding:10px 0px;  
   text-shadow:1px 1px 1px #444;       
      border-bottom:3px solid #f0f0f0;  
      padding-bottom:17px;  
      margin-bottom:-2px;  
 }  
 .head a{  
      color:#1D81B6;  
      text-decoration:none;  
      float:right;  
      text-shadow:1px 1px 1px #888;  
 }  
 .head a:hover{  
      color:#f0f0f0;  
 }  
 #content h1{  
      font-family:"Trebuchet MS",sans-serif;  
      color:#1D81B6;  
      font-weight:normal;  
      font-style:normal;  
      font-size:56px;  
      text-shadow:1px 1px 1px #aaa;  
      padding-top: 33px;  
      padding-bottom: 33px;  
 }  
 #content h2{  
      font-family:"Trebuchet MS",sans-serif;  
      font-size:26px;  
      font-style:normal;  
      background-color:#f0f0f0;  
      margin:17px 0px 17px -40px;  
      padding:0px 40px;  
      clear:both;  
      float:left;  
      width:100%;  
      color:#aaa;  
      text-shadow:1px 1px 1px #fff;  
 }  

style.css

 /* Table 1 Style */  
 table.table1{  
   font-family: "Trebuchet MS", sans-serif;  
   font-size: 16px;  
   font-weight: bold;  
   line-height: 1.4em;  
   font-style: normal;  
   border-collapse:separate;  
 }  
 .table1 thead th{  
   padding:15px;  
   color:#fff;  
   text-shadow:1px 1px 1px #568F23;  
   border:1px solid #93CE37;  
   border-bottom:3px solid #9ED929;  
   background-color:#9DD929;  
   background:-webkit-gradient(  
     linear,  
     left bottom,  
     left top,  
     color-stop(0.02, rgb(123,192,67)),  
     color-stop(0.51, rgb(139,198,66)),  
     color-stop(0.87, rgb(158,217,41))  
     );  
   background: -moz-linear-gradient(  
     center bottom,  
     rgb(123,192,67) 2%,  
     rgb(139,198,66) 51%,  
     rgb(158,217,41) 87%  
     );  
   -webkit-border-top-left-radius:5px;  
   -webkit-border-top-right-radius:5px;  
   -moz-border-radius:5px 5px 0px 0px;  
   border-top-left-radius:5px;  
   border-top-right-radius:5px;  
 }  
 .table1 thead th:empty{  
   background:transparent;  
   border:none;  
 }  
 .table1 tbody th{  
   color:#fff;  
   text-shadow:1px 1px 1px #568F23;  
      text-align: left;  
   background-color:#9DD929;  
   border:1px solid #93CE37;  
   border-right:3px solid #9ED929;  
   padding:0px 10px;  
   background:-webkit-gradient(  
     linear,  
     left bottom,  
     right top,  
     color-stop(0.02, rgb(158,217,41)),  
     color-stop(0.51, rgb(139,198,66)),  
     color-stop(0.87, rgb(123,192,67))  
     );  
   background: -moz-linear-gradient(  
     left bottom,  
     rgb(158,217,41) 2%,  
     rgb(139,198,66) 51%,  
     rgb(123,192,67) 87%  
     );  
   -moz-border-radius:5px 0px 0px 5px;  
   -webkit-border-top-left-radius:5px;  
   -webkit-border-bottom-left-radius:5px;  
   border-top-left-radius:5px;  
   border-bottom-left-radius:5px;  
 }  
 .table1 tfoot td{  
   color: #9CD009;  
   font-size:32px;  
   text-align:center;  
   padding:10px 0px;  
   text-shadow:1px 1px 1px #444;  
 }  
 .table1 tfoot th{  
   color:#666;  
 }  
 .table1 tbody td{  
   padding:10px;  
   text-align:center;  
   background-color:#DEF3CA;  
   border: 2px solid #E7EFE0;  
   -moz-border-radius:2px;  
   -webkit-border-radius:2px;  
   border-radius:2px;  
   color:#666;  
   text-shadow:1px 1px 1px #fff;  
 }  
 .table1 tbody span.check::before{  
   content : url(../images/check0.png)  
 }  

 

TAMPILAN JADI (Screenshot)


scr_mainpage Gambar 1. Tampilan Web Awal

scr_modaldetail

Gambar 2. Tampilan Detail Biodata Dalam Dialog Modal

Advertisements

2 thoughts on “STIKOMBALI – Tugas Perancangan Web – Membuat Biodata Dengan HTML dan CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s