IMPORTANT AMP HTML CHEAT SHEET - Bimbel Jakarta Timur >

Tempat Bimbel Terdekat Terbaik dan Murah di Jakarta Timur, Rujukan Soal Materi Ujian, Matematika IPA Fisika Kimia Biologi, SD SMP SMA Mahasiswa Guru

                                                                            

Bimbel Jakarta Timur

Alamat: Jl. Wijaya Kusuma I No.212, RT.1/RW.7, Malaka Sari, Kec. Duren Sawit, Kota Jakarta Timur, Daerah Khusus Ibukota Jakarta 13460

WA : +62 895-3222-88565

Peta Lokasi

Articles/pictures/videos in various disciplines such as mathematics, science and computational science. Explore advanced logical thinking, conceptual ability,  and enhance students understanding of science and mathematics, primary education, secondary education, higher education, teacher education,  and non-formal education

IMPORTANT AMP HTML CHEAT SHEET

IMPORTANT AMP HTML CHEAT SHEET
Share it:
Inspirasi,Ilmu Pengetahuan,
IMPORTANT AMP HTML Cheat Sheet






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>


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>
Share it:

Instituteistic

Post A Comment:

0 comments:

Terimakasih atas komentar yang sopan, bijak, dan koreksinya (bilamana ada kesalahan, karena saya hanya manusia biasa yang tidak luput dari kesalahan) ^_^