檢視教育再公共化聯盟/實習/新手課表的原始碼

[[分類:教育再公共化聯盟]]

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

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

===標籤===
*HTML中所有的內容都被包在起始標籤（opening tag）與結束標籤（closing tag）之中。
*例如：
<pre>
<p>福留子孫</p>
</pre>
*「< p >」即為起始標籤；「< /p >」則為結束標籤。<br/>
*不同的標籤則對應到不同的顯示方式，HTML常見的標籤如下：
<pre>
html     超文件(HyperText Markup Language)
head     文件頭
meta     對自身的描述
title    標題
body     本文

h1~h6    標題一級到六級(head)
a        超連結(anchor)
img      圖(image)
p        段(paragraph)
br       跳行(break space)
hr       水平線(Horizontal Rule)

table    表
tr       表內之列(table row)
td       表內之格(table diamond)
th       表內之格(table head diamond)

ol       有次序的列表(order list)
ul       沒有次序的列表(unorder list)
li       列表項目(list item)

style    宣告樣式(修飾一個超文件)
link     載入另一個檔，如 CSS 檔
span     文字小片段
div      區塊(division)
pre      保留原有斷行及排列之式(preserve)

form     表單
</pre>

===屬性===

*HTML不同的標籤中可以加入不同的屬性，提供額外的資訊。
*例如：
<pre>
<a href="http://well-being-ng.net/">福留子孫超連結</a>
</pre>
*「href」即為a的屬性，提供連結的資訊。<br/>
*屬性名稱後應接著「=」，並且屬性值應使用引號包覆。
*不同的標籤有不同的屬性可以使用，但有些屬性可以通用，HTML常見的屬性如下：
<pre>
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 屬性代表項目的值
</pre>

===樣式===
*樣式（Style）使用於style屬性中，透過CSS來控制和美化網頁的外觀和佈局。
*兩組樣式指示以「;」間隔。
*名與值以「:」相連。
*例如：
<pre>
<p style="font-family:Arial; color:red;">福留子孫</p>
</pre>
*「font-family」與「color」為Style屬性的名；「Arial」與「red」分別為「font-family」與「color」的值，分別控制文字的字體與顏色。
*常見的Style屬性的樣式指示如下：
<pre>
font-family: 字體
font-size:   字的大小
font-weight: 字有多粗
text-align:  字的對齊方式
color:       字的顏色
width:       寬度
height:      高度
border:      邊框
border-collapse:collapse 合併框線
</pre>

==MediaWiki==
*Wiki是HTML的簡記法，一定會翻譯成HTML，所以可以從Wiki頁複製HTML段落。

===常見的Wiki基礎語法===
<table class=nicetable>
<tr><th>語法</th><th>顯示</th><th>說明</th></tr>
<tr>
<th><pre>
#AAA
#BBB
#CCC
</pre></th>
<th>
#AAA
#BBB
#CCC
</th>
<th>井號</th>
</tr>
<tr>
<th><pre>
*AAA
*BBB
*CCC
</pre></th>
<th>
*AAA
*BBB
*CCC
</th>
<th>星號</th>
</tr>
<tr>
<td><pre>
*AA
*#AA1
*#AA2
*BB
*#BB1
*#BB2
</pre></td>
<td>
*AA
*#AA1
*#AA2
*BB
*#BB1
*#BB2
</td>
<th>先星後井</th>
</tr>
<tr>
<td><pre>
#AA
#*AA1
#*AA2
#BB
#*BB1
#*BB2
</pre></td>
<td>
#AA
#*AA1
#*AA2
#BB
#*BB1
#*BB2
</td>
<th>先井後星</th>
</tr><tr>
<td><pre>
==中標==
===小標===
====小小標====
=====加粗標=====
======超小標======
</pre></td>
<td>
<p style='font-size:150%;border-bottom:1px solid #aaa;'>中標</p>
<p style='font-size:132%;font-weight:bold;'>小標</p>
<p style='font-size:116%;font-weight:bold;'>小小標</p>
<p style='font-size:100%;font-weight:bold;'>加粗標</p>
<p style='font-size:80%;font-weight:bold;'>超小標</p>
</td>
<th>段落標題，等號多標題小</th>
</tr>
<tr>
<td><pre>
=大標=
</pre></td>
<td>
<p style='font-size:188%;border-bottom:1px solid #aaa;'>大標</p>
</td>
<th>請不要使用最大標</th>
</tr>
<tr>
<td><pre>
[http://well-being-ng.net/ 福留子孫網站]
格式：[URL 連結說明]
</pre></td>
<th>
[http://well-being-ng.net/ 福留子孫網站]
</th>
<th>外部連結：一層中<br/>括號包著 URL，空<br/>白後放連結說明。</th>
</tr>
<tr>
<td>
<pre>[[首頁|這是首頁]]
格式：[[頁面名稱|連結說明]]
中括號內也可只寫頁面名稱
不可以連向本身這一頁
</pre></td>
<th>
[[首頁|這是首頁]]
</th>
<th>內部連結：兩層中括<br/>號包著「頁名」，豎<br/>槓（|）後放連結說明。</th>
</tr>

<tr>
<td><pre>
[[檔案:Go top.gif]]
格式：[[檔案:檔名|圖長|圖寬|…]]
</pre></td>
<th>
[[檔案:Go top.gif]]
</th>
<th>
插入圖照也是內部連結。<br/>
所以請先上傳圖照。<br/>
</th>
</tr>
<tr>
<td><pre>
<img src='網址' width='數字px' height='數字px' >
</pre></td>
<th>
<img src='https://upload.wikimedia.org/wikipedia/commons/3/3e/WaterPhaseDiagram1atm.svg' width='50px' height='50px' />
</th>
<th>插入外部圖片
</th>
</tr>
</table>

==SVG==


==Etherpad==


==Jit.si Meet==


==MySQL==