為廣告建立 Shell
AMPHTML 廣告所需的 HTML 是 AMP 頁面所需的 AMPHTML 的變體。讓我們透過建立 AMPHTML 廣告的 Shell 來熟悉必要的程式碼。
使用您慣用的文字編輯器，建立名為 my-amphtml-ad.html 的 HTML 檔案。將下列 HTML 標記複製到該檔案中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My amphtml ad</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
</body>
</html>
此標記適用於基本的有效 HTML 檔案。請注意，我們加入了 meta viewport 標籤，以便我們擁有回應式 viewport。
現在，讓我們修改 HTML 以使其成為 AMPHTML 廣告。
在 <html> 標籤中，加入 ⚡4ads 屬性，將文件識別為 AMPHTML 廣告。或者，您可以指定 amp4ads 屬性，它也有效。
<!doctype html>
<html ⚡4ads>
<head>
...
注意 – 與 AMP 頁面不同，AMPHTML 廣告不需要
<link rel="canonical"> 標籤。AMPHTML 廣告需要其自身的 AMP 執行階段版本，因此將下列 <script> 標籤加入至文件的 <head> 區段
<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
AMPHTML 廣告素材需要與 AMP 頁面不同的，且相當簡單的 樣板 樣式行。將下列程式碼加入至您的 <head> 區段
<style amp4ads-boilerplate>body{visibility:hidden}</style>
若要設定 AMPHTML 廣告的樣式，您的 CSS 必須使用 <style amp-custom></style> 標籤嵌入在 AMPHTML 文件中 <head> 區段。由於我們正在呈現基本圖片廣告，因此我們不需要任何 CSS，所以我們不會加入這些標籤。
注意 – 對於 AMPHTML 廣告，內嵌樣式表的最大大小為 20 KB。深入瞭解 AMPHTML 廣告規格中的 CSS 需求。
以下是您的 HTML 檔案的完整程式碼
<!doctype html>
<html ⚡4ads>
<head>
<meta charset="utf-8">
<title>My amphtml ad</title>
<meta name="viewport" content="width=device-width">
<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
<style amp4ads-boilerplate>body{visibility:hidden}</style>
</head>
<body>
</body>
</html>
您現在擁有有效的 AMPHTML 廣告，雖然它相當空。讓我們建立圖片廣告。