Create an AMPHTML ad - amp.dev

The ad format used in this tutorial is a simple image ad. AMPHTML ads are similar to traditional HTML ads, but instead of coding them in traditional HTML, they ... AboutAMPWebsitesWebStoriesAMPAdsAMPEmailPageExperienceHowAMPworksVision&MissionUsecasesSuccessStories DocumentationGetStartedGuides&TutorialsComponentsExamplesCoursesTemplatesTools CommunityContributeRoadmapGovernanceWorkingGroups EventsAMPFest2020AMPRoadshow Blog Help Search{{^prevUrl}}{{#result.components.length}}{{#initial}}ImportantComponents{{/initial}}{{^initial}}Components{{/initial}}{{/result.components.length}}{{/prevUrl}}{{#result.components}}{{#initial}}{{/initial}}{{^initial}}{{title}}{{/initial}}{{description}}{{#exampleUrl}}Openexample{{#playgroundUrl}}Openinplayground{{/playgroundUrl}}{{/exampleUrl}}{{/result.components}}{{^prevUrl}}{{#result.pages.length}}{{#initial}}PopularArticles{{/initial}}{{^initial}}Results{{/initial}}{{/result.pages.length}}{{/prevUrl}}{{#result.pages}}{{title}}{{description}}{{/result.pages}}{{#result.isTruncated}}Althoughthereare{{result.totalResults}}hitsintotalwecannotshowmorethan100.{{/result.isTruncated}}LoadmoreSomethingwentwrongwhiletryingtoloadmoresearchresults.Weapologizefortheinconveniencecaused.Pleasetryagainlater.;(Somethingwentwrong……whiletryingtoloadthesearchresults.Weapologizefortheinconveniencecaused.Pleasetryagainlater.¯\_(ツ)_/¯Noresultsfound.Wecouldnotfindanyresultsmatchingyoursearchquery. Selectyourformatforamorestreamlinedexperience TableofcontentsYouwilllearnto: Prerequisites: ToggleSidebar ToggleSidebar DocumentationGuides&TutorialsCreateyourfirstAMPHTMLad CreateanAMPHTMLad CompletedAMPHTMLimagead Inthistutorial,you'lllearnhowtocreateanAMPHTMLadfromscratchthatcanbeservedtoAMPandnon-AMPpages.Theadformatusedinthistutorialisasimpleimagead. AMPHTMLadsaresimilartotraditionalHTMLads,butinsteadofcodingthemintraditionalHTML,theyarecodedinAMPHTML,accordingtotheAMPHTMLadspec.BycreatingtheadsinAMPHTML,theadstakeadvantageofthesameoptimizationsandperformanceutilizedinAMPpages,makingthemafaster,lighterandamoresecurewaytoadvertiseontheweb.Mostofall,theseadscanbedeliveredanywhereontheweb,notjustonAMPpages. Youwilllearnto: CreateavalidAMPHTMLadaccordingtotheAMPHTMLadspec Trackadviewsbyusingtheamp-pixelcomponent VerifytheAMPHTMLadsyntaxbyusingtheAMPvalidator Prerequisites: AbasicknowledgeofHTML,CSS,andJavaScript Abrowserandtexteditorofyourchoice Don'twanttocreateanadfromscratch?UseoneofthefollowingtoolstocreateyourAMPHTMLad: Celtra'sAdCreator GoogleWebDesigner AdobeAnimate(comingsoon) PreviouschapterNextchapter adswebsitesstoriesemail StartCreateyourfirstAMPHTMLadCreatetheshellfortheadCreateanAMPHTMLadCreatetheimageadTrackadviewsValidateAMPHTMLsyntaxCongratulations!LearnAMPforAdsspecificationActionsandeventsCommonelementattributesIntrotoAMPHTMLadsEnableexperimentalfeaturesAMP'sLayoutSystemAMPHTMLLayoutSystemDemonstratingAMPlayoutsValidationWorkflowValidateAMPpagesAMPvalidationerrorsDevelopStyle&LayoutSupportedCSSLayout&mediaqueriesPlaceholders&fallbacksResponsiveimageswithsrcset,sizes&heightsCreateresponsiveAMPpagesAddcustomfontsIncludemedia,iframes&third-partycontentIncludeimages&videoAnimate&TransitionTriggeringCSSanimations&transitionsIntroductiontocomplexanimationsBestpracticesforcreatingaWebStoryadOptimize&MeasureHowtoconfigurebasicanalyticsforyourAMPpagesContributeHowtocontributeContributedocumentationDocumentationtypesAMPterminologyFormattingguides&tutorialsThirdpartycontributionsIntegrateyouradtechnologiesintoAMPReleaseScheduleContributetranslationsIntegratingwithAMPtoservedisplayads Weusecookiestounderstandhowyouuseoursiteandtoimproveyourexperience.Bycontinuingtouseoursite,youacceptouruseofcookiesandprivacypolicy.Gotit!