Membuat Web Sederhana dengan HTML5 dan CSS – Part 3

Membuat Web Sederhana dengan HTML5 dan CSS – Part 3

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

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:

<br />
&lt;html&gt;<br />
     &lt;head&gt;<br />
         &lt;title&gt;.:: UKMFT ITC ::.&lt;/title&gt;<br />
         &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot; /&gt;<br />
     &lt;/head&gt;<br />
     &lt;body&gt;<br />
         &lt;div class=&quot;wrapper&quot;&gt;<br />
         &lt;/div&gt;<br />
     &lt;/body&gt;<br />
&lt;/html&gt;<br />
 

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.

Langkah 4: Membuat Elemen header dan nav HTML5

Dalam contoh ini, Elemen <header> digunakan untuk tempat dari  nama website dan navigasi utama. Berikut skrip header, letakkan persis dibawah <div class=”wrapper”>.

<br />
&lt;header&gt;<br />
     &lt;h1&gt;UKMFT ITC&lt;/h1&gt;<br />
     &lt;nav&gt;<br />
          &lt;ul&gt;<br />
              &lt;li&gt;&lt;a href=&quot;.&quot;&gt;Beranda&lt;/a&gt;&lt;/li&gt;<br />
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tentang&lt;/a&gt;&lt;/li&gt;<br />
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Kontak&lt;/a&gt;&lt;/li&gt;<br />
             &lt;li&gt;&lt;a href=&quot;login.php&quot;&gt;Login&lt;/a&gt;&lt;/li&gt;<br />
        &lt;/ul&gt;<br />
     &lt;/nav&gt;<br />
 &lt;/header&gt;<br />
 

Kita menggunakan elemen <nav> untuk membuat  navigasi. Elemen ini bisa digunakan di berbagai keperluan dalam pembuatan navigasi, baik navigasi yang berada tepat dibawah header, atau navigasi yang terletak pada footer.

Dalam skrip diatas kita menentukan judul halaman yang telah kita letakkan pada elemen <h1> dan memberikan daftar link navigasi sebagai alat navigasi untuk mempermudah dalam mengakses halaman web.

untuk langkah 5 – 8 akan dibahas di postingan berikutnya 😀

Share