教育再公共化聯盟/實習/新手課表:修訂版本之間的差異
出自福留子孫
(→屬性) |
(→HTML) |
||
第 18 行: | 第 18 行: | ||
===標籤=== | ===標籤=== | ||
*HTML中所有的內容都被包在起始標籤(opening tag)與結束標籤(closing tag)之中。 | *HTML中所有的內容都被包在起始標籤(opening tag)與結束標籤(closing tag)之中。 | ||
− | |||
*例如: | *例如: | ||
<pre> | <pre> | ||
− | <p> | + | <p>福留子孫</p> |
</pre> | </pre> | ||
*「< p >」即為起始標籤;「< /p >」則為結束標籤。<br/> | *「< p >」即為起始標籤;「< /p >」則為結束標籤。<br/> | ||
第 82 行: | 第 81 行: | ||
type= 指示檔案的類別 | type= 指示檔案的類別 | ||
content= 指示 http-equiv 屬性代表項目的值 | content= 指示 http-equiv 屬性代表項目的值 | ||
+ | </pre> | ||
+ | |||
+ | ===樣式=== | ||
+ | *樣式(Style)使用於style屬性中,透過CSS來控制和美化網頁的外觀和佈局。 | ||
+ | *兩組樣式指示以「;」間隔。 | ||
+ | *名與值以「:」相連。 | ||
+ | *例如: | ||
+ | <pre> | ||
+ | <p style="font-family:Arial; color:red;">福留子孫</p> | ||
+ | </pre> | ||
+ | *「font-family」與「color」為Style屬性的名;「Arial」與「red」分別為「font-family」與「color」的值,分別控制文字的字體與顏色。 | ||
+ | *常見的Style屬性的樣式指示如下: | ||
+ | <pre> | ||
+ | font-family: 字體 | ||
+ | font-size: 字的大小 | ||
+ | font-weight: 字有多粗 | ||
+ | text-align: 字的對齊方式 | ||
+ | color: 字的顏色 | ||
+ | width: 寬度 | ||
+ | height: 高度 | ||
+ | border: 邊框 | ||
+ | border-collapse:collapse 合併框線 | ||
</pre> | </pre> | ||
2023年8月11日 (五) 13:26的修訂版本
分類 | 功能 | |
---|---|---|
HTML | 網頁工具 | 前端網頁設計 |
MediaWiki | 網頁工具 | 提供線上編輯的開源軟體 |
SVG | 網頁工具 | 向量圖形的編輯 |
Etherpad | 協作工具 | 線上即時文字協作開源軟體 |
Jit.si Meet | 協作工具 | 線上視訊平台 |
MySQL | 資料庫 | 儲存資料的開源資料庫系統 |
HTML
- http超文件傳輸協定(HyperText Transfer Protocol),其文件格式稱為HTML(HyperText Markup Language)。
- HTML是一種超文本標記語言,用於建立網頁結構和內容的標記語言。使用不同的標籤、元素和樣式,可以組合成一個網頁。
- Wiki是HTML的簡記法,一定會翻譯成HTML,所以可以從Wiki頁複製HTML段落。
標籤
- HTML中所有的內容都被包在起始標籤(opening tag)與結束標籤(closing tag)之中。
- 例如:
<p>福留子孫</p>
- 「< p >」即為起始標籤;「< /p >」則為結束標籤。
- 不同的標籤則對應到不同的顯示方式,HTML常見的標籤如下:
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 diamond) th 表內之格(table head diamond) ol 有次序的列表(order list) ul 沒有次序的列表(unorder list) li 列表項目(list item) style 宣告樣式(修飾一個超文件) link 載入另一個檔,如 CSS 檔 span 文字小片段 div 區塊(division) pre 保留原有斷行及排列之式(preserve) form 表單
屬性
- HTML不同的標籤中可以加入不同的屬性,提供額外的資訊。
- 例如:
<a href="http://well-being-ng.net/">福留子孫超連結</a>
- 「href」即為a的屬性,提供連結的資訊。
- 屬性名稱後應接著「=」,並且屬性值應使用引號包覆。
- 不同的標籤有不同的屬性可以使用,但有些屬性可以通用,HTML常見的屬性如下:
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 屬性代表項目的值
樣式
- 樣式(Style)使用於style屬性中,透過CSS來控制和美化網頁的外觀和佈局。
- 兩組樣式指示以「;」間隔。
- 名與值以「:」相連。
- 例如:
<p style="font-family:Arial; color:red;">福留子孫</p>
- 「font-family」與「color」為Style屬性的名;「Arial」與「red」分別為「font-family」與「color」的值,分別控制文字的字體與顏色。
- 常見的Style屬性的樣式指示如下:
font-family: 字體 font-size: 字的大小 font-weight: 字有多粗 text-align: 字的對齊方式 color: 字的顏色 width: 寬度 height: 高度 border: 邊框 border-collapse:collapse 合併框線