Praktikum 11 - Google Fonts

Tujuan

Belajar menggunakan external font dari Google Fonts

Alat

Text Editor
Browser

Bahan

spritesheet.png
spritesheet.css

Dasar Teori

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.

Praktikum 10 - Membuat Ads Banner [Part 2]

Tujuan

Belajar membuat Ads Banner berbasis HTML5.

Alat

Text Editor
Browser

Bahan

spritesheet.png
spritesheet.css

Dasar Teori

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.

Referensi

http://www.mohhasbias.com/prak-10-membuat-ads-banner-part-2/

Praktikum 8 – Membuat Ads Banner

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

2. Menambahkan 2 aset

Hasil Praktikum