Langsung ke konten utama

Tugas 2 Pemrograman Web A

Resume Sederhana dengan HTML

Nama   : Jonathan Leonardo Hasiholan Simanjuntak
NRP     : 05111940000150
Kelas    : Pemrograman Web A 2021

Pada pertemuan kedua kelas PWEB A, kami diberikan tugas untuk membuah resume sederhana dengan menggunakan HTML. Adapun hasilnya dapat di akses lewat CV Ardo.

Berikut adalah tampilan hasilnya:

 

Source Code

Terdapat dua source code HTML yang saya gunakan untuk menyusun resume tersebut. Yang pertama untuk data pribadi dan yang kedua untuk informasi umum. Berikut source code dari kedua file tersebut. 

  1. Data Pribadi (Tampilan Utama)
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CV Ardo</title>
    <style>
    *{
    font-family: "Arial";
    }
    table{
    width: 100%;
    border: 1px solid #ffffff;
    padding: 2px;
    }
    td{
    border: 1px solid #ffffff;
    text-align: left;
    padding: 8px;
    }
    tr:nth-child(odd){
    background-color: #03a39e;
    }
    tr:nth-child(even){
    background-color:#00a9b5;
    }
    .needshadow{
    text-shadow:
    -1px -1px white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white;
    }
    body{
    background-color: lightblue;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    }
    </style>
    </head>
    <body>
    <div>
    <h1 align="center">CV Jonathan Simanjuntak</h1>
    <table>
    <tr>
    <td class="needshadow" colspan="3" style="font-size: 20px ;text-align: center;"><b>Data Pribadi</b></td>
    </tr>
    <tr>
    <td rowspan="10"><img src="images/profil.jpg" width="200px" style="display: block; margin-left: 20px; margin-right:20px"></td>
    <td><b>Nama</b></td>
    <td>Jonathan Leonardo Hasiholan Simanjuntak</td>
    </tr>
    <tr>
    <td><b>NRP</b></td>
    <td>05111940000150</td>
    </tr>
    <tr>
    <td><b>Tempat,Tanggal Lahir</b></td>
    <td>Bekasi,13 Agustus 2000</td>
    </tr>
    <tr>
    <td><b>Jenis Kelamin</b></td>
    <td>Laki - laki</td>
    </tr>
    <tr>
    <td><b>Agama</b></td>
    <td>Protestan</td>
    </tr>
    <tr>
    <td><b>Alamat</b></td>
    <td>Perumahan Mutiara Gading Timur Blok E2 no.18, Mustika Jaya, Bekasi Timur, Jawa Barat </td>
    </tr>
    <tr>
    <td><b>Status</b></td>
    <td>Belum Menikah</td>
    </tr>
    <tr>
    <td><b>Pekerjaan</b></td>
    <td>Mahasiswa</td>
    </tr>
    <tr>
    <td><b>Kewarganegaraan</b></td>
    <td>Indonesia</td>
    </tr>
    <tr>
    <td><b>Informasi Umum</b></td>
    <td><a href="content\detail.html"><button>Cari tahu!</button></a></td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub

  2. Informasi Umum
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Informasi Umum</title>
    <style>
    *{
    font-family: "Arial";
    }
    table{
    width: 100%;
    border: 1px solid #ffffff;
    padding: 2px;
    }
    td{
    border: 1px solid #ffffff;
    text-align: left;
    padding: 12px;
    }
    tr:nth-child(odd){
    background-color: #03a39e;
    }
    tr:nth-child(even){
    background-color:#00a9b5;
    }
    .needshadow{
    text-shadow:
    -1px -1px white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white;
    }
    body{
    background-color: lightblue;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    }
    </style>
    </head>
    <body>
    <h1 align="center">CV Jonathan Simanjuntak</h1>
    <br>
    <div>
    <table>
    <tr>
    <td class="needshadow" colspan="3" style="font-size: 20px ;text-align: center;"><b>Riwayat Pendidikan</b></td>
    </tr>
    <tr>
    <td style="text-align: center;"><b>Jenjang Pendidikan</b></td>
    <td style="text-align: center;"><b>Keterangan</b></td>
    <td style="text-align: center;"><b>Tahun</b></td>
    </tr>
    <tr>
    <td>Sekolah Dasar</td>
    <td>SD Kasih Bunda</td>
    <td>2006 - 2012</td>
    </tr>
    <tr>
    <td>Sekolah Menengah Pertama</td>
    <td>SMPN 2 Kota Bekasi</td>
    <td>2012 - 2015</td>
    </tr>
    <tr>
    <td>Sekolah Menengah Atas</td>
    <td>SMAN 1 Kota Bekasi</td>
    <td>2015 - 2018</td>
    </tr>
    <tr>
    <td>Perguruan Tinggi</td>
    <td>Institut Teknologi Sepuluh Nopember</td>
    <td>2019 - Now</td>
    </tr>
    </table>
    </div>
    <div>
    <table style="margin-top: 60px;">
    <tr>
    <td class="needshadow" colspan="3" style="font-size: 20px ;text-align: center;"><b>Informasi Umum</b></td>
    </tr>
    <tr>
    <td><b>No.Telp</b></td>
    <td>(+62)819-1767-7313</td>
    </tr>
    <tr>
    <td><b>Email</b></td>
    <td><a href="mailto:jonathanleonardo123@gmail.com">jonathanleonardo123@gmail.com</a></td>
    </tr>
    <tr>
    <td><b>Hobi</b></td>
    <td>Mendengarkan Musik</td>
    </tr>
    <tr>
    <td><b>Cerita Dari Hobi Saya</b></td>
    <td>Saya biasanya suka menghabiskan waktu saya untuk mendengarkan musik. Kegiatan apapun yang saya lakukan, biasanya saya lakukan sambil mendengarkan musik. Genre musik favorit saya adalah Japanese City Pop & New Orleans Jazz.</td>
    </tr>
    </table>
    </div>
    <a href="..\index.html"><button style="display: block; margin-left: auto; margin-right: auto; margin-top: 40px;">Kembali Ke Data Diri</button></a>
    </body>
    </html>
    view raw detail.html hosted with ❤ by GitHub

Mohon maaf apabila terdapat kesalahan atau kekurangan pada pekerjaan saya. Sekian dari saya, terima kasih atas perhatiannya.

Label

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 Pemrograman Web A

Profil & Portofolio Pribadi Nama    : Jonathan Leonardo Hasiholan Simanjuntak NRP      : 05111940000150 Kelas     : Pemrograman Web A 2021 Link Profil : Ardo Profile Link Repo : Profile Repository Pada tugas ini, saya membuat profil dan portofolio pribadi dengan memanfatkan tema yang disediakan di plaform Hugo (Static Site Generator)yaitu Hugo Profile v3 . Kemudian, saya hosting -kan resource yang berhasil di generate lewat Github Pages. Berikut ini adalah tampilan hasilnya,   Tahapan Pembuatan Profile Berikut adalah penjelasan singkat mengenai tahapan - tahapan yang saya lakukan untuk membuat halaman profil pribadi saya,  Pertama - tama, install Hugo terlebih dahulu. Panduan instalasinya bisa dilihat di Install Hugo . Setelah Hugo berhasil di-instal. Buka command promopt pada perangkat anda dan jalankan perintah : hugo version Jika perintah "hugo" sudah dikenali, maka proses instalasi hugo telah berhasil. Gambar 2.1 Hugo be...
Posting Komentar
Baca selengkapnya

Tugas 6 Pemrograman Web A

News Website Using Bootstrap Nama     : Jonathan Leonardo Hasiholan Simanjuntak NRP       : 05111940000150 Kelas      : Pemrograman Web A 2021 Pada pertemuan ketujuh kelas PWEB A, kami diberikan tugas untuk mengembangkan sebuah website redaksi berita dengan memanfaatkan penggunaan Bootstrap. Setelah website berhasil di susun secara lokal, website yang kita susun tersebut juga akan di  hosting -kan. Pada tugas ini,  hosting  website dilakukan menggunakan Github Pages. Websitenya sendiri dapat diakses lewat link  ini . Berikut adalah tampilan dari hasil websitenya : Tampilan Halaman Utama Website Tampilan Halaman Contact Us Tampilan Pop Up Login Form   Source Code Untuk source code dari webnya, terdapat empat file source code yang saya gunakan untuk menyusun website tersebut. Dua diantaranya adalah index.html dan contact.html. Pada halaman index.html terdapat list berita yang tersusun kedalam 2 buah image...
Posting Komentar
Baca selengkapnya

Tugas 3 Pemrograman Web A

Warung Tegal HTML 5 Nama     : Jonathan Leonardo Hasiholan Simanjuntak NRP       : 05111940000150 Kelas      : Pemrograman Web A 2021 Pada pertemuan ketiga kelas PWEB A, kami diberikan tugas untuk mengembangkan sebuah website rumah makan "Warung Tegal" dengan memanfaatkan HTML5. Kami juga diminta untuk menambahkan image carousel  dan video player  pada website yang akan kami kembangkan. Adapun hasilnya dapat di akses lewat  Warung Tegal Website . Berikut adalah tampilan dari hasilnya : Tampilan Beranda Tampilan Daftar Masakan Tampilan Katering Tampilan Tentang Tampilan Kontak Source Code Untuk source code dari webnya, masing - masing halaman tampilan source code HTML-nya saya pisahkan. Di dalam setiap file HTML, terdapat masing - masing styling yang digunakan untuk halaman tersebut. Berikut source code dari kelima tampilan diatas : Halaman Beranda Halaman Daftar Masakan Halaman Katering Halaman Tentang Halaman Ko...
Posting Komentar
Baca selengkapnya