1.5 第一個網頁

練習：第一個網頁

使用編輯器，在 html_css 建立一個 practice 資料夾，以做練習用。

然後在 practice 資料夾裡，新增以下四個資料夾及一個 index.html 檔案：

  • css/ ←「 / 」表示這是一個資料夾，建立 css 資料夾。

  • fonts/

  • images/

  • js/

  • index.html ← 這是檔案，副檔名為「html」。

第一步：撰寫 html

編輯 index.html

<!doctype html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <title>這是網頁標題</title>
  </head>
  <body>
    <h1>這是內文標題</h1>
  </body>
</html>

寫好後，用瀏覽器開啟看看。index.html 點擊兩下，可於瀏覽器中直接開啟。課堂上建議先使用 Chrome。

第二步：撰寫 CSS

以下原始碼放在 </head> 結尾標籤之前：

<style>
  h1{
    color: red;
  }
</style>

第三步：撰寫 JS

以下原始碼放在 </body> 結尾標籤之前：

<script>
  var h1 = document.getElementsByTagName("h1")[0];
  h1.addEventListener("click", function(){
    alert("open dialog");
  });
</script>

這門課不會上到 JavaScript，但還是先瞭解基本的放置位置。

最後完成的一個網頁

<!doctype html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <title>這是網頁標題</title>
    <style>
    h1{
      color: red;
    }
    </style>
  </head>
  <body>
    <h1>這是內文標題</h1>

    <script>
      var h1 = document.getElementsByTagName("h1")[0];
      h1.addEventListener("click", function(){
        alert("open dialog");
      });
    </script>
  </body>
</html>

即完成了一個有 HTML、CSS、JavaScript 網頁。

觀察：

1、瀏覽器開啟的頁面

2、滑鼠右鍵 → 檢視原始碼

使用 VS Code 安裝 live-server 套件

影片示意：

就產生了 http://127.0.0.1:5500 網址。

Previous1.4 開發工具簡介Next2 HTML

Last updated