2017年11月21日 (二) 09:28的修訂版本

張又懿筆記頁

已記住的英文單字

table
row
hyper
text
markup
head
title
body
hr
hr
ol

上課所學

9/5上課所學

編號(ip)ipv4 piv6

ooo.ooo.ooo.ooo 255.255.255.255

網址(域名)

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.com	0983329126
張鈞祺	chunchiolulu@gmail.com	0966070126
蕭卉均	suzy92126@gmail.com	0939912983
李彥廷	leejerry0706@gmail.com	0984201016
丁志仁	alledu2@gmail.com	0987466665
盧星瑜	thsrrabbit0803@gmail.com	0930980803
紀詠恩	s950285en@gmail.com	0963617815

style和border兩者之間的差異

屬性名	屬性值
bordor	px
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有哪些好處？

通過單個樣式表控制多個文檔
更精確的佈局控制
為不同的媒體類型（螢幕、列印等）採取不同的佈局

今日程式碼

    <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要使用時只需要導入就行了。
上禮拜作業

9/26上課所學

學習有次序，沒有次序的列表。

維基共享資源

圖片

wiki和html對照表

匯入照片步驟

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

<

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

wiki筆記

雙層中括號(常用img)和單層中括號(a)一個用數條另一個使用空白
老師的口訣：井號、星號、等號、中括號；用空白行分段

數列	#
不排序數列	*
標題	==
描述定義	:;

「…」兩個單引號代表拉斜
「…」三個單引號代表要加粗
格的屬性在該格內容之前且與內容以「|」隔開。
四種常用元素
1. 文字
2. 圖照
3. 聲音
4. 影片

檔案格式

pug:每個點都是原色，不失真公開格式
jpg：點陣圖壓縮，普遍應用，非公開格式，但從沒收過錢，是專利
gif：可動畫，256色，也不是公開格式

svg是向量圖
- 點陣圖會毛邊
- 向量圖不會
自然人死後五十年變大家的，公司是100年(美國的自然人變成70年)

wiki和html對照

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

10/3上課所學

自我介紹

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(邊框)：
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就接受了。
空白

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>

- line

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上課所學

11/29上課所學

12/6上課所學

12/13上課所學

12/20上課所學

12/27上課所學

1/3上課所學

1/10上課所學

1/17上課所學

1/23上課所學

1/30上課所學

@@ 第 355 行： / 第 355 行： @@
 <img src ="http://6years.jendo.org/~%E5%BC%B5%E5%8F%88%E6%87%BF/svg/2">
 =====漸層=====
+*漸層由一種以上的顏色所組成，由一種顏色慢慢轉成另一種顏色，設定好顏色之後，再以ID的形式給漸層。
 ===11/21上課所學===

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