Membuat Web Sederhana dengan HTML5 dan CSS – Part 5

Membuat Web Sederhana dengan HTML5 dan CSS – Part 5

Hosting Unlimited Indonesia

kita sudah membahas langkah 3 dan di postingan Membuat Web Sederhana dengan HTML5 dan CSS – Part 4, sekarang kita akan lanjut dengan tahap terakhir.

Langkah 8: Membuat Skrip CSS dan Gambar

Berikut skrip CSS yang nantinya kita insert ke dalam elemen <link type=”text/css” rel=”stylesheet”  href=”css/style.css” />. Buat file dengan nama style.css dan simpan di C:xampphtdocspelatihan_itc/css, kemudian ketikkan script dibawah ini:

/* Untuk Membungkus Keselurahan Halaman Web */

 body {
       background-image: url(&quot;../images/dark-wood.jpg&quot;);
       background-position: center;
       font-family: Georgia, Times, serif;
       line-height: 1.4em;
       margin: 0px;
}

/* Untuk Membungkus Keselurahan Halaman Web */
.wrapper {
       width: 940px;
       margin: 20px auto 20px auto; /* Atas Kiri Bawah Kanan*/
       border: 2px solid #000000;
       background-color: #ffffff;
}
 

 /* Untuk Halaman Web Sisi Atas */

/* Untuk Halaman Web Sisi Atas */
header {
     height: 160px;
     background-image: url(../images/header.png);
}
h1 {
    text-indent: -9999px;
    width: 940px;
    height: 130px;
    margin: 0px;
}
nav, footer {
   clear: both;
   color: #ffffff;
   background-color: #aeaca8;
   height: 30px;
}
nav ul {
     margin: 0px;
     padding: 5px 0px 5px 30px; /* Atas Kiri Bawah Kanan*/
}
nav li {
     display: inline;
     margin-right: 40px;
}
nav li a {
     color: #ffffff;
}
nav li a:hover, nav li a.current {
     color: #000000;
}
 

/* Untuk Halaman Web Sisi Kiri dan Gambar Artikel */

/* Untuk Halaman Web Sisi Kiri */
section.courses {
     float: left;
     width: 659px;
     border-right: 1px solid #eeeeee;
}
article {
     clear: both;
     overflow: auto;
     width: 100%;
}

/* Untuk Gambar Artikel */
figure {
     float: left;
     width: 290px;
     height: 220px;
     padding: 5px;
     margin: 20px;
     border: 1px solid #eeeeee;
}

/* Untuk Halaman Web Sisi Kanan */
aside {
    width: 230px;
    float: left;
    padding: 0px 0px 0px 20px; /* Atas Kiri Bawah Kanan*/
}
aside section a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #eeeeee;
}
aside section a:hover {
    color: #985d6a;
    background-color: #efefef;
}
aside h2 {
    padding: 30px 0px 10px 0px; /* Atas Kiri Bawah Kanan*/
    color: #079a9a;
}
 

/* Pendukung */

/* Untuk tag link */
a {
      color: #079a9a;
      text-decoration: none;
}

/* Untuk Heading */
h1, h2, h3 {
     font-weight: normal;
}
h2 {
      margin: 20px 0px 5px 0px; /* Atas Kiri Bawah Kanan*/
      padding: 0px;
      color: #079a9a;
}
h3 {
     margin: 0px 0px 10px 0px; /* Atas Kiri Bawah Kanan*/
     color: #079a9a;
}

/* Untuk tag Paragraf */
p {
     padding-right: 10px;
}

/* Untuk Halaman Web Sisi Bawah */
footer {
     font-size: 80%;
     padding: 7px 0px 0px 20px; /* Atas Kiri Bawah Kanan*/
}
 

itulah tutorial Membuat Web Sederhana dengan HTML5 dan CSS. tunggu tutorial berikutnya ya 😀

Demo
Hosting Unlimited Indonesia
Share