Scribd Logo
Unggah

Selamat datang di Scribd!

  • Dokumentasi Latihan CSS Layouting

    Diunggah oleh

    Adha Don'tdif
    25 tayangan4 halaman

    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

    Hak Cipta:

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

    Dokumentasi Latihan CSS Layouting

    Diunggah oleh

    Adha Don'tdif

    Hak Cipta:

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

    CSS LAYOUTING

    PENGATURAN TATA LETAK MENGGUNAKAN CSS

    CSS layouting adalah teknik mengatur dan memposisikan elemen-elemen HTML yang telah
    dibuat menggunakan syntax CSS.
    Silabus :
    1. Display
    2. Dimensi
    3. Overflow
    4. Box Model
    5. Float
    6. Potition
    Tools/Software :
    1. Code Editor (Sublime Text 3, Visual Studio Code, dll)
    2. Web Browser

    A. Display
    Value: inline, inline-block, block, none.
    Inline :
    - Elemen yang secara default tidak menambahkan baris baru Ketika dibuat.
    - Lebar dan tinggi elemennya sebesar konten yang ada didalamnya.
    - Kita tidak dapat mengatur tinggi dan lebar dari dalam elemen inline (kecuali
    elemen <img>).
    - Margin dan padding hanya mempengaruhi elemen secara horizontal, tidak
    vertikal.
    Elemen inline :
    - b, strong, i, em, a, span, sub, sup, button, input, label, select, textarea
    - https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente

    inline-block :
    - Tidak ada elemen yang secara default memiliki property display: inline-block;
    - Kita harus ubah manual property tersebut.
    - Prilaku dasarnya sama ddengan elemen inline.
    - Perbedaannya, elemen inline-block dapat kita atur tinggi dan lebarnya.

    Buat file dengan nama “Display.html”


    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>Display CSS</title>
    5.     <link rel="stylesheet" href="css/Display.css">
    6. </head>
    7. <body>
    8.     <div class="header">
    9.         <h1>Selamat Datang di Website Kami</h1>
    10.    </div>
    11.
    12.    <div class="navigasi">
    13.        <h2>Daftar Link</h2>
    14.        <a href="#">Link 1</a>
    15.        <a href="#">Link 2</a>
    16.    </div>
    17.    <div class="navigasi1">
    18.        <a href="nav1">Link 3</a>
    19.        <a href="nav1">Link 4</a>
    20.    </div>
    21.</body>
    22.</html>

    Buat folder dengan nama “css” dan buat file didalamnya dengan nama “Display.css”
    1. /* panjang dan lebar elemen inline tidak berubah meski diberi height da
    n width */
    2. a {
    3.     background-color: pink;
    4.     height: 200px;
    5.     width: 200px;
    6. }
    7. /* panjang dan lebar elemen inline berubah ketika diberi "inline-block" 
    */
    8. .navigasi1 a {
    9.     background-color: pink;
    10.    height: 200px;
    11.    width: 200px;
    12.    display: inline-block;
    13.}

    Block :
    - Elemen HTML yang secara default menambahkan baris baru Ketika dibuat.
    - Jika tidak diatur lebar-nya, maka lebar default dari elemen block akan
    memenuhi lebar dari browser / parent-nya.
    - Kita dapat mengatur tinggi dan lebar darii elemen block.
    - Didalam elemen block, kita dapat menyimpan tag dengan elemen inline,
    inline-block atau bahkan elemen block lagi.
    Elemen block :
    - h1-h6, p, ol, ul, li, form, hr, div
    - https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

    Buat file dengan nama “Display.html”


    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>Display CSS</title>
    5.     <link rel="stylesheet" href="css/Display.css">
    6. </head>
    7. <body>
    8.     <div class="header">
    9.         <h1>Selamat Datang di Website Kami</h1>
    10.    </div>
    11.
    12.    <div class="navigasi">
    13.        <h2>Daftar Link</h2>
    14.    </div>
    15.
    16.    <div class="main">
    17.        <h2>lorem</h2>
    18.        <p>
    19.            Lorem ipsum dolor sit amet consectetur adipisicing elit. De
    leniti, autem, laudantium 
    20.            sunt porro assumenda repellendus hic quod quam tempore esse 
    dolor saepe libero 
    21.            error alias! Dignissimos doloribus quaerat consequatur quam
    .
    22.        </p>
    23.    </div>
    24.</body>
    25.</html>

    Buat folder dengan nama “css” dan baut file didalamnya dengan nama “Display.css”
    1. .main {
    2.     width: 600px;
    3.     background-color: lightgreen;
    4. }
    5. .main h2 {
    6.     background-color: lightsalmon;
    7. }

    None :
    - Digunakan untuk menghilangkan sebuah elemen
    Buat file dengan nama “Display.html”
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>Display CSS</title>
    5.     <link rel="stylesheet" href="css/Display.css">
    6. </head>
    7. <body>
    8.     <div class="header">
    9.         <h1>Selamat Datang di Website Kami</h1>
    10.    </div>
    11.    <div class="main">
    12.        <h2>lorem</h2>
    13.        <p>
    14.            Lorem ipsum dolor sit amet consectetur adipisicing elit. De
    leniti, autem, laudantium 
    15.            sunt porro assumenda repellendus hic quod quam tempore esse 
    dolor saepe libero 
    16.            error alias! Dignissimos doloribus quaerat consequatur quam
    .
    17.        </p>
    18.    </div>
    19.</body>
    20.</html>

    Buat folder dengan nama “css” dan buat file didalamnya dengan nama “Display,css”
    1. p {
    2.     display: none;
    3. }

    B. s

    Anda mungkin juga menyukai