Setelah anda membuat desain web pada tutorial sebelumnya, kali ini kita akan meng-konversi desain web yang telah kita buat menjadi baris-baris kode HTML. Jika anda ingin mengetahui bagaimana proses pembuatan desain web silahkan baca tutorial Membuat Desain Web Minimalis Dengan Photoshop.
Versi video tutorial
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 membuat markup/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 href="#">Contact Us</a></li> </ul>
Content
Untuk konten dair website akan kita tampung dalam sebuah div dengan id content. Jadi pertama-tama kita buat sebuah div dengan id content dan kode HTML selanjutnya akan di tulis di dalamnya.
<div id="content"> </div>
Heading
Elemen pertama yang anda temukan adalah sebuah teks heading, untuk membuatnya karena kita menggunakan heading level 1 untuk logo, maka untuk heading ini kita gunakan level 2.
<h2>We are a professional web developer & designer team, and here is what we can do for you</h2>
Features
Elemen selanjutnya adalah 3 buah item berisi fitur, lengkap dengan gambar, judul fitur dan deskripsi singkat. Karena ketiga elemen ini memiliki struktur yang sama, maka kita akan menggunakan atribut class untuk menamai elemen elemen tersebut.
<div id="features"> <ul> <li class="feature"> <div class="icon design"></div> <h3>Unique & Elegant Design</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </li> <li class="feature"> <div class="icon html"></div> <h3>HTML5 & CSS3 Templating </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </li> <li class="feature"> <div class="icon wordpress"></div> <h3>WordPress Theme Development</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </li> </ul> </div>
Perhatikan bahwa disana saya tidak menggunakan tag img untuk memuat gambar, disini saya menggunakan sebuah div dengan class icon dan nama class yang berbeda untuk masing-masing fitur. Saya akan menerapkan CSS Sprite pada bagian ini nantinya.
Separator
Separator/garis pemisah yang terdapat dalam desain berupa shadow/bayangan halus, kita akan menggunakan tag hr, dan memodifikasinya nanti menggunakan CSS.
<hr class="shadow">
Layout Kolom
Layout Kolom akan menampng “Our Latest Project” dan kolom testimoni, kita gunakan div dengan id yang bersangkutan.
Latest Projects
Untuk bagian “Our Latest Project” kita akan isi dengan slider.
<div id="latest-project" class="kolom"> <h2>Our Latest Projects</h2> <ul class="slider"> <li><a href="#"><img src="images/slide1.jpg" alt=""></a></li> <li><a href="#"><img src="images/slide2.jpg" alt=""></a></li> <li><a href="#"><img src="images/slide3.jpg" alt=""></a></li> </ul> </div>
Pada bagian slider ini, kita akan menampilkan 3 buah slide dan kita gunakan unordered list untuk membuat daftar slide yang akan kita tampilkan.
Perhatikan juga pada penamaan div, disini saya beri dan class sekaligus, ID sebagai pembeda antara bagian latest project dan testimoni sedangkan class kolom karena keduanya memiliki struktur kolom.
Testimoni
Bagian testimoni hanya berisi sebuah quote. Untuk membuat quote sendiri kita tinggal menggunakan tag blockquote.
<div id="testimoni" class="kolom"> <h2>What They Say</h2> <blockquote> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> - Jhone Doe <br> executive producer </p> </blockquote> </div>
Footer
Perhatikan bahwa bagian footer ini masih berada di dalam content, jadi kodenya masih ditulis di dalam #content. Bagian footer ini juga memiliki dua kolom, jadi kita masih bisa menggunakan class kolom sebelumnya.
<div id="footer"> <span class="arrow"></span> <div id="left" class="kolom"></div> <div id="right" class="kolom"></div> </div>
Saya beri id yang berbeda pula untuk kedua kolom tersebut. Selanjutnya perhatikan juga desain, disana terdapat tanda panah, untuk itu saya telah menambahkan sebuah span dengan nama class arrow.
Kolom Footer Kiri
Di bagian kiri Footer, terdapat sebuah Logo (lagi) dan informasi alamat. Untuk logo seperti biasa kita gunakan tag img dilengkapi dengan link. Sedangkan untuk informasi alamat, kita gunakan unordered list saja.
<div id="left" class="kolom"> <a href="#"><img src="logo-footer.png" alt=""></a> <ul id="address"> <li>Street Lorem 34, Ipsum, Dolor Sit Amet</li> <li>(+62)85-855-855/(+62)865-555-683</li> <li>yans_fied[at]yahoo.com</li> </ul> </div>
Kolom Footer Kanan
Untuk kolom bagian kanan ini kita akan isi dengan menu (lagi)
<div id="kanan" class="kolom"> <ul id="footer-menu"> <li><a href="#">About</a></li> <li><a href="#">Porfolio</a></li> <li><a href="#">Contact</a></li> <li><a href="#">To Top</a></li> </ul> </div>
Kode Keseluruhan
Tahap penerjemahan Desain ke HTML telah selesai, berikut ini adalah kode lengkap dari apa yang kita kerjakan di atas. Saya juga menambahkan Komentar (Komentar ini tidak akan ditampilkan dalam browser).
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Miniml : Web Dev Team</title> </head> <body> <div id="wrapper"> <!-- HEADER --> <div id="header"> <h1><a href="#"><img src="images/logo.png" alt="Miniml"></a></h1> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!-- HEADER TUTUP --> <!-- CONTENT --> <div id="content"> <h2>We are a professional web developer & designer team, and here is what we can do for you</h2> <!-- FITUR --> <div id="features"> <ul> <li class="feature"> <div class="icon design"></div> <h3>Unique & Elegant Design</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </li> <li class="feature"> <div class="icon html"></div> <h3>HTML5 & CSS3 Templating </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </li> <li class="feature"> <div class="icon wordpress"></div> <h3>WordPress Theme Development</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </li> </ul> </div> <!-- FITUR TUTUP --> <hr class="shadow"> <!-- LATEST PROJECT --> <div id="latest-project" class="kolom"> <h2>Our Latest Projects</h2> <ul class="slider"> <li><a href="#"><img src="images/slide1.jpg" alt=""></a></li> <li><a href="#"><img src="images/slide2.jpg" alt=""></a></li> <li><a href="#"><img src="images/slide3.jpg" alt=""></a></li> </ul> </div> <!-- LATEST PROJECT --> <!-- TESTIMONI --> <div id="testimoni" class="kolom"> <h2>What They Say</h2> <blockquote> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> - Jhone Doe <br> executive producer </p> </blockquote> </div> <!-- TESTIMONI TUTUP --> <!-- FOOTER --> <div id="footer"> <span class="arrow"></span> <!-- KOLOM KIRI --> <div id="left" class="kolom"> <a href="#"><img src="logo-footer.png" alt=""></a> <ul id="address"> <li>Street Lorem 34, Ipsum, Dolor Sit Amet</li> <li>(+62)85-855-855/(+62)865-555-683</li> <li>yans_fied[at]yahoo.com</li> </ul> </div> <!-- KOLOM KIRI TUTUP --> <!-- KOLOM KANAN --> <div id="kanan" class="kolom"> <ul id="footer-menu"> <li><a href="#">About</a></li> <li><a href="#">Porfolio</a></li> <li><a href="#">Contact</a></li> <li><a href="#">To Top</a></li> </ul> </div> <!-- KOLOM KANAN TUTUP --> </div> <!-- FOOTER TUTUP --> </div> <!-- CONTENT TUTUP --> </div> <!-- WRAPPER TUTUP --> </body> </html>
Kesimpulan
Proses penerjemahan desain menjadi baris-baris kode HTML memang tahap yang paling mudah, anda tinggal membagi-bagi desain dan memberinya id/class. Penamaan ID dan Class sendiri disesuaikan dengan bagian-bagian tersebut. Yang perlu saya tekankan kembali bahwa HTML hanyalah berfungsi sebagai markup, atau formatting jadi ketika anda membuka pekerjaan anda di dalam browser, yang ditampilkan hanyalah teks standar tanpa ada kesamaan sama sekali dengan desain yang ada.
Tidak bisa diekstrak.
coba lagi.. hehe
OK, ditunggu post selanjutnya π
Tolong dilanjutkan dengan tutorial membuat css nya dong mas, untuk yang template minimalis ini… Saya lagi pengen banget bisa css dengan cara memotong… Terima kasih sebelumnya
Tutorialnya masih dalam proses editing :). ditunggu ya. π
Subscribe juga youtube channel, like fans-pagenya biar gak ketinggalan.
Di tunggu tutorial selanjut nya , Mengenai CSS nya mas Rian .
kira-kira kapan nih ?
Behh..maknyuss.. Niat banget video tutorialnya. Masbroh yang kaya gini nih yang dibutuhkan Indonesia, ga kaya saya (hoho). Lanjut om!
Salam peace, CSS and HTML dari @desainersingit
wokeehhh ..Pas Banget Mas Untuk Pembuatan Web Di tunggu mas totor’a tentang android mobile..
video nya kecil banget resolusinya.
ga keliatan. π
What?? Itu udah HD loh! Aktifin dong HDnya haha..
Disqus nyerat:
makasih banyak gan tutornya, ngebantu banget dan mudah untuk diikuti π
mangstab kang riann ^_^ , membantu sekali ..
T.O.P tutor nya. maju terus ariona
tp ada kesalahan kecil di video setelah saya perhatikan.
<div class="kolom" id="latest-project"
<div class="kolom" id="testimoni"
Seharusnya code yang benar
Seharusnya code yang benar
http://www.complexs-design.com
T.O.P tutor nya. maju terus ariona
tp ada kesalahan kecil di video setelah saya perhatikan.
Kode class dan id tertukar
Seharusnya code yang benar
KESALAHAN YANG SAMA DI FOOTER dan tulisan kanan di artikel code
Seharusnya code yang benar
http://www.complexs-design.com
wahh maaf code yg betulnya gak bisa masuk ke comentar yah ..ke ditect css… pokokke div id didpn dan di belakang baru class .
coment yang ke dua apus aja yah karna saya coba dua kali… jadi sampah dech
mas,ko ngikutin video tutorialnya,saya ngetik di sublime text : div.icon.design,pas di tab malah hasilnya jadi : div.,ga sama dg hasil nya dengan :
itu kenapa ya mas?trims
Install dulu zen codingnya/Emmet. cari tutorialnya di menu pencarian
serius gan gue gk ngerti
yaelah, skrg saya tanya dulu, tau HTML sama CSS nggak?
gue sangan gk ngerti
haha.. kalo belum tau dasarnya ya susah. pelajari dulu dasarnya http://www.ariona.net/ebook-belajar-html-dan-css/
bismillah
jazakumullah khairn ats semua ilmu web desain ini..
nuhun pisan admin rian..
di tunggu artikel artikel yg lainnya..
nuhn
Terima kasih banyak, sangat berguna untuk saya. Bali khususnya sangat perlu website yang simple dan mudah dilihat.
Terbaik!! terimakasih pak,
tapi sayang banget ya bagian CSSnya gak dibahas.. π
dibahas kok masbro π seri ini sampe tamat:
http://www.ariona.net/tag/psd-to-html/
bisa minta file htmlnya.
Di setiap tutorial sudah saya tambahkan link download jika ada file yang bisa didownload
makasih banyak om. sangat bermanfaat π materi selanjutnya dong om
wah keren nih om
ane mau tanya om, ada gk ebook belajar html & css untuk pemula ?
http://www.ariona.net/ebook-belajar-html-dan-css/
terima kasih om, ebooknya lengkap dan mudah dimengerti
terima kasih banyak admin
link downloadnya tidak bisa expired sepertinya
Link sudah diupdate.
download eror mas
LInk sudah diupdate