Membuat Desain Web Minimalis Konversi Desain ke HTML
Persiapan
Yang harus anda persiapkan pertama kali adalah konsentrasi, Jika anda kurang mengerti akan apa yang saya jelaskan, harap untuk membacanya berulangkali karena tutorial ini merupakan dasar dan bisa disebut fundamental untuk proses markup/pembuatan kode HTML.
Untuk memudahkan proses konversi desain, saya selalu membuat wireframe untuk desain yang dibuat, hal ini ditujukan untuk memudahkan anda dalam membuat layout web sesuai dengan desain juga untuk memudahkan kita dalam penamaan masing-masing elemen. Berikut ini adalah wireframe/kerangka desain web yang telah kita buat pada tutorial sebelumnya.
Sekilas HTML
Sedikit mengingatkan kembali, bahwa tugas HTML adalah untuk membuatmarkup/formatting dari desain web. Bukan untuk membuat penampilan yang sesuai dengan desain. Jadi jangan dulu memikirkan bagaimana agar markup HTML yang kita buat sesuai dengan desain, karena ini adalah tugas CSS untuk membuat markup HTML menjadi sesuai dengan Desain Web.
Struktur Standar HTML
Yang pertama kali ditulis tidak lain adalah struktur standar dari dokumen HTML itu sendiri. Struktur ini meliputi tag doctype, html, head, title dan body.
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Miniml : Web Dev Team</title>
- </head>
- <body>
- </body>
- </html>
Kode-kode selanjutnya akan kita tulis di dalam tab <body>.
Wrapper
Kita perhatikan bahwa desain web memiliki lebar 960px dan posisinya rata tengah, oleh karena itu kita membutuhkan sebuah div untuk menampung seluruh isi dari web tersebut. Kita beri id �wrapper� atau Anda bisa menamainya sendiri.
- <div id="wrapper">
- </div>
Kode-kode Selanjutnya akan kita tulis di dalam div wrapper ini.
Header
Jika kita perhatikan desain webnya atau wireframe di atas, dalam area header ini terdapat sebuah satu buah Logo dan menu. Sudah tahu tag-tag apa saja yang akan kita gunakan?, Pertama-tama kita buat sebuah div dengan id �header�.
- <div id="header">
- </div>
Untuk logo, disini saya akan menggunakan heading Level 1 dengan id �logo�, sebuah link dan gambar.
- <div id="header">
- <h1><a href="#"><img src="images/logo.png" alt="Miniml"></a></h1>
- </div>
Penggunaan tag h1 untuk logo dimaksudkan agar struktur dokumen HTML kita lebih semantik, kita ibaratkan logo ini sebagai Judul Utama dari situs kita ini. Sedangkan penambahan link/anchor dimaksudkan agar ketika pengunjung mengklik logo kita, maka pengunjung akan dibawa ke halaman utama.
Untuk bagian selanjutnya adalah menu, menu akan kita buat dengan menggunakan unordered list/tag ul lengkap dengan link.
- <ul id="menu">
- <li><a href="#">Home</a></li>
- <li><a href="#">Blog</a></li>
- <li><a hreflink download
Related Posts:
