Posts Tagged ‘CSS
css background untuk textarea
textarea adalah merupakan suatu tag pada HTML yang berfungsi sebagai tempat tulisan atau kode-kode HTML. Unruk membuat textarea ini menggunakan modus html seperti contoh dibawah ini
<textarea name="textarea" cols="50" rows="4"> tulisannya berada disini semua</textarea>
didalam textarea tersebut bisa di beri gambar atau background, dengan menambahkan css sebagai berikut
<style type="text/css">
textarea {
background-image: url(gambare.jpg);
height: 100px;
width: 150px;
}
</style>
selamat belajar css
Membuat gambar link
Gambar link kali ini adalah gimana membuat website yang berupa gambar dan text. Ketika gambar dilewati mouse (hover) maka ditempat yang berbeda, text akan menunjukkan keterangan dari gambar tersebut. Atau bisa sebaliknya.
Cara Membuatnya
siapkan dulu folder images untuk menaruh gambar-gambarnya
buat file html dan simpan dengan nama index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Inkubis | Gambar Link</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="page-wrap"> <h1>Gambar Link</h1> <div class="people"> <a href="#tian" id="tian"> <span class="name">Putri Titian Asih</span><br /> Putri Titian Asih, biasa dipanggil Tian atau Putri Titian lahir di Palembang, 7 April 1991. <span class="photo"> <img src="images/putri-titian.jpg" alt="Putri Titian Asih" /> </span> </a> <a href="#gutawa" id="gutawa"> <span class="name">Gita Gutawa</span><br /> Aluna Sagita Gutawa atau lebih dikenal dengan Gita Gutawa lahir di Jakarta, 11 Agustus 1993. <span class="photo"> <img src="images/gita-gutawa.jpg" alt="Gita Gutawa" /> </span> </a> </div> </div> </body> </html>
buat lagi untuk css nya dan simpan dengan nama style.css
* { margin: 0; padding: 0; }
body { font: 12px Helvetica, Sans-Serif; }
#page-wrap { width: 600px; margin: 50px auto; }
h1 { font-size: 30px; letter-spacing: -1px; margin: 0 0 20px 0; }
.people { position: relative; }
a { text-decoration: none; color: #222; display: block;
margin: 0 0 0 270px; outline: none; padding: 5px; }
a img { border: 1px solid #FA00EB; }
a:hover { background: #ffefcd; }
a .name { font: 18px Georgia, Serif; }
a:hover .name { color: #9601FF; font-weight: bold; }
a:hover img { border: 3px solid #BD00FB; margin: -4px; }
a .photo { display: block; position: absolute; width: 125px; height: 125px; }
#tian .photo { top: 0; left: 0; }
#gutawa .photo { top: 0; left: 134px; }
#gail .photo { top: 134px; left: 0; }
#padma .photo { top: 134px; left: 134px; }
lihat didalam browser, Mudah Bukan
- Selamat Mencoba -
Teori Membuat Website
Untuk membangun sebuah web page atau membuat website dibutuhkan sebuah bahasa pemrograman yang dikenal dengan sebutan web scripting. Dikatakan script karena perintah kode program tersebut di-interpreter dan tidak ada kompilasi untuk menjadikan file exe (executable). Berdasarkan letak proses interpreter maka web scripting dibagi menjadi dua kategori yaitu :
- Client Side
- Server Side
Client Side dilakukan oleh web browser seperti Internet Explorer, Netscape, Opera, Firefox, Safari dan browser-brewser lainnya. Untuk contoh bahasa client side adalah HTML, CSS, javascript, VBscript, dan xml.
Sedangkan untuk Server Side dilakukan oleh web server seperti PWS (Personal Web Server untuk Sistem Operasi 98), IIS, Apache, Tomcat, Xitami dan JOPE. Untuk Contoh bahasa server side adalah ASP(.Net), PHP, JSP, CFM dan CGI/PL
plugin code untuk website tutorial
seringkali kita menjumpai website atau blog yang menyajikan tutorial – tutorial wordpress atau tutorial lainnya yang berbentuk code atau script. La biasanya kan ada bentuk khusus di script itu, sehingga pembaca atau user dengan mudah mengcopy paste code tersebut. Atau lebih jelasnya seperti dibawah ini
Untuk membuat Seperti itu, di wordpress kita bisa menggunakan plugin yang namanya SyntaxHighlighter . Plugin tersebut bisa untuk bermacam-macam bahasa pemrogaman antara lain :
* C++ — cpp, c, c++
* C# — c#, c-sharp, csharp
* CSS — css
* Delphi — delphi, pascal
* Java — java
* JavaScript — js, jscript, javascript
* PHP — php
* Python — py, python
* Ruby — rb, ruby, rails, ror
* SQL — sql
* VB — vb, vb.net
* XML/HTML — xml, html, xhtml, xslt
Kita tinggal mengaktifkan plugin tersebut, dan ketika ada script yang ingin ditampilkan, bisa langsung dengan memberikan source seperti ini
untuk plugin wordpress bisa di download secara gratis di sini
desain daftar isi dengan html dan css
Membuat / menampilkan menu daftar isi seperti gambar berikut ini menggunakan CSS
Cara yang digunakan adalah, dengan mengatur <li> yang ada di CSS.
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.menu {
width: 500px;
list-style: none;
margin: 0 0 2em;
padding: 0;
font: 150%/100% Arial, Helvetica, sans-serif;
}
.menu li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
list-style:none;
}
.menu strong {
background: #fff;
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -.3em;
left: 0;
}
.menu em {
background: #fff;
padding: 0 0 0 5px;
font: 110%/100% Georgia, "Times New Roman", Times, serif;
position: absolute;
bottom: -.2em;
right: 0;
}
.menu sup {
font-size: 60%;
color: #666;
margin-left: 3px;
}
</style>
</head>
<body>
<div class="menu">
<p align="center">Daftar Isi</p>
<ul>
<li><strong>Photosop</strong> <em>01<sup>1</sup></em></li>
<li><strong>CSS Design</strong> <em>20<sup>2</sup></em></li>
<li><strong>Website Design</strong> <em>200<sup>3</sup></em></li>
<li><strong>Wordpress Installation </strong> <em>250<sup>4</sup></em></li>
<li><strong>Joomla Installation </strong> <em>350<sup>5</sup></em></li>
<li><strong>CMS</strong> <em>250<sup>95</sup></em></li>
</ul>
</div>
</body>
</html>
Selamat mencoba
hack ie css
pernah kan mengalami hal hal seperti ini saat mendesain css untuk website atau saat membuat Website
- Saat kita melihat di browser Firefox, desain kita terlihat sempurna, begitu kita coba di Internet Explorer, desain yang sudah sempurna itu terlihat amburadul.
- batas kanan kiri (margin) tidak sesuai dengan apa yang kita rencanakan ketika dibuka di Internet Explorer
Hal Seperti itu bisa kita atasi dengan membuat css untuk berbagai browser, misalkan kita buat css untuk internet explorer. Begitu kita buka dari IE secara otomatis bisa cari yang di IE
<link rel="stylesheet" type="text/css" href="common.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->
Selamat Mencoba
