資訊基礎應用/張鈞祺：修訂版本之間的差異

2018年1月16日 (二) 11:51的修訂版本

圖片

已記住的英文單字

table table 表

row tr 列

diamond td 格

hyper html 超

text html 文字，文件

markup html 標記

languagehtml 語言

head head 頭

title title 標題

body body 身體

rowspan

colspan

9月12日

練習.今天學到如何建立"筆記頁"

用字母調出光的三原色red green blue

紅 # foo

綠 # ofo

藍 # oof

白 # fff

黑 # ooo

使用table、td、tr來製做基本表格。製做同學基本資料

9月19日

屬性值

設定HTML表格的字體、顏色、大小、粗細、高度 、寬度等。

顏色table,td {border: solid 1px;}。

{border:顏色深淺#16ef dashed 表格粗細16px;}。

高度 rowspan。

寬度colspan。

Cascading Style Sheets(簡寫CSS）的用途是什麼

9月26日

1. png不失真 公開格式
2. jpg jepg 失真 壓縮
3. gif可動畫 只有256色

• 井號、星號、等號、中括號；
• 用空白行分段。

例如：

#AAA
#BBB
#CCC

*AAA
*BBB
*CCC

*AA
*#AA1
*#AA2
*BB
*#BB1
*#BB2

#AA
#*AA1
#*AA2
#BB
#*BB1
#*BB2

==中標==
===小標===
====小小標====
=====加粗標=====
======超小標======

10月3日

履歷表 自我介紹 http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/TesT.html

10月17日

寫HTML>用WORD讀>存DOCX或PDF>去7-11列印 markup 提供指示 XML想要 標籤的人自己發明標籤 二十個就夠了 不夠記 微軟的規格 不會重複 <>是標籤 HTML4之前不行 HTML5才可以 帶META指令 BODY外面做定義 BODY中做顯示部份 黑盒子 margin(邊沿)： margin:上 右 下 左;　margin:上下 左右;　margin:上 左右 下;　margin:四個邊同樣値; padding(內距)： padding:auto;：讓瀏覽器自己去設定 padding:%;：讓瀏覽器自己去設定，跟邊界元素有關。兩者不建議使用。 padding:上 右 下 左;　padding:上下 左右;　padding:上 左右 下;　padding:四個邊同樣値; border(邊框)： 顏色 紅紅綠綠藍藍 紅綠藍

10月24日

• svg放大不毛邊
• 用程式碼構成一張圖
• 步驟
  1. 宣告格式(版本 字格式 是否獨立存在)
  2. SVG開始(格式、長寬)
  3. SVG結束
• 今日學會使用
  • polyline
  • polygon
  • circle(作業小熊)

<circle cx='200' cy='400' r='140' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/> <circle cx='200' cy='400' r='110' style='fill: #EEFFBB;stroke:black;stroke-width:2;fill-opacity:1'/>

 <circle cx='120' cy='120' r='60' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/>
 <circle cx='280' cy='120' r='60' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/>
 <circle cx='120' cy='120' r='40' style='fill:#DDAA00 ;stroke:black;stroke-width:2;fill-opacity:1'/>
 <circle cx='280' cy='120' r='40' style='fill:#DDAA00 ;stroke:black;stroke-width:2;fill-opacity:1'/>
 <circle cx='200' cy='200' r='120' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/>
 
 <circle cx='150' cy='180' r='12' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
 <circle cx='250' cy='180' r='12' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
  	#0000FF 
 <circle cx='150' cy='181' r='5' style='fill:#0000FF;stroke:black;stroke-width:2;fill-opacity:1'/>
 <circle cx='250' cy='181' r='5' style='fill:#0000FF;stroke:black;stroke-width:2;fill-opacity:1'/>
  	
 <circle cx='200' cy='240' r='50' style='fill:#FFFFBB;stroke:black;stroke-width:2;fill-opacity:1'/>
 <circle cx='200' cy='213' r='10' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
 <circle cx='200' cy='256' r='25' style='fill:#FF0000;stroke:black;stroke-width:2;fill-opacity:1'/>
 

<ellipse cx='120'cy='395' rx='60' ry='40' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/> <ellipse cx='280'cy='395' rx='60' ry='40' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/> <circle cx='175' cy='395' r='25' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/> <circle cx='225' cy='395' r='25' style='fill: #FFFF00;stroke:black;stroke-width:2;fill-opacity:1'/>

</svg>

• • 小熊由16個圓和2個橢圓組成

什麼是SVG 可縮放向量圖形（英語：Scalable Vector Graphics，SVG）是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。SVG由W3C制定，是一個開放標準，這是通用的定義

10月31日

停課

11月7日

• 今日練習：

SVG編寫製做

• 1：開啟fielzilla，連線至站台
• 2：home>www>SVG，在這個資料夾中，建立新檔案。
• 3：命名為：flower(記得要加入副檔名.svg)
• 4：寫入程式碼。

11月14日

線形漸層

• 可固定Y或X來達到向下或向左的漸層
• 用polygon points畫出箭頭，用漸層的ID來引入
• offset屬性用來定義漸層的開始和結束位置，其 100% 是指整個漸層範圍。
• stop-color 屬性用來定義顏色，也可以做為 style 的樣式。
• stop-opacity 屬性決定透明度，也可以做為 style 的樣式。
• 今日成品：

漸層

• 漸層由一種以上的顏色所組成，由一種顏色慢慢轉成另一種顏色，設定好顏色之後，再以ID的形式給漸層。
• 漸層(又稱為「漸變」)是指將構成元素的形狀或色彩做次第改變的層層變化。例如，同一種形狀的漸大或漸小、同一種色彩的漸濃或漸淡，均屬於漸層的形式變化，而在這些漸增或漸減的層次變化中，即能具現出漸層的美感。
• 漸變的基本原理與反覆相類似，但由於其中或形或色的漸次改變，使得畫面較具活潑性，予人生動輕快的感受。中國建築中的寶塔；樂曲中音量的漸強漸弱；文學小說中情節高潮的堆且；大會舞隊型的漸次縮小或擴大……等，都是漸層形式原理的例子。

11月21日

線性貝茲曲線 給定點P₀、P₁，線性貝茲曲線只是一條兩點之間的直線。這條線由下式給出：

<math>\mathbf{B}(t)=\mathbf{P}_0 + (\mathbf{P}_1-\mathbf{P}_0)t=(1-t)\mathbf{P}_0 + t\mathbf{P}_1 \mbox{ , } t \in [0,1]</math>

且其等同於線性插值。

1. 一次：

二次方貝茲曲線 二次方貝茲曲線的路徑由給定點P₀、P₁、P₂的函數B（t）追蹤：

<math>\mathbf{B}(t) = (1 - t)^{2}\mathbf{P}_0 + 2t(1 - t)\mathbf{P}_1 + t^{2}\mathbf{P}_2 \mbox{ , } t \in [0,1]</math>。

TrueType字型就運用了以貝茲樣條組成的二次貝茲曲線。

1. 二次：　

三次方貝茲曲線 P₀、P₁、P₂、P₃四個點在平面或在三維空間中定義了三次方貝茲曲線。曲線起始於P₀走向P₁，並從P₂的方向來到P₃。一般不會經過P₁或P₂；這兩個點只是在那裡提供方向資訊。P₀和P₁之間的間距，決定了曲線在轉而趨進P₂之前，走向P₁方向的「長度有多長」。

1. 三次：　

四次方貝茲曲線

1. 四次：　

五次方貝茲曲線

1. 五次：

11月28日

• 作業一：

• 作業二：畫出一個矩形、一個弧、一個星形或多邊形。
• 作業三：
• 工具箱：

12月5日

• 鍵盤

12月13日

12月20日

12月27日

1月2日

圖形計算機(一)

• 基本圖紙：
  1. 圖寬：$draw->W，預設601。
  2. 圖高：$draw->H，預設401。
  3. 原點距左上角：$draw->x0,$draw->y0，預設(200,200)。
  4. x每單位幾點：$draw->xu，預設15。
  5. y每單位幾點：$draw->yu，預設15。
  6. x每幾單位畫一個刻度：$draw->xGraduate，預設1。
  7. y每幾單位畫一個刻度：$draw->yGraduate，預設1。
  8. x每幾刻度標示一數字：$draw->xScale，預設1。
  9. y每幾刻度標示一數字：$draw->yScale，預設1。
  10. 秀出直角座標系：$draw->coordinate，預設1。
  11. 函式描點密度：$draw->pointDensity，預設20。
  12. 函式取樣點：$draw->xs，預設'-1;0;1';
• 基本圖：$draw->圖形[]=array(array(…),其他屬性);
  1. 多邊形：$draw->polygons[]=array('points'=>array(array(×,×),array(×,×),array(×,×)),'width'=>'線寬');
  2. 線段：$draw->lineSegments[]=array(array(×,×),array(×,×),'color'=>'顏色','dash'=>'5 5');
  3. 字：$draw->alnums[]=array(array(×,×),'word'=>'字');
  4. 圓：$draw->circles[]=array(array(×,×),'radius'=>半徑,'fill'=>'顏色','fill-opacity'=>'1');，預設半徑3。
  5. 楕圓：$draw->ellipses[]=array(array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色');
  6. 弧：$draw->arcs[]=array(array(×,×),array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色','arrowEnd'=>1);

1月9日

圖形計算機(二)

• 多項式：
  1. 基本：
     $draw->functions[]=array('functionName'=>'polynomialEquation','argument'=>array(×,×,×,…),'color'=>'red');
  2. $draw->xs='×;×;×;…';：各點 x 值。
  3. 標y值：在functions[]中加'xToy'=>$draw->xs,
  4. 標點：在functions[]中加'x2y'=>$draw->xs,
  5. 斜率：在functions[]中加'tangentPoint'=>$draw->xs,
  6. 面積：在functions[]中加'area'=>$draw->xs,
• 互動式圖形計算機
• google圖形計算機

涵式表示

   function test(){
   alert("這個網頁有毒")
   }
   test();

涵式

   <!DOCTYPE HTML>
   <html>
   <head>
   <meta charset="utf=8"></meta>
   <title>Javascript</title>
   <script type="text/javascript">
   function test(message){
   alert(message)
   }
   test("你受到不明病毒感染");
   test("WINDOWS系統將關閉");
test("DSJFDSFAJPFJSAOITAEWORUEWPOOCKSADOFJKDSLKFJDKSPLFAJLFJSALDFFIDSFAOI;LKFASSSFLSAFKLSFDLAKSJFDSLKFJSDLKDSAFLDSJSLJFD;J;KJDSJ;FDSJ;;KJDSF;J;JFDS;J;JFDS;JFDFD;J;JF;LJF;LJFD;JFJ;FD;LD;JFJODIJREIUT09UFDIFDJLKKJDSFJKLFKJKJJFDSJFLKJDSLKJ;F;JDJFDJKFDJ;K");
   </script>
   </head>
   <body> 
   </body>
   </html>

多項式

1月16日

寫筆記

1月23日

寫筆記

1 環境以工具

1.1 一、環境

1.2 二、工具與設定

firefox

firefox優點

1. 不容易中毒

2. 有精選網站功能

firefox缺點

1. 沒有自己的搜尋引擎

2. 歷史紀錄資料不好找

filezilla EmEditor

2 HTML與HTTP

HTTP

HTTP的發展是由提姆·柏內茲-李於1989年在歐洲核子研究組織（CERN）所發起

HTML

HTML的首個公開描述出現於一個名為「HTML標籤」的檔案中，由提姆·柏內茲-李於1991年底提及

3 wiki

#AAA
#BBB
#CCC

*AAA
*BBB
*CCC

*AA
*#AA1
*#AA2
*BB
*#BB1
*#BB2

#AA
#*AA1
#*AA2
#BB
#*BB1
#*BB2

==中標==
===小標===
====小小標====
=====加粗標=====
======超小標======

=大標=

[http://jendo.org 振鐸網站]
格式：[URL 連結說明]

[[首頁|這是首頁]]
格式：[[頁面名稱|連結說明]]
中括號內也可只寫頁面名稱

[[檔案:Go top.gif]]
格式：[[檔案:檔名|圖長|圖寬|…]]

4 CSS

5 SVG

5.1 一、概述

1：開啟fielzilla，連線至自己的站台管理員

2：home>www>SVG，在這個資料夾中，建立新檔案。

3：命名，然後記得要加入副檔名.svg

4：寫入程式碼。

5.2 二、基本架構

5.3 三、文字

svg文字範例

內碼

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>
	<<text x='40' y='50' style='font-family:kaiti;fill:#00ff00'>張</text>
        <<text x='55' y='50' style='font-family:kaiti;fill:#ff0000'>鈞</text>
        <<text x='70' y='50' style='font-family:kaiti;fill:#0000ff'>祺</text>

<</svg>

5.4 四、位移、旋轉、縮放、歪斜

5.5 五、群組

5.6 六、定義一次，引用多次

5.7 七、漸層

5.7.1 (一)線性漸層

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='500' height='500'>
<defs>
	<linearGradient id='LG' x1='50%' y1='0%' x2='0%' y2='50%'>
		<stop offset='0%' style='stop-color:#00FF00;stop-opacity:1' />
		<stop offset='100%' style='stop-color:#00FFFF;stop-opacity:1' />
	</linearGradient>
</defs>
<rect width='500' height='500' x='0' y='0' stroke='red' fill='url(#LG)' />

<</svg>

5.7.2 (二)放射漸層

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='750' height='750'>
<defs>
	<radialGradient id='r2' cx='50%' cy='50%' r='50%'>
		<stop offset='0%' stop-color='#99FFFF'></stop>
		<stop offset='30%' stop-color='#66FFFF'></stop>
		<stop offset='70%' stop-color=' #5599FF '></stop>
		<stop offset='100%' stop-color='#0000FF'></stop>
	</radialGradient>
</defs>
<circle cx='200' cy='200' r='200' fill='url(#r2)'/>

<</svg>

5.8 八、柔焦濾鏡

5.9 九、path

5.10 十、動畫

6 Inkscape

7 GIS

GIS基本指令

<meta content='text/html;charset=utf-8' http-equiv='Content-Type'>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<script type='text/javascript' src='http://www.pittss.lv/jquery/gomap/js/jquery.gomap-1.3.3.min.js'></script>
<script>
$(function(){
	$('#map').goMap({
		zoom:17,
		markers:[

		],
	}); 
});
</script>
<<div align=center id='map' style='height:550px; width:900px;'>239新北市鶯歌區永明街58號</div>

8 圖形計算機

PHP是一種開源的通用電腦手稿語言，尤其適用於網路開發並可嵌入HTML中使用。PHP的語法借鑑吸收C語言、Java和Perl等流行電腦語言的特點，易於一般程式設計師學習。PHP的主要目標是允許網路開發人員快速編寫動態頁面，但PHP也被用於其他很多領域。[1]

PHP最初是由勒多夫在1995年開始開發的；現在PHP的標準由the PHP Group[2]維護。PHP以PHP License作為許可協議，不過因為這個協議限制了PHP名稱的使用，所以和開放原始碼許可協議GPL不相容