Membuat Layout

MEMBUAT LAYOUT
WEBSITE SEDERHANA DENGAN HTML CSS
Membuat layout website sederhana dengan HTML CSS merupakan bagian

penting dalam merancang desain tampilan situs, pekerjaan ini biasanya dilakukan oleh
UI UX web designer. Membuat layout website dengan HTML dan CSS oleh web designer
bertujuan agar tampilan web dapat terlihat profesional dan memiliki tujuan yang jelas.
Meskipun sederhana, inilah awal dari design web yang keren dan profesional, sebagai
dasar pengenalan sebuah struktur atau arsitektur kerangka situs. Jika terbiasa membuat
layout website sederhana bisa saja dikemudian hari dapat mengembangkan sendiri
framework css atau kerangka kerja situs dan aplikasi web. Sebuah framework yang berisi
template desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, serta
ekstensi JavaScript.
Berikut adalah daftar isi secara urut tutorial cara membuat layout website
sederhana dengan html css yang keren tanpa framework apapun.
 Membuat Folder Direktori
 Membuat Kode HTML untuk Membentuk Layout
 Membuat Style CSS pada Layout Web.
1. Membuat Folder Direktori Tutorial.

Buat sebuah folder pada drive manapun misal dengan nama "web-design",
tujuan folder ini adalah untuk menyimpan file source code html maupun css. Jika
menggunakan assets file sejenis gambar, folder direktori ini juga dapat digunakan
untuk menyimpan aset tersebut.
Sehingga struktur folder menjadi seperti gambar di bawah ini.
2. Membuat Kode HTML untuk Membentuk Layout.
Membuat kode html ini adalah tahapan pertama proses coding dalam membuat
layout website sederhana dengan html css. Dengan kode html ini maka kerangka
atau stuktur arsitektur sebuah website telah terbentuk, namun belum memiliki style.
Simpan kode html berikut sebagai index.html
<!DOCTYPE html>
<html>
<head>
<title>Membuat Layout Website Sederhana dengan HTML
CSS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="header">
<div class="jarak">
<h2>Membuat Layout Website Sederhana dengan HTML
CSS</h2>
</div>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="content">
<div class="jarak">

<div class="kiri">

<div class="border">
<div class="jarak">
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of
the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, [...]</p>
<button class="btn">Read More
..</button>
</div>
</div>


<div class="border">
<div class="jarak">
<h3>Excepteur</h3>
<p>Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit ...</p>
<button class="btn">Read More
..</button>
</div>
</div>

</div>


<div class="kanan">
<div class="jarak">
<h3>CATEGORY</h3>
<hr/>
<p><a href="#" class="undecor">HTML</a></p>
<p><a href="#" class="undecor">CSS</a></p>
<p><a href="#"
class="undecor">BOOTSTRAP</a></p>
<p><a href="#" class="undecor">PHP</a></p>
<p><a href="#" class="undecor">MYSQL</a></p>
<p><a href="#"
class="undecor">Jquery</a></p>
<p><a href="#" class="undecor">Ajax</a></p>
</div>
</div>

</div>
</div>
<div class="footer">
<div class="jarak">
<p>copyright © 2017. Your all reserved</p>
</div>
</div>
</body>
</html>
Perhatikan baris kode ke-5 yaitu <link rel="stylesheet"

href="style.css"/> terdapat link rel style tertuju ke file style css. Di dalam file css
tersebut kita dapat melakukan custom style sehingga layout website sederhana ini
menjadi lebih keren dengan implementasi style.
3. Membuat Style CSS pada Layout Web.

Sebagaimana penjelasan di atas, kita membutuhkan kode css untuk
membentuk style sehingga membuat layout website sederhana dengan html css
menjadi lebih keren.
Simpan kode css dibawah ini sebagai style.css
body{
background:#f3f3f3;
color:#333;
width:100%;
font-family:sans-serif;
margin:0 auto;
}
.header{
width:90%;
margin:auto;
height:120px;
line-height:120px;
background:#417aa8;
color:#fff;
}
.menu{
background-color:#417aa8;
height:50px;
line-height:50px;
position:relative;
width:90%;
margin:0 auto;
padding:0 auto;
}
.jarak{
padding:0 2pc;
}
.menu ul {
list-style:none;
}
.menu ul li a {
float:left;
width:70px;
display:block;
text-align:center;
color:#FFF;
text-decoration:none;
}
.menu ul li a:hover {
background-color:#4b88bb;
display:block;
}
.content{
width:90%;
margin:auto;
height:420px;
padding:0px;
background:#fff;
color:#333;
}
.border{
border:2px solid #4887b9;
margin-top:1pc;
padding-bottom:1pc;
padding-left:2pc;
padding-right:2pc;
}
.kiri{
width:70%;
float:left;
margin:auto;
background:#fff;
height:420px;
}
.kanan{
width:30%;
float:left;
margin:auto;
background:#fff;
height:420px;
}
.undecor{
text-decoration:none;
}
.footer{
width:90%;
margin:auto;
height:40px;
line-height:40px;
background:#417aa8;
color:#fff;
margin-bottom: 1pc;
}
Sampai disini pembahasan tutorial cara membuat layout website sederhana

dengan html css sehingga menjadi template web yang keren telah selesai. Jika
tutorial ini kita jalankan di web browser maka akan menampilkan halaman layout
website sederhana seperti gambar di bawah ini.
Jika ingin merubah warna, font, dan lainnya pada layout website sederhana
tersebut, silahkan sesuaikan properti nya pada file style css.

Membuat Layout

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Layout

Diunggah oleh

Hak Cipta:

Format Tersedia

MEMBUAT LAYOUT

WEBSITE SEDERHANA DENGAN HTML CSS

Membuat layout website sederhana dengan HTML CSS merupakan bagian

1. Membuat Folder Direktori Tutorial.

Perhatikan baris kode ke-5 yaitu <link rel="stylesheet"

3. Membuat Style CSS pada Layout Web.

Sampai disini pembahasan tutorial cara membuat layout website sederhana

Anda mungkin juga menyukai