Pembuatan Desain Web Berbasis HTML 5

Menggunakan Adobe Dreamweaver CS6

 KATA PENGANTAR

Puji syukur kehadirat Allah SWT yang telah memberi rahmat, taufik, hidayah serta
inayahnya sehingga kami dapat menyelesaikan makalah ini tepat pada waktunya.

Solawat dan salam semoga tetap tercurah kepada junjungan kita Nabi Muhammad
SAW yang telah menjadi guru terbaikdan menjadi suri taulandan bagi umat islam di seluruh dunia.

Kami mengucapkan banyak terima kasih kepada teman teman yang telah membantu
dalam pembuatan makalah ini.Semoga modul ini bisa memberi informasi kepada para pembaca
mengenai ”Pembuatan Desain Web Berbasis HTML5 Menggunakan Adobe Dreamweaver CS6”.

Demikian sebagai pengantar kata,dengan iringan serta harapan semoga tulisan

sederhana ini dapat diterima dan bermanfaat bagi pembaca dan pendengar. Atas semua ini kami
mengucapkan banyak trima kasih,semoga segala bantuan dari semua aspek mudah mudahan
mendapatkan amal baik yang di berikan oleh Allah SWT.Amien ya robbal alamin.

JEMBER,21 DESEMBER 2015

Penulis
Pengenalan HTML
HTML (Hypertext Mark-up Language) adalah bahsa formatting yang biasa digunakan untuk
menampilkan laman web.
Sebelum membuat project tentang web desain, terlebih dahulu kita menentukan ide mengenai
website apa yang akan kita buat. Dalam project kita kali ini, website yang kita buat adalah mengenai artis
yang popular di Indonesia yaitu Afgan. Alasan Afgan kita jadikan tema dalam pembuatan website ini
dikarenakan banyak komponen-komponen pembuatan web yang mudah didapatkan di internet mengenai
seorang Afgan. Mulai dari foto-foto, artikel, biografi, musik, video, dan lain-lain. Selain itu, Afgan
merupakan artis yang rajin memperbarui statusnya di media sosial, baik itu Twitter atau Facebook
sehingga nantinya bisa kita masukkan status-status terbarunya di website yang kita buat.
Setelah kita menemukan tema untuk pembuatan website, kemudian kita menyiapkan konsep atau
sketsa desain layout web yang akan kita buat. Kita membuat konsep tersebut dengan menggunakan paint
yang kemudian kita desain menggunakan Photoshop. Berikut tampilan sketsa desain layout web yang kita
buat.

Sketsa di atas adalah layout web untuk menu home yang kemudian kita desain menggunakan Photoshop.
Dari atas hingga ke bawah terdapat bagian-bagian utama web yaitu main header, bottom header, content,
spacer, dan footer.
 Di bagian top header, di dalamnya terdapat judul web yang dituliskan “Afgan World”. Bagian
main header, di dalamnya terdapat foto Afgan dan menu-menu website yang ada di sebelah kanan foto.
Menu tersebut adalah: Biografi, Album, Galery, dan Kontak. Menu-menu ini nantinya akan dibangun
satu-persatu hingga selesai.
Bagian berikutnya yaitu bottom header yang merupakan border dari header. Di bawahnya
terdapat content yang merupakan bagian utama web berisi informasi yang disampaikan oleh web. Pada
menu home, content berisikan “News” yang memuat informasi seputar Afgan dan “Twitter Plugin” yang
memuat status-status terbaru yang diposkan oleh Afgan melalui jejaring sosial Twitter. Pada project kita,
bagian top header hingga footer kita buat sama untuk semua halaman pada masing-masing menu, hanya
berbeda pada content pada masing-masing halaman.
Bagian spacer merupakan border pembatas antara content dan footer. Bagian terakhir adalah
footer yang di dalamnya terdapat beberapa link, yaitu: link menu, informasi copyright, link-link ke situs
lain tentang Afgan.
Berikut ini adalah layout desain web pada menu Home yang telah dibuat menggunakan
Photoshop.

Setelah menu Home, kita membuat sketsa layout untuk menu-menu yang lain, yaitu: Biografi, Album,
Galery, dan Kontak serta membuat tampilannya dalam Photoshop. Berikut sketsa dan tampilan dalam
Photoshop untuk masing-masing menu.
 Layout Biografi

Layout Menu Album

Layout Biografi
 l\

Layout Kontak
 LANGKAH – LANGKAH PEMBUATAN HTML DAN CSS
Berikut langkah – langkah membuat halaman utama :
Berikut langkah – langkah membuat halaman Biografi :
Berikut langkah – langkah membuat halaman Album :
Berikut langkah – langkah membuat halaman Galery :
Berikut langkah – langkah membuat halaman Kontak :
Disamping membuat HTML kita juga membuat CSS, berikut data dari CSS :