CSS Layouting Part 2 - Blogger Juga Harus Tahu Bagaimana Membuat Dan Mengatur Display Website

CSS Layouting Part 2 - Blogger Juga Harus Tahu Bagaimana Membuat Dan Mengatur Display Website – Bagian dari konsep css layouting salah satunya adalah mengenai Display, untuk mengatur seperti apa sebuah website dapat ditampilkan. Pastinya kita pernah berkunjung ke sebuah toko sungguhan. Setiap barang disusun, diatur, diletakkan dan diposisikan secara teratur dan rapi pada rak-rak. Bagian depan toko biasanya menampilkan display terbaik dari barang yang menjadi icon atau brand toko tersebut. begitu juga dengan display website. Bagian utama website akan menampilkan konten terbaik dan menarik untuk membuat pengunjung tertarik untuk mengunjunginya. Mengatur display website sama halnya ketika kita mengatur display toko membutuhkan keahlian, rasa seni, dan kerja keras agar bisa menarik orang lain untuk melihat display website ataupun display toko tersebut.

Untuk mengatur display website, seorang web designer atau web developer membutuhkan setidaknya keahlian tentang HTML. tag HTML berfungsi untuk memberi makna atau arti pada sebuah konten yang ditampilkan pada halaman website. Tag CSS sendiri memberikan style pada konten yang ditampilkan tersebut. bicara mengenai display website, maka kita membutuhkan property css, yaitu display.

Untuk memahami property css display ini. ada tag HTML yang perlu kita pahami agar kita bisa mengerti konsep css layouting yang berhubungan dengan display ini. tag HTML tersebut adalah tag <div> dan tag <span>. Tag HTML seperti yang pernah dijelaskan fungsinya untuk memberi makna atau arti pada sebuah konten yang ditampilkan pada halaman website. Namun, untuk tag <div> dan tag <span> tidak memiliki makna atau arti apapun, sebelum kedua tag tersebut kita berikan style CSS-nya, seperti ukuran width dan height nya, background color, border, shadow dan lain sebagainya. Tag <div> dan tag <span> akan memiliki arti ketika mengelompokkan tag-tag HTML pada halaman HTML yang kita buat. Seperti kita mengatur display toko, kita akan mengelompokkan barang-barang tertentu untuk didisplay dibagian yang sama agar tampak cantik, serasi, dan menarik.

See This Reference :
http://htmldog.com/guides/html/intermediate/spandiv

Tag <div> dan tag <span> tidak memiliki arti apapun, keduanya digunakan untuk mengelompokkan tag-tag HTML dan memberikan informasi pada tag-tag tersebut.

dengan penjelasan diatas, lalu apa hubungannya dengan display website??... setiap tag HTML yang diberikan property display pasti memiliki nilai. Begitu juga dengan tag <div> dan tag <span>, property display kedua tag tersebut memiliki nilai juga. untuk properti display tag <div> memiliki nilai block, sedangkan untuk property display tag <span> memiliki nilai inline.

<style>
        div {
            display: block;
        }

        span {
            display: inline;
        }
</style>

Untuk tag <div> digunakan untuk mengelompokkan elemen-elemen HTML menjadi sebuah class. Sedangkan untuk tag <span> digunakan untuk mengelompokkan text. silakan lihat contoh sintaknya dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Display</title>
    <style>
        .container {
            width: 850px;
        }
        .header{
            text-align: center;
            background-color: green;
        }
        .navigasi {
            background-color: pink;
        }
        .main {
            background-color: salmon;
        }
        .footer {
            background-color: black;
        }
        span {
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>Display Website</h1>
        <img src="display.png" alt="display" title="title">
    </div>
    <div class="navigasi">
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
        </ul>
    </div>
    <div class="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas consequuntur ratione dolores culpa non deserunt impedit, officia sunt amet quidem. <span> Enim, omnis incidunt quasi maiores corporis a, </span> labore quaerat earum quidem qui debitis et vel laboriosam asperiores voluptatum provident maxime cum eligendi obcaecati quas perferendis veritatis, voluptatibus, quo mollitia! Rem minima, suscipit repellat, omnis reiciendis dignissimos dolore perferendis blanditiis dicta veritatis quae, error pariatur vero. Laudantium harum id dignissimos commodi, totam et deserunt vel, tenetur distinctio, quisquam eligendi suscipit eos sint alias neque eius quod mollitia odio error iste molestias modi voluptates, unde similique. Tempore, laborum qui dignissimos temporibus nemo!</p>
    </div>
    <div class="footer">
        <p>Copyright 2018.Powered By Me</p>
    </div>
</div>
</body>
</html>

Property CSS : Display

See This Reference :
https://css-tricks.com/almanac/properties/d/display/
Setiap Tag Dalam HTML Berada Dalam sebuah kotak. Properti Display Pada CSS Mengatur Perilaku Dari Kotak Tersebut.

--------------------------------------------------------------------------------------------------

https://developer.mozilla.org/en-US/docs/Web/CSS/display

Setiap tag pada HTML memiliki nilai default untuk property display. Tetapi kita juga dapat mengubah perilaku dari tag tersebut dengan mengganti value nya.

Dari contoh halaman website diatas dan penjelasan 2 referensi tersebut, menjelaskan bahwa bagian bagian setiap website berupa kotak, dimana property display akan mengatur perilaku dari kotak-kotak tersebut. setiap elemen HTML memiliki nilai default untuk property displaynya, yaitu block dan inline. Kenapa diawal saya membahas dulu mengenai tag <div> dan tag <span>. Default dari property display tersebut kita juga bisa atur perilakunya sesuai dengan kebutuhan kita dengan mengubah nilainya. Berikut penjelasan nilai-nilai yang bisa diberikan pada property display. Property dispay memiliki 4 nilai :

1. Inline

• Elemen HTML 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 elemen inline tersebut. kecuali untuk tag <img>, itu satu2 elemen HTML yang memiliki value display inline, namun bisa diatur lebar dan tingginya.

2. Block

• Elemen HTML yang secara default menambahkan baris baru ketika dibuat

• Jika tidak diatur lebarnya, maka lebar default dari elemen block akan memenuhi lebar dari browser / parentnya.

• Kita dapat mengatur tinggi dan lebarnya dari elemen block.

• Di dalam elemen block, kita dapat menyimpan tag dengan elemen inline, inline block atau bahkan elemen block lagi.

3. Inline-block

• Tidak ada elemen yang secara default memiliki value property display : inline-block;, Maksudnya kalo ada, berarti telah diubah oleh usernya.

• Nilai property display ini, harus diubah secara manual.

• Perilaku dasarnya sama dengan inline, maksudnya apabila kita tambah elemen inline block, makanya hasilnya akan bertambah dibaris yang sama, bukan dibawahnya.

• Elemen inline block ini bisa diatur tinggi dan lebarnya.

4. None

• Nilai dari property display ini digunakan untuk menghilangkan elemen HTML agar tidak tampil pada halaman website

Dari penjelasan diatas, apabila ada property display yang memiliki nilai selain block dan inline, berarti nilainya sudah dirubah secara manual. Berikut elemen HTML berikut dengan nilai default dari property display-nya.

Block	Inline
h1-h6, p, ol, ul, li, form, hr, div	b, strong, i, em, a, span, sub, sup, button, input, label, select, textarea

Reference :

contoh untuk elemen li yang ada pada contoh sintak diatas, secara default memiliki nilai display block, kita bisa rubah nilainya menjadi inline block agar urutan linknya bisa berurut secara horizontal. Dengan membuat sintak CSS sebagai berikut:

<style>
        .navigasi li {
            display: inline-block;
</style>

Inline Block

Sekian untuk penjelasan, css layoting display, semoga artikel ini bisa bermanfaat buat teman-teman yang baru belajar web design seperti saya.

Happy blogging guys 😉😊😊....

kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik pembahasan.
the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.