做動畫學物理‧課堂活動01

寫出第一個網頁

任務

認識HTML網頁結構

並連結到myScript.js

新增一個檔案 index.html
用文字編輯器打開它

輸入


<!DOCTYPE html>

讓瀏覽器知道這是一個html文件

接著加入一對html標籤


<!DOCTYPE html>
<html>

</html>

這對html標籤是文件的開頭與結尾

標籤投與標籤偉名稱必須相同，只是結尾多了斜線"/"

在html標籤內加入一對body標籤


<!DOCTYPE html>
<html>
    <body>

    </body>
</html>

body標籤被包在html標籤裡

在body標籤內加入一對p標籤，p標籤裡輸入一些文字


<!DOCTYPE html>
<html>
    <body>

        <p> p就是paragraph，就是段落，understand? </p>
    
    </body>
</html>

存檔(Crtl+S)，然後用瀏覽器打開看

恭喜！

你完成了第一個網頁

讓我們繼續修改下去

回到文字編輯器
在html標籤內，body標籤外，加入head標籤
並在head標籤裡，加入title標籤


<!DOCTYPE html>
<html>
    <head>

        <title> 我的標題超帥 </title>
    
    </head>
    <body>

        <p> p就是paragraph，就是段落，understand? </p>
    
    </body>
</html>

注意，head 與 body 都在 html 內
但是兩者地位相等

文字編輯器存檔(Crtl+S)
瀏覽器重新整理
看結果

真帥，讓我們繼續修改下去

在 head 的標籤頭加入 script


<head>
    <title> 我的標題超帥 </title>

    <script>
        console.log('Hello world!!');
    </script>
    
</head>

網頁更新後，按右鍵→檢查/檢測元素
叫出主控台(console)，看看是否正常輸出

恭喜，你剛剛寫出了一個
javascript 程式

但是以後程式會有很多行

所以要寫到另一個檔案

新增一個檔案 myScript.js，用文字編輯器打開它

輸入剛剛那句


console.log('Hello world, 外部js檔!!');

存檔，要存在 index.html 同一個資料夾喔！

回到 index.html，修改 script 標籤


<head>
    <title> 我的標題超帥 </title>

    <script src="myScript.js"></script>
    
</head>

存檔，到瀏覽器看看有什麼變化

回到 index.html，在 body 標籤裡加入 onload


<body onload="init();">
    ......
</body>

存檔，再去修改 myScript.js

在 myScript.js裡，加入名為 init 的 function


console.log('Hello world, 外部js檔!!');

function init(){
    console.log('我是在 init 裡面喔!');
}

存檔，去瀏覽器看變化

ps: init = initialize = 初始化 = 程式起點

[下載完成的檔案]

補充：認識HTML標籤結構

< tagmane > content </ tagmane >

< 標籤名 > 裡面的內容 </ 標籤名 >

更詳細說明如下(↓)

舉例


<body>
    <p>
        一段文字
    </p>
</body>

p 的 content 是一段文字

body 的 content 是一對p

HTML標籤結構

< tagmane attribute = value > content </ tagmane >

< 標籤名屬性 = 值 > 內容 </ 標籤名 >

舉例


<body background="content/icon/BACK3.jpg" >
    <img src="aaa.png" >
    <a href="http://haha90.phy.ntnu.edu.tw/">點我連結到好好玩物理網</a>
    <p align="center" style="line-height:180%; color:blue;">
        一段1.8行高，置中對齊的藍色文字
  　</p>
<body>