- 安裝軟體:ATOM-https://atom.io/
基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體
這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的
2.每個軟體學習一開始都是要從HELLO WORLD開始，是因為要確認”環境”是否安裝”完成”，就是可以用
2.1先幫HTML建一個資料夾(之後會將所需的檔案/音檔/圖片/影像放入)，然後之後也會需要依其放置的相對位置來與HTML相互配合顯示(大小寫或/ \的不同會讓HTML找不到所需的檔案/音檔/圖片/影像)
index.html
基本上每個網頁的首頁都叫index.html(要記得是小寫)，如上我就是在D槽裡建MyWebSite資料夾，然後裡面再建一個HTML資料夾，然後用index.html裡面練習打HELLO WORLD確認”環境”是否安裝”完成”
2.2進入ATOM編輯的地方~
選擇左上New File-出現untitled就是可以開工~
進入ATOM編輯的地方
2.3然後用index.html裡面練習打HELLO WORLD確認”環境”是否安裝”完成”
然後保存
用Chrome打開看看~(按右鍵)
再來就是到瀏覽器看看嘍
3.實際來做一個作品:
3.1開工~從空白模板的開始~(有興趣可以再翻書查語法意思)
title是網頁頭的名稱
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語法)
HTML部分主要是寫表格內的文字
在瀏覽器裡就可以看到
3.10增加表格框線語法(這裡是放在最上面CSS語法裡面，最下面會有全部程式碼，可以點開看是放在哪裡):
框線語法
在瀏覽器裡就可以看到
3.11footer=網頁角(留言訊息/定義可以留言幾行+留下MAIL)
留言訊息
在瀏覽器裡就可以看到(送出按鍵的部分就屬於後端，之後會再分享)
emal的地方被限定()
3.12每個網頁最後一定都有的”版權限定”語法:
©
在瀏覽器裡就可以看到
整個作品的程式碼:
https://gist.github.com/jzs2home/f431a942e99021a774bc7a88dc8b6ab0
整個作品
《謝謝大家的閱覽~》
