「2020/資訊基礎應用/復習與補遺」修訂間的差異

出自不錯學群
跳至導覽 跳至搜尋
（→‎Wiki）
 
（未顯示同一使用者於中間所作的 16 次修訂）
行 2： 行 2：
 
==Wiki==
 
==Wiki==
 
#[[Wiki_入門語法]]
 
#[[Wiki_入門語法]]
 +
#*摺疊練習：<span style='color:red'>實作練習</span>
 
#[https://zh.wikipedia.org/wiki/Help:數學公式 wiki中的數學公式]
 
#[https://zh.wikipedia.org/wiki/Help:數學公式 wiki中的數學公式]
 
#嵌入：
 
#嵌入：
 
#*連接使用：<nowiki>[[前置字:名字空間:頁名]]</nowiki>，如<nowiki>[[Wikipedia::Main Page]]</nowiki>或<nowiki>[[Wikipedia:Main Page]]</nowiki>都會出現這樣的連結：[[Wikipedia::Main Page]]，並連到維基百科的主頁。後者是省略名字空間。
 
#*連接使用：<nowiki>[[前置字:名字空間:頁名]]</nowiki>，如<nowiki>[[Wikipedia::Main Page]]</nowiki>或<nowiki>[[Wikipedia:Main Page]]</nowiki>都會出現這樣的連結：[[Wikipedia::Main Page]]，並連到維基百科的主頁。後者是省略名字空間。
−
#*嵌入使用：<nowiki>{{前置字:名字空間:頁名}}</nowiki>，如<nowiki>{{jendo::跳至頁首}}</nowiki>(注意名字空間可放入空字串但不可省略)會嵌入{{jendo::跳至頁首}}
+
#*嵌入使用：<nowiki>{{前置字:名字空間:頁名}}</nowiki>，如<nowiki>{{zhtwwikipedia::余茂春}}</nowiki>(注意名字空間可放入空字串但不可省略)會嵌入「中文維基百科的『余茂春』介紹頁」：<span style='color:red'>實作練習</span>
 
#*嵌入本 wiki 的另外一頁，省略「前置字」
 
#*嵌入本 wiki 的另外一頁，省略「前置字」
 +
[[2020編輯培力同學/全班|同學實作展示]]
  
 
==HTML==
 
==HTML==
−
===一、回憶殺===
+
===一、回憶殺(<span style='color:blue'>介紹解說</span>)===
 
#從「[http://nice-learning.tw/uploadFiles 網路檔案櫃]」找回 base1.htm
 
#從「[http://nice-learning.tw/uploadFiles 網路檔案櫃]」找回 base1.htm
 
#&lt;meta http-equiv='content-type' content='text/html; charset=UTF-8' /&gt;
 
#&lt;meta http-equiv='content-type' content='text/html; charset=UTF-8' /&gt;
−
===二、HTML的簡介與基本規則===
+
 
 +
===二、HTML的簡介與基本規則(<span style='color:blue'>問答解說</span>)===
 
{{jendo::HTML/簡介與基本規則}}
 
{{jendo::HTML/簡介與基本規則}}
−
===三、重要的標記、屬性、樣式===
+
 
 +
===三、重要的標記、屬性、樣式(<span style='color:blue'>問答解說</span>)===
 
{{jendo::HTML/重要的標記、屬性、樣式}}
 
{{jendo::HTML/重要的標記、屬性、樣式}}
 +
 
===四、用到的英文單字===
 
===四、用到的英文單字===
 
{{jendo::HTML/英文單字}}
 
{{jendo::HTML/英文單字}}
 
===五、字的進階運用===
 
===五、字的進階運用===
−
參考頁：
+
參考頁(<span style='color:blue'>介紹解說</span>)：
 
#[http://jendo.org/wiki1231/index.php?title=HTML中的數學符號/常用 常用的數學及科學字符]
 
#[http://jendo.org/wiki1231/index.php?title=HTML中的數學符號/常用 常用的數學及科學字符]
 
#[http://jendo.org/wiki1231/index.php?title=HTML中的數學符號 HTML頁面可用的數學與科學符號]
 
#[http://jendo.org/wiki1231/index.php?title=HTML中的數學符號 HTML頁面可用的數學與科學符號]
行 25： 行 30：
 
#[https://zh.wikipedia.org/wiki/Help:數學公式 wiki中的數學公式]
 
#[https://zh.wikipedia.org/wiki/Help:數學公式 wiki中的數學公式]
 
重點：
 
重點：
−
#HTML字符轉義(HTML Entity)
+
#HTML字符轉義(HTML Entity)：<span style='color:red'>實作練習</span>
−
#上標、下標
+
#上標、下標：<span style='color:red'>實作練習</span>
−
#放大、縮小
+
#放大、縮小：<span style='color:red'>實作練習</span>
−
#樣式 text-decoration
+
#樣式 text-decoration(<span style='color:blue'>看原始碼</span>)：
−
#加粗、底線、拉斜、刪除
+
#*<span style='text-decoration:overline;'>樣式</span>
−
==CSS==
+
#*<span style='text-decoration:underline;'>樣式</span>
 +
#*<span style='text-decoration:line-through;'>樣式</span>
 +
#加粗、底線、拉斜、刪除：實作練習「<span style='color:red'>加粗、底線、拉斜</span>」
 +
 
 +
==[[jendo::CSS|CSS]]==
 
===一、行內樣式===
 
===一、行內樣式===
 
#屬性 style='…;…;…'
 
#屬性 style='…;…;…'
行 36： 行 45：
  
 
===二、樣式定義===
 
===二、樣式定義===
 +
#在 HTML 中起一個<br/>&lt;style&gt;<br/>…<br/>&lt;/style&gt;
 +
#其中的每一條樣式定義都分成「樣式定義對象 {樣式定義內容}」
 +
#樣式定義對象，第一個字是「.」代表「類別名稱」，不是「.」代表「HTML標籤」
  
−
===三、串接樣式===
+
===三、串接樣式(<span style='color:red'>落實上週的實作練習</span>)===
 +
#在第一個檔中寫下一條一條的樣式定義<br/>用 /* … */ 進行單行或多行註解
 +
#在第二個檔中寫下 &lt;link rel='stylesheet' href='第一個檔的網址' type='text/css'/&gt; 來載入第一個檔
 +
#很多檔可以載入相同的樣式檔，讓外觀風格一致，節省書寫的人力，簡化修改的流程

於 2020年11月16日 (一) 12:12 的最新修訂

Wiki

  1. Wiki_入門語法
    • 摺疊練習：實作練習
  2. wiki中的數學公式
  3. 嵌入：
    • 連接使用：[[前置字:名字空間:頁名]]，如[[Wikipedia::Main Page]]或[[Wikipedia:Main Page]]都會出現這樣的連結：Wikipedia::Main Page，並連到維基百科的主頁。後者是省略名字空間。
    • 嵌入使用：{{前置字:名字空間:頁名}}，如{{zhtwwikipedia::余茂春}}(注意名字空間可放入空字串但不可省略)會嵌入「中文維基百科的『余茂春』介紹頁」：實作練習
    • 嵌入本 wiki 的另外一頁，省略「前置字」

同學實作展示

HTML

一、回憶殺(介紹解說)

  1. 從「網路檔案櫃」找回 base1.htm
  2. <meta http-equiv='content-type' content='text/html; charset=UTF-8' />

二、HTML的簡介與基本規則(問答解說)

簡介

  • http 超文件傳輸協定(HyperText Transfer Protocol)，其文件格式稱為 HTML(HyperText Markup Language)
  • 柏納李：HTTP 的發明人，在 1990年12月25日 實現第一次的 HTTP 傳輸，1991年8月6日第一個網頁伺服器上線。1994年柏納-李宣布全球資訊網完全免費的，不申請專利權，不徵收專利費，因此，人人都能輕易用上全球資訊網。
  • wiki 是 HTML 的簡記法，一定會翻譯成 HTML ，所以可以從 wiki 頁複製 HTML 段落。

HTML語法的基本規則

HTML 的標籤內容分為三個層級：標籤、屬性、樣式指示

(一)標籤(標記)

  • 標籤必須成對：一般由開始標籤(opening tag)和結束標籤(closing tag)構成一對，如：<×>……</×>其中的×代表標籤命令。以上角括號及斜線均為英文半形。
  • 開始與結束標籤合體(空元素:Empty Element / Void Element)：meta(對自身的說明)、img(圖照)、br(換行)、hr(水平線)、input(表單輸入元素)，以及 HTML5 video 之下的source、track，寫成<meta />、<img />、<br/>、<hr/>、<input />…

(二)屬性

  • 開始標記命令可以用「屬性」加以修飾，例如 img 標記可以有：
    1. src 屬性，指示圖的位置
    2. width 屬性，指示圖的寬度
    3. height 屬性，指示圖的高度
  • 屬性名後面是屬性值，屬性名與屬性值之間用「=」相連。同標記內兩組屬性是用空白相隔開。
  • 屬性值通常用一對單引號「'」或雙引號「"」包起來，如果屬性值當中不含空白，則引號通常可以省略；如果屬性值當中含空白，則引號絕對不可以省略。
  • class 屬性：引用已經定義的樣式。
  • style 樣式屬性：指示後面的內容應該長什麼樣子

(三)樣式指示

  • style 的值包含的常常超過一項以上的樣式指示
  • 兩組樣式指示以「;」間開
  • 名與值以「:」相連


三、重要的標記、屬性、樣式(問答解說)

標籤
====
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)

b        字加粗(bold)
u        字畫底線(under)
i        斜體字(italic)

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 合併框線


四、用到的英文單字

  1. html 超文件
  2. head 頭
  3. title 標題
  4. body 身體
    ----------
  5. meta 對自身的描述
  6. http 超文件傳輸協定
  7. equiv 約當
  8. Character 字元
  9. set 集合
  10. paragraph 段
  11. style 樣式(之後的內容應該長得像什麼樣子)
    ----------
  12. font 字體
  13. family 字族，系
  14. size 大小
  15. weight 輕重
  16. text 文字，文件
  17. align 對齊
  18. color 顏色
    ----------
  19. order 有次序的
  20. unorder 沒有次序的
  21. list 列表
  22. item 項目
    ----------
  23. image 圖
  24. width 寬度
  25. height 高度
    ----------
  26. table 表
  27. row 列
  28. diamond 格
  29. border 邊界，邊框
    ----------
  30. anchor 錨，超連結
  31. source 來源
  32. reference 參考
  33. target 目標
  34. blank 空白
    ----------
  35. break 斷
  36. space 空間，空格
  37. span 文字小片段
  38. division 區塊
  39. preserve 保留原有斷行及排列之式
  40. horizontal 水平
  41. rule 線
    ----------
  42. form 表單
  43. collapse 崩塌
  44. hyper 超
  45. markup 標記
  46. language 語言

五、字的進階運用

參考頁(介紹解說)：

  1. 常用的數學及科學字符
  2. HTML頁面可用的數學與科學符號
  3. HTML中的「標準」數學符號
  4. wiki中的數學公式

重點：

  1. HTML字符轉義(HTML Entity)：實作練習
  2. 上標、下標：實作練習
  3. 放大、縮小：實作練習
  4. 樣式 text-decoration(看原始碼)：
    • 樣式
    • 樣式
    • 樣式
  5. 加粗、底線、拉斜、刪除：實作練習「加粗、底線、拉斜」

CSS

一、行內樣式

  1. 屬性 style='…;…;…'
  2. 請參考本頁「HML/重要的標記、屬性、樣式」段落

二、樣式定義

  1. 在 HTML 中起一個
    <style>
    …
    </style>
  2. 其中的每一條樣式定義都分成「樣式定義對象 {樣式定義內容}」
  3. 樣式定義對象，第一個字是「.」代表「類別名稱」，不是「.」代表「HTML標籤」

三、串接樣式(落實上週的實作練習)

  1. 在第一個檔中寫下一條一條的樣式定義
    用 /* … */ 進行單行或多行註解
  2. 在第二個檔中寫下 <link rel='stylesheet' href='第一個檔的網址' type='text/css'/> 來載入第一個檔
  3. 很多檔可以載入相同的樣式檔，讓外觀風格一致，節省書寫的人力，簡化修改的流程
取自「http://nice-learning.tw/nlWiki/index.php?title=2020/資訊基礎應用/復習與補遺&oldid=2934」