 |
| Halaman website |
Contoh bikin website pada html dan css dinotepad++, Bagaimana sih cara membuat website pada html dan css ? memang untuk pemula terlalu sulit tapi setelah dipelajari secara bertahap ternyata tidak terlalu sulit .
Kalau begitu ayo kita lihat contoh coding HTML:
berikut itu adalah contoh coding html , kalian bisa memahami untuk isi nya terlebih dahulu<html><head><script type="text/javascript" src="http://subhishine.freehostia.com/shine/files/basiccalendar.js"></script><title></title><style type="text/css"></style><script src=""></script><link href="orng1.css" rel="stylesheet" type="text/css"></head><body><div class="wrapper"><header><center><div class="fontstyle"><font face="Curlz MT"><img src="m.png" width=100 height=100>Halker's Zebikh</font></div></center><nav><ul><li><a href="" class="current">HOME</a></li><li><a href="">NEWS</a></li><li><a href="">CONTACT US</a></li><li><a href="">ABOUT</a></li></ul><form><a href="" title=""><img src="" width=20 height=20><input type="text" name="search" placeholder="Search..."/></a></form></nav></header><section class="courses"><article><figure><img src="images.jpg" alt="soto" width="100%" height="100%"/></figure><hgroup><h2>Soto banjar </h2><h3>soto banjar kuliner tradisional kalimantan selatan</h3></hgroup><p>Soto Banjar adalah salah satu masakan tradisional dari Kalimantan selatan,kususnya Banjarmasin. Soto Banjar merupakan salah satu <a href=""><font color="blue"><u>lebih banyak...</font></u></a></p></article><article><figure><img src="image.jpg" alt="belanjaonline" width=290 height=225/></figure><hgroup><h3>Online Shopping</h3><h4>Mudahnya belanja Online</h4></hgroup><p>Kendati iPrice menyebut bahwa akses mobile menyumbang rata-rata 87 persen dari total jumlah traffic,<a href=""><font color="blue"><u>lebih banyak...</font></u></a></p></article></section><aside><section class=""><a href="" ><img src=".jpg" alt="" width="140%" height="30%" title="" /></a></section><br><section class=""><a href=""><img src="" alt="" width="140%" height="30%" title="" /></a></section><br><script type="text/javascript">var todaydate=new Date()var curmonth=todaydate.getMonth()+1var curyear=todaydate.getFullYear()document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));</script></aside><br><footer><center><font color="grey" size="4">© 2018 Halker's Zebikh</center></font></footer></div></body></html>
TAHAP 1 MEMBUAT BENTUK DESAIN HALAMAN WEBSITE
tentukan bentuk desain yang ingin kalian bentuk
 |
| Bentuk website |
Berikut tadi adalah contoh bentuk website yg dibuat
🔘untuk bagian atas yang tertulis Halker Zebikh itu adalah header
🔘untuk bagian yang bergaris berwarna PINK adalah Nav bisa kalian lihat di coding atas ada disana nav
🔘untuk bagian sebelah kiri content , atau section class="courses" , bisa kalian isi artikel nah coba kalian cek di coding atas ada section class="courses"
🔘untuk bagian kanan adalah sidebar , kalian bisa melihat coding diatas ada aside nah disana lah untuk sidebar
🔘 untuk bagian paling bawah adalah footer.
TAHAP 2 MEMBUAT CODING HTML HEADER & NAV
<html><head><title></title><style type="text/css"></style><script src=""></script><link href="orng1.css" rel="stylesheet" type="text/css"></head><body><div class="wrapper"><header><center><div class="fontstyle"><font face="Curlz MT"><img src="m.png" width=100 height=100>Halker's Zebikh</font></div></center><nav><ul><li><a href="" class="current"></a></li><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li></ul><form><a href="" title="google"><img src="g.png" width=20 height=20><input type="text" name="search" placeholder="Search..."/></a></form></nav></header>
TAHAP 3 CODING CONTENT DAN SIDE BAR
TAHAP 4 CODING FOOTER<section class="courses"><article><figure><img src= "" alt="soto" width="100%" height="100%"/></figure><hgroup><h2> </h2><h3></h3></hgroup><p> <a href=""><font color="blue"><u></font></u></a></p></article><article><figure><img src="" alt="belanjaonline" width=290 height=225/></figure><hgroup><h2></h2><h3></h3></hgroup><p><a href=""><font color="blue"><u></font></u></a></p></article></section><aside><section class=""><a href="" ><img src="" width="140%" height="30%" /></a></section><br><section class=""><a href=""><img src=" width="140%" height="30%" /></a></section></aside>
<footer></footer></div></body></html>
CODING CSS
header, section, footer, aside, nav, article, figure, figcaption {
display: block;}
body {
color:black;
background-image: url("e.jpg");
background-position: center;
-webkit-background-size: 90% 80%;
-moz-background-size: 110% 110%;
-o-background-size: 110% 110%;
background-size: 110% 110%;
font-family: Georgia, Times, serif;
line-height: 1.3em;
margin: 0px;}
.wrapper {
width: 1000px;
margin: 20px auto 20px auto;
border: 2px solid black;
background:transparent;
background: rgb(193, 192, 192);
background: rgba(119, 119, 119, 0.34);}
header {
height: 150px;
background:transparent;
}
h1 {
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0px;}
nav, footer {
clear: both;
color: black;
background-color: pink;
height: 50px;}
.fontstyle
{
color:navy;
font-size:70;
margin-top:50px;
margin-bottom:50px;
}
nav ul {
margin: 50px;
padding: 20px 0px 5px 30px;}
nav li {
display: inline;
margin-right: 50px;}
nav li a {
color: white}
nav li a:hover, nav li a.current {
color: black;}
header form{
float:right;
margin-top:-83px;
margin-right: 10px; }
header form input{
border:2px;
height:25px; }
section.courses {
float: left;
width: 659px;
border-right: 1px solid black;}
article {
clear: both;
overflow: auto;
width: 100%;}
hgroup {
margin-top:40px;}
figure {
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px;
}
aside {
width: 230px;
float: left;
padding: 0px 40px 60px 10px;}
.main {
width:300px;
border:1px solid white;
}
.month {
background-color:pink;
font:bold 12px verdana;
color:white;
}
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
.days #today{
font-weight: bold;
color: red;
}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid none;}
aside section a:hover {
color: grey;
background-color: white;}
a {
color: black;
text-decoration: none;}
h1, h2, h3 {
font-weight: normal;}
h2 {
margin: 10px 0px 5px 0px;
padding: 0px;}
h3 {
margin: 0px 0px 10px 0px;
color: navy;}
aside h2 {
padding: 30px 0px 10px 0px;
color: black;
margin-bottom:50px;}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;
}Berikut adalah coding untuk css nya , kalian bisa langsung copy dan tinggal kalian ganti-ganti agar mengetahui apa yang berganti.
Selamat Mencoba 😃
Mohon Maaf jika masih ada kekurangan dalam pembuatannya 😢
Sumber http://hm.if.undip.ac.id/pojokdiklat/webtutor/post/cara-membuat-website-sederhana-dengan-html-5-2016-08-25-521
Tidak ada komentar:
Posting Komentar