Normal bir HTML sayfası oluşturma

Proje dizininde, article.html adlı bir dosya bulacaksınız. Bu, AMP'ye eşdeğer bir sayfa oluşturduğumuz haber makalesidir.

article.html dosyasındaki kodun tamamını kopyalayın ve yeni bir dosyaya yapıştırın.
Yeni dosyayı article.amp.html olarak kaydedin.

NOT - AMP dosyalarınızı .amp.html olarak adlandırmanız gerekmez. Aslında, AMP dosyaları istediğiniz herhangi bir uzantıya sahip olabilir. Yayıncıların url'deki parametreleri kullanarak AMP sayfalarını standart sürümlerinden ayırdıklarına sıkça rastlanır. Örneğin: http://publisher.com/article.html?amp.

article.amp.html dosyanız aşağıdaki gibi görünmelidir:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>News Site</header>
    <article>
      <h1>Article Name</h1>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas
        tortor sapien, non tristique ligula accumsan eu.
      </p>
    </article>
    <img src="mountains.jpg" />
  </body>
</html>

Bu, aşağıdaki genel statik haber makalesi öğelerine sahip kasıtlı olarak basitleştirilmiş bir sayfadır: CSS, JavaScript ve bir resim etiketi.

Makalenin AMP versiyonu şu anda orijinal makalenin sadece bir kopyası. Onu bir AMP'ye çevirelim.

Başlangıç olarak AMP kütüphane dosyasını ekleyeceğiz. Bu tek başına yeni dosyanızı geçerli bir AMP sayfası yapmaz, ancak aşağıda AMP kütüphanesinin bunu düzeltmek için ne yapmamız gerektiğini anlamamıza nasıl yardımcı olabileceğini göreceğiz.

AMP kütüphanesini eklemek için <head> etiketinin altına bu satırı ekleyin:

<script async src="https://cdn.ampproject.org/v0.js"></script>

Yeni article.amp.html sayfasını tarayıcınıza http://localhost:8000/article.amp.html adresinden yükleyin ve ardından Chrome'da (veya tercih ettiğiniz tarayıcıda) Geliştirici Konsolunu açın.

Geliştirici Konsolunda JavaScript çıktısını incelediğinizde (Konsol sekmesinin seçili olduğundan emin olun), şu kayıt günlüğü girişini görmelisiniz:

Powered by AMP ⚡ HTML

AMP kütüphanesi, sayfanızın geçerli bir AMP belgesi olmasını engelleyen herhangi bir şey olup olmadığını size söyleyen bir AMP doğrulayıcı içerir. Bu parça tanımlayıcısını belge URL'nize ekleyerek AMP doğrulayıcıyı etkinleştirin:

#development=1

Örneğin:

http://localhost:8000/article.amp.html#development=1

Geliştirici Konsolunda birkaç doğrulama hatası almanız gerekir (bunları görmek için tarayıcınızda sayfayı manuel olarak yenilemeniz gerekebilir):

AMP validation errors for our sample

Bunu geçerli bir AMP belgesi haline getirmek için tüm bu hataları düzeltmemiz gerekecek - bu kod laboratuvarında yapacağımız şey tam olarak bu.

Bunu yapmadan önce, bir mobil haber makalesi üzerinde çalıştığımız için tarayıcının geliştirici araçlarında bir mobil cihaz deneyimini simüle edelim. Örneğin, Chrome DevTools'ta cep telefonu simgesini tıklayın ve menüden bir mobil cihaz seçin.

Tarayıcınızda aşağıdaki gibi bir simüle edilmiş mobil çözünürlük görmelisiniz:

Mobile simulation of our AMP page

Artık işe koyulmaya hazırız! Doğrulama hatalarını tek tek inceleyelim ve bunların AMP ile nasıl ilişkili olduğunu ele alalım.

Önceki bölüm Sonraki bölüm