Setelah menguasai cara menambahkan halaman ke artikel AMP, halaman berikutnya dalam artikel "The Joy of Pets" dapat ditambahkan dengan cara yang hampir sama. Berdasarkan informasi yang diberikan di bawah, lanjutkan membuat halaman lainnya dengan memanfaatkan pengetahuan yang telah Anda pelajari sejauh ini. Jika menemui kesulitan, lihat kode (pets-completed.html) yang telah jadi.
Ingatlah bahwa setiap halaman memerlukan atribut "id" unik (misalnya id="page1").
Halaman 1: Kucing
Menunjukkan cara menampilkan gambar dan teks dalam satu lapisan.
Elemen amp-img responsif (cat.jpg, 720 x 1280 piksel)
Elemen <q> untuk kutipan berikut: Anjing mendekat jika dipanggil. Kucing menerima pesan dan kembali ke Anda. --Mary Bly
Halaman 2: Anjing
Menunjukkan cara menata teks dan menampilkan gambar pengisi layar dengan dua lapisan.
Memuat 2 lapisan:
Lapisan 1: Mengimplementasikan template fill, dan memuat elemen amp-img responsif (dog.jpg, 720 x 1280 piksel).
Lapisan 2: Mengimplementasikan template thirds dan memuat 2 elemen:
Elemen <h1> dengan judul: Anjing
Elemen <p> yang menetapkan grid-area (area petak) yang mengisi lower-third (pertiga bawah) dan memuat teks berikut: Bisa jadi anjing adalah binatang jinak pertama. Mereka telah menemani manusia selama sekitar 10.000 tahun. Beberapa ilmuwan berpendapat bahwa semua anjing, entah jinak maupun liar, memiliki nenek moyang yang sama, yaitu serigala kecil dari Asia Selatan.
Halaman 3: Burung
Menunjukkan cara menata teks, menampilkan gambar pengisi layar, dan memberikan background audio untuk halaman.
Memuat 3 lapisan:
Lapisan 1: Mengimplementasikan template fill, dan memuat komponen amp-img responsif (bird.jpg, 720 x 1280 piksel).
Lapisan 2: Mengimplementasikan template vertical dan memuat satu elemen:
Elemen <h1> dengan judul: Burung
Lapisan 3: Mengimplementasikan template vertical dan memuat satu elemen:
Elemen <q> untuk kutipan berikut: Burung terdiri dari tiga hal: bulu, terbang, dan lagu. Dari ketiganya, bulu adalah yang paling tidak penting.--Marjorie Allen Seiffert
Lapisan ketiga ini menetapkan class="bottom" untuk menyejajarkan elemen turunan dengan bagian bawah layar.
Memutar file audio di latar belakang saat halaman ditampilkan. Anda dapat memutar audio di latar belakang untuk seluruh artikel, atau untuk satu halaman. Untuk memutar audio untuk satu halaman, tambahkan atribut background-audio="assets/bird-singing.mp3" ke elemen <amp-story-page>.
Halaman 4: Kelinci
Menunjukkan cara menata teks dan menampilkan video pengisi layar untuk halaman.
Memuat 3 lapisan:
Lapisan 1: Mengimplementasikan template fill , dan memuat elemen amp-video responsif (rabbit.mp4).
Ingatlah untuk menambahkan skrip wajib untuk komponen amp-video di bagian <head> agar video dapat ditampilkan.
Tetapkan gambar poster (rabbit.jpg). Atribut ini harus ada agar artikel AMP dinyatakan valid.
Setel video agar otomatis diputar dengan atribut autoplay. Atribut ini harus ada agar artikel AMP dinyatakan valid.
Setel video agar otomatis diulang lagi dengan atribut loop.
Setel dimensinya ke width="720"height="1280" dan layout="responsive".
Lapisan 2: Mengimplementasikan template vertical dan memuat satu elemen:
Elemen <h1> dengan judul: Kelinci
Lapisan 3: Mengimplementasikan template vertical dan memuat satu elemen:
Elemen <p> yang memuat teks berikut: Kelinci dapat belajar mematuhi perintah-perintah suara sederhana dan mendekat jika namanya dipanggil, memiliki rasa ingin tahu yang tinggi, dan asyik diajak bermain.
Terapkan class CSS bottom ke lapisan ini untuk menyejajarkan elemen turunan dengan bagian bawah layar.
Artikel "Joy of Pets" kita hampir selesai. Kita akan menggunakan animasi di halaman terakhir untuk menampilkan semua hewan peliharaan itu bersama-sama.
We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our use of cookies and privacy policy.