教育再公共化聯盟/實習/新手課表：修訂版本之間的差異

出自福留子孫
跳轉到： 導覽、 搜尋
（→‎五、插入影片）
（→‎五、插入影片）
第 311 行： 第 311 行：
  
 
===五、插入影片===
 
===五、插入影片===
−
{{影片|https://www.youtube.com/watch?v=example}}
 
  
 
===六、輸出 HTML 讓 word 讀===
 
===六、輸出 HTML 讓 word 讀===

2023年8月11日 (五) 15:54的修訂版本


分類功能
HTML網頁工具前端網頁設計
MediaWiki網頁工具提供線上編輯的開源軟體
SVG網頁工具向量圖形的編輯
Etherpad協作工具線上即時文字協作開源軟體
Jit.si Meet協作工具線上視訊平台
MySQL資料庫儲存資料的開源資料庫系統

HTML

  • http超文件傳輸協定(HyperText Transfer Protocol)，其文件格式稱為HTML(HyperText Markup Language)。
  • HTML是一種超文本標記語言，用於建立網頁結構和內容的標記語言。使用不同的標籤、元素和樣式，可以組合成一個網頁。

一、瀏覽器選擇與看原始碼

(一)Firefox瀏覽器

(二)中文網址的編碼

  • 網址列中的網址若為中文，複製在貼上會出現以%表示的編碼。
  • 每個中文字都會變成三個碼。

(三)清除快取

  • 當瀏覽器無法正常顯示出網頁最新的版本時，需要清除快取。
  • 清除快取的步驟如下：
Mozilla Firefox
  1. 開啟 Firefox 瀏覽器。
  2. 按下 Ctrl + Shift + Delete（Windows/Linux）或 Command + Shift + Delete（macOS），打開 "清除最近的歷史記錄" 選項。
  3. 在 "時間範圍" 選項中選擇 "全部"。
  4. 勾選 "快取" 選項。
  5. 點擊 "清除" 按鈕。
Microsoft Edge
  1. 開啟 Edge 瀏覽器。
  2. 按下 Ctrl + Shift + Delete 鍵，打開 "清除瀏覽數據" 選項。
  3. 確保 "時間範圍" 選項設定為 "始終"。
  4. 勾選 "快取數據和檔案" 選項。
  5. 點擊 "清除" 按鈕，確認清除快取。
  6. 請注意，不同的瀏覽器版本可能會有些許差異，但基本步驟應該是類似的。清除網頁快取後，您可能需要重新載入網頁才能看到最新的內容。
Google Chrome
  1. 開啟 Chrome 瀏覽器。
  2. 按下 Ctrl + Shift + Delete（Windows/Linux）或 Command + Shift + Delete（macOS），打開 "清除瀏覽數據" 選項。
  3. 在彈出的視窗中，選擇要清除的時間範圍（建議選擇 "全部"）。
  4. 勾選 "快取圖像和檔案" 選項。
  5. 點擊 "清除數據" 按鈕，確認清除快取。

(四)文書處理器

二、標籤

  • 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
  1. AAA
  2. BBB
  3. CCC
井號 
*AAA
*BBB
*CCC
  • AAA
  • BBB
  • CCC
星號 
*AA
*#AA1
*#AA2
*BB
*#BB1
*#BB2
  • AA
    1. AA1
    2. AA2
  • BB
    1. BB1
    2. BB2
先星後井 
#AA
#*AA1
#*AA2
#BB
#*BB1
#*BB2
  1. AA
    • AA1
    • AA2
  2. BB
    • BB1
    • BB2
先井後星 
==中標==
===小標===
====小小標====
=====加粗標=====
======超小標======

中標

小標

小小標

加粗標

超小標

 段落標題，等號多標題小 
=大標=

大標

 請不要使用最大標 
[http://well-being-ng.net/ 福留子孫網站]
格式：[URL 連結說明]

福留子孫網站

外部連結：一層中
括號包著 URL，空
白後放連結說明。		 
[[首頁|這是首頁]]
格式：[[頁面名稱|連結說明]]
中括號內也可只寫頁面名稱
不可以連向本身這一頁

這是首頁

內部連結：兩層中括
號包著「頁名」，豎
槓（|）後放連結說明。		 
[[檔案:Go top.gif]]
格式：[[檔案:檔名|圖長|圖寬|…]]

Go top.gif

插入圖照也是內部連結。
所以請先上傳圖照。

 
<img src='網址' width='數字px' height='數字px' >

插入外部圖片

二、畫表格

創建表格：使用「{|」開始表格、「|}」結束表格。 

{| class="wikitable"
| Header1 || Header2 || Header3
|-
| 單元格1 || 單元格2 || 單元格3
|-
| 單元格4 || 單元格5 || 單元格6
|}

三、嵌入

當有經常需要重覆使用的內容時，使用崁入的方式直接將其他頁面的內容置於編輯頁面。 

{{欲崁入之頁面名稱}}

四、插入圖照

插入圖照時，應先上傳檔案。 

[[檔案:example.jpg|選擇性文字描述]]

五、插入影片

六、輸出 HTML 讓 word 讀

七、收納與展開

八、加入分類

九、去除 TOC

SVG

  • SVG是一種用於描述二維向量圖形的XML基礎的語言。它使用數學公式來定義圖形，因此可以無損地縮放和變換。
  • 主要特點是可縮放性。不同於像素圖像，SVG圖形可以根據不同的螢幕尺寸和解析度進行無損放大或縮小，並且保持清晰。
  • 可以將SVG代碼嵌入HTML文件中，或將SVG保存為獨立的檔案。

Etherpad

  • Etherpad是一個協作式的即時文本編輯器，它允許多個用戶在同一份文檔上進行同時編輯，並即時看到其他用戶的編輯內容。
  • 下圖為Etherpad電腦介面：

輸入身分

  1. 點擊介面右上方的圖示。
  2. 輸入使用者資訊。
  3. 則使用該設備編輯的內容即會標註使用者資訊。

文字編輯

  • 文字編輯的操作在介面的左上方。
  • 輸入文本或一段文字後，即可選取部分文字，套用粗體、斜體、底線及刪除線樣式。

即時訊息

  • 點擊介面右下方的「Chat」。
  • 得與同一頁面的協作者以文字進行溝通。

Jit.si Meet

控制麥克風與鏡頭

  • 下方工具列的最左方為開、關麥克風的按鈕。
  • 麥克風右方為開、關鏡頭的按鈕。
  • 若無法有效開啟麥克風收音或視訊鏡頭，可以嘗試點選圖示右上方的箭頭，可以調整輸入來源。

螢幕分享

  • 下方工具列左方第三個按鈕即為分享螢幕的功能。
  • 點選該按鈕後，可以選擇分享「分頁」、「視窗」或「螢幕」。
    • 若選擇分享「分頁」，則畫面僅會停留在瀏覽器特定的分頁上；若切換分頁則需要在重新分享。
    • 若選擇分享「視窗」，則畫面僅會停留在瀏覽器的視窗中；若切換電腦的軟體，則畫面不會跟進。
    • 若選擇分享「螢幕」，則與會者會看到分享人的整個螢幕畫面。
  • 若要開啟PPT投影片進行簡報，建議分享「螢幕」。

MySQL

取自「http://well-being-ng.net/wellBeingNg/index.php?title=教育再公共化聯盟/實習/新手課表&oldid=15531」