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

更新於 2020/06/18閱讀時間約 3 分鐘
  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每個網頁最後一定都有的”版權限定”語法:
©
在瀏覽器裡就可以看到
整個作品
《謝謝大家的閱覽~》





    avatar-img
    0會員
    1內容數
    留言0
    查看全部
    avatar-img
    發表第一個留言支持創作者!
    你可能也想看
    Google News 追蹤
    Thumbnail
    *合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
    Thumbnail
    宮壇、廟宇的主神從頭到尾都是同一個主神嗎? 其實不是,主神是會更動或更換的, 例如千歲、觀音、帝君、太子爺、母娘、濟公.....管轄的宮廟(宮壇、廟宇), 這些神明的封號其實在人間只是一種職稱與職位, 主神領令下來救世、濟世、救人,等到功德圓滿任務結束, 就會高升調職走人了。 下來救世、濟世、救人
    Thumbnail
    如何創造價值?如何讓價值被人看見? ​無論是職場工作者、還是自雇者,都必須面對的問題。沒有解決這些問題,就想著變現價值,不是不可能,只不過那叫詐騙。​有個「無有優廉跑」的概念雖然老掉牙、但充滿智慧,端看你如何理解與運用它。​ 這篇文章中,我會告訴你如何用商業思維,重新理解這個無有優廉跑的概念。
    Thumbnail
    自小唸教會學校,受《聖經・創世紀》的影響,創作在我心中,一直是個從無到有,從零到一的神奇過程。 以前的我深信,只要盯着一張白紙的時間夠長,靈感就會如鬼魅般浮現,瞬間把白紙填滿,形成傑作。 就如偉大的畫作,本來都是一張張雪白的畫布;曠世的雕塑,來自一塊塊樸素的石頭⋯⋯ 事實並非如此!
    Thumbnail
    小到只是無傷大雅的生活興趣,大到你的財務、你的人生, 「從無到有」這個想辦法的能力,都是必備的技能。
    Thumbnail
    這個舞團,因他,從無到有,現今享譽國際。 他先前宣佈,將於2019年底,從舞團退休交棒,引起國內外媒體驚訝惋惜。 在年底的這個時刻,來回首,他如何用生命造就了小島奇蹟;如何用初心與夢想,成就了他自己。
    Thumbnail
    也不過5年前我還曾經大剌剌地跟教徒朋友說,「你的上帝會保佑你,我不信你的上帝,我沒那麼好運,只能靠自己。」殊不知這句話本身就是一個謬論,「你的上帝會保佑你」表示我已經承認神的存在,只是自己不自覺而已。
    Thumbnail
    *合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
    Thumbnail
    宮壇、廟宇的主神從頭到尾都是同一個主神嗎? 其實不是,主神是會更動或更換的, 例如千歲、觀音、帝君、太子爺、母娘、濟公.....管轄的宮廟(宮壇、廟宇), 這些神明的封號其實在人間只是一種職稱與職位, 主神領令下來救世、濟世、救人,等到功德圓滿任務結束, 就會高升調職走人了。 下來救世、濟世、救人
    Thumbnail
    如何創造價值?如何讓價值被人看見? ​無論是職場工作者、還是自雇者,都必須面對的問題。沒有解決這些問題,就想著變現價值,不是不可能,只不過那叫詐騙。​有個「無有優廉跑」的概念雖然老掉牙、但充滿智慧,端看你如何理解與運用它。​ 這篇文章中,我會告訴你如何用商業思維,重新理解這個無有優廉跑的概念。
    Thumbnail
    自小唸教會學校,受《聖經・創世紀》的影響,創作在我心中,一直是個從無到有,從零到一的神奇過程。 以前的我深信,只要盯着一張白紙的時間夠長,靈感就會如鬼魅般浮現,瞬間把白紙填滿,形成傑作。 就如偉大的畫作,本來都是一張張雪白的畫布;曠世的雕塑,來自一塊塊樸素的石頭⋯⋯ 事實並非如此!
    Thumbnail
    小到只是無傷大雅的生活興趣,大到你的財務、你的人生, 「從無到有」這個想辦法的能力,都是必備的技能。
    Thumbnail
    這個舞團,因他,從無到有,現今享譽國際。 他先前宣佈,將於2019年底,從舞團退休交棒,引起國內外媒體驚訝惋惜。 在年底的這個時刻,來回首,他如何用生命造就了小島奇蹟;如何用初心與夢想,成就了他自己。
    Thumbnail
    也不過5年前我還曾經大剌剌地跟教徒朋友說,「你的上帝會保佑你,我不信你的上帝,我沒那麼好運,只能靠自己。」殊不知這句話本身就是一個謬論,「你的上帝會保佑你」表示我已經承認神的存在,只是自己不自覺而已。