Monday 4 February 2013

Memahami kode dasar CSS


Cascading Style Sheet atau yang disingkat CSS memungkinkan untuk mendesain (style) tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS).
Didalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal layout css adalah IE karena kurang dukungannya terhadap CSS.
Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi.
Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu:
1. Metode Table
2. Metode Div
Manfaat dari CSS:
  1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
  2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
  3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
  4. Dapat berkolaborasi dengan JavaScript.
  5. Digunakan dalam hampir semua web browser.
Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:
Header –> berisi tema web/ judul
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright

Atribut ID

Ada dua cara penempatan elemen dalam web dengan CSS yaitu:

1. Position (Posisi)

Mengunakan properti position terdapat 4 cara:
  • Static –> posisi normal (default).
  • Relative –> posisi elemen tergantung dari elemen yang lain.
  • Absolute –> posisi elemen berpatokan pada jendela browser.
  • Fixed –> posisi elemen tetap walaupun digeser.

2. Float (Nempel)

Menggunakan properti float atau clear:
  • Float:left –> elemen akan menempel pada sebelah kiri elemen induk.
  • Float:right –> elemen akan menempel pada sebelah kanan elemen induk.
  • Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.
  • Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah
  • Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.
Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi dengan css:
Margin –> jarak/batas elemen dengan elemen lain
Border –> border/gari tepi elemen
Padding–> jarak elemen dengan isi elemen (elemen anak)
Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan CSS:
contoh penulisan css :
<html>
<head>
<style type = "text/css">
#header {
width:900px;
height:50px;
border: 1px solid #640404;
}
#headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
#headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>
<h1>Sample</h1>
<div id = "header">
<div id="headerLeft">Header Left</div>
<div id="headerRight">Header Right</div>
</div>
</body>
</html>
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:
  1. External Style Sheet (file CSS berbeda dari file HTML),
  2. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
  3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).
Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini:
Penempatan CSS dalam HTML

Internal CSS

Metode penulisan kode CSS langsung dalam file HTML. contoh:
<html>
<head>
<style type = "text/css">
.header {
width:900px;
height:50px;
border: 1px solid #640404;
}
.headerLeft {
width:400px;
background-color:#CCCCCC;
height:50px;
float:left;
text-align:center;
}
.headerRight {
width:450px;
background-color:#999999;
height:50px;
float:right;
text-align:center;
}
</style>
</head>
<body>

Eksternal CSS

file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”public.css”/>
</head>
<body>
</body>
</html>

Inline CSS

Penulisan kode CSS dalam tag HTML. contoh:
<html>
<head>
</head>
<div style="background-color:#999999; text-align:center;">Inline CSS</div>
</body>
</html>
Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css
Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag<head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian<body> saja bagian yang didalam <head> tidak usah diapa-apakan.
Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS.
CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.
Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag <font>.
Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode berikut:
<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>

Link

Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.
Coba kode CSS berikut:
a.link1:link {
font-weight: bold; 
font-size: 12px; 
color: #C87C28; 
font-family: Times New Roman; 
text-decoration: none;
}
a.link1:visited {
font-weight: bold; 
font-size: 12px; 
color: #CC6600; 
font-family: Times New Roman; 
text-decoration: none;
}
a.link1:hover {
font-weight: bold; 
font-size: 12px; 
color: #C87C28; 
font-family: Times New Roman; 
text-decoration: underline
}
a.link1:active {
font-weight: bold; 
font-size: 12px; 
color: #C87C28; 
font-family: Times New Roman; 
text-decoration: none;
}
a.link2:link {
font-weight: bold; 
font-size: 12px; 
color: #663300; 
font-family: Arial, Helvetica, sans-serif; 
text-decoration: underline;
}
a.link2:visited {
font-weight: bold; 
font-size: 12px; 
color: #800000; 
font-family: Arial, Helvetica, sans-serif; 
text-decoration: none;
}
a.link2:hover {
font-weight: bold; 
font-size: 12px; 
color: #ff6600; 
font-family: Arial, Helvetica, sans-serif; 
text-decoration: underline overline;
}
a.link2:active {
font-weight: bold; 
font-size: 12px; 
color: #ff6600; 
font-family: Arial, Helvetica, sans-serif; 
text-decoration: underline;
}

Sunday 3 February 2013

Cara Upload Wordpress di 000webhost menggunakan FileZilla

Setelah pendaftaran Hosting Gratis yang saya bahas di Daftar 000webhost dengan domain dot tk tentu saja pendaftaran hosting itu bertujuan untuk kalian yang ingin membuat website misalkan membangun website kita dengan CMS seperti yang pernah saya jelaskan di Penjelasan dari CMS , sebagai contoh kita akan menggunakkan CMS Wordpress, untuk upload File CMS ke Hosting kita gunakan software fillezilla yang bisa kamu download disini , dan download wordpressnya disini. jika sudah kita mulai tahapan-tahapannya.

  1. Sekarang login akun 000webhost mu.pilih Go to CPanel.
  2. Pilih View Account Details untuk melihat akun detail yang akan kita gunakan untuk upload wordpress
  3. Sekarang kita buat terlebih dahulu Databasenya, pilih menu Quick Links ada di bagian paling bawah, pilih MySQL management di open link new tab untuk mempermudah tahapan berikutnya
  4. Isi MySQL database name misalkan dengan wpdb, MySQL user name misalkan dengan wpdb (databasename dan username harus sama)
  5. Isi Password for MySQL user dengan password yang kamu inginkan, klik create database jika sudah, setelah itu akan ada tampilan seperti dibawah ini
  6. Simpan data-data dari database tersebut untuk nanti digunakan.
  7. Berikutnya extract file wordpress yang telah di download dan buka aplikasi FileZillajika kamu sudah instalkan
  8. Isi bagian gambar seperti dibawah ini dengan Server Name dan Username pada bagian Account Information
  9. gambar filzilla
    gambar account information
    Isi bagian nama dengan servername, nama pengguna dengan username pada acount information dan kata kunci dengan password akun 000webhost mu, untuk port tidak usah di isi dan klik tombol koneksi cepat jika sudah.
  10. Untuk menggampangkan penjelasan pada File Zilla saya buat menjadi Bagian A, B,C, dan D agar mudah dimengerti seperti gambar di bawah ini.
  11. Pada Bagian D double klik root public html
  12. Pada bagian A cari file Wordpress yang telah di extract, jika sudah buka atau klikFolder wordpress tersebut
  13. Maka Pada Bagian C akan tampil isi dari Folder Wordpress tsb, sekarang blok semua file pada bagian C klik kanan dan Pilih Upload.
  14. dan tunggu sampai proses upload di root public html selesai
  15. Sedikit tambahan jika ada Pengiriman yang gagal seperti gambar dibawah ini
  16. Klik tab Pengiriman Gagal klik kanan pada salah satu file pada tab Pengiriman Gagal pilihProses Antrian.
  17. Sekarang Buka URL domain dot tk yang kamu daftarkan di 000webhost, maka akan ada tampilan seperti dibawah ini, pilih Create a Configuration File
  18. Pilih Lets go, sekarang kamu buka akun Mysql yang kamu simpan seperti pada Tahap No 5 untuk mengisi Konfigurasi set up Wordpress atau kampu masuk CPanel dan pilih Mysql


  19. Isi Data Base Name dengan Database Mysql(a2814537_wpdb) dan Username (a2814537_wpdb), Database Host dengan isi dari Mysql Host(mysql17.000webhost.com) seperti gambar diatas
  20. Lalu pilih Submit, Run the install, dan Isi Informasi Admin Wp yang dibutuhkan seperti username, password untuk login nanti dll, Klik Install wordpress
  21. Login akun admin Wp tadi yang dibuat, dan Selesai