Google Font adalah salah satu layanan yang disediakan Google untuk memudahkan web developer dalam menghasilkan desain yang menarik dengan meyediakan font-font gratis. Fitur ini dapat anda akses pada alamat: https://www.google.com/fonts.
Google menyediakan 3 cara, yakni dengan menggunakan tag <link>,perintah CSS @import, dan dengan JavaScript. Ketiga cara ini relatif tidak terlalu berbeda dari cara penggunaanya. Anda tinggal copy paste kode tersebut ke halaman HTML. Untuk kali ini, saya akan menggunakan cara dengan tag <link>. Hasil Praktikum
Kesimpulan
Pada praktikum ini digunakan perintah CSS @import untuk menghubungkan google fonts dengan web. Untuk jenis font yang digunakan disini adalah Open Sans Italic.
CSS linear-gradient adalah sebuah visual effect yang dihasilkan oleh perubahan dan pergeseran warna (gradasi) diantara 2 warna atau lebih. Arah gradasi atau perubahan warna ini dapat terjadi secara vertikal (dari atas ke bawah atau sebaliknya) dan secara horizontal (dari kiri ke kanan atau sebaliknya). Teknik horizontal centering di CSS merupakan penggunaan beberapa properti untuk menyelaraskan elemen horizontal. Beberapa properti yang digunakan seperti margin, position dan lain sebagainya.
Tugas Praktikum
tirukan petunjuk praktikum yang diberikan
Petunjuk Praktikum
1. Mengaplikasikan CSS Linear Gradient
2. Menambahkan sprite berikutnya
3. Me-resize sprite menggunakan CSS
Hasil Praktikum
Kesimpulan
Untuk mendapat gambar yang berlayer pada spritesheet kita bisa menggunakan css linear-gradient untuk mengatur gradasi warna yang sesuai dengan spritesheet. Kemudian apabila kita ingin me-resize spritesheet menggunakan css, kita cukup mengatur ukuran div dengan merubah nilai pada width dan height dan kemudian mengatur letak posisi gambar dan ukuran dari background yang diinginkan.
Tujuan Belajar membuat Ads Banner berbasis HTML5. Alat Codepen Browser Bahan spritesheet.png spritesheet.css Dasar Teori Banner ads adalah bentuk iklan yang dipakai di jaringan Internet. Bentuk iklan daring ini biasanya merupakan bagian dari suatu halaman web yang dipakai untuk menarik perhatian penjelajah supaya mengunjungi situs web yang dimaksud. Spanduk ini biasanya dibuat menggunakan format gambar (JPG, GIF, PNG), skrip Java, dan objek multimedia lainnya. Spanduk modern bahkan sudah disertai suara dan animasi sehingga terlihat lebih menarik. Ada berbagai ukuran yang dipakai, mulai dari yang sangat kecil, melebar, memanjang, hingga yang melintang. Tugas Praktikum tirukan petunjuk praktikum yang diberikan Petunjuk Praktikum 1.Membuat container
Mengenal dan membuat CSS Spritesheet dari kumpulan gambar.
Alat
Codepen
Bahan
royalti free image
Dasar Teori
CSS Sprite
Teknik css sprite adalah teknik untuk menggabungkan beberapa images menjadi satu supaya dalam pemanggilan images hanya satu yang dipanggil meski yang digunakan adalah images yang berbeda sekaligus mengurangi permintaanhttp://.
Untuk membuat CSS Sprite, yang harus diperhatikan adalah posisi gambar (background-position), ukuran gambar (width - height), dan pengulangan gambar (background-repeat). Posisi dan ukuran gambar nantinya akan menentukan peletakan gambar, sedangkan pengulangan gambar akan berpengaruh terhadap tampilan gambar yang dihasilkan. Untuk itu gunakan CSS Sprite ini pada gambar - gambar yang tidak diulang (no-repeat)
Kelebihan CSS Sprite
Menggunakan css sprite bisa mempercepat dalam loading gambar karena dengan meletakkan beberapa gambar dalam 1 file gambar, dapat menghemat proses request gambar ke server. Keuntungan yang lainnya, dan merupakan keuntungan utama dari penggunaan CSS sprite adalah penggunaan bandwidth akan menjadi semakin hemat
Tujuan Mengetahui cara merekam gambar pada browser dengan menggunakan HTML dan Javascript Alat Notepad ++ Dasar teori Caman js CamanJS kepanjangan dari Canvas Manipulation JavaScript adalah manipulasi kanvas dalam Javascript. Ini adalah kombinasi dari interface yang sederhana digunakan dengan teknik editing gambar / kanvas yang canggih dan efisien. CamanJS sangat mudah untuk memperluas atau memberikan filter baru dan plugin, dan dilengkapi dengan beragam fungsi editing gambar. Camanjs adalah library independen yang bekerja baik dalam NodeJS dan browser.
Tugas Praktikum Menyajikan gambar dan tombol untuk mengubah filter gambar.
Hasil Praktikum
Camera capture akan berhasil dijalankan dengan catatan dibuka dengan menggunakan alamat "https://" didepannya.. apabila link diatas tidak berhasil, silahkan kunjungi lihat demo
Tujuan Mengenal cara menyajikan file gambar dilengkapi button filter menggunakan camanjs.
Alat Notepad ++
Bahan
Jquery
Bootstrap
Camanjs
Dasar teori Caman js CamanJS kepanjangan dari Canvas Manipulation JavaScript adalah manipulasi kanvas dalam Javascript. Ini adalah kombinasi dari interface yang sederhana digunakan dengan teknik editing gambar / kanvas yang canggih dan efisien. CamanJS sangat mudah untuk memperluas atau memberikan filter baru dan plugin, dan dilengkapi dengan beragam fungsi editing gambar. Camanjs adalah library independen yang bekerja baik dalam NodeJS dan browser.
Tugas Praktikum Menyajikan gambar dan tombol untuk mengubah filter gambar.
Dasar Teori Css Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Bootstrap Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton. Saat ini Bootstrap dikembangkan secara open source dengan lisensi MIT.
Jquery UI JQuery UI adalah plugin komponen user interface (hal-hal yang berhubungan dengan antarmuka pengguna) berupa interaksi, widget berfitur lengkap dan efek animasi yang berada di bawah framework JQuery.Setiap komponen dibangun sesuai dengan arsitektur kerja JQuery (menemukan sesuatu, kemudian memanipulasinya) dan memiliki kemampuan untuk menerima tema yang bermacam-macam sesuai dengan keperluan desain Slider, button, dialog boxkotak dialog/modal, accordion, tooltip, tabs, dihasilkan dari jquery ui.
Tugas Praktikum Membuat dan mendesain tombol, slider video di web
Dasar Teori Css Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Bootstrap Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton. Saat ini Bootstrap dikembangkan secara open source dengan lisensi MIT.
Jquery UI JQuery UI adalah plugin komponen user interface (hal-hal yang berhubungan dengan antarmuka pengguna) berupa interaksi, widget berfitur lengkap dan efek animasi yang berada di bawah framework JQuery.Setiap komponen dibangun sesuai dengan arsitektur kerja JQuery (menemukan sesuatu, kemudian memanipulasinya) dan memiliki kemampuan untuk menerima tema yang bermacam-macam sesuai dengan keperluan desain Slider, button, dialog boxkotak dialog/modal, accordion, tooltip, tabs, dihasilkan dari jquery ui.
Tugas Praktikum Membuat dan mendesain tombol, slider audio di web
HTML adalah singkatan dari HyperText Markup Language yaitu sebuah bahasa untuk memarkup (memformat). HTML memberitahu Web Browser bagaimana cara menampilkan konten. HTML memisahkan "konten" (kata-kata, gambar, audio, video dan lainnya) dari "Penampilan" (Definisi dari tipe konten dan instruksi bagaimana tipe konten tersebut harus ditampilkan). HTML menggunakan beberapa elemen yang telah didefinisikan untuk mengidentifikasi tipe-tipe konten. Element-elemen memiliki satu atau lebih "tag" yang memiliki atau mengekspresikan konten. Tatag diawali dan diakhiri dengan kurung siku, dan tag "penutup" (tag yang menandakan akhir dari konten) diawali dengan garis miring.
Sebagai contoh, elemen paragraf terdiri dari tag pembuka "<p>" dan tag penutup "</p>". Contoh berikit menampilkan sebuah paragraf yang terdapat dalam elemen paragraf HTML:
<p>My dog ate all the guacamole.</p>
Ketika konten tersebut ditampilkan dalam web browser, maka akan terlihat seperti berikut:
Browser menggunakan tag sebagai indikator bagaimana konten yang terdapat di dalam tag ditampilkan.
Elemen-element yang memiliki konten biasanya dapat memiliki elemen lainnya. Sebagai contoh, elemen empasis ("<em>") dapat disertakan di dalam elemen paragraf:
<p>My dog ate <em>all</em> the guacamole.</p>
Ketika ditampilkan, akan terlihat seperti:
Sebagian elemen tidak memiliki konten lainnya di dalamnya. Sebagai contoh, tag image ("<img>") secara sederhana menspesifikasikan nama file dari konten (sebuah gambar) sebagai sebuah atribut:
<imgsrc="smileyface.jpg">
Seringkali sebuah garis miring dituliskan sebelum kurung tutup siku untuk mengindikasikan akhir dari tag. Hal ini bersifat opsional dalam HTML tapi harus dilakukan dalam XHTML (Yakni sebuah skema XML yang mengimplementasikan elemen-elemen HTML).
HTML5
HTML5 lahir pada tahun 2009 yangmerupakan standar baru untuk HTML, XHTML dan DOM HTML. Sejak munculnya HTML versi 4.01, perkembangan situs dunia semakin berkembang. HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). WHATWG bekerja dengan bentuk situs dan aplikasi, sedangkan W3C merupakan pengembang dari XHTM L 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.
Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc.,Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web".
Tujuan dibuatnya HTML5 antara lain:
Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript.
Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
Penanganan kesalahan yang lebih baik.
Lebih banyak markup untuk menggantikan scripting.
HTML5 merupakan perangkat mandiri.
Fitur baru dalam HTML5:
Unsur kanvas untuk menggambar.
Video dan elemen audio untuk media pemutaran.
Dukungan yang lebih baik untuk penyimpanan secara offline.
Elemen konten yang lebih spesifik, seperti artikel, footer, header, navigation, section.
Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.
Beberapa kelebihan yang dijanjikan pada HTML5:
Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.
Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.
Integrasi ('inline') dengan doctype yang lebih sederhana.
Penulisan kode yang lebih efisien.
Konten yang ada di situs lebih mudah terindeks oleh search engine.
Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browser sudah mendukung HTML5.Beberapa browser tersebut seperti Safari, Chrome, Firefox, dan Opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.
HTML Tag
Saat web browser menampilkan sebuah halaman web, web browser membaca halaman web tersebut dari sebuah file teks dan kemudian mencari kode-kode special (dalam hal ini adalah tag HTML) yang ditandai dengan karakter "<" dan ">".
Tag HTML pada umumnya dibuat berpasangan, ada tag pembuka dan ada tag penutup. Format umum tag HTML adalah :
<nama_tag> Teks yang akan ditampilkan </nama_tag>
Sebuah contoh, misalnya judul halaman ini menggunakan tag header :
<h3> Apa itu tag HTML ? </h3>
Tag tersebut akan memberikan informasi kepada web browser untuk menampilkan teks "Apa itu tag HTML ?" dengan style header level 3. Tag HTML dapat menginstruksikan web browser untuk menebalkan sebuah teks (bold), menampilkan dengan format miring/italic, membuatnya sebagai sebuah header dengan level tertentu, atau membuatnya sebagai sebuah hyperlink ke halaman web yang lain.
Sebuah tag penutup </nama_tag> selalu diberikan karakter "/", yang berfungsi untuk memberhentikan proses tagging kepada web browser. Banyak tag HTML yang selalu berpasangan dengan cara seperti ini. Bila kita lupa memberikan tag penutup maka web browser akan menganggap bahwa tag tersebbut berlaku untuk keseluruhan dokumen dan hasil tampilan halaman web tersebut tidak seperti yang kita inginkan.
Penulisan tag-tag HTML tidak memperhatikan penggunaan huruf (case in-sensitive), apakah menggunakan huruf besar atau huruf kecil, akan menghasilkan tampilan yang sama.
Tidak seperti di bahasa pemrograman, kesalahan akibat peletakan atau penggunaan tag HTML tidak akan mengakibatkan sistem komputer menjadi hang atau rusak. Kesalahan tersebut hanya akan berakibat pada tampilan halaman web tersebut.
Web browser memang sengaja dirancang dengan kemampuan mengenali dan melaksanakan 'hanya' beberapa tag HTML dari keseluruhan tag standard W3C. Bila ada tag HTML yang tidak diketahui dalam halaman web yang sedang diproses, web browser akan mengabaikannya seakan-akan tag tersebut tidak ada.
Contoh : <tagsaya><h3>Apa itu tag HTML ? </h3></tagsaya>
akan menampilkan tampilan yang sama dengan <h3>Apa itu tag HTML ? </h3>. Jadi tag <tagsaya> dan </tagsaya> sama sekali diabaikan oleh web browser.
HTML5 Audio Tag
Salah satu tag semantik HTML5 terbaru yang dapat dipakai developer web untuk memperkaya fitur aplikasinya adalah tag audio. Penggunaan tag audio ini sama sekali tidak membutuhkan plugin sejenis flash atau silverlight. Tag audio HTML5 merupakan spesifikasi semantik terbaru HTML yang mempunyai fungsi sebagai berikut :
Mendeteksi input audio dari device internal maupun eksternal
Memutar file audio yang didukung HTML5
Bahkan kita bisa menggunakan audio HTML5 untuk menerapkan speech to text pada aplikasi web
HTML5 AUDIO
Jika pembaca pernah mengunjungi website SoundCloud atau mungkin sering berkunjung kesana. Seperti itulah penerapan tag audio HTML5 yang sudah dimodifikasi sehingga dapat menampilkan efek audio equalizer yang memukau. Untuk mempelajari bagaimana tag <audio> HTML5 berfungsi, kita juga harus mengetahui tipe audio apa saja yang didukung oleh HTML5.
Berikut adalah ringkasan tipe ekstensi jenis file audio dan browser yang didukung oleh semantik baru audio HTML5 :
Audio HTML5 Supports
NO
TIPE AUDIO
BROWSER
1
OGG vorbis
Google Chrome | Firefox | Opera | Safari
2
WAV pcm
Google Chrome | Firefox | Opera | Safari
3
MP3
Google Chrome | Firefox | Internet Explorer | Safari
4
AAC
Google Chrome | Firefox | Internet Explorer | Safari
5
WEBM vorbis
Google Chrome | Firefox | Opera
6
OGG opus
Google Chrome | Firefox
Seiring berkembangnya teknologi dan update terbaru, dari semua browser yang dirangkum dari data Wikipedia di atas. Kemungkinan terjadinya dukungan untuk masing-masing browser sangatlah mungkin. Jadi sebaiknya selalu mengupdate browser ke versi terbaru.
Tugas Praktikum
Tampilkan file audio yang diberikan ke dalam sebuah halaman web menggunakan HTML5 Audio Tag
Buat screenrecord yang menunjukkan percobaan tentang manipulasi audio tag melalui Javascript. Diantaranya adalah penggunaan perintah play(), pause(), dan properti currentTime
Hasil Praktikum
1. Screen record penerapan HTML5 Audio Tag
2. Screen record percobaan manipulasi audio tag dengan Javascript.
Kesimpulan
Untuk menampilkan audio pada browser dapat digunakan HTML5 audio tag yaitu <audio></audio> dan gunakan <source> untuk menentukan file yang akan dimainkan. Atribut controls digunakan untuk menampilkan menu play, pause, bar length, volume yang tersedia otomatis pada html 5. Atribut autoplay digunakan untuk menjalankan file audio secara otomatis ketika browser di load. Selain controls yang tersedia pada html 5, dapat juga digunakan javascript utuk mengatur file audio. Dengan play() untuk memutar file audio, pause() untuk menghentikan sementara file audio, dan CurrentTime=0 untuk mengulang file audio yang dimainkan dari awal. Kesimpulannya penggunaan javascript juga dapat diterapkan untuk mengatur audio yang dijalankan pada browser.
