IMPORTANT AMP HTML CHEAT SHEET by Bimbel Jakarta Timur

IMPORTANT AMP HTML CHEAT SHEET by Bimbel Jakarta Timur




Di era digital saat ini, kecepatan dan performa situs web adalah kunci utama untuk memberikan pengalaman terbaik bagi pengguna. Accelerated Mobile Pages (AMP) adalah sebuah inisiatif dari Google yang dirancang untuk memuat halaman web dengan cepat di perangkat mobile. Dengan memanfaatkan AMP, pengembang web dapat memastikan bahwa konten mereka ditampilkan dengan optimal, mengurangi waktu muat, dan meningkatkan keterlibatan pengguna.

Artikel ini akan membahas cheat sheet penting untuk AMP HTML, yang dapat membantu Anda memahami dan mengimplementasikan teknologi ini dengan lebih efisien. Kami akan merangkum berbagai elemen, atribut, dan praktik terbaik yang perlu Anda ketahui agar dapat memaksimalkan penggunaan AMP dalam proyek web Anda.

Mari kita mulai dengan memahami dasar-dasar AMP HTML dan bagaimana ini dapat memberikan manfaat luar biasa bagi situs web Anda.



Hello World


<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello World!</title>
    <link rel="canonical" href="https://htmlcheatsheet.com">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
   {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Hello World",
      "datePublished": "2018-08-08T12:02:41Z",
      "image": [
        "logo.jpg"
     ]
   }
    </script>
    <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>
    <style amp-custom>
      p{
        margin: 1em;
     }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>


Images


Basic syntax


<amp-img src="/m/cheatsheet.jpg" alt="Cheat Sheet" height="200" width="300"></amp-img>

Responsiveness


<amp-img
   src="/narrow.jpg"
   srcset="/wide.jpg 640w,
      /narrow.jpg 320w"
   width="1200"
   height="800"
   layout="responsive"
   alt="demo image">
</amp-img>

Layout types


nodisplay – works like display: none style.
fixed – fixed width & height
responsive – fills container automatically to aspect ratio
fixed-height – keeps the specified height unchanged
fill – fills available height & width
container – lets its children define its size, like a normal div
flex-item – works like display:flex style
intrinsic – responsive until it reaches its height and width

CSS media queries


@media screen and (max-width: 720px){
  p{font-size: 0.9em;}
}

Element media queries:


<amp-img
  media="(min-width: 720px)"
  src="demo.jpg"
  width=300
  height=200
  layout="responsive">
</amp-img>

Placeholder

Shows a placeholder while the element is being loaded:

<amp-anim src="animation.gif"
   layout="responsive"
   width="300"
   height="200">
   <amp-img placeholder
      src="demo.jpg"
      layout="fill">
   </amp-img>
</amp-anim>

Fallback

When an element is not supported:

<amp-img alt="Demo"
  width="300"
  height="200"
  layout="responsive"
  src="videofile.webp">
  <amp-img alt="Demo"
    fallback
    width="300"
    height="200"
    layout="responsive"
      src="image.jpg"></amp-img>
</amp-img>

Hide loading indicator

noloading


Google Analytics


Include


<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Replace UA-XXXXXXXX-1 with your code

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars":{
    "account": "UA-XXXXXXXX-1"
 },
  "triggers":{
    "trackPageview":{
    "on": "visible",
    "request": "pageview"
   }
 }
}

AdSense


Include


<script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>

After the opening body tag, add your ID.


<amp-auto-ads type="adsense" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"></amp-auto-ads>

Sidebar ☰


Include


<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

Custom CSS:


.sidebar{padding: 10px;margin: 0;color: #FFF;font-weight:bold;}
#sidebar1{background: #CE5937;}
.sidebar > li{list-style: none;margin-bottom:10px;}
.sidebar a{text-decoration: none;color: #FFF;}
.close-sidebar{font-size: 1.5em;padding: 5px 15px;cursor: pointer;color: #FFFFFF;}
.headerbar{background: #CE5937;color: #FFF;line-height: 30px;position: fixed;top: 0;left: 0;right: 0;height: 40px;z-index: 1000;}
.headerbar a{text-decoration: none;color: #FFF;}

amp-sidebar


<header class="headerbar">
   <div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div>
   <a href="/" class="site-name">MySite</a>
</header>
<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
   <div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div>
   <ul class="sidebar">
      <li><a href="https://htmlg.com/">Editor</a></li>
      <li><a href="https://html5-templates.com/">Templates</a></li>
      <li><a href="https://htmlcheatsheet.com/">Cheat Sheet</a></li>
   </ul>
</amp-sidebar>

Facebook comments


Include


<script async custom-element="amp-facebook-comments" src="https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js"></script>

Code


<amp-facebook-comments width="300"
   height="350"
   layout="responsive"
   data-numposts="5"
   data-colorscheme="dark"
   data-locale="es_ES"
   data-order-by="time"
   data-href="https://htmlcheatsheet.com/">
</amp-facebook-comments>

Social share buttons


Include


<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

Code


<amp-social-share type="facebook" width="30" height="30"
   data-param-text="HTML Cheat Sheet"
   data-param-url="https://htmlcheatsheet.com">
</amp-social-share>
<amp-social-share type="twitter" width="30" height="30"
   data-param-text="HTML Cheat Sheet"
   data-param-url="https://htmlcheatsheet.com">
</amp-social-share>
<amp-social-share type="gplus" width="30" height="30"
   data-param-text="HTML Cheat Sheet"
   data-param-url="https://htmlcheatsheet.com">
</amp-social-share>

Carousel


Include


<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Code


<amp-carousel width="300"
   height="200"
   layout="responsive"
   type="slides">
   <amp-img src="/img1.jpg"
      width="300"
      height="200"
      layout="responsive"
      alt="a demo image"></amp-img>
   <amp-img src="/img2.jpg"
      width="300"
      height="200"
      layout="responsive"
      alt="another cool image"></amp-img>
   <amp-img src="/img3.jpg"
      width="300"
      height="200"
      layout="responsive"
      alt="and the last one"></amp-img>
</amp-carousel>

Important ‼


Define AMP page location on Desktop site


<link rel="amphtml" href="https://htmlcheatsheet.com/m/">

Link back to Desktop from AMP


<link rel="canonical" href="https://htmlcheatsheet.com/">

Image tag


<amp-img src="/m/cheatsheet.jpg" alt="Cheat Sheet" layout="responsive" height="200" width="300"></amp-img>

Keep in mind!


Don't use !important CSS
https:// highly recommended
No custom .JS files
Only 50Kb inline style allowed in <style amp-custom> </style>

Common attributes


fallback, heights, layout, media, noloading, on, placeholder, sizes, width and height

Video 


Include


<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

Example

<amp-video controls
  width="600"
  height="400"
  layout="responsive"
  poster="geekprank.png">
  <source src="geekprank.webm"
    type="video/webm" />
  <source src="geekprank.mp4"
    type="video/mp4" />
  <div fallback>
    <p>Video element not supported.</p>
  </div>
</amp-video>

Attributes

src, poster, autoplay, controls, controlsList, loop, crossorigin, disableremoteplayback, noaudio, rotate-to-fullscreen

artwork, artist, album, title

Youtube Video


<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<amp-youtube
  data-videoid="VeeFwwAz7no"
  layout="responsive"
  width="480" height="270"></amp-youtube>

Actions, events 


Syntax


eventName:targetId[.methodName[(arg1=value, arg2=value)]]

Example


on="submit-success:lightbox1;submit-error:lightbox2"
<div id="cookie-consent">The site is using Cookies!</div>
<button on="tap:cookie-consent.hide">OK, I understand!</button>

Events


show, hide – shows/hides the target element
toggleVisibility, toggleClass
scrollTo(duration=INTEGER, position=STRING) –
focus – make the target element gain focus
open – opens the amp-image-lightbox with the source image being the one that triggered the action
close – closes the lightbox
change – on input & select
input-debounced – 300ms passed since an input value change
input-throttled – change event fired maximum once every 100ms
tap – click or tap
slideChange – amp-carousel[type="slides"]
toggleAutoplay – amp-carousel[type="slides"]
goToSlide(index=INTEGER) – advance the carousel to the index
lightboxOpen – amp-lightbox fully visible
lightboxClose – amp-lightbox fully closed
sidebarOpen – amp-sidebar fully open
sidebarClose – amp-sidebar fully closed
play, pause, mute, unmute, fullscreen – video controls
firstPlay – first user interaction with video
timeUpdate – video playing position changed
submit – form is submitted
clear – clears values in the inputs
submit-error – form submission response is an error
play, pause – controls amp-audio
refresh – refreshes data from the src and re-renders the amp-list
selectUp(delta=INTEGER), selectDown(delta) – moves the amp-selector up/down by a value
open, close, toggle – amp-sidebar controls
navigateTo(url)
goBack – go back in history
print – Opens the Print Dialog

amp-bind


<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
Button changes 'World' to 'John':
<p [text]="'Hello ' + str">Hello World</p>
<button on="tap:AMP.setState({str: 'John'})">

amp-state

Initialize state:

<amp-state id="thisState">
  <script type="application/json">
   {
      "foo": "bar"
   }
  </script>
</amp-state>
thisState.foo=="bar"
Update state with AMP.setState()
<button on="tap:AMP.setState({foo: 'bar', baz: myAmpState.someVariable})"></button>
<input type="range" on="change:AMP.setState({myRangeValue: event.value})">
AMP.pushState
<button on="tap:AMP.pushState({foo: '123'})">Set 'foo' to 123</button>

Facebook like


Include


<script async custom-element="amp-facebook-like" src="https://cdn.ampproject.org/v0/amp-facebook-like-0.1.js"></script>
Code
<amp-facebook-like width=90 height=20
   layout="fixed"
   data-layout="button_count"
   data-href="https://www.facebook.com/htmlcoding/">
</amp-facebook-like>

iFrame 


Include


<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Use it for Google Maps or anything else


<amp-iframe width="400"
   title="Collection of HTML codes"
   height="300"
   layout="responsive"
   sandbox="allow-scripts allow-same-origin allow-popups"
   allowfullscreen
   frameborder="0"
   src="https://htmlcheatsheet.com/">
   <amp-img layout="fill"
      src="/placeholder.jpg"
      placeholder></amp-img>
</amp-iframe>

Accordion menu


Include


<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
Example
<amp-accordion>
   <section expanded>
      <h4>Title 1</h4>
      <p>Add any text.</p>
   </section>
   <section>
      <h4>Title 2</h4>
      <div>Add any <strong>HTML</strong> content.</div>
   </section>
   <section>
      <h4>Title 3</h4>
      <figure>
         <amp-img src="/demo.jpg"
            width="400"
            height="200"
            layout="responsive"
            alt="description"></amp-img>
         <figcaption>This is an image</figcaption>
      </figure>
   </section>
</amp-accordion>




https://www.radarhot.com/2018/12/important-amp-html-cheat-sheet.html


Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.