Tag - tag baru html5 dan css3 apa?

Bahasa pemrograman web di 2011 ini bakalan lebih menarik dengan hadirnya html5 dan css3. Yang paling sangat di tunggu tunggu oleh saya mungkin juga pengembang pemrograman web, diantara programming web htmllah yang sangat kelihatan tidak terurus, kurang lebih 12 tahun tidak mengalami perubahan. Untuk lebih pahamnya lagi tengok tulisan di bawah ini.


HTML5


Setelah standar html 4.01 di 1999 menjadi bahasa standar baru. seiring perkembangan teknologi yang semakin pesat maka lahirlah varian baru dari html4.01 menjadi html5 di tahun 2011 ini, setelah beberapa tahun tidak memperbaharui versi kini w3c (World Wide Web Consortium) dan WHATWG ( Web Hypertext Application Technology Working Group ) yang dulu bekerja sama untuk membuat xhtml 2.0 pada 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Makanya sekarang html5 di perkenalkan, dengan html5 nih kabarnya kita bisa membuat animasi video selayaknya flash, mengeksesuki langsung input, pokoknya lebih baik dari sebelumnya. Dengan adanya fitur-fitur tag baru dari html5 itu mungkin saja bisa terjadi sebagai contoh:<tt>,<pre>
Memang standar html 4.01 sudah ada beberapa tag yang mulai di tinggalkan dengan adanya css dan java script. sebagai contoh tag:

  • Penambahan unsur atau tag baru, seperti : <article>, <aside>, <command>, <details>, <summary>, dll. (yang akan saya jelaskan di postingan selanjutnya, hhe),
  • Standar baru untuk elemen Media, seperti : <audio>, <video>, & <source>,
  • Tag <canvas>, menggunakan Javascript untuk menggambar pada halaman web,
  • Tag baru pada <form>, HTML5 memberikan unsur-unsur bentuk yang lebih baik, dengan fungsionalitas yang lebih baik pulaseperti : <datalist>, <keygen>, & <output>,
  • Nilai baru atribut untuk tipe Input, sebuah atribut elemen input yang memiliki nilai-nilai baru, untuk kontrol input yang lebih baik sebelum mengirimnya ke server.

CSS3


Kabarnya adalagi varian css3 yang sedang di rilis dan ada beberapa yang sudah di pakai bareng templates blogspot loh! Setelah versi css2.1 terciptalah css3 yang lebih baik. Dengan CSS3 ini kita bisa lebih mempercantik blog kita seperti membuat bayangan gambar, membuat bayangan teks, membuat efek blur, Membuat background dan tabel gradient dll. Ini dia sedikit element baru dari versi css3.

Borders
border-color
border-image
border-radius
box-shadow

Backgrounds
background-origin and background-clip
background-size
multiple backgrounds

Color
HSL colors
HSLA colors
opacity
RGBA colors

Text effects
text-shadow
text-overflow
word-wrap

User-interface
box-sizing
resize
outline
nav-top, nav-right, nav-bottom, nav-left

Selectors
attribute selectors

Basic box model
overflow-x, overflow-y

Generated Content
content

Other modules
media queries
multi-column layout

Web fonts
speech

Walau mayoritas web designer di seluruh dunia sangat antusias dengan CSS3 ini, penting juga untuk diketahui, sekarang hanya beberapa browser saja yang sudah mensupport CSS3 yaitu browser dengan engine webkit (safari, chrome) dan mozilla (firefox, flock).

Sedikit tutorial membuat gambar border bershadow dengan css3.

Copy pastekan code dhtml di bawah ini di notepad.
<html>
<head>
<title>CSS3 Image Shadow </title>
<style>
img.shadows {
background:#FFFFFF;
border:1px solid #000;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0.1,0 .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0.1, 0,0 .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0.1, 0, 0.5);
box-shadow: 1px 1px 5px rgba(0, 0.1, 0, .5);
}
</style>

<head>
<body>
<img src="http://i974.photobucket.com/albums/ae223/srihartiningsih1/38922_144318422258521_100000410932876_309006_4363054_n.jpg" class="shadows">
</body>
</html>

ingat pada atribut src="gantigambaranda.jpeg" simpan dengan ekstensi nama.html dan pada type files ganti all files. Ada juga border yang jadi image seperti element

border-width: 27px;
-moz-border-image: url(images/border.png) 27 repeat;
-webkit-border-image: url(images/border.png) 27 repeat;
border-image: url(images/border.png) 27 repeat;

shadows pada bayangan samping kanan dan bawah saja.

background:#FFF;
border:1px solid #000;
width:500px;
text-align:center;
height: 100px;
-webkit-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-moz-border-radius:15px 0px 15px 0px;
-webkit-border-radius:15px;
padding: 5px 5px 5px 5px;

hasilnya:
image by java.co.id
Sekian kalian dapat belajar lebig dalam di website www.css3.info
referensi dari:
adnipassionart.wordpress.com:HTML5, Standar Halaman Web untuk Generasi Selanjutnya.
javan.co.id:
Berkenalan dengan generasi penerus CSS yaitu CSS3 (Part I).
DOWNLOADS
Next PostPosting Lebih Baru Previous PostPosting Lama Beranda
Posting Komentar