Scribd Logo
Unggah

Selamat datang di Scribd!

  • 1tkj - Pemrograman Web - Jam 1 - Kamis, 02-03-2017

    Diunggah oleh

    Pusatpakaian Tidur
    27 tayangan3 halaman
    1tkj_pemrograman Web _jam 1_kamis, 02-03-2017

    Judul Asli

    1tkj_pemrograman Web _jam 1_kamis, 02-03-2017

    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
    1tkj_pemrograman Web _jam 1_kamis, 02-03-2017

    Hak Cipta:

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

    1tkj - Pemrograman Web - Jam 1 - Kamis, 02-03-2017

    Diunggah oleh

    Pusatpakaian Tidur
    1tkj_pemrograman Web _jam 1_kamis, 02-03-2017

    Hak Cipta:

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

    1TKJ_PEMROGRAMAN WEB _JAM 1_KAMIS, 02-03-

    2017

    LAYOUT

    Sebuah dokumen web umumnya memiliki elemen-elemen sebagai berikut:

    Elemen-elemen Layout pada Dokumen Web :


    Elemen Header, Elemen Navigation, Elemen Sidebar, Elemen Konten,
    Elemen Footer

    BOX MODEL

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    #boxmodel {
    background: #CDE;
    border: 25px solid #ABC;
    height: 100px;
    margin: 25px;
    padding: 25px;
    width: 300px;
    }
    </style>
    </head>
    <body>
    <div>Box Model</div>
    <div id="boxmodel">
    </div>
    <div>Box Model</div>
    </body>
    1TKJ_PEMROGRAMAN WEB _JAM 1_KAMIS, 02-03-
    2017
    </html>

    Hasil dari eksekusi kode adalah sebagai berikut:

    Hasil Eksekusi Box Model


    Bagaimana panjang dan lebar dari kotak pada kode di atas? Mari kita lihat
    selengkapnya:

    Pengukuran Box Model


    Seperti yang dapat dilihat pada gambar di atas, pengukuran total dari
    panjang elemen adalah:

    margin-right + border-right + padding-right + width + padding-left +


    border-left + margin-left

    dan tinggi total dari sebuah elemen adalah:

    margin-top + border-top + padding-top + height + padding-bottom +


    border-bottom + margin-bottom

    sehingga total dari panjang elemen tersebut yaitu 450px, dan total tinggi
    elemen ialah 250px.
    1TKJ_PEMROGRAMAN WEB _JAM 1_KAMIS, 02-03-
    2017
    Mari kita lihat properti-properti CSS yang mempengaruhi box model.

    Properti Height dan Width


    Setiap elemen yang ada dalam HTML memiliki tinggi dan lebar yang standar,
    yang didapatkan dengan menyesuaikan ukuran konten. Tergantung kepada
    tujuan pembuatan dokumen, tinggi dan lebar standar yang diberikan oleh
    elemen mungkin saja tidak tepat digunakan. Properti height dan weight
    digunakan untuk mengubah tinggi dan lebar standar ketika dibutuhkan.
    Berikut adalah contoh pengunaan kedua properti ini:

    div {
    height: 20px;
    width: 30px;
    }

    Kedua properti ini hanya dapat digunakan untuk block level element.

    Anda mungkin juga menyukai