Cara Desain Website Sederhana dengan HTML
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
0 komentar:
Posting Komentar