Membuat Web Sederhana dengan HTML5 dan CSS – Part 4

Membuat Web Sederhana dengan HTML5 dan CSS – Part 4

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

Langkah 5: Membuat Elemen article HTML5

Elemen <article> bertindak sebagai wadah untuk setiap bagian dari halaman yang dapat berdiri sendiri.

Bisa berupa artikel atau tulisan blog, komentar atau posting forum, atau lainnya. Jika halaman terdiri dari beberapa artikel, maka kita akan meletakkan masing-masing artikel dalam elemen <article>. Berikut skripnya, dan kita bungkus skrip ini dengan elemen <section>.

<br />
 &lt;!-- Halaman Web Sisi Kiri --&gt;<br />
&lt;section class=&quot;courses&quot;&gt;<br />
          &lt;article&gt;<br />
                &lt;figure&gt;<br />
                    &lt;img src=&quot;images/bigdata.jpg&quot; width=&quot;290px&quot; height=&quot;220px&quot; /&gt;<br />
               &lt;/figure&gt;<br />
               &lt;h2&gt;Seminar Nasional Big Data&lt;/h2&gt;<br />
               &lt;p align=&quot;justify&quot;&gt;<br />
                      Big Data adalah istilah umum untuk segala himpunan data (data set)<br />
                      dalam jumlah yang sangat besar, rumit dan tak terstruktur sehingga<br />
                      menjadikannya sukar ditangani apabila hanya menggunaka perkakas<br />
                      manajemen basis data biasa atau aplikasi pemroses data tradisional belaka<br />
              &lt;/p&gt;<br />
          &lt;/article&gt;<br />
          &lt;article&gt;<br />
               &lt;figure&gt;<br />
                      &lt;img src=&quot;images/blts.jpg&quot; width=&quot;290px&quot; height=&quot;220px&quot; /&gt;<br />
              &lt;/figure&gt;<br />
              &lt;h2&gt;BLtS to Gresik&lt;/h2&gt;<br />
              &lt;p align=&quot;justify&quot;&gt;<br />
                   11 juni 2011, hari yang cerah dan matahari kian memerah, tergambar<br />
                   begitu anggun pesonanya. Tepat pada pukul 13.00 WIB semua panitia<br />
                   telah berkumpul untuk bersiap-siap melanjutkan acara Brings Linux to<br />
                   School Tour de East Java yang akan disenggelarakan pada tangal 12 Juni 2011<br />
                   oleh UKMF ITC (Information Technology Center).<br />
              &lt;/p&gt;<br />
          &lt;/article&gt;<br />
 &lt;/section&gt;<br />
 

Letakkan skrip diatas tepat dibawah skrip header yang sudah kita buat sebelumnya. Elemen <section> digunakan untuk mengelompokkan elemen konten yang terkait , dan biasanya setiap bagian akan memiliki judul tersendiri.

Elemen <figure> digunakan untuk menyisipkan gambar sedangkan elemen  <h2> digunakan untuk judul dari berita dan <p> digunakan untuk isi/penjelasan dari artikel berita.

Kesimpulannya dalam skrip diatas kita membuat artikel berita dengan memberinya judul, gambar beserta penjelasan.

Langkah 6: Membuat Elemen Aside HTML5

Elemen <aside> bertindak sebagai tempat/wadah untuk konten yang berhubungan dengan seluruh halaman. Sebagai contoh, elemen ini bisa berisi link ke halaman web lain atau daftar posting terbaru. Berikut skrip dari elemen Aside. Letakkan skrip ini dibawah skrip <section> diatas, tepatnya setelah skrip </section>.

<br />
 &lt;!-- Halaman Web Sisi Kanan --&gt;<br />
 &lt;aside&gt;<br />
       &lt;section&gt;<br />
           &lt;h2&gt;Berita Populer&lt;/h2&gt;<br />
           &lt;a href=&quot;#&quot;&gt;Seminar Nasional Big Data&lt;/a&gt;<br />
           &lt;a href=&quot;&quot;&gt;BLtS to Gresik&lt;/a&gt;<br />
        &lt;/section&gt;<br />
        &lt;section&gt;<br />
             &lt;h2&gt;Kontak&lt;/h2&gt;<br />
             &lt;p&gt;website : &lt;a href=&quot;http://www.ukmf-itc.web.id&quot;&gt;www.ukmf-itc.web.id&lt;/a&gt;&lt;/p&gt;<br />
        &lt;/section&gt;<br />
 &lt;/aside&gt;<br />
 

Langkah 7: Membuat Elemen Footer HTML5

Setiap website akan punya footer, elemen <footer> berguna untuk membuat footer, dengan footer kita bisa memberikan informasi tambahan mengenai website seperti informasi hak cipta, link ke halaman kebijakan privasi atau link lainnya.

Berikut skrip footer. Skrip Footer diletakkan setelah skrip <aside> diatas, tepatnya setelah skrip </aside>.

<br />
&lt;!-- Halaman Web Sisi Bawah --&gt;<br />
 &lt;footer&gt;<br />
       &amp;copy; 2015 Pelatihan Web Desain UKMFT ITC<br />
 &lt;/footer&gt;<br />
 

Pada tahap ini kita sudah membuat File HTML dan belum dilengkapi dengan skrip CSS dan Gambar, sehingga pada tahap ini web sederhana kita seperti gambar dibawah ini.

tampilan tanpa css

untuk langkah 8 atau terakhir akan dibahas di postingan berikutnya 😀

Share