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>