Scribd Logo
Unggah

Selamat datang di Scribd!

  • Laporan Akhir Dreamweaver

    Diunggah oleh

    Haviansyah
    20 tayangan4 halaman
    Laporan Akhir Dreamweaver Gunadarma Laboratorium SIstem Informasi

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Laporan Akhir Dreamweaver Gunadarma Laboratorium SIstem Informasi

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    20 tayangan4 halaman

    Laporan Akhir Dreamweaver

    Diunggah oleh

    Haviansyah
    Laporan Akhir Dreamweaver Gunadarma Laboratorium SIstem Informasi

    Hak Cipta:

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

    Laporan Akhir Dreamweaver

    Nama : Frida Alifia O.


    NPM : 12117439
    Kelas : 2KA21
    Baris :1
    Ketua : Nur Hikmah
    Asisten : Ade R
    Materi : Dreamweaver
    Tanggal Praktikum : 16 Oktober 2019

    Paraf

    ( )

    Laboratorium Sistem Informasi


    PTA 2019/2020
    Membuat Form Biodata Menggunakan Dreamweaver
    Hal pertama yang dilakukan adalah membuka Adobe Dreamweaver. Lalu buat file html
    baru, hal selanjutnya yang dilakukan adalah membuat kerangka form menggunakan HTML di
    dalam tag <body> (dalam HTML di setiap penulisan tag harus diberi penutup tag seperti
    <body></body>), code dapat dilihat di gambar di bawah ini.

    <div> merupakan wadah untuk menempatkan beberapa elemen dalam satu bagian.
    Dimulai dengan pembuatan tag <div> dengan class=”form” , di dalam <div class=”form”>
    terdapat beberapa tag child <div> dengan class=”form-group” dan satu tag child <div> dengan
    class=”header”. <div class=”header”> berfungsi untuk penempatan gambar dan heading
    selamat datang.

    Pada kelompok <div class=”form-group”> di atas berisi tag <label> dan tag <input>
    yg bertipe text untuk menginput nama, npm, dan kelas, serta tag <label> dan tag <textarea>
    untuk menginput alamat dikarenakan diperlukan ruang yang lebih untuk menginput alamat.

    Pada <div class=”form-group”> di atas terdapat tag <label> Jenis Kelamin dan tag
    child <div> dengan class=”radio-group” , di dalam <div class=”radio-group”> terdapat 2
    input type radio yang diberi label Laki-laki dan Perempuan, type radio di sini maksudnya
    adalah type input pilihan untuk memilih input yang telah disediakan, yaitu Jenis Kelamin.
    Untuk tag <select> di atas tidak jauh berbeda dengan penjelasan yang sebelumnya yaitu
    untuk memilih inputan, perbedaannya hanya pada kelompok di atas menggunakan form select.

    Code di atas adalah untuk membuat button submit, digunakan tag <button> dengan
    class=”btn”, setelah kerangka form ditulis tutup tag </body> .
    Untuk membuat tampilan form agar lebih enak dilihat, digunakan CSS untuk
    memberikan style pada kerangka form dalam tag <body>. CSS ditulis di dalam tag <header>,
    code dapat dilihat pada gambar di bawah ini.

    Pada selector-selector di atas untuk selector yang tidak memiliki awalan seperti body
    ditujukan untuk sebuah tag, jadi pada tag body akan mendapat perubahan warna background.
    Setiap selector yang diawali dengan titik (.) menunjukkan bahwa style tersebut ditujukan untuk
    sebuah class, contoh .form setiap elemen yang terdpaat di kelas form akan terpengaruh atau
    mendapat style yang ada dalam .form. Begitu pula untuk .form .header yang terpengaruh adalah
    elemen-elemen yang terdapat di class form dan class header. Lalu .form img yang terpengaruh
    adalah elemen-elemen yang terdapat di class form dan tag img. Lalu maksud dari .form .form-
    group>* adalah semua yang terdapat di class form dan form group dan semua child dari class
    form-group akan menjadi rata tengah secara vertikal. Lalu .form input[type=text] , textarea
    maksudnya adalah semua yang berada dalam class form dan tag input dengan type text atau
    textarea. Lalu .form-group > label adalah untuk semua yang berada dalam class form-group
    yang child dari class tersebut adalah tag label. Untuk tampilannya dapat dilihat pada gambar di
    bawah ini.

    Anda mungkin juga menyukai