從無到有~創造一個用HTML5寫的作品

基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體

這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的

2.每個軟體學習一開始都是要從HELLO WORLD開始，是因為要確認”環境”是否安裝”完成”，就是可以用

2.1先幫HTML建一個資料夾(之後會將所需的檔案/音檔/圖片/影像放入)，然後之後也會需要依其放置的相對位置來與HTML相互配合顯示(大小寫或/ \的不同會讓HTML找不到所需的檔案/音檔/圖片/影像)

基本上每個網頁的首頁都叫index.html(要記得是小寫)，如上我就是在D槽裡建MyWebSite資料夾，然後裡面再建一個HTML資料夾，然後用index.html裡面練習打HELLO WORLD確認”環境”是否安裝”完成”

2.2進入ATOM編輯的地方~

選擇左上New File-出現untitled就是可以開工~

2.3然後用index.html裡面練習打HELLO WORLD確認”環境”是否安裝”完成”

然後保存

用Chrome打開看看~(按右鍵)

再來就是到瀏覽器看看嘍

3.實際來做一個作品:

3.1開工~從空白模板的開始~(有興趣可以再翻書查語法意思)

3.2在瀏覽器裡就可以看到

3.3裡面開始輸入文字(有興趣可以再翻書查語法意思)

3.4加入圖片-在資料夾內創一個放圖片的資料夾(避免之後網頁越來越大檔按會越來越難找)，再把圖片(建議是png檔)放入

3.5輸入圖片語法-.img src=”img/vegetable_kabocha.png” alt=”vegetable_kabocha”的" "一定要記得不然少一個是無法顯示的alt=”vegetable_kabocha”是指當照片無法顯示時會顯示vegetable_kabocha告知那裏有圖片

在瀏覽器裡就可以看到

3.6輸入影片語法-..mp4檔:再加入section.用br /換行

把影片放入跟index.html同資料夾層級

3.7輸入影片語法:

在瀏覽器裡就可以看到

3.8增加描述語法~使用article用p換行(因為有文字看起來比較順~)

在瀏覽器裡就可以看到

3.9增加表格語法:(HTML部分主要是寫表格內的文字，框線需要使用CSS語法)

在瀏覽器裡就可以看到

3.10增加表格框線語法(這裡是放在最上面CSS語法裡面，最下面會有全部程式碼，可以點開看是放在哪裡):

在瀏覽器裡就可以看到

3.11footer=網頁角(留言訊息/定義可以留言幾行+留下MAIL)

在瀏覽器裡就可以看到(送出按鍵的部分就屬於後端，之後會再分享)

3.12每個網頁最後一定都有的”版權限定”語法:

在瀏覽器裡就可以看到

整個作品的程式碼: https://gist.github.com/jzs2home/f431a942e99021a774bc7a88dc8b6ab0

《謝謝大家的閱覽~》