檢視編輯培力/HTML到SVG 的原始碼

[[分類:108上學年編輯培力]]
==XML 包含 HTML 和 SVG==
<table>
<tr>
	<th rowspan=2 style='font-size:120%;font-weight:normal;'>XML</th>
	<th rowspan=2 style='font-size:220%;font-weight:normal;'>{</th>
	<td style='font-size:120%;'>HTML</td><td>文件</td>
</tr>
<tr>
	<td style='font-size:120%;'>SVG</td><td>向量繪圖</td>
</tr>
</table>
*XML，可延伸標記式語言(Extensible Markup Language)
*HTML，超文件標記語言(HyperText Markup Language)
*SVG，可縮放向量圖形(Scalable Vector Graphics) 

style 屬性同時支援，HTML 與 SVG，只是樣式項目有相同，也有不同的。

===一、SVG在教學上應用的例子：===
#[http://jendo.org/wiki1231/index.php?title=能源與能量#.E8.83.BD.E6.BA.90.E8.88.87.E8.83.BD.E9.87.8F.E7.9A.84.E5.8D.80.E5.88.A5 轉動的齒輪]
#[http://jendo.org/wiki1231/index.php?title=能源與能量#.E8.A8.8E.E8.AB.96.E4.BA.8C.EF.BC.9A.E7.BE.8E.E6.B4.B2.E4.BA.BA.E8.88.87.E6.AD.90.E4.BA.9E.E4.BA.BA 山脈的走向]
#[http://upload.wikimedia.org/wikipedia/commons/3/34/Africa_road5.svg 現代智人走出非洲的可能路線]
#[http://home.jendo.org/~丁禾/鄭氏治台/日本史.svg 日本史]
#[http://home.jendo.org/~丁禾/鄭氏治台/明鄭.svg 鄭氏大事紀]
#[https://upload.wikimedia.org/wikipedia/commons/c/c0/Animal_cell_structure_zhtw.svg 動物細胞]
===二、兩種寫法：===
*圖檔寫法：
<pre>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;
&lt;svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'&gt;

&lt;/svg&gt;</pre>
*HTML寫法：
<pre>&lt;svg&gt;

&lt;/svg&gt;</pre>

青高的課前練習：
 [http://jendo.org/wiki1231/index.php?title=SVG 參考頁]
 看原始碼，然後自己寫出來：
 http://jendo.org/~thisNasAdmin/base.svg
 http://jendo.org/~thisNasAdmin/polygon.svg
 http://jendo.org/~thisNasAdmin/text.svg
 http://jendo.org/~thisNasAdmin/Shinycircle.svg
 http://jendo.org/~thisNasAdmin/3petal1.svg
 http://jendo.org/~thisNasAdmin/3petal2.svg

編輯培力/HTML到SVG

    <link href="css/from.css" rel="stylesheet" type="text/css">

===隨堂練習===
建立一個CSS檔，給另外三個HTML使用