Kali ini 'ana akan memberikan sebuah tutorial yang spesial bagi antum semua yang ingin belajar membuat HTML terutama untuk yang pemula dan 'ana akan memberikannya untuk antum semua,jadi 'ana akan memberikan kode HTML & CSS dengan hasil gambarnya sekali. Berikut tata cara belajarnya:
1.Download terlebih dahulu aplikasi untuk mengedit kode-kode yang akan 'ana berikan dan aplikasinya ada di sini,tinggal klik aja. Nama aplikasinya adalah Komodo Edit dan bagi antum yang menggunakan os windows download yang versi Windows Installer (MSI).
2.Setelah aplikasi Komodo Edit telah terinstal,kemudian antum buat project baru dengan mengklik New Project dan buat folder baru,disini 'ana membuat folder bernama tes.html
untuk menyimpan kode HTML & CSS nya.
3.Dan ini dia kodenya:
<!DOCTYPE html>
<html>
<head>
<title>ICHWAN SITE</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300);
body {
background: #eee;
margin:0;
font-family: 'Open Sans', sans-serif;
}
hr {
border:0;
background:#dedede;
height:1px;
}
header{
text-align: center;
color: #232323;
}
header .judul{
font-size: 17pt;
}
header .deskripsi{
font-size: 11pt;
}
.wrap {
width: 950px;
margin:25px auto;
}
nav.menu ul {
overflow:hidden;
color: blue;
list-style: none;
float:left;
padding:0;
width: 650px;
margin:0 0 0;
background: #1abc9c;
-webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);
-moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);
box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);
}
nav.menu ul li {
margin:0;
float:left;
}
nav.menu ul a {
padding:25px;
display:block;
font-weight:400;
font-size: 16px;
color: white;
text-transform: uppercase;
transition: all 0.5s ease;
text-decoration: none;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmhPJJC31vocrK-GCZ-tBpUQygd1ie2N09E85ZeSknlLIS6Wu3a4MCdHGw5A2UGU9D48AzNTVmsHlrNHA6Z2SKZIlPs2f4LeU-NkqF-LBxrkquSMIctlSa7gyLP-vlwJutgg_MZpc1XsrT/s1600/line.png);
background-repeat:repeat-x;background-position:Bottom center
}
nav.menu ul a:hover {
text-decoration: underline;
background: #cc0000;
}
.sidebar {
float:right;
width:200px;
}
.sidebar .widget {
padding:25px;
margin:0 0 25px;
background:#fff;
border-bottom: 2px solid #fff;
transition: all 0.5s ease;
}
.sidebar .widget:hover {
border-bottom: 2px solid #3498db;
}
.sidebar .widget h2 {
padding:0;
margin:0 0 15px;
color:#3498db;
font-size: 18px;
font-weight:800;
text-transform: uppercase;
}
.sidebar .widget p {
font-size: 14px;
}
.sidebar .widget p:last-child {
margin:0;
}
.blog {
float:left;
}
.conteudo {
width:600px;
padding:25px;
margin:25px auto;
background: #fff;
border:1px solid #dedede;
-webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
-moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);
}
.conteudo img {
min-width: 650px;
margin:0 0 25px -25px;
max-width: 650px;
}
.conteudo h1 {
padding:0;
margin:0 0 15px;
font-weight: normal;
color: #666;
font-family: Georgia;
}
.conteudo p:last-child {
margin: 0;
}
.conteudo .continue-lendo {
color:#000;
transition: all 0.5s ease;
text-decoration: none;
font-weight: 700;
}
.conteudo .continue-lendo:hover {
margin-left:10px;
}
.post-info {
float: right;
font-size: 12px;
margin: -10px 0 15px;
text-transform: uppercase;
}
@media screen and (max-width: 960px) {
.header {
position:inherit;
}
.wrap {
width: 90%;
margin:25px auto;
}
.sidebar {
width:100%;
margin:25px 0 0;
float:right;
}
.sidebar .widget {
padding:5%;
}
nav.menu ul {
width: 100%;
}
nav.menu ul {
float:inherit;
}
nav.menu ul li {
float:inherit;
margin:0;
}
nav.menu ul a {
padding:15px;
font-size: 16px;
border-top:1px solid #1abf9f;
border-bottom:1px solid #16a085;
}
.blog {
width:90%;
}
.conteudo {
float:inherit;
margin:0 auto 25px;
width:101%;
border:1px solid #dedede;
padding:5%;
background: #fff;
}
.conteudo img {
max-width: 110%;
margin:0 0 25px -5%;
min-width: 110%;
}
.conteudo .continue-lendo:hover {
margin-left:0;
}
}
@media screen and (max-width: 460px) {
nav.menu ul a {
padding:15px;
font-size: 14px;
}
.sidebar {
display:none
}
.post-info {
display:none;
}
.conteudo {
margin:25px auto;
}
.conteudo img {
margin:-5% 0 25px -5%;
}
}
</style>
</head>
<body>
<!-- bagian header-->
<header>
<h1 class="judul">ICHWAN SITE</h1>
<p class="deskripsi">Kali ini kita akan belajar cara membuat blog yang unik dan menarik dari bahasa pemograman HTML dengan mudah dan simple</p>
</header>
<!-- akhir bagian header -->
<div class="wrap">
<!-- bagian menu -->
<nav class="menu">
<ul>
<li> <a href="https://www.w3schools.com/">Menu</a></li>
<li> <a href="http://www.malasngoding.com/membuat-template-web-responsive-dengan-html-dan-css/">Blog</a></li>
<li> <a href="https://sholihinichwan.blogspot.co.id/">Web</a></li>
<li> <a href="https://codesaya.com/">Belajar HTML</a></li>
<li> <a href="https://btemplates.com/">Template</a></li>
</ul>
</nav>
<!-- akhir bagian menu -->
<aside class="sidebar">
<div class="widget">
<h2>Belajar HTML</h2>
<p>Anda bisa belajar HTML di sini:<a target="_blank" href="https://www.w3schools.com/">w3schools.com</a></p>
</div>
</aside>
<!-- bagian konten blog -->
<div class="blog">
<div class="contuedo">
<div class="post-info">
Di Posting Oleh: <b>Ichwan Sholihin</b>
</div>
<img src="http://ithelpbooks.com/wp-content/uploads/2017/01/HTMLCSSLogo.jpg">
<h1>Template Sederhana HTML & CSS</h1>
<hr>
<p>Selanjutnya kita akan belajar cara membuat template sederhana dengan pemograman bahasa HTML & CSS dengan mudah disini</p>
<a href="http://sholihinichwan.blogspot.co.id/2017/05/belajar-html-bagi-pemula.html">Selengkapnya...</a>
</div>
</div>
<!-- akhir bagian web -->
</div>
</body>
</html>
Dan ini dia hasilnya:
4.Silakan antum edit link,warna,dan template sesuai selera antum masing-masing.
Mungkin ini saja artikel untuk hari ini,selebihnya 'ana mohon maaf sebesar-besarnya jika ada artikel 'ana yang kurang berkenan di hati afwan sekalian,Terima kasih...
Wassalam......
EmoticonEmoticon