Sep
19
8

No Table For Layout

posted by hisman in September 19th, 2008

category : CSS, layout

Tags: , ,

Buat kamu yang masih sering gunain tabel untuk ngedesain layout, sebaiknya mulai dari sekarang tinggalin kebiasaan kamu yang gak baek itu dan mulailah beralih ke CSS.

Kenapa?

Make tabel itu gak praktis, menyusahkan, agak maksa, denger-denger kurang search engine friendly dan yang paling penting saat ini banyak perusahaan yang menginginkan situsnya didesain dengan meminimalisir penggunaan tabel (tableless), so, daripada kamu kehilangan orderan lebih baik hijrah ke CSS…

Buat kamu yang baru belajar web design, pasti bingung apa yang saya tulis di atas… hehe…

Mari saya jelaskan… Selengkapnya..

Sep
18
2

The Layout

posted by hisman in September 18th, 2008

category : CSS, layout

Tags: , ,

Kemaren-maren, saya dah jelasin sedikit tentang background. Nah, sekarang saatnya kita bicara tentang layout.

Misalkan kamu mo bikin mading/poster nich.. Pas kamu ngebikin mading/poster tersebut kamu pasti mikirin ehm… layoutnya gimana ya?? Ehm..di sebelah sini mo di kasih apa ya, sebelah situ isinya apa ya, Yap, memang dalam desain mendesain sesuatu itu yang pertama kali dipikirin itu biasanya layoutnya mo gimana..

Begitu juga dalam mendesain sebuah web, kamu juga harus mikirin layoutnya gimana. Misal headernya mo ditaruh di mana, trus sidebarnya di mana, menunya, contentnya. Yah macem-macem dech…

Dalam CSS sendiri ada banyak property yang bisa digunakan untuk membuat layout dari web. Dan biasanya gak semua property itu dipake. Para web designer biasanya hanya memakai property yang diperlukan aja dan antara satu web designer dengan yang lain biasanya ada perbedaan dalam penggunaannya. Yah tergantung kreativitas masing-masinglah…

Property-property untuk layout gak akan saya jelasin di postingan ini, karena takutnya ntar postingan ini malah jadi kepanjangan,hehe (bilang aja males…) tapi akan saya jelasin sambil praktek di postingan-postingan selanjutnya…

Oke kembali ke layout lagi ya… Sebenernya sich ada beberapa layout standar. Standar disini maksudnya sering dipake orang-orang… ini contohnya (klo gak keliatan gambarnya di klik aja biar gede) :

Klo kamu liat emang layout-layout itu sangat standar sekali ya.. blog saya ini juga tergolong yang standar juga…

Tapi klo kamu kreatif kamu bisa bikin layout yang aneh-aneh, tapi harus tetap user friendly ya…

Sep
11
2

Bermain-main dikit lagi dengan background

posted by hisman in September 11th, 2008

category : CSS, background, webdesign

Tags: ,

Oke, saya sudah menjelaskan sedikit tentang background. Nah, sekarang saatnya memulai pengaplikasiannya.

Pada contoh pengaplikasian background ini kemungkinan gak akan banyak-banyak contoh. Klo kamu masih kurang, silakan explore sendiri aja ya…

Kita mulai ya…

Misal, saya punya kode HTML kayak gini:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Latihan Background</title>
</head>
<body>
<h2>Contoh Pengaplikasian Background</h2>
<div id="bg1">
</div>
<div id="bg2">
</div>
</body>
</html>

Saya akan akan mencoba menambahkan background pada tag h2 dan tag div. ini adalah kode CSSnya : Selengkapnya..

Sep
09
8

Sedikit Penjelasan Tentang Background

posted by hisman in September 9th, 2008

category : CSS, background, webdesign

Tags: ,

Yap,,kali ini saya akan bahas mengenai bagaimana menambahkan background dengan CSS. Namun, sebelumnya ini beberapa hal tentang background yang perlu kamu tau, dan mungkin kamu sudah tau hal-hal ini:

1. Background dapat berupa warna ataupun gambar, atau bahkan bisa terdiri dari dua unsur tersebut.

2. Kamu bisa ngasih background di elemen HTML manapun, kamu tinggal ubah-ubah selectornya aja.

Ada 6 property di CSS,yang bisa digunakan untuk menambahkan background pada dokumen HTML kita, yaitu background-color, background-image, background-attachment, background-position, background-repeat, dan background. Saya jelasin satu-satu ya

1. background-color

Sesuai namanya, guna dari property ini adalah memberi warna pada background. Value dari property ini ya warna-warna yang ingin diberikan pada background.

Contohnya:


body{
     background-color:#000000;
}

Kode CSS di atas akan membuat tag body memiliki background berwarna hitam (#000000 = hitam).

2. background-image

Kalo property yang ini berguna untuk membuat image/gambar menjadi background. Valuenya seperti ini

url(letak gambar).

Contohnya, saya ingin membuat gambar “bg.png” menjadi background dari tag body yang terletak di folder images (folder images dan file HTMLnya ada dalam satu folder), maka CSSnya jadi seperti ini:


body{
     background-image: url(images/bg.png);
}

Selengkapnya..

Sep
07
1

Peletakkan CSS di HTML

posted by hisman in September 7th, 2008

category : CSS

Tags: , ,

Kamu dah kenal CSS, belajar CSS, jenis-jenis selector di CSS juga kamu dah tau. Nah saatnya pengaplikasian, eits.. sebelum itu kamu harus tau CSS itu diletakkan dimana sich dalam dokumen HTML..
Ada tiga cara peletakkan CSS di HTML,yaitu :

1. Meletakkan CSS sebagai atribut pada suatu tag HTML, contoh :


<h4 style=”color: #FFFFFF”>heading1</h4>

2. Meletakkan CSS  dengan memakai tag <style></style>. Contohnya:


<head>
<style type=”text/css”>
<!--
h4{
   color:#FFFFFF;
}
-->
</style>
</head>
<body>
<h4>contoh</h4>
</body>

3. Meletakkan CSS di luar dokumen HTML dengan file tersendiri biasanya berextension “.css”, cara agar file HTML dan CSS saling berhubungan, bisa menggunakan tag <link> di dalam tag <head>. Contoh :


<link rel=”stylesheet” type=”text/css” href=”file.css”/ >

Cara ini biasanya digunakan ketika kamu memiliki banyak file HTML yang memiliki style yang sama, jadi cukup dengan membuat satu file .css kamu tinggal panggil2 file itu di lebih dari satu dokumen HTML.

Newer Entries »
« Older Entries
copyright © 2010 hisman.org | web design and icon by hisman