建立廣告外殼
AMPHTML 廣告所需的 HTML 是 AMP 頁面所需的 AMPHTML 的變體。 讓我們透過建立 AMPHTML 廣告外殼來熟悉必要的程式碼。
使用您喜愛的文字編輯器，建立一個名為 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 標籤，以便我們擁有 回應式視窗。
現在，讓我們修改 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 廣告，雖然它相當空。讓我們建立圖片廣告。