TUGAS 2 Pemrograman Web

Pembuatan CV menggunakan Table pada html

Melanjutkan pada tugas 1 sebelumnya, kita akan menambahkan riwayat pendidikan dan pengalaman menggunakan table html yang sebelumnya telah kita pelajari. 
Seperti ini nanti website tampilan kita, dapat dilihat di link berikut




Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:

  1. Tag <table> untuk membungkus tabelnya
  2. Tag <thead> untuk membungkus bagian kepala tabel
  3. Tag <tbody> untuk membungkus bagian body dari tabel
  4. Tag <tr> (tabel row) untuk membuat baris
  5. Tag <td> (table data) untuk membuat sel
  6. Tag <th> (table head) untuk membuat judul pada header
Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>. Sementara tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak.

Maka, kita beri tag table dan teman-temannya pada html code kita sebelumnya, dan menjadi seperti berikut

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Membuat CV</title>
  8.  
  9.         <style>
  10.             * {
  11.                 font-family: Arial, Helvetica, sans-serif;
  12.             }
  13.  
  14.             .wrap{
  15.                 background-color:rgba(255,255,255,0.7);
  16.                 width: 800px;
  17.                 color:black;
  18.                 margin: 20px auto;
  19.                 padding: 15px;
  20.             }
  21.         </style>
  22.     </head>
  23.  
  24.     <body>
  25.         <div class="wrap">
  26.             <h1 style="text-align: center;">Biodata Diri</h1>
  27.             <hr align="center" width="25%" style="border-top: 3px double #8c8b8b;" />
  28.            
  29.             <table>
  30.                 <tr>
  31.                     <td rowspan="12" width="100px">
  32.                         <img src="untitled2.JPG" width="200px" style="display: block; border-radius: 50%; border-color: black; margin-right: 30px;" border="2px">
  33.                     </td>
  34.                 </tr>
  35.  
  36.                 <tr>
  37.                     <td><b>Nama Lengkap</b></td>
  38.                     <td>:</td>
  39.                     <td>Johnivan Aldo Sudiono</td>
  40.                 </tr>
  41.  
  42.                 <tr>
  43.                     <td><b>Tempat, Tanggal Lahir</b></td>
  44.                     <td>:</td>
  45.                     <td>Mojokerto, 11 Juli 2001</td>
  46.                 </tr>
  47.  
  48.                 <tr>
  49.                     <td><b>Jenis Kelamin</b></td>
  50.                     <td>:</td>
  51.                     <td>Laki-laki</td>
  52.                 </tr>
  53.                
  54.                 <tr>
  55.                     <td><b>Alamat</b></td>
  56.                     <td>:</td>
  57.                     <td>Jl. Apel no. 26, Kota Mojokerto</td>
  58.                 </tr>
  59.  
  60.                 <tr>
  61.                     <td><b>Agama</b></td>
  62.                     <td>:</td>
  63.                     <td>Kristen</td>
  64.                 </tr>
  65.                
  66.                 <tr>
  67.                     <td><b>Pekerjaan</b></td>
  68.                     <td>:</td>
  69.                     <td>Pelajar/Mahasiswa</td>
  70.                 </tr>
  71.  
  72.                 <tr>
  73.                     <td><b>Kewarganegaraan</b></td>
  74.                     <td>:</td>
  75.                     <td>Indonesia</td>
  76.                 </tr>
  77.             </table>
  78.  
  79.             <br/>
  80.            
  81.             <table>
  82.                 <h3>Riwayat Pendidikan</h3>
  83.  
  84.                 <tr>
  85.                     <td><b>SD</b></td>
  86.                     <td>:</td>
  87.                     <td>SDK Wijana Sejati, Mojokerto</td>
  88.                     <td>(2007 - 2013)</td>
  89.                 </tr>
  90.  
  91.                 <tr>
  92.                     <td><b>SMP</b></td>
  93.                     <td>:</td>
  94.                     <td>SMP Taruna Nusa Harapan, Mojokerto</td>
  95.                     <td>(2013 - 2016)</td>
  96.                 </tr>
  97.  
  98.                 <tr>
  99.                     <td><b>SMA</b></td>
  100.                     <td>:</td>
  101.                     <td>SMAK St. Louis 1, Surabaya</td>
  102.                     <td>(2016 - 2019)</td>
  103.                 </tr>
  104.  
  105.                 <tr>
  106.                     <td><b>Perguruan Tinggi</b></td>
  107.                     <td>:</td>
  108.                     <td>S1 Informatika - ITS, Surabaya</td>
  109.                     <td>(2019 - sekarang)</td>
  110.                 </tr>
  111.             </table>
  112.  
  113.             <br/>
  114.  
  115.             <table>
  116.                 <h3>Informasi Kontak</h3>
  117.  
  118.                 <tr>
  119.                     <td><b>Nomor HP</b></td>
  120.                     <td>:</td>
  121.                     <td>+6285708661939</td>
  122.                 </tr>
  123.  
  124.                 <tr>
  125.                     <td><b>Email</b></td>
  126.                     <td>:</td>
  127.                     <td><a href="mailto:johnivanaldo@gmail.com">johnivanaldo@gmail.com</a></td>
  128.                 </tr>
  129.             </table>
  130.  
  131.             <br/>
  132.  
  133.             <table>
  134.                 <h3>Pengalaman</h3>
  135.  
  136.                 <tr>
  137.                     <td>Staff Kopma Dr. Angka ITS</td>
  138.                     <td>(2020 - 2021)</td>
  139.                 </tr>
  140.                
  141.                 <tr>
  142.                     <td>Asisten Bidang Kopma Dr. Angka ITS</td>
  143.                     <td>(2021 - sekarang)</td>
  144.                 </tr>
  145.  
  146.                 <tr>
  147.                     <td><br/></td>
  148.                 </tr>
  149.  
  150.                 <tr>
  151.                     <td>Video Solution Maker at Colearn</td>
  152.                     <td>(Agustus 2020 - sekarang)</td>
  153.                 </tr>
  154.  
  155.                 <tr>
  156.                     <td>Machine Learning Tester at Colearn</td>
  157.                     <td>(November 2020 - Januari 2021)</td>
  158.                 </tr>
  159.  
  160.                 <tr>
  161.                     <td>Video Solution Maker ITS Ambassador</td>
  162.                     <td>(Januari 2021 - April 2021)</td>
  163.                 </tr>
  164.             </table>
  165.         </div>
  166.     </body>
  167. </html>

Nah, itulah contoh penggunaan tag table pada CV kita, dan terlihat CV kita menjadi lebih rapi dari sebelumnya. Terimakasih telah membaca website ini, jangan lupa tetap selalu jaga kesehatan!
 

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 5 PBO : Game The World of Zuul

Gambar
Halo teman-teman, saat ini kita akan belajar membuat sebuah project kecil yang dibuat berdasarkan buku Object First With Java. Game ini bisa menjadi implementasi untuk Designing Classes. Permainan ini sudah aku ubah sedikit, sehingga ada unsur mengenai ITS nya. Terdapat 5 kelas pada project ini, yaitu: CommandWords - Kelas ini untuk mendefinisikan semua Command yang valid dalam permainan (pergi, help, pulang). Ini dilakukan dengan menyimpan array objek String yang mewakili kata-kata perintah. Parser - Berfungsi untuk membaca baris input dari terminal danmenafsirkannya sebagai Command. Ini membuat objek dari Class Command yang mewakili perintah itu masuk. Command - Sebuah objek perintah mewakili perintah yang dimasukkan oleh pengguna. Ini memiliki metode yang memudahkan kita untuk memeriksa apakah ini adalah perintah yang valid dan untuk mendapatkan kata pertama dan kedua dari perintah tersebut sebagai string terpisah. Room - Objek ruangan merepresentasikan lokasi dalam game.  Game ...
Baca selengkapnya

TUGAS 7 PBO : CLASS JAVAFX

Gambar
Pemrograman JavaFX   JavaFX adalah library Java yang berguna dalam membangun Rich Internet Applications (RIA). Aplikasi yang dikembangkan menggunakan JavaFX dapat berjalan di berbagai perangkat modern saat ini. Seperti Komputer Desktop, Mobile Phones, TV, Tablet, dll. Untuk mengembangkan Aplikasi GUI menggunakan bahasa pemrograman Java, programmer mengandalkan perpustakaan seperti Advanced Windowing Toolkit dan Swings. Setelah munculnya JavaFX, programmer java sekarang dapat mengembangkan aplikasi GUI dengan konten yang banyak. Dengan menggunakan teknologi Java, aplikasi ini memiliki tingkat penetrasi browser yang lebih tinggi daripada sebelum-sebelumnya. Dibeberapa compiler seperti IntelliJ tidak bisa menerapkan ini, karena sebenarnya JavaFX sudah tidak bisa dipakai diatas JDK 11. untuk mempelajari ini bhanay bisa menggunakan BlueJ atau Eclipse. Nah untuk semakin memahami penggunaan class JavaFX, mari kita buat program sederhannya. Berikut contoh dari Fortune Teller, dimana setiap...
Baca selengkapnya

Tugas 4 PBO : Technical Support System Sederhana

Gambar
  Sebuah Technical Support System yang sering dipakai di berbagai aplikasi pasti memakai bot didalamnya, dan itu memerlukan ilmu yang lebih tinggi karena merupakan salah satu contoh aplikasi kognitif dan penerapan kecerdasan buatan, atau bahasanya kerennya artificial intelligence . Tapi kali ini kita akan membuat yang versi sederhana saja berdasarkan buku Objects First With Java bab 5 bagian 5.2. Jadi di buku sebenarnya sudah dibuatkan dasar-dasar pengembangan materinya, namun kita ubah sedikit agar terlihat lebih nyata programnya, serta kita ubah menggunakan Bahasa Indonesia sehingga lebih mudah dimengerti. Input Reader Responder Support System main Support System Berfungsi untuk menampilkan hasil program kita Beberapa contoh hasil program dari input yang berbeda :   Nah itu lah beberapa contoh yang bisa kita buat, kalian bisa kok menggunakan kode tersebut untuk membuat perintah se-mau kalian. Semangattt !!!!!!
Baca selengkapnya