從無到有~創造一個用HTML5寫的作品
更新於 發佈於 閱讀時間約 3 分鐘
- 安裝軟體:ATOM-https://atom.io/
基本上安裝畫面上的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每個網頁最後一定都有的”版權限定”語法:
在瀏覽器裡就可以看到
《謝謝大家的閱覽~》
0會員
1內容數
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
架設第一個網站是一個令人興奮且具有挑戰性的過程。這篇文章將詳細介紹如何從零開始，逐步完成一個基本的網站，並且涵蓋所需的主要步驟。
1. 計劃與構思
在開始技術工作之前，首先要明確網站的目的和目標受眾。問問自己以下問題：
這個網站的主要目的是什么？（例如，博客、電子商務、個人作品集等）
目標受
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。
首先先介紹我的開發環境:
我用了vs
拿著筆在紙上書寫的過程，不只是紀錄觀察到的事物或自己的想法，已經是創作的第零步，甚至是第一步了：透過書寫、塗鴉，就算只是鄭重地寫下關鍵字，我們已經在進行創造了。在資訊大海中篩選與汲取對我們有意義、觸動我們情感、敲打我們記憶的人事物。透過緩慢的手寫字，我們也同時思考、揀選、組織更適當的文字。
一切都從思考作品集要怎麼準備開始，所謂的 one 是起頭難（？），在動手寫 code 之前，總覺得自己做不到，一直在自己煩惱，直到前輩們說：開始做看看吧，一頁式網站也好，不開始做永遠不知道自己哪些知識需要補強。
於是決定先幫我的繆思女神做一個網站，讓她可以介紹自己的工作，再放社群連結
成功加入Anytype之後就可以開始探索這一個開源的筆記軟體了^_^
開始Anytype之前.....
1.刪除所有初始物件
2.思考自己的使用需求
3.不著急學會所有功能
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識，包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外，本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
本文章介紹了建立網頁的整個流程，包括設置 Templates, Views, Urls 等步驟。透過這些步驟，大家便能創建一個新的網頁，並成功測試。
對於網頁製作新手來說，自己架設網站絕對是可行的。現代的網頁製作工具和平台設計得十分用戶友好，即使沒有網頁開發背景，也能輕鬆上手。在選擇網頁製作平台時，需要注意以下幾點：
操作介面：選擇一個操作界面清晰直觀的平台，這有助於您更容易地設計網站和探索各種功能。
功能齊全：確保平台提供您所需的所有功能...
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
架設第一個網站是一個令人興奮且具有挑戰性的過程。這篇文章將詳細介紹如何從零開始，逐步完成一個基本的網站，並且涵蓋所需的主要步驟。
1. 計劃與構思
在開始技術工作之前，首先要明確網站的目的和目標受眾。問問自己以下問題：
這個網站的主要目的是什么？（例如，博客、電子商務、個人作品集等）
目標受
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。
首先先介紹我的開發環境:
我用了vs
拿著筆在紙上書寫的過程，不只是紀錄觀察到的事物或自己的想法，已經是創作的第零步，甚至是第一步了：透過書寫、塗鴉，就算只是鄭重地寫下關鍵字，我們已經在進行創造了。在資訊大海中篩選與汲取對我們有意義、觸動我們情感、敲打我們記憶的人事物。透過緩慢的手寫字，我們也同時思考、揀選、組織更適當的文字。
一切都從思考作品集要怎麼準備開始，所謂的 one 是起頭難（？），在動手寫 code 之前，總覺得自己做不到，一直在自己煩惱，直到前輩們說：開始做看看吧，一頁式網站也好，不開始做永遠不知道自己哪些知識需要補強。
於是決定先幫我的繆思女神做一個網站，讓她可以介紹自己的工作，再放社群連結
成功加入Anytype之後就可以開始探索這一個開源的筆記軟體了^_^
開始Anytype之前.....
1.刪除所有初始物件
2.思考自己的使用需求
3.不著急學會所有功能
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識，包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外，本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
本文章介紹了建立網頁的整個流程，包括設置 Templates, Views, Urls 等步驟。透過這些步驟，大家便能創建一個新的網頁，並成功測試。
對於網頁製作新手來說，自己架設網站絕對是可行的。現代的網頁製作工具和平台設計得十分用戶友好，即使沒有網頁開發背景，也能輕鬆上手。在選擇網頁製作平台時，需要注意以下幾點：
操作介面：選擇一個操作界面清晰直觀的平台，這有助於您更容易地設計網站和探索各種功能。
功能齊全：確保平台提供您所需的所有功能...