This is Only | Begini-aja: CSS Artikel

Showing posts with label CSS Artikel. Show all posts

Thursday, September 16, 2010

Membuat halaman Web dua kolom dengan CSS

Buat temen-temen yang lagi belajar membuat halaman web dengan style (CSS) berikut ini langkahnya,
langsung saja langkah pertama kopi paste kode HTML berikut pada text editor (notepad,notepad++, atau lainya) kemudian save dengan akhiran .htm misal : test_web2kolom.htm.

<html>
<head>
<title>2 kolomsederhana</title>
  <link rel="stylesheet" href="test_web2kolom.cs" type="text/css" media="screen" />
  <style type="text/css" media="screen">
   /* <![CDATA[ */ @import url(test_web2kolom.css); /* ]]> */
  </style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Contoh Link 1</a></li>
<li><a href="#">Contoh Link 2</a></li>
<li><a href="#">Contoh Link 3</a></li>
</ul>
</div>
<div id="content">
<h1>Layout dua kolom sederhana</h1>
<p><strong>Step x - bold text here...</strong> More text here...</p>
<p>More text here...</p>
<p>More text here...</p>
<p>More text here...</p>
</div>
</body>

jika sudah selesai, tinggal kopi paste kode css dibawah ini,

lalu simpan dengan akhiran .css misal : test_web2kolom.css

•body {margin:0px; padding:0px; font: 1em verdana, arial, sans-serif;}

•div#nav {position:absolute; left:0px; top:0px; width:150px; padding:.5em 0 0 0; margin:22px 0 0 15px; border-top:2px solid #069; border-bottom:1px solid #069;}

•div#nav ul {margin-top:0px; margin-bottom:.8em;}

•div#nav li {margin-bottom:.5em; font-weight:bold; font-size:.75em;}

•div#content {margin:20px 0 0 165px; padding: 0 1em;}

•div#content h1{font-size:1em;}

•div#content p {font-size:.8em;}

•div#content li {font-size:.75em;}

Kkarena contoh ini menggunakan style sheet (file CSS) yang terpisah atau Eksternal, maka jika ingin contoh ini berjalan dengan baik harus mengganti tulisan/kode yang sudah saya tandai dengan warna merah dan tebal.
Setelah selesai semuanya tinggal kita pindahkan dua file tadi ke folder C:\xampp\htdocs\folder_anda\
untuk me-review hasilnya buka browser (mozzila atau lainnya) ketik http://localhost/folder_anda/test_web2kolom.htm akan nampak seperti gambar di bawah.untuk lainnya silahkan berkreasi sendiri,menurut saya kita bisa kalau kita sering melakukannya,awalnya pasti sering salah,tapi lama-kelamaan kita akan semakin mengerti.

Silahkan mencoba..

Tuesday, December 22, 2009

Mengenal Dasar CSS (part.1)

Setelah sebelumnya saya sudah post artikel Mengenal CSS, maka kali ini saya akan menulis tentang dasar-dasar mempelajari CSS. Dapat di tarik kesimpulan bahwa CSS itu adalah cara memformat halaman website yang dibangun dengan xHTML dengan cepat, melalui properti-properti yang di set (format) di CSS kita bisa menghemat waktu dalam pembuatan atau pengelolaan sebuah halama website.berarti kita akan menghemat waktu,tenaga & berarti juga menghemat uang.

Dalam mempelajari CSS ada beberapa hal yang harusnya sudah kita kuasai, antara lain:
-pertama yang pasti bisa menggunakan Browser (Mozzila Firefox, Opera, IE, ataupun lainnya)
-bisa atau mengerti menggunakan webserver local (XAMPP, WAMP, atau lainnya)
-bisa atau mengerti xHTML
-terakhir bisa atau mengerti menggunakan teks editor (Notepad, notepad++, HTMLeditor dll)

jika kita merasa sudah memenuhi syarat di atas, selanjutnya adalah mengenal lebih dekat tentang CSS. setahu penulis CSS dapat di pasang atau di tempatkan pada code halaman xHTML dengan tiga cara yaitu :
1. Inline
2. Embedded (tempel)
3. Exsternal

Penulisan kode dengan cara inline adalah dengan langsung menyisipkan kode (style CSS) pada baris kode atau tag xHTML yang ingin deberikan style (properti),misalnya :
......
<body>
<h1 style=“color:blue”>CSS inline test doang </h1>
.......

Penulisan kode dengan cara embeded adalah dengan menyisipkan kode diatara tag <head>...</head> dengan maksud memformat halaman secara keseluruhan (hanya terbatas pada halaman yang di embedded),contoh penulisannya seperti berikut :

<html>
<head><title>Contoh css embedded</title>
<style type="text/css">
hr {color: red}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
......

Cara yang ketiga adalah dengan cara file external, maksudnya adalah kita membuat sendiri file .css dan di simpan dengan terpisah degan file html. kalau file nya terpisah,terus bagaimana halaman bisa terformat??
seringkali pertanyaan seperti itu muncul, padahal jawabannya sangat mudah,yaitu kita hanya perlu memberikan link (ditulis di antara tag <head>...nama file ***.css</head>), kalau masih bingung bisa lihat contoh berikut :

kode ini di simpan dengan akhiran .htm
<html>
<head>
<title>contoh css external</title>
<link rel="stylesheet" href="mystyle.css“ type="text/css" media="screen" />

<style type="text/css" media="screen">
/* <![CDATA[ */ @import url(mystyle.css); /* ]]> */
</style>
</head>
<body>
<h1>Belajar Cascading Style Sheet</h1>
<h2>Pengertian</h2>
<p>CSS kependekan dari Cascading Style Sheet.</p>
<p>CSS merupakan fitur tambahan untuk (X)HTML untuk mengatur format tampilan</p>
<p>Dengan menggunakan CSS, waktu pengembangan halaman web dapat dipercepat.</p>
<h2>Cara Penulisan CSS</h2>
<p>CSS dapat ditulis dengan tiga cara yaitu :
<ul>
<li>Inline</li>
<li>Embed</li>
<li>File eksternal</li>
</ul>
</p>
</body>
</html>

kalau yang berikut di simpan dengan akhiran .css (misalnya mystyle.css)

body { background-color:blue ;}
h1 {font-family :times new romans;font-weight:bold; color:yellow;}
h2 {color:lime; text-decoration:blink;}
p {margin-left: 20px;}
li {text-decoration:underline;font-color:lime;}

Sampai disini berarti anda sudah bisa menggunakan css sederhana melalui 3 cara yaitu inline,Embedded dan file eksternal, untuk kelanjutan dasar-dasar css lainnya akan saya post di blog ini lagi secepatnya. mohon ma'af kalau bahasa saya kurang atau susah di mengerti (namanya juga pemula).

Wassalam

Wednesday, December 16, 2009

Apa itu CSS (Cascade Style Sheet)

CSS pasti udah sangat umum di kenal oleh para master web, tapi buat para pemula seperti penulis, CSS masih hanya sekedar imajinasi yang sering di dengar tapi cuma sekedar angin lalu saja.. maksud hati ingin meraih suara itu namun masih bingung memulai dari mana,pada artikel kali ini penulis ingin membagi sedikit pengetahuan tentang CSS,mungkin akan sangat panjang tulisan tentang CSS,jadi penulis mohon ma'af apabila belum sempat menuliskan semua yang penulis tahu.

Sebenarnya CSS itu sangat penting dan sangat berguna dalam hal blogging ataupun membangun sebuah halaman website, khususnya web page yang di bangun dengan kode HTML, karena sepengetahuan penulis, CSS dan HTML bagai 2 sisi mata uang (ckckckc..!!??).., kok bisa ? jawabannya adalah bisa!!!

Kalau di ilustrasikan yang penulis anggap paling mudah adalah,jika HTML itu seorang wanita,maka CSS adalah Make Up (alat-alat kecantikan)nya, kenapa? karena pada dasarnya HTML itu di gunakan lebih kepada dasar atau kerangka dari sebuah halaman website, dan CSS adalah aksories untuk membuat kerangka tadi menjadi lebih rapi & cantik...

Oleh karena itu jika kita para pemula yang masih baru di dunia web desain wajib menguasai yang namanya Cascade Style sheet tersebut.., untuk lebih jelasnya tentang dasar-dasar dan contoh penggunaan CSS akan penulis tulis di lain kesempatan.. masih di blog ini yang memang masih pemula.

Wassallam

This is Only | Begini-aja

Pages