Pada kesempatan kali ini kita akan
membahas cara membuat website sederhana dengan html 5, sebelumnya anda
diharapkan sudah mengerti dasar HTML
dan CSS karena pada tutorial ini tidak akan dijelaskan secara mendetail
mengenai HTML dan CSS, tutorial ini hanya menjelaskan secara garis
besar fungsi dari elemen yang dipakai.
Jika anda belum pernah membuat halaman web sederhana, sangat
disarankan untuk latihan membuat halaman web secara sederhana di artikel
” CARA MEMBUAT HALAMAN WEB SEDERHANA ” dalam artikel ini juga dijelaskan secara mendetail tentang apa saja alat yang digunakan dalam membuat website.
Silahkan anda ikuti langkah-langkah membuat desain website sederhana dengan
html ini:
1. Silahkan anda buka aplikasi Notepad/Notepad ++
2. Lalu buatlah Folder bebas (silahkan
diberi nama dan simpan terserah anda)
3. Kemudian ketik contoh script
sederhana berikut:
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
</div>
<img src="cf.jpg" width="1000px" height="300px">
<div id="header">
<ul>
<li><a href="nav.html">HOME</a><li>
<li><a href="nav.html">NEWS</a><li>
<li><a href="nav.html">CONTUCT US</a><li>
<li><a href="nav.html">ABOUT</a><li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="nav.html">-Products</a></li>
<li><a href="nav.html">-Events</a></li>
<li><a href="nav.html">-Promotions</a></li>
<li><a href="nav.html">-Nutritions & Wellness</a></li>
</ul>
</div>
<img src="coffee.jpg" width="500px" height="200px">
<div id="section">
<h1><center>POKKA<CENTER></h1>
<p>
Established in January 1977 by Pokka Sapporo Food & Beverage Limited (previously known as Pokka Corporation Japan), Pokka is a leading food and beverage group in Singapore and the Asia Pacific.
</p>
<p>
The company manufactures and markets a wide range of beverages under the reputed brand name "Pokka" and also owns and operates restaurant chains, serving varied culinary delights.
</div>
<div id="footer">
<marquee><font color="#000000">Copyright © 2013 Pokka Singapore-Customer Care Hotline: 1800-MY-POKKA (1800-69-76552)</font></marquee>
</div>
</body>
</html>
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="image">
</div>
<img src="cf.jpg" width="1000px" height="300px">
<div id="header">
<ul>
<li><a href="nav.html">HOME</a><li>
<li><a href="nav.html">NEWS</a><li>
<li><a href="nav.html">CONTUCT US</a><li>
<li><a href="nav.html">ABOUT</a><li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="nav.html">-Products</a></li>
<li><a href="nav.html">-Events</a></li>
<li><a href="nav.html">-Promotions</a></li>
<li><a href="nav.html">-Nutritions & Wellness</a></li>
</ul>
</div>
<img src="coffee.jpg" width="500px" height="200px">
<div id="section">
<h1><center>POKKA<CENTER></h1>
<p>
Established in January 1977 by Pokka Sapporo Food & Beverage Limited (previously known as Pokka Corporation Japan), Pokka is a leading food and beverage group in Singapore and the Asia Pacific.
</p>
<p>
The company manufactures and markets a wide range of beverages under the reputed brand name "Pokka" and also owns and operates restaurant chains, serving varied culinary delights.
</div>
<div id="footer">
<marquee><font color="#000000">Copyright © 2013 Pokka Singapore-Customer Care Hotline: 1800-MY-POKKA (1800-69-76552)</font></marquee>
</div>
</body>
</html>
4. Kemudian simpan
script diatas pada folder yang anda buat tadi.(*Ingat simpan dengan format
*HTML)
5. Langkah
selanjutnya adalah langkah untuk mengedit letak kata,gambar,warna dll.Maka
ketik script berikut ini :
#image
{background-image:url("a.jpg");
padding-left:0px;
height:0px;
}
#header {
background-color:#D2B48C;
color:#DC143C;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:93px;
height:400px;
width:100px;
float:left;
padding:5px;
}
#section {
background-color:#D2B48C;
height:300px;
width:480px;
float:left;
padding:10px;
}
#warna {
background-color:#DDA0DD;
height: 388px;
width:782px;
float:left;
padding:10px;
}
#footer {
background-color:#CD853F;
color:white;
text-align:center;
padding:1px;
clear:both;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display:block;
width: 120px;
font-weight:bold;
color:#000000 ;
background-color:#CD853F;
text-align:centre;
padding:4px;
text-decoration:none;
text-transform:centaur;
}
a:hover, a:active {
background-color: #800000;
}
6. Lalu simpan
script tersebut pada folder yang anda buat dan simpan dengan
format Cascade Style Sheet (*CSS)
7. Biasanya dalam satu folder
berisi :
8. Dan hasil proses dari langkah atas menjadi :
Cukup sampai disini tutorial Cara Desain Website Sederhana dengan HTML,
Pada tahap ini kita sudah membuat website meskipun sangat sederhana,
simple dan terbilang cukup mudah, web sederhana ini hanya terdiri dari
satu halaman web saja. Kita bisa menambahkan halaman lain dengan cara
duplikat halaman web yang sudah dibuat dan isinya kita ganti dengan yang
lain.
Tutorial diatas masih sebatas cara membuat web simpel dan biasa, yang
perlu diketahui bahwa website simpel ini masih bersifat statis tidak
dinamis. Tutorial cara membuat website sederhana ini sangat jauh dari
kesempurnaan, maka dari itu kami sangat mengharapkan saran dan kritikan
yang membangun.
Happy Nyekrip! Salam optimis :)#tugas3
Good Artikel sist ;)
BalasHapus