Neuronworks Blog, WebMethods, Oracle, Bea, Java Dev2Dev, Arch2Arch Neuronworks Make IT Easy, Let’s Play the Game » html & css

Archive

Archive for the ‘html & css’ Category

Border-radius: create rounded corners with CSS3!

January 30th, 2009
No comments

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. This is an example:

Mozilla/Firefox and Safari 3 users should see a nicely rounded box, with a nicely rounded border.

The code for this example above is actually quite simple:

<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >

These different corners can also each be handled on their own, Mozilla has other names for the feature than the spec says it should have though, as it has f.i. -moz-border-radius-topright as opposed to -webkit-border-top-right-radius:

Mozilla/Firefox and Safari 3 users should see a box with a rounded left upper corner.
Mozilla/Firefox and Safari 3 users should see a box with a rounded right upper corner.
Mozilla/Firefox and Safari 3 users should see a box with a rounded left lower corner.
Mozilla/Firefox and Safari 3 users should see a box with a rounded right lower corner.

These are handled by / should be handled by:

  • -moz-border-radius-topleft / -webkit-border-top-left-radius
  • -moz-border-radius-topright / -webkit-border-top-right-radius
  • -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
  • -moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Sumber : http://www.css3.info

html & css

Redesigning with HTML 5 and WAI-ARIA

January 30th, 2009
423 comments

For the past few months, I’ve been lucky enough to tour places like Indonesia talking about cutting-edge web development languages like HTML 5 and WAI-ARIA.

My new year resolution was to actually start using them, so made an HTML 5 test page to show that at least some those useful new elements can be used now.

But a test page isn’t real world, so the logical next step was to redesign this site to use the new technologies. While my blog is a set of old-school static documents with none of the “Web 2.0? Ajax sexiness that would best show off these technologies, it has one thing in its favour: it’s five years worth of often-dodgy markup (I was learning!) with 3000 or so comments, some containing unsanitised code. It’s a reasonable road-test for HTML 5, which was specifically designed for backwards compatibility. This is still a test; validation errors are part of that, although if you see any post with broken layout or unreadble content, please let me know. Read more…

html & css

XHTML yang valid di W3C

January 29th, 2009
3 comments

Berikut ini code xhtml yg valid di w3c :

  • Penulisan tag harus huruf kecil, contoh: <a>,<p>, <br />.
  • Setiap tag <> yang tanpa ada akhiran </> selalu menggunakan “/” pada setiap akhir sebelum “>”.
    Contoh: <input type=”text” id=”" name=”" />, <br />.
  • Untuk file flash tidak lagi menggunakan <embed></embed>, cukup menulikan seperti:
    <object width=“145″ height=“146″ type=“application/x-shockwave-flash” data=“file.swf”>
    <param name=“movie” value=“file.swf” />
    <param name=“quality” value=“high” />
    <param name=“wmode” value=“transparent” />
    </object>
  • Pada awal code html  :
    <!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”>
  • Selalu gunakan petik ganda (“”).

Demikian kurang lebih sedikit tentang xhtml, klo ada kurang maafin aja namanya jg masih belajar, he he he.

html & css