資訊基礎應用/張又懿:修訂版本之間的差異

出自六年制學程
跳轉到: 導覽搜尋
CSS如何呼叫?
=HTML中的特殊符號
第 320 行: 第 320 行:
 
*表格把圖片放在P標籤中。WORD就接受了。
 
*表格把圖片放在P標籤中。WORD就接受了。
 
* 空白
 
* 空白
=====HTML中的特殊符號====
+
=====HTML中的特殊符號=====
 
*在HTML中,〈、〉、&、〝等符號被用來當成標記使用,因此,當瀏覽器讀到這些符號時,會自動把它們當成標記。
 
*在HTML中,〈、〉、&、〝等符號被用來當成標記使用,因此,當瀏覽器讀到這些符號時,會自動把它們當成標記。
 
*假如要在瀏覽器中顯示這些符號,就必須用:
 
*假如要在瀏覽器中顯示這些符號,就必須用:

2018年1月9日 (二) 17:07的修訂版本



張又懿筆記頁

已記住的英文單字

  1. table
  2. row
  3. hyper
  4. text
  5. markup
  6. head
  7. title
  8. body
  9. hr
  10. hr
  11. ol

上課所學

9/5上課所學

  1. 編號(ip)ipv4 piv6

ooo.ooo.ooo.ooo 255.255.255.255

  1. 網址(域名)

65536 物聯網 一切人造物接上網路,得失相兼 福禍相依 連結夠大,連結夠大就有智慧 域名伺服器 hosts ds216區網的位置

  • 一定要將字體設為UFT-8才能通用多國語言

9/12上課所學

  • 練習.今天學到如何建立"筆記頁",要注意有沒有登入自己的帳號才能建立。(#後面的都是數值。)
  • 配色.用光的三原色調出顏色red green blue,數字、字母代表數字。
  • 複習.使用table、td、tr來製做基本表格。製做:"同學通訊錄"(使用border來做邊界。)
  • 學會使用style美化表格
  • 今天學到的有兩種學法一種是一個一個設定,另一個是直接做一個主控制程式,主控制程式的比較簡潔好用。
  • style是HTML中很基本的指令。
  • style指令:在自己定義的"代碼(今天使用的是nicetable來當代碼)"凡是在.後面的都是代碼下的指令,class就是類的意思,我們下的指令是關於邊框屬性的。
  • style和bordor相比style比較廣用,能做出的變化比較多。
 <style>
 .nicetable {border:4px solid green;border-collapse:collapse;}
 </style>
張又懿yuyiolulu@gmail.com0983329126
張鈞祺chunchiolulu@gmail.com0966070126
蕭卉均suzy92126@gmail.com0939912983
李彥廷leejerry0706@gmail.com0984201016
丁志仁alledu2@gmail.com0987466665
盧星瑜thsrrabbit0803@gmail.com0930980803
紀詠恩s950285en@gmail.com0963617815
  • style和border兩者之間的差異
屬性名屬性值
bordorpx
style......

作業一 作業二

  • 表格邊框美化的範例一
<table style='border:1px solid black;border-collapse:collapse;'>
<tr><th style='border:1px solid black;border-collapse:collapse;'>一</th><td style='border:1px solid black;border-collapse:collapse;'>三</td></tr>
<tr><th style='border:1px solid black;border-collapse:collapse;'>二</th><td style='border:1px solid black;border-collapse:collapse;'>四</td></tr>
</table>
  • 表格邊框美化的範例二
<style>
.nicetable {border:1px solid black;border-collapse:collapse;}
</style>
<table class='nicetable'>
<tr><th class='nicetable'>一</th><td class='nicetable'>三</td></tr>
<tr><th class='nicetable'>二</th><td class='nicetable'>四</td></tr>
</table>

9/19上課所學

  • 屬性值和屬性名用空白分開

EX:

   .樣式名{
 CSS屬性名A:屬性值;
 CSS屬性名B:屬性值;
 }
  • 分號";"為結束或將兩者分開
  • 用,分開的意思是兩著皆是
  • id(identy)只能使用於專一的個人
  • 在程式碼最前面用#來下程式
  • dashed為虛線的意思
  • 中間為一段

  • br不需結尾,用途就像文書處理中的Enter
  • h1~h6用於段落標題,和wiki中的==用途一樣
  • 第三篇個名詞解釋
    • linl rel:呼叫
    • styleshee:它是這個頁面的樣式表
    • type:這個用於哪裡(我們在這裡使用text,也就是普通文字)
    • href:它在哪裡
    • .:在....
    • /:資料夾中的哪裡?
  • 學會第三種多篇是,設定一個程式,所有的其他HTML就可以拉出使用
   <link rel='stylesheet' type='text/css' href='./pa.css'  />
   白話為:<link rel='stylesheet' type(它是我的樣式表)='text/css' href(它在哪裡)='.(此地)/pac.ss'  />
  • 在設定樣式主程式的時候在前面加上table代表只能使用於table,加上texT代表只能使用於text。
  • O名稱 標籤
  • .名稱 凡
    1. 名稱 指定的專一標籤
  • 屬性值與屬性名使用=
  • collapse(崩塌)
  • solid(實線)
  • 光三原色調出顏色red green blue

紅 # foo 綠 # ofo 藍 # oof 白 # fff 黑 # ooo

  • 樣式優先順序:link導入<.nicetable(舉例而已,只要加上.就可以定義自己的style)<行內的指令

CSS層疊樣式表(英語:Cascading Style Sheets)

CSS的用途是什麼?

CSS是一種樣式表語言,用於為HTML的樣式。可設定字體、顏色、邊距、高度、寬度等屬性。

CSS跟HTML的區別在哪裡?

HTML用於結構化內容;CSS用於格式化結構化的內容。

採用CSS有哪些好處?
  1. 通過單個樣式表控制多個文檔
  2. 更精確的佈局控制
  3. 為不同的媒體類型(螢幕、列印等)採取不同的佈局

今日程式碼

    <link rel='stylesheet' type='text/css' href='./pac.ss'>
    <style>
     table {border:yellow dashed 3px}
     td    {border:#200 dashed 1px}
     tr    {border:yellow solid 1px}
     #xyz  {border:purple dashed 1px}
     </style>
     <table>
     <b>
     <tr><th class='nicetable' style= "border:yellow solid 1px;">張又懿</th><th style='border:1px solid red;border-
     collapse:collapse;'>yuyiolulu@gmail.com</th><th style='border:1px solid red;border-collapse:collapse;'>0983329126</th></tr>
     <tr><td>張鈞祺</td><td class='nicetable'>chunchiolulu@gmail.com</td><td class='nicetable'>0966070126</td></tr>
     <tr><th class='nicetable'>蕭卉均</th><td class='nicetable'>suzy92126@gmail.com</td><td class='nicetable'>0939912983</td></tr>
     <tr><th class='nicetable'>李彥廷</th><td class='nicetable'>leejerry0706@gmail.com</td><td class='nicetable'>0984201016</td></tr>
     <tr><th class='nicetable'>丁志仁</th><td id ='xyz'>alledu2@gmail.com</td><td class='nicetable'>0987466665</td></tr>
     <tr><th class='nicetable'>盧星瑜</th><td class='nicetable'>thsrrabbit0803@gmail.com</td><td class='nicetable'>0930980803</td></tr>
     <tr><th class='nicetable'>紀詠恩</th><td class='nicetable'>s950285en@gmail.com</td><td>0963617815</td></tr>
     </b>
     </table>
     <p class = "nicetable">以上是本班的通訊錄</p>
     <br><br><br>
  • 樣式用於
    • 標籤
    • class,也就是類別,這次我們使用的是:nicetable
    • ID,也就是某東西專屬的身份辨識,就像有些通訊軟體中的ID一樣
  • 這堂課學到第三種樣式的寫法,總體來說,有三層。
    • 第一層HTML會優先聽它的,但寫法很麻煩要一個一個td加上style。
    • 第二層HTML其次才會聽它的,在每一個新網頁要寫一排主控程式,比第一層方便,但如果我想要連結多個網站,就得乖乖的一個一個下主程式。
    • 第三曾HTML最後才會選擇採用它的樣式,這個方法是建立一個CSS要使用時只需要導入就行了。
  • 上禮拜作業
CSS如何呼叫?
  • CSS屬於樣式,但是要先定義好才能使用,用link的功能來呼叫出CSS

9/26上課所學

  • 學習有次序,沒有次序的列表。

維基共享資源

圖片

Pygocentrus natterei Prague 2012 2.jpg

匯入照片步驟

  1. 開啟維基共享資源,不需登入即可使用圖照,但要上傳就必須登入。
  2. 在搜尋引擎中尋找自己中意的圖片
  3. 使用

<Piranha face.jpg

  • 六種CC類別(123)
    1. 姓名表示
    2. 可商業利用
    3. 非商業
    4. 可改做
    5. 不可改做
    6. 相同方式分想
    • CC絕對允許共同使用,對不特定對象授權

wiki筆記

  • 雙層中括號(常用img)和單層中括號(a)一個用數條另一個使用空白
  • 老師的口訣:井號、星號、等號、中括號;用空白行分段
數列 #
不排序數列 *
標題 ==
描述定義 :;
  • 」兩個單引號代表拉斜
  • 」三個單引號代表要加粗
  • 格的屬性在該格內容之前且與內容以「|」隔開。
  • 四種常用元素
    1. 文字
    2. 圖照
    3. 聲音
    4. 影片

檔案格式

  1. pug:每個點都是原色,不失真公開格式
  2. jpg:點陣圖壓縮,普遍應用,非公開格式,但從沒收過錢,是專利
  3. gif:可動畫,256色,也不是公開格式
  • svg是向量圖
    • 點陣圖會毛邊
    • 向量圖不會
  • 自然人死後五十年變大家的,公司是100年(美國的自然人變成70年)

wiki和html對照

指令/程式 wiki html
表格 table table
tr tr
td td
排序列 # ol

10/3上課所學

  • 自我介紹「製作履歷表」
  • 作業繳交履歷表

如何決定頁面大小

因為我們要使用HTML做出下載後就能直接用word開啟的文件,所以需要抓好size。 製作順序

  1. 開啟word
  2. 開啟尺規
  3. 算好表格的長寬

使用程式碼

    @page a4{
    size:21cm 29.7cm;
    margin:3cm 2cm 3cm 2cm;
    }

10/17上課所學

寫HTML>用WORD讀>存DOCX或PDF>去7-11列印 markup 提供指示 XML想要 標籤的人自己發明標籤 二十個就夠了 不夠記 微軟的規格 不會重複

  • <>是標籤
  • HTML4之前不行
  • HTML5才可以
  • 帶META指令
  • body與head的差異
    • head裡做定義
    • 像是CSS樣式,title等...部分
    • BODY中做顯示部份,這裡就是網站主要的內容,
  • 黑盒子
    • margin(邊沿):
      • margin:上 右 下 左; margin:上下 左右; margin:上 左右 下; margin:四個邊同樣値;
    • padding(內距):
      • padding:auto;:讓瀏覽器自己去設定
      • padding:%;:讓瀏覽器自己去設定,跟邊界元素有關。兩者不建議使用。
      • padding:上 右 下 左; padding:上下 左右; padding:上 左右 下; padding:四個邊同樣値;
    • border(邊框):
  • HTML對比WORD講義
  • 表格樣式
    1. 實線border-style:solid;
    2. 點線border-style:dotted;
    3. 虛線border-style:dashed;
    4. 框線border-style:double;
    5. 外凸線border-style:outset;
    6. 內凸線border-style:inset;
    7. 溝線border-style:groove;
    8. 立體線border-style:ridge;
    9. 沒線border-style:ridge;
  • 合併表格的框線border-collapse:collapse
  • PT是長度(每英吋72)2.542分
  • font-family字形
  • font-size字的尺寸
  • font字
  • padding:與邊框距離
  • 螢幕解析100% 96/吋
  • 螢幕解析125% 120/吋
  • 表格把圖片放在P標籤中。WORD就接受了。
  •  空白
HTML中的特殊符號
  • 在HTML中,〈、〉、&、〝等符號被用來當成標記使用,因此,當瀏覽器讀到這些符號時,會自動把它們當成標記。
  • 假如要在瀏覽器中顯示這些符號,就必須用:
    • 「&lt;<」來顯示小於符號
    • 「&gt;>」來顯示大於符號
    • 「&amp;&」來顯示&符號
    • 「&quot;"」來顯示雙引號
    • 更多特殊符號
    • 特殊符號代碼
本次練習
  • 強制HTML印出時換頁。
  • 網路上查到的程式碼
   br style='page-break-before:always' />
  • 這是一個style所以要先在head裡頭定義
   {page-break-before: always /*在標籤前換頁*/}
   {page-break-after: always /*在標籤後換頁*/}

10/24上課所學

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

<<?xml version='1.0' encoding='UTF-8' standalone='no'?> <<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='400' height='400'> <<circle cx='200' cy='300' r='150' style='fill:#ffdc35;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='120' cy='120' r='40' style='fill: #FFDC35;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='280' cy='120' r='40' style='fill: #FFDC35;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='120' cy='130' r='30' style='fill:#FFAD86;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='280' cy='130' r='30' style='fill:#FFAD86;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='200' cy='200' r='100' style='fill: #FFDC35;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='150' cy='181' r='5' style='fill:#fff;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'/> <<circle cx='250' cy='181' r='5' style='fill:#fff;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='200' cy='240' r='50' style='fill:#FFD39B;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='200' cy='215' r='10' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='130' cy='240' r='10' style='fill:#FFCBB3;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='270' cy='240' r='10' style='fill:#FFCBB3;stroke:black;stroke-width:2;fill-opacity:1'/> <<circle cx='200' cy='280' r='5' style='fill:#000;stroke:black;stroke-width:2;fill-opacity:1'/> <</svg>

    • 小熊由七個圓組成

什麼是SVG

可縮放向量圖形(英語:Scalable Vector Graphics,SVG)是一種基於可延伸標記式語言(XML),用於描述二維向量圖形的圖形格式。SVG由W3C制定,是一個開放標準。 這是網路上的標準定義。

11/7上課所學

  • 今日練習:

SVG編寫製做

  • 步驟一:開啟fielzilla,連線至站台
  • 步驟二:home>www>SVG,在這個資料夾中,建立新檔案。
  • 步驟三:命名為:flower(記得要加入副檔名.svg)
  • 步驟四:寫入程式碼。

11/14上課所學

線形漸層

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

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

11/21上課所學

貝茲曲線

在數學的數值分析領域中,貝茲曲線(英語:Bézier curve,亦作「貝塞爾」)是計算機圖形學中相當重要的參數曲線。更高維度的廣泛化貝茲曲線就稱作貝茲曲面,其中貝茲三角是一種特殊的實例。 貝茲曲線於1962年,由法國工程師皮埃爾·貝茲(Pierre Bézier)所廣泛發表,他運用貝茲曲線來為汽車的主體進行設計。貝茲曲線最初由Paul de Casteljau於1959年運用de Casteljau演算法開發,以穩定數值的方法求出貝茲曲線。

二次貝茲曲線
三次貝茲曲線
三次與數次貝茲曲線的差異

11/28上課所學

inkscape

  • 免費的SVG建構軟體,有點像Adobe的AI繪圖軟體。
  • Inkscape是一套向量圖形編輯器,以自由軟體授權發布與使用。該軟體的開發目標是成為一套強力的繪圖軟體,且能完全遵循與支援XML、SVG及CSS等開放性的標準格式。Inkscape是一套跨平台性的應用程式,Windows、Mac OS X、Linux及類UNIX版等作業系統。

12/5上課所學

繼續練習inkscape

inkscape的快捷鍵

12/12上課所學

GIS (Geographic Information System,地理資訊系統),是指在地圖上加上數據或訊息。

GIS維基百科的定義

地理資訊系統(英語:Geographic Information System,縮寫:GIS)是一門綜合性學科,結合地理學與地圖學,已經廣泛的應用在不同的領域,是用於輸入、儲存、查詢、分析和顯示地理資料的電腦系統,可以分為以下五部分:

  • 人員,是GIS中最重要的組成部分。開發人員必須定義GIS中被執行的各種任務,開發處理程式。熟練的操作人員通常可以克服GIS軟體功能的不足,但是相反的情況就不成立。最好的軟體也無法彌補操作人員對GIS的一無所知所帶來的負作用。
  • 資料,精確可用的資料可以影響到查詢和分析的結果。
  • 硬體,硬體的效能影響到處理速度,使用是否方便及可能的輸出方式。
  • 軟體,不僅包含GIS軟體,還包括各種資料庫,繪圖、統計、影像處理及其它程式。
  • 過程,GIS要求明確定義,一致的方法來生成正確的可驗證的結果。

GIS屬於資訊系統的一類,不同在於它能運作和處理地理參照資料。地理參照資料描述地球表面(包括大氣層和較淺的地表下空間)空間要素的位置和屬性,在GIS中的兩種地理資料成分:空間資料,與空間要素幾何特性有關;屬性資料,提供空間要素的資訊。

需要背的單字

  1. zoom:放大或縮小畫面
  2. overlay:覆蓋物,GIS中用複數overlays
  3. marker:標記,GIS中代表地點標示,用複數markers
  4. address:地址
  5. latitude:緯度
  6. longitude:經度
  7. coord:經緯度座標,GIS中代表地點標示,用複數coords
  8. map:地圖
  9. type:類別
  10. road:道路
  11. color:顏色
  12. fill:填滿
  13. radius:半徑
  14. html:超文件
  15. content:內容
  16. popup:跳出
  17. false:假的,不成立
  18. true:真的,成立
  19. polyline:多點成線
  20. polygon:多邊形
  21. circle:圓形
  22. rectangle:方形(矩形)
  23. ROADMAP:道路地圖
  24. SATELLITE:衛星空照圖
  25. HYBRID:道路與空照圖相疊加。
  26. TERRAIN:地形圖

12/19上課所學

12/26上課所學

  • ?後面代表要給伺服器的變數
  • zh-TW是中文的意思
  • hl=host language

今天的作業

  • 繪製自己的地圖
  • 作品

1/2上課所學

圖形計算機基本繪圖

1/9上課所學

涵式表示

   function test(){
   alert("這個網頁很安全,請安心使用")
   }
   test();

多項式

1/17上課所學

1/23上課所學

1/30上課所學