分類
使用 HTML、CSS 開發一個網站

第 3 節: 2020 VS Code 網頁編輯器、HTML 基礎教學

5. 安裝 Chrome 瀏覽器

Google Chrome 下載連結:

https://www.google.com/intl/zh-TW/chrome/

6. 安裝 VS Code 編輯器

Visual Studio Code 下載連結:

https://code.visualstudio.com/

8. 開始撰寫 HTML

首頁名稱與副檔名:

index.html

瀏覽器預設會把 index 視為首頁

9. 撰寫 h1 標籤、 p 段落

一個頁面最重要的內容會以「 <h1> 」(標題)標籤來表示;一個頁面上的段落文字會以「 <p> 」標籤來表示,之所以會需要這樣做,主要是為了語意化網頁元素,讓瀏覽器知道每個網頁元素的用途是什麼。

10. CodePen 教學 – 將你的程式碼分享給別人

線上寫程式工具 CodePen 可以讓使用者將撰寫完成的程式碼分享給其他人,這個網站上也有很多公開的範例可以參考。

11. 建立 HTML 環境

一個最基礎的 HTML 環境會像是這樣:

<!DOCTYPE html>
<html>
<head>
  <title>Yahoo 新聞</title>
</head>
<body>
  <h1>標題</h1>
  <p>段落段落</p>
</body>
</html>

13. Emmet 載入環境語法

在有 emmet 功能的 IDE 內輸入「 ! 」後按下 Enter 或是 Tab 鍵即可快速產生出空白的 HTML 環境。

14. 插入圖片,了解圖片路徑規則

插入圖片會使用到的 HTML 標籤:

<img src="(圖片路徑)" alt="(圖片替代文字)">

16. 在網頁上加上 a 連結標籤

一個會在新視窗開啟的連結是這樣撰寫的:

<a href="(目標連結)" target="_blank"></a>

17. 段落 p 與連結 a 的混合應用

要在一個段落中間加入連結,可以這樣撰寫:

<p><a href=""></a></p>

18. 認識 ul li 列表標籤

建立實心圓列表:

<ul>
  <li>
  </li>
</ul>

建立數字列表:

<ol>
  <li>
  </li>
</ol>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *