Langsung ke konten utama

Tugas 4 Pemrograman Web A

Website Katalog Barang

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

Pada pertemuan keempat kelas PWEB A, kami diberikan tugas untuk mengembangkan sebuah website katalog barang dengan memanfaatkan penggunaan CSS. 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 dapat diakses lewat link ini.

Berikut adalah tampilan hasil websitenya : 
  1. Tampilan Beranda Utama





  2. Tampilan Tentang


  3. Tampilan Kontak


Source Code

Untuk source code dari webnya, masing - masing halaman tampilan source code HTML-nya saya pisahkan. Untuk styling template halaman, saya masukkan kedalam style.css. Selain metode external style sheet, untuk styling khusus tertentu pada suatu elemen, digunakan metode inline  style. Berikut source code dari website tersebut :
  1. index.html
    <!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>Katalog Barang</title>
    <link rel="stylesheet" href="./style.css">
    </head>
    <body>
    <div class="header">
    <header>
    <h1 style="font-family: 'Georgia'; text-align: center; font-size:300%;">Fesyenista</h1>
    <nav>
    <ul>
    <li><a href="./index.html" class="current"><u>Home</u></a></li>
    <li><a href="./content/about.html"><u>About</u></a></li>
    <li ><a href="./content/contact.html"><u>Contact</u></a></li>
    </ul>
    </nav>
    </header>
    </div>
    <section class="content">
    <article>
    <figure class="odd">
    <img src="./images/lss.jpg" alt="" style="width: 300px; height: 500px;">
    </figure>
    <hgroup>
    <h2 style="font-size: 200%;">Long Sleeve White T-Shirt</h2>
    </hgroup>
    <p class="description">This piece is particularly suitable for men who are active throughout the day. Thanks to the yarn combination of temperature-regulating merino wool and quick-drying lyocell. It offers great wearing comfort and ensures a great body feel. The surface is smoothly knitted and will suit any look.</p>
    <a href="https://wa.me/+6281917677313"><button>Beli Sekarang</button></a>
    <p style="float: inline-end; padding-right: 70px; font-weight: 900;">Rp 150.000,00</p>
    </article>
    <article>
    <figure class="even">
    <img src="./images/scc.webp" alt="" style="width: 300px; height: 500px;">
    </figure>
    <hgroup>
    <h2 style="font-size: 200%;">Slim Fit Cotton Chinos</h2>
    </hgroup>
    <p class="description">An oversized fit shirt with dropped shoulders and a chest pocket. Made from 100% Linen-Cotton. It is dedicated for those who are obsessed with stripes, crafted cotton shirts, quirky details and calm hues of brown and white on a daily basis without sacrificing masculinity.
    </p>
    <a href="https://wa.me/+6281917677313"><button>Beli Sekarang</button></a>
    <p style="float: inline-end; padding-right: 70px; font-weight: 900;">Rp 450.000,00</p>
    </article>
    </section>
    <div class="pagination">
    <a href="./index.html" class="active">1</a>
    <a href="./content/page2.html">2</a>
    <a href="./content/page2.html">&raquo;</a>
    </div>
    <footer style=>
    <div class="footer-content">
    <h2 style="font-family: 'Georgia'; text-align: center">Fesyenista</h2>
    <p style="text-align: center; font-family: 'Trebuchet MS';">&copy; 2021 All Rights Reserved</p>
    </div>
    </footer>
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub
  2. page2.html
    <!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>Katalog Barang</title>
    <link rel="stylesheet" href="../style.css">
    </head>
    <body>
    <div class="header">
    <header>
    <h1 style="font-family: 'Georgia'; text-align: center; font-size:300%;">Fesyenista</h1>
    <nav>
    <ul>
    <li><a href="../index.html" class="current"><u>Home</u></a></li>
    <li><a href="./about.html"><u>About</u></a></li>
    <li ><a href="./contact.html"><u>Contact</u></a></li>
    </ul>
    </nav>
    </header>
    </div>
    <section class="content">
    <article>
    <figure class="odd">
    <img src="../images/mgs.jpg" alt="" style="width: 300px; height: 500px;">
    </figure>
    <hgroup>
    <h2 style="font-size: 200%;">Men Cream Shorts</h2>
    </hgroup>
    <p class="description">This short has simple and elegant design. Breathable mesh lining lends comfort and a Velcro-fastening pocket keeps essentials secure. Really comfortable and suited well with your everyday needs.</p>
    <a href="https://wa.me/+6281917677313"><button>Beli Sekarang</button></a>
    <p style="float: inline-end; padding-right: 70px; font-weight: 900;">Rp 450.000,00</p>
    </article>
    <article>
    <figure class="even">
    <img src="../images/pls.jpg" alt="" style="width: 300px; height: 500px;">
    </figure>
    <hgroup>
    <h2 style="font-size: 200%;">Long Sleeve Pink Shirt</h2>
    </hgroup>
    <p class="description">Shirt with quilted lining. Designed with love. Made from the best material possible for summer weather, perfect for your casual needs. Inside patch pockets. Removable additional button placket.</p>
    <a href="https://wa.me/+6281917677313"><button>Beli Sekarang</button></a>
    <p style="float: inline-end; padding-right: 70px; font-weight: 900;">Rp 350.000,00</p>
    </article>
    </section>
    <div class="pagination">
    <a href="../index.html" >&laquo;</a>
    <a href="../index.html">1</a>
    <a href="./page2.html" class="active">2</a>
    </div>
    <footer>
    <div class="footer-content">
    <h2 style="font-family: 'Georgia'; text-align: center">Fesyenista</h2>
    <p style="text-align: center; font-family: 'Trebuchet MS';">&copy; 2021 All Rights Reserved</p>
    </div>
    </footer>
    </body>
    </html>
    view raw page2.html hosted with ❤ by GitHub
  3. about.html
    <!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>Katalog Barang</title>
    <link rel="stylesheet" href="../style.css">
    </head>
    <body>
    <div class="header">
    <header>
    <h1 style="font-family: 'Georgia'; text-align: center; font-size:300%;">Fesyenista</h1>
    <nav>
    <ul>
    <li><a href="../index.html"><u>Home</u></a></li>
    <li><a href="./about.html" class="current"><u>About</u></a></li>
    <li ><a href="./contact.html"><u>Contact</u></a></li>
    </ul>
    </nav>
    </header>
    </div>
    <section class="content">
    <article>
    <figure class="odd">
    <img src="../images/profile2.jpg" alt="" style="width: 300px; height: 400px;">
    </figure>
    <hgroup>
    <h2 style="font-size: 200%;">Tentang Web...</h2>
    </hgroup>
    <pre class="description">
    Nama : Jonathan Leonardo H.S
    NRP : 05111940000150
    Kelas : Pemrograman Web A
    </pre>
    <p class="description">Halo, nama saya Jonathan Leonardo Hasiholan Simanjuntak. Saya adalah pembuat website ini. Website ini dibuat sebagai pemenuhan tugas saya <b><u>dalam membuat Web Katalog Barang dengan memanfaatkan Styling dari CSS</b></u> sebagai pemenuhan dari Tugas 4 kelas Pemrograman Web A 2021.</p>
    </article>
    </section>
    <footer>
    <div class="footer-content">
    <h2 style="font-family: 'Georgia'; text-align: center">Fesyenista</h2>
    <p style="text-align: center; font-family: 'Trebuchet MS';">&copy; 2021 All Rights Reserved</p>
    </div>
    </footer>
    </body>
    </html>
    view raw about.html hosted with ❤ by GitHub
  4. contact.html
    <!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>Katalog Barang</title>
    <link rel="stylesheet" href="../style.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style>
    tr{
    line-height: 2;
    }
    td{
    padding-left: 10px;
    }
    td p {
    font-size: 18px;
    }
    </style>
    </head>
    <body>
    <div class="header">
    <header>
    <h1 style="font-family: 'Georgia'; text-align: center; font-size:300%;">Fesyenista</h1>
    <nav>
    <ul>
    <li><a href="../index.html"><u>Home</u></a></li>
    <li><a href="./about.html"><u>About</u></a></li>
    <li ><a href="./contact.html" class="current"><u>Contact</u></a></li>
    </ul>
    </nav>
    </header>
    </div>
    <section class="content">
    <article>
    <h2>Contact Us</h2>
    <table>
    <tr class="phone" style="line-height: 2;">
    <td><i class="fa fa-mobile-phone fa-3x" aria-hidden="true" style="margin-left: 30px;"></i></td>
    <td style="padding-left: 10px;"><p>Phone</p></td>
    <td><p>:</p></td>
    <td><p>+6281917677313</p></td>
    </tr>
    <tr class="whatsapp" style="line-height: 2;">
    <td><i class="fa fa-whatsapp fa-2x" aria-hidden="true" style="margin-left: 30px;"></i></td>
    <td style="padding-left: 10px;"><p>Whatsapp</p></td>
    <td><p>:</p></td>
    <td><p><a href="https://wa.me/+6281917677313">+6281917677313</a></p></td>
    </tr>
    <tr class="email" style="line-height: 2;">
    <td><i class="fa fa-envelope-square fa-2x" aria-hidden="true" style="margin-left: 30px;"></i></td>
    <td style="padding-left: 10px;"><p>Email</p></td>
    <td><p>:</p></td>
    <td><p><a href="mailto:jonathanleonardo123@gmail.com?subject=Say hi!">jonathanleonardo123@gmail.com</a></p></td>
    </tr>
    <tr class="facebook" style="line-height: 2;">
    <td><i class="fa fa-facebook fa-2x" aria-hidden="true" style="margin-left: 30px;"></i></td>
    <td style="padding-left: 10px;"><p>Facebook</p></td>
    <td><p>:</p></td>
    <td><p><a href="https://www.facebook.com/jonathan.leonardo.3990" >Jonathan Leonardo</a></p></td>
    </tr>
    </table>
    </article>
    <article>
    <h2>Come to Our Store</h2>
    <figure class="odd">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3965.8280785784395!2d107.03039165018332!3d-6.286316395427825!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e698e182e94552f%3A0x8309e954a5483380!2sMutiara%20Gading%20Timur!5e0!3m2!1sen!2sid!4v1632481704600!5m2!1sen!2sid" width="400" height="350" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </figure>
    <hgroup>
    <h4>Alamat Kami :</h4>
    </hgroup>
    <p class="description">Perumahan Mutiara Gading Timur Blok E2 no.18, Mustika Jaya, Bekasi Timur, 17158</p>
    </article>
    </section>
    <footer>
    <div class="footer-content">
    <h2 style="font-family: 'Georgia'; text-align: center">Fesyenista</h2>
    <p style="text-align: center; font-family: 'Trebuchet MS';">&copy; 2021 All Rights Reserved</p>
    </div>
    </footer>
    </body>
    </html>
    view raw contact.html hosted with ❤ by GitHub
  5. style.css
    header,
    section,
    footer,
    nav,
    article,
    figure,
    figcaption {
    display: block;
    }
    body {
    max-width: 100%;
    overflow-x: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-top: 180px;
    }
    header {
    margin-bottom: 50px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgb(31, 30, 30);
    color: white;
    }
    nav ul {
    display: block;
    text-align: center;
    margin-left: -32px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 20px;
    }
    nav li {
    display: inline;
    margin-left: 20px;
    margin-right: 20px;
    }
    nav li a {
    color: #575454;
    }
    nav li a:hover,
    nav li a.current {
    color: #dddddd;
    }
    section.courses {
    float: left;
    width: 659px;
    border-right: 1px solid #eeeeee;
    }
    article {
    clear: both;
    overflow: auto;
    width: 680px;
    margin-left: auto;
    margin-right: auto;
    }
    hgroup {
    margin-top: 40px;
    }
    figcaption {
    font-size: 90%;
    text-align: left;
    }
    article {
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
    margin-bottom: 60px;
    }
    article .odd {
    float: left;
    margin: 20px;
    border: 1px solid #eeeeee00;
    }
    article .even {
    float: right;
    margin: 20px;
    border: 1px solid #eeeeee00;
    }
    .description {
    font-size: 12px;
    letter-spacing: 1.5px;
    line-height: 18px;
    font-weight: 900;
    }
    button {
    background-color: black; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 10px;
    transition-duration: 0.6s;
    }
    button:hover {
    background-color: rgb(170, 170, 170);
    color: black;
    cursor: pointer;
    }
    .pagination {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 50px;
    }
    .pagination a {
    color: black;
    float: inherit;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color 0.6s;
    }
    .pagination a.active {
    background-color: black;
    color: white;
    }
    .pagination a:hover:not(.active) {
    background-color: rgb(170, 170, 170);
    color: black;
    }
    footer {
    clear: both;
    color: white;
    background-color: rgb(31, 30, 30);
    height: 120px;
    bottom: 0;
    }
    .footer-content {
    padding-top: 10px;
    }
    view raw style.css 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