Kamis, 16 Juni 2011

Belajar Dasar Membangun Website Berbasis HTML Dan CSS ( Part 1 )

 Pentingnya website dijaman sekarang ini membuat banyak orang untuk mempelajari membuat website mulai dari dasar hingga tingkat profesional.”Apa saja sih skill yang diperlukan untuk menjadi seorang Web Master ?“.Seorang Web Master harus mempunyai pengetahuan yang khusus dalam memprogram suatu website (coding) sampai mendesain website itu sendiri. Sebenarnya ada beberapa faktor penting yang perlu diperhatikan dalam membangun sebuah wadah website (menurut penulis),yakni antara lain :
  • Tema Website
    • Faktor ini yang akan menentukan akan dibawa ke arah mana tujuan dalam website itu sendiri.
  • Content
    • Struktur program didalam website juga menurut penulis sangatlah penting,hal ini juga akan menjelaskan bagian dari faktor pertama.
  • Desain ( Termasuk juga didalam bagian warna dan gambar serta animasi )
    • Berkunjung ke salah satu website ketika browsing pasti hal pertama yang akan kita perhatikan adalah pernak-pernik didalam website itu sendiri,Sangat jelas sekali bila website tersebut terkesan menarik pastinya membuat kita ingin berlama-lama memandanginya.
  • Tata Bahasa
    • Gunakanlah selalu bahasa yang mudah dimengerti oleh kalangan masyrakat kita,tetapi sebagian website lokal juga menerapkan bagian bahasa asing dalam website mereka.Tujuannya adalah untuk dimudah mengerti oleh beberapa pengunjung luar.Bahasa adalah fitur pendukung lainnya yang membuat pengunjung merasa bisa santai mengartikan semua pesan yang anda berikan melalui wadah website.
Diantara beberapa faktor diatas tentunya masih banyak lagi faktor yang mendukung lainnya,terkadang banyak juga yang membuat website dengan isi yang bermacam-macam.Sah-sah saja sih… kan katanya Indonesia sudah merdeka.he..he..he. Kembali ke judul,Tentunya website berbasis Html adalah website yang bernegosiasi dengan beberapa halaman html ( apaan sih bahasanya om??.. :P ).Website Statis banyak menggunakan tehnik Html dan terbatas untuk beberapa halaman saja. Silahkan sebelumnya untuk review kembali dasar-dasar Html, pembangunan Html terlebih dahulu harus di awali dengan kode-kode berikut :
view source
print?
1<html> <head> <title></title> </head> <body> </body> </html>
Penjelasan : <html> Digunakan untuk menyusun kode awal sebuah script html. <head> Didalam kode ini kita bisa menyusun script jQuerry atau JavaScript (didalam body juga bisa,tergantung fungsi java itu sendiri dan akan kita bahas nanti),bagian Css juga akan diletakkan didalam kode head. <title> Tempatnya membuat tema dari website anda. <body> Ini adalah bagian yang terpenting,semua content akan muncul apabila diletakkan didalam bagian ini.
Coba saja kalau kita praktekkan membuat sebuah halaman profile dengan HTML. :) Are You Ready ?? Kita mulai dengan script ini :
view source
print?
1<html> <head> <title>Ini adalah halaman profile</title> </head> <body> <p>Nama : Andrea Adelheid</p> <p>Umur : 22 Tahun</p> <p>Hobi : Menulis </p> </body> </html>
Save As dengan nama latihan.html.Maka hasilnya pasti akan nampak seperti pada gambar berikut ini :
gambar 1

Note: mungkin banyak yang bertanya kenapa didalam kode <body> terdapat kode <p>.Kode itu berfungsi untuk membuat sebuah paragraf pada isi kalimat.
Lantas bagiamana kalau kode <p> dan dihilangkan ?,maka hasilnya akan terlihat seperti gambar di bawah ini :
gambar 2

Pembahasan selajutnya adalah tentang menambahkan Css pada bagian Html,Ini adalah tehnik yang susah-susah gampang menurut penulis.Dengan tehnik ini kita akan coba menambahkan sebuah warna pada background halaman profile itu.Kita praktekkan dengan kode seperti ini :
view source
print?
1<html> <head> <title>Ini adalah halaman profile</title> <style type="text/css"> body { background-color: #0099CC; } </style> </head> <body> <p>Nama : Andrea Adelheid</p> <p>Umur : 22 Tahun</p> <p>Hobi : Menulis </p> </body> </html>
Save lagi dengan format html,maka hasilnya akan terlihat pada gambar berikut ini :
gambar 3

Penjelasan : Kode yang tampil dibawah title adalah kode Css,untuk memanggil kode css dalam html harus diawali dengan kode <style type=”text/css”> dan diakhiri oleh kode </style>.
Lantas bagaimana jika ingin membuat sebuah box dan didalamnya terdapat status yang kita tulis tadi ?.Kita gunakan kode <div>.Kode ini berfungsi untuk membuat suatu nama fungsi dengan id tersendiri.Contohnya kita buat box dengan id STATUS yang didalamnya terdapat kalimat profile.Kita pratekkan pada kode-kode Html yang telah kita buat pada contoh sebelumnya :
view source
print?
1<html > <head> <title>Ini adalah halaman profile</title> <style type="text/css"> body { background-color: #0099CC; } </style> </head> <body> <div id="status"> Nama : Andrea Adelheid <p>Umur : 22 Tahun</p> <p>Hobi : Menulis </p> </div> </body> </html>
Save lagi dengan nama latihan.html dan liat hasilnya. ” Kok hasilnya gak berubah sih bro Andrea ..?? ” , :) Tenang..tenang..Itu karena pada box nya tidak kita tambahin kode Css,Untuk membuat kode css pada box id status tadi kita hanya perlu membuat kode Css dengan #status.Bingung ?? Ini saya kasih contoh kodenya :
view source
print?
1<html> <head> <title>Ini adalah halaman profile</title> <style type="text/css"> body { background-color: #0099CC; } #status { background: #FFFFFF; border-color: #FF0000; border-style: solid; } </style> </head> <body><div id="status"> Nama : Andrea Adelheid <p>Umur : 22 Tahun</p> <p>Hobi : Menulis </p> </div> </body> </html>
Save dan kemudian hasilnya akan terlihat seperti gambar dibawah ini :
gambar 4
Jika ingin membuat 2 box dengan ID yang berbeda kita hanya tinggal perlu menambahkan satu fungsi DIV lagi.Untuk DIV ID yang berikutnya akan kita coba menambahkan gambar pada halaman profile yang telah kita buat sebelumnya,Kita gunakan id fotoprofile pada box yang akan dibuat dengan kode <div id=”fotoprofile>.Ini dia contoh kodenya :
view source
print?
1<html> <head> <title>Ini adalah halaman profile</title> <style type="text/css"> body { background-color: #0099CC; } #status { background: #FFFFFF; border-color: #FF0000; border-style: solid; padding: 5px; } #fotoprofile { background: #FFFFFF; border-style: solid; border-color: #00FF00; top: 10px; padding: 5px; margin-top: 5px; } </style> </head> <body> <div id="status"> Nama : Naruto Uzumaki <p>Umur : 17 Tahun</p> <p>Hobi : Makan Mie Ramen </p> <p>Cita - Cita : Menjadi Hokage </p> </div> <div id="fotoprofile"> <img src="http://i255.photobucket.com/albums/hh150/metropoliz/naruto.jpg" width="300" height="auto" alt="Gambar Anime Naruto"/> </div> </body> </html>
Dan akan menghasilkan halaman seperti pada gambar dibawah ini.
gambar 5
Nah kita sudah mempraktekkan beberapa langkah membuat website berbasis html pada kesempatan kali ini,ingin bereksperiment sendiri?.Silahkan.
di 01.56