「2020/資訊基礎應用/復習與補遺」修訂間的差異
跳至導覽
跳至搜尋
（→一、回憶殺） |
|||
| 行 10： | 行 10： | ||
==HTML== | ==HTML== | ||
| − | ===一、回憶殺=== | + | ===一、回憶殺(<span style='color:blue'>介紹解說</span>)=== |
#從「[http://nice-learning.tw/uploadFiles 網路檔案櫃]」找回 base1.htm | #從「[http://nice-learning.tw/uploadFiles 網路檔案櫃]」找回 base1.htm | ||
#<meta http-equiv='content-type' content='text/html; charset=UTF-8' /> | #<meta http-equiv='content-type' content='text/html; charset=UTF-8' /> | ||
| + | |||
===二、HTML的簡介與基本規則=== | ===二、HTML的簡介與基本規則=== | ||
{{jendo::HTML/簡介與基本規則}} | {{jendo::HTML/簡介與基本規則}} | ||
於 2020年11月16日 (一) 11:20 的修訂
目錄
Wiki
- Wiki_入門語法
- 摺疊練習：實作練習
- wiki中的數學公式
- 嵌入：
- 連接使用：[[前置字:名字空間:頁名]]，如[[Wikipedia::Main Page]]或[[Wikipedia:Main Page]]都會出現這樣的連結：Wikipedia::Main Page，並連到維基百科的主頁。後者是省略名字空間。
- 嵌入使用：{{前置字:名字空間:頁名}}，如{{zhtwwikipedia::余茂春}}(注意名字空間可放入空字串但不可省略)會嵌入「中文維基百科的『余茂春』介紹頁」：實作練習
- 嵌入本 wiki 的另外一頁，省略「前置字」
HTML
一、回憶殺(介紹解說)
- 從「網路檔案櫃」找回 base1.htm
- <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 標記可以有：
- src 屬性，指示圖的位置
- width 屬性，指示圖的寬度
- 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 合併框線
四、用到的英文單字
- 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 語言
五、字的進階運用
參考頁(介紹解說)：
重點：
- HTML字符轉義(HTML Entity)：實作練習
- 上標、下標：實作練習
- 放大、縮小：實作練習
- 樣式 text-decoration
- 加粗、底線、拉斜、刪除：實作練習「加粗、底線、拉斜」
CSS
一、行內樣式
- 屬性 style='…;…;…'
- 請參考本頁「HML/重要的標記、屬性、樣式」段落
二、樣式定義
- 在 HTML 中起一個
<style>
…
</style> - 其中的每一條樣式定義都分成「樣式定義對象 {樣式定義內容}」
- 樣式定義對象，第一個字是「.」代表「類別名稱」，不是「.」代表「HTML標籤」
三、串接樣式
- 在第一個檔中寫下一條一條的樣式定義
用 /* … */ 進行單行或多行註解 - 在第二個檔中寫下 <link rel='stylesheet' href='第一個檔的網址' type='text/css'/> 來載入第一個檔
- 很多檔可以載入相同的樣式檔，讓外觀風格一致，節省書寫的人力，簡化修改的流程
