About my Blog

Share Information; Blogs, Travel, Technology, Tutorial, Business, College and etc.

Senin, 12 April 2010

ID VS CLASS

Terdapat dua buah selector yang terkenal dalam CSS yaitu ID dan Class. Penulis pernah bingung membedakan keduanya dan akankah menggunakan selector ID ataukah menggunakan selector Class untuk sebuah tag HTML. Untuk itu saya ingin sedikit berbagi mengenai perbedaan keduanya dan pengaplikasiannya pada kode HTML dan CSS.

ID
ID sepantasnya digunakan hanya sekali pada setiap elemen halaman web. Yang dimaksud dengan elemen yaitu header, main navigation, left side, footer, dll. Jadi, ID digunakan untuk memberi nama untuk sebuah elemen atau bagian sebuah halaman web yang bersifat unik. Mengapa dikatakan unik, karena dalam setiap document CSS hanya boleh ada satu nama elemen. Pada document CSS harus diawali karakter “#”. Berikut ini contoh selector ID.

<div id="footer">
<p>Copyright &copy; 2010 Denis Haryanto.</p>
</div>

Contoh pada document CSS-nya :

#footer {
width: 850px;
margin:0px auto;
padding: 3px 0px;
height: 50px;
border-top: 2px solid #FFFFFF;
background: #8fa819;
}

CLASS
Sedangkan Class dapat digunakan pada tag HTML yang tak terbatas penggunaanya. Class lebih fleksibel untuk diaplikasikan dibanding ID. Class biasanya berada diantara tag ID. Pada document CSS harus diawali karakter “.”. Untuk lebih jelasnya berikut ini contoh class.

<div id = âminumanâ>
<div class = "soda">coca cola</div>
<div class = "soda">sprite</div>
<div class = "hot">teh</div>
<div class = "hot">kopi</div>
</div>

Contoh pada document CSS-nya :

.minuman{
width: 850px;
margin:0px auto;
padding: 3px 0px;
height: 50px;
border-top: 2px solid #FFFFFF;
background: #8fa819;
}

Untuk penggunaan selector Class maupun ID tidak terbatas hanya tag div saja, namun juga bisa diaplikasikan dengan tag-tag HTML lainnya seperti <table>, <ul>, <body>, <h1>, dll.

Selamat belajar...
Posted by Denis Haryanto at 04.10 1 comments

METODE ENKRIPSI MD5

Sistem keamanan dalam sebuah aplikasi komputer berbasis web salah satu yang dipakai adalah metode hashing MD5. MD5 merupakan metode one way yang merubah suatu plain text berubah menjadi bentuk enkripsi atau yang disebut dengan chypertext. Penggunaannya seringkali untuk merahasiakan password user maupun admin, nomor PIN, dan lainnya yang berhubungan dengan akun seseorang. Dalam contoh pemakaian metode MD5 ini dibuat 2 file :
1. login.Html
2. checklogin.php
Dibawah ini merupakan tampilan hasil eksekusi file login.Html :



Berikut ini source file login.html yang dipakai :



Supaya lebih jelas silakan diklik gambarnya.

Source code diatas merupakan kode html untuk membentuk halaman login. Apabila username dan password telah terisi maka browser akan diarahkan ke halaman file checklogin.php.
Masukkan username dan password. Untuk keamanan, input pada password diberi type password agar tidak dapat dibaca atau dilihat pihak yang tidak berwenang. erikut ini tampilan hasil eksekusi file checklogin.php :



Dan berikut ini Source code file checklogin.php



Dapat kita lihat pada gambar diatas hasil input password dijadikan variable $mypassword. Kemudian variable tersebut di enkripsi dengan metode hashing MD5 dengan mengubahnya menjadi variable $mypasswordmd5. Sampai situ password sudah berubah menjadi algoritma.
Apabila kita cetak (echo) passwordnya akan berubah menjadi tampilan algoritma seperti ditunjukkan pada gambar berikut :



Semoga bermanfaat...
Posted by Denis Haryanto at 04.01 0 comments

TOMBOL NAVIGASI CANTIK DENGAN CSS

Ketika kita sedang browsing di sebuah halaman website, kadang kita menemukan tombol anvigasi yang kelap-kelip atau berubah warna ketika kita arahkan kursor ke tombol tersebut. Oleh karena itu penulis penasaran bagaimana bisa membuat tombol unik seperti itu. Ternyata untuk membuatnya dapat digunakan beberapa cara seperti menggunakan macromedia flash atau yang disebut dengan flash button dan ada juga yang hanya menggunakan elemen-elemen yang ada di CSS. Saya akan mencoba membahas yang menggunakan elemen-elemen CSS tersebut. Untuk lebih jelasnya berikut ini contoh tampilan tombol unik tersebut.



Berikut ini kode CSS yang digunakan untuk membentuk tampilan button seperti gambar diatas.



Kode yang membuat tombol tersebut berubah warna ketika kursor diarahkan tepat pada tombol tersebut adalah pada elemen “tag #menu a:hover”. Jadi, ketika kursor diarahkan pada tombol maka tombol tersebut akan berubah warna menjadi kuning (#fffcd04).
Sedangkan bagaimana tombol berubaha warna menjadi kuning setelah tombol ditekan dan halaman yang dituju aktif. Misalkan halaman yang dituju adalah halaman Home atau document index.html. Hal pertama yang kita fokuskan adalah pada document HTML-nya. Kalau kita perhatikan pada gambar dibawah kode tombol “Home ” memiliki nama tag class “active”. Tag “active” tersebut berguna untuk kode CSS.



Jadi, ketika tombol “Home” ditekan maka tombol tersebut akan berubah warna menjadi kuning. Begitu juga ketika kursor diarahkan menjauh, tombol tetap berwarna kuning. Keadaan demikian disebut dengan “active” sesuai tag class-nya.

Semoga bermanfaat...
Posted by Denis Haryanto at 03.52 1 comments

Berkenalan dengan CSS

Apa itu CSS?
Menurut sumber wikipedia.org CSS (Cascading Style Sheet) adalah bahasa yang digunakan untuk memformat tampilan html, bahasa yang direkomendasikan W3C (World Wide Web Consortium) untuk melukiskan gaya seperti font, warna, ukuran, jarak, posisi pada dokumen-dokumen web. CSS sangat membantu para web designer untuk memperindah halaman web templatesnya.
Sebenarnya dengan format HTML biasa saja kita sudah bisa membentuk suatu halaman web karena format HTML memiliki fungsi yang sama CSS. Namun bedanya CSS memiliki lebih banyak element. Sehingga seorang programmer atau web designer lebih leluasa memformat dan memperindah suatu halaman web.

Dimana Kode CSS dapat diletakkan?
Ada 3 tempat untuk meletakkan kode-kode CSS antara lain :
1. Tag <HEAD> document HTML
Contoh :

<HTML><head>
<title>page title</title>
//MULAI KODE CSS
<style type="text/css">
body{
background-color:#FFFFFF;
margin:1px,1px;
}
</style>
//AKHIR KODE CSS
</head>
<body></body>
</HTML>

Kode diatas termasuk yang dengan mudah dapat dilihat oleh siapa saja yang ingin mengetahui kode CSSnya. Karena kodenya terletak bersamaan dengan kode HTML tepatnya di Tag <Head>. Sehingga apabila kita tekan Ctrl+U pada browser kode CSS akan dapat ditemukan. Cirinya selalu diawali dengan kode .

2. Di Tag Element-element HTML
Kita juga bisa meletakkan kode-kode css kita di dalam tag-tag html

contoh:
<p style="font-size:12px;color:#000"> text-text content yang akan diformat </p>

Tag HTML contoh diatas adalah

. Untuk menambahkan kode CSS dengan mengawali kode style kemudian menambahkan kode properties CSS sama seperti tag-tag HTML lainnya seperti <body>, <div>, <table>,<p>,<h1>,<font>, dll. Jadi tidak terbatas pada tag <DIV> saja seperti yang biasanya kita lihat. Tapi tag-tag lain juga dapat di aplikasikan dengan kode CSS.

3. Ekternal File
Sesuai dengan namanya eksternal berarti menuliskan kode-kode CSS diluar file HTML yang terdapat di file tersendiri berformat .css. File berformat ini dalam sebuah file web biasanya terdapat di dalam folder bernama css. Kemudian file *.css ini disertakan (include) kedalam document HTML tepatnya pada tag head. Berikut ini contoh include CSS dalam document HTML.

<head>
<title>page title</title>
<link rel="stylesheet" href="eksternal_file_css.css " type="text/css">
</head>

Selector Class
Untuk menuliskan kode CSS menggunakan selector class, pada nama class harus diawali karakter “.” (titik). Sebagai contoh berikut ini deklarasi selector class :

<div class="ClassDenis">Ini contoh CSS</div>

Sedangkan kode CSS-nya :
. ClassDenis {
font-size:12px;color:#0000DD
width:200px;
height:100px;
}

Semua tag html yang mempunyai nama class Denis maka akan diformat sesuai dengan format yang ditulis di kode CSS .ClassDenis.


Selector ID
Untuk menuliskan kode CSS menggunakan selector class, pada nama class harus diawali karakter “.” (titik). Sebagai contoh berikut ini deklarasi selector class :

<div id=" IdDenis ">content</div>

kode css:
# IdDenis{
width:200px;
height:100px;
}

Dengan menambahkan karakter # di awal nama ID nya, berarti format itu adalah format untuk tag html yang berselector ID.

Selamat belajar…

Posted by Denis Haryanto at 03.37 0 comments
Langganan: Postingan (Atom)