寫一個進階版網頁!
在教學開始前，老師這週給了大家一個很方便的程式---------<Brackets>
Brackets 是一種輕巧而強大的現代文字編輯器，我們將即時瀏覽工具整合在編輯器裡，以便在需要時獲得正確的幫助，而不會妨礙您的作業過程。你將很享受在Brackets撰寫程式碼。
由此進入官網下載: Brackets
以下教學也會由Brackets當教材使用。
1.開啟Brackets
2.切換語言且新增檔案
切換語言: 英文不好的人可以先去上面的工具列裡，只到Debug->Switch language->繁體中文->Reload
新增檔案:上面的工具列->檔案->新增
3.新增一個給網頁的資料夾
這個動作是將你所有要拿來做網頁的素材放在一塊兒如圖片、html檔之類的。
在你想要的位置新增一個資料夾，並取名。
4.存檔在剛剛新增的資料夾
在左邊的工作檔案裡，右鍵一下你剛剛新增的檔案，點存檔於，除了重新命名之外，別忘了修改副檔名為Html，存檔。
5.開啟剛剛新增的資料夾
點擊GettingStarted->開啟資料夾...->選擇你剛剛新增的資料夾
之後應該是這個畫面
6.開啟即時瀏覽
到最右邊會發現有個閃電圖案，這個功能是可以開啟瀏覽器，你現在輸入什麼碼，即時瀏覽的瀏覽器就會呈現現在的狀態。
7.輸入基本HTML碼
還記得上週教的基本概念嗎?忘了的話再去複習一次
這個程式一個相當方便的地方是，你的元素碼輸入成下面這樣。
這時你只要輸入「>」，程式會自動幫你把結束標籤也補上去。
8.如何新增連結在網頁裡?
這個動作是讓你可以從你的網頁點擊連結到別的網頁去的功能。
公式:<a href="在此輸入你想要輸入的網址">呈現出來的文字</a>
這時點開即時瀏覽的網頁，應該就會呈現這樣。
9.如何新增圖片在網頁裡?
這個動作是可以在你的網頁看到指定的圖片
首先把你想要加進去網頁的圖片放入資料夾。
公式:<img src="圖片名稱.jpg" width="寬度" height="高度">
輸入時，基本上你只要輸入<img src= 就會跑出圖片名稱讓你點選。
動作都完成了，網頁應該會呈現這樣子。
* 別忘了圖片標籤最後必須要有個 >
10.記得存檔
懂得活用上面教的東西的話，相信你可以做出一個很棒的網頁，別忘了所有東西做完記得存檔呀!
否則會前功盡棄的。
