Wink-wink
Sekarang kita fokus nak buat kotak identiti, atau lebih dikenali kotak sendiri yang meletakan butiran tertentu tentang kita.. bagi aku, benda ni rasanya memainkan peranan penting dalam membantu memperlihatkan personal information yang sedikit sebanyak membantu beliau dalam apa jua bentuk kehendak yang dimahukan oleh seseorang..

baiklah sebenarnya terlalu banyak benda,cara dan kaedah  membuat kotak identiti ni, semuanya bergantung kepada kebolehan individu tu sendiri, samada  mengunakan table HTML,  Css, javascript, Flasha ataupun dalam bentuk gambar.




Baiklah ini merupakan kod paling biasa ditemui dalam HTML dan begitu mudah untuk dihasilkan..

Table







<table width="auto" height="71"><span class="Apple-style-span" style="color: red;">border="1"</span>&gt;
<tbody>
<tr>
<td rowspan="2" style="padding: 5px;" valign="middle" width="24%"><img apple-style-span="" color="#0000ff" height="100" src="&lt;font class=" width="100" /><b>gambar anda.jpg</b>"/&gt;</td>
<td align="left" height="23" width="76%"><span class="Apple-style-span" style="color: blue;"><b>Nama</b></span></td>
</tr>

<tr>
<td align="left" valign="top"><span class="Apple-style-span" style="color: blue;"><b>Kandungan anda...</b></span></td>
</tr>
</tbody></table>


border='1' , letakan nilai kosong jika sedara nak buat bingkai table tu..
gambar anda.jpg , masukan gambar anda, paling disyorkan adalah 100x100
width="auto" , kelebaran table tu sendiri mengikut lebar post sedara, sedara boleh tetapkan sendiri 500px, 450px.. atau lain-lain.

TRY IT YOURSELF >>

Boleh letakan dibawah artikel, atau mana-mana tempat yang dirasakan sesuai...


CSS


Yang khas buat pembaca yang arif dengan HTML..

Pss.. minat aku terhadap CSS semakin mendalam.. dan aku sangat menyukainya.., sekarang sudah keluar CSS 3.0, dan kalau ada yang bertanya apa itu CSS? boleh baca sedikit info kat bawah ni yang dipetik dari w3school.

CSS
  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save a lot of work
  • External Style Sheets are stored in CSS files

Okey.. sekarang kita nak bercakap pasal Hover.. mouse hover, atau pointer mouse terhadap satu objek yang mendatangkan kesan, contoh paling senang bila kita halakan mouse pada tulisan ni, kita akan terus naik keatas kerana menerima maklum balas. jadi dia akan hasilkan hover.. dalam html, Link kebiasaanya akan memaparkan underline sebaik mouse dihalakan.. tetapi bagaimana pula kalau tiada link? macam mana nak halakan pada sesuatu objek supaya iainya mendatangkan tindakbalas?

CSS
<style>
div.hoverme, div.off {
background-color: #B4B4B4;
}
div.hoverme:hover, div.on {
background-color: #FFFF44;
}
</style>


CLASS
<div class="hoverme">
using :hover</div>

<div class="off" onmouseout="this.className='off';" onmouseover="this.className='on';">
Tukar Class kepada javascript</div>



Result

using :hover
Tukar Class kepada Javascript

Ini CSS Hover yang standard, yang biasa kita jumpa a:link {color:#FF0000} /* unvisited link */ a:visited {color:#00FF00} /* visited link */ a:hover {color:#FF00FF} /* mouse over link */ a:active {color:#0000FF} /* selected link */ Ok, itu saje Table dan Hover baru tuk ari ni.. chill~ -munix
recent post tengah buat..

Assalamualaikum, and Hi!
I love played with CSS and sometimes I do some Creative media stuff, I hope you enjoy this post, click like, tweet and share it with ur friends too. Don't forget to drop some comment below.
Readmore Here..

Jangan lupa vote ^ komen yang terbaik ya :D

Phewww~

like this

Terjah Top Post Minggu nie

...


Bloggers.com - Meet Millions Bloggers

Bloggers.com - Meet Millions Bloggers

PageRank

Design & Coding by : diden | 70% CSS Nak copy boleh, asal tinggalkan kredit |