Home » Web Programming » html & css »

0
December 25th, 2010

Font menarik dengan Google Font API

Untuk menggunakan font² yang terdapat di http://code.google.com/webfonts?subset=latin di laman web anda, anda hanya perlu hot link css Google ke dalam page html anda seperti contoh di bawah.

<head>
   <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head

Untuk contoh di atas, saya memilih font Lobster. Untuk menggunakan font ini, anda hanya perlu menyatakan nama font tersebut di dalam selector font-family seperti di bawah.

h1 { font-family: 'Lobster', arial, serif; }

Hasil nya:

TutorialMelayu.com


Posted in html & css
By
read more
0
December 23rd, 2010

Rounded corners menggunakan CSS

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
Posted in html & css
By
read more
0
December 22nd, 2010

List navigasi (menu) standard

Pautan (link) navigasi atau menu biasanya dibuat dengan menggunakan unordered list atau “ul” seperti contoh di bawah.

<ul id="nav">
   <li><a title="Home Page" href="#" rel="nofollow">Home</a></li>
   <li><a title="About Page" href="#" rel="nofollow">About</a></li>
   <li><a title="Clients Page" href="#" rel="nofollow">Clients</a></li>
   <li><a title="Contact Page" href="#" rel="nofollow">Contact Us</a></li>
</ul>

List ini kemudiannya boleh ditukar rupanya dengan menggunakan CSS. Salah satu contoh penggunaan CSS untuk list ul di mana dengan menggunakan selector list-style: none, saya membuang dot hitam di tepi setiap elemen di dalam list tersebut.

#nav {
	margin: 0;
	padding: 0;
}
#nav li {	
	list-style: none;
	display: inline;
}
#nav li a{
	padding: 5px;
	color: black;
	text-decoration: none;
	background-color: #f7deba;
}
#nav li a:hover{
	background-color: #f99679;
}
Posted in html & css
By
read more
2
December 12th, 2010

Belajar CSS (positioning) dalam 10 langkah

Untuk tutorial ini, saya menggunakan html ini sebagai panduan.

<div id="wrapper">
<div id="div-sebelum"><p>div-sebelum</p></div>
<div id="div-1">
<div id="div-1-padding">
<p>id = div-1</p>
<div id="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Integer pretium dui sit amet felis. Integer sit amet diam. 
Phasellus ultrices viverra velit.</p>
</div>
<div id="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Integer pretium dui sit amet felis. Integer sit amet diam. 
Phasellus ultrices viverra velit.</p>
</div>
<div id="div-1c"><p>div-1c</p></div>
</div>
</div>
<div id="div-selepas"><p>div-selepas</p></div>
</div>

1. Posisi:static

Jika tidak ditentukan, posisi untuk setiap elemen adalah position:static yang bermaksud elemen tersebut diposisikan ditempat yang sepatutnya di dalam dokumen.

#div-1 {
 position:static;
}

2. Posisi:relative

Jika menggunakan posisi relative, kita boleh menggunakan top, bottom, right atau left untuk menggerakkan elemen tersebut relatif kepada posisi sepatutnya elemen tersebut berada (posisi static) di dalam dokumen.

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

3. Posisi:absolute

Untuk posisi absolute, elemen tersebut akan di”buang” daripada susunan dokumen html dan posisinya akan ditentukan sepenuhnya oleh kita. Sebagai contoh, div-1a dialihkan ke atas kanan pelayar.

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

Dan oleh kerana div-1a di”buang” dari kedudukan asal dokumen, div-1b mengambil alih kedudukan div-1a di dalam dokumen.

4. Posisi:relative + Position:absolute

Jika posisi div-1 ditentukan sebagai relatif, kesemua elemen di dalam div-1 akan diposisikan relatif kepada div-1. Sebagai contoh, kita menggerakkan div-1a ke atas kanan div-1.

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

5. Posisi:2 kolum absolute

Dengan menggunakan teknik di atas, kita boleh membuat layout 2 kolum dengan menempatkan div-1a ke kiri dan div-1b ke kanan. Tetapi, oleh kerana kita menggunakan posisi absolute, div-1a dan div-1b telah menutup div-1c dan div-selepas.

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

6. Posisi:2 kolum absolute + height

Salah satu cara untuk menangani masalah di atas adalah dengan menetapkan height untuk div-1. Untuk posisi ini, div-1c masih lagi tersorok di belakang div-1a dan div-1b.

#div-1 {
 position:relative;
 height : 400px;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

7. Posisi:float

Untuk ketinggian (height) yang berubah-ubah mengikut kandungan div, posisi absolute seperti di atas tidak dapat digunakan. Float digunakan untuk menolak elemen tertentu ke kiri atau ke kanan. Dalam contoh di bawah, div-1a ditolak ke kiri.

#div-1a {
 float:left;
 width:200px;
}

8. Posisi:kolum float

Dengan menggunakan float, kita boleh membuat susun atur 2 kolum dengan menolak div-1a dan div-1b ke kiri. Tetapi jika kita perhatikan, disebabkan oleh float left div-1b, div-1c turut ditolak ke kiri div-1b.

#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}

9. Posisi:kolum float + clear

Untuk menangani masalah di atas, kita hanya perlu menggunakan kata kunci clear:both di dalam div-1c seperti di bawah.

#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
}

10. Latihan!

Langkah terakhir! Banyakkan latihan untuk memahirkan diri dalam CSS Positioning. =)

Selamat mencuba.

Posted in html & css
By
read more
5
March 29th, 2009

html form

HTML form digunakan untuk mengumpul maklumat dari pengguna (users) dan menghantar maklumat ini ke server untuk diproses. Untuk tutorial ini, saya akan menunjukkan contoh ringkas di mana pengguna akan memasukkan nama dan e-mail mereka, dan kita akan memaparkan maklumat ini kembali kepada pengguna tersebut.

Posted in html & css, php
By
read more
Forum Tutorial php,mysql,javascript,css,html bahasa melayu

Tutorial php,mysql,javascript,css,html bahasa melayu