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…

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.

Selector pada CSS

posted by hisman in September 6th, 2008

category : CSS

Tags: ,

Saat kamu kenalan ma CSS, kamu masih inget gak ada salah satu bagian dari kode CSS yaitu selector. Nah, kali ini saya akan bahas sebenernya ada tiga jenis selector di CSS. Apa aja? Yups.. baca terus artikel ini..

Tiga jenis selector di CSS :

1. HTML selector, menunjukkan bahwa yang dikasih style itu salah satu tag HTML. Contohnya yang h4{color :#FFFFFF;} jadi yang punya tag <h4> akan di beri warna putih.

2. id selector, kalo kamu pake id selector, yang kamu style itu hanya tag HTML yang memiliki atribut id.

Contoh kamu punya tag HTML kayak gini :


<h4 id=”heading”>aaa</h4>

kamu bisa kasih style dengan kode CSS :


#heading {color:#FFFFFF}

/*ingat ada karakter ‘#’
sebelum kata heading yang
menunjukkan dia id selector */

3. class selector, hampir sama dengan id selector cuman yang di kasih style itu tag HTML yang memiliki atribut class. Contoh:


<h4 class=”heading”>aaa</h4>

Bisa kamu kasih style:


.heading {color:#FFFFFF;}

/*ingat ada karakter ‘.’
sebelum kata heading yang
menunjukkan dia class selector */

Selengkapnya..

Kenalan Sama CSS yuk..

posted by hisman in September 5th, 2008

category : CSS

Tags: , ,

Kamu dah sedikit kenal khan sama HTML, sekarang saatnya kenalan ma CSS. Saai ini dalam hal desain mendesain web HTML dan CSS sudah tidak dapat dipisahkan lagi. Makanya ketika awal-awal saya belajar webdesign, yang pertama kali diajarkan ke saya ya HTML dan CSS.

CSS itu singkatan dari Cascading Style Sheet, ada kata style, berarti ada hubungannya dengan desain mendesain. Gampangnya gini, CSS itu digunakan untuk mendesain konten-konten yang ada di web supaya keliatan lebih indah. Sebenernya ngedesain konten ini bisa langsung dilakukan dengan HTML, tapi akan merepotkan kamu dan juga akan membuat kodingan HTMLnya menjadi sedikit berantakan.

Contohnya gini, misal kamu pengen semua font di dalam tag <h4></h4> berwarna putih, nah kalo pake HTML langsung kamu bisa menambahkan tag <font></font> di dalam tag <h4></h4>, jadinya gini


<h4><font color =”#FFFFFF”>Putih</font></h4>

Kata Putih di dalam tag tersebut akan berwarna putih. Nah kalo ada misalkan ada 50 tag <h4> nya atau ada 100. Pegel khan tangannya…

Makanya ada CSS, klo pake CSS tinggal di tulis satu kode CSSnya seperti ini :


h4{ color : #FFFFFF }

semua yang memiliki tag <h4> akan berwarna putih tanpa perlu nulis kode tersebut berulang-ulang. simpel khan?? Selengkapnya..

Skill dasar yang harus dimiliki oleh seorang webdesigner

posted by hisman in August 23rd, 2008

category : webdesign

Tags: , , , , ,

Yups, dari artikel sebelumnya,kamu dah tau tentang webdesign yang baik itu seperti apa sich. Nah klo artikel yang ini akan membahas tentang skill-skill dasar yang harus kamu miliki jika ingin mendesign sebuah web.

Sebenernya sich menurut saya skillnya gak banyak-banyak, cuman tiga sich yang dasar, hanya kalau kamu ingin jadi master ya harus ditambah lagi skillnya hihi.. Tapi kalo kamu ngedalemin 3 skill ini kamu bisa kok ngebuat desain web yang wah.(tergantung kreativitas ya..) Selengkapnya..

copyright © 2010 hisman.org | web design and icon by hisman