內容摘要

建立起一個網頁
最基本的三個語言

用一張圖解釋
三者各自的功能

示意圖

HTML

HTML

一種標記語言（markup language）

HTML

一種標記語言（markup language）

不是程式語言！！！

HTML

一種標記語言（markup language）

不是程式語言！！！

元素 (element)

HTML

一種標記語言（markup language）

不是程式語言！！！

元素 (element)

HTML

一種標記語言（markup language）

不是程式語言！！！

元素 (element)

標籤 (tag)

HTML

一種標記語言（markup language）

不是程式語言！！！

元素 (element)

內容 (content)

標籤 (tag)

示意圖

示意圖

<p> p是段落標籤 </p>

開始標籤

結束標籤

內容

元素

示意圖

還可以加上屬性（Attribute）

還可以加上屬性（Attribute）

有哪些東西是HTML用的

有哪些東西是HTML用的

超連結，連去另一個網頁

有哪些東西是HTML用的

超連結，連去另一個網頁

登入畫面中輸入帳號密碼處

有哪些東西是HTML用的

超連結，連去另一個網頁

登入畫面中輸入帳號密碼處

網站的基礎文本內容

有哪些東西是HTML用的

超連結，連去另一個網頁

登入畫面中輸入帳號密碼處

網站的基礎文本內容

圖片、影片

有哪些東西是HTML用的

超連結，連去另一個網頁

登入畫面中輸入帳號密碼處

網站的基礎文本內容

圖片、影片

表格、列表

有哪些東西是HTML用的

超連結，連去另一個網頁

登入畫面中輸入帳號密碼處

網站的基礎文本內容

圖片、影片

表格、列表

容器

CSS

CSS

不是標準的程式語言

CSS

不是標準的程式語言

也不是標記語言

CSS

不是標準的程式語言

也不是標記語言

風格頁面語言

CSS

不是標準的程式語言

也不是標記語言

風格頁面語言

它能在 HTML 文件中的元素（element）上
套用不同的頁面樣式

CSS

不是標準的程式語言

也不是標記語言

風格頁面語言

它能在 HTML 文件中的元素（element）上
套用不同的頁面樣式

ＳＴＹＬＥ

CSS

CSS的功能

CSS的功能

邊框

CSS的功能

邊框

字體顏色

CSS的功能

邊框

字體顏色

背景顏色

CSS的功能

邊框

字體顏色

背景顏色

排版

CSS的功能

邊框

字體顏色

背景顏色

排版

動畫

JavaScript

動態程式語言

應用於HTML文件中時可以為網頁提供動態的互動技能

可以做非常非常多的事情，讓網頁充滿活力
簡潔，卻也充滿彈性

JavaScript

跑馬燈、相簿、動態版型、回應按鈕點擊等等

遊戲、2D平面、立體的圖像、資料庫系統

JavaScript

• 內建在瀏覽器內的應用程式介面（Application Programming Interfaces，APIs）提供了多樣化的功能，像是動態產生 HTML 以及設定 CSS 樣式、擷取以及處理從使用者的網路攝影機錄下的影像、製作立體圖形或是聲音樣本。
   
• 第三方 API 允許開發者將他們的網頁與其他如 Twitter 或 Facebook 提供的內容合併在一起。
   
• 第三方框架和函式庫允許您將這些元件套用在您的 HTML 文件內，讓您可以迅速地建立網頁或應用程式。

文字編譯器的安裝

以windows系統安裝Visual Studio Code為例

文字編譯器的安裝

至瀏覽器搜尋「Visual Studio Code」

文字編譯器的安裝

點選安裝檔，選擇執行

文字編譯器的安裝

選取「我同意」後，按下下一步

文字編譯器的安裝

選擇Vscode存放的資料夾，再下一步

文字編譯器的安裝

選擇Vscode存放的資料夾，再下一步

文字編譯器的安裝

點選建立桌面圖示，再下一步

文字編譯器的安裝

點選「安裝」

文字編譯器的安裝

等候...

文字編譯器的安裝

安裝完成，點選完成後打開Vscode