TUGAS 1 Pemrograman Web

Pembuatan CV menggunakan HTML dan hosting online

Pada pertemuan pertama kali ini, saya diberi tugas untuk mengerjakan pembuatan CV menggunakan HTML dan melakukan postingan secara online, nah untuk membuatnya sendiri, kita hanya perlu menggunakan visual studio code, dan untuk hostingannya, kita menggunakan github pages / github.io agar tidak usah membayar dan dapat diakses secara gratis.

Seperti ini nanti website tampilan kita, dapat dilihat di link berikut




Nah, untuk membuat CV seperti ini, langkah pertama tentu kita harus menggunakan atribut / tag dasar dalam penggunaan HTML


Tag adalah sebauh penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung siku (<...>), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut. Setiap tag memiliki fungsi masing-masing. Ada yang digunakan untuk membuat judul, membuat link, membuat paragraf, heading, dan lain-lain.

Tag sendiri jumlahnya mencapai puluhan dalam HTML, namun kita tidak usah mengingat semuanya, hanya sebagian saja yang penting, yaitu

  • <!DOCTYPE html> — untuk deklarasi type dokumen;
  • <html> — tag utama dalam HTML;
  • <head> — untuk bagian kepala dari dokumen;
  • <title> — untuk judul web;
  • <body> — untuk bagian body dari dokumen.
Selanjutnya kita dapat menggunakan tag tersebut untuk membuat website CV dan kita susun menggunakan urutan sebagai 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 cara membuat CV website menggunakan HTML dan Github pages. Terimakasih telah membaca website ini, jangan lupa tetap selalu jaga kesehatan!
 

Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS 5 PEMROGRAMAN WEB (A) - Form Validasi

Gambar
Tugas kali ini membuat website form validasi (di sini validasi untuk pendataan vaksin mahasiswa). Dalam proses pengerjaannya, menggunakan HTML, CSS (Bootstrap), dan JavaScript serta VSCode sebagai text editor. JavaScript di sini dipakai untuk proses validasi beberapa kolom inputan yang ada di form. Laman website-nya dapat diakses pada link berikut . Untuk hosting web sendiri memakai Netlify. Konten dari website: Main page Berisi halaman depan yang memuat form validasi mahasiswa. Ada beberapa kolom yang semuanya wajib diisi dan tidak boleh kosong, yaitu: Nama, tidak boleh melebihi 50 karakter. NRP, harus memiliki panjang sebanyak 10-16 karakter, dan harus merupakan angka (number). Email, harus berformat seperti email pada umumnya, seperti xxx@gmail.com. Domisili Jurusan Status Vaksin Source Code index.html style.css script.js Berikut ini adalah implementasi hasil pelajaran javascript saya, semoga dapat bermanfaat bagi yang membaca :)
Baca selengkapnya

ETS MPPL A 2021

 ETS MPPL A 2021 Pada kesempatan kali ini, kelas kami diberikan tugas untuk mengerjakan ETS yang dibagi dalam 2 sesi, yaitu ada pertanyaan teori maupun studi kasus yang dikerjakan secara berkelompok, berikut ini adalah jawaban dari pertanyaan teori saya Terimakasih telah membaca artikel ini, semoga sehat selalu
Baca selengkapnya

ETS PWEB A 2021

ETS PWEB A 2021 Pada kesempatan kali ini, saya akan menuliskan hasil pekerjaan ETS saya, dalam ETS dibagi menjadi 2 bagian, yaitu pertanyaan teoritis dan coding pembuatan website. Berikut ini adalah jawaban dari bagian pertanyaan teoritis saya :   Terimakasih telah membaca artikel ini, semoga sehat selalu
Baca selengkapnya