Scribd Logo
Unggah

Selamat datang di Scribd!

  • La P.web

    Diunggah oleh

    Agus Haryanto
    14 tayangan6 halaman
    Pengantar Web

    Judul Asli

    LA P.WEB

    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
    Pengantar Web

    Hak Cipta:

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

    La P.web

    Diunggah oleh

    Agus Haryanto
    Pengantar Web

    Hak Cipta:

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

    Pada laporan akhir praktikum kali ini saya akan menjelaskan tentang pengenalan web,

    dalam projek kali saya akan membuat halaman website yang memiliki foto logo serta terdapat
    table. Pertama buka software Notepad++ yang sudah terinstall pada laptop, selanjutnya buat new
    project dengan format file html dan yang akan disimpan pada folder htdocs pada xampp. Berikut
    adalah listing programnya :
    LISTING PROGRAM
    Listing program .html :

    Listing program .css :

    LOGIKA PROGRAM
    <!DOCTYPE html>
    <html>
    <head>
    <title>Laporan Akhir 1</title>
    <link href="new1.css" rel="stylesheet" type="text/css">
    </head>

    Listing diatas bermaksud bahwa kita sedang memakai file bertipe HTML, dan
    menghubungkan file html dengan file lain bernama new1.css, dan terdapat juga listing untuk
    penulisan judul dengan nama Laporan Akhir 1 yang letaknya berada pada header.
    <body>

    Listing ini berguna untuk tempat mengisi halaman web.

    <div id="judul">

    Listing diatas adalah sebuah judul pada suatu halaman website yang terletak di bagian
    header. Pada id judul ini akan mengarah atau menembak ke file style.css
    <center>
    <img src="emblem.png" height="85px">
    <marquee width="51%">
    <h1 class="judul">Daftar Absen Kelas 4IA03</h1></marquee>
    </center>

    Listing diatas berguna untuk mengatur isi dari web ke rata tengan, dan memasukkan
    image kedalamnya dengan ukuran tinggi 85px, dan berguna juga untuk membuat tulisan berjalan
    dengan memakai tag h1 dalam class judul dengan nama Daftar Absen Kelas 4IA03.

    <div class="kiri"><!-- div class kiri -->


    <p> Nama : Agus Haryanto</p>

    <p> NPM : 50412391</p>


    <p> Kelas : 4IA03</p>
    <p> Praktikum : P.Web</p>
    </div>

    Listing diatas adalah sebuah class kiri yang terletak pada bagian kiri pada tampilan web
    nanti akan menembak pada file css, yang letaknya nanti akan ada disebelah kiri tampilan web
    didalamnya akan ada paragraph Nama, NPM, Kelas dan Praktikum.
    <div class="tengah"><!-- div class tengah -->
    <center>
    <br><table border = "7">
    <tr>
    <th>NO</th>
    <th>Nama</th>
    <th>Kelas</th>
    <th>NPM</th>
    </tr>
    <tr>
    <td> 1</td>
    <td> Agus Haryanto</td>
    <td> 4IA03</td>
    <td> 50412391</td>
    </tr>
    </table></br>
    </center>
    </div>

    Listing diatas adalah sebuah class tengan yang terdapat di bagian tengah pada tampilan
    web yang akan menembak ke file css, dan di script diatas juga berguna untuk pembuatan table
    dengan memakai tag <table>, <br> berguna untuk memberi satu baris baru, <th> berguna untuk
    membuat sebuah sel header pada tabel, <tr> berguna untuk membuat baris dalam sebuah tabel,
    dan <td> berguna untuk membuat sel data pada tabel.
    <div class="kanan"></div><!-- div class kanan -->

    Listing diatas adalah sebuah class kanan pada suatu halaman website yang terletak di
    bagian kanan. Pada class ini akan mengarah atau menembak ke file style.css
    <div class="footer"><!-- div class footer -->
    <center>
    <h2>LABORATORIUM TEKNIK INFORMATIKA</h2>
    <h3>UNIVERSITAS GUNADARMA</h3>
    <h4>2015</h4> </center>
    </div><!-- div class footer berakhir -->

    Listing diatas adalah sebuah class footer pada suatu halaman website yang terletak di
    bagian bawah. Pada class ini akan mengarah atau menembak ke file style.css. Pada footer akan
    terdapat teks yang menggunakan tag <h2>, <h3>, <h4>.

    Listing diatas untuk pengaturan div judul pada script html, dengan lebar 100%, tinggi
    90px dan warna background (abu-abu) pada header tersebut .

    Listing diatas berguna untuk div kiri untuk meletakan sebuah table pada posisi kiri
    dengan lebar 25% tinggi 210px, dan background berwarna biru muda. Sama hal nya dengan div
    kanan hanya saja yang membedakan posisi pada div tersebut. Begitupula untuk div tengah
    tersebut untuk meletakan sebuah table pada posisi tengah yang berfungsi untuk menampilkan
    artikel-artikel tersebut, pada div tengah ini mempunyai lebar 50% tinggi 210px, dan background
    berwarna putih.

    untuk div footer tersebut penjelasan hampir sama hanya saja peletakan yang berbeda
    yang dimana letaknya berada dibagian bawah pada halaman website ini. Footer ini mempunyai
    tinggi 110px dengan background berwarna hijau. Mengapa footer tersebut bisa diletakan di
    bagian bawah karena terdapat codingan clear : booth; yang berfungsi untuk menghapus padding
    yang tidak berfungsi kembali.

    OUTPUT PROGRAM

    Anda mungkin juga menyukai