Banyaknya "web templates" yang dapat didownload secara gratis melalui internet tentu saja semakin memudahkan para web designers dan web developers dalam menyelesaikan beberapa pekerjaan mereka. Namun, bagi mereka yang belum mengerti HTML dan CSS tetap saja hal tersebut tidak memberi dampak apapun. Padahal "bermain-main" dengan HTML dan CSS ternyata adalah hal yang menyenangkan dan tidak terlalu sulit. Dalam pembahasan kali ini kita akan sekaligus berkenalan dengan HTML dan CSS melalui web template yang dapat didownload secara gratis melalui internet. Bila anda ingin pembahasan yang lebih rinci mengenai HTML dan CSS silakan klik "menu" HTML atau CSS setelah ini. Bila anda tidak menemukan pembahasan pada "menu" tersebut, kembalilah beberapa hari kemudian sebab blog ini sebenarnya akan terus mengalami perubahan, secara teknis kita menyebutnya terus "under construction" hingga mencapai titik "idealnya".
Let us start:
Kita akan mengubah desain sebuah web site hasil download dari freecsstemplates.org yang awalnya:
Hint: Bila tulisan pada gambar terlalu kecil, anda bisa menekan tombol "Ctrl dan +" untuk zoom-in atau "Ctrl dan -" untuk zoom out.
Menjadi
1. bukalah situs http://www.freecsstemplates.org dan download template yang bernama "floralgarden" lalu simpan pada folder yang anda inginkan, gunakan fasilitas "search" pada situs tersebut agar memudahkan pencarian. Sebenarnya kita bisa mendownload dari situs-situs lainnya dengan template yang berbeda. Penggunaan template yang sama ini hanya untuk memudahkan proses belajar. Pada intinya, template CSS apapun yang kita gunakan prosesnya tetap sama. Anda akan memperoleh file hasil download dalam bentuk "zip" bernama "floralgarden" dengan icon:
atau
bila hasil download anda tersimpan secara otomatis maka carilah pada drive C:/Documents and Settings/user/My Documents/Downloads, lalu copy ke folder yang anda inginkan (misalkan:D:/belajar)
2. klik-kanan pada file "floralgarden" tersebut lalu pilih dan klik menu "Extract Here". Maka anda akan mendapatkan 4 buah files hasil extract seperti di bawah ini
5. Selanjutnya kita akan merubah tampilan "floralgarden" menjadi seperti yang kita inginkan. Sebelumnya, buatlah sebuah folder baru untuk menyimpan hasil kerja kita agar lebih mudah mempelajarinya. Misalkan, buatlah folder baru tersebut pada drive D dengan nama "belajar1".
6. Pada halaman kode HTML yang membangun desain web site "floralgarden" tekan tombol "Ctrl - A" pada keyboard anda. Ini bertujuan untuk memilih/memblock semua isi kode pada halaman tersebut
7. Bukalah aplikasi text editor, dalam hal ini kita gunakan "notepad". Klik menu "start" yang (biasanya) terletak di pojok kiri bawah monitor anda, pilih menu "all programs", lalu pilih menu "accessories", dan double-klik pada menu "notepad". Normalnya, akan muncul aplikasi text editor dengan nama "Untitled-Notepad".
8. Pada aplikasi "notepad" tekan tombol "Ctrl - V" pada keyboard anda. Ini bertujuan untuk mem-paste kode HTML yang telah kita copy sebelumnya. Di bawah ini adalah gambar kode HTML yang telah kita copy ke dalam "notepad:
9. Letakkan kursor anda (yg berkelap-kelip) pada bagian pojok kiri atas dari kode HTML. lalu klik menu "edit" dan klik sub-menu "find...".
10. Pada kolom "Find what:" ketiklah "<title>" -tanda quotes ("") jangan ikut diketik-. Jangan lupa untuk mencentang kolom "Down" pada menu "Direction". Lalu klik menu "Find Next". Bila langkah yang anda lakukan sudah benar, maka inilah yang akan tampak pada notepad anda:
11. Anda akan melihat tulisan "<title>" yang ter-highlight/terblock oleh warna biru. "<title>" adalah salah satu elemen dalam HTML yang menunjukkan judul dari sebuah web site.
Sekarang, hapuslah title "Floral Garden by FCT" pada notepad anda dan ketiklah title baru "buzzing your bizz" (sebenarnya anda dapat mengganti title dengan tulisan apapun yang anda inginkan). Tetapi, kali ini kita akan menggunakan title "buzzing your bizz".
12. Ulangi langkah no 10 tetapi, kali ini pada kolom "Find what:" ketiklah "a href". Anda akan menemukan tulisan "a href" yang ter-highlight/terblock oleh warna biru seperti ini
"<h1><a href="http://www.zenithaweb.blogspot.com/">buzzing your bizz</a></h1>
13. Ulangi langkah no 10 dan biarkan pada kolom "Find what:" berisi tulisan "a href". Anda akan menemukan tulisan "a href" yang ter-highlight/terblock oleh warna biru seperti ini
"<a href="http://www.zenithaweb.blogspot.com/" target="_blank" accesskey="1" title="">Awal</a></li>" Anda dapat mengganti semua value "<a href>" yang ada dalam kode HTML tersebut dengan alamat URL yang anda inginkan. Tetapi, untuk kali ini kita cukupkan sampai di sini.
14. Ulangi langkah no 10, tetapi pada kolom "Find what:" ketiklah "<p>". Anda akan menemukan tulisan "<p>" yang ter-highlight/terblock oleh warna biru seperti ini
Elemen
"<p>" dalam HTML menunjukkan "paragraf". "<p>" dapat berisi
kalimat ataupun elemen HTML lainnya seperti "link", gambar dan lainnya.
Untuk kali ini, rubahlah isi elemen "<p>Aliquam erat volutpat.
Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl
risus, sagittis:</p>" menjadi
"<p>Belajar HTML, CSS, web building secara cepat dan mudah</p>"
15.
Simpanlah kode HTML yang telah anda rubah di notepad tadi dalam bentuk
file html pada folder baru yang telah anda buat sebelumnya. Misalkan,
beri nama "web1.html" (di belakang nama file harus disertakan ".htm" atau ".html")
Jangan lupa untuk merubah nilai pada kolom "Encoding:" menjadi
"UTF-8". Caranya, klik menu "File" pada notepad anda lalu klik sub-menu
"Save As..."
16.
Sekarang, cobalah membuka file web1.html yang telah anda simpan tadi dengan
cara sama seperti anda membuka file lainnya (double-klik). Kalau web
desain tersebut seperti gambar di bawah ini, maka anda telah melakukan
langkah-langkah dengan benar
17.
Gambar di atas adalah sebuah desain web site yang belum diberi "styles"
tetapi, beberapa "link" yang telah kita rubah telah dapat berfungsi.
Untuk menyisipkan "styles" dan memodifikasinya adalah langkah yang tidak
terlalu sulit. Saat kita meng-extract file "floralgarden", kita
mendapatkan files hasil ekstraksi seperti di bawah ini
18. Copy-lah file "license" dan tempatkan pada folder yang sama tempat anda menyimpan file HTML dan file "default" anda (belajar1). Sebenarnya file "license" tidak memberi dampak apa-apa pada tampilan desain web yang kita modifikasi. Hal ini dilakukan sebagai bentuk apresiasi terhadap hasil karya orang lain.
19. Pada folder "belajar1", buatlah sub-folder dengan nama "images". Nama sub-folder ini harus "images" sebab, coding pada file HTML yang kita buat untuk image source bernama "images".
20.
Pilihlah empat buah gambar yang anda sukai dari komputer anda, lalu
copy dan tempatkan pada sub-folder "images" (dalam hal ini saya memakai
gambar seorang ibu dan anaknya, untuk anda terserah gambar yang anda
sukai). rubahlah nama file 4 buah gambar anda menjadi img02, img03,
img04 dan img05. Anda harus menggantinya dengan nama-nama tersebut
sebab, coding pada file HTML yang kita buat untuk nama gambar adalah
img02, img03, img04 dan img05. Cara merubahnya adalah, klik-kanan pada
gambar yang ingin kita rubah namanya lalu pilih menu "Rename"
21.
Sekarang, kembalilah pada folder "belajar1" dan double-klik (bukalah)
file HTML anda. Jika halaman yang membuka seperti di bawah ini, maka
langkah-langkah yang telah anda lakukan benar (tentu saja gambar-gambar
yang terdapat di halaman tersebut adalah gambar-gambar yang telah anda
masukkan ke sub-folder "images" tadi).
Kita
hampir sampai di akhir tutorial ini. Hal yang belum kita lakukan adalah
merubah warna "header" dari ungu menjadi biru muda dan membuat tulisan
"buzzing your bizz" menjadi 1 line, bukan 2 line seperti pada gambar.
22.
kembalilah pada folder "belajar1" dimana anda menyimpan hasil2
pekerjaan anda. Double-klik (bukalah) file yang bernama "default"
Di
atas adalah gambar file CSS yang memberikan "styles" pada desain web
site floralgarden. Untuk merubah "styles" pada file CSS tersebut,
pertama-tama perhatikan 4 buah gambar kode di bawah ini (ke-empat gambar
di bawah diambil dari file CSS yang akan kita rubah)
(gambar di atas selanjutanya kita sebut "kode body")
23. kembalilah pada file CSS anda (default - Notepad) lalu cari coding (peng-kode-an) yang sama dengan "kode body" (terletak di bagian atas file CSS). Kemudian rubahlah nilai "background: #5532A3;" menjadi "background: #BBD6F4;". Rubah juga nilai "color: #8F8F8F;" menjadi "color: #FD3578;"
24. kembalilah pada file CSS anda (default - Notepad) lalu cari coding (peng-kode-an) yang sama dengan "kode header". Kemudian rubahlah nilai "background: #5532A3;" menjadi "background: #569BFC;".
25. kembalilah pada file CSS anda (default - Notepad) lalu cari coding (peng-kode-an) yang sama dengan "kode logo". Kemudian rubahlah nilai "width: 300px;" menjadi "width: 400px;".
26. kembalilah pada file CSS anda (default - Notepad) lalu cari coding (peng-kode-an) yang sama dengan "kode menu". Kemudian rubahlah nilai "width: 650px;" menjadi "width: 560px;".
27. Simpanlah perubahan yang telah anda buat, caranya klik menu "file" lalu pilih dan klik sub-menu "Save". Kemudian kembalilah pada folder "belajar1" dan double-klik (bukalah) file HTML anda. Bila tampilan yang muncul seperti di bawah ini, berarti langkah-langkah yang telah anda lakukan benar.
Catatan:
1. Anda bisa saja merubah semua tulisan, gambar, link dan warna yang ada pada desain web site tersebut dengan cara seperti yang telah kita lakukan.
2. "#8F8F8F" dan nilai lainnya yang diawali dengan tanda "#" kemudian diikuti dengan 6 buah campuran huruf dan nomor adalah kode warna HTML. untuk mengetahui kode-kode warna lainnya, anda bisa melakukan pencarian melalui www.google.com dengan keyword "html color codes".
3. Apabila anda ingin lebih memahami perubahan-perubahan yang terjadi pada desain web site bila file CSS dirubah, hapuslah file CSS yang bernama "default" dari folder "belajar1". Lalu copy file CSS asli yang belum dirubah dan tempatkan kembali pada folder "belajar1". Ulangi langkah no 23 - no 26 tetapi, setiap kali anda menyelesaikan sebuah langkah, simpanlah perubahan tersebut. Kemudian double-klik (bukalah) file html anda dan lihat perubahan yang terjadi pada tampilan desain tersebut. Lalu lanjutkan dengan langkah nomor berikutnya. Misalkan, anda mengerjakan langkah no 23, setelah anda selesai, klik menu "file" pada halaman notepad tersebut lalu pilih dan klik sub-menu "save". Kemudian double klik (bukalah) file "web1.html" anda dan amati perubahan yang terjadi. Setelah itu barulah anda lanjutkan langkah nomor selanjutnya.
Apabila anda merasa artikel ini berguna, bantulah dengan membagi (share) halaman ini pada situs-situs jejaring sosial anda!!
Kembali Lanjut
No comments:
Post a Comment