Fitur Baru di HTML5 & CSS3

FITUR BARU DI HTML5

Pada bagian ini, Anda akan menemukan beberapa fitur baru yang besar yang HTML5 tawarkan. Salah satu aplikasi untuk melakukan perancangan desain web secara visual adalah Adobe Dreamweaver. Pertama anda akan belajar tentang elemen semantik baru yang bertujuan untuk memberi makna ke berbagai bagian dari suatu halaman Web modern: headers, footers, navigation bars, sidebars, dan sebagainya.

Unsur-unsur semantik baru yang disediakan HTML5 adalah:

1. <article> 
Unsur <article> digunakan untuk mendefinisikan item independen pada halaman yang dapat didistribusikan sendiri, seperti sebuah berita, posting blog, atau komentar.
2. <section>
 Elemen ini merupakan bagian dari sebuah dokumen atau aplikasi, seperti bab atau bagian dari sebuah artikel atau tutorial. Misalnya, bagian Anda baca sekarang bisa dikelilingi oleh elemen <section> di HTML5.
3. <nav>
Ini adalah wadah untuk link navigasi utama pada halaman Web
4. <aside> 
Elemen baru ini dapat digunakan untuk menandai sebuah sidebar atau beberapa konten lainnya yangdianggap agak terpisah untuk konten sekitarnya. Contohnya adalah iklan
5. <hgroup>
Dalam beberapa kasus, halaman, artikel, atau bagian mungkin memerlukan lebih dari satu pos, seperti di mana Anda memiliki judul dan subjudul.
6. <canvas>
Unsur ini adalah salah satu aspek yang paling penting dari HTML5 karena memfasilitasi produksi grafik, permainan interaktif,aplikasi paint, dan grafis lain dengan cepat tanpa memerlukan plug-in eksternal sepertiAdobe Flash.
7. <audio> dan <video> 
Kedua unsur ini memungkinkan Developer Web untuk memasukkan konten multimedia tanpa bergantung padapengguna untuk memiliki browser tambahan plug-in diinstal.

Form web tambahan

Jika Anda telah membuat aplikasi Web sebelumnya, Anda lebih dari mungkin akrab dengan HTML controls form, beberapa yang diimplementasikan menggunakan <input> yang menggunakan elemen. Dalam HTML 4, jenis input berikut didukung:

•button         •checkbox

• file             • hidden

• image         •password

• reset            • radio

• submit        • text

Macam - macam jenis input form baru di HTML 5:

• color           • date                  • datetime

• datetime     •local                  • email

• month         • number           • range

• search         • tel                    • time

• url               • wee

Fitur Baru nya Seperti Apa yang Ada di CSS3?

Bagian ini memperkenalkan Anda dengan fitur baru yang dapat ditemukan di CSS tingkat 3. Seperti termasuk efek bayangan pada teks dan kotak, sudut dibulatkan pada border, danpenggunaan opacity untuk membuat penampilan transparan.

Selector baru di CSS3

Sebuah pemilih CSS3 mengacu pada cara di mana elemen-elemen HTML yang stylish menggunakan style sheet. Misalnya, untuk menempatkan border di sekitar semua elemen <div> Anda menggunakan divselector: div {border: 1px # 000 yang solid;}

Untuk menerapkan warna background untuk semua elemen dengan higlight class Anda menggunakan .highlight: .highlight { background-color: yellow; }

Untuk mengubah lebar dari suatu elemen dengan nilai atribut ID dari myDiv, Anda menggunakan:

#myDiv {width: 250px;}.

Tentu saja, ini penyeleksi dapat dikombinasikan, sehingga untuk memilih semua elemen <div> dengan class highlight, Anda menggunakan div.highlight, atau untuk memilih elemen <div> dengan myDiv ID Anda menggunakan div # myDiv.

New Effect:

• background              • background-clip                • background-origin

• background-size       • border-radius                    • border-image

• border-color             • box-shadow                       • box-sizing

• opacity                     • outline-offset                     • resize

• text-overflow           • text-shadow                       • word-wrap

Layout multicolumn

Dengan layout multicolumn memungkinkan untuk teks yang akan tersebar di sejumlah kolom, seperti yang terdapat pada Majalah atau koran. Hal ini dapat dilakukan dengan dua cara, baik menggunakancolumn-width, di mana Anda menentukan seberapa lebar setiap kolomnya (yang mana jumlah kolom ditentukan oleh ruang yang tersedia untuk wadah), atau menggunakan column-count, di mana Anda menentukan jumlah kolom yang digunakan.

Web font

Font web sebenarnya diusulkan untuk CSS2 dan telah tersedia dalam Microsoft Internet Explorer sejak versi 5.Sekarang anda dapat menggunakan aturan @ font-face untuk menggunakan ttf berlisensi. (TrueType) atau OTF (OpenType). font pada halaman Web Anda. Sebuah contoh dari aturan @ font-face adalah sebagai berikut: @ font-face {font-family: Alexa; src: url ('Alexa.otf');}. Anda sekarang dapat menggunakan font ini dalam aturan sendiri CSS anda, seperti: article p { font-family: Alexa, Arial, Helvetica, sans-serif;}.

New Color

Ada juga fitur baru CSS3, termasuk dukungan untuk warna baru, terutama HSL (Hue, Saturation, Lightness) dan nilai-nilai dua warna dengan alpha propertis-RGBA (Merah, Hijau, Biru, Alpha) dan HSLA (Hue, Saturation, Lightness, Alpha).

• Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.
• Adanya Canvas pada HTML5. Pada versi sebelumnya, untuk bisa memberikan interaksi menggambar di halaman web kita harus memakai applet Java atau Flash. HTML 5 akan memberikan satu opsi tambahan: canvas. Seperti namanya, canvas adalah media yang bisa dicorat-coret langsung. Tidak lagi perlu memuat plugin khusus
• Embed Audio Video Secara Langsung
• Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.
• Integrasi (’inline’) MathML dan SVG dengan doctype yang lebih sederhana.
• Penulisan kode yang lebih efisien.
• Dapat dimengerti oleh browser lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.

Itu adalah fitur baru dari HTML5 dan CSS3

Baca artikel lain nya tentang HTML5 dan CSS3 disini

Fitur Baru di HTML5 & CSS3 2015-01-07T03:27:00+07:00 Rating: 4.5 Diposkan Oleh: Unknown