Memulai Dengan HTML5

Memulai Dengan HTML5
Panduan ini tersedia untuk diunduh sebagai PDF gratis. Unduh file ini sekarang . Jangan ragu untuk menyalin dan membagikan ini kepada teman dan keluarga Anda.

Daftar isi

§1. Perkenalan





2–Markup Semantik





3–Bentuk





4 – Sedang

5–Transformasi dan Animasi CSS3



6–Cukup Javascript

7–Kanvas Kreatif





8–Di Mana Selanjutnya?

1. Perkenalan

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





Tapi apa sebenarnya itu?

Yah, itu bukan pertanyaan yang mudah untuk dijawab. Dalam tutorial HTML5 ini, kami akan mencoba memberikan beberapa jawaban. HTML5 digunakan untuk menggambarkan sekelompok hal yang sangat beragam. Ini adalah standar penulisan halaman web. Ini adalah kumpulan API. Ini adalah cara baru untuk menambahkan interaktivitas ke halaman web.

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

Dalam tutorial HTML5 ini, saya akan berasumsi bahwa Anda pernah menyentuh HTML dan CSS. Mungkin Anda telah membuat tema Wordpress Anda sendiri, atau mengedit tata letak MySpace di masa lalu. Mungkin Anda telah membaca panduan XHTML MakeUseOf sendiri. Intinya adalah, saya berasumsi bahwa Anda tahu jalan di sekitar halaman web dan bahwa apa yang kita diskusikan dalam panduan ini tidak akan terlalu asing bagi Anda.

Tujuan dari panduan ini bukan untuk mengajarkan Anda tentang HTML5 secara keseluruhan. Itu akan sepenuhnya di luar cakupan buku ini. Tujuannya adalah untuk memberikan pengenalan yang lembut tentang teknologi web baru yang menakjubkan ini, dan untuk menunjukkan kepada Anda beberapa cara keren untuk memasukkannya ke dalam situs web Anda.

Mengapa Anda ingin belajar HTML5?

Ini pertanyaan yang adil. Di dunia smartphone dan aplikasi, apakah benar-benar penting untuk mempelajari cara memprogram halaman web?

Percaya atau tidak, menulis aplikasi smartphone menggunakan teknologi HTML5 adalah hal yang sangat umum. Sampai saat ini, aplikasi Facebook untuk Android ditulis menggunakan HTML5, CSS dan Javascript.

Blackberry adalah perusahaan besar lain yang sangat tertarik pada HTML5. Hal ini terlihat pada iterasi terbaru dari sistem operasi mobile mereka, Blackberry OS 10, di mana mereka secara aktif mendorong pengembang untuk mengembangkan aplikasi untuk ponsel mereka menggunakan teknologi web.

Smartphone Firefox OS baru juga berjalan sepenuhnya pada aplikasi HTML5. Pengetahuan tentang HTML5 sangat penting dalam iklim smartphone saat ini.

Selain itu, mempelajari HTML5 baik untuk karir Anda. Tidak percaya padaku? Menurut Memang.com , gaji tahunan rata-rata untuk pengembang HTML5 adalah .000 yang menakjubkan. Dengan semakin banyak perusahaan mengubah situs web mereka untuk menggunakan teknologi HTML5, pengembang yang mengetahui tumpukan HTML5 banyak dicari – sekarang lebih dari sebelumnya.

1.1 Prasyarat

Tutorial HTML5 ini mengasumsikan beberapa hal. Pertama, itu mengandaikan Anda tahu cara kerja web, dan Anda tahu cara membuat halaman web dasar. Anda harus dapat menggabungkan beberapa elemen HTML dan dapat menyajikan beberapa informasi di browser web. Melihat dan

tag tidak terlalu menakutkan, dan Anda tidak takut tangan Anda kotor dalam beberapa kode sumber.

Kedua, panduan ini mengasumsikan Anda tahu apa itu CSS dan bagaimana cara kerjanya. Kami tidak mengharapkan Anda untuk menjadi jenius desain, Anda juga tidak diharapkan untuk mengetahui seluruh spesifikasi CSS dari tangan Anda. Namun, Anda harus dapat menerapkan gaya ke elemen di halaman web, dapat menautkan ke file CSS dan mengetahui perbedaan antara ID dan kelas dan cara menerapkan gaya ke masing-masing.

Jika Anda menggaruk kepala Anda di atas, jangan khawatir. Salah satu hal terbaik tentang HTML dan CSS adalah sangat, sangat mudah. Faktanya, MakeUseOf memiliki panduan XHTML luar biasa yang akan meningkatkan kecepatan Anda dengan sangat cepat.

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

Anda juga akan membutuhkan editor teks dan browser modern. Versi Internet Explorer apa pun yang lebih lama dari IE 9 dan beberapa versi Safari, Chrome, dan Firefox yang lebih lama akan mengalami kesulitan dengan banyak fitur yang merupakan bagian dari HTML5 dan dapat mencegah Anda mengikuti panduan ini.

Oleh karena itu, Anda dianjurkan untuk mengunduh peramban modern. Saya merekomendasikan Google Chrome, dan saya akan menggunakannya di setiap contoh.

Di luar itu, yang Anda perlukan hanyalah kemauan untuk belajar. Oh, dan editor teks.

1.2 Editor Teks Untuk Pengembangan Web

Editor teks Anda adalah apa yang akan Anda gunakan untuk menulis kode Anda. Anda mungkin bertanya-tanya apa itu editor teks.

Yah, pertama itu bukan pengolah kata. Program seperti Microsoft Word dan Apple's Pages sama sekali tidak cocok untuk pengembangan web. Itu karena mereka melampirkan informasi tambahan ke file HTML, CSS, dan Javascript Anda yang menyulitkan browser web Anda untuk membaca.

Editor teks menembakkan karakter ke dalam file teks, dan tidak banyak lagi. Ini memungkinkan Anda membuat file yang tidak memiliki format tambahan, dan dapat disimpan dengan ekstensi apa pun yang Anda pilih.

Komputer Anda sudah dilengkapi dengan satu. Jika Anda menggunakan PC Windows, maka Notepad adalah editor teks yang kemungkinan besar telah Anda instal.

Di Mac, situasinya sedikit berbeda. OS X kebetulan datang dengan empat editor teks yang berbeda. Ini disebut Vim, Emacs, Pico dan Nano. Namun, tidak seperti Notepad, semuanya bekerja di terminal.

Ini sedikit menakutkan bagi orang yang baru mengenal pengembangan web dan tidak boleh digunakan oleh orang yang baru mengenal pengembangan perangkat lunak. Kami tidak akan menggunakannya dalam panduan ini. Namun, ketika Anda menjadi sedikit lebih percaya diri dengan perangkat lunak dan pengembangan web, ada baiknya melihat Vim dan Emacs. Keduanya adalah editor teks yang kuat, dan ketika dikuasai dapat menghemat banyak waktu.

Di Linux, editor teks default bervariasi antar distribusi. Di Ubuntu, kemungkinan Gedit , yang merupakan editor teks yang agak menyenangkan yang tidak terlalu berbeda dari Notepad.

Namun, dalam kursus ini kita akan menulis kode kita menggunakan tiga alat yang berbeda.

Yang pertama adalah Sublime Text 2 . Sejujurnya saya tidak bisa merekomendasikan ini dengan cukup tinggi. Muncul dengan semua hal yang membuat hidup lebih mudah bagi pengembang pemula. Pertama, itu akan membuat kode Anda lebih mudah dibaca dengan mewarnai bagian-bagian tertentu. Kedua, ini memungkinkan Anda untuk beralih antar file dengan mudah dan untuk mengelola seluruh proyek file. Ini sangat ideal untuk beralih antar file, dan mengedit beberapa bit kode dengan cepat.

Yang ketiga adalah konsol Javascript yang terintegrasi dengan Google Chrome. Ini memungkinkan kita untuk menulis Javascript dan melihatnya langsung dijalankan dan akan digunakan untuk menjelaskan konsep dasar pemrograman.

Yang kedua adalah situs web bernama Codepen.io. Situs web yang luar biasa ini akan memungkinkan Anda untuk membuat kode HTML, CSS dan Javascript di browser dan gratis untuk digunakan. Ini juga akan memungkinkan Anda untuk melihat perubahan Anda secara instan.

2. Markup Semantik

Dalam bab ini, Anda akan belajar tentang Semantic Markup, dan bagaimana mengatur kode Anda berdasarkan isinya.

Sampai saat ini, kode HTML umumnya diatur dengan tag. Ini memungkinkan Anda untuk membuat grup elemen dan kemudian menerapkan gaya ke elemen tersebut.

Ini berhasil, tetapi ada ruang untuk perbaikan. Masalah dengan tag adalah bahwa itu tidak semantik. Div sebenarnya tidak berarti apa-apa, sungguh.

Markup semantik adalah fitur baru di HTML5. Ini membawa tag baru, yang bekerja dengan cara yang sama seperti tag 'div', tetapi untuk menandai bagian umum halaman.

Jadi, bagaimana mereka bekerja? Perhatikan kode berikut.

Di bagian kode ini, kami memiliki bilah navigasi, judul, dan daftar. Ini tidak terlalu berbeda dengan kebanyakan situs web yang mungkin pernah Anda kunjungi, jika Anda memikirkannya.

cara membuka kunci hard drive mac

Mari kita lihat artikel di MakeUseOf. Anda akan melihat bahwa ada bagian dari halaman yang dicadangkan sepenuhnya untuk menavigasi ke artikel lain. Anda juga akan melihat bahwa ada bagian lain dari halaman yang berisi kata-kata yang membentuk sebuah artikel. Di bagian atas halaman, Anda akan melihat header yang berisi logo MakeUseOf dan beberapa tautan lainnya.

Ketika Anda memikirkannya, banyak situs web mengikuti konvensi ini. Sebagian besar situs web memiliki bagian yang disediakan untuk navigasi. Mereka biasanya memiliki tubuh konten. Mereka kemungkinan besar memiliki header.

Tag semantik adalah tag yang memungkinkan Anda menentukan bagian situs web yang biasanya ditemukan di sebagian besar situs web. Mereka tidak menambahkan apa pun ke halaman, tetapi memungkinkan Anda untuk mengelompokkan tag berdasarkan konten mereka dan menerapkan gaya ke grup tersebut.

Jadi, ingat kode yang kita miliki sebelumnya? Mari kita lihat dengan menambahkan beberapa markup Semantik.

Seperti yang Anda lihat, kodenya jauh lebih mudah dibaca. Anda tahu bagian mana yang mana dan tidak ada ambiguitas. Ini penting, karena memudahkan penulisan kode yang baik dan bersih. Jika Anda memutuskan untuk menjadi desainer web profesional, ini menjadi yang terpenting – Anda tidak akan pernah tahu siapa yang akan membaca karya yang Anda hasilkan.

Jadi, mari kita lihat beberapa tag markup semantik lainnya.

2.1 Bagian

Bagian adalah tag yang sangat berguna. Ini digunakan untuk mengambil sebagian besar informasi dan konten yang ditandai dengan heading atau judul. Pikirkan ini seperti sebuah bab dalam sebuah buku. Sebuah bab memiliki judul, dan mungkin juga berisi gambar, diagram, grafik, dan kata-kata. Tag bagian akan digunakan untuk memuat semua itu.

2.2 Artikel

Tag artikel digunakan seperti apa bunyinya; Berisi konten seperti posting blog atau berita. Konten ini harus dapat dipisahkan dari bagian blog lainnya dan tetap masuk akal.

2.3 Selain itu

Tag ini dicadangkan untuk konten yang terkait, tetapi bukan merupakan bagian integral dari halaman web. Ini bisa berupa sekumpulan fakta yang berhubungan dengan berita, atau biografi pengguna di blog.

2.4 Tajuk

Banyak halaman web memiliki bilah di bagian atas halaman yang berisi logo, beberapa informasi yang berkaitan dengan situs dan mungkin beberapa tautan. Dalam markup semantik, Anda akan menggunakan tag Header untuk memuat semua ini.

2.5 Nav

Elemen ini dicadangkan untuk bagian navigasi situs web Anda. Ini akan berisi tautan ke situs web lain atau ke halaman lain di situs web. Dalam konteks MakeUseOf, ini bisa menjadi bagian dari halaman yang berada di bawah header.

Tag ini dicadangkan untuk bagian bawah halaman. Di sini, Anda dapat meletakkan beberapa detail kontak, informasi hak cipta, peta, atau beberapa tautan ke halaman 'tentang saya' Anda.

2.7 Uji Diri Anda

  • Apa itu Markup Semantik, dan untuk apa kegunaannya?
  • Saya membuat halaman web dan saya ingin menggunakan tag semantik untuk memuat biografi tentang saya. Yang mana yang saya gunakan?

3. Formulir

Jika Anda pernah melakukan sedikit desain web, Anda mungkin tahu cara membuat formulir sederhana dalam HTML. Jika Anda benar-benar pintar, Anda mungkin tahu bagaimana mengambil informasi yang Anda dapatkan dari formulir Anda dan bagaimana melakukan sesuatu dengannya, seperti memasukkannya ke dalam database.

Formulir sangat penting. Mereka adalah dasar dari sebagian besar hal yang kita lakukan di Internet. Setiap kali Anda membuat pembaruan status di jejaring sosial favorit Anda, membeli sesuatu dari Amazon, atau mengirim email, Anda mungkin menggunakan formulir HTML.

Apa yang mungkin tidak Anda ketahui adalah bahwa cara kami membuat formulir telah berubah secara radikal di HTML5. Ini juga secara signifikan lebih baik. Dalam bab ini, kita akan melihat beberapa hal keren yang sekarang dapat Anda lakukan, hanya dengan markup biasa.

Jadi, apa yang keren dari cara baru kita bisa menulis formulir di HTML5? Pertama, Anda dapat memastikan bahwa beberapa bidang harus diisi untuk dikirim, hanya dengan mengubah markup formulir itu sendiri. Selain itu, Anda tidak perlu lagi menulis pegunungan JavaScript atau PHP untuk melakukan ini. Ini sepele mudah.

Kedua, Anda dapat memastikan bahwa pengguna Anda hanya dapat mengirimkan jenis informasi tertentu ke formulir Anda. Jadi, misalkan Anda memiliki situs web untuk milis Anda dan Anda hanya ingin orang-orang dapat mengirimkan alamat email yang sebenarnya? Anda dapat melakukannya, hanya dengan menggunakan HTML5. Ini benar-benar sangat kuat.

Ketiga, Anda dapat membuat formulir Anda terlihat lebih baik dengan memberikan tempat penampung pada bidang tertentu. Ini akan membuat mereka secara signifikan lebih intuitif, karena Anda dapat menunjukkan kepada pengguna Anda contoh tentang apa yang Anda harapkan dari sebuah formulir.

3.1 Memperbaiki Formulir

Jadi, mari kita lihat formulir dan lihat bagaimana kita bisa membuatnya lebih baik.

Bentuk ini cukup mendasar. Dibutuhkan nama, email dan warna favorit, dan kemudian memungkinkan pengguna untuk mengirimkannya. Ini tidak berisi validasi informasi apa yang dimasukkan ke dalamnya, dan tidak ada yang menghentikan pengguna mengirimkan formulir ini dengan beberapa bidang kosong. Mari kita ubah semua itu.

Jadi, hal pertama yang ingin kita lakukan adalah memastikan bahwa bidang email hanya menerima email. Ini dulunya memang tugas yang cukup sulit, karena Anda harus membuat segala macam kode Regex misterius. Yah, tidak lagi. Anda hanya perlu mengubah jenis input dari 'teks' menjadi 'email'. Ketika Anda mencoba mengirimkan formulir itu dengan omong kosong, itu akan mengeluh dan bersikeras bahwa Anda mengirimkan email.

3.2 Jenis dan Pola Masukan

Ada jenis input lain, yang dapat Anda minta. Ini termasuk nomor telepon, alamat web, formulir pencarian, dan bahkan pemilih warna! Karena HTML5 terus berkembang, masuk akal bahwa kami akan segera dapat menentukan lebih banyak jenis input dalam waktu dekat.

Selanjutnya, untuk hal-hal seperti nomor telepon yang bervariasi tergantung pada lokalitas, Anda dapat menentukan pola untuk input. Ini dibuat menggunakan sesuatu yang disebut 'Ekspresi Reguler' dan agak rumit, tetapi sangat kuat.

Kami juga ingin memberikan contoh email di bidang kami, sehingga pengguna tidak memiliki ambiguitas tentang apa yang harus dia kirimkan. Itu sangat mudah dilakukan. Cukup buat atribut baru 'placeholder' dengan alamat email contoh.

Kami akan memastikan bahwa bidang 'Warna Favorit' kami diperlukan. Di kurung sudut terakhir (>) di tag input Email, cukup tulis 'wajib'. Itu dia. Sekarang, ketika Anda mencoba mengirimkan formulir Anda tanpa nilai, itu akan menghasilkan pesan kesalahan.

Hal yang benar-benar luar biasa tentang pesan kesalahan ini adalah pengguna tidak perlu menulisnya atau menulis kode apa pun untuk membuatnya. Anda hanya mengubah bidang untuk membuatnya diperlukan, dan itu hanya berfungsi. Dengan itu, dimungkinkan untuk menyesuaikannya, jika Anda mau.

Itu adalah pengenalan yang sangat singkat tentang kekuatan bentuk dalam HTML5. Jika Anda ingin membaca lebih lanjut, saya sarankan Anda mengunjungi tautan ini.

Bacaan lebih lanjut:

  • Trik CSS – Mari kita menulis markup semantik
  • HTML5 Doctor – Mari Bicara Tentang Semantik

3.3 Uji Diri Anda

Ini hari ulang tahunmu minggu depan, dan kamu ingin membuat formulir pendaftaran sehingga kamu tahu berapa banyak kue yang perlu kamu buat. Buka editor teks Anda dan buat formulir dengan bidang berikut.

  • Nama
  • Alamat email
  • Nomor telepon
  • Alergi

Pastikan kolom nama, email, dan nomor telepon wajib diisi, dan kolom Email dan Nomor Telepon disetel dengan jenis input 'email' dan 'tel'. Buat placeholder untuk bidang alergi dengan nilai 'pollen, telur, quiche'.

Bermain-main dengan formulir. Coba kirimkan bidang yang wajib diisi sebagai kosong, dan coba masukkan karakter non-numerik ke dalam bidang nomor telepon. Di bidang email, masukkan sesuatu yang bukan alamat email. Apa yang terjadi?

4. Rata-rata

Dulu ada waktu ketika satu-satunya cara di mana Anda bisa memasukkan beberapa video atau audio ke halaman web adalah dengan menggunakan sesuatu seperti Flash, Shockwave atau SilverLight.

Ini tidak ideal. Pertama, tidak satu pun dari kerangka kerja ini bekerja dengan baik di perangkat seluler. Mereka hanya tidak diperlengkapi untuk dunia smartphone dan tablet modern.

berapa banyak ruang yang dibutuhkan untuk windows 10

Selain itu, mereka adalah format berpemilik. Akibatnya, pengguna Linux dan OS X bisa mendapatkan pengalaman kelas dua yang cukup atau bahkan dicegah untuk menggunakan layanan media, karena tidak tersedia untuk platform mereka.

Akhirnya, mereka memiliki kecenderungan untuk menjadi lambat. Jika Anda menggunakan komputer yang kurang bertenaga atau lebih tua, Anda tidak akan memiliki pengalaman menonton video yang baik menggunakan kerangka kerja ini. Flash sangat terkenal untuk ini.

4.1 Bagaimana HTML5 Membuat Video dan Audio Mengagumkan

HTML5 mengubahnya dengan mengizinkan pengembang web untuk memasukkan video dan audio ke halaman web mereka hanya dengan beberapa baris kode. Ini berfungsi dengan baik di perangkat seluler dan berfungsi di setiap browser web modern.

Akibatnya, perusahaan besar seperti YouTube, Vimeo, dan Netflix memanfaatkan revolusi HTML5. Mengapa Anda tidak bergabung dengan mereka?

4.2 Semua Tentang Codec

Dalam bab ini, Anda akan mempelajari cara menggunakan kekuatan HTML5 untuk menyertakan audio dan video di halaman web Anda.

Pertama, saya harus memulai dengan peringatan. Meskipun Anda dapat menggunakan video HTML5 di setiap browser web modern, itu tidak bekerja sama di setiap browser web. Codec yang digunakan oleh setiap browser berbeda-beda. Di Internet Explorer, Anda dibatasi untuk menggunakan video MP4. Chrome sedikit lebih murah hati dan memungkinkan Anda menggunakan video WebM, MP4 dan Ogg Theora. Opera sedikit lebih ketat dan hanya memungkinkan Anda untuk menggunakan video Theora dan WebM.

Akibatnya, Anda harus sedikit pintar dengan cara memasukkan video ke halaman web Anda. Jadi, mari kita lihat cara kerjanya.

4.3 Dimulai Dengan Video

Untuk memulainya, Anda perlu membuat beberapa tag pembuka dan penutup. Di sinilah Anda akan menautkan ke file video Anda. Tapi pertama-tama, Anda akan ingin memasang poster. Apa artinya?

Nah, saat Anda menunggu video Anda dimuat, orang yang mengunjungi situs Anda dapat melihat gambar yang berhubungan dengan video tersebut. Untuk melakukannya, cukup berikan tag video Anda atribut 'poster' dengan nilai gambar yang ingin Anda tautkan. Seharusnya terlihat seperti ini.

Hal berikutnya yang ingin kita lakukan adalah membuat fallback. Apa artinya ini? Jadi, misalkan Anda menggunakan salah satu browser lama yang kurang keren di luar sana. Banyak dari browser lama ini tidak mendukung video HTML5 dan karenanya tidak dapat memutar video HTML5. Anda akan ingin meninggalkan mereka pesan yang memberitahu mereka bahwa mereka akan ingin meng-upgrade browser mereka dan bahwa sampai mereka melakukannya, mereka tidak akan dapat menonton video Anda.

Untuk melakukan itu, Anda cukup menulis pesan Anda di dalam tag video Anda. Tidak ada lagi yang diperlukan. Setelah Anda selesai melakukannya, Anda akan ditinggalkan dengan beberapa kode yang terlihat seperti ini.

Sekarang, mari tambahkan beberapa video. Saya akan menguji ini di Google Chrome, jadi saya akan menautkan ke film MP4. Untuk melakukan itu, saya membuat tag Sumber dan memberinya atribut src yang memiliki nilai video yang ingin saya sertakan.

Halaman saya sekarang siap dibuka di browser web saya. Saya telah menautkan ke film yang sangat, sangat besar dan sebagai hasilnya, ketika dibuka, orang hanya dapat melihat posternya.

4.4 Menambahkan Audio

Audio dapat dimasukkan ke halaman web Anda dengan cara yang sangat mirip dengan cara kami memasukkan video ke halaman kami.

Pertama, seseorang membuat beberapa tag audio. Tag audio ini berisi atribut 'kontrol'. Ini memberi pengguna yang mengunjungi halaman kemampuan untuk menjeda, memutar mundur dan mempercepat audio yang sedang diputar.

Kemudian, Anda menyertakan tag sumber ke file MP3 yang ingin Anda tautkan. Anda tidak perlu terlalu khawatir tentang kompatibilitas codec. Peramban web terbaru memiliki kemampuan untuk memutar audio MP3, meskipun merupakan praktik yang baik untuk juga menyertakan file '.ogg' dan '.wav' – untuk berjaga-jaga.

Terakhir, Anda dapat membuat fallback untuk browser lama. Ini dilakukan dengan cara yang sama seperti Anda membuat cadangan untuk video Anda.

Hasil akhirnya terlihat sedikit seperti ini.

Ketika Anda membuka ini di browser web Anda, seharusnya terlihat seperti ini.

4.5 Uji Diri Anda

  • Apa tujuan memiliki poster di tag video Anda?
  • Codec apa yang tidak dapat Anda gunakan di Internet Explorer?
  • Jika saya menginginkan kemampuan untuk menjeda beberapa audio, atribut apa yang akan Anda tambahkan ke tag 'audio' Anda?

Bacaan lebih lanjut:

5. Transformasi dan Animasi CSS3

CSS secara tradisional digunakan untuk menangani tata letak dan desain halaman web. Ini masih benar, tetapi dalam iterasi terbarunya telah memperoleh kemampuan untuk menangani animasi dan transformasi elemen dan gambar.

Orang-orang telah melakukan beberapa hal luar biasa dengan CSS3, mulai dari membuat jam digital hingga menulis game Pong lengkap. Seseorang bahkan menggunakannya untuk membuat ulang kredit pengantar Mad Men. Ini adalah teknologi yang benar-benar kuat dan ketika dikuasai dapat digunakan untuk menambahkan tingkat fungsionalitas yang luar biasa ke halaman web Anda.

Dalam bab ini, saya akan memberi Anda pengantar singkat tentang CSS3 , dan menunjukkan cara menambahkan beberapa efek luar biasa ke halaman Anda.

Pertama, navigasikan ke codepen.io dan buat pena baru. Kami akan menggunakan ini sebagai ruang kerja kami selama bab ini.

Kita akan mulai sederhana dan membuat transformasi gambar sederhana yang memutar gambar 3 derajat saat dilayangkan. Pertama-tama, buat tag div dan berikan ID. Pada contoh di bawah ini, saya telah memberikan ID 'muo'.

5.1 Efek Arahkan CSS

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

Anda kemudian harus menulis beberapa aturan stylesheet. Pada contoh di bawah ini, saya telah membuat margin atas dan kiri untuk memberi ruang pada gambar. Saya juga menyertakan aturan stylesheet yang tampak aneh yang dimulai dengan '#muo:hover'. Apa itu?

Saat Anda melampirkan ':hover' ke aturan stylesheet, baik itu ke elemen, ID, atau kelas, Anda secara efektif memberi tahu browser untuk menerapkan gaya ini saat mouse Anda mengatur elemen. Cukup keren, bukan?

Di dalam aturan '#muo:hover', kita memiliki baris yang mengatakan '-webkit-transform: rotate(3deg)'. Seperti yang saya yakin sudah Anda duga, ini memberi tahu browser untuk memutar elemen div itu sebanyak tiga derajat.

Namun, perlu dicatat bahwa tag ini hanya berfungsi di Chrome dan Safari. Jika Anda ingin kode Anda berfungsi di Firefox atau Internet Explorer 9 dan di atasnya, Anda akan ingin mengubah file CSS Anda untuk menyertakan baris berikut.

Sekarang, ketika Anda mengarahkan kursor ke gambar, itu terlihat seperti ini:

5.2 Menggunakan CSS3 Untuk Mengubah Ukuran Gambar

Jadi, mengapa berhenti di situ? Tahukah Anda bahwa Anda juga dapat menggunakan metode 'transform' untuk memperbesar atau memperkecil gambar. Mari kita ubah file CSS kita untuk menyertakan baris berikut.

Seperti yang Anda lihat, kami sekarang telah menyertakan aturan transformasi baru, tetapi kali ini kami memintanya untuk melakukan sesuatu yang disebut 'skala'. Ini adalah cara yang sangat indah untuk meningkatkan ukuran gambar. Dibutuhkan dua parameter (angka-angka yang Anda lihat di antara tanda kurung itu), dan mereka mewakili jumlah yang Anda gunakan untuk meningkatkan tinggi dan lebar elemen.

Seperti yang Anda lihat dari kodenya, saya akan meningkatkan ukuran logo div MakeUseOf sebesar 50%. Anda dapat menguji ini berfungsi dengan mengarahkan kursor ke atasnya. Anda akan melihat bahwa sekarang logo 'MakeUseOf' sekarang secara signifikan lebih melebar.

Ini adalah pengantar yang sangat lembut untuk transformasi CSS3. Meskipun CSS3 memang sangat baru, sekarang Anda dapat melihat bahwa Anda dapat melakukan banyak manipulasi yang sangat menarik dengannya.

5.3 Uji Diri Anda

  • Bagaimana cara menerapkan gaya ke elemen saat melayang?
  • Bagaimana Anda memutar gambar menggunakan CSS3?
  • Bagaimana Anda menskalakan gambar menggunakan CSS3?
  • Apa yang terjadi jika Anda melewati metode transformasi 'translate(50px, 50px)'?

Bacaan lebih lanjut:

HTML5 Rocks - Presentasi

6. Cukup Javascript

Jika Anda ingin menggunakan skrip di browser web Anda, Anda harus menggunakan Javascript. Tidak ada dua cara tentang itu, sayangnya. Ini adalah bahasa yang memiliki banyak penggemar, dan juga banyak pencela. Seiring perkembangan bahasa, ia memiliki banyak kutil. Ada alasan mengapa buku paling terkenal tentang bahasa ini disebut 'Javascript: The Good Parts'.

Tidak mungkin mengajari Anda cara menggunakan Javascript dalam satu bab. Bukan itu tujuannya di sini. Tujuannya adalah untuk mengajari Anda Javascript yang cukup sehingga Anda dapat memahami bab berikutnya, yaitu tentang menggunakan teknologi yang disebut Canvas untuk membuat gambar dan animasi.

6.1 Mengakses Konsol

Untuk melakukan ini, kita akan menggunakan konsol Javascript yang ada di setiap salinan Google Chrome. Untuk mengakses ini, Anda dapat mengklik kanan pada halaman web mana pun dan kemudian tekan 'Inspect Element'. Kemudian klik 'Konsol'. Anda harus melihat ini.

Sudah menjadi tradisi bahwa program pertama yang pernah ditulis oleh pengembang pemula adalah program 'Hello World'. Ini adalah program sederhana yang mencetak frase 'Hello World', dan tidak banyak lagi. Di konsol Anda, ketik 'console.log('Hello world!');.

6.2 Program Pertama Anda

Jadi, apa sebenarnya yang kami lakukan? Pertama, kami memanggil sesuatu yang disebut 'console.log'. Ini adalah sedikit kode yang dibangun ke dalam komputer yang hanya mencetak apa pun yang Anda perintahkan. Kami kemudian melampirkan beberapa tanda kurung, dan menyertakan tanda kutip ganda 'Hello World'. Ini disebut 'argumen lewat', dan tipe argumen yang kita lewati disebut string. Kapan pun Anda ingin melakukan sesuatu yang melibatkan huruf dan karakter khusus, Anda cukup menggunakan tanda kutip tunggal. Namun, jika Anda ingin melakukan sesuatu dengan menggunakan angka, biasanya Anda tidak perlu menggunakan tanda kutip, seperti yang terlihat di bawah ini.

6.3 Variabel Dalam JavaScript

Anda juga dapat meneruskan variabel ke 'console.log'. Variabel terdengar rumit, tetapi yang sebenarnya hanyalah ruang untuk meletakkan potongan informasi. Ini sering berupa angka atau huruf. Untuk melakukannya, Anda mendeklarasikan variabel menggunakan kata kunci 'var', memberinya nama dan kemudian dengan tanda sama dengan, Anda memberinya nilai. Jadi, saya akan membuat variabel bernama 'halo' dan kemudian memberinya nilai 'Halo Dunia!'. Saya kemudian akan meneruskannya ke console.log.

Perhatikan bagaimana saya tidak meneruskan 'halo' ke console.log menggunakan tanda kutip. Itu karena saya ingin mencetak ke konsol isi 'halo' dan bukan 'halo' itu sendiri.

6.4 Apa Fungsinya?

Mungkin agak membosankan menulis ulang potongan kode yang sama berulang-ulang, jadi karena alasan inilah kami menulis fungsi. Fungsinya lebih mudah dari yang Anda pikirkan. Semua itu hanyalah potongan kode yang dapat kita gunakan kembali tanpa menulis ulang kode yang sama lagi. Di bawah ini, kami telah membuat fungsi yang disebut 'sup' dan memberikan argumen menggunakan tanda kurung yang kemudian masuk ke layar. Kami memanggil 'sup' dengan mengirim ke konsol 'sup('Hello world!');'.

6.5 Mengulangi Tindakan Dengan Loop 'Untuk'

Misalkan Anda ingin melakukan tindakan yang sama untuk beberapa kali. Karena alasan itulah kami menggunakan perulangan 'untuk'. Mereka terlihat menakutkan pada awalnya, tetapi sangat mudah dilakukan setelah Anda memahaminya. Anda memulai dengan menulis 'for()'.

Dalam tanda kurung tersebut, kita akan ingin membuat variabel yang menghitung berapa kali kita telah melakukan suatu tindakan. Jadi, kita mendapatkan sesuatu yang terlihat seperti ini 'for(var i = 0;)'.

Kami kemudian ingin memeriksa bahwa saya belum memenuhi suatu kondisi. Jadi, dalam hal ini, kita ingin melihat bahwa nilainya kurang dari 10. Jadi, setelah titik koma, kita tulis 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Jika saya kurang dari 10, kami ingin menambahkannya satu dan kemudian melakukan sesuatu. Jadi, kami menempatkan 'i = i + 1'. Perulangan kita hampir selesai: 'for(var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Setelah itu, kita akan ingin melakukan suatu tindakan. Jadi, setelah tanda kurung terakhir, kita menulis beberapa kurung kurawal dan di antaranya kita akan memasukkan nilai i ke console.log. Ini akan membuat penghitung yang menghitung hingga sembilan.

Dua konstruksi pemrograman terakhir yang akan kita lihat adalah pernyataan 'jika' dan perulangan 'sementara'.

6.6 Jika Pernyataan

Pernyataan 'jika' melakukan tindakan jika kriteria tertentu terpenuhi. Mereka mirip dengan loop 'untuk' dalam konstruksi, dan bekerja sebagai berikut. Misalkan Anda memiliki variabel yang disebut 'burger keju' dan Anda ingin melihat apakah variabel tersebut memiliki nilai 'lezat'. Jika ya, Anda ingin memasukkan 'yum, burger keju' ke layar. Untuk melakukan itu Anda akan menulis sesuatu seperti ini.

Perhatikan bagaimana saya menulis 'if(burger keju == 'enak')'. Anda menggunakan double atau triple equals untuk memeriksa kesetaraan dan single equals untuk menetapkan nilai.

6.7 Perulangan Sementara

Akhirnya, loop 'sementara' mengeksekusi tindakan saat kriteria terpenuhi. Jadi, bayangkan Anda ingin mencatat 'yum, burger keju' sementara burger keju sama enaknya. Untuk melakukan itu, Anda akan menulis yang berikut ini.

Perlu dicatat bahwa ini akan memasuki infinite loop, dan Anda harus menghindari melakukan tindakan pada nilai yang kemungkinan tidak akan berubah. Ini dapat menyebabkan browser Anda terkunci, atau kode Anda tidak berfungsi.

Seperti yang saya sebutkan sebelumnya, ini adalah pengantar yang sangat singkat untuk konstruksi pemrograman dalam Javascript. Anda didorong untuk membaca lebih lanjut tentang subjek yang menarik ini, meskipun sangat besar.

6.8 Uji dirimu sendiri

  • Saya ingin menghitung mundur dari 30. Tulis loop 'untuk' yang akan melakukan itu.
  • Saya ingin membuat variabel bernama 'makeuseof' dan memberinya nilai 'luar biasa'. Bagaimana itu dilakukan?
  • Saya ingin membuat fungsi yang mencetak 'MakeUseOf Is Awesome' saat dipanggil. Tulis fungsi itu.

Bacaan lebih lanjut:

7. Kanvas Kreatif

Kanvas adalah teknologi keren yang memungkinkan Anda menggambar dan membuat animasi tanpa harus menggunakan Flash atau Silverlight. Orang-orang telah menggunakannya untuk membuat hal-hal aneh dan indah, termasuk simulator pengering rambut dan berbagai video game. Ini adalah teknologi yang luar biasa dan luar biasa besar, dalam tutorial ini, saya akan memberi Anda pengantar singkat tentangnya.

Perlu dicatat bahwa Canvas hanya berfungsi di browser web modern. Jika Anda menggunakan IE, Chrome, atau Firefox versi lama, Anda mungkin tidak dapat mengikuti bab ini. Jika demikian, Anda harus mempertimbangkan untuk mengunduh versi terbaru Google Chrome, yang merupakan peramban web tempat saya membuat tutorial ini.

7.1 Memulai Dengan Kanvas

Pertama-tama, Anda harus membuka browser web Anda dan menavigasi ke codepen.io. Buat pena baru.

Sekarang, kita harus mendeklarasikan elemen kanvas. Buat dua tag Canvas pembuka dan penutup. Di dalamnya, Anda harus melewati tiga atribut. Ini adalah lebar dan tinggi elemen Canvas, bersama dengan ID yang Anda berikan. Seperti sebelumnya ketika Anda menyisipkan beberapa video, Anda harus menyertakan pesan mundur.

Sekarang, kita ingin menulis beberapa kode Javascript yang akan menggambar sesuatu ke layar. Kita akan memulai dasar dan membuat kotak merah sederhana.

Kita akan membuat variabel (saya menyebutnya 'demo'), lalu pilih elemen kanvas dan tetapkan ke variabel itu. Untuk melakukannya, Anda menggunakan document.getElementByID() dan meneruskan ID elemen yang ingin Anda pilih.

Baris kedua dalam skrip kita membuat variabel lain yang disebut 'konteks' dan kemudian memanggil 'demo.getContext('2d')' di atasnya. Ini memberi tahu browser bahwa kita akan mengerjakan gambar 2d, lalu meneruskan fungsi yang diperlukan yang kita perlukan untuk menggambar ke layar.

Baris ketiga dan keempat adalah yang benar-benar menggambar ke layar. Baris ketiga mengisi persegi panjang dengan warna merah, sedangkan baris keempat memanggil fillRect, yang memposisikannya dan menentukan panjang dan lebarnya.

Itu tidak mengesankan sekalipun. Mari lakukan sesuatu yang sedikit lebih maju dan gunakan keajaiban Javascript dan Canvas untuk membuat MakeUseOf logo baru.

7.2 Bentuk Dan Teks

Mari kita hapus baris keempat kita, dan ganti dengan yang menempatkan persegi panjang kita di sudut kiri atas dan membentangkannya sepanjang kanvas kita.

Dua argumen pertama menentukan di mana kita ingin memposisikan sumbu x dan y dari bentuk. Mari kita atur keduanya ke '0' untuk saat ini. Argumen ketiga mengacu pada lebar bentuk. Mari kita atur itu ke '200', dan kemudian biarkan argumen keempat menjadi '50'. Anda sekarang harus memiliki sesuatu yang terlihat sedikit seperti ini.

Ini adalah awal yang baik, tetapi tidak menyebutkan MakeUseOf sama sekali. Jadi, kita akan menambahkan beberapa teks. Mari kita buat variabel yang berisi 'makeuseof', dan kita akan memanggil variabel itu 'MakeUseOf'.

Kami kemudian akan ingin membuat variabel konteks lain. Sebut yang ini 'context2', dan pastikan itu 2d. Inilah yang akan kita gunakan untuk menulis teks kita.

Kita ingin teks kita berwarna biru dan melapisi kotak merah kita. Jadi, seperti sebelumnya, kita ingin memberikan fillStyle 'biru'. Sekarang, kita akan memilih karakteristik teks kita. Kami ingin itu menjadi 20px besar, diformat tebal dan menggunakan font Arial. Kami memanggil font pada context2 dan menetapkan nilai 'bold 20px arial'.

Karena kita ingin teks ini menutupi kotak merah sebelumnya, kita perlu memanggil 'textBaseLine' pada context2 dan memberinya nilai atas. Setelah itu selesai, kami memanggil 'fillText' pada context2 dan meneruskannya ke variabel yang berisi teks kami dan koordinat x dan y di mana kami bermaksud untuk menempatkan teks kami. Hasil akhir dari kode kita adalah seperti ini.

Gambar yang dihasilkan oleh kode terlihat seperti ini.

7.3 Sebuah Kata Di Atas Kanvas

Meskipun ini adalah pengenalan yang sangat mendasar untuk Canvas, Anda harus memahami bahwa ini juga merupakan teknologi yang sangat besar, dan yang sangat kuat untuk boot. Panduan ini hanya berfungsi sebagai pengantar untuk membuat grafik menggunakan teknologi baru ini.

cara mencari folder di linux

7.4 Uji Diri Anda

  • Tambahkan slogan berikut ke gambar yang Anda buat: 'Situs teknologi terbaik yang pernah ada!'
  • Buat loop 'untuk' yang berjalan selama sepuluh iterasi. Lihat apakah Anda dapat memindahkan gambar Anda ke bawah kanvas, piksel pada suatu waktu.
  • Bungkus gambar Anda dalam suatu fungsi. Apa yang terjadi jika Anda tidak menyebutnya?

Bacaan lebih lanjut:

8. Dimana Selanjutnya?

Terima kasih telah membaca panduan singkat saya tentang teknologi baru yang ditemukan dalam HTML5. Tidak dapat disangkal bahwa HTML5 adalah teknologi masa depan. Itu diadopsi oleh sebagian besar teknologi, karena mudah ditulis dan kuat tanpa batas. Orang-orang melakukan hal-hal luar biasa dengannya sepanjang waktu, dan saya tidak ragu bahwa di masa depan, Anda akan menjadi salah satu dari orang-orang itu. Saya merasa terhormat telah menjadi bagian dari perjalanan Anda ke dunia HTML5 yang liar dan indah.

Saya mohon untuk terus belajar. Terus coding. Terus naik level dan tingkatkan, dan dalam waktu singkat Anda akan menggunakan teknologi yang telah diperkenalkan dalam panduan singkat ini untuk menciptakan produk yang luar biasa.

Membagikan Membagikan Menciak Surel Apakah Layak Mengupgrade ke Windows 11?

Windows telah didesain ulang. Tetapi apakah itu cukup untuk meyakinkan Anda untuk beralih dari Windows 10 ke Windows 11?

Baca Selanjutnya
Topik-topik yang berkaitan
  • Wordpress & Pengembangan Web
  • HTML5
  • Bentuk panjang
  • Panduan Bentuk Panjang
Tentang Penulis Matthew Hughes(386 Artikel Diterbitkan)

Matthew Hughes adalah seorang pengembang perangkat lunak dan penulis dari Liverpool, Inggris. Dia jarang ditemukan tanpa secangkir kopi hitam pekat di tangannya dan sangat menyukai Macbook Pro dan kameranya. Anda dapat membaca blognya di http://www.matthewhughes.co.uk dan mengikutinya di twitter di @matthewhughes.

More From Matthew Hughes

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan