CARA MEMBUAT HALAMAN WEBSITE SEDERHANA

langkah-langkah membuat tutorial bagaimana cara membuat halaman website sederhana.:

1. Buat folder-folder yang dibutuhkan seperti folder untuk gambar dan folder untuk css-nya.
2. Setelah itu kita membuat file index.html. file index.html yang kita buat akan seperti berikut ini dan dibawahnya merupakan kode css yang terletak di folder css.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Pertemuan 1</title> <link rel="stylesheet" href="css/main.css"> </head>

3. Pada kode diatas digunakan untuk menghubungkan markup ke main.css yang terletak di folder css untuk mengatur tampilan nantinya.

* { margin: 0 auto; } body { font-family: "Open Sans"; color: #666; background: #f9f8f6; }

    
4. Pada Kode css diatas terlihat bahwa, pada bagian body font yang digunakan yaitu Open Sans dengan warna background mendekati putih.Selanjutnya, dibawah tag head tadi kita buat tag body yang didalamnya akan dibuat isi dari webnya.

<body> <div class="wrapper"> <header> <h1> Berita Otomotif</h1> <nav> <ul> <li><a href="" class="current"> Beranda</a></li> <li><a href="">Berita Terkini</a></li> <li><a href="">Berita Poluler</a></li> <li><a href="">Tentang Kami</a></li> <li><a href="kontak.php">Kontak</a></li> </ul> </nav> </header>

5. Untuk mengatur tampilannya pada main.css ditambahkan kode seperti berikut ini:

.wrapper { width: 940px; margin: 0 auto; /**border: 2px solid #000; **/ background-color: #fff; box-shadow: 0px 5px 10px rgba(0 , 0, 0, 0.5); } header { height: 160px; margin: 0 auto; background-color:#EBE2E2; } h1 { /**text-indent: -9999px; **/ text-align: center; font-size: 4em; width: 940px; height: 130px; margin: 0px; } nav, footer { clear: both; color: #fff; background-color: #aeaca8; height: 30px; } nav ul { display: inline; margin-right: 40px; } nav li { display: inline; margin-right: 40px; } nav li a { color: #fff; margin-top:6px; } nav li a:hover, nav li a.current { color: #000; } section.courses { float: left; width: 659px; border-right: 1px solid #eee; } article { clear: both; overflow: auto; width: 100%; } hgroup { margin-top: 40px; } figure { float: left; width: 290px; height: 220px; padding: 5px; margin: 20px; border: 1px solid #eee; } figcaption { font-size: 90%; text-align:center; margin-top: 10px; }

6. lebar dari kelas wrapper 960px dengan warna background putih dan jaraknya dari yang paling bawah adalah 150px Selanjutnya kita akan membuat bagian aside-nya

<aside class=""> <section class="popular-reciper"> <h2> Berita Populer</h2> <a href="">Honda CBR 250R</a> <a href="">Kawaski Ninja 250Fi</a> <a href="">Custom </a> </section> <section class="contact-details"> <h2> Kontak</h2> <p> Motor Moge 2016 </p> </section> </aside> <footer> © Motor Moge 2016 </footer> </div>

7. kode css untuk aside  

} aside { width: 230px; float: left; padding: 0px 0px 0px 20px; } aside section a { display: block; padding: 10px; border-bottom: 1px solid #eee; } aside section a:hover { color: #985d61; background-color: #efefef; } a { color: #de6581; text-decoration: none; } h1, h2, h3 { font-weight: normal; } h2 { margin: 10px 0px 5px 0px; padding: 0px; }

8. Bagian terakhir adalah footer

<footer> © Motor Moge 2016 </footer> </div> </body> </html>

9. Kode css untuk footer

footer { font-size: 80%; padding: 7% 0px 0px 20px; } p { margin: 10px; text-align: justify; }