Mulakan Dengan HTML5 / CSS3: Petua, Pameran, dan Contoh Pengekodan

HTML5 semakin popular dan mula mengembangkan keseluruhan antara muka web. Bahkan sebilangan pembangun web memetik bahawa elemen dan kesan visual HTM5 setanding dengan Flash. Gaya skrip baru mudah difahami dan keupayaan untuk meningkatkan antara muka web tidak terbatas. Oleh itu, betapa menariknya HTML5 ini?


Artikel ini bertujuan untuk memberi gambaran kepada pembaca mengenai perkara yang harus anda ketahui mengenai HTML5 dan yang paling penting adalah beberapa petua & helah untuk membuat halaman HTML5 yang ringan, menarik, dan interaktif.

1. Asas dalam HTML5

HTML5

Sebelum kita memulakan lebih jauh topik ini dalam HTML5, ada baiknya anda memeriksa penyemak imbas semasa anda terlebih dahulu. Oleh kerana banyak penyemak imbas masih dalam mod pengembangan (peningkatan untuk mengakomodasi HTML5), beberapa ciri yang disebutkan di sini mungkin tidak dapat disokong.

Inilah petua ringkas untuk memeriksa keserasian penyemak imbas.

Untuk memahami lebih jauh had penyemak imbas tertentu, anda boleh merujuknya di sini.

2. Kesan Teks – Menambah bayangan dan kesan teks pendahuluan dalam HTML5

Kesan teks dalam HTML5

Kesan bayangan asas pada teks

Ini adalah satu kod rentetan termudah yang mengubah tajuk biasa anda menjadi teks yang menarik. Jangan sekali-kali memandang rendah kesan bayangan. Untuk membuat kesan yang serupa ini memerlukan pereka web untuk melalui beberapa langkah penyuntingan gambar di Photoshop. Dan sekarang yang diperlukan hanyalah satu baris kod. Jarak bayangan, warna dapat diubah menjadi isi hati anda.

Sampel pengekodan

# bayangan h1 {
bayangan teks: 0px 1px 1px rgba (0,0,0, .2);
}

Teks mengenai kesan seperti api

Petua seterusnya adalah menunjukkan kepada anda bagaimana pengkodan HTML5 dapat diubah menjadi teks yang lebih keren. Sekiranya anda cukup bereksperimen, atau menemui contoh lain, kemungkinan menyesuaikan kesannya tidak akan habis. Catatan: contoh ini tidak dibuat oleh perisian penyuntingan gambar. Hanya kod biasa dalam HTML5.

Sampel pengekodan

# api h1 {
text-align: tengah;
margin: 200px automatik;
keluarga fon: "Liga-Gothic", Kurier;
saiz fon: 200px; text-transform: huruf besar;
warna: #fff;
teks-bayangan: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10px 80px # 451b0e;
}

Contoh hebat lain: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Sudut bulat dalam HTML5

Sudut Bulat dalam HTML5

Menggayakan susun atur laman web dalam HTML5 tidak pernah semudah ini sejak diperkenalkannya CSS. Dan sekarang anda boleh mempunyai sudut bulat elemen susun atur anda! Bayangkan ini; tidak ada lagi gambar latar yang mengiris, tidak ada lagi serpihan gambar yang tidak kemas. Ini akan memberi banyak sorakan kepada pereka web di luar sana.

Sampel pengekodan

div {
sempadan: pepejal 2px # 434343;
pembalut: 10px;
latar belakang: # e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
lebar: 500px;
}

Catatan: Moz bermaksud Mozilla, dan webkit adalah untuk Safari dan Chrome.

Contoh hebat lain: http://fjd1.com/roundcorner.html

4. Grafik Vektor Berskala (SVG) dalam HTML5

Tutorial, panduan dan sampel HTML 5

Grafik Vektor Berskala atau biasa dikenal sebagai (SVG) adalah grafik vektor 2-Dimensi yang ditentukan dalam fail teks XML. Dengan kata lain, kerana DNA mereka didasarkan pada fail teks XML, mereka dapat dibuat atau diedit di platform web. Yang juga bermaksud, skala dapat dengan mudah, dan mesin pencari dapat membaca dan memahami gambar.

Contoh kod

Contoh hebat lain:

5. Menyematkan fail filem dalam HTML5

Video dalam HTML5

Inilah bahagian lain yang menarik untuk mempamerkan kemampuan HTML5. Sebilangan besar video dalam talian biasanya disajikan kepada pengguna web dalam bentuk Flash. Sehingga baru-baru ini, penyematan video dalam HTML5 perlahan-lahan mendapat momentum (YouTube adalah contoh yang baik) dan Flash perlahan-lahan kehilangan daya tarikannya. Mengapa begitu? Pengguna mudah alih. Sekiranya anda mahu video anda dapat dimainkan di kedua-dua telefon iPhone dan Android, HTML5 adalah cara untuk terus maju.

Untuk membenamkan video, anda perlu mengetahui bahawa terdapat 3 format yang disokong oleh penyemak imbas yang berbeza; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Contoh kod

Contoh hebat lain: https://www.html5rocks.com/en/tutorials/video/basics/

6. Persembahan Slaid dalam HTML5

Tutorial, panduan dan sampel HTML 5

Powerpoint telah menjadi sebutan sinonim dengan persembahan slaid. Tetapi mengapa membatasi diri dengan persembahan luar talian di mana anda boleh membuat slaid yang dimaksudkan untuk khalayak web? HTML5 berjaya menyelamatkan slaid persembahan yang sangat hebat, lengkap dengan menu peralihan dan navigasi. Bahagian yang terbaik adalah, anda juga boleh menggunakan transformasi 3D pada persembahan anda.

Contoh kod

pra {
peralihan: semua kemudahan 1s;
}

pra: berlegar {
warna latar: # F2F5FE;
warna sempadan: hitam;
}

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

Contoh hebat lain:

7. Kandungan yang dapat diedit dalam HTML5

Tutorial, panduan dan sampel HTML 5

Teks statik begitu lama di zaman di mana fleksibiliti dan dinamik menguasai dunia. Dalam HTML5, anda dapat menentukan kawasan teks yang dapat diedit oleh pengguna web tanpa penyunting teks.

Contoh kod

Kandungan ini boleh diedit!

Contoh hebat lain: http://html5demos.com/contenteditable

8. Kanvas Web Interaktif dalam HTML5

Tutorial, panduan dan sampel HTML 5

Selain SVG dalam HTML5, kanvas adalah perkara terbaik seterusnya yang pernah berlaku di web. Kanvas membolehkan rendering bentuk 2 dimensi yang membawa interaktiviti ke tahap keseluruhan tanpa bantuan Flash.

Walaupun begitu, pengekodan ringkas dalam HTML5 yang mewujudkan interaksi animasi yang luar biasa perlu disebutkan di sini.

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

9. Seret dan Lepas dalam HTML5

Tutorial, panduan dan sampel HTML 5

Seret dan lepas (kadang-kadang dikenali sebagai DnD) adalah satu lagi ciri menarik yang tersedia untuk HTML5. Contoh yang baik ialah pelaksanaan oleh Google di Gmail mereka. Sekiranya anda menggunakan penyemak imbas yang disokong HTML5, anda boleh menyeret fail dari komputer anda dan turun ke tetingkap tulis. Secara automatik ia akan ditambah sebagai lampiran. Betapa hebatnya itu?

Contoh kod (DnD asli)

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

Contoh hebat lain: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Carta Data CSS tulen dalam HTML5

Tutorial, panduan dan sampel HTML 5

Sebelum HTML5, mustahil untuk membuat carta rapi dengan hanya menggunakan pengekodan dalam HTML. Selanjutnya, mengubah nilai data dan untuk menggambarkan dalam carta bukanlah tugas yang mudah. Sekali lagi, HTML5 untuk menyelamatkan. Bersama dengan CSS, anda boleh membuat carta yang sangat indah yang memalukan Microsoft Excel. Kodnya mudah, dan yang perlu anda lakukan ialah meluangkan masa untuk menyesuaikan warna dan kesan yang sempurna untuk carta anda.

Contoh hebat lain: http://cssglobe.com/pure-css-data-chart/

Tidak mencukupi HTML 5?

Begitu juga kita! Inilah topik lebih lanjut, lihat mereka.

* 30 Contoh Laman Web HTML 5 yang Sangat Hebat
* Bermula dengan HTML 5
* Mesti Membaca Tutorial HTML 5 pada tahun 2012
* Belajar HTML 5: 10 Mesti Membaca Pelajaran

Juga, periksa  kursus kemalangan HTML 5 ini oleh Robin Nixon. Robin Nixon adalah pengarang Pembelajaran PHP, MySQL, dan JavaScript; kursus ini merangkumi hampir semua perkara yang perlu diketahui oleh pemula dalam HTML5 – termasuk pengkodan HTML asas, kanvas HTML5 untuk melukis, geolokasi, penyimpanan tempatan, serta audio dan video HTML5.

Artikel asal pertama kali diterbitkan pada Blog WHSR; kini dikendalikan dan dikemas kini oleh kakitangan 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