Hello World

Introduction

An introduction into how to create AMPHTML ads. AMPHTML ads are ads implemented using AMPHTML. The AMPHTML ads runtime is based on the AMP runtime and provides the same performance benefits. However, there are a few things that make them different from normal AMPHTML files.

The AMPHTML Validator features a special validation mode for AMPHTML ads.

Markup

Doctype declaration is required.

<!doctype html>

This tells everyone that this is an AMPHTML ads file.

<html ⚡4ads lang="en">

Head

The charset definition must be the first child of the <head> tag.

<meta charset="utf-8">

AMPHTML ads require a custom version of the AMP runtime.

<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>

The AMPHTML ads boilerplate which is shorter than the regular AMP boilerplate.

<style amp4ads-boilerplate>body{visibility:hidden}</style>

CSS must be embedded inline as well.

<style amp-custom>
  h1 {
    color: red;
  }
</style>

Body

Inside the body, AMPHTML ads are only allowed to use a restricted set of HTML and AMPHTML elements as described in the spec.

Hello World

<h1>Hello World</h1>

Check out the other AMPHTML ads samples to learn how to create more sophisticated AMPHTML ads.

هل تحتاج إلى مزيد من التوضيح؟

إذا لم تكن الإيضاحات الموجودة في هذه الصفحة تُجيب على جميع أسئلتك، فلا تتردد في التواصل مع مستخدمي AMP الآخرين لمناقشة حالة الاستخدام المحددة لديك بالضبط.

الذهاب إلى Stack Overflow

هل هي ميزة غير موضحة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

تعديل العينة على GitHub