Membuat tampilan website yang menarik adalah hal yang sangat penting dalam pembuatan website, selain dengan menyajikan konten yang menarik tampilan website juga akan berpengaruh untuk membuat pengunjung betah berlama-lama di blog kita. Untuk membuat tampilan website yang menarik tidak cukup hanya dengan menggunakan tag-tag HTML, untuk yang belum mengerti apa itu HTML dapat melihat sekilas artikel sebelumnya tentang
Cara Membuat Web HTML Dengan Notepad. Nah untuk membuat tampilan website yang menarik kita membutuhkan CSS (Cascading Stylesheet), CSS adalah aturan yang mengatur komponen web sehingga tampak seragam. Untuk lebih jelasnya mari kita coba membuat website dengan HTML dan CSS.
Bahan yang dibutuhkan
1. Notepad++
2. Web Browser
Sebelum kita masuk ke coding penulis akan menjelaskan terlebih dahulu komponen apa saja yang akan kita buat.
 |
| Tampilan Website Yang Akan Dibuat |
Dalam halaman tersebut ada beberapa elemen pokok yang akan kita buat diantaranya :
<div id="wrapper"></div> berfungsi sebagai wadah dari seluruh konten yang akan kita buat mulai dari header, halaman artikel hingga footer
<header></header> disini kita akan meletakan logo website dan juga membuat menu website
<section id=content></section> disini kita akan membuat daftar artikel terbaru yang akan muncul ketika pengunjung membuka homepage kita
<aside></aside> disini kita akan meletakan sekilas tentang informasi data diri, kemudian artikel terbaru, dan artikel terpopuler
<footer></footer> disini kita akan meletakan tulisan copyright
Baiklah kita akan memulai membuat websitenya
1. Pertama-tama buat file baru dengan nama website.html, kemudian masukan script dibawah ini dan simpan
<HTML>
<head>
<title>My First Site</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="wrapper">
<header>
<img src="logo.png"/>
<ul id="menu">
<li><a href="">HOME</a></li>
<li><a href="">KOMPUTER</a></li>
<li><a href="">INTERNET</a></li>
<li><a href="">PEMROGRAMAN</a></li>
<li><a href="">ABOUT ME</a></li>
</ul>
</header>
<div id="main">
<section id="content">
<article>
<figure>
<img src="gambar.png"/>
<figcaption><h5>Gambar</h5></figcaption>
</figure>
<div id="description">
<h1>Judul Artikel</h1>
<h4>Kategori Artikel</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
</p>
</div>
</article>
<article>
<figure>
<img src="gambar.png"/>
<figcaption><h5>Gambar</h5></figcaption>
</figure>
<div id="description">
<h1>Judul Artikel</h1>
<h4>Kategori Artikel</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
</p>
</div>
</article>
<article>
<figure>
<img src="gambar.png"/>
<figcaption><h5>Gambar</h5></figcaption>
</figure>
<div id="description">
<h1>Judul Artikel</h1>
<h4>Kategori Artikel</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
</p>
</div>
</article>
</section>
<aside>
<h2>Sekilas Tentang Penulis</h2>
<p>Nama saya Rudi Rizkiyanto, saya mahasiswa disebuah perguruan tinggi di pringsewu. Saya adalah ... <a href="">[Read More]</a></p>
<br/>
<h2>Kategori</h2>
<ul id="kategori">
<li><a href="">Komputer</a></li>
<li><a href="">Internet</a></li>
<li><a href="">Website</a></li>
</ul>
<br/>
<h2>Artikel Populer</h2>
<ul class="related">
<li><a href="">Artikel1</a></li>
<li><a href="">Artikel2</a></li>
<li><a href="">Artikel3</a></li>
<br/>
<h2>Artikel Terkait</h2>
<ul class="related">
<li><a href="">Artikel1</a></li>
<li><a href="">Artikel2</a></li>
<li><a href="">Artikel3</a></li>
</ul>
</aside>
</div>
<footer>Copyright By Rizkiyanto</footer>
</div>
</body>
</HTML>
2. Buat file baru dengan nama style.css kemudian masukan script dibawah ini kemudian simpan.
*{
margin:0px;
padding:0px;
font-family:"segoe ui", arial, verdana, sans-serif;
}
body{
background-color:#ccffff;
}
#wrapper{
width : 780px;
margin:0 auto;
background-color:#999999;
}
header{
background-color:#333333;
width:100%;
height:150px;
}
header img{
padding-top:5px;
padding-left:5px;
width:200px;
height:100px;
}
#menu{
margin-top:10px;
padding-left:10px;
}
#menu li{
background-color:#cccc00;
display:inline;
list-style:none;
padding:3px 10px;
margin-right:5px;
border-radius:5px;
}
#menu li a{
text-decoration:none;
color:black;
}
#menu li:hover{
background-color:#ccff00;
}
#main{
width:770px;
margin:5px;
overflow:hidden;
}
#content{
width:560px;
float:left;
}
#article-place{
width:540px;
margin-top:5px;
padding:5px;
background-color:#cccccc;
}
article{
background-color:white;
margin-top:3px;
overflow:hidden;
}
article:first-child{
margin-top:0px;
}
figure{
float:left;
width:160px;
}
figure img{
width:150px;
height:150px;
padding:3px;
}
figcaption{
text-align:center;
}
#description{
margin-right:2px;
width:375px;
float: right;
}
aside{
width:200px;
margin:5px;
float:right;
}
#kategori{
list-style:none;
}
#kategori li a{
width:100%;
text-decoration:none;
color:black;
}
.related{
list-style:none;
}
.related li a{
text-decoration:none;
font-size:9pt;
}
footer{
clear:both;
height:30px;
margin-top:5px;
padding-top:10px;
text-align:center;
background-color:#cccccc;
}
3. Coba buka halaman website tersebut pada web browser, jika dilakukan dengan benar akan tampil tampilan diatas.
Sekian artikel tentang cara membuat website dengan menggunakan HTML dan CSS, semoga membantu.
Baca Juga :
Membuat Kalkulator Dengan Visual Basic 6.0Belajar Mengetik 10 Jari Cara Menyembunyikan File Di PCCara Membuat Web HTML Dengan Notepad
