Juragan coding – yup kali ini saya akan membagikan tutorial cara membuat layout web dengan css,sekedar info saja nih teman-teman bahwa membuat layout website itu merupakan hal yang sangat penting karena di dalam layout tersebut lah komponen-komponen dalam website kita akan di letakan seperti navigasi,konten,portfolio,dll.untuk membuat layout ada beberapa cara tapi saya tidak akan menjelaskan nya hanya point nya saja
- Pencil dan kertas
- Photoshop
- Tool wireframe
- Work coding
APA ITU LAYOUT?
Secara garis besar layout adalah gambaran interface dalam suatu halaman website atau blog yang biasa nya terdiri dari
- Header
- Main atau konten
- Sidebar
- Footer
Nah itu merupakan basic dari layout dalam halaman website,untuk lebih jelas nya silahkan lihat gambar di bawah ini
Nah lanjut ke tutorial
TUTORIAL MEMBUAT LAYOUT WEB
Nah layout yang akan kita buat yaitu terdiridari header,main,sidebar,footer
1. 1. Silahkan teman-teman buat basic html nya terlebih dahulu silahkan copy sintaksdi bawah ini
<html>
<head>
<title> Layout Web | juragancoding.com </title>
<!-- untuk meload css teman-teman -->
<link href="css/style.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<!-- start -->
<!-- end -->
</body>
</html>
<head>
<title> Layout Web | juragancoding.com </title>
<!-- untuk meload css teman-teman -->
<link href="css/style.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<!-- start -->
<!-- end -->
</body>
</html>
1. 2. Silahkan copy sintaks di bawah ini untuk menandakan bahwa teman-teman akan membuat class nya silahkan copy kan di antara start dan end
<div class="header">
<center><h1> Tutorial Membuat Layout Web - Juragancoding.com</h1></center>
</div>
<div class="main">
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
lorem <br />
<a href="#"> Read More </a>
<hr>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
lorem <br />
<a href="#"> Read More </a>
<hr>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
lorem <br />
<a href="#"> Read More </a>
<hr>
</section>
</div>
<div class="sidebar">
<center><h5> Menu web </h5></center><br />
<center>
<ul class="menu" type="none">
<a href="#"><li> Home </li></a>
<a href="#"><li> Contact </li></a>
<a href="#"><li> Portfolio </li></a>
</ul>
</center>
</div>
<div class="footer">
<center><h5> www.juragancoding.com</h5></center>
</div>
3. Nah selanjutnya buat folder CSS dan buat file dengan ekstensi .css lalu salin sintaks di bawah ini dan untuk susunan folder nya bisa lihat gambar di bawah ini
*{
margin: 0px;
padding: 0px;
}
.header{
width: 100%;
height: 70px;
background-color: red;
}
.header h1{
color: white;
font-family: sans-serif;
font-size: 18px;
padding-top: 20px;
}
.main{
width: 70%;
height: auto;
background-color: #E8E9F8;
float: left;
margin-top: 2px;
color: #000;
font-family: sans-serif;
font-size: 14px;
}
.main a{
color: black;
background-color: #5E62CC;
}
.sidebar{
width: 28%;
height: auto;
background-color: #555;
float: left;
margin-top: 2px;
color: #fff;
font-family: sans-serif;
margin-left: 5px;
}
.sidebar a {
color: white;
text-decoration: none;
line-height: 3px;
}
.footer{
width: 100%;
height: 30px;
background-color: red;
clear: both;
padding-top: 20px;
}
.footer h5{
color: white;
font-family: sans-serif;
font-size: 18px;
}
1. Nah untuk coding keseluruhan nya bisa copy di bawah ini dan hasil nya bisa lihat di bawah ini
