Cara Membuat HTML Dan CSS Dari Dreamweaver ~ Ilmu Computer Anak Rantau

Tadi ane mendapat pelajaran tentang HTML dan CSS,disini saya ingin share tentang HTML dan CSS agar ane tidak lupa (intinya). :D nah sekarang coba buka Dreamweaver agan (ane disin menggunakan CS5),buat yang belum ada dan belum di install Download aja di google.

Oke setelah di buka Dreamweavernya akan tampil seperti :

Nah setelah tampil seperti ini,coba lihat sebelah kanan atas ada bacaan DESIGNER dan klik lalu ganti dengan CLASIC dan coba lihat kebawah sedikit ada FILE,FILE berguna untuk menentukan dimana agan ingin menge-SAVE file agan yang buat.

contoh ane menge-SAVE file di D;/Web. maka ane klik D dan klik kanan di Web seperti pada gambar

setelah di klik pasti akan ada file yang bernana untitled.html dan agan bisa menggantinama sesuai selera agan seperti web.html atau test.html dll asalkan extansinya masih tetap .html

ane disini membuat nama ICAR.html,Lalu double klik untuk membukanya.

setelah terbuka akan tampil seperti

kalau berbeda coba lihat di atas sebelah kiri klil Design karena kita akan membuat nya dengan menggunakan Design.

setelah itu lihat di bawah logo DW ada common dan klik Insert Div Tag seperti

setelah di klik Insert Dive Tag akan muncul

setelah muncul seperti gambar di atas Isikan ID dengan pengikat dan klik OK

setelah di klik OK akan muncul seperti

lalu klik <body> akan muncul seperti

setelah klik <body> lalu klik All di CSS STYLES dan klik New CSS Rule yang berada di bawah CSS STYLES atau All, setelah itu pilih Tag (redefines an HTML element) akan muncul tulisan body seperti pada gambar diatas dan klik OK.

setelah klik OK akan muncul seperti

Di type ane memilih font color berwarna hitam/#000

dan saya menggunakan background berwarna #CCC seperti pada gambar dibawah

dan di BOX pada width ane isikan 1200 px dan di Margin hapus tanda ceklist pada Same For All lalu ganti Right dan Left dengan auto. seperti pada gambar

Setelah di klik OK coba lihat background agan,kalo punya ane berubah menjadi warna #CCC

nah lanjut ke tahap selanutnya lihat ganbar

klik tulisan Goes Here lalu lihat kebawah dan klik <div#pengikat> setelah itu klik New CSS Rule dan klik OK

akan muncul seperti yang ada atas tadi,dan tinggal mengkonfigurasi New CSS Rule

ane setelah selesai akan muncul seperti

setelah selesai di tahap ini dan setelah mennjadi seperti gambar di atas sekarang waktu nya membuat Header (kepala)

Body (isi Post)

Footer(kaki/Copy Right)

klik Content for id "pengikat" Goes Here tambahkan div dengan cara klik Insert Div Tag
masukan ID "footer"
lalu klik Content for id "footer" Goes Here
klik New CSS Rule
dan isi Type(color #FFF) Background(color #000) dan Box(width=100% height=50px)
setelah jadi akan seperti ini

Begitu juga dengan body

klik Content for id "pengikat" Goes Here tambahkan div dengan cara klik Insert Div Tag
masukan ID "body"
lalu klik Content for id "body" Goes Here
klik New CSS Rule
dan isi Type(color #000) Background(color #FFF) dan Box(width=100% height=500px)
setelah jadi akan seperti ini

Begitu juga dengan header

klik Content for id "pengikat" Goes Here tambahkan div dengan cara klik Insert Div Tag
masukan ID "header"
lalu klik Content for id "header" Goes Here
klik New CSS Rule
dan isi Type(color #FFF) Background(color #000) dan Box(width=100% height=100px)
setelah jadi akan seperti ini