Scribd Logo
Unggah

Selamat datang di Scribd!

  • Hansevantatipata 3ka02 12119740 Ujian Tipe-A

    Diunggah oleh

    zekri fitra ramadhan
    10 tayangan6 halaman

    Judul Asli

    HANSEVANTATIPATA_3KA02_12119740_UJIAN_TIPE-A

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    10 tayangan6 halaman

    Hansevantatipata 3ka02 12119740 Ujian Tipe-A

    Diunggah oleh

    zekri fitra ramadhan

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 6

    Nama : Hans Evan Tatipata

    Kelas : 3KA02
    Mata Praktikum : Analisis Interface
    Matakuliah : IMK
    Pertemuan Ke : Ujian
    Tanggal : 1/8/2022
    Soal Tipe : A

    Laboratorium Sistem Informasi


    Universitas Gunadarma
    PTA 2021 / 2022
    Tugas :
    1. Buatlah tampilan website beserta css berdasarkan design pada gambar dibawah! Cantumkan
    juga cara pembuatan beserta gambar, kodingan, serta hasil outputnya.

    Dengan ketentuan tampilan dibawah ini:


    • Terdapat background warna ataupun gambar.
    • Pemilihan warna teks bebas, disesuaikan dengan background yang digunakan.

    2. Buatlah sebuah program seperti output dibawah ini! Cantumkan juga cara pembuatan beserta
    gambar, kodingan, serta hasil outputnya.

    • Jika ditekan tombol simpan akan muncul dialog box seperti gambar dibawah
    CATATAN !!!
    Kumpulkan Jawaban Dalam Format Pdf.
    Gunakan Template Atau Format Ini Untuk Menjawab.
    Praktikan Yang Jawabanya Sama [ Kesamaan 80% ] Akan Mendapatkan Nilai Minimal !
    Praktikan Yang Tidak Menjelaskan Logika Pengerjaan Akan Mendapatkan Nilai Minimal !
    Jawaban Yang Dikumpulkan Diluar Batas Waktu Pertemuan Tidak Akan Diinput Nilainya.!

    Jawaban :
    1. Source code
    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>Document</title>
    <link rel="stylesheet" href="ujian.css">
    Membuat tag link untuk menyambungkan html dan cssnya
    </head>
    <body>
    Membuat tag h2 dan tag br untuk memberikan spasi kebawah
    <h2>Selamat Datang <br> di website ini</h2>

    <div class="paragraf"> Membuat tag div dengan class paragraf untuk sebuah
    kotak yang diatur css
    <p>Paragraf 1</p> Membuat tag p untuk isi dari div tsb
    </div>
    <div class="paragraf"> Membuat tag div dengan class paragraf untuk sebuah
    kotak yang diatur css
    <p>Paragraf 2</p> Membuat tag p untuk isi dari div tsb
    </div>
    </body>
    Menutup tag html
    </html>
    CSS :
    *{
    padding: 0;
    margin: 0;
    background-color: beige;
    font-family: Arial, Helvetica, sans-serif;
    } Untuk mereset default html dan memberikan background dengan warna beige dan
    mengatur jenis font kesemua aatribut htmlnya

    h2{
    text-align: center;
    margin-top: 1em;
    text-transform: uppercase;
    font-weight: bold;
    } Memberikan tag h2 textalign ketengah , memberikan batas atas atau margin top,
    mengubah tulisannya menjadi huruf besar semua dan memberikan bold text

    .paragraf{ Membuat border di tiap div yang mempunyai class paragraph dan mengatur
    ukuran kotak tsb dengan height dan width serta membuat posisinya menjadi tengah
    dengan margin auto dan margin top untuk memberikan batas
    border: 1px solid black;
    width: 800px;
    height: 50px;
    margin: auto;
    margin-top:20px;
    }

    Membuat tulisannnya lebih enak diliat dengan margin top


    .paragraf p {
    margin-top: 16px;
    }

    Output :
    2. Source Code

    <!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>Document</title>
    <style> Untuk cssnya
    span{
    margin: 10px; Untuk memberi batas margin di tag span 10px
    }
    label{
    position:absolute; Untuk membuat posisi tag label absolute
    }
    .kotak input{
    margin-left: 100px; memberi margin left tag input di class kotak
    }
    .radio{
    margin: 0; Untuk membuat marginnya reset pada class radio
    margin-left:5px !important; Untuk memberi margin left 5px dan
    importat yang artinya akan dieksekusi terlebih dahulu
    }
    .form{
    margin-top: 5px; Untuk memberi batas margin top 5px pada class from
    }
    .btn{
    margin-left: 10px; Untuk memberi margin left 10px pada class btn
    }
    </style>
    </head>
    <body>
    <h2>Pendaftaran Mahasiswa Baru</h2> Untuk membuat tag h2 atau judulnya
    <div class="kotak" style="background-color: red; width: fit-content; padding:
    30px;"> Untuk membuat kotak dengan tag div yang berwarna merah dengan ukurannya
    menyamakan konten isinya dan paddingnya 30px
    <form> Untuk membuat form
    <div class="form"> Untuk merapihkan dengan css
    <label>NIS : </label> <span></span> Untuk tag label
    <input type="text" name="" id=""> <br> Untuk tag input dengan
    value text yang name dan id nya boleh kosong boleh juga diisi
    </div>
    <div class="form">
    <label>Nama Lengkap : </label> <span></span>
    <input type="text" name="" id=""> <br>
    </div>
    <div class="form">
    <label>Alamat : </label> <span></span>
    <input type="text" name="" id=""> <br>
    </div>
    <div class="form">
    <label>Jenis Kelamin </label> <span></span>
    <input type="radio" Laki-Laki Untuk tag input dengan value radio
    <input type="radio" class="radio">Perempuan
    </div>
    <br><br> Untuk break line dengan tag <br>
    <span></span>
    <input type="submit" value="Simpan" onclick="alert('Data Tersimpan')"
    class="btn"> Untuk membuat tombol submit dan onclick javascript alert yang jika
    diklik akan muncul pop up data tersimpan
    <input type="reset" value="Hapus" class="radio"> Untuk mereset form

    </form>
    </div>

    </body>
    </html>

    Output

    Anda mungkin juga menyukai