Cara Membuat Layout Web Responsive Dengan HTML dan CSS
Membuat Layout Web Responsive dengan HTML dan CSS
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.
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.
Contoh Program:
Buatlah sebuah file dengan teks editor yang kalian miliki bisa berupa notepad, notepad++, sublime text atau yang lainnya.
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>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</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 sintax :
<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:
Dekstop
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:
1. Inline CSS – menyertakan perintah css langsung pada elemen HTML.
2. Internal CSS – Mendefinisikan CSS di dalam tag <style>… </style> pada bagian <head>
halaman HTML.
halaman HTML.
3. Eksternal CSS – Membuat file CSS sendiri (terpisah dari file HTML) untuk menggunakannya
cukup panggil dari dalam tag <head>.
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: auto;
height: auto;
}
body {
background-color: #fff;
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-color: brown;
height:150px;
}
#header h1{
color:#f000d0;
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-color: brown;
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-color: black;
height:90px;
}
#footer #text{
color: #fff;
padding:10px;
text-align:center;
font-size:11pt;
text-shadow:#000 1px 1px 2px;
}
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
Template Layout Web Responsive Tablet
Template Layout Web Responsive Mobile
Sekian dlu guys tutornya
Komentar
Posting Komentar