Membuat Web Sederhana dengan HTML5 dan CSS – Part 5

Membuat Web Sederhana dengan HTML5 dan CSS – Part 5

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 */

<br />
 body {<br />
       background-image: url(&amp;quot;../images/dark-wood.jpg&amp;quot;);<br />
       background-position: center;<br />
       font-family: Georgia, Times, serif;<br />
       line-height: 1.4em;<br />
       margin: 0px;<br />
}</p>
<p>/* Untuk Membungkus Keselurahan Halaman Web */<br />
.wrapper {<br />
       width: 940px;<br />
       margin: 20px auto 20px auto; /* Atas Kiri Bawah Kanan*/<br />
       border: 2px solid #000000;<br />
       background-color: #ffffff;<br />
}<br />
 

 /* Untuk Halaman Web Sisi Atas */

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

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

<br />
/* Untuk Halaman Web Sisi Kiri */<br />
section.courses {<br />
     float: left;<br />
     width: 659px;<br />
     border-right: 1px solid #eeeeee;<br />
}<br />
article {<br />
     clear: both;<br />
     overflow: auto;<br />
     width: 100%;<br />
}</p>
<p>/* Untuk Gambar Artikel */<br />
figure {<br />
     float: left;<br />
     width: 290px;<br />
     height: 220px;<br />
     padding: 5px;<br />
     margin: 20px;<br />
     border: 1px solid #eeeeee;<br />
}</p>
<p>/* Untuk Halaman Web Sisi Kanan */<br />
aside {<br />
    width: 230px;<br />
    float: left;<br />
    padding: 0px 0px 0px 20px; /* Atas Kiri Bawah Kanan*/<br />
}<br />
aside section a {<br />
    display: block;<br />
    padding: 10px;<br />
    border-bottom: 1px solid #eeeeee;<br />
}<br />
aside section a:hover {<br />
    color: #985d6a;<br />
    background-color: #efefef;<br />
}<br />
aside h2 {<br />
    padding: 30px 0px 10px 0px; /* Atas Kiri Bawah Kanan*/<br />
    color: #079a9a;<br />
}<br />
 

/* Pendukung */

<br />
/* Untuk tag link */<br />
a {<br />
      color: #079a9a;<br />
      text-decoration: none;<br />
}</p>
<p>/* Untuk Heading */<br />
h1, h2, h3 {<br />
     font-weight: normal;<br />
}<br />
h2 {<br />
      margin: 20px 0px 5px 0px; /* Atas Kiri Bawah Kanan*/<br />
      padding: 0px;<br />
      color: #079a9a;<br />
}<br />
h3 {<br />
     margin: 0px 0px 10px 0px; /* Atas Kiri Bawah Kanan*/<br />
     color: #079a9a;<br />
}</p>
<p>/* Untuk tag Paragraf */<br />
p {<br />
     padding-right: 10px;<br />
}</p>
<p>/* Untuk Halaman Web Sisi Bawah */<br />
footer {<br />
     font-size: 80%;<br />
     padding: 7px 0px 0px 20px; /* Atas Kiri Bawah Kanan*/<br />
}<br />
 

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

Demo
Share