在這一步中，你打開源文件，熟悉你自己的 Dart 和 HTML 代碼，然后運行這個 App。
## 新建一個 1-blankbadge 目錄
在Dart編輯器中，點擊 `1-blankbadge` 下 `web` 目錄左邊的小箭頭，展開 `web` 目錄。這個目錄包含一個 `piratebadge.css` 文件，一個 `piratebadge.dart` ，和一個 `piratebadge.html` 文件。
## 打開文件
在Dart編輯器中，通過雙擊文件名來打開 `piratebadge.dart` 文件和 `piratebadge.html` 文件
## 查看代碼
熟悉一下這個框架應用的 HTML 和 Dart 代碼。
`piratebadge.html`
<html>
<head>
<meta charset="utf-8">
<title>Pirate badge</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="piratebadge.css">
</head>
<body>
<h1>Pirate badge</h1>
?
<div class="widgets">
TO DO: Put the UI widgets here.
</div>
<div class="badge">
<div class="greeting">
Arrr! Me name is
</div>
<div class="name">
<span id="badgeName"> </span>
</div>
</div>
?
<script type="application/dart" src="piratebadge.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
關鍵信息：
-
在這次代碼試驗中，你對 `piratebadge.html` 文件的所有更改都是在 `class` 為 `widgets` 的 `<div>` 標簽中進行的。
-
在后續步驟中, `id` 為 `badgeName` 的 `<span>` 標簽會被具有用戶輸入功能的Dart代碼升級。
-
第一個 `<script>` 標簽引入了一個主文件，`piratebadge.dart` 文件。
-
Dart 虛擬機可以原生地運行 Dart 代碼。 Dart 虛擬機會在 Dartium 中構建－－一個特殊的，可以讓你運行Dart App的 Chromium 瀏覽器。
-
`packages/browser/dart.js` 腳本會檢查原生Dart支持，同時引導Dart虛擬機載入編譯JavaScript腳本。
`piratebadge.dart`
void main() {
// 你的應用從這里開始
}
關鍵信息：
-
這個文件包含一個程序的入口 main() 方法. 在 `piratebadge.html` 文件的 `<script>` 標簽會通過運行這個方法來開始應用。
-
main() 方法是一個 `top-level` 的方法。
-
一個 `top-level` 的變量或者方法是在類外進行公開定義的
## 運行這個應用
在Dart編輯器中運行一個應用：右擊 `piratebadge.html` 文件然后選擇 `Run in Dartium`。
**圖片 2.1** 運行
Dart 編輯器啟動了 Dartium，在構建之后，讀取到了 `piratebadge.html` 文件。 `piratebadge.html` 文件啟動了這個應用并且調用了main()方法。
你應該看到如下結果。
**圖片 2.2** 運行
