Global Variables

Minggu, 06 Maret 2011

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

untuk lebih jelas click di sini????....

December 26th, 2010 | by Andrea Adelheid | dibaca sebanyak :1187

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

Penjelasan : Digunakan untuk menyusun kode awal sebuah script html. 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. Tempatnya membuat tema dari website anda. <body> Ini adalah bagian yang terpenting,semua content akan muncul apabila diletakkan didalam bagian ini.<br /> <br /> Coba saja kalau kita praktekkan membuat sebuah halaman profile dengan HTML. :) Are You Ready ?? Kita mulai dengan script ini :<br /> view source<br /> print?<br /> 1 <html> <head> <title>Ini adalah halaman profile

Nama : Andrea Adelheid

Umur : 22 Tahun

Hobi : Menulis



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 terdapat kode

.Kode itu berfungsi untuk membuat sebuah paragraf pada isi kalimat.

Lantas bagiamana kalau kode

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 Ini adalah halaman profile

Nama : Andrea Adelheid

Umur : 22 Tahun

Hobi : Menulis



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 .

Lantas bagaimana jika ingin membuat sebuah box dan didalamnya terdapat status yang kita tulis tadi ?.Kita gunakan kode
.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 Ini adalah halaman profile
Nama : Andrea Adelheid

Umur : 22 Tahun

Hobi : Menulis



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 Ini adalah halaman profile
Nama : Andrea Adelheid

Umur : 22 Tahun

Hobi : Menulis



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
.Ini dia contoh kodenya :
view source
print?
1 Ini adalah halaman profile
Nama : Naruto Uzumaki

Umur : 17 Tahun

Hobi : Makan Mie Ramen

Cita - Cita : Menjadi Hokage

Gambar Anime Naruto


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. :) Penulis akan melanjutkan tutorial part ke II nya minggu depan.So Stay Tune terus di blog ini.
Artikel terkait

* Penggunaan Fungsi Java Applet Pada HTML
* Penggunaan Object Model Pada dHTML

Recent Search:
membuat web dengan html dan css (5)contoh script html dasar (5)template bebasis html (4)artikel web coding html dan css (4)fungsi div dalam script html (4)video membuat web berbasis css (3)html css (3)membuat website berbasis html (3)script html dasar (2)cara membuat website berbasisi html (2)cara membuat sebuah halaman profile berbasis HTML (2)contoh membuat website berbasis HTML (2)cara membuat halaman profile berbasis html (2)bagian kode-kode pada mysql (2)web berbasis html (2)buat halaman profil berbasis HTML (2)cara membangun website berbasis database (2)template wordpress berbasis html 5 (2)latihan membuat web dengan html scrip (1)membuat web berbasis html (1)web berbasis html dan css (1)membangun web html (1)membangun web berbasi model view controller (1)membangun scrip css (1)membangun html dan css (1)Kode dasar div style (1)MAKALAH membuat web berbasis html (1)latihan so basis text (1)latihan html css (1)membagun html (1)membuat web statis dengan html dan css (1)website html dan css (1)TEKNIK koding MENENTUKAN HALAMAN DEPAN WEBSITE DENGAN DREAMWEAVER (1)struktur situs basis html (1)script script dasar html untuk website (1)tutorial membuat website berbasis html (1)scri halaman HTML dan Cms (1)penjelasan html dan css (1)panduan membuat website dengan css (1)panduan ebook langkah-langkah mempelajari CSS (1)web berbasis div (1)menambahkan image pada web dengan css (1)membuat website dengan css php gambar dan html (1)membuat website basis css (1)modul web
(1)iniurl:semua-berita html (1)ilmu website berbasis Html (1)cara mendesain website script css (1)cara menambahkan image ke title web (1)cara menambahkan background pada body html (1)

0 komentar:

Posting Komentar