「HTML+WIKI(二)」修訂間的差異

出自不錯學群
跳至導覽 跳至搜尋
 
(未顯示同一使用者於中間所作的 6 次修訂)
行 2: 行 2:
 
==課堂實作==
 
==課堂實作==
 
#client 與 server
 
#client 與 server
 +
#筆電的作業系統:
 +
#*Windows 10:珊樂、伯罕、斯帖
 +
#*Macintosh:期蔚、宗儀
 +
#*Fedora:高本潤
 
#在 client 裝綠色軟體的 firefox
 
#在 client 裝綠色軟體的 firefox
#在 client 裝綠色軟體的 emEditor
+
#在 client 裝綠色軟體的 emEditor、使用 Sublime Text、Visual studio code
 +
#綠色軟體的特點
 +
#*檔案比較小
 +
#*不用安裝
 +
#*只佔用少量系統資源
 +
#*可直接移動(複製檔案後,換一台電腦繼續工作)
 +
#*刪除方便,移除後也不會將任何紀錄(登錄檔訊息等)留在本機電腦上
 +
#*[https://zh.wikipedia.org/wiki/綠色軟體 各種免安裝軟體]
 
#打開檢視副檔名
 
#打開檢視副檔名
#寫一個 html  
+
#使用「[http://nice-learning.tw/uploadFiles 網路檔案櫃]」
#寫一段 html 或由 wiki 頁抄一段 html
+
#寫一個 html:
#上傳
+
##base1.htm(以下簡稱練習檔),用 html,head,body 三標籤,顯出 abc 字樣。
#看結果
+
##上傳檔案,並用瀏覽器開啟。用 Ctrl-U 看原始碼。
 +
##分辨顯示與原始碼。
 +
##複製上週的 table 到練習檔,上傳,重刷瀏覽器(以下省略上傳檔案,重刷瀏覽器)。
 +
##加 <meta http-equiv='content-type' content='text/html; charset=UTF-8' />
 +
##加 <style> … </style>,並在其中複製上週的 CSS 定義
 +
##解釋 border-collapse 樣式,並示範 collapse,separate 兩樣式值的差別
 +
##解釋「色碼」
 +
##加 <title> … </title>,並示範頁籤文字改變
 +
##加 <p> … </p>,並示範font-size,font-family,text-align 三樣式
 +
##表格調中
 +
##去本班 wiki 首頁,以「檢視選取範圍原始碼」,抄出播放影片標籤,放入練習檔
 +
##加上 <br/> 拉開表格與影片的距離,並將影片調中
 +
##加上 <img…/>
 +
##加上 ol 與 li
 +
##將 ol 換成 ul
 +
##找一段字用 span 改變顏色,突顯出來
 +
 
 
==HTML的簡介與基本規則==
 
==HTML的簡介與基本規則==
 
{{jendo::HTML/簡介與基本規則}}
 
{{jendo::HTML/簡介與基本規則}}
 +
 
==重要的標記、屬性、樣式==
 
==重要的標記、屬性、樣式==
 
{{jendo::HTML/重要的標記、屬性、樣式}}
 
{{jendo::HTML/重要的標記、屬性、樣式}}

於 2020年9月22日 (二) 15:51 的最新修訂

課堂實作

  1. client 與 server
  2. 筆電的作業系統:
    • Windows 10:珊樂、伯罕、斯帖
    • Macintosh:期蔚、宗儀
    • Fedora:高本潤
  3. 在 client 裝綠色軟體的 firefox
  4. 在 client 裝綠色軟體的 emEditor、使用 Sublime Text、Visual studio code
  5. 綠色軟體的特點
    • 檔案比較小
    • 不用安裝
    • 只佔用少量系統資源
    • 可直接移動(複製檔案後,換一台電腦繼續工作)
    • 刪除方便,移除後也不會將任何紀錄(登錄檔訊息等)留在本機電腦上
    • 各種免安裝軟體
  6. 打開檢視副檔名
  7. 使用「網路檔案櫃
  8. 寫一個 html:
    1. base1.htm(以下簡稱練習檔),用 html,head,body 三標籤,顯出 abc 字樣。
    2. 上傳檔案,並用瀏覽器開啟。用 Ctrl-U 看原始碼。
    3. 分辨顯示與原始碼。
    4. 複製上週的 table 到練習檔,上傳,重刷瀏覽器(以下省略上傳檔案,重刷瀏覽器)。
    5. 加 <meta http-equiv='content-type' content='text/html; charset=UTF-8' />
    6. 加 <style> … </style>,並在其中複製上週的 CSS 定義
    7. 解釋 border-collapse 樣式,並示範 collapse,separate 兩樣式值的差別
    8. 解釋「色碼」
    9. 加 <title> … </title>,並示範頁籤文字改變
    10. 加 <p> … </p>,並示範font-size,font-family,text-align 三樣式
    11. 表格調中
    12. 去本班 wiki 首頁,以「檢視選取範圍原始碼」,抄出播放影片標籤,放入練習檔
    13. 加上 <br/> 拉開表格與影片的距離,並將影片調中
    14. 加上 <img…/>
    15. 加上 ol 與 li
    16. 將 ol 換成 ul
    17. 找一段字用 span 改變顏色,突顯出來

HTML的簡介與基本規則

[模板 http://jendo.org/wiki1231/index.php?title=HTML/%E7%B0%A1%E4%BB%8B%E8%88%87%E5%9F%BA%E6%9C%AC%E8%A6%8F%E5%89%87&action=render 讀取失敗:HTTP 500]

重要的標記、屬性、樣式

[模板 http://jendo.org/wiki1231/index.php?title=HTML/%E9%87%8D%E8%A6%81%E7%9A%84%E6%A8%99%E8%A8%98%E3%80%81%E5%B1%AC%E6%80%A7%E3%80%81%E6%A8%A3%E5%BC%8F&action=render 讀取失敗:HTTP 500]

用到的英文單字

[模板 http://jendo.org/wiki1231/index.php?title=HTML/%E8%8B%B1%E6%96%87%E5%96%AE%E5%AD%97&action=render 讀取失敗:HTTP 500]