Membuat Tampilan Website Layout Menggunakan HTML dan CSS
Layout web adalah design dasar untuk membuat tampilan suatu website terutama pada pernyataan elemen-elemen sebuah website.Elemen-elemen website biasanya terdiri dari: Header, Navigator, Sidebar, Content, dan Footer.
Elemen Header
Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen.Biasanya elemen ini diidsikan dengan logo website, menu-menu global ( seperti login dan logout), maupun nama halaman yang sedang ditampilkan.
Elemen Navigation
Elemen navigasi yang memberikan akses navigasi ke halaman-halaman lain web.
Elemen Sidebar
Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal seperti daftar konten lain, iklan, atau menu tambahan.
Elemen Konten
Isi utama dari dokumen web.Pengguna biasanya datang ke web untuk melihat tampilan ini.
Elemen Footer
Bagian penutup dari website, yang dapat saja berisi tentang informasi lain tentang website, seperti lisensi penggunaan, sitemap, atau link ke website lain.
Membuat Tampilan Layout Website Sederhana
Sekarang kita akan membuat tampilan website sederhana menggunakan html dan css. Sebelumnya teman-teman harus memahami dahulu apa itu html dan css. Teman-teman dapat melihat materi tentang HTML dasar dan CSS dasar pada postingan sebelumnya. Disini saya telah membuat file dengan nama index.html.
Berikut isi file index.html :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>D'CODING</h1>
<p>Tutorial belajar membuat layout website sederhana</p>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</div>
<div class="badan">
<div class="sidebar">
sidebar
<ul>
<li><a href="#">Tutorial HTML dasar</a></li>
<li><a href="#">Tutorial CSS dasar</a></li>
<li><a href="#">Tutorial PHP dasar</a></li>
<li><a href="#">Tutorial JQuery dasar</a></li>
</ul>
</div>
<div class="content">
content
</div>
</div>
<div class="clear"></div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
Kemudian tulis code sbb dan beri nama mycss.css
.wrap{
background: #717070;
width: 900px;
margin: 10px auto;
}
/*bagian header*/
.wrap .header{
background: grey;
/*height: 50px;*/
padding: 2px 10px;
}
/*akhir header*/
/*bagian menu*/
.wrap .menu{
background: #717070;
}
.wrap .menu ul{
padding: 0;
margin: 0;
background: #717070;
overflow: hidden;
}
.wrap .menu ul li{
float: left;
list-style-type: none;
padding: 10px;
}
/*akhir menu*/
.clear{
clear: both;
}
.badan{
height: 450px;
}
/*bagian sidebar*/
.wrap .badan .sidebar{
background: lightblue;
float: left;
width: 25%;
height: 100%;
}
/*akhir sidebar*/
.wrap .badan .content{
background: grey;
float: left;
height: 100%;
width: 75%;
}
.wrap .footer{
width: 100%;
padding: 10px;
}
Hasilnya :
Seperti itulah cara membuat layout website sederhana. Kalian bisa memadu-padakan warnanya sendiri.
Sekian :)
Referensi:
https://www.malasngoding.com/membuat-tampilan-layout-website-sederhana-dengan-html-dan-css/
Layout web adalah design dasar untuk membuat tampilan suatu website terutama pada pernyataan elemen-elemen sebuah website.Elemen-elemen website biasanya terdiri dari: Header, Navigator, Sidebar, Content, dan Footer.
Elemen Header
Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen.Biasanya elemen ini diidsikan dengan logo website, menu-menu global ( seperti login dan logout), maupun nama halaman yang sedang ditampilkan.
Elemen Navigation
Elemen navigasi yang memberikan akses navigasi ke halaman-halaman lain web.
Elemen Sidebar
Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal seperti daftar konten lain, iklan, atau menu tambahan.
Elemen Konten
Isi utama dari dokumen web.Pengguna biasanya datang ke web untuk melihat tampilan ini.
Elemen Footer
Bagian penutup dari website, yang dapat saja berisi tentang informasi lain tentang website, seperti lisensi penggunaan, sitemap, atau link ke website lain.
Membuat Tampilan Layout Website Sederhana
Sekarang kita akan membuat tampilan website sederhana menggunakan html dan css. Sebelumnya teman-teman harus memahami dahulu apa itu html dan css. Teman-teman dapat melihat materi tentang HTML dasar dan CSS dasar pada postingan sebelumnya. Disini saya telah membuat file dengan nama index.html.
Berikut isi file index.html :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>D'CODING</h1>
<p>Tutorial belajar membuat layout website sederhana</p>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</div>
<div class="badan">
<div class="sidebar">
sidebar
<ul>
<li><a href="#">Tutorial HTML dasar</a></li>
<li><a href="#">Tutorial CSS dasar</a></li>
<li><a href="#">Tutorial PHP dasar</a></li>
<li><a href="#">Tutorial JQuery dasar</a></li>
</ul>
</div>
<div class="content">
content
</div>
</div>
<div class="clear"></div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
Kemudian tulis code sbb dan beri nama mycss.css
.wrap{
background: #717070;
width: 900px;
margin: 10px auto;
}
/*bagian header*/
.wrap .header{
background: grey;
/*height: 50px;*/
padding: 2px 10px;
}
/*akhir header*/
/*bagian menu*/
.wrap .menu{
background: #717070;
}
.wrap .menu ul{
padding: 0;
margin: 0;
background: #717070;
overflow: hidden;
}
.wrap .menu ul li{
float: left;
list-style-type: none;
padding: 10px;
}
/*akhir menu*/
.clear{
clear: both;
}
.badan{
height: 450px;
}
/*bagian sidebar*/
.wrap .badan .sidebar{
background: lightblue;
float: left;
width: 25%;
height: 100%;
}
/*akhir sidebar*/
.wrap .badan .content{
background: grey;
float: left;
height: 100%;
width: 75%;
}
.wrap .footer{
width: 100%;
padding: 10px;
}
Hasilnya :
Seperti itulah cara membuat layout website sederhana. Kalian bisa memadu-padakan warnanya sendiri.
Sekian :)
Referensi:
https://www.malasngoding.com/membuat-tampilan-layout-website-sederhana-dengan-html-dan-css/
Komentar
Posting Komentar