AMP

Adding more pages

Setelah kini Anda menguasai cara menambahkan halaman ke Cerita Web, cara menambahkan halaman berikutnya dalam cerita "The Joy of Pets" sangat mirip. 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 selesai.

KIAT – Ingatlah bahwa setiap halaman membutuhkan atribut "id" yang unik (cth.: id="page1").

Halaman 1: Kucing

Memperagakan cara menampilkan gambar dan teks dalam satu lapisan.

  • Berisi 1 lapisan:
    • Menerapakan templat vertical.
    • Berisi 3 elemen:
      • Sebuah elemen

        dengan judul: Kucing

      • amp-img (cat.jpg, 720 x 1280px) responsif
      • Sebuah elemen responsif untuk kutipan berikut ini: Anjing datang jika dipanggil. Kucing mengantarkan pesan dan kembali. --Mary Bly

Halaman 2: Anjing

Memperagakan cara menyusun teks dan menampilkan gambar yang memenuhi layar dengan dua lapisan.

  • Berisi 2 lapisan:
    • Lapisan 1: Menerapkan templat fill, dan berisi amp-img (dog.jpg, 720 x 1280px) responsif.
    • Lapisan 2: Menerapkan templat thirds dan berisi 2 elemen:
      • Sebuah elemen

        dengan judul: Anjing

      • Sebuah elemen

        yang menentukan grid-area yang menempati bagian lower-third dan berisi teks berikut ini: Anjing mungkin hewan yang dijinakkan pertama kali. Mereka telah menemani manusia selama sekitar 10.000 tahun. Sejumlah ilmuwan meyakini bahwa semua anjing, jinak dan liar, mempunyai nenek moyang yang sama, yaitu serigala kecil di Asia Selatan.

Halaman 3: Burung

Memperagakan cara menyusun teks, menampilkan gambar yang memenuhi layar, dan menyediakan audio latar belakang untuk halaman.

  • Berisi 3 lapisan:
    • Lapisan 1: Menerapkan templat fill, dan berisi komponen amp-img responsif (bird.jpg, 720 x 1280 piksel).
    • Lapisan 2: Menerapkan templat vertical dan berisi satu elemen:
      • Elemen

        dengan judul: Burung

    • Lapisan 3: Menerapkan templat vertical dan berisi satu elemen:
      • Elemen untuk kutipan berikut ini: Burung terdiri dari tiga hal: bulu, penerbangan, dan lagu. Dari ketiganya, bulu adalah yang paling tidak penting.--Marjorie Allen Seiffert
      • Lapisan ketiga ini menetapkan class="bottom" untuk menyejajarkan elemen anak dengan bagian bawah layar.
  • Memutar berkas audio di latar belakang saat halaman ditampilkan. Anda dapat memutar audio di latar belakang untuk seluruh cerita, 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

Memperagakan cara menyusun teks, menampilkan video yang memenuhi layar untuk halaman.

  • Berisi 3 lapisan:
    • Lapisan 1: Menerapkan templat fill, dan memuat elemen amp-video responsif (rabbit.mp4).
      • Ingatlah untuk menambahkan skrip wajib untuk komponen amp-video di bagian agar video dapat ditampilkan.
      • Tetapkan gambar poster (rabbit.jpg). Atribut ini harus ada agar cerita AMP dinyatakan valid.
      • Atur video agar otomatis diputar dengan atribut autoplay. Atribut ini harus ada agar cerita AMP dinyatakan valid.
      • Atur video agar otomatis diulang lagi dengan atribut loop.
      • Atur dimensinya ke width="720" height="1280" dan layout="responsive".
    • Lapisan 2: Menerapkan templat vertical dan berisi satu elemen:
      • Elemen

        dengan judul: Kelinci

    • Lapisan 3: Menerapkan templat vertical dan berisi satu elemen:
      • Elemen

        yang memuat teks berikut ini: Kelinci dapat belajar mematuhi perintah-perintah suara sederhana dan mendekat jika namanya dipanggil, memiliki rasa ingin tahu yang tinggi, dan asyik diajak bermain.

      • Terapkan kelas CSS bottom ke lapisan ini untuk menyejajarkan elemen anak dengan bagian bawah layar.

Cerita "Joy of Pets" kita hampir selesai. Kita akan menggunakan animasi pada halaman terakhir untuk menampilkan semua hewan peliharaan bersama-sama.