Learn with Kbdk: AMP Introduction

By
AMP or Amplify your mobile webpages

 The Accelerated Mobile Pages (AMP) Project is a website publishing technology developed by Google.

Introduction

An AMP HTML tutorial - learn the different building blocks of an AMP HTML file. AMP HTML is entirely built on existing web technologies. It achieves reliable performance by restricting some parts of HTML, CSS, and JavaScript. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML. This sample shows what's necessary to create a valid AMP HTML file.
The doctype declaration is required.
<!doctype html>
This tells everyone that this is an AMP file. <html amp> works too.
<html ⚡>
The charset definition must be the first child of the <head> tag.
<meta charset="utf-8">
The AMP runtime must be loaded as the second child of the <head> tag.
<script async src="https://cdn.ampproject.org/v0.js"></script>
AMP HTML files require a canonical link pointing to the regular HTML. If no HTML version exists, it should point to itself.
<link rel="canonical" href="https://amp.dev/documentation/examples/introduction/hello_world/index.html">
AMP HTML files require a viewport declaration. It's recommended to include initial-scale=1.
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
CSS must be embedded inline.
<style amp-custom>
  h1 {
    color: red;
  }
</style>
The AMP boilerplate.
<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>

Body

Most HTML tags can be used directly in AMP HTML.

Hello World!

<h1>Hello World!</h1>
Certain tags, such as the <img> tag is replaced with an equivalent or slightly enhanced custom AMP HTML tags (see HTML Tags in the specification). You can use the AMP Validator to check
if your AMP HTML file is valid AMP HTML. Simply add #development=1 to an AMP URL. Validation errors will be printed in the Javascript console. You can try it with this website which is built with AMP.
Check out the other examples to learn more about AMP.

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

Labels:
Hi, I am K.B.Dharun Krishna, I am a Tech Nerd, I am a very notorious Windows power user. I am constantly learning new technologies. Apart from Blogging, I do Podcasting and I code. I love Retro Gaming and Emulation

Popular posts from this blog

Learn with Kbdk: Examples of Html code for practice(Html)

By
Image
Example 1 <html> <body> <p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p> </body> </html> Example 2 <html> <body> <p>This is<br /> a para<br/> graph with line breaks</p> </body> </html> Example 3 <html> <body> <p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. </p> </body> </html> Example 4 <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html> Example 5 <html> <body> <h1 style="text- align:center">This is heading 1</
Read more

Neet Cracky: The major differences between DNA and RNA

By
Image
Neet Cracky  I know that Google is flooded with many results for this query about the differences between DNA and RNA but I would like to shortlist my points and give you the aptest information required for board exams and other competitive exams. Let's get started with the topic. Let's start with the basics we know that DNA is abbreviated as D eoxy R ibo N ucleic acid and RNA is abbreviated as R ibo N ucleic A cid. You might have wondered why do we study DNA and RNA which are too small to be seen by the naked eye. DNA was first identified by Friedrich Miescher in the late 1860s but in the 1950s DNA was discovered by James Watson and Francis Crick .  Friedrich Miescher a Swiss physician and biologist  discovered RNA in 1868. He named nucleic acid as ' Nuclein '.He was the first scientist to isolate Nucleic acid. In 1889 a scientist known as Altman named nuclein to nucleic acid. The length of all the DNA  present in the human body is 600 trillion mi
Read more

Learn with Kbdk :Html tags reference

By
Image
Tag Description <!--...--> Defines a comment <!DOCTYPE>   Defines the document type <a> Defines a hyperlink <abbr> Defines an abbreviation or an acronym <acronym> Not supported in HTML5. Use  <abbr>  instead. Defines an acronym <address> Defines contact information for the author/owner of a document <applet> Not supported in HTML5. Use  <embed>  or  <object>  instead. Defines an embedded applet <area> Defines an area inside an image-map <article> Defines an article <aside> Defines content aside from the page content <audio> Defines sound content <b> Defines bold text <base> Specifies the base URL/target for all relative URLs in a document <basefont> Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document <bdi> Isolates a part of text that might be formatted in a different direction from other text outside
Read more