Layout HTML ~ Take Knowledge

Sebuah website sangat membutuhkan peranan LAYOUT (tata letak) dari setiap - setiap konten agar informasi yang disajikan terlihat rapi dan tersusun. Bayangkan saja sebuah koran tanpa penggunaan layout, tentunya informasi yang banyak akan terlihat acak - acakan dan mengurangi minat pembaca terhadap informasi yang disajikan padahal informasi tersebut bagus dan menarik, Pada HTML penggunaan layout.

Oleh karena itu LAYOUT sangat dibutuhkan dalam proses penyusunan konten pada HTML. Adapun cara membuat layout sederhana pada HTML dapat mengikuti langkah dibawah ini :

Langkah pertama tentukan bentuk layout mana yang akan dibuat, untuk lebih jelasnya dapat membuat sketsanya dahulu seperti gambar dibawah ini :

Setelah sketsa dari LAYOUT selesai dikerjakan , proses selanjutnya adalah mengaplikasikannya ke code, dengan melihat code dibawah ini :

Penjelasan :

Pada potongan code :


<div id="header">


<h1>Ini Bagian Header</h1>


</div>

Ini adalah bagian header/kepada dimana biasanya diletakan suatu banner untuk mempercantik tampilan website, penggunaan tag DIV adalah untuk membuat suatu kontainer/secara fisik berbentuk kotak, tag DIV berguna untuk membuat suatu pengelompokan terhadap suatu konten.

Pada potongan code :


<div id="nav">


<h3>Lorem</h3><br />


<h3>Ipsum</h3><br />


<h3>Dolor</h3><br />


</div>

Ini adalah bagian sidebar dimana penggunaan sidebar itu sendiri untuk memasukan link - link yang mengarahkan suatu halaman web ke halaman lain.

Pada potongan code :


<div id="section">


<h1>London</h1>


<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.


Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,


when an unknown printer took a galley of type and scrambled it to make a type specimen book.


It has survived not only five centuries


</p>


 


<p>Contrary to popular belief, Lorem Ipsum is not simply random text.


It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.


</p>


</div>

Ini adalah bagian isi dari content utama dimana tempat meletakan informasi.

Pada potongan code :


<div id="footer">


Copyright © byme.com


</div>

Ini adalah bagian footer pada LAYOUT tempat meletakan informasi mengenai website dan developer beserta tahun web ini buat.

Setelah elemen - elemen tersebut selesai disusun berdasarkan layout dari sketsa awal tadi, tampilan web belum akan terlihat seperti sketsa awal, karena hal selanjutnya yang akan dilakukan adalah menambahkan style didalamnya, style kali ini bukan style yang akan diberikan pada setiap atribut tag dari html, melainkan akan menambahkan suatu bahasa khusus yang akan mempercantik tampilan dari web untuk itu diperlukan CSS. CSS (Cascading Syle Sheet) adalah kumpulan code yang dapat memanipulasi tag - tag yang ada pada HTML, untuk lebih jelasnya dapat melihat potongan code dibawah ini :

Code diatas diletakan didalam tag <html> ... </html> dengan menambahkan tag <header> ... </header> sehingga code akhirnya akan seperti ini :

Penjelasan mengenai CSS akan dilanjutkan pada materi selanjutnya.

Selamat Mengerjakan ...

Take Knowledge

Layout HTML

Related Post