IMPORTANT AMP HTML CHEAT SHEET

Bimbel Jakarta Timur -Minggu, Desember 09, 2018

0

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

AdSense

Include

After the opening body tag, add your ID.

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

Sidebar ☰

Include

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

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

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

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 back to Desktop from AMP

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

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" />

<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

<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

Button changes 'World' to 'John':

<p [text]="'Hello ' + str">Hello World</p>

amp-state

Initialize state:

<amp-state id="thisState">

{

"foo": "bar"

}

</script>

</amp-state>

thisState.foo=="bar"

Update state with AMP.setState()

AMP.pushState

Facebook like

Include

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

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

Example

<amp-accordion>

<h4>Title 1</h4>

</section>

<h4>Title 2</h4>

<div>Add any <strong>HTML</strong> content.</div>

</section>

<h4>Title 3</h4>

<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://intitute.blogspot.com/2018/12/important-amp-html-cheat-sheet.html

Tags: Instituteistic

IMPORTANT AMP HTML CHEAT SHEET

Hello World

Images

Basic syntax

Responsiveness

Layout types

CSS media queries

Element media queries:

Placeholder

Fallback

Hide loading indicator

Google Analytics

Include

AdSense

Include

After the opening body tag, add your ID.

Sidebar ☰

Include

Custom CSS:

amp-sidebar

Facebook comments

Include

Code

Social share buttons

Include

Code

Carousel

Include

Code

Important ‼

Define AMP page location on Desktop site

Link back to Desktop from AMP

Image tag

Keep in mind!

Common attributes

Video

Include

Example

Attributes

Youtube Video

Actions, events

Syntax

Example

Events

amp-bind

amp-state

Facebook like

Include

iFrame

Include

Use it for Google Maps or anything else

Accordion menu

Include

Posting Komentar

Tutorship Vista, Bimbel Pendampingan Akademik SD SMP SMA di Jakarta Timur

Formulir Kontak