Scribd Logo
Unggah

Selamat datang di Scribd!

  • Buatlah File HTML Berikut Dan Simpan Dengan Nama

    Diunggah oleh

    adeputraubd
    23 tayangan4 halaman

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    DOC, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    23 tayangan4 halaman

    Buatlah File HTML Berikut Dan Simpan Dengan Nama

    Diunggah oleh

    adeputraubd

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 4

    Buatlah File HTML Berikut dan simpan dengan nama: csskolom.

    html

    <head>
    <title>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="page">
    <div id="header">
    <div id="sub-header">
    <h1>Universitas Bina Darma</h1>
    <h4>Toward International Standar</h4>
    </div>
    </div>
    <div id="nevigation">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Sitemap</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    <div id="content">
    <div id="sub-content">
    <div id="column1">
    <h2>About Us</h2>
    <p>Ini paragraf pertama pada pada kolom pertama </p>
    <p>ini paragraf kedua pada kolom pertana<a
    href="#">Readmore</a></p>
    </div>

    <div id="column2">
    <h2>Services</h2>
    <p>ini paragraf pertama pada kolom kedua</p>
    <p>ini paragraf kedua pada kolom kedua<a href="#">Readmore</a></p>
    </div>

    <div id="column3">
    <h2>Contact Detail</h2>
    <p>ini paragraf pertama pada kolom ketiga </p>

    <p>ini paragraf kedua pada kolom ketiga <a href="#">Readmore</a></p>


    </div>
    </div>
    </div>
    <div id="bottom">
    <div id="sub-bottom">
    <span>Copyright &copy; Ade Putra, S.Kom.</span>
    </div>
    </div>
    </div>
    </body>
    </html>
    Buatlah file css berikut dan simpan dengan nama style.css

    *{ margin:0; padding:0;}
    h1,h2,h3,h4 {
    font:100% "Georgia", Times New Roman, Times, serif;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:2px
    }

    h1 {
    font-size:400%;
    text-align:center;
    padding:35px 0 0 0;
    }

    h2 {font-size:150%;}
    h3 {font-size:137%;}
    h4 {font-size:120%;
    text-align:center; color:#848484;}

    ul,ol,li {list-style-type:none;}

    a {text-decoration:none; color:#00CCFF}

    a:hover { text-decoration:underline;}

    p{
    color:#fff;
    font-size:12px;
    font-family:"Georgia", Times New Roman, Times, serif;
    color:#fff;
    padding:0 0 10px 0;
    line-height:22px;
    }
    body {
    font:100% normal "Georgia", Times New Roman, Times, serif;
    background:#191919;
    }
    #page {
    background:#323232;
    width:971px;
    margin:0 auto;
    height:100%;
    border-left:1px solid #353535;
    border-right:1px solid #353535;
    padding:12px 0 12px 0;
    }
    #header {
    margin: 0px auto 0 auto;
    width:943px;
    background:#222;
    border:1px solid #424242;
    }
    #sub-header {
    margin:1px;
    padding:1px;
    background:#333;
    overflow:hidden;
    height:150px;
    }
    #nevigation {
    margin: 5px auto 0 auto;
    width:943px;
    background:#222;
    border:1px solid #424242;
    }
    #nevigation ul {
    margin:1px;
    padding:0px;
    background:#333;
    overflow:hidden;
    }
    #nevigation li {
    display: inline;/*ie*/
    }

    #nevigation li a {
    float:left;
    margin:0;
    padding:7px 10px;
    display: block;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:2px;
    }
    #nevigation li a:hover {
    background:#424242;
    text-decoration:none;
    color:#00CCFF;
    }

    #content {
    width:943px;
    margin:5px auto 0 auto;
    background:#222;
    border:1px solid #424242;
    }

    #sub-content {
    margin:1px;
    padding:1px;
    background:#333;
    overflow:hidden;
    }
    #column1 {
    width:302px;
    background:#424242;
    margin:0 1px 0 0;
    padding:5px;
    float:left;
    }
    #column2 {
    width:302px;
    background:#424242;
    margin:0 1px 0 0;
    padding:5px;
    float:left;
    }
    #column3 {
    width:303px;
    background:#424242;
    margin:0;
    padding:5px;
    float:left;
    }
    #bottom {
    width:943px;
    margin:5px auto 0 auto;
    background:#222;
    border:1px solid #424242;
    }

    #sub-bottom {
    margin:1px;
    padding:20px 0 0 0px;
    background:#333;
    overflow:hidden;
    height:50px;
    color: #fff;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:2px;
    }

    Anda mungkin juga menyukai