google-site-verification=UES8Z0aRJbtE1Gb4ZyHBN69EWU5404X-VqbouzRkOVI Pengenalan Dan Penggunaan Css - PUSATRIK.COM

Pengenalan Dan Penggunaan Css

Pengenalan dan Penggunaan CSS

 Css akronim dari cascading style sheet yaitu sebuah dokumen yang berisi style untuk me Pengenalan dan Penggunaan CSS
Css akronim dari cascading style sheet yaitu sebuah dokumen yang berisi style untuk mengatur tampilan suatu halaman website biar lebih menarik dan interaktif dengan tujuan menarik minat pengunjung. Para desainer web memakai css untuk merapikan tampilan website biar lebih menarik dan interaktif, dengan mengubah elemen tag html menyerupai huruf, teks, background dan gambar.
Css bisa menggantikan fungsi table dalam penyusunan layout halaman web menjadi lebih gampang dan ringkas. Dan css merupakan sebuah style yang bisa berjalan di antara tag html yakni embedded style, perubahan tampilan dari css kuat terhadap tag html yang dibuat.


Untuk menciptakan sebuah tampilan web yang menarik, diperlukan sebuah web editor. Web editor kawasan untuk pengetikan tag html dan style css. Contoh aplikasi yang bisa dijadikan web editor menyerupai notepad, frontpage, dreamweaver. Dalam penulisan buku ini penulis memakai aplikasi Adobe Dreamweaver CS3 sebagai web editor dalam pembuatan desain web dengan tag html dan style css.
Berikut tampilan dari jendela Adobe Dreamweaver CS3.

Dalam penulisan style dan tag, penulis mengajak kau untuk menulisnya di dalam jendela tab code
Untuk penulisan style css yang bersifat external :
1.Buka dokmen update dengan cara klik sajian File.
2.Pilih New, tampil jendela New Document menyerupai tampilan berikut:
3.Pada jendela New Document, pada Page Type, kau pilih css, kemudian klik tombol Create,

Kegunaan CSS
Kegunaan css dalam mendesain sebuah halaman web aneka macam keuntungannya antara lain :
•Penulisan tag html menjadi lebih pendek dan gampang diatur.
•Untuk mengubah susunan layout menjadi lebih mudah, hanya mengganti style css-nya saja.
•Ukuran file html menjadi lebih kecil sebab terpisah dengan file css-nya.
•Hampir semua web browser mendukung style css.

Kemudian laba memakai css dalam mendesain web yaitu sebagai berikut :
•Halaman web bisa diload dengan cepat.
•Mengubah tampilan web menjadi lebih gampang dan cepat, hanya mengubah style dari css-nya.
•Mengubah style sajian (link) menjadi lebih dinamis sesuai yang diinginkan.
•Membuat layout dan mengonsepnya menjadi lebih tersusun dan rapi penempatan komponen layoutnya.

Penggunaan CSS
Untuk memakai css biar tampilan web menjadi manis dan menarik maka ada hukum dalam pemakaian css ini dalam tag html yang dibuat.
1.Inline style
Style yang dibentuk dalam sebuah tag HTML yang hanya berlane untuk dokumen yang diapitnya saja.
Sintaks penulisannya :
<p style=”property:value”>teks </p>
Untuk memakai style ini buka jendela code adobe dreamweaver kamu, ketik isyarat berikut :
<head>
<title>style inline css</title>
</head>
<bo
dy> <p style="color:#0000FF; background-color:#FF0000;"> desain web dengan css</p>
<img src="Koala.jpg" style="width=100px; height:100px"/>
</body>
</html>

2.Internal style
Style ini sama menyerupai inline, dalam satu file html, penulisan style ini diapit oleh tag pembuka <head> dan epilog </head>.
Seperti berikut :
<html>
<hea
d> Style css disini
</head>
<body>
Penulisan pembuka style css internal ini dimulai dengan :
<style type=”text/css”>
Style isyarat css
</style>


Sintaks penulisan lengkapnya sebagai berikut
<html>
<head>
<style type=”text/css”>
Style isyarat css
</style>
</head>
<body>
Untuk memakai style ini buka jendela code adobe dreamweaver kamu, ketik isyarat berikut :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>internal style</title>
<style type="text/css">
h2 { font-family:verdana;
color:#0000FF;}
p {font-family:verdana;
font-size:12px;}
</style>
</head>
<body>
<h2>style internal</h2>
<p> style internal sama dengan inline style satu file dengan html, diapit oleh tag head</p>
</body>
</html>

Simpan dengan nama style internal.html, dan jalankan pada browser yang kau sukai, hasil nya menyerupai gambar berikut :
Gambar 1.8 tampilan style internal
3.External style
Style ini dipakai untuk memisah file html dengan file css, maksudnya file css berada di luar dari file html. Penempatan style css ini diapit oleh tag <head> </head>, namun pemanggilan file cssnya berbeda memakai link menyerupai berikut :
<head> <link rel=”stylesheet” type=”text/css” href=”file css.css”/>
</head>
Fungsi href inilah yang menghubungkan file html dengan file cssnya. Maka buat file update untuk menulis isyarat cssnya. Untuk memakai style ini buka jendela code adobe dreamweaver kamu, ketik isyarat berikut, kemudian simpan dengan nama style_external.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>style external</title>
<link rel="stylesheet" type="text/css" href="style external.css" />
</head>
<body>
<h2>style external</h2>
<p> dengan style ini file html menjadi lebih sedikit, dan pengaturan layout lebih mudah</p>
</body>
</html>


Untuk menciptakan isyarat cssnya, kau pilih jendela update, pada page type pilih css, ketik isyarat berikut :
h2 { font-family:verdana;
color:#0000FF;}
p {font-family:verdana;
font-size:12px;}
Seperti gambar isyarat css berikut :
Gambar 1.10 isyarat style external.css
Simpan dengan nama style_external.css, dan jalankan jendela code html pada browser yang kau sukai


Aturan Penulisan CSS
CSS mempunyai hukum penulisan yang sudah tetap dan sebuah style CSS juga mempunyai struktur yang pasti, terdiri dari 2 serpihan yaitu Selector dan Declaration.
Sintaks penulisannya :
Penjelasan :
•Selector penamaan suatu elemen style yang mau dirubah atau diterapkan pada tag html untuk merubah tampilan website.
•Property yaitu elemen tag html yang mengubah warna, ukuran dan ketebalan garis pola nya background, font, color.
•Value
Sumber http://pklumg2015canda.blogspot.com

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel