Membuat Web Sederhana dengan HTML5 dan CSS – Part 2

Membuat Web Sederhana dengan HTML5 dan CSS – Part 2

Hosting Unlimited Indonesia

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

Langkah 2: Menentukan Konsep membuat website

Kita akan menggunakan HTML, teknologi ini memperkenalkan beberapa elemen baru yang memungkinkan kita untuk membagi bagian dari halaman. Nama-nama elemen ini sesuai dengan jenis konten yang berada didalamnya.

<div class="wrapper">
       <!-- Halaman Web Sisi Atas -->
      <header>
           <h1>UKMFT ITC</h1>
           <nav>
                  <!-- nav konten disini -->
           </nav>
      </header>
      <!-- Halaman Web Sisi Kiri -->
      <section class="courses">
             <!-- section konten disini --> 
       </section>
       <!-- Halaman Web Sisi Kanan --> 
       <aside> 
               <!-- aside konten disini --> 
       </aside>
        <!-- Halaman Web Sisi Bawah --> 
        <footer> 
               <!-- footer konten disini --> 
        </footer>
</div>
 

Contoh pada kali ini yaitu membuat web yang dibangun menggunakan elemen HTML5 untuk membuat  struktur.

Sesuai dengan sketsa  halaman web diatas, Header dan footer bertempat di dalam elemen <header> dan <footer>. Berita dikelompokkan bersama di dalam elemen <section> yang memiliki atribut class yang nilainya courses (untuk membedakannya dari elemen <section> yang lain pada halaman). Sidebar berada di dalam sebuah elemen <aside> .

Setiap berita berada di dalam sebuah elemen <article>, dan menggunakan elemen <figure> untuk menyisipkan gambar. Di sidebar, terdapat berita popular dan kontak yang ditempatkan terpisah  di dalam elemen <section>.

Oke, kita sudah menentukan konsep dari membuat web sederhana, mari kita lanjutkan dengan membuat skrip HTML dan skrip CSS.

Langkah 3: Membuat Skrip Struktur Umum HTML

Pembuatan skrip struktur umum HTML memudahkan kita untuk memulai dalam membuat website. Buat file dengan nama index.html dan simpan di C:xampphtdocspelatihan_itc, kemudian ketikkan script dibawah ini:

<html>
    <head>
       <title>.:: UKMFT ITC ::.</title>
       <link type="text/css" rel="stylesheet" href="../css/style.css" />
    </head>
    <body>
         <div class="wrapper">
         </div>
    </body>
</html>
 

Skrip HTML diatas terdapat baris skrip <link type=”text/css” rel=”stylesheet”  href=”css/style.css” />, berfungsi untuk memanggil skrip CSS untuk mengatur layout halaman web. Sedangkan pada skrip <title>.:: UKMFT ITC ::.</title> berfungsi untuk memberikan title halaman web.

Skrip <div class=”wrapper”> berfungsi untuk membungkus elemen halaman web, ” bungkusan” ini kita beri class wrapper, dengan class ini kita bisa mengatur semua elemen yang berada didalamnya dengan skrip CSS.

Kesimpulan dari skrip diatas adalah kita telah memberikan judul halaman web dan menyediakan tempat untuk skrip CSS.

untuk langkah 4 – 8 akan dibahas di postingan berikutnya 😀

Hosting Unlimited Indonesia
Share