BUAT WEB SEDERHANA ~ Buat website kekinian

<HTML>



<head>
<title>----Micro Cyber KW 2----</title>
<div class="page_menu_wrapper">
<nav class='page-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li><a href='/' itemprop='url' expr:title='data:blog.title'><img alt='logo blog' class='image-logo' height='30' src='Gins.png' expr:title='data:blog.title' width='171'/></a></li>
<li><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
<li><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
<li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
<li><a href='#' itemprop='url' title='Pasang Iklan'><span itemprop='name'>Iklan</span></a></li>
<li><a href='#' itemprop='url' title='Review Job'><span itemprop='name'>Review Job</span></a></li>
</ul>
<div class='clear'></div>
</nav>
<div class='sos-profil'>
<ul>

</div>
<style>
.page_menu_wrapper{width:100%;max-width:1100px;margin:0 auto}
.clear{clear:both}
.page-menu ul li,.sos-profil ul{list-style:none}
.page-menu ul li{display:inline-block;transition:all 400ms ease-in-out}
.page-menu{float:left;width:auto;height:auto;padding:0!important;margin:0 5px;font-size:100%;font-weight:400}
.page-menu ul{margin:0 auto!important;padding:0!important;line-height:3em}
.page-menu ul li a:hover{color:#e8554e!important}
.page-menu ul li a{color:#666!important;padding:0 20px 0 0;text-decoration:none}
.page-menu ul li a img{vertical-align:middle!important}
.sos-profil{float:right;margin:0}
.sos-profil li{float:left;display:inline-block;margin-left:10px}
.sos-profil a{color:#666;font-weight:500}
.sos-profil a:hover{color:#e8554e!important}
@media screen and (max-width:800px){.page-menu,.sos-profil{width:100%;margin:0}
.page-menu ul li{width:33.3%;float:left}
.page-menu ul li:first-child{width:100%;float:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:10px}
.page-menu ul li,.sos-profil{text-align:center}
.page-menu ul li a{margin:0 auto;padding:0}
.sos-profil ul{width:auto;display:inline-block;float:none;margin:0 auto;padding:0!important}
.sos-profil li{margin:0 10px}
.sos-profil{margin-top:10px}
.page_menu_wrapper{padding-bottom:10px}
}
@media screen and (max-width:480px){.page-menu ul{line-height:2em}
}
@media screen and (max-width:240px){.page-menu ul li{width:50%}
.sos-profil li{margin:0 5px}
}
</style>
<style>

/* CSS */
#wrapper{
width: 970px; /* Ini lebar Template secara keseluruhan */
margin: auto; /* Ini untuk membuat "CENTER" blog pada Browser */
}
.header{
height: 120px; /* Ini Untuk mengatur tinggi di header */
background-color:#FFA500; /* Ini Untuk mengatur warna background pada header*/
margin: 10px 10px 1px 10px;
padding: 10px;
border: 2px solid #000000; /* Border untuk mengatur ketebalan garis tepi dan #000000 adalah warna untuk garis tepi*/
}
.bagian-post{
float: right; /* Ini Untuk memposisikan Widget di kiri */
width: 650px; /* Ini Untuk mengatur lebar kotak postingan*/
height:400px;
margin: 0 10px 1px 0;
padding: 10px;
background-color: #ffffff;
border: 2px solid #000000;
}
.bagian-widget{
float: left; /* Ini untuk memposisikan Widget di Kanan */
width: 205px;
height:400px;
margin: 0 1px 1px 10px;
padding: 10px;
background-color:#8B0000;
border: solid 2px #000000;
}
.footer{
width: 800x;
background-color: #006400;
margin: 0 10px 10px 10px;
padding: 10px;
text-align: center; /* Ini untuk memposisikan tulisan berada ditengah atau center */
border: 2px solid #000000;
}
</style>
</head>

<body background="bgcolor.jpg">
<div id='wrapper'>



<div class='header'>
<center>
<h1><img src="Gins.png"></h1>
</center>
</div>
<div class='masmenu'>
<ul class='sf-menu'>
<li><a href='Tag blog.html'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1bK7RRegu602vMHIUI9cxnIaicLpKlJhH8hYhBr33sIO3ACgsTKjAcdOXtCsvObLOLnwyc_Bl6xFOYCLzYKwD-fExBW9iX245w7sTGUjemP8yZOdFg9gCa1StbF2TXBKo5177Jyi9fsY/s1600/home.gif' style='padding:0px;'/></a></li>
<li><a href='#'>Kontak kami</a></li>
<li><a href='#'>Materi web</a>
<ul>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
</ul>
</li>
<li><a href='Biodata.html'>Portofolio</a></li>
<li><a href='#'>Blog kami</a></li>
<li><a href='#'></a></li>
<li><a href='#'>video ku</a></li>
</ul>
<div class='menusearch'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here....'/>
<input class='searchbutton' src='data:image/gif;base64,R0lGODlhGAAYAPdlAKysrPr6+vn5+WJiYvj4+GNjY01NTW1tbXFxcV9fX1RUVFNTU729vf7+/lFRUff394ODg0NDQ2RkZF5eXmxsbLKysr6+vnNzc9PT03BwcN3d3bu7u8PDw1BQULm5udHR0WZmZl1dXefn50VFRevr6/v7+3JycvT09M7OzpKSktfX12VlZfDw8MrKytjY2MzMzP39/eLi4q2trUtLS0pKSpWVlW5ubn19fdbW1r+/v29vb6qqqri4uFdXV1VVVYKCgpSUlN7e3mdnZ35+fkRERNTU1GBgYFhYWJycnLS0tMjIyIWFhfPz8zw8POrq6tzc3HZ2dtLS0vz8/FxcXKurq09PT7a2ttra2sfHx1JSUnV1debm5q6urlZWVoCAgOnp6YGBgU5OTmtra7q6uv///////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAGUALAAAAAAYABgAAAjVAMsIHEiwoMGDCBMqXMiwYcMTT1RY0HDC4UAsKS5MkKAlxYcADitQGCDmAIUDBYRYafgBxIoMXHCokHFBwoAoCwVAmJBhC0EXUBKAYaIwyJQCHAxyGKADhUILR1aQMHgFQQEeChl0GcDCoAYTRjwoLJIlBAaDKBKAUKLwAQIDQwgQJPHDAISuWR10WPLii5MWXhxUASKAYY0OEUKYQJCAyILHAB4wpGJDQZMIPQ5USOJjBgC5CgOIGAMAiQcRAhkoGAHAosENCm64NoghxuzbuHPrLhgQADs=' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>
</div>

<style>
.masmenu{background:#2c8fc9; color:#fff;display:inline-block;width:100%;}
.masmenu ul{width:100%;padding:0;margin:0 auto}
.masmenu li:first-child a{padding:7px 10px 3px}
.masmenu li{list-style:none;display:inline-block;float:left}
.masmenu li a{;color:#fff;display:block;font:bold 13px Arial;position:relative;text-decoration:none;padding:10px}
.masmenu li a:hover{background:#2374a3; color:#fff}
.masmenu li a .sf-sub-indicator{overflow:hidden;position:absolute;text-indent:-9999px}
.masmenu li li a,.masmenu li li a:link,.masmenu li li a:visited{background:#2c8fc9;border-right:none;color:#fff;font:12px Arial;position:relative;text-transform:none;width:138px;padding:10px cator{overflow:hidden;position:absolute;text-indent:-9999px} none;opacity:0.8}
.masmenu li li a:hover,.masmenu li li a:active{background:#2374a3}
.masmenu li ul{height:auto;left:-9999px;position:absolute;width:160px;z-index:9999;margin:0}
.masmenu li ul a{width:140px}
.masmenu li ul ul{margin:-33px 0 0 157px}
.masmenu li:hover>ul,.masmenu li.sfHover ul{left:auto}
.menusearch{width:300px;float:right;margin:0 auto;padding:5px 10px 0 0}
.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:200px;height:23px; overflow:hidden;border-radius:3px;border:1px solid #5c820d;}
.searchform input {font:italic 12px Arial;color:#222;line-height:20px;height:20px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 260px;height:23px;border:0px;outline: none;line-height:23px;}
.searchform .searchbutton{border:none;font-size:12px;height:20px;width:20px;margin:0;padding:0}
</style>
<div>
<div class='bagian-post'>
<h3>Inilah Template Buatan Pertama Saya</h3>
<p>Mungin ini terlalu jelek untuk dilihat, tetapi saya telah bersusah payah belajar dan berusaha untuk memahami tentang web design. Saya Membuat template ini atas ilmu dari guru saya yang mengajar di smk telekomunikasi tunas harapan, dan juga hasil browshing saya di dunia internet. Saya sangat semangat kalau masalah website, walaupun itu bukan juruan saya hehehehe :D </p>
<a href="#"><b>Baca Selengkapnya ...</b></a> <br><br>

<h3>Belanja Murah Disini</h3>
<p>Selamat Siang semua, kali ini saya akan menawarkan bahan produk kami kepada anda semuanya. Siapa tahu anda tertarik dan ingin </p>
<a href="#"><b>Baca Selengkapnya ...</b></a> <br><br>
</div>
<div class='bagian-widget'>
<h2>Artikel Terkait</h2>
<ul type="square">
<li><a href="/">Belajar html</a></li>
<li><a href="#">kode html</a></li>
<li><a href="#">Apa itu web?</a></li>
<li><a href="#">buat navbar web</a></li>
<li><a href="#">Sejarah web</a></li>
<li><a href="#">Website Online ku</a></li>
</ul>
</div>
<div style='clear:both'>
<div Jl.jababeka 2,desa pasir gombong, sempu kramat
<p>Copyright ©2016 By Gins.net
</div>
</body>
</HTML>

Bila di jalankan hasil nya akan seperti ini *****

Ganti tanda ( # ) dengan alamat website anda.

SELAMAT MENCOBA SEMOGA BERHASIL

Sabtu, 15 Oktober 2016

BUAT WEB SEDERHANA

0 komentar:

Posting Komentar

Tentang saya

Blog Archive

Blogger templates

Blogroll

About