更新於 2020/06/18閱讀時間約 3 分鐘

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

    1. 安裝軟體: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每個網頁最後一定都有的”版權限定”語法:
    ©
    在瀏覽器裡就可以看到
    整個作品
    《謝謝大家的閱覽~》
    分享至
    成為作者繼續創作的動力吧!
    © 2024 vocus All rights reserved.