hisman.org newsletter

Dapatkan tips-tips menarik tentang web design langsung ke e-mail Anda (Gratis...)

Jan
16
2

All About CSS Float Technique (2)

posted by hisman in January 16th, 2010

category : CSS, layout, webdesign

Tags: , , ,

Ini adalah bagian kedua dari artikel berseri : All About CSS Float Technique. Di bagian pertama, saya sudah menjelaskan konsep dasar dari float itu dan juga ada sedikit contoh di sana. Nah, kali ini saya akan membahas contoh penggunaan float lebih lanjut lagi. Pertama, saya pake dua tag div, yaitu box1 dan box2 yang nantinya kedua div ini akan dipakai untuk mencoba teknik float:

<div id="box1">
 <h1>Box1</h1>
 <p>Etiam eu est est,....</p>
</div>

<div id="box2">
 <h1>Box2</h1>
 <p>Etiam eu est est,....</p>
</div>

Selengkapnya..

Apr
18
1

Pendefinisian warna di css

posted by hisman in April 18th, 2009

category : CSS

Tags: , ,

Di CSS, warna bisa diberikan ke text ataupun background. Untuk text sendiri pemberian warna menggunakan property color. Contohnya kayak gini :

h1{color : red;}

Sedangkan untuk background, property yang digunakan adalah background-color (sudah saya jelaskan penggunaannya di artikel tentang background.. )

Nah, yang akan di bahas kali ini adalah cara mendefinisikan warna-warna tersebut. Ada 5 cara untuk mendefinisikan sebuah warna pada css, hmm.. apa sajakah itu ?? 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.

Sep
05
4

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..

Recent Comments

  • bambang: thanks..artikelnya bermanfaat sekali buat pembelajaran saya untuk lebih mendalami web designer…
  • hisman: @fachrizal coba baca artikel saya yang ini mas : http://hisman.org/all-about-cs s-float-technique-2.html di...
  • ifliandry: Bagi bagi ilmu terus nih … tetap dalam kesederhanaan dalam penyampaian, tapi bisa langsung di coba...
  • fachrizal: gmana klo content terdiri dari 3 bagian , ada sidebar, posting ama, rightbar … thx
  • hisman: @abdi Klo yang float:right itu ntar objeknya akan mengambang ke arah kanan.. contohnya ini :...

Tags Cloud

background belajar CSS belajar HTML blog blogku jadi box model buat layout buat layout tanpa tabel color CSS desain blog sendiri desain web desain web pake flash flash float fokus gak jelas horizontal menu HTML image inline dan block element kenalan dengan CSS kenalan sama HTML kompres gambar layout menu ngedesain web peletakkan CSS saatnya fokus selector di CSS skill dasar webdesigner tabel tag div tentang background tools web webdesign whitespace

Add to Technorati Favorites

Web Design Blogs - BlogCatalog Blog Directory

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