資訊基礎應用筆記/吳亞飛

電腦與網路資源

• 知識：
• 什麼是 UTF-8？萬國碼
• 區分客戶端與伺服器端。

客戶端：電腦、筆電、手機等 伺服器端：網際網路

• 怎麼線上解壓縮 zip 檔？

找可以解壓zip檔的網站 貼上zip檔 然後下載

• 何謂 CC 授權？

無特定對象授權，只要遵守規則都可用 可設定期間 姓名表示/人物授權 創作者可決定是否能營利 不准修改 一樣的方式分享，需要同意後面的人繼續改 無任何標章則可修改 作者亡故/發表50年以上，著作權開放

• 何謂綠色軟體？

綠色軟體是免安裝的軟體

• 解釋十六進位與十進位的差別

十六進位它由0-9，A-F組成，字母不區分大小寫。 十進位，十進位基於位進位和十進位兩條原則，即所有的數字都用10個基本的符號表示，滿十進一，同時同一個符號在不同位置上所表示的數值不同，符號的位置非常重要。 它們之間區別在於數運算時是逢幾進一位

• 解釋「色碼」

用三組十六進位數字表示，部分常用顏色或和上下文相關的內容也可以用英語名稱的「關鍵字」來表示。按順序前兩位是紅色的值，中間兩位是綠色的值，最後兩位是藍色的值。一般以「#」號開頭，後面分別為R、G、B的16位元進位數。 FF為最大數，代表十進位255。比如白色是R、G、B三個顏色最大，在網頁代碼便是：#FFFFFF。黑色是三個顏色為0，在網頁代碼便是：#000000。

• 解釋 ASCII

AAmerican Standard Code for Information Interchange 基於拉丁字母的一套電腦編碼系統(16進位） ，美國資訊交換標準代碼）是基於拉丁字母的一套電腦編碼系統。它主要用於顯示現代英語，而其擴展版本延伸美國標準資訊交換碼則可以部分支援其他西歐語言，並等同於國際標準。

缺點：ASCII的局限在於只能顯示26個基本拉丁字母、阿拉伯數字和英式標點符號，因此只能用於顯示現代美國英語（且處理naïve、café、élite等外來語時，必須去除附加符號）。雖然EASCII解決了部分西歐語言的顯示問題，但對更多其他語言依然無能為力。因此，現在的軟體系統大多採用Unicode。

• 技能：
• 顯示或隱藏檔案副檔名

檢視 點擊影藏/顯示附檔名

• 用 google 找圖照

打開新分頁 點擊照片（哉gmail的旁邊）然後查詢想要的圖片

• 1. 找圖的網址

https://zh.wikipedia.org/

• 1. 怎麼複製出含中文的網址

先把英文複製 再單獨複製中文

• 1. 找出綠色軟體市集

az(我不會拼

• 範例：
• 英文：

維基共享資源

• 知識：
  1. 維基共享資源大約有多少資源？十億
• 技能：
• 註解 ?!
• 找圖照
• 找縮圖網址
• 縮圖網址的格式320x213
• 找某張圖被哪些 wiki 頁使用

被日本 https://zh.wikipedia.org/wiki/日本 使用

• 找某人上傳的縮圖

特殊頁面 媒體上傳與報表 檔案清單 這位用戶在中文維基百科擁有 巡查豁免權 使用者:Joker6666

• 用分類找圖

分類：南極洲

• 範例：
• 英文：

wiki

• 知識：
  1. 什麼是 wiki ？

wiki是一種可通過瀏覽器存取並由使用者協同編輯其內容的網站。沃德·坎寧安於1995年開發了最初的wiki。他將wiki定義為「一種允許一群使用者用簡單的描述來建立和連接一組網頁的社會計算系統」。

• 技能：
• 怎麼打出角括號：< > 使用amp;打出字母的角括號< >
• 註解
• 下段標==
• 有序列點 *
• 無序列點 #
• 外部連結 []
• 內部連結[[]]
• 連續文字分段 兩次空白鍵

• 嵌入圖照(<)img src='' width=200 height=*/(>)
• 嵌入 youtube 影片 (<)videoflash> (<) /videoflash>
• 嵌入非 youtube 影片 (< )videoflash src='' type=html5 width=250 (<)/videoflash>
• 嵌入 wiki 頁[[]]
• 範例：使用者:吳亞飛

HTML

• 知識：
• 什麼是 HTML ？超文件標記語言(HyperText Markup Language)
• 什麼是 http ？http 超文件傳輸協定(HyperText Transfer Protocol)
• http 和 https 的差別？傳輸過程中有加密保護
• 分辨顯示與原始碼mac:command alt U

• 技能：
• 看原始碼 mac:command alt U
• 註解
• 使用 html,head,body 三標籤

head:設定 body:內容

• 用 titl 標籤，改變頁籤文字

加 ，並示範頁籤文字改變

• 指定 HTML 為 UTF-8 編碼

加 （<）meta http-equiv='content-type' content='text/html; charset=UTF-8' / （>）

字的大小 字體

• 有序列點ol
• 無序列點il
• span 標籤

可以加一點小文字的標簽

• 做表格
• border-collapse 樣式 border-collapse(上下是否相接):(collapse/)
• 表格調中 align=表格位置(置中、靠左右)

• 超連結
• 連續文字分段 兩次空白鍵
• 嵌入圖照

• 嵌入影片

• 水平線

HR

• 標題一級到六級

head 設定

• 區塊<,ol>...<,/ol>
• 範例：

• 全班通訊錄
• 英文：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 data) th 放標題或欄名的表內之格(table header)

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

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

form 表單

屬性(用=連等號兩邊) ==== 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 屬性代表項目的值

樣式(用:連冒號兩邊) ==== font-family: 字體 font-size: 字的大小 font-weight: 字有多粗 text-align: 字的對齊方式 color: 字的顏色 width: 寬度 height: 高度 border: 邊框 border-collapse:collapse 合併框線

用到的英文單字 html 超文件 head 頭 title 標題 body 身體 ---------- meta 對自身的描述 http 超文件傳輸協定 equiv 約當 Character 字元 set 集合 paragraph 段 style 樣式(之後的內容應該長得像什麼樣子) ---------- font 字體 family 字族，系 size 大小 weight 輕重 text 文字，文件 align 對齊 color 顏色 ---------- order 有次序的 unorder 沒有次序的 list 列表 item 項目 ---------- image 圖 width 寬度 height 高度 ---------- table 表 row 列 diamond 格 border 邊界，邊框 ---------- anchor 錨，超連結 source 來源 reference 參考 target 目標 blank 空白 ---------- break 斷 space 空間，空格 span 文字小片段 division 區塊 preserve 保留原有斷行及排列之式 horizontal 水平 rule 線 ---------- form 表單 collapse 崩塌 hyper 超 markup 標記 language 語言

SVG

• 知識：
• 什麼是 SVG ？

SVG，可縮放向量圖形(Scalable Vector Graphics)

• 什麼是 XML ？

XML，可延伸標記式語言(Extensible Markup Language)

• 做一個 XML、HTML、SVG 三者的關係簡圖。
• 說明 SVG 的三個特性

XML語法，用書寫指示來畫圖。 二維向量圖形格式，不是點陣圖，無段縮放不會毛邊。 由W3C制定，是開放標準。

• 寫出 直線、多點成線、多邊形、圓、矩形 在 SVG 中的標籤名稱

line(直線)，屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第二點y座標)。 polyline(多點成線)，諸屬性如下： points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。 polygon(多邊形)，也可以取五點畫出一個星形。諸屬性如下： points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。 circle(圓)，諸屬性如下： rect(矩形)

• 找一張能用在教學上，維基共享資源的 SAG 圖，說明可以用來教什麼主題。

問號

• Windows 上 SVG 楷書的名稱，或蘋果
• 技能：
• 用 SVG 畫一個圓。
• 用 SVG 畫一個熊臉

• 用 SVG 畫出「羅馬」兩個字
• 用 SVG 畫出「羅馬不是一天造成的」九個字，並用旋轉拉斜

九個字

• 用 SVG 畫出一朵花，有三個花瓣一個花梗

花花>

• 用 SVG 畫出三朵花，每朵花都有三個花瓣一個花梗

http://nice-learning.tw/uploadFiles/%e5%98%89%e7%a6%be%e6%9b%b8%e9%99%a2/%e5%90%b3%e4%ba%9e%e9%a3%9b/3petal5.svg

• 用 SVG 畫出一個帶漸層色的方塊http://nice-learning.tw/uploadFiles/嘉禾書院/吳亞飛/漸層.svg
• 用 SVG 畫一個用放射漸層表示的太陽 http://nice-learning.tw/uploadFiles/嘉禾書院/吳亞飛/sunnnnnnnnnn.svg
• 怎麼將紙上的手繪圖拍下來，並展開為平整的電子檔？掃描王是你的好幫手
  1. 怎麼使用 inkscape 將電子圖檔轉 SVG 向量圖？把檔案後面加svg
  2. 怎麼使用 inkscape 將 SVG 圖多餘的邊切除？用拉的
  3. 怎麼對一張點陣圖進行「去背」？(png 檔可去背，jpg 檔無法去背)
  4. 怎麼找一張適合的 ICON ，並且是 SVG 格式的圖？到http://urclass.net/files/tools/icons.php
  5. 怎麼縮小一張 SVG 圖的大小？設定他的寬和高（hight...)
  6. 怎麼改變一張 SVG ICON 圖的顏色？(<)path style='fill:#ff0018' transform='scale(0.06)' d='…'/(>)
  7. 怎麼將自己修改的 SVG ICON 圖，可以有網址，能讓 HTML 與 Wiki 頁引用？把icon複製 放到谷歌
• 範例：http://nice-learning.tw/uploadFiles/嘉禾書院/吳亞飛/嘉禾書院圖示.svg
• 英文：

GIS

• 知識：
  1. 什麼是 GIS ？GIS是「地理資訊系統」(Geographic Information System)的縮寫。

是指在地圖上加上數據或訊息。

• 技能：zoom:放大或縮小畫面

marker:標記，GIS中代表地點標示，用複數markers address:地址 latitude:緯度, longitude:經度 map:地圖 polyline:多點成線 polygon:多邊形 circle:圓形 rectangle：方形(矩形)

• 範例：
• 英文：zoom:放大或縮小畫面

marker:標記 address:地址 latitude:緯度, longitude:經度 map:地圖 polyline:多點成線 polygon:多邊形 circle:圓形 rectangle：方形(矩形)

CSS

• 知識：
  1. 什麼是 CSS ？

風格頁面語言（style sheet language）

• 技能：
  1. style 屬性格式語法

在每一個規則當中，除了選擇器名稱以外，其他都必須被大括號（{}）給包住. 在每一個宣告裡面，屬性跟屬性值之間必須用冒號(:) 做區分。 在每一個規則裡面可以包含有許多宣告，但不同的宣告之間必須使用分號 (;) 來區分。

 <link href='stylecolor.css' rel='stylesheet' type='text/css'/>

• 範例：助教的範例
• 英文：style sheet language link