Dream Weaver basic 02
Find best premium and Free Joomla templates at GetJoomlaTemplatesFree.com

Dream Weaver basic 02

selanjutnya...........

setelah beres dengan setting site dan ternyata setelah ditest terbukti berjalan, marilah kita mulai lagi...

darimana kita mulai mendesain web kita?.....

terserah anda mau mulai dari mana, kalau saya sih mau bahas css terlebih dahulu, karena css mengasikkan.

css singkatan dari cascade style sheet, sebuah file yang mendefenisikan tata letak dan tampilan sebuah halaman web.

oke, kita mulai saja, biar jadi orang yang sedikit ngobrol, banyak bertindak.

 

CSS bisa ditulis langsung dihalaman web , dan disebut internal style, atau internal css.

CSS bisa juga ditulis difile tersendiri dan disimpan dengan extensi .css.

 

contoh internal css ...

 

<html><title>internal style</title>

<head></head>

<body style="background:# f9ad81; color:#000000; font-size:20x" >

ini halaman dengan style body berwarna pastel red orange dan huruf  berukuran 20 pixel dengan warna hitam

 </body>

 cobalah aktifkan dream weaver kamu dan buatlah file html baru,klik  file , pilih new, diwindow new document pilih, HTML.

ketik atau copy  code diatas dan paste dihalaman baru tersebut, save dengan nama latihan-css-1.html, kalau sudah disave , tekan F12 untuk mengujinya hasilnya akan seperti ini :

 

 

 

cara penulisan internal style yang kedua:

 

<html><title>internal style</title>

<head>

<style>#body-1{ background:# f9ad81;  color:#000000; font-size:20x}

</style>

</head>

 

<body id="body-1" >

ini halaman dengan style body berwarna pastel red orange dan huruf  berukuran 20 pixel dengan warna hitam

 

</body>

 

cara penulisan yang kedua ini akan menghasilkan output yang sama, hanya saja kamu harus mengaktifkan sesuai dengan defenisi yang kamu tulis diselector css, yaitu : #body-1, kamu aktifkan di tag html <body> dengan menambahkan <body id="body-1"> .

kalau kamu mengganti hash tag atau pager (#) dengan titik ( . ) maka cara mengaktifkan adalah dengan mengganti id menjadi class, contoh  <body class="body-1"> .

note: tanda # atau hash tag dalam css juga berfungsi sebagi prefix untuk kode warna, misal #ffffff = warna putih #000000= hitam , dsb silahkan pelajari lebih lanjut. dihalaman  tabel warna html , silahkan cek


BTW: pernah juga kita bahas tentang css disini dan disini , silahkan cek untuk lebih jelasnya

Add comment


Security code
Refresh