檢視資訊基礎應用的原始碼

[[分類:資訊基礎應用]]
==概述==
{{:資訊基礎應用/課程概述}}
===四、重要參考資料===
*[[HTML]]入門
*wiki 語法
*#[[Wiki_入門語法]]
*#[[Wiki_基本語法與條目發展]]
*#[http://zh.wikipedia.org/wiki/User:Auvaand/維基語法 維基語法及範例(詳版)]
*71個單字
<sqltbl>
sql=select `en`,`command`,`zhtw` from 資訊課用字 where `uses` like '%HTML%'
tblhead=英文;指令;中文
</sqltbl>

==各次上課內容==
===2017.9.5===
*工具與環境，看見伺服器與VDSL
*#區網 wifi ：jendod與jendoa，密碼現場說明
*#伺服器 DS216，網址 6years.jendo.org
*#調整 C:\Windows\System32\drivers\etc\hosts，新增一行「192.168.4.2	6years.jendo.org」，下課前註解掉
*#瀏覽器：firefox 優先於 chrome ，避免使用 IE
*#filezilla
*#*打開 filezilla ，並新增一個站台叫「DS216+(共用)」
*#*上述站台的設為：
*#*#主機:6years.jendo.org；
*#*#協定:SFTP
*#*#使用者:共用
*#*#密碼:<!--common-->
*#*#字碼集:UTF-8
*#*連線，然後到「/home/www」
*#*關閉 filezilla 。
*#*建自己帳號的連線
*#可用的文字編輯器，如 emeditor
*#連結 filezilla 和慣用的文字編輯器：「編輯/設定/檔案編輯」，選用「使用自訂編輯器」與「總是使用預設的編輯器」，並指定編輯器的路徑。
===2017.9.12===
*建造每一個人的筆記頁：「資訊基礎應用/○○○」，要登入才有辦法編寫
*#其中須有一段，列出已記得的單字，老師沒列到的單字要跟丁丁講
*第一份作業：本班通訊錄
*第二份作業：HTML 與 wiki 語法對照表
*第三份作業：個人履歷，參考 http://6years.jendo.org/~共用/丁禾履歷表.doc
*表格邊框美化的範例一
<pre>&lt;table style='border:1px solid black;border-collapse:collapse;'&gt;
&lt;tr&gt;&lt;th style='border:1px solid black;border-collapse:collapse;'&gt;一&lt;/th&gt;&lt;td style='border:1px solid black;border-collapse:collapse;'&gt;三&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;th style='border:1px solid black;border-collapse:collapse;'&gt;二&lt;/th&gt;&lt;td style='border:1px solid black;border-collapse:collapse;'&gt;四&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</pre>
*表格邊框美化的範例二
<pre>&lt;style&gt;
.nicetable {border:1px solid black;border-collapse:collapse;}
&lt;/style&gt;
&lt;table class='nicetable'&gt;
&lt;tr&gt;&lt;th class='nicetable'&gt;一&lt;/th&gt;&lt;td class='nicetable'&gt;三&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;th class='nicetable'&gt;二&lt;/th&gt;&lt;td class='nicetable'&gt;四&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</pre>

===2017.9.19===
*交代樣式(外觀)的三種方式：
*#行內：
*#通篇：
*#跨多篇：<pre>&lt;link rel='stylesheet' type='text/css' href='./pa.css'  /&gt;</pre>
*樣式作用的三種對象：
*#標籤：
*#類別(class)：
*#指定專一的標籤(id)：
*多條件交代樣式的作用對象：
===2017.9.26===
*筆記中建立 wiki 與 HTML 對照表
*#等號
*#星號
*#井號
*#中括號(連結)
*#雙層中括號(圖照)
*#文字的''拉斜''與'''加粗'''
*#冒號及分號
*#水平線
*角括號的寫法：
*#&amp;lt;：&lt;
*#&amp;gt;：&gt;
*#[[Wiki_基本語法與條目發展#示例|表格的示例]]
*[[Mediawiki_簡介]]
*#柏納李發明 html 及 http 。
*#由HTML速記到共筆再到維基百科。
*#分享式合作與共享經濟
*[[CC|CC授權]]
*[[Wiki_基本語法與條目發展]]
*取用圖照：
*#找到 google 翻譯，找出食人魚的英文。
*#由 google 找到「維資基共享源」的網址「commons.wikimedia.org」
*#到「維資基共享源」在蒐尋框蒐「File:Piranha」
*#開一張食人魚的圖，了解頁中各種尺寸的連結，並選擇想要的尺寸。
*#用雙層中括號將圖照帶入 wiki 頁
*#用 img 標籤帶入 wiki 頁
*#比照兩的速度有何不同
*#找到食人魚的分類「Category:Pygocentrus nattereri」
*#由 google 的照片蒐尋，使用「工具/使用權限」來找到可以用的圖。
*#蒐「File:Piranha svg」，並看 svg 檔無段放大不毛邊的效果。
*#看 svg 圖檔的原始碼，知道它是由指示組成。
*圖檔格式(點陣與向量)，SVG特性，著作權保護期的長短。
*#由蒐「file:animal cell svg」說明 svg 檔可輕易改作。但仍要尊重原作者的貢獻。
===2017.10.03===
*下載 http://6years.jendo.org/~共用/丁禾履歷表.doc
*以 word 打開
*#找到「尺規」開關並打開
*#取消「檔案/選項/進階/顯示字元寬度單位」核取方塊
*#找出長寬
*#每 inch 2.54公分，72pt
*開「履歷表.html」
*頁
*#在樣式定義中以「@page 某值{…}」設定 css
*#在顯示區中以「&lt;div style='page:某值;'&gt;」
*#可用的定義：
*#:size:寬 長;
*#:margin:天 右 地 左
*#:mso-page-orientation:landscape 橫放
*#:mso-header-margin:頁首大小
*#:mso-footer-margin:頁尾大小
*跳頁的用法：「&lt;br style='page-break-before:always' /&gt;」
*表格寬度用「style='width:xxx'」表達寬度，xxx可以用百分比、公分、pt、無單位數字，無單位數字由「控制台/顯示器/設定/一般/字型大小」控制，如96dpi(100%)則96個寬度單位為1英吋；120dpi(125%)則120個寬度單位為1英吋。
*表格高度在 tr 中設，
*#&lt;tr style='height:數字'/&gt;時無單位數字、cm、pt三種單位均有效，百分比無效。
*#&lt;tr height=數字/&gt;只對無單位數字有效。 
*圖的寬度：
*#style='width:數字;height:數字;' 對無單位、百分比、pt、cm 皆無效
*#width=數字 height=數字 對百分比、pt、cm 皆無效，對無單位有效，但不可使用auto。無單位長度定義同上段。
===2017.10.17===
*去看 http://6years.jendo.org/~共用/履歷表.html
*用 filezilla 下載回來
*以 word 打開，看完之後，關閉此檔
*用 emeditor 打開下載檔案
*解說 xml (Extensible Markup Language)
*解說 xmlns (xml namespace)
*看[[HTML/適應word]]
*仿做自己的履歷表
===2017.10.24===
*Scalable Vector Graphics(可縮放向量圖形) 
*特性
*#XML語法。
*#二維向量圖形格式。
*#由W3C制定，是開放標準。
*[http://jendo.org/~admin/vs.php 看原始碼]
*#SVG空架子：[http://jendo.org/~admin/base.svg http://jendo.org/~admin/base.svg]
*#多邊形：[http://jendo.org/~admin/polygon.svg http://jendo.org/~admin/polygon.svg]
*#線性漸層：[http://jendo.org/~admin/linearGradient.svg http://jendo.org/~admin/linearGradient.svg]
*#放射漸層：
*#*[http://jendo.org/~admin/ball.svg http://jendo.org/~admin/ball.svg]
*#*[http://jendo.org/~admin/ball2.svg http://jendo.org/~admin/ball2.svg]
*#*[http://jendo.org/~admin/ball3.svg http://jendo.org/~admin/ball3.svg]
*#文字：[http://jendo.org/~admin/text.svg http://jendo.org/~admin/text.svg]
*#複製：[http://jendo.org/~洪凌煙/flower3.svg http://jendo.org/~洪凌煙/flower3.svg]
*在教學上應用的例子：
*#[[能源與能量#能源與能量的區別|轉動的齒輪]]
*#[[能源與能量#討論二：美洲人與歐亞人|山脈的走向]]
*#[http://upload.wikimedia.org/wikipedia/commons/3/34/Africa_road5.svg 現代智人走出非洲的可能路線]
*#[http://jendo.org/~丁禾/鄭氏治台/日本史.svg 日本史]
*#[http://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>
*畫一個小圓圈：
<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='12' height='12'&gt;
  &lt;circle cx='6' cy='6' r='4' style='fill:#fff;stroke:blue;stroke-width:2;fill-opacity:0'/&gt;
&lt;/svg&gt;</pre>
*畫熊臉(bearFace.svg)，如：[http://jendo.org/~施馨檸/svg/Shinycircle.svg 施馨檸畫的熊臉]
*共同約定：
*#開始與結束合一。
*#長度如省略單位，預設單位為 px。
*#px可以使用小數點。
*#以左上為座標原點。
*#座標描述先 x 後 y 。
*#stlye屬性中關於線條之樣式，也可以作為繪圖：
*#*stroke (線條顏色)，
*#*stroke-width (線條寬度)，
*#*stroke-opacity (線條顏色的透明度，合法的範圍是：0 - 1，0最透明，預設1)，
*#*stroke-linecap (線條端點形狀，預設butt端點切齊、round以端點為圓心線寬為直徑畫圓、square以端點為中心線寬為邊長畫方形)，
*#*stroke-linejoin (線條轉彎處樣式，預設miter尖角、round圓角、bevel斜角)，
*#*stroke-miterlimit (尖角內外距/線寬的最大值，不設限則尖角可以拉長至無限長，預設為 4 倍)，
*#*stroke-dasharray (預設none，代表實線。若為數字其值為一陣列，陣列值為線段中實線段長度與虛線段長度的交錯數字，通常是兩個數字一組，如果是奇數，則最後面自動加補第一個數字)
*#stlye屬性中關於面之樣式：
*#*fill (填充顏色)，
*#*fill-opacity (填充不透明，合法的範圍是：0 - 1，0最透明，預設1)。
*#*fill-rule (polygon等標籤有時會將內部分割成不同的區域，填色方式，預設nonzero全部同色、evenodd相鄰區域內部填色與外部填色交互填充、inherit繼承)
*#選擇器 class,id 同 CSS 。 
*常見的簡易繪圖標籤：
*#line(直線)，屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第二點y座標)。
*#polyline(多點成線)，諸屬性如下：
*#*points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
*#polygon(多邊形)，也可以取五點畫出一個星形。諸屬性如下：
*#*points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
*#circle(圓)，諸屬性如下：
*#*cx(圓心x座標)，cy(圓心y座標)，r(半徑)
*#rect(矩形)，諸屬性如下：
*#*width(寬)，height(高)，省略起點則以原點為起點，x(起點x座標)，y(起點y座標)，rx(圓角x半徑)，ry(圓角y半徑)
*#ellipse(楕圓)，諸屬性如下：
*#*cx(中心x座標)，cy(中心x座標)，rx(x軸半長)，ry(y軸半長)。

===2017.10.31===
*加文字(text.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;text x='40' y='50' style='font-family:kaiti;fill:#666666'&gt;羅馬&lt;/text&gt;
&lt;/svg&gt;</pre>
*位移、旋轉、縮放範例(transform.svg)：
<pre>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;
&lt;svg height='100' width='112.5' xmlns='http://www.w3.org/2000/svg' version='1.1'&gt;
	&lt;line x1='0' y1='50' x2='113' y2='50' style='stroke:#0f0;stroke-dasharray:2 2;stroke-width:0.5pt;' /&gt;
	&lt;polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#000;fill:none;stroke-width:1pt;' transform='translate(25,50)'/&gt;
	&lt;polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#00f;fill:none;stroke-width:1pt;' transform='rotate(90) translate(50,-50)'/&gt;
	&lt;polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#00f;fill:none;stroke-width:1pt;' transform='translate(75,50) rotate(90)'/&gt;
	&lt;polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f00;fill:none;stroke-width:1pt;' transform='translate(100,50) rotate(180) scale(0.8)'/&gt;
&lt;/svg&gt;</pre>
*三花瓣練習(3petal0.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='600' height='600'&gt;
&lt;g&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/&gt;
&lt;/g&gt;
&lt;/svg&gt;</pre>
*綁成群組(3petal1.svg)：
<pre>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;
&lt;svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'&gt;
&lt;g transform='translate(300,48) rotate(30) scale(1.7)'&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/&gt;
&lt;/g&gt;
&lt;/svg&gt;</pre>
*墊一張圖(3petal2.svg)：
<pre>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;
&lt;svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'&gt;
&lt;image xlink:href='http://jendo.org/~admin/Image15.png' x='0' y='0' width='600' height='600'/&gt;
&lt;g&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/&gt;
&lt;polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/&gt;
&lt;/g&gt;
&lt;/svg&gt;</pre>
*練習作業：<img src='http://jendo.org/~admin/Image17.png' />
*參考：
*#[http://jendo.org/~admin/flower0.svg 花]
*#[http://jendo.org/~admin/flower1.svg 花+笑臉]
*#[http://jendo.org/~admin/flower2.svg (花+笑臉)拉斜]
*#[http://jendo.org/~admin/flower3.svg 三朵花]

===2017.11.7===