建立廣告的外殼
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 標籤，以便我們擁有一個響應式 viewport。
現在，讓我們修改 HTML，使其成為 AMPHTML 廣告。
在 <html> 標籤中，新增 ⚡4ads 屬性，該屬性將文件標識為 AMPHTML 廣告。 或者，您也可以指定 amp4ads 屬性，這也是有效的。
<!doctype html>
<html ⚡4ads>
<head>
...
注意 – 與 AMP 網頁不同，AMPHTML 廣告不需要
<link rel="canonical"> 標籤。AMPHTML 廣告需要其自身版本的 AMP runtime，因此請將以下 <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> 標籤內嵌在 <head> 部分的 AMPHTML 文件中。 由於我們正在呈現基本的圖片廣告，因此我們不需要任何 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 廣告，儘管它相當空洞。 讓我們建立圖片廣告。