Scribd Logo
Unggah

Selamat datang di Scribd!

  • Postest Praktikum 5 Pemrograman Website

    Diunggah oleh

    kata berquotes
    23 tayangan10 halaman
    postest pemrograman website html dan css

    Judul Asli

    postest praktikum 5 pemrograman website

    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
    postest pemrograman website html dan css

    Hak Cipta:

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

    Postest Praktikum 5 Pemrograman Website

    Diunggah oleh

    kata berquotes
    postest pemrograman website html dan css

    Hak Cipta:

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

    LAPORAN POSTEST 5

    PRAKTIKUM PEMROGRAMAN WEBSITE

    DISUSUN OLEH

    NAMA : YUSRIL MAHENDRI


    NIM : 1800018397
    KELAS : H – TIF
    MATKUL : PEMROGRAMAN WEB

    PROGRAM STUDI TEKNIK INFORMATIKA


    FAKULTAS TEKNOLOGI INDUSTRI
    UNIVERSITAS AHMAD DAHLAN
    YOGYAKARTA
    2019
    A. HTML Program
    1. Screenshot HTML
    2. HTML Program dan Penjelasannya

    <!DOCTYPE html>
    <html>
    <head>

    Judul Program :

    <title>Postest Pweb</title>

    Link Css Program :

    <link rel="stylesheet" type="text/css" href="yusril.css">


    </head>
    <body>

    Div Tutup Dan Tambah Untuk Menambah Ruang Di Atas Dan Dibawah Div Header Sehingga
    Div Header Tampilannya Lebih Menarik

    <div class="tutup"></div>
    <div class="tambah"></div>
    <div class="header">

    Menambahkan Logo Uad, Kemudian Dibuat Ukuran 90x90 Dan Align / Posisi Gambar Pada Div
    Header Berada Pada Sebelah Kiri

    <img src="logouad.png" width="90" height="90" align="left" alt="logo uad">

    Memberi Judul Pada Header Berupa Nama Uad, Dan Alamatnya. &Bsp Berfungsi Untuk
    Menambahkan Spasi Agar Gambar Logo Dan Judul Pada Header Tidak Saling Tumpang Tindih
    Dan Lebih Rapi :

    <h1>&nbsp &nbspUNIVERSITAS AHMAD DAHLAN YOGYAKARTA</h1>


    <h3>&nbsp &nbsp &nbsp Kampus III UAD, Jl. Prof. Dr. Soepomo, Janturan, <br/>&nbsp &nbsp
    &nbsp Umbulharjo, Yogyakarta, 55164</h3></div>
    <div class="tambah"></div>
    Div Menu, Dengan Beberapa Menu Yang Telah Diberi Link. Fungsi Target=_Blank Adalah
    Ketika Menu Di Klik Maka Browser Akan Membuka Tab Baru Dan Langsung Menuju Ke Link
    Laman Yang Dituju. Sedangkan Fungsi Pemberian # Pada Link Agar Ketika Menu Diklik Tidak
    Akan Terjadi Apa-Apa.

    <div class="menu">
    <table align="center" cellpadding="10" cellspacing="4">
    <tr>
    <td><a href="https://uad.ac.id/id" target="_blank">ABOUT UAD</a></td>
    <td><a href="http://pmb.uad.ac.id/" target="_blank">| &nbsp &nbsp PMB UAD</a></td>
    <td><a href="https://tif.uad.ac.id/" target="_blank">| &nbsp &nbsp TIF UAD</a></td>
    <td><a href="https://portal.uad.ac.id/" target="_blank">| &nbsp &nbsp PORTAL UAD</a></td>
    <td><a href="#">| &nbsp &nbsp FORM DAFTAR</a></td>
    </tr>
    </table>
    </div>

    Sidebar Kiri Berupa Link Dengan Tag <Li> Atau List Agar Lebih Rapi. fieldset berfungsi untuk
    menaruh isi di dalam tag fieldset ke dalam kotak, tetapi berbeda dengan tabel

    <div class="sidebarkiri">
    <center><br/><b>CONTACT US</b></center><hr>
    <fieldset>
    <li><a href="https://www.google.com/"target="_blank">Google</a></li>
    <li><a href="https://www.facebook.com/">Facebook</a></li>
    <li><a href="https://www.instagram.com/">Instagram</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Ask</a></li></div>
    </fieldset>

    Pada Div Content Isinya Berupa Biodata Mahasiswa Yang Dimuat Di Dalam Tabel Agar
    Keliahatan Lebih Rapi
    <div class="content">
    <h2><center>BIODATA MAHASISWA</center></h2>
    <fieldset>
    <table border="0" cellspacing="2">
    <tr><td colspan="3" bgcolor="#C0C0C0"><b>Info Personal</b></td></tr>
    <tr><td>Nama</td><td>:</td><td>Yusril Mahendri</td></tr>
    <tr><td>Nim</td><td>:</td><td>1800018397</td></tr>
    <tr><td>Tempat Lahir</td><td>:</td><td>Bangka Belitung</td></tr>
    <tr><td>Tanggal Lahir</td><td>:</td><td>08 Maret 1999</td></tr>
    <tr><td colspan="3" bgcolor="#C0C0C0"><b>Daerah Asal</b></td></tr>
    <tr><td>Desa/Kel.</td><td>:</td><td>Masjid Jamik</td></tr>
    <tr><td>Kecamatan</td><td>:</td><td>Rengkui</td></tr>
    <tr><td>Kabupaten/Kota</td><td>:</td><td>Belitung</td></tr>
    <tr><td>Provinsi</td><td>:</td><td>Bangka Belitung</td></tr>
    <tr><td colspan="3" bgcolor="#C0C0C0"><b>Alamat Sekarang</b></td></tr>
    <tr><td>Desa/Kel.</td><td>:</td><td>Panembahan</td></tr>
    <tr><td>Kecamatan</td><td>:</td><td>Kraton</td></tr>
    <tr><td>Kabupaten/Kota</td><td>:</td><td>Yogyakarta</td></tr>
    <tr><td>Provinsi</td><td>:</td><td>D. I. Yogyakarta</td></tr>
    </fieldset>
    </table>
    </div>

    SIDEBAR KIRI HAMPIR SAMA DENGAN SIDEBAR KANAN YANG BERUPA MENU YANG DIBERI
    LINK DENGAN TAG <li> ATAU LIST AGAR LEBIH RAPI

    <div class="sidebarkanan">
    <br/>
    <center><b>TUTORIAL</b></center><hr>
    <fieldset>
    <li><a href="#">Tutorial HTML dasar</a></li>
    <li><a href="#">Tutorial CSS dasar</a></li>
    <li><a href="#">Tutorial PHP dasar</a></li>
    <li><a href="#">Tutorial JQuery dasar</a></li> </div>
    </fieldset>

    Pada Div Footer Isinya Berupa Copyright Dengan &Copy Yang Akan Berubah Menjadi © Saat
    Ditampilkan Di Browser Nanti Serta Ditambahkan Div Tutup Untuk Menambahkan Ruang Pada
    Div Footer Tersebut.

    <div class="footer">
    <p><br/><br/><br/>Copyright &copy 2019 - Yusril Mahendri</p>
    </div>
    <div class="tutup"></div>

    </body>
    </html>
    B. CSS Program
    1. Screenshot CSS

    2. CSS Program dan Penjelasannya

    Background pada div header berwarna teal dengan kode warna #008080. Tinggi header yaitu
    90 pixel

    div.header{
    background-color: #008080;
    height: 90px;
    }
    Background pada div tambah berwarna teal dengan kode warna #008080 dengan tinggi 90
    pixel

    div.tambah{
    background-color: #008080;
    height:10px;
    }
    Pada heading text 1 (h1) Margin bawah dan atas senilai 0 kemudian warna font white / putih
    dengan kode #FFFFFF. Jenis fontnya adalah Calibri.

    h1{
    margin-bottom:0;
    margin-top:0;
    color:#FFFFFF;
    font-family: calibri;
    }
    Pada heading text 2 (h2), ukuran fontnya yaitu 5

    h2{
    font-size: 5;
    }
    Pada heading text 3 (h3) Margin bawah 0, margin atas -3 pixel kemudian warna font white /
    putih dengan kode #FFFFFF. Jenis fontnya adalah Calibri.

    h3{
    margin-bottom:0;
    margin-top:-3px;
    color:#FFFFFF;
    font-family: calibri;
    }
    Pada image, margin leftnya yaitu 10 pixel sehingga gambar logo uad tidak berdempetan /
    terlalu mepet kekiri,
    img{
    margin-left: 10px;
    }
    Pada anchor link (a) text decoration dihilangkan agar tidak nampak garis bawah pada menu
    yang telah diberi link
    a{
    text-decoration: none;
    }
    Pada list, list style (gaya list) berupa square/kotak agar lebih menarik
    li{
    list-style: square;
    }
    Pada table, table border dihilangkan agar tidak terlihat
    table{
    border: 0;
    }
    Pada fieldset, posisi/align isinya adalah ditengah - tengah
    fieldset{
    align-self: center;
    }
    Pada div menu, margin-top: 0; margin-bottom: 0; background colornya adalah keabu-abuan
    dengan kode #FFA500; tinggi 50 pixel ; padding: 4 pixel; ukuran huruf : 18 pixel; posisi texzt:
    center; dan font family-nya berupa calibri, dan Times New Roman;
    div.menu{
    margin-top: 0;
    margin-bottom: 0;
    background-color: #FFA500;
    height: 50px;
    padding: 4px;
    font-size: 18px;
    text-align: center;
    font-family: calibri, Times New Roman;
    }
    Pada div sidebar kiri, background colornya adalah keabu-abuan dengan kode :#DCDCD0;
    tinggi 470 pixel ; lebarnya: 15 % letak sidebar adalah bagian kiri dan font family-nya berupa
    calibri, dan Times New Roman;
    div.sidebarkiri{
    background-color:#DCDCD0;
    height:470px;
    width:15% ;
    float:left;
    font-family: calibri, Times New Roman;
    }
    Pada div konten , background colornya adalah putih dengan kode :#FFFFFF; tinggi 470 pixel ;
    lebarnya: 70 % letak sidebar adalah bagian tengah dan font family-nya berupa calibri, dan
    Times New Roman;
    div.content{
    height:470px;
    width:70%;
    float:center;
    color:#000000;
    background-color:#FFFFFF;
    font-family: calibri, Times New Roman;
    }
    Pada div form, background colornya adalah putih dengan kode :#FFFFFF; tinggi 470 pixel ;
    lebarnya: 70 % letak sidebar adalah bagian tengah dan font textnya yaitu Times New Roman
    dengan ukuran font 20 serta warna font: hitam dengan kode: #000000;

    form{
    font: Times New Roman;
    font-size: 20;
    color: #000000;
    background-color:#FFFFFF;"
    }
    Pada div sidebar kanan, background colornya adalah keabu-abuan dengan kode :#DCDCD0;
    tinggi 470 pixel ; lebarnya: 15 % letak sidebar adalah bagian kanan dan font family-nya berupa
    calibri, dan Times New Roman;

    div.sidebarkanan{
    background-color:#DCDCD0;
    height:470px;
    width:15% ;
    float:left;
    font-family: calibri, Times New Roman;
    }
    Pada div footer, background colornya adalah berwarna teal dengan kode warna #008080;
    tinggi 95 pixel ; font family-nya berupa calibri, dan Times New Roman; warna fontnya adalah
    putih dengan kode: #FFFFFF; posisi textnya yaitu tengah; serta margin bawahnya 0;

    div.footer{
    clear:both;
    text-align:center;
    margin-bottom:0;
    font-family: calibri, Times New Roman;
    color:#FFFFFF;
    background-color: #008080 ;
    height: 95px;
    }
    Pada div tutup, background colornya adalah berwarna teal dengan kode warna #008080;
    tinggi 10 pixel;

    div.tutup{
    background-color: #008080;
    height: 10px;
    }
    C. Output Program
    a. Di Google Chrome

    b. Di Internet Explorer

    Anda mungkin juga menyukai