Mulakan Dengan HTML5

Mulakan Dengan HTML5
Panduan ini tersedia untuk dimuat turun sebagai PDF percuma. Muat turun fail ini sekarang . Jangan ragu untuk menyalin dan berkongsi ini dengan rakan dan keluarga anda.

Isi kandungan

§1. Pengenalan





§2 – Penanda Semantik



§3 – Bentuk





§4 - Sederhana

§5 – CSS3 Transformasi Dan Animasi



§6 – Cukup Javascript

§7 – Kanvas Kreatif



§8 – Di mana Seterusnya?

1. Pengenalan

Anda pernah mendengarnya: HTML5. Semua orang menggunakannya. Ini digembar-gemborkan sebagai penyelamat Internet, yang memungkinkan orang membuat laman web yang kaya dan menarik tanpa menggunakan Flash dan Shockwave.



Tetapi apa sebenarnya?

Itu bukan soalan yang mudah dijawab. Dalam tutorial HTML5 ini, kami akan cuba memberikan beberapa jawapan. HTML5 digunakan untuk menggambarkan sekumpulan perkara yang sangat pelbagai. Ini adalah standard untuk menulis laman web. Ini adalah koleksi API. Ini adalah kaedah baru untuk menambahkan interaktiviti ke laman web.

HTML5 adalah semua itu dan banyak lagi. Jadi buku apa ini?

Dalam tutorial HTML5 ini, saya akan menganggap bahawa pada suatu ketika anda telah menyentuh HTML dan CSS. Mungkin anda telah membuat tema Wordpress anda sendiri, atau mengedit susun atur MySpace pada waktu yang sama. Mungkin anda pernah membaca panduan XHTML MakeUseOf sendiri. Intinya adalah, saya mengandaikan bahawa anda mengetahui jalan keluar dari laman web dan apa yang kita bincangkan dalam panduan ini tidak akan terlalu asing bagi anda.

Tujuan panduan ini bukan untuk mengajar anda keseluruhan HTML5. Itu sepenuhnya tidak termasuk dalam skop buku ini. Tujuannya adalah untuk memberikan pengenalan lembut mengenai teknologi web baru yang menakjubkan ini, dan untuk menunjukkan kepada anda beberapa cara menarik untuk memasukkannya ke dalam laman web anda.

Mengapa anda mahu belajar HTML5?

Ini soalan yang adil. Dalam dunia telefon pintar dan aplikasi, adakah sangat penting untuk belajar bagaimana memprogram laman web?

Baik, percaya atau tidak, sangat biasa menulis aplikasi telefon pintar menggunakan teknologi HTML5. Sehingga baru-baru ini, aplikasi Facebook untuk Android ditulis menggunakan HTML5, CSS dan Javascript.

Blackberry adalah syarikat besar lain yang sangat berminat dengan HTML5. Ini jelas dalam iterasi terbaru sistem operasi mudah alih mereka, Blackberry OS 10, di mana mereka secara aktif mendorong pemaju untuk mengembangkan aplikasi untuk telefon mereka menggunakan teknologi web.

Telefon pintar Firefox OS baru dijalankan sepenuhnya pada aplikasi HTML5 juga. Pengetahuan mengenai HTML5 sangat penting dalam iklim telefon pintar masa kini.

Di samping itu, belajar HTML5 baik untuk kerjaya anda. Tidak percaya? Menurut Indeed.com , gaji tahunan purata untuk pembangun HTML5 adalah $ 89,000. Dengan semakin banyak syarikat mengubah laman web mereka untuk menggunakan teknologi HTML5, pembangun yang mengetahui timbunan HTML5 dicari - kini lebih daripada sebelumnya.

1.1 Prasyarat

Tutorial HTML5 ini mengandaikan beberapa perkara. Pertama, ini mengandaikan bahawa anda tahu bagaimana laman web berfungsi, dan anda tahu bagaimana membuat laman web asas. Anda harus dapat menggabungkan beberapa elemen HTML bersama-sama dan dapat menyampaikan beberapa maklumat dalam penyemak imbas web. Melihat dan

tag tidak terlalu menakutkan, dan anda tidak takut tangan anda kotor dalam beberapa kod sumber.

Kedua, panduan ini menganggap anda tahu apa itu CSS dan bagaimana ia berfungsi. Kami tidak mengharapkan anda menjadi genius reka bentuk, dan anda juga tidak akan mengetahui keseluruhan spesifikasi CSS dari belakang tangan anda. Anda harus, bagaimanapun, dapat menerapkan gaya ke elemen di halaman web, dapat menghubungkan ke file CSS dan mengetahui perbedaan antara ID dan kelas dan cara menerapkan gaya pada masing-masing.

Sekiranya anda menggaru kepala di atas, jangan risau. Salah satu perkara terbaik mengenai HTML dan CSS adalah bahawa ia sangat mudah. Sebenarnya, MakeUseOf mempunyai panduan XHTML yang luar biasa yang akan membawa anda ke kelajuan dengan sangat pantas.

Setelah membaca panduan itu, anda mungkin juga ingin melihat artikel berikut:

Anda juga memerlukan penyunting teks dan penyemak imbas moden. Sebarang versi Internet Explorer yang lebih lama daripada IE 9 dan beberapa versi Safari, Chrome dan Firefox yang lebih lama akan menghadapi banyak ciri yang merupakan sebahagian daripada HTML5 dan mungkin menghalang anda daripada mengikuti panduan ini.

Hasilnya, anda digalakkan memuat turun penyemak imbas moden. Saya mengesyorkan Google Chrome, dan saya akan menggunakannya dalam setiap contoh.

Di luar itu, semua yang anda perlukan adalah kesediaan untuk belajar. Oh, dan penyunting teks.

1.2 Penyunting Teks Untuk Pembangunan Web

Penyunting teks anda adalah yang akan anda gunakan untuk menulis kod anda. Anda mungkin tertanya-tanya apa itu penyunting teks.

Baiklah, pertama bukan pemproses kata. Program seperti Microsoft Word dan Apple's Pages sama sekali tidak sesuai untuk pembangunan web. Ini kerana mereka melampirkan maklumat tambahan ke fail HTML, CSS dan Javascript anda yang menyukarkan penyemak imbas web anda untuk membaca.

Editor teks mengeluarkan watak ke dalam fail teks, dan tidak banyak yang lain. Ini memungkinkan anda membuat fail yang tidak memiliki format tambahan, dan dapat disimpan dengan lanjutan pilihan anda.

Komputer anda sudah dilengkapi dengan satu. Sekiranya anda menggunakan PC Windows, maka Notepad adalah penyunting teks yang mungkin anda pasang.

Pada Mac, keadaannya sedikit berbeza. OS X kebetulan dilengkapi dengan empat editor teks yang berbeza. Ini dipanggil Vim, Emacs, Pico dan Nano. Namun, tidak seperti Notepad, semuanya kebetulan bekerja di terminal.

Ini sedikit menakutkan bagi orang yang baru dalam pembangunan web dan tidak boleh digunakan oleh orang yang baru dalam pembangunan perisian. Kami tidak akan menggunakannya dalam panduan ini. Walau bagaimanapun, apabila anda merasa lebih yakin dengan pembangunan perisian dan web, pastinya anda mesti melihat Vim dan Emacs. Mereka berdua adalah penyunting teks yang hebat, dan apabila dikuasai dapat menjimatkan banyak masa.

Di Linux, editor teks lalai berbeza antara pengedaran. Di Ubuntu, kemungkinan Gedit, yang merupakan editor teks yang agak menyenangkan dan tidak terlalu berbeza dengan Notepad.

Walau bagaimanapun, dalam kursus ini kami akan menulis kod kami menggunakan tiga alat yang berbeza.

Yang pertama ialah Teks Sublime 2. Sejujurnya saya tidak dapat mengesyorkan ini. Ia dilengkapi dengan semua perkara yang menjadikan hidup lebih mudah bagi pemaju permulaan. Pertama, kod anda akan lebih mudah dibaca dengan mewarnakan bahagian-bahagian tertentu. Kedua, ia membolehkan anda menukar antara fail dengan mudah dan menguruskan keseluruhan projek fail. Ini sangat sesuai untuk beralih antara fail, dan menyunting beberapa bit kod dengan cepat.

Yang ketiga adalah konsol Javascript yang dibina di dalam Google Chrome. Ini membolehkan kita menulis Javascript dan melihatnya segera dijalankan dan akan digunakan untuk menjelaskan konsep pengaturcaraan asas.

Yang kedua adalah laman web yang bernama Codepen.io. Laman web yang luar biasa ini membolehkan anda membuat kod HTML, CSS dan Javascript di penyemak imbas dan boleh digunakan secara percuma. Ini juga akan membolehkan anda melihat perubahan anda dengan serta-merta.

2. Penanda Semantik

Dalam bab ini, anda akan belajar mengenai Semantik Markup, dan bagaimana mengatur kod anda berdasarkan kandungannya.

Sehingga baru-baru ini, kod HTML umumnya disusun dengan tag. Ini membolehkan anda membuat sekumpulan elemen dan kemudian menerapkan gaya pada elemen tersebut.

Ini berjaya, tetapi ada ruang untuk diperbaiki. Masalah dengan tag adalah tidak semantik. Div sebenarnya tidak bermaksud apa-apa.

Penanda semantik adalah ciri baru dalam HTML5. Ini membawa tag baru, yang berfungsi dengan cara yang sama seperti tag 'div', tetapi untuk menandai bahagian umum halaman.

Jadi, bagaimana mereka berfungsi? Pertimbangkan kod berikut.

Dalam kod ini, kami mempunyai bar navigasi, tajuk dan senarai. Perkara ini tidak terlalu berbeza dengan kebanyakan laman web yang mungkin akan anda kunjungi semasa anda memikirkannya.

berapa umur anda mesti mempunyai akaun paypal

Mari lihat artikel di MakeUseOf. Anda akan melihat bahawa ada bahagian halaman yang disediakan sepenuhnya untuk menavigasi ke artikel lain. Anda juga akan melihat bahawa ada bahagian lain dari halaman yang mengandungi kata-kata yang merupakan artikel. Di bahagian atas halaman, anda akan melihat tajuk yang mengandungi logo MakeUseOf dan beberapa pautan lain.

Apabila anda memikirkannya, banyak laman web mengikuti konvensyen ini. Sebilangan besar laman web mempunyai bahagian yang dikhaskan untuk navigasi. Mereka biasanya mempunyai isi kandungan. Mereka lebih cenderung mempunyai tandukan.

Tanda semantik adalah tag yang membolehkan anda menentukan bahagian laman web yang biasanya terdapat di kebanyakan laman web. Mereka tidak menambah apa-apa ke halaman, tetapi membolehkan anda mengumpulkan tag berdasarkan kandungannya dan menerapkan gaya pada kumpulan tersebut.

Oleh itu, ingatkah kod yang kita ada sebelumnya? Mari lihat dengan beberapa penambahan Semantik.

Seperti yang anda lihat, kodnya lebih senang dibaca. Anda tahu bahagian mana dan tidak ada kesamaran. Ini penting, kerana memudahkan menulis kod yang baik dan bersih. Sekiranya anda pernah memutuskan untuk menjadi pereka web profesional, ini menjadi yang terpenting - anda tidak akan pernah tahu siapa yang akan membaca karya yang anda hasilkan.

Oleh itu, mari lihat beberapa tanda penanda semantik.

2.1 Bahagian

Bahagian adalah tanda yang sangat berguna. Ini digunakan untuk meraih banyak maklumat dan kandungan yang ditandai dengan tajuk atau tajuk. Fikirkan ini seperti bab dalam buku. Bab mempunyai tajuk, dan mungkin juga mengandungi gambar, gambar rajah, grafik dan perkataan. Tag bahagian akan digunakan untuk mengandungi semua itu.

2.2 Perkara

Teg artikel digunakan untuk apa bunyinya; Mengandungi kandungan seperti catatan blog atau berita. Kandungan ini seharusnya dapat terlepas dari blog yang lain dan tetap masuk akal.

2.3 Selain

Teg ini dikhaskan untuk kandungan yang berkaitan dengan, tetapi bukan merupakan bahagian tidak terpisahkan dari laman web. Ini mungkin banyak fakta yang berkaitan dengan berita, atau biografi pengguna di blog.

2.4 Tajuk

Banyak halaman web mempunyai bar di bahagian atas halaman yang mengandungi logo, beberapa maklumat yang berkaitan dengan laman web ini dan mungkin beberapa pautan. Dalam markup Semantik, anda akan menggunakan tag Header untuk mengandungi semua ini.

2.5 Nav

Elemen ini dikhaskan untuk bahagian navigasi laman web anda. Ini akan mengandungi pautan ke laman web lain atau ke halaman lain di laman web. Dalam konteks MakeUseOf, ini boleh menjadi bahagian halaman yang berada di bawah tajuk.

Teg ini dikhaskan untuk bahagian bawah halaman. Di sini, anda boleh meletakkan beberapa maklumat hubungan, maklumat hak cipta, peta atau beberapa pautan ke halaman 'mengenai saya' anda.

2.7 Uji Diri Anda

  • Apa itu Markup Semantik, dan untuk apa ia digunakan?
  • Saya membuat laman web dan saya mahu menggunakan tanda semantik untuk mengandungi biografi mengenai saya. Yang manakah saya gunakan?

3. Bentuk

Sekiranya anda pernah membuat sedikit reka bentuk web, anda mungkin tahu bagaimana membuat bentuk ringkas dalam HTML. Sekiranya anda benar-benar pandai, anda mungkin tahu bagaimana mengambil maklumat yang anda dapat dari borang anda dan bagaimana melakukan sesuatu dengannya, memasukkannya ke dalam pangkalan data.

Bentuk sangat penting. Ini adalah asas bagi kebanyakan perkara yang kita lakukan di Internet. Setiap kali anda membuat kemas kini status di rangkaian sosial kegemaran anda, membeli sesuatu dari Amazon, atau menghantar e-mel, anda mungkin menggunakan borang HTML.

Apa yang mungkin anda tidak tahu ialah cara kita membuat borang telah berubah secara radikal dalam HTML5. Ia juga lebih baik. Dalam bab ini, kita akan melihat beberapa perkara menarik yang boleh anda lakukan sekarang, hanya dengan tanda lama yang jelas.

Jadi, apa yang menarik mengenai cara baru kita dapat menulis borang dalam HTML5? Pertama, anda dapat memastikan bahawa beberapa medan mesti diisi untuk dihantar, hanya dengan menukar markup borang itu sendiri. Di samping itu, anda tidak perlu lagi menulis banyak JavaScript atau PHP untuk melakukan ini. Sangat mudah.

Kedua, anda dapat memastikan bahawa pengguna anda hanya dapat menghantar jenis maklumat tertentu ke borang anda. Oleh itu, andaikan anda mempunyai laman web untuk senarai mel anda dan anda hanya mahu orang dapat menghantar alamat e-mel yang sebenarnya? Anda boleh melakukannya, hanya dengan menggunakan HTML5. Ia sangat hebat.

Ketiga, anda boleh menjadikan borang anda kelihatan lebih baik dengan memberikan ruang letak pada ruang tertentu. Ini akan menjadikan mereka lebih intuitif, kerana anda dapat menunjukkan kepada pengguna contoh apa yang anda harapkan untuk borang.

3.1 Memperbaiki Borang

Oleh itu, mari lihat borang dan lihat bagaimana kita dapat menjadikannya lebih baik.

Borang ini cukup asas. Ia memerlukan nama, e-mel dan warna kegemaran, dan kemudian membolehkan pengguna menyerahkannya. Tidak ada pengesahan maklumat apa yang dimasukkan ke dalamnya, dan tidak ada yang menghalang pengguna untuk menghantar borang ini dengan beberapa medan kosong. Mari ubah semua itu.

Jadi, perkara pertama yang ingin kita lakukan ialah memastikan bahawa medan e-mel hanya mengambil e-mel. Ini memang merupakan tugas yang cukup sukar, kerana anda harus membuat pelbagai jenis kod Regex yang misterius. Baiklah, tidak lagi. Anda hanya perlu menukar jenis input dari 'teks' menjadi 'e-mel'. Apabila anda cuba menghantar borang itu dengan omong kosong, ia akan mengeluh dan mendesak agar anda menghantar e-mel.

3.2 Jenis dan Corak Input

Terdapat jenis input lain, yang anda perlukan. Ini termasuk nombor telefon, alamat web, borang carian, dan juga pemilih warna! Oleh kerana HTML5 terus berkembang, sudah pasti kita akan dapat menentukan lebih banyak jenis input dalam masa terdekat.

Selain itu, untuk perkara seperti nombor telefon yang berbeza-beza bergantung pada kawasan, anda boleh menentukan corak input. Ini dibuat menggunakan sesuatu yang disebut 'Ungkapan Biasa' dan agak rumit, tetapi sangat kuat.

Kami juga ingin memberikan contoh e-mel di bidang kami, jadi pengguna tidak mempunyai keraguan mengenai apa yang harus dia kirimkan. Itu betul-betul mudah dilakukan. Cukup buat atribut baru 'placeholder' dengan alamat e-mel contoh.

Kami akan memastikan bahawa medan 'Warna Kegemaran' kami diperlukan. Pada kurungan sudut terakhir (>) pada teg input E-mel, tuliskan 'wajib'. Itu sahaja. Sekarang, apabila anda cuba menghantar borang anda tanpa nilai, ia akan menghasilkan mesej ralat.

Perkara yang sangat luar biasa mengenai mesej ralat ini ialah pengguna tidak perlu menulisnya atau menulis kod apa pun untuk membuatnya. Anda hanya menukar bidang untuk menjadikannya diperlukan, dan ia hanya berfungsi. Dengan itu, adalah mungkin untuk menyesuaikannya, sekiranya anda mahu.

Itu adalah pengenalan yang sangat singkat mengenai kekuatan borang dalam HTML5. Sekiranya anda ingin membaca lebih lanjut, saya mengesyorkan agar anda mengunjungi pautan ini.

Bacaan lanjut:

  • Trik CSS - Mari tulis markup semantik
  • Doktor HTML5 - Mari Bercakap Tentang Semantik

3.3 Menguji Diri Anda

Hari lahir anda minggu depan, dan anda ingin membuat borang pendaftaran supaya anda tahu berapa banyak kek yang perlu anda buat. Buka editor teks anda dan buat borang dengan bidang berikut.

  • Nama
  • Alamat emel
  • Nombor telefon
  • Alahan

Pastikan bidang nama, e-mel dan nombor telefon adalah wajib, dan bidang E-mel dan Nombor Telefon ditetapkan dengan jenis input 'e-mel' dan 'tel'. Buat placeholder untuk medan alergi dengan nilai 'debunga, telur, quiche'.

Main-main dengan borang. Cuba hantar bidang yang diperlukan sebagai kosong, dan cuba masukkan aksara bukan angka ke dalam medan nombor telefon. Di medan e-mel, masukkan sesuatu yang bukan alamat e-mel. Apa yang berlaku?

4. Rata-rata

Dahulu kala satu-satunya cara di mana anda dapat memasukkan beberapa video atau audio ke dalam laman web adalah dengan menggunakan sesuatu seperti Flash, Shockwave atau SilverLight.

Ini tidak sesuai. Pertama, tidak ada kerangka kerja yang berfungsi dengan baik pada peranti mudah alih. Mereka tidak dilengkapi dengan dunia telefon pintar dan tablet moden.

tulis sepucuk surat kepada penyelesai

Di samping itu, mereka adalah format proprietari. Akibatnya, pengguna Linux dan OS X dapat memperoleh pengalaman tingkat kedua yang cukup baik atau bahkan dihalang untuk menggunakan perkhidmatan media, kerana tidak tersedia untuk platform mereka.

Akhirnya, mereka mempunyai kecenderungan untuk lambat. Sekiranya anda menggunakan komputer yang kurang bertenaga atau lebih tua, anda tidak akan mempunyai pengalaman yang baik untuk menonton video menggunakan kerangka kerja ini. Flash sangat terkenal kerana ini.

4.1 Bagaimana HTML5 Menjadikan Video dan Audio Hebat

HTML5 mengubahnya dengan membenarkan pembangun web memasukkan video dan audio ke dalam laman web mereka dengan hanya beberapa baris kod. Ia berfungsi dengan baik pada peranti mudah alih dan berfungsi pada setiap penyemak imbas web moden.

Hasilnya, syarikat-syarikat besar seperti YouTube, Vimeo dan Netflix memanfaatkan revolusi HTML5. Mengapa anda tidak menyertai mereka?

4.2 Semua Mengenai Codec

Dalam bab ini, anda akan belajar bagaimana menggunakan kekuatan HTML5 untuk memasukkan audio dan video di halaman web anda.

Pertama, saya harus memulakan dengan peringatan. Walaupun anda dapat menggunakan video HTML5 di setiap penyemak imbas web moden, video tersebut tidak berfungsi sama di setiap penyemak imbas web. Codec yang digunakan oleh setiap penyemak imbas berbeza-beza. Di Internet Explorer, anda terhad untuk menggunakan video MP4. Chrome sedikit lebih murah hati dan membolehkan anda menggunakan video WebM, MP4 dan Ogg Theora. Opera sedikit lebih ketat dan hanya membolehkan anda menggunakan video Theora dan WebM.

Hasilnya, anda harus sedikit pandai dengan cara memasukkan video ke laman web anda. Oleh itu, mari kita lihat bagaimana ia berfungsi.

4.3 Bermula Dengan Video

Sebagai permulaan, anda perlu membuat beberapa tag pembuka dan penutup. Di sinilah anda akan memautkan ke fail video anda. Tetapi pertama, anda akan mahu memasang poster. Apa maksudnya?

Jika anda menunggu video anda dimuat, orang yang melayari laman web anda dapat melihat gambar yang berkaitan dengan video tersebut. Untuk melakukannya, berikan tag video anda atribut 'poster' dengan nilai gambar yang ingin anda pautkan. Ia mesti kelihatan seperti ini.

Perkara seterusnya yang ingin kita lakukan ialah membuat fallback. Apakah maksud ini? Jadi, anggap anda menggunakan salah satu penyemak imbas yang lebih tua dan kurang hebat di luar sana. Banyak penyemak imbas lama ini tidak menyokong video HTML5 dan oleh itu tidak dapat memainkan video HTML5. Anda akan mahu meninggalkan mereka mesej yang memberitahu mereka bahawa mereka ingin menaik taraf penyemak imbas mereka dan bahawa sehingga mereka melakukannya, mereka tidak akan dapat menonton video anda.

Untuk melakukannya, anda hanya menulis mesej anda di dalam tag video anda. Tiada perkara lain yang diperlukan. Setelah anda melakukannya, anda akan dibiarkan dengan beberapa kod yang kelihatan seperti ini.

Sekarang, mari tambahkan beberapa video. Saya akan mengujinya di Google Chrome, jadi saya akan memaut ke filem MP4. Untuk melakukannya, saya membuat tag Sumber dan memberikannya atribut src yang mempunyai nilai video yang ingin saya sertakan.

Halaman saya kini siap dibuka di penyemak imbas web saya. Saya telah mengaitkan dengan filem yang sangat besar dan hasilnya, apabila dibuka seseorang hanya dapat melihat posternya.

4.4 Menambah Audio

Audio boleh dimasukkan ke dalam laman web anda dengan cara yang sangat mengingatkan bagaimana kami memasukkan video ke dalam halaman kami.

Pertama, seseorang membuat beberapa tag audio. Tag audio ini mengandungi atribut 'kawalan'. Ini memberikan pengguna yang mengunjungi halaman kemampuan untuk menjeda, memutar mundur dan memajukan audio yang sedang dimainkan.

Kemudian, anda memasukkan tag sumber ke fail MP3 yang ingin anda pautkan. Anda tidak semestinya bimbang dengan keserasian codec. Penyemak imbas web terkini mempunyai kemampuan untuk memainkan audio MP3, walaupun ada baiknya menyertakan fail '.ogg' dan '.wav' - sekiranya berlaku.

Akhirnya, anda boleh membuat penggantian untuk penyemak imbas yang lebih lama. Ini dilakukan dengan cara yang sama di mana anda membuat cadangan untuk video anda.

Hasil akhirnya kelihatan seperti ini.

Apabila anda membuka ini di penyemak imbas web anda, ia akan kelihatan seperti ini.

4.5 Uji Diri Anda

  • Apa tujuan memasang poster di tag video anda?
  • Codec apa yang tidak boleh anda gunakan dalam Internet Explorer?
  • Sekiranya saya mahukan kemampuan menjeda beberapa audio, atribut apa yang akan anda tambahkan pada tag 'audio' anda?

Bacaan lanjut:

5. Transformasi Dan Animasi CSS3

CSS secara tradisional digunakan untuk menangani susun atur dan reka bentuk laman web. Ini masih benar, tetapi dalam lelaran terbarunya, ia telah memperoleh kemampuan untuk menangani animasi dan transformasi elemen dan gambar.

Orang telah melakukan beberapa perkara yang luar biasa dengan CSS3, dari membuat jam digital hingga menulis permainan Pong penuh. Malah ada yang menggunakannya untuk membuat semula kredit pengenalan kepada Mad Men. Ini adalah teknologi yang benar-benar hebat dan apabila dikuasai dapat digunakan untuk menambahkan tahap fungsi yang luar biasa ke halaman web anda.

Dalam bab ini, saya akan memberi anda pengenalan ringkas mengenai CSS3, dan menunjukkan kepada anda cara menambahkan beberapa kesan yang luar biasa ke halaman anda.

Pertama, arahkan ke codepen.io dan buat pen baru. Kami akan menggunakannya sebagai ruang kerja kami sepanjang bab ini.

Kita akan mula sederhana dan membuat transformasi gambar sederhana yang memutar gambar 3 darjah apabila dilayang. Pertama sekali, buat tag div dan berikan ID. Dalam contoh di bawah, saya telah memberikannya ID 'muo'.

5.1 Kesan Hover CSS

Dalam div itu, sertakan gambar pilihan anda. Saya telah menyertakan salinan logo untuk MakeUseOf.

Anda kemudian perlu menulis beberapa peraturan helaian gaya. Dalam contoh di bawah, saya telah membuat margin atas dan kiri untuk memberi ruang kepada gambar. Saya juga menyertakan peraturan helaian gaya yang ingin tahu yang bermula dengan '#muo: hover'. Apakah itu?

Apabila anda melampirkan ': hover' ke aturan lembar gaya, baik untuk elemen, ID atau kelas, anda secara efektif memberitahu penyemak imbas untuk menerapkan gaya ini ketika tetikus anda mengatur elemen tersebut. Cukup sejuk, bukan?

Di dalam peraturan '#muo: hover', kami mempunyai garis yang bertuliskan '-webkit-transform: rotate (3deg)'. Seperti yang saya pasti sudah meneka, ini memberitahu penyemak imbas untuk memutar elemen div itu sebanyak tiga darjah.

Walau bagaimanapun, perlu diperhatikan bahawa tag ini hanya berfungsi di Chrome dan Safari. Sekiranya anda mahu kod anda berfungsi di Firefox atau Internet Explorer 9 ke atas, anda mahu menukar fail CSS anda untuk memasukkan baris berikut.

Sekarang, apabila anda mengarahkan kursor ke atas gambar, ia kelihatan seperti ini:

5.2 Menggunakan CSS3 Untuk Mengubah saiz Imej

Jadi, mengapa berhenti di sana? Tahukah anda bahawa anda juga boleh menggunakan kaedah 'transform' untuk memperbesar atau mengecilkan gambar. Mari ubah fail CSS kami untuk memasukkan baris berikut.

Seperti yang anda lihat, kami sekarang memasukkan peraturan transformasi baru, tetapi kali ini kami menyuruhnya melakukan sesuatu yang disebut 'skala'. Ini adalah kaedah yang sangat indah untuk meningkatkan ukuran gambar. Ia memerlukan dua parameter (angka yang anda lihat di antara tanda kurung tersebut), dan angka tersebut mewakili jumlah yang mana anda meningkatkan ketinggian dan lebar elemen.

Seperti yang anda dapat lihat dari kodnya, saya akan meningkatkan saiz logo MakeUseOf div sebanyak 50%. Anda boleh menguji karya ini dengan mengarahkannya ke atasnya. Anda akan melihat bahawa sekarang logo 'MakeUseOf' kini lebih ketara.

Ini adalah pengenalan yang sangat lembut untuk transformasi CSS3. Walaupun CSS3 memang sangat baru, anda sekarang dapat melihat bahawa anda boleh melakukan banyak manipulasi yang sangat menarik dengannya.

5.3 Uji Diri Anda

  • Bagaimana kita menerapkan gaya pada elemen ketika melayang?
  • Bagaimana anda memutar gambar menggunakan CSS3?
  • Bagaimana anda membuat skala gambar menggunakan CSS3?
  • Apa yang berlaku jika anda lulus kaedah transformasi anda 'translate (50px, 50px)'?

Bacaan lanjut:

Rocks HTML5 - Persembahan

6. Cukup Javascript

Sekiranya anda ingin menggunakan skrip di penyemak imbas web anda, anda harus menggunakan Javascript. Tidak ada dua cara mengenainya, sayangnya. Ini adalah bahasa yang mempunyai banyak peminat, dan banyak pengkritik juga. Semasa bahasa berjalan, ia mempunyai banyak ketuat. Ada sebab buku yang paling terkenal mengenai bahasa itu disebut 'Javascript: The Good Parts'.

Mustahil untuk mengajar anda bagaimana menggunakan Javascript dalam satu bab. Itu bukan tujuannya di sini. Tujuannya adalah untuk mengajar Javascript yang cukup sehingga anda dapat memahami bab berikutnya, iaitu mengenai menggunakan teknologi yang disebut Canvas untuk membuat gambar dan animasi.

6.1 Mengakses Konsol

Untuk melakukan ini, kita akan menggunakan konsol Javascript yang terdapat di dalam setiap salinan Google Chrome. Untuk mengaksesnya, anda boleh klik kanan pada mana-mana laman web dan kemudian tekan 'Inspect Element'. Kemudian klik pada 'Console'. Anda mesti melihat ini.

Adalah tradisi bahawa program pertama yang pernah ditulis oleh pemaju pemula adalah program 'Hello World'. Ini adalah program sederhana yang mencetak frasa 'Hello World', dan tidak banyak lagi. Di konsol anda, ketik 'console.log (' Hello world! ');.

6.2 Program Pertama Anda

Jadi, apa sebenarnya yang kita buat? Pertama, kami memanggil sesuatu yang dipanggil 'console.log'. Ini adalah sedikit kod yang dibina ke dalam komputer yang hanya mencetak apa sahaja yang anda sampaikan. Kami kemudian melampirkan tanda kurung di dalamnya, dan memasukkan tanda petik 'Hello World'. Ini disebut 'melewati argumen', dan jenis argumen yang kami lalui disebut rentetan. Bila-bila masa anda mahu melakukan sesuatu yang melibatkan huruf dan watak khas, anda mesti menggunakan petikan tunggal. Namun, jika anda ingin melakukan sesuatu dengan menggunakan angka, biasanya anda tidak perlu menggunakan tanda petik, seperti yang dilihat di bawah.

6.3 Pemboleh ubah Dalam JavaScript

Anda juga boleh meneruskan pemboleh ubah ke 'console.log'. Pemboleh ubah terdengar rumit, tetapi semua sebenarnya adalah ruang untuk meletakkan sebahagian maklumat. Selalunya ini adalah angka atau huruf. Untuk melakukan itu, anda menyatakan pemboleh ubah menggunakan kata kunci 'var', beri nama dan kemudian dengan tanda sama, anda memberikannya nilai. Oleh itu, saya akan membuat pemboleh ubah yang dipanggil 'hello' dan kemudian memberikannya nilai 'Hello World!'. Saya kemudian akan meneruskannya ke console.log.

Perhatikan bagaimana saya tidak menyampaikan 'hello' ke console.log menggunakan petikan. Ini kerana saya ingin mencetak ke konsol kandungan 'hello' dan bukan 'hello' itu sendiri.

6.4 Apa Fungsi Yang Dilakukan

Mungkin sedikit membosankan menulis semula kod yang sama berulang-ulang, jadi oleh sebab inilah kita menulis fungsi. Fungsi lebih mudah daripada yang anda fikirkan. Yang ada hanyalah potongan kod yang boleh kita gunakan semula tanpa menulis semula kod yang sama. Di bawah ini, kami telah membuat fungsi yang disebut 'sup' dan menyampaikannya argumen menggunakan tanda kurung yang kemudiannya dicatat ke skrin. Kami memanggil 'sup' dengan menghantar ke konsol 'sup (' Hello world! ');'.

6.5 Mengulangi Tindakan Dengan Gelung 'Untuk'

Katakan anda mahu melakukan tindakan yang sama untuk beberapa kali. Sebab itulah mengapa kita menggunakan gelung 'untuk'. Mereka kelihatan menakutkan pada mulanya, tetapi begitu mudah dilakukan setelah anda memahaminya. Anda memulakan dengan menulis 'untuk ()'.

Dalam tanda kurung tersebut, kami ingin membuat pemboleh ubah yang mengira berapa kali kami melakukan tindakan. Jadi, kami mendapat sesuatu yang kelihatan seperti ini 'untuk (var i = 0;)'.

Kami kemudian ingin memastikan bahawa saya tidak memenuhi syarat. Jadi, dalam kes ini, kita ingin melihat bahawa ia kurang dari 10. Oleh itu, selepas titik koma, kita menulis 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Sekiranya saya kurang dari 10, kami mahu menambahkannya satu demi satu dan kemudian melakukan sesuatu. Jadi, kami meletakkan 'i = i + 1'. Gelung kami hampir selesai: 'for (var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Selepas itu, kami mahu melakukan tindakan. Oleh itu, setelah kurungan terakhir, kami menulis beberapa pendakap kerinting dan di antara mereka kita akan menghiburkan.log nilai i. Ini akan membuat pembilang yang berjumlah hingga sembilan.

Dua konstruk pengaturcaraan terakhir yang akan kita perhatikan adalah pernyataan 'if' dan gelung 'while'.

6.6 Sekiranya Penyata

Pernyataan 'if' melakukan tindakan sekiranya kriteria tertentu dipenuhi. Mereka serupa dengan gelung 'untuk' dalam pembinaan, dan berfungsi seperti berikut. Katakan anda mempunyai pemboleh ubah yang disebut 'cheeseburgers' dan anda ingin melihat apakah ia mempunyai nilai 'sedap'. Sekiranya berlaku, anda mahu log 'yum, cheeseburgers' ke skrin. Untuk melakukan itu, anda akan menulis sesuatu seperti ini.

Perhatikan bagaimana saya menulis 'if (cheeseburgers ==' sedap ')'. Anda menggunakan dua sama atau tiga sama untuk memeriksa kesamaan dan satu sama untuk memberikan nilai.

6.7 Semasa Gelung

Akhirnya, gelung 'while' melaksanakan tindakan sementara kriteria dipenuhi. Jadi, bayangkan anda mahu log 'yum, cheeseburgers' sementara cheeseburgers sama enak. Untuk melakukannya, anda akan menulis perkara berikut.

Perlu diingat bahawa ini akan memasuki gelung tanpa batas, dan anda harus mengelakkan melakukan tindakan pada nilai yang tidak mungkin akan berubah. Ini boleh menyebabkan penyemak imbas anda terkunci, atau kod anda tidak berfungsi.

Seperti yang saya nyatakan sebelumnya, ini adalah pengenalan yang sangat singkat untuk konstruksi pengaturcaraan dalam Javascript. Anda digalakkan untuk membaca lebih lanjut mengenai subjek yang menarik ini, walaupun besar.

6.8 Uji diri anda

  • Saya mahu mengira dari 30. Tulis gelung 'untuk' yang akan melakukannya.
  • Saya mahu membuat pemboleh ubah yang disebut 'makeuseof' dan memberikannya nilai 'hebat'. Bagaimana ia dilakukan?
  • Saya ingin membuat fungsi yang mencetak 'MakeUseOf Is Awesome' apabila dipanggil. Tulis fungsi itu.

Bacaan lanjut:

7. Kanvas Kreatif

Canvas adalah teknologi hebat yang membolehkan anda melukis gambar dan membuat animasi tanpa perlu menggunakan Flash atau Silverlight. Orang telah menggunakannya untuk membuat perkara yang pelik dan indah, termasuk simulator pengering rambut dan pelbagai permainan video. Ini adalah teknologi yang luar biasa dan hebat, dalam tutorial ini, saya akan memberikan pengenalan ringkas kepadanya.

Perlu diingat bahawa Canvas hanya berfungsi pada penyemak imbas web moden. Sekiranya anda menggunakan versi lama IE, Chrome atau Firefox, anda mungkin tidak dapat mengikuti bab ini. Sekiranya demikian, anda harus mempertimbangkan untuk memuat turun versi terbaru Google Chrome, yang merupakan penyemak imbas web tempat saya membuat tutorial ini.

7.1 Bermula dengan Kanvas

Pertama sekali, anda perlu membuka penyemak imbas web anda dan menavigasi ke codepen.io. Buat pen baru.

Sekarang, kita mesti menyatakan elemen kanvas. Buat dua tag Kanvas pembukaan dan penutup. Di dalamnya, anda harus memberikannya tiga sifat. Ini adalah lebar dan tinggi elemen Canvas, bersama dengan ID yang anda berikan. Seperti sebelumnya semasa anda memasukkan beberapa video, anda harus memasukkan mesej pengganti.

Sekarang, kami ingin menulis beberapa kod Javascript yang akan menarik sesuatu ke skrin. Kami akan memulakan asas dan membuat petak merah sederhana.

Kami akan membuat pemboleh ubah (saya memanggilnya 'demo'), dan kemudian pilih elemen kanvas dan tetapkan ke pemboleh ubah tersebut. Untuk melakukannya, anda menggunakan document.getElementByID () dan masukkan ID elemen yang ingin anda pilih.

Baris kedua dalam skrip kami membuat pemboleh ubah lain yang disebut 'konteks' dan kemudian memanggil 'demo.getContext (' 2d ')' di atasnya. Ini memberitahu penyemak imbas bahawa kami akan mengerjakan gambar 2d, kemudian meneruskan fungsi yang diperlukan yang kami perlukan untuk menarik ke layar.

Garis ketiga dan keempat adalah garis yang benar-benar membuat lukisan ke skrin. Baris ketiga mengisi sebuah segi empat tepat dengan warna merah, sementara baris keempat memanggil fillRect, yang meletakkannya dan menentukan panjang dan lebarnya.

Itu tidak mengagumkan. Mari buat sesuatu yang lebih maju dan gunakan keajaiban Javascript dan Canvas untuk membuat logo jenama MakeUseOf yang baru.

7.2 Bentuk Dan Teks

Mari padamkan baris keempat kami, dan gantikan dengan garis yang meletakkan segi empat tepat kita di sudut kiri atas dan meregangkannya sepanjang kanvas kita.

Dua argumen pertama menentukan di mana kita mahu meletakkan paksi x dan y bentuk. Mari tetapkan keduanya menjadi '0' buat masa ini. Hujah ketiga merujuk kepada lebar bentuk. Mari tetapkannya menjadi '200', dan kemudian tinggalkan argumen keempat menjadi '50'. Anda sekarang harus mempunyai sesuatu yang kelihatan sedikit seperti ini.

Ini adalah permulaan yang baik, tetapi sama sekali tidak menyebutkan MakeUseOf. Oleh itu, kita akan menambah beberapa teks. Mari buat pemboleh ubah yang mengandungi 'makeuseof', dan kita akan memanggil pemboleh ubah itu 'MakeUseOf'.

Kami kemudian mahu membuat pemboleh ubah konteks yang lain. Panggil yang ini 'konteks2', dan pastikan bahawa ia adalah 2d. Inilah yang akan kita gunakan untuk menulis teks kita.

Kami mahu teks kami berwarna biru dan melapisi dataran merah kami. Jadi, seperti sebelumnya, kami ingin memberikannya gaya 'biru'. Sekarang, kita akan memilih ciri teks kita. Kami mahu ia berukuran 20 piksel, berformat tebal dan menggunakan fon Arial. Kami memanggil font pada konteks2 dan memberikannya nilai 'bold 20px arial'.

Kerana kami mahu teks ini melapisi kotak merah kami sebelumnya, kami perlu memanggil 'textBaseLine' pada konteks2 dan memberikannya nilai teratas. Setelah selesai, kami memanggil 'fillText' pada konteks2 dan meneruskannya pemboleh ubah yang mengandungi teks kami dan koordinat x dan y di mana kami berhasrat untuk meletakkan teks kami. Hasil akhir kod kami adalah seperti ini.

Gambar yang dihasilkan oleh kod kelihatan seperti ini.

7.3 Perkataan Di Atas Kanvas

Walaupun ini adalah pengenalan Canvas yang sangat asas, anda harus memahami bahawa ia juga merupakan teknologi yang sangat besar, dan sangat kuat untuk boot. Panduan ini hanya berfungsi sebagai pengenalan untuk membuat grafik menggunakan teknologi baru ini.

cara menyembunyikan seorang rakan di facebook

7.4 Uji Diri Anda

  • Tambahkan slogan berikut pada gambar yang anda buat: 'Laman teknologi terbaik yang pernah ada!'
  • Buat gelung 'untuk' yang berjalan selama sepuluh lelaran. Lihat apakah anda dapat menggerakkan gambar ke bawah kanvas, satu piksel pada satu masa.
  • Bungkus gambar anda dengan fungsi. Apa yang berlaku jika anda tidak memanggilnya?

Bacaan lanjut:

8. Di mana Seterusnya?

Terima kasih kerana membaca panduan ringkas saya mengenai teknologi baru yang terdapat dalam HTML5. Tidak dapat dinafikan bahawa HTML5 adalah teknologi masa depan. Ini diadopsi oleh kebanyakan teknologi, kerana mudah ditulis dan sangat luar biasa. Orang selalu melakukan perkara yang luar biasa sepanjang masa, dan saya tidak ragu bahawa pada masa akan datang, anda akan menjadi salah satu daripada mereka. Saya berbesar hati kerana telah menjadi sebahagian daripada perjalanan anda ke dunia HTML5 yang liar dan indah.

Saya meminta anda untuk terus belajar. Teruskan pengekodan. Terus naik dan tingkatkan, dan dalam waktu singkat anda akan menggunakan teknologi yang telah diperkenalkan dalam panduan ringkas ini untuk membuat produk yang luar biasa.

Berkongsi Berkongsi Tweet E-mel Adakah Perlu Ditingkatkan ke Windows 11?

Windows telah direka bentuk semula. Tetapi apakah itu cukup untuk meyakinkan anda untuk beralih dari Windows 10 ke Windows 11?

Baca Seterusnya Topik-topik yang berkaitan
  • Perkembangan Wordpress & Web
  • HTML5
  • Bentuk panjang
  • Panduan Bentuk Panjang
Mengenai Pengarang Matthew Hughes(386 Artikel Diterbitkan)

Matthew Hughes adalah pembangun perisian dan penulis dari Liverpool, England. Dia jarang ditemui tanpa secawan kopi hitam yang kuat di tangannya dan sangat memuja Macbook Pro dan kameranya. Anda boleh membaca blognya di http://www.matthewhughes.co.uk dan mengikutinya di twitter di @matthewhughes.

Lebih Banyak Dari Matthew Hughes

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan