Scribd Logo
Upload

Welcome to Scribd!

  • Gdfgdfgrgrgtrtert

    Uploaded by

    Bern Adz Manchunian
    9 views8 pages
    trtrtrtrtrtrttr rtrtruyyd eteyugrey6 ertyrtuhguiol wsetery56u6ju6i

    Original Title

    gdfgdfgrgrgtrtert

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    trtrtrtrtrtrttr rtrtruyyd eteyugrey6 ertyrtuhguiol wsetery56u6ju6i

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views8 pages

    Gdfgdfgrgrgtrtert

    Uploaded by

    Bern Adz Manchunian
    trtrtrtrtrtrttr rtrtruyyd eteyugrey6 ertyrtuhguiol wsetery56u6ju6i

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    Listing praktikum pengenalan web ke-4

    Nama : Asmuni
    NIM : 135610004
    PRAKTIKUM:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <div id="wrap">
    <div id="menu_horisontal">Menu Horisontal</div>
    <div id="header">
    <div id="slogan">Slogan</div>
    <div id="gambar">Gambar</div>
    </div>
    <div id="kiri">
    <div id="menu_vertikal">Menu Vertikal</div>
    <div id="banner">Banner</div>
    </div>
    <div id="content">Content</div>
    <div id="footer">Footer</div>
    </div>
    </body>
    </html>
    HASIL :

    Menambah Script pada body script diatas :


    <head>
    <style type="text/css">
    #wrap {
    max-width:1000px;
    margin:auto;
    background-color:lightyellow;
    }
    #menu_horisontal {
    max-width:1000px;
    height:30px;
    border:1px solid black;
    background-color:lightgrey;
    color:black;
    text-align:center;
    }
    </style>
    </head>
    HASIL :

    Menambahkan Script :
    #header {
    position:relative;
    top:27px;
    max-width:1000px;
    height:200px;
    background-color:lightgreen;
    display:block;
    }
    #slogan {
    position:absolute;
    width:300px;
    height:170px;
    top:10px;
    left:10px;
    background-color:yellow;
    }
    #gambar {
    position:absolute;
    width:400px;
    height:170px;
    top:10px;
    right:10px;
    background-color:yellow;
    }
    Hasil:

    Menambah Script :
    #kiri{
    width:200px;
    margin-top:30px;
    min-height:510px;
    position:relative;
    display:block;
    float:left;
    }
    #menu_vertikal {
    position:absolute;
    width:200px;
    height:300px;
    display:block;
    border:1px solid black;
    }
    #banner {
    position:absolute;
    top:305px;
    width:200px;
    min-height:200px;
    background-color:lime;
    display:block;
    border:1px solid black;
    margin-bottom:200px;
    }
    Hasil :

    Menambah Script :
    #content {
    float:left;

    max-width:800px;
    margin-top:30px;
    margin-left:5px;
    background-color:lightblue;
    display:block;
    border:1px solid black;
    }
    #footer {
    clear:both;
    margin-top:50px;
    max-width:1000px;
    height:30px;
    background-color:blue;
    color:white;
    display:block;
    }
    HASIL :

    Mengedit Script pada menu horizontal :


    #menu_horisontal {
    width:1000px;
    height:30px;

    border:1px solid black;


    background-color:lightgrey;
    color:black;
    text-align:center;
    position:fixed;
    top:0px;
    z-index:200px;
    }
    Hasil :

    LATIHAN:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #wrap{
    max-width:1000px;
    margin:auto;
    background-color:lightyellow;
    }
    #menu_horisontal{
    max-widrh:1000px;
    height:30px;
    border:1px solid black;
    background-color:lightyellow;
    color:black;
    text-align:center;
    }
    #header{
    position:relative;
    top:27px;
    max-width:1000px;
    height:200px;
    background-color:lightyellow;
    display:block;
    }
    #slogan{
    position:absolute;
    width:300px;
    height:170px;
    top:10px;
    left:10px;
    background-color:yellow;

    }
    #gambar{
    position:absolute;
    width:400px;
    height:170px;
    top:10px;
    right:10px;
    background-color:yellow;
    }
    #menu_vertikal{
    position:absolute;
    width:200px;
    height:300px;
    display:block;
    border:1px solid black;
    }
    #footer{
    clear:both;
    margin-top:50px;
    max-width:1000px;
    height:30px;
    background-color:blue;
    color:white;
    display:block;
    }
    #menu_horisontal{
    width:1000px;
    height:30px;
    border:1px solid black;
    background-color:lightgrey;
    color:black;
    text-align:center;
    position:fixed;
    top:0px;
    z-index:200;
    }
    </style>
    </head>
    <body>
    <div id="warp">
    <div id="menu_horisontal">Menu Horisontal</div>
    <div id="header">
    <div id="slogan">Slogan</div>
    <div id="gambar">Gambar</div>
    </div>
    <div id="footer">Footer</div>
    </div>
    </body>
    </html>
    HASIL:

    You might also like