Persiapan Awal Mendesain Web


Can-a-Web-Developer-Also-be-a-Web-Designer-1

Halooo, ketemu lagi dengan orang keren yang ngakunya sebagai Web Master Terkenal Seantero Dunia… Hahaha…

Ini ngomong apa sih 😐

Udah ah, ayo kita mulai tutorialnya.

Software apa aja sih yang harus dipersiapkan?

Cuma dua aja sih yang dibutuhkan untuk desain web. Yaitu notepad++ sama Mozilla Firefox. Ya, minimal sih dua itu.

Kalau cuma dua, terus kalau mau ngedit gambar buat website pake apa?

Ya pake Photoshop kalau nggak Corel Draw lah. Masak harus tak jelasin lagi sih? 😐

Kak, aku masih awam nih buat desain web. Habis punya notepad++ sama Firefox, terus aku harus ngapain?

Yo mboh no.

Eh, maksudnya kamu buka notepad++ terus kamu setting terlebih dahulu.

Langkah menyetting :

1. Buka notepad++

image001

2. Pilih Pengaturan terus pilih Preferensi (udah ah, lihat gambarnya aja dah ngerti klok? )

image002

3. Pilih Auto Completion terus isi centang sesuai gambar di bawah ini.

image003

Oke, pengaturan awal tuntas :mrgreen:

Emang efeknya apa kak?

Efeknya tuh ya, nanti kalau kita ngetik <html> di notepad++, otomatis akan terbuat </html> setelahnya. Jadi, nggak usah capek-capek ngetik tag penutup lagi.

Langkah berikutnya…

1. Sekarang, kita buat folder latihan. Anggap aja namanya Kucing (Cara cepat buat folder : Ctrl Shift N)

image004

2. Di dalam folder Kucing, buat satu folder sama satu file text (Kalau di Windows 7, ketik Alt F W T)

image005

3. Ubah nama folder dan nama file text seperti gambar di bawah (cara cepat mengubah nama : F2)

image006

4. Di dalam folder css, buat file text terus diubah namanya menjadi style.css

image007

5. Klik kanan terus pilih Edit with Notepad++

image008

6. Ketik aja sembarang, jangan sampe nggak diisi. Kalau saranku sih, kamu ngetiknya yang cepet sekalian. Mau ngetik 10 jari kah, 50 jari kah, pokoknya ngetik cepet aja biar kelihatan keren B)

image009

7. Keluar dari folder css, kita kembali ke folder Kucing. Klik kanan file index.html terus pilih Edit with Notepad++

image010

8. Masukkan script seperti gambar di bawah…

image011

Penjelasan gambar :

<!DOCTYPE HTML> : untuk menunjukkan kalau kamu menggunakan teknologi HTML5

<meta charset=”utf-8”/> : untuk menunjukkan kalau kamu menggunakan utf-8 sebagai charset dokumen. Charset itu selain utf-8, ada juga utf-8 tanpa bom, ansi, ucs-2 big indian, ucs-2 little indian. Aku sarankan kamu pake utf-8 karena semua huruf bisa ditampilkan. Contohya huruf arab, huruf china, huruf jepang, de el el.

<meta name=”viewport” content=”width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1”/> : Itu fungsinya kalau ditampilkan di browser hape, websitemu itu nggak bisa dizoom. So, script ini sangat penting untuk membuat desain website yang responsive.

<link rel=”stylesheet” href=”css/style.css”/> : Untuk menyambungkan html dengan css yang sudah kamu buat tadi.

<title>Hello World</title> : Judul website

Tambahan : Semua yang tampil di browser ditulis di dalam tag <body></body>. Contohnya, <p>Halo Dunia</p> seperti gambar di atas. Tag <script></script> direkomendasikan untuk diletakkan di dalam <body></body>

9. Karena kita menggunakan utf-8, maka kita pun harus menyetting dokumen html menjadi utf-8 dengan cara mengklik Enkode terus memilih Konversi ke UTF-8.

image012

10. Buka html di firefox dengan cara mengetik Ctrl Shift Alt X.

image013

11. Sekarang kita akan mengedit script css. Sekarang, coba kamu ketik Shift F7.

image014

12. Ubahlah script css seperti gambar di bawah.

image015

Penjelasan :

* : Untuk menyeleksi semua tag html.

Margin: 0; : Untuk mengatur margin menjadi 0 piksel.

Padding: 0; : Untuk mengatur padding menjadi 0 piksel. Monggo dicari di gugel perbedaan margin dan padding.

Word-wrap: break-word; : Biar kalau ada teks yang puanjang byanget, bisa diputus biar nggak kebablasen.

Box-sizing: border-box; : Pokoknya syntax ini penting banget buat desain web. Monggo dicari di gugel. Kalau –webkit- itu supaya scriptnya bisa dijalankan di chrome yang lawas. Tambahan –moz- supaya scriptnya bisa dijalankan di firefox yang lawas.

Font: 24px Helvetica, Arial, Verdana, sans-serif; : Mengatur font sebesar 24 piksel dengan nama font Helvetica untuk semua elemen html. Kalau Helvetica nggak ada di komputer, maka akan memanggil font Arial. Kalau nggak ada, font Verdana yang akan dipanggil. Kalau nggak ada juga, maka akan mengatur fontnya sans-serif yang artinya tanpa kait. Monggo dibua di buku Konsep Desain Apple untuk mengetahui perbedaan font serif atau kait dengan font sans-serif atau tanpa kait (judulnya bukunya apa aku lupa, pokoknya itu lah).

Lalu, apa langkah selanjutnya?

Gampang! Kamu tinggal ke Gramed terus cari buku tutorial CSS3. Terima Kasih 🙂

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s