Scribd Logo
Unggah

Selamat datang di Scribd!

  • LA PWeb 1

    Diunggah oleh

    sokamaru
    9 tayangan8 halaman
    lawhljhrlkwjhlkrjlkrhalkwhabmnnmb

    Judul Asli

    LA_PWeb_1

    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
    lawhljhrlkwjhlkrjlkrhalkwhabmnnmb

    Hak Cipta:

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

    LA PWeb 1

    Diunggah oleh

    sokamaru
    lawhljhrlkwjhlkrjlkrhalkwhabmnnmb

    Hak Cipta:

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

    LAPORAN AKHIR PRAKTIKUM

    Nama Praktikum :

    PEMROGRAMAN WEB

    Nama

    ATHINA RIANDA

    NPM

    51411282

    Kelas

    4IA17

    Tanggal Praktikum

    Pertemuan Ke

    Materi

    Assisten

    Ketua Assisten

    10 OKTOBER 2014

    PENGENALAN HTML

    JOHANNES GERRY
    :

    LABORATORIUM INFORMATIKA
    UNIVERSITAS GUNADARMA
    2014

    LISTING PROGRAM

    File Latihan1.html

    <html>
    <head>
    <title>4IA17</title>
    <link rel="stylesheet" type="text/css" href="latihan2.css">
    </head>
    <body>
    <div id="Halaman">
    <div id="judul">
    <h1 class="judul" align="center">Praktikum PWeb</h1>
    <h2 class="sub-judul" align="center">Data
    Mahasiswa</h2>
    <h3 style="color:blue;" align="center">Universitas
    Gunadarma</h3>
    </div>
    <br>
    </br>
    <div id="konten">
    <div class="kiri">
    <br align"left">kiri</br>
    </div>
    <div class="tengah">
    <p style="color:purple;">Nama= Athina Rianda</p>
    <b style="color:red;">Kelas= 4IA17</b>
    <p><i style="color:gray;">NPM= 51411282</i></p>
    </div>
    <div class="kanan">
    <br>jumat, 10 oktober 2014</br>
    </div>
    </div>
    <table border="3">

    <tr>
    <th>Nama</th>
    <th>Kelas</th>
    <th>NPM</th>
    </tr>
    <tr>
    <td>Athina Rianda</td>
    <td>4IA17</td>
    <td>514112482</td>
    </tr>
    </table>
    <div class="footer">
    <p align="center">Laboraturium TI</p>
    <p align="center">Universitas Gunadarma</p>
    <p align="center">2014</p>
    </div>
    </div>
    </div>
    </body>
    </html>
    -

    File Latihan2.css

    #halaman{
    width : 100%;
    height : 50px;
    margin : 0 auto;
    padding : 0 auto;
    }
    #judul{
    width : 100%;
    height : 200%;

    background : #FDF5E6;
    margin : 0;
    padding : 0;
    }
    #konten{
    width : 100%;
    height : 300px;
    floadt : left;
    background : #5F9EA0;
    }
    #kiri {
    width : 25%:
    height : 300px;
    float : left;
    background : AADBEG;
    }
    #tengah{
    width : 50%;
    height : 300px;
    float : left;
    background : #FDF5E6;
    }
    #kanan{
    width : 25%;
    height : 300px;
    floadt : right;
    background : #ADD8E6;
    }
    #footer{
    height : 300px;
    background : #8FBC8F;

    clear : both;
    }

    LOGIKA PROGRAM
    Pada pertemuan praktikum Pemrograman Web kali ini kita membahas
    HTML dan CSS dan membuat suatu web html yang sederhana, yaitu
    membuat halaman web yang berisi text, warna dan juga table. Dalam
    pembuatan web tersebut kita harus membuat file yang berisikan head,
    footer body, dll. Awal dari pembuatan web html dengan menggunakan
    software XAMPP.
    Pertama kita aktifkan module apache dan mysql pada Xampp.

    Setelah itu buat file dengan membuka notepad++ yang sudah


    terinstall. Simpan dengan nama latihan1.html untuk membuat halaman web.

    Masukkan program html terlebih dahulu ke dalam lembar kerja untuk


    membuat halaman web html. Seperti dibawah ini.

    Pada listing diatas menjelaskan <html> merupakan tanda awal dalam


    pembuatan halaman web yang akan diakhiri dengan </html>. Selanjutnya
    <head> merupakan kepala dari halaman web yang bisa disebut sebagai
    judul halaman web dan diakhiri dengan </head>. Didalam program <head>
    terdapat <title> yang digunakan untuk menuliskan judul, agar saat web
    dibuka maka tab pada internet akan sesuai dengan isi title yang di akhiri
    dengan </title>.
    Pada listing terdapat h1, h2, dan h3 yang memiliki pengertian sebagi
    berikut :
    -

    H1 : memiliki ukuran font yang terlihat lebih besar;


    H2 : memiliki ukuran font yang terlihat lebih kecil dibandingan dengan
    sebelumnya;
    H3 : memiliki ukuran font yang terlihat kecil dari H1 dan H2.

    Untuk memberikan pengaturan penulisan pada bagian tengah dengan


    menggunakan listing program align = center. Untuk style = color:blue
    akan membuat text berwarna biru.

    Selanjutnya pada listing program dibawah ini terdapat simbol <p>


    yang dugunakan untuk penulisan paragrap yang diakhiri dengan simbol
    </p>. Kemudian terdapat pula simbol <br> yang fungsinya untuk spasi 1
    baris ke bawah.

    Selanjutnya kita buat file baru latihan2.css untuk melakukan modifikasi


    pada lembar kerja ke dua. Buat program modifikasi seperti dibawah ini.

    Listing program diatas akan memodifikasi halaman web yang sudah


    kita buat sebelumnya. Terdapat ukuran lebar dari halaman, judul dan konten.
    Ukuran dari baris kanan, kiri, tengah dan footer. Dan pengaturan background
    pada setiap bagian.
    Kemudian kita tambahkan tabel pada halaman selanjutnya. Untuk
    membuat table menggunakan simbol <table> dan untuk mengakhirinya
    dengan simbol </table>. Berikan ukuran border table. Selanjutnya terdapat
    <tr> yang berfungsi untuk baris pada tabel yang akan dibuat. <th> sebagai
    head atau kepala dari tabel tersebut, kemudian <td> untuk mengisi tabel
    yang akan kita gunakan.

    OUTPUT PROGRAM

    Anda mungkin juga menyukai