AMP HTML Merhaba Dünya!

AMP HTML tamamen mevcut web teknolojileri üzerine kurulmuştur. HTML, CSS ve JavaScript’in bazı bölümlerini kısıtlayarak güvenilir performans elde etmektedir. Bu sınırlamaları telafi etmek için AMP HTML, zengin içerik için temel HTML’nin ötesinde bir dizi özel …

Yazan: Ahmet Çadırcı

Tarih:

AMP HTML tamamen mevcut web teknolojileri üzerine kurulmuştur. HTML, CSS ve JavaScript’in bazı bölümlerini kısıtlayarak güvenilir performans elde etmektedir. Bu sınırlamaları telafi etmek için AMP HTML, zengin içerik için temel HTML’nin ötesinde bir dizi özel öğe tanımlar. Bu örnekler, geçerli bir AMP HTML dosyası oluşturmak için neyin gerekli olduğunu gösterir.

Bu herkese bunun bir AMP dosyası olduğunu söyler. <html amp> olarak çalışır.

Head Kısmı

Head bölümünün başlangıcı

<!doctype html>
<html ⚡>
<head>

Karakter seti tanımı, etiketinin ilk kısmı olmalıdır.

<meta charset="utf-8">

AMP HTML çalışma zamanı etiketinin ikinci kısmı olarak yüklenmelidir.

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

AMP HTML dosyaları normal HTML’ye işaret eden kanonik bir bağlantı gerektirir.

<link rel="canonical" href="http://ahmetcadirci.local/">

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

CSS kodlarının gömülü olması gerekir.

<style amp-custom>
    h1 {
      color: red;
    }
  </style>

AMP HTML demirbaşı.

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Head bölümünün bitişi

</head>

Body Kısmı

Body bölümünün başlangıcı

<body>

Çoğu HTML etiketi doğrudan AMP HTML’de kullanılabilir.

<h1>Merhaba Dünya!</h1>

<img> etiketi gibi belirli etiketler, eşdeğer veya biraz geliştirilmiş özel AMP HTML etiketleri ile değiştirilmiştir.

<amp-img src="/img/amp.jpg"
      width="1080"
      height="610"
      layout="responsive"></amp-img>

AMP HTML dosyanızın geçerli AMP HTML olup olmadığını kontrol etmek için AMP Validator‘ı kullanabilirsiniz. AMP HTML URL’sinin sonunu #development=1 eklemeniz yeterlidir. Doğrulama hataları Javascript konsolunda yazdırılacaktır. AMP ile oluşturulan bu web sitesini kullanarak deneyebilirsiniz.

Tarayıcı Uzantısı

AMP Validator’a doğrudan bir tarayıcı uzantısı kullanarak tarayıcınızın araç çubuğundan erişilebilir. Göz attığınızda, otomatik olarak ziyaret edilen her AMP sayfasını doğrular ve sayfanın renkli bir simge olarak geçerliliğini görsel bir şekilde gösterir.

Bir AMP sayfasında hata olduğunda, uzantının simgesi kırmızı renkte gösterilir ve karşılaşılan hataların sayısını görüntüler.

AMP sayfasında herhangi bir hata olmadığında, simge yeşil renkte gösterilir ve varsa uyarı sayısını görüntüler.

Sayfa AMP olmadığı halde sayfa bir AMP sürümü bulunduğunu gösterdiğinde, simge bağlantı simgesiyle birlikte mavi bir renkte gösterilir ve uzantıyı tıklamak tarayıcıyı AMP sürümüne yeniden yönlendirecektir.

Body kısmının bitişi

</body>
</html>

Tüm Kodlar Bir Arada

<!doctype html>
<html ⚡>
  <head>
  <meta charset="utf-8">
    
  <script async src="https://cdn.ampproject.org/v0.js"></script>
    
  <link rel="canonical" href="http://ahmetcadirci.local/">
    
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    
  <style amp-custom>
    h1 {
      color: red;
    }
  </style>
    
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    
</head>
  
<body>
  
   <h1>Merhaba Dünya!</h1>
  
   <!-- Responsive resim kodu -->
   <amp-img src="http://lorempixel.com/400/200"
      width="400" 
      height="200" 
      layout="responsive">
  </amp-img>
  
</body>
  
</html>

Kodlarının Çıktısı