Tugas 9 Rekayasa Web 0316

1412511667 SRI HARTATIK 3
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 Website
Dalam 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 HTML
Pembuatan 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 HTML5
Elemen Aside sebagai tempat untuk konten yang terkait dengan
seluruh halaman. Misal berisi Link Halaman, daftar Posting atau lebih
dikenal dengan Widget ( jika di Blogspot ).

Langkah 7: Membuat Elemen Footer HTML5
Footer 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.

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

Script Langkah ke – 8

Lanjutan Script

Background Web
Header Web
Bross Kupu Kupu Tas Rajut

Tugas 9 Rekayasa Web 0316

More Related Content

Viewers also liked (12)

Similar to Tugas 9 Rekayasa Web 0316 (20)

More from sapatati (7)

Recently uploaded (20)

Tugas 9 Rekayasa Web 0316