Tugas 9 Rekayasa Web 0316

1412511667 SRI HARTATIK 1



Kacamata’s Crafts merupakan aplikasi web sederhana dengan menggunakan HTML5. Web ini berisi tentang produk hasil dari kreativitas Rajut dan Flanel. Hasil kreatif tersebut antara lain dapat berupa Bross, Sarung Handphone, Tas, Gantungan kunci dsb. Selain itu juga membagikan tata cara pembuatan baik dengan posting artikel maupun dengan video Tutorial.Dalam pembuatan Website sederhana ini Saya menggunakan HTML5 dan sedikit tambahan CSS. Dan seperti biasanya alat yang digunakan dalam membuat website ini dengan • Google Chrome / Mozilla Firefox sebagai Browser.• Notepad++ sebagai tempat menulis Script.


Langkah 1 : Membuat Sketsa Desain Halaman WEB.

Dalam pembuat desain web, terlebih dahulu desainlah sketsa pada kertas setelah itu implementasikan pada tampilan web dengan HTML5. Sketsa desain halaman web dapat memberikan gambaran mengenai layout halaman web dan bagaimana cara mengatur letaknya. Dengan adanya sketsa juga bisa mempermudah kita untuk menyiapkan script HTML dan CSS apa saja yang dibutuhkan.


Kerangka Tampilan


Langkah 2 : Menentukan Konsep Pembuatan WebsiteDalam penentuan Konsep ini menggunakan HTML5 untuk membuat struktur halaman. Header dan footer bertempat di dalam elemen <header> dan <footer> Penjelasan Produk Crafts 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> . Artikel Craft berada dalam <article> dan ditambahkan elemen <figure> dan <figcaption> untuk menyisipkan gambar. Terdapat <hgroup> untuk pengelompokkan judul judul . Terdapat <aside> untuk konten konten terkait.


Langkah 3 : Membuat Script Stuktur dengan HTMLPembuatan Script Struktur dengan HTML5 ini menggunakan Notepad++. Dibawah ini penjelasan tag nya :

<style type=“text/css”> digunakan untuk menyimpan Script CSS untuk mengantur Tampilan Halaman Web. <title>Kacamata’s Crafts</title> digunakan untuk memberikan title halaman web. <div class=“wrapper”> untuk membungkus elemen halaman web.


Script Langkah ke - 3


Langkah 4 : Membuat Elemen Header dan Navigasi ( Nav )Elemen Header digunakan untuk tempat dari nama Website dan Navigasi Utama. Diletakkan tepat di dibawah tag <div class=“wrapper”>. Penjelasan :

Elemen <nav> untuk membuat navigasi yang digunakan untuk berbagai keperluaan. Contoh Beranda – Produk - Kontak




Langkah 5 : Membuat Elemen Article HTML 5 Elemen Article digunakan untuk bagian dari halaman yang dapat berdiri sendiri dan berpotensi sindikasi. <article> dapat berupa artikel atau tulisan blog, komentar atau posting lainnya. Dalam tahap ini script article kita bungkus dengan elemen <section> Elemen <figure> digunakan untuk menyisipkan Gambar Elemen <figcaption> untuk memberi keterang gambar. <hgroup> merupakan pengelompokkan satu atau lebih elemen <h1> sampai <h6>




Langkah 6: Membuat Elemen Aside HTML5Elemen Aside sebagai tempat untuk konten yang terkait dengan seluruh halaman. Misal berisi Link Halaman, daftar Posting atau lebih dikenal dengan Widget ( jika di Blogspot ).Script Langkah ke - 6


Langkah 7: Membuat Elemen Footer HTML5Footer selalu diperlukan dalam tampilan web. Elemen Footer biasanya digunakan untuk memberikan informasi tambahan mengenai website seperti informasi hak cipta atau link informasi lainnya. Script footer diletakkan setelah tag </aside>.

Pada tahap ini File HTML sudah terbuat tetapi belum dilengkapi deng Script CSS dan Gambar. Script Langkah ke - 7


Langkah 8 : Membuat Script CSS dan GambarScript CSS akan di insert ke dalam elemen <style type=“text/css”> ( Letakkan di bawah tag tersebut)


Script Langkah ke – 8


Lanjutan Script


Lanjutan Script


Lanjutan Script


Background Web

Header Web

Bross Kupu Kupu Tas Rajut

Education

Tugas 9 Rekayasa Web 0316