Tutorial Melayu » html & css

Font menarik dengan Google Font API

mdpai — Fri, 24 Dec 2010 20:38:39 +0000

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

Rounded corners menggunakan CSS

mdpai — Wed, 22 Dec 2010 21:15:02 +0000

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

List navigasi (menu) standard

mdpai — Tue, 21 Dec 2010 21:12:41 +0000

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;
}

Belajar CSS (positioning) dalam 10 langkah

mdpai — Sun, 12 Dec 2010 20:50:14 +0000

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.

html form

mdpai — Sun, 29 Mar 2009 01:03:37 +0000

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.

Contoh form.html


Tutorial Melayu E- Commerce
 
Nama: 

Email:

Jika anda perhatikan, saya meletakkan attribute action=”proses.php” di dalam tag form html di atas. Ia membawa maksud, jika pengguna menekan butang submit, hantar semua maklumat dari html form ke page proses.php. Jadi secara ringkasnya

Contoh proses.php


$nama = $_POST['nama'];
$email = $_POST['email'];
$masa = echo date('l jS \of F Y h:i:s A');
 
echo "Selamat Datang $nama. 
";
echo "Email anda ialah $email 
";
echo "Masa : $masa 
";
?>

Semua maklumat dari html form boleh diperolehi dari variable $_POST. Jika anda perhatikan, di dalam form.html, saya telah setkan name=”nama” dan name=”email” : nama-nama inilah yang akan kita gunakan untuk mengenal pasti maklumat mana yang mahu kita proses. Dalam tutorial ringkas ini, saya hanya menggunakan maklumat yang saya perolehi dari user untuk dipaparkan semula ke dalam browser.

Kita boleh bayangkan yang, kita boleh membuat perkiraan, perubahan, sambungan ke pangkalan data, atau apa saja dengan menggunakan maklumat yang diperolehi dari html form ini. Untuk memastikan anda boleh mengatur cara php dengan baik, pastikan anda betul-betul faham dengan bagaimana html form berfungsi.

Selamat mencuba!