HTML+WIKI

課堂實作

client 與 server
筆電的作業系統：
- Windows 10：
- Macintosh：
- Fedora：
在 client 裝綠色軟體的 firefox
在 client 裝綠色軟體的 emEditor、使用 Sublime Text、Visual studio code
綠色軟體的特點
- 檔案比較小
- 不用安裝
- 只佔用少量系統資源
- 可直接移動(複製檔案後，換一台電腦繼續工作)
- 刪除方便，移除後也不會將任何紀錄（登錄檔訊息等）留在本機電腦上
- 各種免安裝軟體
打開檢視副檔名
使用「網路檔案櫃」
寫一個 html：
1. base1.htm(以下簡稱練習檔)，用 html,head,body 三標籤，顯出 abc 字樣。
2. 上傳檔案，並用瀏覽器開啟。用 Ctrl-U 看原始碼。
3. 分辨顯示與原始碼。
4. 複製上週的 table 到練習檔，上傳，重刷瀏覽器(以下省略上傳檔案，重刷瀏覽器)。
5. 加 <meta http-equiv='content-type' content='text/html; charset=UTF-8' />
6. 加 <style> … </style>，並在其中複製上週的 CSS 定義
7. 解釋 border-collapse 樣式，並示範 collapse,separate 兩樣式值的差別
8. 解釋「色碼」
9. 加 <title> … </title>，並示範頁籤文字改變
10. 加 <p> … </p>，並示範font-size,font-family,text-align 三樣式
11. 表格調中
12. 去本班 wiki 首頁，以「檢視選取範圍原始碼」，抄出播放影片標籤，放入練習檔
13. 加上 <br/> 拉開表格與影片的距離，並將影片調中
14. 加上 <img…/>
15. 加上 ol 與 li
16. 將 ol 換成 ul
17. 找一段字用 span 改變顏色，突顯出來

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

用到的英文單字

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+WIKI

目錄

課堂實作

HTML的簡介與基本規則

簡介

HTML語法的基本規則

(一)標籤(標記)

(二)屬性

(三)樣式指示

重要的標記、屬性、樣式

用到的英文單字

導覽選單

搜尋