Mendesain Layout Sebelum Membuat Halaman Web

LAYOUT
 Hai Kali Ini Saya Akan Membahas Layout Atau Bentuk Halaman Web Yang Akan Kita Buat Nantinya :)
" Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar. Sama seperti tipografi, terdapat sangat banyak elemen-elemen pada layout, yang tentunya tidak akan dapat dibahas pada bagian ini sendiri. Pembahasan layout secara menyeluruh akan memerlukan bukunya tersendiri. Kita akan hanya melihat elemen-elemen layout yang umumnya ditemukan pada dokumen web, dan bagaimana membuat elemen-elemen tersebut dengan HTML dan CSS. "

Dalam Sebuah Halaman Web Umumnya Memiliki Element-element, Berikut Contoh Gambarnya ;

Elemen Header

Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global (seperti login dan logout), maupun nama halaman yang sedang ditampilkan.

Elemen Navigation

Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.

Elemen Sidebar

Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.

Elemen Konten
Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.

Elemen Footer
Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain.

Lalu Bagaimana kita dapat membuat layout umum seperti yang tampak pada gambar Elemen-elemen Layout pada Dokumen Web di atas? Sebelum membuat layout, tentunya kita terlebih dahulu harus mengetahui cara pengukuran elemen pada HTML. Karena tanpa dapat mengukur elemen dengan benar, kita tidak akan dapat membuat layout yang bagus.

Box Model

Salah satu prinsip mendasar dalam menyusun elemen-elemen HTML ialah Box Model. Apa itu box model? Konsep box model pada dasarnya merupakan konsep yang menyatakan bahwa elemen-elemen yang ada di dalam HTML adalah berbentuk kotak. Sekali lagi, seluruh elemen HTML berbentuk kotak. Ukuran dari setiap elemen itu sendiri dipengaruhi oleh isi dari elemen, margin, padding, dan border dari elemen tersebut.

Semua elemen juga dapat dikategorikan ke dalam dua cara penampilan, yaitu:

• Block Level Element merupakan elemen yang selalu dimulai pada baris baru, dan menambahkan baris baru pada akhir elemen. Hal ini menyebabkan elemen yang bersifat block akan selalu berada pada baris barunya sendiri ketika dituliskan. Contoh dari elemen block: p, h1, dan blockquote.

• Inline Level Elements merupakan elemen yang tidak membuat baris baru ketika dibuat. Elemen ini akan mengikuti alur dokumen sebagaimana mestinya, dan memiliki ukuran tinggi yang ditentukan serta ukuran lebar yang sesuai dengan isi elemen. Contoh dari elemen inline: span, b, i.

Perlu diperhatikan bahwa karena sifatnya, sebuah elemen inline tidak akan dapat menampung elemen blok (memiliki elemen blok di dalamnya), sementara elemen blok dapat menampung elemen blok maupun inline.

Berikut Contoh Kode Nya ;

Elemen H1

Elemen p otomatis membuka baris baru dari elemen h1, tetapi elemen bold ini tidak

Seperti yang telah saya dijelaskan sebelumnya, sebuah elemen HTML berbentuk kotak, dan ukurannya dipengaruhi oleh isi elemen, margin, padding, dan border.

Berikut Contoh Kode Nya;

Box Model

Box Model

Dan Itulah Hasil Dari Kode Diatas;

Properti Margin dan Padding
Setiap browser memberkan jarak antar elemen secara standar, agar elemen-elemen HTML dapat ditampilkan dengan optimal. Jarak antar elemen ini berbeda-beda, tergantung kepada browser yang mengimplementasikan. Untuk mengubah jarak antar elemen, kita dapat menggunakan properti margin.
Terkadang kita juga ingin memberikan jarak di dalam elemen sendiri, yaitu jarak dari konten elemen ke pembatas (border) elemen. Jarak ini dikenal dengan nama padding. Padding kerap digunakan untuk memberikan warna latar yang baik pada elemen. Berikut adalah contoh kode pengunaan margin dan padding:

div { margin: 10px; padding: 15px; }

Border
Border, sebagai pemberi tanda batas elemen memisahkan margin dan padding. Terdapat tiga properti utama yang membentuk sebuah border, yaitu border-width, border-style, dan border-color.
border-width
Seperti namanya, properti ini menentukan ketebalan border, yang diisikan dengan nilai pixel. Contoh kode adalah sebagai berikut:

div {
    border-width: 10px;
}

border-style
Menentukan cara penampilan dari border. Pilihan nilai yang dapat diisikan yaitu: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, dan outset. Ingin mengetahui kegunaan masing-masing nilai? Silahkan coba implementasikan elemen tersebut! Jika tidak diisikan, maka secara otomatis nilai yang dipilih ialah none, sehingga border tidak akan tampak.
Contoh kode:

div {
    border-style: dotted;
}

border-color
Seperti namanya, memberikan warna kepada border. Jika warna tidak diberikan, maka border akan menjadi warna hitam. Contoh kode:

div {
    border-color: red;
}

Ketiga properti di atas seringkali digunakan bersamaan, karena ketergantungan antar properti tersebut dalam membuat border yang indah. Penggabungan ketiga properti dapat ditulis dalam properti border seperti berikut:

div {
    border: 1px solid red;
}

Dan seperti yang dapat dilihat dari kode di atas, tentunya urutan penulisannya ialah border-width border-style border-color.
Meskipun seluruh elemen pada dasarnya berbentuk kotak, CSS memungkinkan kita untuk menampilkan elemen dengan sedikit variasi, yaitu memberikan sudut bulat kepada elemen.

Contoh Elemen dengan Sudut Bulat
Kita dapat menggunakan properti border-radius untuk membuat efek sudut bulat, seperti pada kode di bawah:

div { border-radius: 10px; }

Penyusunan Elemen

Pengukuran elemen dengan mengikut sertakan box model hanya merupakan sebagian pengetahuan yang diperlukan untuk membuat layout halaman yang sempurna. Pengetahuan lain yang harus dimengerti juga ialah cara menyusun elemen-elemen yang ada di dalam dokumen. Bagian ini akan membahas bagaimana menyusun elemen-elemen yang ada dalam dokumen, dengan berbagai teknik yang disediakan oleh HTML dan CSS.
 Berikut Contoh Kodenya;

<p>
    Ini adalah sebuah paragraf, yang didalamnya terdapat
    elemen <b>bold</b>, <i>italic</i>, <em>emphasis</em>,
    dan <strong>strong</strong>.
</p>

Pada kode di atas, elemen p merupakan penampung dari elemen b, i, em, dan strong. Bagaimana jika kita tidak ingin menggunakan p untuk menampung seluruh elemen-elemen yang ada? Untuk menampung elemen-elemen secara generik, kita dapat menggunakan elemen div. Elemen div merupakan elemen yang dirancang sebagai penampung dari elemen lainnya, sehingga elemen ini tidak memiliki makna semantik.
Berikut Contoh Kode Nya;

<div class="wrapper">
    <section id="articles">
        <article>
            <!-- Teks -->
        </article>
        <article>
            <!-- Teks -->
        </article>
        <article>
            <!-- Teks -->
        </article>
    </section>
    <aside>
        <nav>
            <!-- Menus -->
        </nav>
    </aside>
</div>

Dapat dilihat bagaimana div.wrapper di atas menampung banyak elemen-elemen blok lainnya. Dengan kode HTML di atas, panjang dari elemen-elemen yang ada di dalam div.wrapper tidak akan pernah lebih panjang dibandingkan dengan div.wrapper itu sendiri. Coba jalankan kode di bawah untuk melihat bagaimana elemen-elemen yang ada di dalam div.wrapper tidak dapat melewati ukuran div.wrapper itu sendiri: berikut contohnya ;

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            .wrapper {
                background: red;
                color: white;
                height: 600px;
                width: 800px;
            }
        </style>
    </head>

    <body>
        <div class="wrapper">
            <p>
            Proin nec rhoncus, quis, elementum amet parturient augue sagittis dictumst in dolor
            scelerisque pid, sociis enim porttitor et, porta porttitor. Tincidunt egestas
            ultricies, scelerisque.
            </p>
            <p>
            Dis augue, in elementum lundium lectus porttitor duis turpis dis. Nisi vel porta
            turpis arcu nec diam penatibus, et sit integer enim scelerisque ut amet?
            Nascetur nisi parturient lundium augue?
            </p>
            Odio sagittis cursus et ut ridiculus pulvinar habitasse, elementum et tristique non,
            nisi porttitor magna! Tristique adipiscing penatibus sed nunc. Non pulvinar vut
            porttitor! Odio nisi porttitor sit tincidunt dictumst, massa rhoncus.
            Sociis enim habitasse enim, nunc nascetur, ridiculus, et mus nascetur, augue ultricies
            aliquet mus a adipiscing amet?
            </p>
        </div>
            <p>
            Proin nec rhoncus, quis, elementum amet parturient augue sagittis dictumst in dolor
            scelerisque pid, sociis enim porttitor et, porta porttitor. Tincidunt egestas
            ultricies, scelerisque.
            </p>
            <p>
            Dis augue, in elementum lundium lectus porttitor duis turpis dis. Nisi vel porta
            turpis arcu nec diam penatibus, et sit integer enim scelerisque ut amet?
            Nascetur nisi parturient lundium augue?
            </p>
    </body>
</html>

Mungkin Segitu Aja Kali Ya Bahasan Saya Tentang Layout Pada Dunia Web.
' ketemu lagi nanti di postingan selanjutnya ya :D'
Jangan Lupa Like Fans Page Facebook Saya Disini  .

Agar Lebih Nyaman Membaca Postingan Saya Tanpa Perlu Koneksi Internet,
Download File Docx Nya Disini
Download File PDF Nya Disini

DAN MOHON MAAF APABLA POSTINGAN SAYA KURANG JELAS

Written by Nulled

Blogger Muda Yang Masih Berstatus Pelajar, Yang Berkecimpung Di Dunia IT Semenjak Tahun 2013 Dan Ingin Berbagi Ilmu Pengetahuan Tentang Programming Web Design,Desktop Application, Tips Blogging, Google Adsense, Dan Internet Marketing. Temukan Celotehan Saya Di Twitter @Anaksmkti