Memulai Dengan HTML5 / CSS3: Kiat, Etalase, Dan Sampel Pengodean

HTML5 semakin populer dan mulai mengubah seluruh antarmuka web. Bahkan beberapa pengembang web mengutip bahwa elemen HTM5 dan efek visual dapat dibandingkan dengan Flash. Gaya skrip baru mudah dipahami dan kemampuan untuk meningkatkan antarmuka web tidak terbatas. Jadi betapa menariknya HTML5 ini??


Artikel ini dimaksudkan untuk memberi pembaca wawasan tentang apa yang harus Anda ketahui tentang HTML5 dan yang paling penting beberapa tips & trik menciptakan halaman HTML5 yang ringan, menarik, dan interaktif.

1. Dasar dalam HTML5

HTML5

Sebelum kita mulai lebih jauh dari topik ini dalam HTML5, ada baiknya memeriksa browser Anda saat ini terlebih dahulu. Karena banyak browser masih dalam mode pengembangan (perangkat tambahan untuk mengakomodasi HTML5), beberapa fitur yang disebutkan di sini mungkin tidak dapat didukung.

Berikut tips cepat untuk memeriksa kompatibilitas browser.

Untuk memahami lebih lanjut batasan browser tertentu, Anda dapat merujuk sini.

2. Efek Teks – Menambahkan efek teks bayangan dan lanjut dalam HTML5

Efek teks dalam HTML5

Efek bayangan dasar pada teks

Ini adalah kode satu string paling sederhana yang mengubah informasi utama Anda menjadi teks yang tampak keren. Jangan pernah meremehkan efek bayangan. Untuk membuat efek yang mirip ini membutuhkan perancang web untuk melalui beberapa langkah mengedit gambar di Photoshop. Dan sekarang yang diperlukan hanyalah satu baris kode. Jarak bayangan, warna dapat diubah ke isi hati Anda.

Pengodean sampel

#shadow h1 {
text-shadow: 0px 1px 1px rgba (0,0,0, .2);
}

Teks di muka efek seperti api

Kiat berikutnya adalah menunjukkan kepada Anda bagaimana pengkodean HTML5 dapat diubah menjadi teks yang tampak lebih keren. Jika Anda cukup bereksperimen, atau menemukan contoh lain, kemungkinan menyesuaikan efek tidak terbatas. Catatan: contoh ini tidak dibuat oleh perangkat lunak pengedit gambar apa pun. Hanya kode biasa dalam HTML5.

Pengodean sampel

#fire h1 {
perataan teks: tengah;
margin: 200px otomatis;
font-family: "League-Gothic", Kurir;
ukuran font: 200px; text-transform: huruf besar;
warna: #fff;
text-shadow: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 97716 80px # 451b0e;
}

Contoh bagus lainnya: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Pojok bulat di HTML5

Pojok Bulat dalam HTML5

Mendesain tata letak halaman web dalam HTML5 tidak pernah semudah ini sejak diperkenalkannya CSS. Dan sekarang Anda bahkan dapat memiliki sudut bulat elemen tata letak Anda! Bayangkan ini; tidak ada lagi gambar latar yang mengiris, tidak ada lagi fragmen gambar yang berantakan. Ini akan membawa banyak sorakan kepada para desainer web di luar sana.

Pengodean sampel

div {
perbatasan: 2px solid # 434343;
padding: 10px;
latar belakang: # e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
lebar: 500px;
}

Catatan: Moz berarti Mozilla, dan webkit untuk Safari dan Chrome.

Contoh bagus lainnya: http://fjd1.com/roundcorner.html

4. Scalable Vector Graphic (SVG) dalam HTML5

Tutorial, panduan, dan contoh HTML 5

Scalable Vector Graphic atau biasa dikenal sebagai (SVG) adalah grafik vektor 2 Dimensi yang didefinisikan dalam file teks XML. Dengan kata lain, karena DNA mereka didasarkan pada file teks XML, mereka dapat dibuat atau diedit di platform web. Yang juga berarti, bisa ada skala dengan mudah, dan mesin pencari dapat membaca dan memahami gambar.

Kode sampel

Contoh hebat lainnya:

5. Menyemat file film dalam HTML5

Video dalam HTML5

Berikut ini bagian lain yang menarik untuk memamerkan kemampuan HTML5. Banyak video online biasanya disajikan kepada pengguna web dalam bentuk Flash. Sampai saat ini, menanamkan video dalam HTML5 perlahan-lahan mendapatkan momentum (YouTube adalah contoh yang baik) dan Flash perlahan-lahan kehilangan daya tariknya. Kenapa begitu? Pengguna seluler. Jika Anda ingin video Anda dapat diputar di ponsel iPhone dan Android, HTML5 adalah cara untuk maju.

Untuk menyematkan video, Anda harus tahu ada 3 format saat ini didukung oleh browser yang berbeda; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Kode sampel

Contoh bagus lainnya: https://www.html5rocks.com/en/tutorials/video/basics/

6. Presentasi Slide dalam HTML5

Tutorial, panduan, dan contoh HTML 5

Powerpoint telah menjadi nama sinonim yang dikaitkan dengan presentasi slide. Tetapi mengapa membatasi diri Anda dengan presentasi offline di mana Anda dapat membuat slide yang dimaksudkan untuk audiens web? HTML5 datang untuk menyelamatkan dalam membuat slide presentasi yang sangat kuat, lengkap dengan menu transisi dan navigasi. Bagian terbaiknya adalah, Anda bahkan dapat menerapkan transformasi 3D ke presentasi Anda.

Kode sampel

sebelum {
transisi: semua kemudahan masuk;
}

pra: arahkan kursor {
warna latar: # F2F5FE;
warna perbatasan: hitam;
}

div {
transform: rotate3d (1,1,0, 45deg);
}

Contoh hebat lainnya:

7. Konten yang Dapat Diedit dalam HTML5

Tutorial, panduan, dan contoh HTML 5

Teks statis sangat kuno di zaman di mana fleksibilitas dan dinamika menguasai dunia. Di HTML5, Anda dapat menentukan area teks yang dapat diedit oleh pengguna web tanpa editor teks.

Kode sampel

Konten ini dapat diedit!

Contoh bagus lainnya: http://html5demos.com/contenteditable

8. Kanvas Web Interaktif dalam HTML5

Tutorial, panduan, dan contoh HTML 5

Selain SVG dalam HTML5, kanvas adalah hal terbaik berikutnya yang pernah terjadi pada web. Canvas memungkinkan rendering bentuk 2 dimensi yang membawa interaktivitas ke level penuh tanpa bantuan dari Flash.

Namun demikian, pengkodean sederhana dalam HTML5 yang menciptakan interaksi animasi luar biasa patut disebutkan di sini.

Contoh bagus lainnya: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Seret dan Jatuhkan dalam HTML5

Tutorial, panduan, dan contoh HTML 5

Seret dan lepas (kadang-kadang dikenal sebagai DnD) adalah fitur keren lain yang tersedia untuk HTML5. Contoh yang bagus adalah implementasi oleh Google di Gmail mereka. Jika Anda menggunakan salah satu browser yang didukung HTML5, Anda cukup menyeret file dari komputer Anda dan jatuh ke jendela pesan penulisan. Ini akan secara otomatis ditambahkan sebagai lampiran. Betapa kerennya itu?

Kode sampel (DnD asli)

document.addEventListener (‘dragstart’, function (event) {
event.dataTransfer.setData (‘text’, ‘Customized text’);
event.dataTransfer.effectAllowed = ‘copy’;
}, Salah);

Contoh bagus lainnya: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Grafik Data CSS Murni dalam HTML5

Tutorial, panduan, dan contoh HTML 5

Sebelum HTML5, juga tidak mungkin membuat bagan yang rapi dengan hanya menggunakan pengkodean dalam HTML. Selain itu, mengubah nilai data dan untuk mencerminkan dalam bagan bukanlah tugas yang mudah. Sekali lagi, HTML5 untuk menyelamatkan. Bersama dengan CSS, Anda dapat membuat bagan yang benar-benar indah yang membuat Microsoft Excel malu. Kode-kode itu sederhana, dan yang perlu Anda lakukan hanyalah menghabiskan waktu untuk menyesuaikan warna dan efek yang sempurna untuk bagan Anda.

Contoh bagus lainnya: http://cssglobe.com/pure-css-data-chart/

Tidak cukup HTML 5?

Kami juga! Ada lebih banyak tentang topik ini, periksa.

* 30 Contoh Situs Web HTML 5 yang Sangat Keren
* Memulai dengan HTML 5
* Harus Membaca Tutorial HTML 5 pada tahun 2012
* Belajar HTML 5: 10 Harus Membaca Pelajaran

Lihat juga  Kursus kilat HTML 5 ini oleh Robin Nixon. Robin Nixon adalah penulis Learning PHP, MySQL, dan JavaScript; kursus ini mencakup hampir semua hal yang perlu diketahui oleh pemula di HTML5 – termasuk pengkodean HTML dasar, kanvas HTML5 untuk menggambar, geolokasi, penyimpanan lokal, serta audio dan video HTML5.

Artikel asli pertama kali diterbitkan pada Blog WHSR; sekarang dikelola dan diperbarui oleh staf BuildThis.io.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map