Assalamu'alaikum Wr. Wb.
A. PENDAHULUAN
Selamat datang di blog saya, kali ini saya akan membagikan sedikit informasi atau shering tentang cara membuat layout wesite sederhana untuk seorang pemula di bidang programing. Untuk lebih jelasnya mari kita simak artikel berikut ini.
B. LATAR BELAKANG
Layout Website adalah proses penataan tata letak atau pengaturan objek-objek yang terdapat dalam suatu halaman, sedangakan desain merupakan proses imajinasi dan kreasi seseorang di dalam mengekpresikan dan menciptakan suatu keindahan yang tentunya memerlukan estetika dan cita seni yang tinggi.
C. MAKSUD DAN TUJUAN
- Agar bisa membuat layout untuk sebuah website
- Untuk memahami suatu bahasa pemrograman HTML & CSS
- Untuk menenal sebuah elemen-elemen yang ada di dalam layout
D. WAKTU YANG DIBUTUHKAN
Kurang dari 10 menit
E. ALAT DAN BAHAN
- Laptop
- Akses internet
- Text editor Sublime text 3
F. PEMBAHASAN
Layout Website adalah proses penataan tata letak atau pengaturan objek-objek yang terdapat dalam suatu halaman, sedangakan desain merupakan proses imajinasi dan kreasi seseorang di dalam mengekpresikan dan menciptakan suatu keindahan yang tentunya memerlukan estetika dan cita seni yang tinggi.
Layout meliputi penyusunan dan pembagian tempat dalam suatu halaman. Tata letak dan susunan yang baik dapat membuat tampilan halaman lebih menarik, rapih dan seimbang, sehingga enak untuk di lihat dan diapresiasi serta mudah dibaca.
Dalam dunia desain, layout berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar dan rapi. Sama seperti tipografi, terdapat sangat banyak elemen-elemen pada layout, yang tentunya tidak akan dapat dibahas pada bagian ini sendiri. Pembahasan layout secara meyeluruh akan memerlukan bukunya tersendiri. Kita akan hanya melihat elemen-elemen layout yang umumnya ditemukan pada dokumen web, dan bagaimana membuat elemen-elemen tersebut, anda bisa membuatnya dengan menggunkan bahasa pemrograman HTML & CSS.
Berikut adalah langkah-langkah dalam membuat layout website sederhana :
Selamat datang di blog saya, kali ini saya akan membagikan sedikit informasi atau shering tentang cara membuat layout wesite sederhana untuk seorang pemula di bidang programing. Untuk lebih jelasnya mari kita simak artikel berikut ini.
B. LATAR BELAKANG
Layout Website adalah proses penataan tata letak atau pengaturan objek-objek yang terdapat dalam suatu halaman, sedangakan desain merupakan proses imajinasi dan kreasi seseorang di dalam mengekpresikan dan menciptakan suatu keindahan yang tentunya memerlukan estetika dan cita seni yang tinggi.
C. MAKSUD DAN TUJUAN
- Agar bisa membuat layout untuk sebuah website
- Untuk memahami suatu bahasa pemrograman HTML & CSS
- Untuk menenal sebuah elemen-elemen yang ada di dalam layout
D. WAKTU YANG DIBUTUHKAN
Kurang dari 10 menit
E. ALAT DAN BAHAN
- Laptop
- Akses internet
- Text editor Sublime text 3
F. PEMBAHASAN
Layout Website adalah proses penataan tata letak atau pengaturan objek-objek yang terdapat dalam suatu halaman, sedangakan desain merupakan proses imajinasi dan kreasi seseorang di dalam mengekpresikan dan menciptakan suatu keindahan yang tentunya memerlukan estetika dan cita seni yang tinggi.
Layout meliputi penyusunan dan pembagian tempat dalam suatu halaman. Tata letak dan susunan yang baik dapat membuat tampilan halaman lebih menarik, rapih dan seimbang, sehingga enak untuk di lihat dan diapresiasi serta mudah dibaca.
Dalam dunia desain, layout berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar dan rapi. Sama seperti tipografi, terdapat sangat banyak elemen-elemen pada layout, yang tentunya tidak akan dapat dibahas pada bagian ini sendiri. Pembahasan layout secara meyeluruh akan memerlukan bukunya tersendiri. Kita akan hanya melihat elemen-elemen layout yang umumnya ditemukan pada dokumen web, dan bagaimana membuat elemen-elemen tersebut, anda bisa membuatnya dengan menggunkan bahasa pemrograman HTML & CSS.
Berikut adalah langkah-langkah dalam membuat layout website sederhana :
Elemen Header : Seperti namanya, header merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global (seperti login dan lougut), maupun nama halaman yang sedang di tampilkan.
Elemen Navbar : Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.
Elemen Content : Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berbeda pada bagian ini.
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 dibagian kiri atau kanan konten, atau bahkan di dua-duanya bisa di kiri dan di kanan konten, sesuai dengan kreatifitas perancangnya.
Elemen Footer : Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengguna, sitemap, ataupun link ke website lain.
Berikut adalah HTML-nya :
Berikut adalah syntax CSS nya :
G. KESIMPULAN
Dengan anda sudah memahami tentang elemen-elemen yang ada didalam layout, anda akan mudah dalam membuat suatu layout yang berguna untuk website anda.
Elemen Navbar : Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.
Elemen Content : Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berbeda pada bagian ini.
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 dibagian kiri atau kanan konten, atau bahkan di dua-duanya bisa di kiri dan di kanan konten, sesuai dengan kreatifitas perancangnya.
Elemen Footer : Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengguna, sitemap, ataupun link ke website lain.
Berikut adalah HTML-nya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Layout Sederhana</title>
<link rel="stylesheet" type="text/css" 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="content">
<h1>Content</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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Layout Sederhana</title>
<link rel="stylesheet" type="text/css" 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="content">
<h1>Content</h1>
</div>
<div class="sidebar">
<h1>Sidebar</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
</div>
</div>
</body>
</html>
Berikut adalah syntax CSS nya :
* {
margin: 0;
padding: 0;
}
body {
background-color: #D9D9D9FF;
}
.wrapper {
width: 1010px;
height: 610px;
background-color: black;
margin-top: 15px;
margin-left: 150px;
}
.header {
width: 1000px;
height: 99px;
text-align: center;
border-top: 3px solid black;
background-color: red;
margin: 5px;
}
.navbar {
width: 1000px;
height: 45px;
text-align: center;
background-color: green;
margin: 5px;
}
.content {
width: 690px;
height: 390px;
background-color: blue;
margin: 0 5px;
float: left;
}
.sidebar {
width: 303px;
height: 390px;
text-align: center;
background-color: yellow;
float: left;
margin: 0 2px;
}
.footer {
width: 1000px;
height: 55px;
text-align: center;
background-color: purple;
margin: 5px;
margin-top: 400px;
}
margin: 0;
padding: 0;
}
body {
background-color: #D9D9D9FF;
}
.wrapper {
width: 1010px;
height: 610px;
background-color: black;
margin-top: 15px;
margin-left: 150px;
}
.header {
width: 1000px;
height: 99px;
text-align: center;
border-top: 3px solid black;
background-color: red;
margin: 5px;
}
.navbar {
width: 1000px;
height: 45px;
text-align: center;
background-color: green;
margin: 5px;
}
.content {
width: 690px;
height: 390px;
background-color: blue;
margin: 0 5px;
float: left;
}
.sidebar {
width: 303px;
height: 390px;
text-align: center;
background-color: yellow;
float: left;
margin: 0 2px;
}
.footer {
width: 1000px;
height: 55px;
text-align: center;
background-color: purple;
margin: 5px;
margin-top: 400px;
}
G. KESIMPULAN
Dengan anda sudah memahami tentang elemen-elemen yang ada didalam layout, anda akan mudah dalam membuat suatu layout yang berguna untuk website anda.
H. REFERENSI
https://bertzzie.com/knowledge/desain-web-dasar/Layout.html
I. PENUTUP
Sekian yang hanya dapat saya samapikan, semoga artikel ini dapat bermanfaat bagi anda dan apabila ada kesamaan atau kesalahan kata dan tutur bahasa yang kurang berkenan saya mohon maaf yang sebesar besarnya.
https://bertzzie.com/knowledge/desain-web-dasar/Layout.html
I. PENUTUP
Sekian yang hanya dapat saya samapikan, semoga artikel ini dapat bermanfaat bagi anda dan apabila ada kesamaan atau kesalahan kata dan tutur bahasa yang kurang berkenan saya mohon maaf yang sebesar besarnya.
Wassalamu'alaikum Wr. Wb.
0 komentar:
Post a Comment