Membuat Isi Kotak Tidak Keluar dengan CSS (Overflow)

Menjadi Web Developer
Menjadi Web Developer

Terkadang kita ingin membuat sebuah content web (isi) yang dibatasi oleh sebuah kotak. Jadi ketika content/isi melebihi kotak tersebut, maka tidak akan ditampilkan (disembunyikan). Disinila fungsi dari CSS dengan script Overflow-nya. Fungsi dari overflow adalah untuk menyembunyikan, menampakkan, atau membuat scroll. Fungsi ini bisa diterapkan dalam objek teks ataupun gambar.

Lanjutkan membaca “Membuat Isi Kotak Tidak Keluar dengan CSS (Overflow)”

Ciri-ciri Web Developer yang Bagus

Menjadi Web Developer
Menjadi Web Developer

Bagi mereka yang sudah ahli dan sering membuat web untuk client atau konsumen adalah sebutan bagi Web Developer atau mungkin untuk web pribadinya. Nah pertanyaanya adalah apakah sudah disebut seorang “Web Developer” yang bagus dengan telah membuat beberapa website? belum tentu juga. Berikut saya berikan ciri-ciri web developer yang bagus berdasarkan pengalaman dan baca sana sini:

Lanjutkan membaca “Ciri-ciri Web Developer yang Bagus”

Penulisan CSS

Ada tiga cara penulisan kode CSS dalam HTML, yaitu :
Internal CSS
Yaitu menuliskan langsung scritp CSS di file HTML-nya.

<html>
<head>
<title>Belajar CSS</title>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Selamat Datang CSS</p>
</body>
</html>

External CSS
Yaitu memanggil file CSS dari tempat lain, dengan kata lain file CSS terpisah dengan file HTML. Untuk lebih jelasnya kita lihat contoh dibawah ini:

<html>
<head>
<title>Belajar CSS</title>
<link rel=”stylesheet” type=”text/css”
href=”test.css” />
</head>
<body>
<h3> Selamat Datang CSS </h3>
</body>
</html>

Inline CSS
Yaitu penulisan kode CSS dalam tag HTML. Lihat contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
</head>
<p style=”background: blue; color: white;”>Style Menggunakan CSS</p>
</body>
</html>

Membuat Tabel dengan CSS

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
http://www.w3.org/TR/html4/loose.dtd”&gt;
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>- Supono | Tutor | CSS</title>
<style type=”text/css”>
#leftbox{
margin-left: 0;
position: absolute;
top: 10px;
left: 80px;
width: 160px;
border: solid 2px #0000ff;
}
#centerbox{
position: absolute;
top: 10px;
left: 260px;
width: 400px;
height: 500px;
border: solid 2px #ff0000;
}
#rightbox{
position: absolute;
top: 10px;
left: 680px;
width: 20%;
height: 500px;
border: solid 2px #00ff00;
}
</style>
</head>

<body>

<div id=”leftbox”>
Here’s some text between the two &lt;div&gt; boxes.

</div>

<div id=”centerbox”>
Here’s some text between the two &lt;div&gt; boxes.
</div>

<div id=”rightbox”>
Here’s some text between the two &lt;div&gt; boxes.
</div>
</body>
</html>

Penulisan CSS

Penulisan CSS
Script atau kode CSS harus ditulis dalam tag <style> kode CSS </style>.
Penulisan kode CSS disisipakan dalam dokumen HTML dalam elemen tag <head> kode CSS </head>, seperti terlihat pada contoh dibawah ini:

<html>
<head>
<title>Belajar CSS</title>
<style type=”text/css”>
</style>
</head>
<body>
<p>Isi Halaman Disini</p>
</body>
</html>

Ada tiga cara penulisan kode CSS dalam HTML, yaitu :

1. Internal CSS
Yaitu menuliskan langsung scritp CSS di file HTML-nya.
Contoh :
<html>
<head>
<title>Belajar CSS</title>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Selamat Datang CSS</p>
</body>
</html>

2. External CSS
Yaitu memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan file HTML. Untuk lebih jelasnya kita lihat contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
<link rel=”stylesheet” type=”text/css”
href=”test.css” />
</head>
<body>
<h3> Selamat Datang CSS </h3>
</body>
</html>

2. Inline CSS
Yaitu penulisan kode CSS dalam tag HTML. Lihat contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
</head>
<p style=”background: blue; color: white;”>Style Menggunakan CSS</p>
</body>
</html>

Apa itu CSS

CSS singkatan dari Cascading Style Sheet adalah sebuah dokument yang digunakan untuk mendesain atau mengatur tampilan tata letak sebuah halaman web, CSS ini bersifat embeded pada tag HTML yang artinya menempel atau melekat pada tag HTML. Sebagai Contoh embeded seperti di bawah ini <h1 class=”header”>Pengantar</h1>.
Dengan CSS ini, kita bisa mengontrol/mengatur seluruh tampilan halaman web dengan hanya sebuah dokument CSS, biasan ekstensi untuk file CSS adalah .css (dot css).
Selain itu, CSS juga dapat menggantikan fungsi tabel dan dapat meminimalkan ukuran file HTML. Bayangkan jika Anda membuat sebuah kotak dengan tabel dan CSS jauh lebih efesien, Sebagai contoh, Anda membuat sebuah tabel dengan satu kolom dan satu buah baris :
Dengan Tabel :
<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td>
Content Box
</td>
</tr>
</table>
Dengan CSS :
<div class=”box”>
Content Box
</div>
Pada perkembangannya CSS sudah masuk lelvel 3 untuk sekarang, dimana dimulai CSS level 1 atau yang sering di sebut CSS aja, kemudian level 2 yang merupakan penyempurnaan dari CSS level sebelumnya, yaitu CSS level 1.
CSS merupakan alternatif bahasa pemrograman web masa yang akan datang, dimana mempunyai banyak keuntungan, diantaranya :
– Ukuran file lebih kecil
– Load file lebih cepat
– Dapat berkolaborasi dengan JavaScript
– Pasangan setia XHTML
– Menghemat pekerjaan tentunya, dimana hanya membuat 1 halaman CSS.
– Mudah mengganti-ganti tampilan dengan hanya merubah file CSS nya saja.
– Dan banyak lagi yang lainnya.