ASSALAMU'ALAIKUM WR. WB.
A. PENDAHULUAN
Selamat datang di blog saya. Kali ini saya akan memberitahu bagaimana cara membuat desain layout sederhana. Untuk lebih jelasnya simak baik -baik artikel saya kali ini.
B. LATAR BELAKANG
Layout website adalah pengaturan tulisan-tulisan dan gambar-gambar yang terdapat dalam suatu halaman.
Ada 3 kriteria dasar untuk sebuah layout yang dikatakan baik yaitu :
- Layout yang mencapai tujuan
- Layout dengan pemetaan visual / penyusunan yang rapi
- Layout yang menarik perhatian
C. MAKSUD DAN TUJUAN
Agar mengetahui bagaimana cara membuat layout website dan bagian-bagian layout website.
D. ALAT DAN BAHAN
- Text editor (saya menggunakan sublime text)
- Laptop
E. PEMBAHASAN
Para desainer grafis mengartikan layout adalah penyusunan dari elemen-elemen desain yang berhubungan kedalam sebuah bidang sehingga membentuk susunan artistik. Hal ini bisa juga disebut managemen bentuk bidang.
Terdapat banyak sekali elemen-elemen pada layout, tetapi kita akan membahas mengenai elemen-elemen yang umumnya terdapat pada website. Dan bagaimana cara membuat elemen-elemennya menggunakan html dan css ?. Berikut caranya.
Keterangan :
- Header : Seperti namanya , merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya elemen ini diisikan dengan llogo website, menu-menu global (seperti login dan logout), maupun nama halaman yang sedang ditampilkan.
- Navbar : Elemen navigasi yang memberikan akses navigasi ke halaman-halaman lain web.
- Konten : Isi utama dari dokumen web, pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini untuk mencari informasi.
- 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 samping kiri atau kanan elemen konten.
- Footer : Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi penggunaan, sitemap, ataupun link ke website lain.
Buat file dan simpan source code berikut dengan nama index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="navbar">
<h1>Navbar</h1>
</div>
<div class="konten">
<h1>Konten</h1>
</div>
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="navbar">
<h1>Navbar</h1>
</div>
<div class="konten">
<h1>Konten</h1>
</div>
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
</div>
</div>
</body>
</html>
Dan simpan source code berikut dengan nama style.css
* {
padding: 0;
margin: 0;
}
body {
background: lawngreen;
}
.wrapper {
width: 1330px;
height: 623px;
text-align: center;
background: blue;
margin:auto;
}
.header {
width: 1315px;
border: 2px solid white;
height: 100px;
border-radius: 20px;
background: orchid;
margin: 5px;
}
.navbar {
width: 1315px;
height: 45px;
border: 2px solid white;
border-radius: 20px;
background: yellow;
margin: 5px;
}
.konten {
width: 895px;
height: 385px;
border: 2px solid white;
border-radius: 20px;
background: purple;
margin:0 5px;
float: left;
}
.sidebar {
width: 405px;
height: 385px;
border: 2px solid white;
border-radius: 20px;
background: red;
float: left;
margin:0 5px;
}
.footer {
width: 1315px;
height: 55px;
border: 2px solid white;
border-radius: 20px;
background: orange;
margin-top: 400px;
margin-left: 5px;
}
padding: 0;
margin: 0;
}
body {
background: lawngreen;
}
.wrapper {
width: 1330px;
height: 623px;
text-align: center;
background: blue;
margin:auto;
}
.header {
width: 1315px;
border: 2px solid white;
height: 100px;
border-radius: 20px;
background: orchid;
margin: 5px;
}
.navbar {
width: 1315px;
height: 45px;
border: 2px solid white;
border-radius: 20px;
background: yellow;
margin: 5px;
}
.konten {
width: 895px;
height: 385px;
border: 2px solid white;
border-radius: 20px;
background: purple;
margin:0 5px;
float: left;
}
.sidebar {
width: 405px;
height: 385px;
border: 2px solid white;
border-radius: 20px;
background: red;
float: left;
margin:0 5px;
}
.footer {
width: 1315px;
height: 55px;
border: 2px solid white;
border-radius: 20px;
background: orange;
margin-top: 400px;
margin-left: 5px;
}
F. REFERENSI
w3school.com
G.KESIMPULAN
Sebelum membuat website kita harus tahu bagaimana layout yang akan kita buat. Dan Layout sangatlah penting bagi website, bagi pemula pastikan telah mengerti tentang pengkodean html dan css.
WASSALAMU'ALAIKUM WR. WB.
0 Comments