Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
ID
English Deutsch Français العربية Español Italiano 日本語 한국어 Português Русский Türkçe 中文

Menambahkan lebih banyak halaman

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.

  • Memuat 1 lapisan:
    • Mengimplementasikan template vertical.
    • Memuat 3 elemen:
      • Elemen <h1> dengan judul: Kucing
      • 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.

Bab sebelumnya Bab selanjutnya