Cara Membuat Halaman Web Sederhana

Assalamu'alaikum wr.wb
Kali ini saya akan memberikan tutorial membuat halaman web sederhana

Bahan - bahan :
1. Notepad
2. Browser (Google atau Mozilla Forefox)

Cara membuatnya :
1. Salin atau copy script berikut

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
/*Background Luar*/
body{
background: #000;
}
/*Bagian Lebar*/
.wrapper{
width: 100%;
height: auto;
font-family: Arial;
margin: 0;
}
/*Bagian Header atau Atas*/
header{
width: 97%;
height: 150px;
padding: 1%;
background: #000;
margin-bottom: 10px;
border: 3px solid #00f;
}
header h1{
font-size: 32pt;
}
header h1 a{
font-size: 32pt;
color: #fff;
text-decoration: none;
padding: 1%;
}
header h1 a:hover{
font-size: 32pt;
color: #00f;
text-decoration: none;
background: #000;
padding: 1%;
}
header p{
font-size: 14pt;
padding-left: 1%;
color: #fff;
}
/*Bagian Menu*/
nav{
width: 97%;
height: 50px;
padding: 1%;
background: #000;
margin-bottom: 10px;
border: 3px solid #00f;
}
nav ul li{
width: 20%;
list-style: none;
display: inline;
}
nav ul li a{
color: #fff;
text-decoration: none;
padding: 2.1%;
font-size: 14pt;
}
nav ul li a:hover{
color: #00f;
text-decoration: none;
background: #000;
}
/*Bagian Lebar Tengah*/
content{
width: 100%;
}
/*Bagian Konten*/
article{
width: 65%;
height: auto;
padding: 1%;
background: #000;
float: left;
margin-bottom: 10px;
border: 3px solid #00f;
color: #fff;
}
/*Bagian Dipinggir Kanan Konten*/
aside{
width: 27%;
height: auto;
padding: 1%;
background: #000;
float: left;
margin-bottom: 10px;
border: 3px solid #00f;
color: #fff;
margin-left: 2.6%;
}
/*Bagian Pembatas*/
.clear{
clear: both;
}
/*Bagian Footer atau Bawah*/
footer{
width: 97%;
height: auto;
padding: 1%;
background: #000;
color: #fff;
text-align: center;
border: 3px solid #00f;
}
/*Bagian Tombol Read More*/
.button{
width: auto;
background: #000;
border: 3px solid #00f;
color: #00f;
float: right;
padding: 1%;
text-decoration: none;
}
.button:hover{
background: #00f;
color: #fff;
}
</style>
</head>
<body>

<section class="wrapper">

<header>
<h1><a href="#">Heading</a></h1>
<p>Tagline</p>
</header>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<section class="content">

<article>
<h3>Lorem Ipsum</h3>
<p>Apakah Lorem Ipsum itu?</p><p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran ...</p>
<a class="button" href="#">Read More</a>
</article>

<aside>
<h3>News</h3>
<p>No news...</p>
</aside>
</section>

<section class="clear" />

<footer>
<p>Copyright © 2016 by Footer</p>
</footer>
</section>
</body>
</html>
2. Tempel atau paste script di atas ke Notepad
3. Save dengan nama berakhiran .html (contoh : halaman.html)

Cara Melihatnya :
1. Buka folder tempat menyimpan file tadi
2. Klik 2x file tadi

Sekian tutorial dari saya, semoga bermanfaat
Wassalamu'alaikum wr.wb

Cara Membuat Halaman Web Sederhana

4 Responses to "Cara Membuat Halaman Web Sederhana"