教育再公共化聯盟/實習/新手課表
出自福留子孫
| 分類 | 功能 | |
|---|---|---|
| HTML | 網頁工具 | 前端網頁設計 |
| MediaWiki | 網頁工具 | 提供線上編輯的開源軟體 |
| SVG | 網頁工具 | 向量圖形的編輯 |
| Etherpad | 協作工具 | 線上即時文字協作開源軟體 |
| Jit.si Meet | 協作工具 | 線上視訊平台 |
| MySQL | 資料庫 | 儲存資料的開源資料庫系統 |
HTML
- http超文件傳輸協定(HyperText Transfer Protocol)，其文件格式稱為HTML(HyperText Markup Language)。
- HTML是一種超文本標記語言，用於建立網頁結構和內容的標記語言。使用不同的標籤、元素和樣式，可以組合成一個網頁。
一、瀏覽器選擇與看原始碼
(一)Firefox瀏覽器
- Mozilla Firefox為開源的網頁瀏覽器。
- 其中的閱讀網頁原始碼功能較Google Chrome更為完整。
- 電腦下載Firefox瀏覽器
(二)中文網址的編碼
- 網址列中的網址若為中文，複製在貼上會出現以%表示的編碼。
- 每個中文字都會變成三個碼。
(三)清除快取
- 當瀏覽器無法正常顯示出網頁最新的版本時，需要清除快取。
- 清除快取的步驟如下：
Mozilla Firefox
- 開啟 Firefox 瀏覽器。
- 按下 Ctrl + Shift + Delete（Windows/Linux）或 Command + Shift + Delete（macOS），打開 "清除最近的歷史記錄" 選項。
- 在 "時間範圍" 選項中選擇 "全部"。
- 勾選 "快取" 選項。
- 點擊 "清除" 按鈕。
Microsoft Edge
- 開啟 Edge 瀏覽器。
- 按下 Ctrl + Shift + Delete 鍵，打開 "清除瀏覽數據" 選項。
- 確保 "時間範圍" 選項設定為 "始終"。
- 勾選 "快取數據和檔案" 選項。
- 點擊 "清除" 按鈕，確認清除快取。
- 請注意，不同的瀏覽器版本可能會有些許差異，但基本步驟應該是類似的。清除網頁快取後，您可能需要重新載入網頁才能看到最新的內容。
Google Chrome
- 開啟 Chrome 瀏覽器。
- 按下 Ctrl + Shift + Delete（Windows/Linux）或 Command + Shift + Delete（macOS），打開 "清除瀏覽數據" 選項。
- 在彈出的視窗中，選擇要清除的時間範圍（建議選擇 "全部"）。
- 勾選 "快取圖像和檔案" 選項。
- 點擊 "清除數據" 按鈕，確認清除快取。
(四)文書處理器
- 擇一下載適合編輯編碼的文書處理器。
- EmEditor
- Notepad++
二、標籤
- HTML中所有的內容都被包在起始標籤(opening tag)與結束標籤(closing tag)之中。
- 例如：
<p>福留子孫</p>
- 「< p >」即為起始標籤；「< /p >」則為結束標籤。
- 不同的標籤則對應到不同的顯示方式，HTML常見的標籤如下：
html 超文件(HyperText Markup Language) head 文件頭 meta 對自身的描述 title 標題 body 本文 h1~h6 標題一級到六級(head) a 超連結(anchor) img 圖(image) p 段(paragraph) br 跳行(break space) hr 水平線(Horizontal Rule) ol 有次序的列表(order list) ul 沒有次序的列表(unorder list) li 列表項目(list item) style 宣告樣式(修飾一個超文件) link 載入另一個檔，如 CSS 檔 span 文字小片段 div 區塊(division) pre 保留原有斷行及排列之式(preserve)
三、屬性
- HTML不同的標籤中可以加入不同的屬性，提供額外的資訊。
- 例如：
<a href="http://well-being-ng.net/">福留子孫超連結</a>
- 「href」即為a的屬性，提供連結的資訊。
- 屬性名稱後應接著「=」，並且屬性值應使用引號包覆。
- 不同的標籤有不同的屬性可以使用，但有些屬性可以通用，HTML常見的屬性如下：
http-equiv= http項目 src= 圖照來源(source) href= 跳往那一個連結(hyper ref)(hyper reference) target= 跳往瀏覽器的那裡，預設值為本頁的本窗框，值_blank為新的空白頁。 style= 樣式屬性(修飾一個標籤) width= 寬度，可以用點(px,pt)或長度(cm)或百分比表示 height= 高度，可以用點(px,pt)或長度(cm)或百分比表示 border= 邊框。 align= 靠左或調中或靠右 class= 引用 CSS 類別 id= 賦予標籤惟一的名字 xmlns= 指出 xml 的名字空間 type= 指示檔案的類別 content= 指示 http-equiv 屬性代表項目的值
四、樣式
- 樣式(Style)使用於style屬性中，透過CSS來控制和美化網頁的外觀和佈局。
- 兩組樣式指示以「;」間隔。
- 名與值以「:」相連。
- 例如：
<p style="font-family:Arial; color:red;">福留子孫</p>
- 「font-family」與「color」為Style屬性的名；「Arial」與「red」分別為「font-family」與「color」的值，分別控制文字的字體與顏色。
- 常見的Style屬性的樣式指示如下：
font-family: 字體 font-size: 字的大小 font-weight: 字有多粗 text-align: 字的對齊方式 color: 字的顏色 width: 寬度 height: 高度 border: 邊框 border-collapse:collapse 合併框線
MediaWiki
- Wiki是HTML的簡記法，一定會翻譯成HTML，所以可以從Wiki頁複製HTML段落。
一、常見的Wiki基礎語法
| 語法 | 顯示 | 說明 |
|---|---|---|
#AAA #BBB #CCC |
|
井號 |
*AAA *BBB *CCC |
|
星號 |
*AA *#AA1 *#AA2 *BB *#BB1 *#BB2 |
|
先星後井 |
#AA #*AA1 #*AA2 #BB #*BB1 #*BB2 |
|
先井後星 |
==中標== ===小標=== ====小小標==== =====加粗標===== ======超小標====== |
中標 小標 小小標 加粗標 超小標 |
段落標題，等號多標題小 |
=大標= |
大標 |
請不要使用最大標 |
[http://well-being-ng.net/ 福留子孫網站] 格式：[URL 連結說明] |
外部連結：一層中 括號包著 URL，空 白後放連結說明。 |
|
[[首頁|這是首頁]] 格式：[[頁面名稱|連結說明]] 中括號內也可只寫頁面名稱 不可以連向本身這一頁 |
內部連結：兩層中括 號包著「頁名」，豎 槓（|）後放連結說明。 |
|
[[檔案:Go top.gif]] 格式：[[檔案:檔名|圖長|圖寬|…]] |
|
插入圖照也是內部連結。 |
<img src='網址' width='數字px' height='數字px' > |
|
插入外部圖片 |
二、畫表格
創建表格：使用「{|」開始表格、「|}」結束表格。
{| class="wikitable"
| Header1 || Header2 || Header3
|-
| 單元格1 || 單元格2 || 單元格3
|-
| 單元格4 || 單元格5 || 單元格6
|}
三、嵌入
當有經常需要重覆使用的內容時，使用崁入的方式直接將其他頁面的內容置於編輯頁面。
{{欲崁入之頁面名稱}}
四、插入圖照
插入圖照時，應先上傳檔案。
[[檔案:example.jpg|選擇性文字描述]]
五、插入影片
六、輸出 HTML 讓 word 讀
- 在欲輸出頁面之網址列插入print.php。
- 按右鍵，點擊另存新檔。
- 選擇.html格式並儲存。
- 在檔案總管，以word打開下載之檔案。
七、收納與展開
使用HTML的detail標籤，製作收納、展開的功能。
<mwdetails><summary>點擊展開摺疊</summary> 這是摺疊內容的文字。 </mwdetails>
如下所示： 模板:教育再公共化聯盟/五大議題
八、加入分類
九、去除 TOC
SVG
- SVG是一種用於描述二維向量圖形的XML基礎的語言。它使用數學公式來定義圖形，因此可以無損地縮放和變換。
- 主要特點是可縮放性。不同於像素圖像，SVG圖形可以根據不同的螢幕尺寸和解析度進行無損放大或縮小，並且保持清晰。
- 可以將SVG代碼嵌入HTML文件中，或將SVG保存為獨立的檔案。
Etherpad
- Etherpad是一個協作式的即時文本編輯器，它允許多個用戶在同一份文檔上進行同時編輯，並即時看到其他用戶的編輯內容。
- 下圖為Etherpad電腦介面：
輸入身分
- 點擊介面右上方的圖示。
- 輸入使用者資訊。
- 則使用該設備編輯的內容即會標註使用者資訊。
文字編輯
- 文字編輯的操作在介面的左上方。
- 輸入文本或一段文字後，即可選取部分文字，套用粗體、斜體、底線及刪除線樣式。
即時訊息
- 點擊介面右下方的「Chat」。
- 得與同一頁面的協作者以文字進行溝通。
Jit.si Meet
- Jitsi Meet 是一個開源的視訊會議平台，提供即時的視訊和聲音通話功能，使用者可以透過瀏覽器或移動設備參與視訊會議。
- Jit.si Meet可以使用網頁進入會議室，使用手機需下載APP。
- 下圖為Jit.si Meet電腦網頁介面：
控制麥克風與鏡頭
- 下方工具列的最左方為開、關麥克風的按鈕。
- 麥克風右方為開、關鏡頭的按鈕。
- 若無法有效開啟麥克風收音或視訊鏡頭，可以嘗試點選圖示右上方的箭頭，可以調整輸入來源。
螢幕分享
- 下方工具列左方第三個按鈕即為分享螢幕的功能。
- 點選該按鈕後，可以選擇分享「分頁」、「視窗」或「螢幕」。
- 若選擇分享「分頁」，則畫面僅會停留在瀏覽器特定的分頁上；若切換分頁則需要在重新分享。
- 若選擇分享「視窗」，則畫面僅會停留在瀏覽器的視窗中；若切換電腦的軟體，則畫面不會跟進。
- 若選擇分享「螢幕」，則與會者會看到分享人的整個螢幕畫面。
- 若要開啟PPT投影片進行簡報，建議分享「螢幕」。
