Cara menggunakan layout html

Question

Layout web merupakan suatu kerangka yang tersusun menjadi satu kesatuan halaman sebuah website. Saat kita memulai untuk membuat website layout menjadi bagian penting karena erat berkaitan dengan user interface dan user experience. Pada artikel kali ini saya ingin coba membagikan tutorial cara membuat layout template web responsive dengan menggunakan HTML dan CSS.

Table of Contents Show

Membuat Layout Template Website Dengan HTML
Hasil Tampilan Layout Halaman Web
Membuat Style Layout Template Dengan CSS
Template Layout Web Responsive Desktop
Layout Web Responsive Tablet
Template Layout Web Responsive Phone Mobile
Akhir Kata…

Secara umum tampilan web memiliki 4 struktur layout yaitu:

Header
Silebar
Konten
Footer

Bagian header dapat berupa judul dan tagline website, bagian silebar bisa di masukan daftar menu atau ads. bagian konten merupakan bagian utama pada website dimana fokus pengguna akan lebih banyak menyorot pada bagian layout ini. yang terakhir bagian footer yang berada pada posisi bottom di website, biasanya berisi keterangan tambahan pada suatu website.

Daftar Isi

Membuat Layout Template Website Dengan HTML

Buatlah sebuah file dengan teks editor yang kalian miliki bisa berupa notepad, notepad++, sublime text.

Simpan file dalam folder komputer kalian dengan nama index.html

<!DOCTYPE html>
<html>
<head>
<title>Layout Web Responsive Dengan HTML dan CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
</head>
    <body>
        <div id="wrap">
            <div id="header">
                <h1>JUDUL WEBSITE</h1>
            </div>
            <div class="row">
                <div class="col-3 col-m-5">
                    <div id="silebar">
                        <div id="judul_silebar">
                            SILEBAR
                        </div>
                        <div id="isi_silebar">
                            <ul>
                                <li><a href="#">Menu1</a></li>
                                <li><a href="#">Menu2</a></li>
                                <li><a href="#">Menu3</a></li>
                                <li><a href="#">Menu4</a></li>
                                <li><a href="#">Menu5</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-9 col-m-7">
                    <div id="konten">
                        <div class="col-12 col-m-12">
                            <h2>Konten</h2>
                            <p>Donec malesuada ex sit amet pretium sid ornare. Nulla congue scelerisque tellus, utpretium nulla malesuada sedint. Suspendisse venenatis,Lorem ipsum dolor sit magna dolor.</p>
                            <p>Donec malesuada ex sit amet pretium sid ornare. Nulla congue scelerisque tellus, utpretium nulla malesuada sedint. Suspendisse venenatis,Lorem ipsum dolor sit magna dolor.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div style="clear:both"></div>
            <div class="row">
                <div id="footer">
                    <div id="text">
                        Bagian Footer
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

HTML 5 telah menyediakan meta tag untuk mengontrol viewport dengan atribut name=’viewport’.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Viewport merupakan bagian/area halaman website yang terlihat oleh pengguna. Arena pandang tentu saja bervariasi karena saat ini minimal sudah ada 3 perangkat mobile phone, tablet dan desktop PC yang memiliki spesifikasi area pandang yang berbeda.

Pada atribut content terdapat nilai width=device-width yang artinya layout website akan menyesuaikan dengan ukuran layar perangkat yang mengakses website.

Sedangkan initial-scale=1.0 adalah bagian untuk set tingkatan zoom saat pertama kali halaman di muat oleh browser.

Terdapat juga sintak :

<link rel="stylesheet" href="style.css" />

untuk membuat style agar tampilan lebih menarik dengan menggunakan CSS dari file style.css yang akan kita buat nanti.

Struktur halaman yang kita buat kita definisikan dengan atribut id untuk setiap bagian template pada website.

Dengan atribut id setiap bagian dapat di atur style yang dibutuhkan lewat CSS yang akan kita buat.

Hasil Tampilan Layout Halaman Web

Ketika file index.html di buka di aplikasi browser, tampilan nya seperti pada gambar berikut:

Desktop

Mobile

Dapat di lihat pada contoh di atas penggunaan meta viewport dapat menyesuaikan layout yang di tampilkan berdasarkan ukuran layar perangkat.

Namun untuk membuat halaman web responsive secara keseluruhan tidak bisa hanya mengacu pada penggunaan meta viewport ini.

Pengaturan web responsive pada setiap elemen website dapat kita atur melalui CSS.

CSS adalah singkatan dari Cascading Style Sheets yang merupakan kumpulan perintah untuk mengatur gaya (style) pada HTML seperti warna, jarak margin, penggunaan jenis font, posisi elemen dan banyak lainnya.

Untuk membuat CSS bisa lewat 3 cara yaitu:

Inline CSS – menyertakan perintah css langsung pada elemen HTML.
Internal CSS – Mendefinisikan CSS di dalam tag <style>… </style> pada bagian <head> halaman HTML.
Eksternal CSS – Membuat file CSS sendiri (terpisah dari file HTML) untuk menggunakannya cukup panggil dari dalam tag <head>.

Pada artikel ini kita menerapkan cara yang ke 3 karena lebih efisien di bandingkan dua cara lainnya.

Membuat Style Layout Template Dengan CSS

Silahkan buat sebuah file baru dari teks editor kalian dengan nama style.css

* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
img {
    width: 100%;
    height: auto;
}

body {
background-image:url('bg.png');
  font-family: Tahoma,Geneva,sans-serif;
}

#wrap {
    width:90%;
    margin:auto;
    background-color:white;
    border-radius: 10px;
    padding: 5px;
    -moz-box-shadow: 0px 0px 10px #000;
    -webkit-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}

#header{
    background-image:url('header.jpg');
    height:150px;

}

#header h1{
    color:#00125b;
    padding:40px 0px 0px 20px;
    text-shadow:#fff 1px 1px 3px;
	float: left;
	color: #fff;
	font-family: 'Exo', sans-serif;
	font-size: 35px;
	font-weight: 200;
}

#header img {
    padding:40px 0px 0px 20px;
    float: left;
}

#silebar {
    width:100%;
    float:left;
    border-right:1px solid #bababa;
    border-bottom:1px solid #bababa;
    border-left:1px solid #bababa;
    border-radius: 10px;
}

#judul_silebar{
    padding:3px;
    text-align:center;
    font-weight:bold;
    border-bottom:1px solid #bababa;
    background-image:url('header.jpg');
    color:white;
    border-radius:5px;
}

#isi_silebar ul{
    list-style-type:none;
    padding:0px;
    margin:0px;
}

#silebar a{
    display:block;
    padding:5px;
    border-bottom:0px solid #bababa;
    text-decoration:none;
    font-size: medium;
    color:black;
}

#silebar a:hover{
    color: #0786AB;
}

#konten{
    padding:0px;
    width:100%;
    float:left;
    font-size:11pt;
    margin:5px;
    border-right:1px solid #bababa;
    border-bottom:1px solid #bababa;
    border-top:1px solid #bababa;
    border-left:1px solid #bababa;
    border-radius: 10px;
}

#footer{
    background-image:url('footer.jpg');
    height:90px;
}

#footer #text{
    color:#fff;
    padding:10px;
    text-align:center;
    font-size:11pt;
    text-shadow:#000 1px 1px 2px;
}

Untuk membuat halaman website menjadi responsive yang mana tampilan website dapat menyesuaikan untuk setiap perangkat. maka perlu di atur untuk kebutuhan yang sesuai oleh masing-masing perangkat .

Pada contoh di atas kita menggunakan media query untuk 3 jenis perangkat (mobile,tablet,dekstop).

Kita menggunakan teknik fluid desain yang mengacu pada penggunaan ukuran relatif dengan basis presentase bukan basis absolut seperti pixel (px) ataupun point.

Tengan teknik fluid desain kita dapat membagi halaman webiste menjadi 12 grid/kolom yang dapat kita tentukan pada setiap perangkat.


/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

Browser akan mendeteksi ukuran layar perangkat yang mengakses halaman website sehingga dapat menentukan penggunaan class col (untuk membuat grid/kolom) pada layout website.

Jika perangkat yang mengakses website memiliki ukuran minimal 768px (desktop) maka akan di set grid pada col-1 sampai 12 pada atribut width akan di isi masing-masing nilai dengan menggunakan presentase. Begitu juga dengan perangkat table dan mobile dimana untuk mobile seluruh grid akan di set dengan lebar maksimal (100%).

Hasilnya halaman layout website akan menjadi responsive:

Template Layout Web Responsive Desktop

Layout Web Responsive Tablet

Template Layout Web Responsive Phone Mobile

Dapat dilihat dari ketiga gambar di atas ketika di halaman website berada pada pada ukuran tertentu maka layout website pun akan menyesuaikan sesuai dengan rules yang telah dibuat.

Akhir Kata…

Sekian pembahasan kali ini mengenai cara membuat layout halaman web menjadi responsive dengan menggunakan HTML dan CSS. Semoga bermanfaat dan membantu teman-teman semuanya,.

Mohon maaf jika terdapat kekurangan/kesalahan dari penjelasan artikel di atas. Karena saya juga sebetulnya masih dalam proses belajar, tetap semangat teman-teman, Terima kasih.

kode html