https://sites.google.com/view/fliped-edu-by-translated
2020年2月5日 星期三
2013年1月29日 星期二
把WordPress和網站目錄分開
這是我由衷的建議，如果一開始在佈署WP時就全所有的文件放在根目錄下。日後若要以網頁根目錄設置其他的東西，資料會摻雜在一起很難管理。
打個比方來說好了，如果你想要在www資料夾下，同時安裝除了WordPress以外的多種站台。那麼每個站台都給他用一個資料夾裝起來(一個蘿蔔一個坑)，以後進WEB後台管理，從路徑上也比較好辨識，備份的時候也可以各自分開。
(PS 當然，如果你是租用的主機若是只給你一個MySQL，你想玩二種站台也有難度，這個時候就不用管分不分開的問題了，不過一個MySQL多個WP是OK的 )
這篇就來談談WordPress和網站目錄分開的設定步驟，不管是新架設WP或是舊WP要把目錄分開，我都會提供一些技巧。
Wordpress 網址(URL)設定錯誤的解決方法
現在的Wordpress，你知道的，儼然就是CMS了。所以有時候會分不清楚WordPress 網址 和網誌位址。一不小心就設定錯誤。我是想要把WordPress的首頁弄成入口網，所以理論上來說，網誌應該就是指向申請的網域名稱下。WordPress 網址再另外以下一層目錄的方式處理。結果如下圖。但是這裡會碰到問題。
這會有什麼問題呢，請往下看？
2013年1月25日 星期五
Dynamic Template Plugin for Windows Live Writer
寫部落格的離線編輯器（Desktop Blog Editor）裡，個人還是衷愛Windows Live Writer，之前我寫部落格主因是想把我學的程式給紀錄下來，所以曾經發過一篇寫程式設計教學範例的三個好幫手歌頌Blogger和WLW的合作無間。
時至今日，WLW雖然好久好久沒有再更新軟體內容。但是也沒見市面上再有什麼新的部落格編輯器。我們還是冷飯熱炒一下，談談能再加快寫作速度的工具-wlw的插件。
記得以前曾經在codeplex.com 瘋狂的找好用的插件，不過你知道的，事實上真的用得到的、用得上手的Plugin很少，目前留在我的WLW Plugin裡只剩下三種，一是Windows Live Writer中插入高亮顯示程式碼的插件，一是用Windows Live Writer寫部落格-Picasa相簿外掛，這篇要為您介紹的是最後一種：Dynamic Template ，碩果僅存的幾個插件，真心的推薦給您。
上圖為插件的模樣，很不華麗，但是卻很實用，透過它，你可以自已DIY一些插件，堪稱插件中的插件啊，若是你不明白我在說什麼？繼續往下看一下實例你就會明白了。
2013年1月24日 星期四
為Blog加上Scroll To Top按鈕
以前曾經利用浮動式廣告/工具列的功能，在部落格上作過類似的Back To Top (Scroll To Top)的按鈕，那時候是用CSS來製作，後來因為覺得不需要就拿掉了…那是2010年的事囉…不需要的原因很簡單，一來我的文章沒有這麼長到要用到回到上方的按鈕，滑鼠滾輪給他滾一滾還算可以，長一點的文章，其實也只要按鍵盤上的HOME就可以回到頁面的最頂端。Back To Top的Button是英雄無用武之地。
2013年的現在，我寫的文章愈來愈長，而平板電腦用戶愈來愈多，沒有滑鼠給他滾、沒有鍵盤給他HOME，總是要提供個按鈕給瀏覽者按，所以又重新做了一次。
這次當然還是用到超連結(不然哩)，CSS美化了一下，再利用JQUERY提供的現成的一些功能，製作了動態的回到上方按鈕(Dynamic Scroll To Top Button)，如下圖，右下角的「▲回到上方▲Scroll to Top」就是了。
重點在於「動態」：
如果瀏覽畫面一開始就在最上方，按鈕是不會出現的。
當瀏覽畫面到往下移動，按鈕會「浮現出來」而不是彈出來
再來是當按下按鈕時，畫面是「慢慢移動」到上方，而不是猛的跳到上面
如果瀏覽畫面一開始就在最上方，按鈕是不會出現的。
當瀏覽畫面到往下移動，按鈕會「浮現出來」而不是彈出來
再來是當按下按鈕時，畫面是「慢慢移動」到上方，而不是猛的跳到上面
怎麼完成呢？有興趣的話再往下看
2012年12月23日 星期日
Excel VBA 標準體重計算
d006d1 標準體重計算
在介紹程式內容前，我們要先理解一下這些和體重有關的公式(註：以下的體重單位為 kg、身高單位為 m)
像範例這類的簡易的公式套用，使用excel內建的函數是可以解決的。
早期我也是直接在儲存格上打一函數來計算。
像範例中有提到的BMI身體質量指數，直接在儲存格上使用函數就可以計算的出來。
不過如果講到便利性的話，還是用巨集的方式處理會比較好。
在介紹程式內容前，我們要先理解一下這些和體重有關的公式(註：以下的體重單位為 kg、身高單位為 m)
- 身體質量指數(Body Mass Index，縮寫為BMI)：
BMI = 體重 ÷ (身高 × 身高) - 標準體重算法1：
男性標準體重 = (身高 - 0.8) × 70
女性標準體重 = (身高 - 0.7) × 60 - 標準體重算法2：
男生標準體重 = (身高 × 身高) × 22 × ( 1 + 0.1 )
女生標準體重 = (身高 × 身高) × 22 × ( 1 + 0.05 )
像範例這類的簡易的公式套用，使用excel內建的函數是可以解決的。
早期我也是直接在儲存格上打一函數來計算。
像範例中有提到的BMI身體質量指數，直接在儲存格上使用函數就可以計算的出來。
不過如果講到便利性的話，還是用巨集的方式處理會比較好。
2012年12月16日 星期日
Excel VBA 自製全誼成績系統之成績輸入表
成績輸入流程
在使用全誼成績系統時，成績輸入不管是系統設定還是成績輸入，步驟都很繁瑣，這裡提供一個替代方案供解決：使用自製的excel表格來簡化老師使用的困難
2012年12月11日 星期二
Excel VBA 基礎：宣告變數
變數是執行程式時存放值的地方。變數可以在程式碼中自由使用，不過通常我們會在程式開頭就對程式內的變數先行「宣告」。如下範例
Dim myName Dim myNickName As String Dim myDate As Date Dim myAge As Integer Dim myHeight As Single, myWeight As Single myName = "豬腦爸" myNickName = "D NOW BA" myDate = #11/19/1981# myAge = 70 myHeight = 162.55 myWeight = 61.3
列1~列5 就是在宣告變數，列7~列12就是將變數賦值。完整宣告變數方式是：
Dim 變數名稱 As 資料型態
變數名稱可以自訂，沒有太大的限制，不過儘量不要和內建的函數、物件名稱重複，而變數名稱的命名也有人有制定參考標準，可參考
微軟建議的Visual Basic編碼慣例、Visual Basic命名慣例
http://dnowba.blogspot.tw/2011/10/visual-basicvisual-basic.html
資料型態，和微軟的SQL資料庫的定義方式大致上是相仿的，可以參考
資料型別
http://dnowba.blogspot.tw/2011/10/blog-post_18.html
如果像程式碼列1省略資料型態，那麼變數就是自由型態 (Variant) ，不過建議對於變數的值有明確的認知的話，最好還是指定資料型態。指定資料型態比較可以有效的利用記憶體空間。例如列4和列5，年齡、身高都是數字，不過年齡一般來說是整數，所以用只佔記憶2個位元組的integer；而身高、體重一般表示方式可能會有小數，就用佔8bytes的單精度浮點數Single。
要在1行內宣告2個以上的變數時
範例中，因為myHeight和myWeight 都要宣告資料型態為Single，所以可以寫成 Dim myHeight As Single, myWeight As Single，注意不可寫成
Dim myHeight , myWeight As Single，否則 myHeight 會被當成Variant
範例中，因為myHeight和myWeight 都要宣告資料型態為Single，所以可以寫成 Dim myHeight As Single, myWeight As Single，注意不可寫成
Dim myHeight , myWeight As Single，否則 myHeight 會被當成Variant
Excel VBA 基礎：程序
程序 (procedure) 是 VBA 執行程式的單位。程序主要有 Sub 程序和 Function 程序和事件程序，以下分別簡述之
Sub 程序
在 Excel VBA 當中，通常是使用 Sub 程序來撰寫程式。如下，利用訊息方塊顯示目前的日期時間。
程序名稱的命名規則
範例中，我們可以使用中文名稱以辨識程序別，關於程序名稱的命名規則如下：(1) 第一個字不能使用數字 (2)不能使用空白字元 (3)不能使用如「!、@、$」等其他符號 (3)字元數不能超過255個半形字。
範例中，我們可以使用中文名稱以辨識程序別，關於程序名稱的命名規則如下：(1) 第一個字不能使用數字 (2)不能使用空白字元 (3)不能使用如「!、@、$」等其他符號 (3)字元數不能超過255個半形字。
Function 程序
Function 程序是執行後，會傳回值的程序。常用在使用者定義的函數上。如下，根據出生年月日，計算年齡傳回結果。
事件程序
事件程序是指由某個動作引發而執行的程序，例如「按下按鈕」、「打開活頁簿」等動作，可以引發程式自動執行。除了工作表或活頁簿的事件程序以下，使用者定有表單(user form)也可以撰寫事件程序。如下，打開活頁簿時會出現訊息
事件名稱的命名規則
事件程序的名稱是以「物件_事件」方式命名，如上例 Workbook_Open 就是指當「活頁簿_打開」時引發的程序。名稱是不可以自已更改的，而大部分的事件預設名稱也都還算可以清楚辨識。
事件程序的名稱是以「物件_事件」方式命名，如上例 Workbook_Open 就是指當「活頁簿_打開」時引發的程序。名稱是不可以自已更改的，而大部分的事件預設名稱也都還算可以清楚辨識。
Excel VBA 基礎：物件階層、集合及成員
Excel 的物件階層構造
在Excel的VBA中，我們使用程式碼控制Workbook(活頁簿)、Worksheet(工作表)、Chart(圖表)，這些對象都是物件。在Excel裡，物件以Application為最上層，以下的物件都是階層性的設計，例如上圖中的程式：
Workbooks(“aa.xls”).Worksheets(“bb”).Range(“A1:A2”)
表示在「aa活頁簿」的「bb工作表」的「A1:A2儲存格」，透過階層性的設計物件就會非常清楚。
此外，在每個物件當中包含的成員(member)，有執行動作的方法(method)、取得或設定狀態的屬性(property)。
省略母物件
參照物件的上一層物件稱為母物件，
如果參照的工作表位在作用中的活頁簿，則程式只需輸入：
Worksheets(“bb”).Range(“A1:A2”)
如果參照的儲存格位在作用中的工作表，那麼程式又可以更簡化：
Range(“A1:A2”)
撰寫時依著參照位置的不同而可以有所省略以節省撰寫程式的時間，像最上層的Application通常情況下都是不用寫的。(excel內建所有的VBA都源自於Application)
參照物件的上一層物件稱為母物件，
如果參照的工作表位在作用中的活頁簿，則程式只需輸入：
Worksheets(“bb”).Range(“A1:A2”)
如果參照的儲存格位在作用中的工作表，那麼程式又可以更簡化：
Range(“A1:A2”)
撰寫時依著參照位置的不同而可以有所省略以節省撰寫程式的時間，像最上層的Application通常情況下都是不用寫的。(excel內建所有的VBA都源自於Application)
集合和成員
相同稱類的聚集，稱為集合(Collection)。多個Worksheet的集合就是Worksheets，意即除了作用中的Worksheet，透過Worksheets集合還可以參照到其他的成員，如在一個Workbooks有多個Worksheet，要指定某個Worksheet，就可以透過像「Worksheets(“bb”)」的方式。
2012年12月8日 星期六
Excel VBA 四捨六入五成雙的設計
Excel VBA d005d1四捨六入
現在被廣泛使用的取概數規則，除了四捨五入以外，還有四捨六入五成雙規則。
四捨五入簡化規則中，因逢五就進，會造成結果的系統偏高，誤差偏大。因為它進位的「機率」高於捨棄，在統計學上會產生偏差，解釋如下：
取位位值是：1、2、3、4 →機率 4/9
取位位值是：5、6、7、8 、9→機率 5/9
如上面舉例，一個數字在四捨五入中，捨去的機率比進位還低，這樣子不大公平，所以後來有了四捨五入六成雙規則。所以我們如果要使用四捨六入五成雙的設計，就得自已設計一個，在設計之前，必須先了解這個數值規則，可以參考：http://zh.wikipedia.org/wiki/數值修約規則，我自已理解後，認為規則應該是：
一個數字，取概數到n位的話，那麼一樣是看(n-1)位的數字
1.如果數字是4以下則捨去，6以上則進位
2.如果是5，那麼：
(1)如果5後面的有效數字中，有非0的數字，進位
(2)如果5後面的有效數字中，都是0：
a.如果5的前面是奇數，進位
b.如果5的前面是偶數或是0，捨去
整個過程還是在對「進位」和「捨去」，不過規則上修改的比較複雜就是了，以下就把過程寫下來
2012年12月1日 星期六
Excel VBA 自動流水號
Excel VBA d001d1自動流水號
流水號的設計可以幫使用者解決一堆工作的資料排序問題，例如：通訊錄資料、學生成績名次、會議座次編號。如本例的採購表單，使用者使用巨集可以快速在所需要的欄位上自動填加流水號。
2012年10月1日 星期一
HTML <u> Tag
定義及用法 Definition and Usage
當文本內容中有需要特別標記的文字時，特別是文體上的區別，使用<u>標籤，例如拼寫錯誤的單詞(misspelled words)，或是可以代表中文標點符號的專名號(或稱私名號)。
使用技巧及注意事項 Tips and Notes
在HTML5以前，<u>代表的是 underlined text ，需要畫底線的文字，就可以使用。不過HTML5重視語義甚於格式，所以建議使用者，不是想畫底線的文字都要用<u>，<u>在HTML5代表的不只是格式，只有像上面定義的情況，才使用<u>。
另外，在預設樣式上，加了底線的文字很容易和 hyperlinks 標記混在一起，造成識讀上的阻礙。所以底線要慎用。
可使用的屬性 Attributes
支援全域屬性(Global Attributes)及事件屬性(Event Attributes)
範例 Examples
範例 1 example：
牛郎星在銀河之東，織女星在銀河之西。<br /> 神話中<u>牛郎</u>、<u>織女</u>因勤奮工作被天帝許配為夫妻，<br /> 但<u>織女</u>嫁給<u>牛郎</u>後，就荒廢紡織工作，天帝大怒，<br /> 令他們分居在銀河兩岸，每年七夕才能渡河一會。 <br /> 以上資料來自：<a href="#">神話故事網</a>
Demo結果如下
上面範例特別用了中文標點符號的專名號來說明，定義中的<u>底線和超連結的底線是不是容易搞混就自由心證了。
HTML <var> Tag
定義及用法 Definition and Usage
當文字是屬於variable，則可使用<var>，瀏覽器會呈現其預設的樣式。像是寫一些數學表達式(mathematical expression)、程式(programming context)，在網頁上要清楚呈現哪些是變數的話，就可以加上<var>。另外像常數的ID、功能參數…等也可以使用，讓瀏覽者更容易識別。
技巧及備註 Tips and Notes
像這類著重在以文字樣式區別字義的HTML標籤，叫 phrase tags ，除了<var>以外，還有<em><strong><dfn><code><samp><kbd>。HTML的瀏覽器為這些標籤都預先設定了簡單的樣式，當然如果要更有效果的話，還是透過CSS再加以設定。
可使用的屬性 Attributes
支援全域屬性(Global Attributes)及事件屬性(Event Attributes)
範例 Examples
範例 1 example：
<p> 若假設5元硬幣為 X 枚，1元為 甲 枚，則：<br /> 有5元與1元的硬幣共18枚，可列得二元一次方程式： <var>X</var> ＋ <var>甲</var> ＝18。 </p>
Demo結果如下
若假設5元硬幣為 X 枚，1元為 甲 枚，則：
有5元與1元的硬幣共18枚，可列得二元一次方程式： X ＋ 甲 ＝18。
範例 1 ，X和甲是變數，所以在列式時，加上了<var>，加上後的樣式其實就是在CSS裡用Tag Selection把有<var>標籤的字體給設定成斜體 (font-style: italic)，在辨識上是有一些些的效果。
不過，若是我們在網頁上是要呈現大量的程式碼，要針對一個個的變數來設定<var>標籤太不明智了，通常使用量大的話，我們會使用高亮程式碼(SyntaxHighlighter)，數學方程式也是一樣的，若是要在HTML上顯示大量的數學方程式，那麼最好的做法還是使用數學置標語言（Mathematical Markup Language，MathML），以下舉例說明。
範例 2 example：
<figure>
<math>
<mi>a</mi>
<mo>=</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mi>+</mi>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</msqrt>
</math>
<figcaption>
Using Pythagoras' theorem to solve for the hypotenuse _
<var>a</var> of a triangle with sides <var>b</var> _
and <var>c</var>
</figcaption>
</figure>Demo結果如下
範例中，畢式定理的方程式，裡頭雖然用了變數，但是並沒有加上<var>，若是刻意加上，那麼程式碼上面反而更加紊亂的。而在方程式說明的地方(<figcaption>標籤內)，才加上了<var>來突顯變數的地位。
HTML <small> Tag
定義及用法 Definition and Usage
在字體樣式上，<small>定義的就是文本中需呈現較小文體的文字 (smaller text)。
在文義上，<small>定義的則是文本中一些偏離主題的文字敘述 ( side comments )。
在用法上，常使用在一些免責聲明 ( disclaimers )、注意事項 ( caveats )、法律限制 ( legal restrictions )、版權宣告 ( copyrights )等。
使用技巧及注意事項 Tips and Notes
small 元素的相對元素是 <big>，不過 big 元素在HTML5裡已經不支援了，原因很簡單，因為 big 真的只是為「樣式」設計的標籤（font-style tags），這類的標籤現在都建議改用CSS設計。small 在HTML5 沒有被刪掉，主因在它還有文義上的功能 (如上面定義)，可能是制定規範者不知道要怎麼為這個種類的標籤命名，所以暫切不更動，但使用者一定要注意的是，small 元素不只是把字體 small 而已。
small 元素常常被拿來和定義重要文字的<strong> 或是定義強調文字的<em>做比較。因此容易讓人搞混，認為small就是定義一些不重要的、可以被忽視的文字。所以使用時一定要注意，在語言層級上，<small>和主題一般敘述文字的程度是一樣的。
可使用的屬性 Attributes
支援全域屬性(Global Attributes)及事件屬性(Event Attributes)
範例 Examples
範例 1 example：
<p>DNOWBA 豬腦爸-力行豬腦哲學的資訊部落格</p> <p><small>Copyright 1999-2050 by d.now.ba</small></p>
Demo結果如下
DNOWBA 豬腦爸-力行豬腦哲學的資訊部落格
Copyright 1999-2050 by d.now.ba
上面是很典型的版權宣告，通常就是用<small>來處理。字體雖然變小了，但二個段落的文字敘述的重要程度是一樣的。
範例 2 example：
<dl> <dt>單人房 <dd>1999NT$ <small>含早餐，已含5%營業稅</small> <dt>雙人房 <dd>2999NT$ <small>含早餐，已含5%營業稅</small> </dl>
Demo結果如下
- 單人房
- 1999NT$ 含早餐，已含5%營業稅
- 雙人房
- 2999NT$ 含早餐，已含5%營業稅
範例中，主題是說明飯店的房價，其他附加服務、是否含稅等不算是主題，但是也蠻重要的 (這種文字稱之為 short runs of text，不知道怎麼翻譯比較適合 )，就可以用<samll>來標記。
範例 3 example：
「Google Drive」服務（中文為 Google 雲端硬碟）。 Google Drive 本質上與其他雲端儲存服務（如 Dropbox）類似， 不過挾帶著Google各項服務，影片、照片、網誌、文件， 包山包海的情形讓Google Drive勢如破竹。 <small>不過google的強大也是靠我們這些社群用戶， 沒有人用的facebook網頁畫面真是殘不忍睹</small>
Demo結果如下
「Google Drive」服務（中文為 Google 雲端硬碟）。 Google Drive 本質上與其他雲端儲存服務（如 Dropbox）類似，不過挾帶著Google各項服務，影片、照片、網誌、文件，包山包海的情形讓Google Drive勢如破竹。 不過google的強大也是靠我們這些社群用戶，沒有人用的facebook網頁畫面真是殘不忍睹
範例中，主題是介紹「Google Drive」服務的特點。當中挾帶著自已的感想，有點像是murmur碎碎念。所以這類離題的內容(side comments)，可以用<small>來標記，此外，範例中的有括號的文字「中文為 Google 雲端硬碟、如 Dropbox」都算是附註說明，和主題內容是有關係的，並不算是一種碎碎念，而括號本身在符號意義上就有附帶一提的意味。從這個範例你可以比較能分辨「附註說明」和「碎碎念」的差別。
範例 4 example：
以下為安裝JAVA教學 <small><strong>安裝時請關閉防火牆</strong>，以免安裝程序失敗</small>
Demo結果如下
以下為安裝JAVA教學 安裝時請關閉防火牆，以免安裝程序失敗
這個範例說明，標記<small>的文本內容，不代表他不重要，甚至於你覺得很重要的，還可以加上<strong>標籤
範例 5 example：
<aside> <h4>Example Corp</h4> <p>This company mostly creates small software and Web sites.</p> <p>The Example Corp company mission is "To provide entertainment and news on a sample basis".</p> <p><small>Information obtained from <a href="../about.html">example.com</a> home page.</small></p> </aside>
Demo結果如下
這個範例中，Example Corp的介紹並不是這份網頁文件的主軸，所以用<aside>來標記，不過相對的，Example Corp的介紹內容是這個<aside>下的主要內容。範例中我們可以學習到，<aside>不等同於<small>，<aside>區塊中的內容本身就有一個主題，而當主題下有比較離題的、和主題無關的，就可以用<small>來標記。當一篇文章的一段，甚至於二段以上的段落內容都偏離主題的時候，其實它本身就是一個主體了，所以<small>並不適合寫成<small><p>......</p></small>的形式，這個範例下，也不適合寫成<small><aside>......</aside></small>的形式。
HTML <strike> Tag
定義及用法 Definition and Usage
注意：HTML5不再支援<strike>標籤樣式上，需要加刪除線的文字可用<strike>，HTML5建議改用<del>元素
範例 Examples
範例 1 example：
<p>Version 2.0 is <strike>not yet available!</strike> now available!</p>
Demo結果如下
Version 2.0 is not yet available! now available!
範例中的文章，敘述了某軟體版本的更新「歷程」，為刪除的字加上刪除線是很適當的。HTML5中廢棄了<stike>這個元素，改用<del>來取代，因為 strike 代表的是樣式、視覺上的名稱，改名為 del 更可以讓語義上更健全。以下是改用成<del>的範例。
範例 2 example：
<p>Version 2.0 is <del>not yet available!</del> <ins datetime="2012-10-01">now available!<ins></p>
Demo結果如下
Version 2.0 is not yet available! now available!
HTML <ins> Tag
定義及用法 Definition and Usage
當文本中的部份文字因為「更新」或「修改」，要從文件中插入一些新的內容，但又希望保留原先的篇幅，就可以用 ins 元素。
使用技巧及注意事項 Tips and Notes
使用時可搭配 <del> 元素，<del>用來刪除過時的文字，而<ins>則用來標記新加入的內容。
可使用的屬性 Attributes
| 屬性 Attribute | 值 Value | 描述 Description |
|---|---|---|
| cite | URL | 新增內容的原因是什麼？可以用用cite屬性來指定一個網路文件作為原因說明。 Specifies a URL to a document that explains the reason why the text was inserted/changed |
| datetime | YYYY-MM-DDThh:mm:ssTZD | 文字被新增的日期甚至是時間，可以用datetime屬性來附帶說明。 Specifies the date and time when the text was inserted/changed |
以上為<ins>專有的屬性，點選該屬性會連結到該範例。除了特有屬性外，<ins>還
支援全域屬性(Global Attributes)及事件屬性(Event Attributes)
範例 Examples
範例 1 example：
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
Demo結果如下
My favorite color is blue red!
範例 1 說明 <ins>常和<ins>元素合用，通常在各瀏覽器的樣式設定，ins 元素是在文字中間用橫線，一般稱之為刪除線，而 ins 元素則是以底線表示。
HTML <ins> 的 cite 屬性 使用方式
語法 Syntax：
<ins cite="URL">
| 屬性值 Value | 屬性值描述 Description |
|---|---|
| URL | 指定一網路文件以解釋被標記文字被新增的原因。URL可以是 絕對路徑(absolute URL)或是相對路徑(relative URL) |
cite 屬性使用範例A example：
<p>This is a text. <ins cite="why_inserted.htm">This is an inserted text.</ins></p>
Demo結果如下
This is a text. This is an inserted text.
範例結果可以看到，HTML文件並不會顯示 cite屬性所指定的連結，文章讀者是連結不到這個訊息的，只有文章作者自已可以透過後台查到，cite屬性的意義就是這樣，並非提供訊息給讀者，而是讓作者方便自已註釋。
HTML <ins> 的 datetime 屬性 使用方式
語法 Syntax：
<ins datetime="YYYY-MM-DDThh:mm:ssTZD">
| 屬性值 Value | 屬性值描述 Description |
|---|---|
| YYYY-MM-DDThh:mm:ssTZD | 格式詳見Date and Time Formats (ISO 8601) |
datetime 屬性使用範例A example：
<p>我喜歡吃水果。</p> <aside> 蘋果酸酸甜甜的滋味是我的最愛。 <ins datetime="2007-12-19 00:00Z">葡萄柚也是。</ins> </aside>
Demo結果如下
我喜歡吃水果。
範例A除了說明datetime的使用時機外，另外再提個重點，<aside>和<ins>都算是文章上附加的內容，<aside>的附加是為了補充文章上的不足，<ins>的附加是因為文章因某種緣故的修改更新，二個是不大一樣的性質。
HTML <del> Tag
定義及用法 Definition and Usage
當文本中的部份文字因為「更新」或「修改」，要從文件內容中剔除，但又有其文字保留之價值時，就可以用 del 元素。
使用技巧及注意事項 Tips and Notes
使用時可搭配 <ins> 元素，<del>用來刪除過時的文字，而<ins>則用來標記新加入的內容。
可使用的屬性 Attributes
| 屬性 Attribute | 值 Value | 描述 Description |
|---|---|---|
| cite | URL | 文字被刪除的原因是什麼？可以用用cite屬性來指定一個網路文件作為原因說明。 Specifies a URL to a document that explains the reason why the text was deleted |
| datetime | YYYY-MM-DDThh:mm:ssTZD | 文字被刪除的時間日期，可以用datetime屬性來附帶說明。 Specifies the date and time of when the text was deleted |
以上為<del>專有的屬性，點選該屬性會連結到該範例。除了特有屬性外，<del>還
支援全域屬性(Global Attributes)及事件屬性(Event Attributes)
範例 Examples
範例 1 example：
球類有羽毛球、桌球、躲避球等……種類<del>成千上萬</del><ins>五花八門</ins>
Demo結果如下
球類有羽毛球、桌球、躲避球等……種類成千上萬五花八門
範例 1 我舉了一個修改文章修辭的例子，比方說老師透過網路批閱學生文章，建議修改的地方不需直接刪掉，而保留作者原來的文字才會很好作比較，這個時候用<del>元素而不是用按鍵的delete是再合適不過的了。此外範例中也可以看到，<del>常和<ins>元素合用，通常在各瀏覽器的樣式設定，del 元素是在文字中間用橫線，一般稱之為刪除線，而 ins 元素則是以底線表示。
HTML <del> 的 cite 屬性 使用方式
語法 Syntax：
<del cite="URL">
| 屬性值 Value | 屬性值描述 Description |
|---|---|
| URL | 指定一網路文件以解釋被標記文字被刪除的原因。URL可以是 絕對路徑(absolute URL)或是相對路徑(relative URL) |
cite 屬性使用範例A example：
目前比較棒的免費空間有：Dropbox、MediaFire、GoogleDrive、 <br /> <del cite:"SOPA法案與Mega關站事件.htm">MegaUpload</del>
Demo結果如下
目前比較棒的免費空間有：Dropbox、MediaFire、GoogleDrive、
MegaUpload
範例中，我舉出一些網站免空freespace，但你知道的，這些網站服務總是會突如其然的關閉，我們可以先加上 del 元素不要直接刪除了，說不定哪天他又復活了，到時候再加上 ins 元素更新資料，整個就會很完整。
HTML <del> 的 datetime 屬性 使用方式
語法 Syntax：
<del datetime="YYYY-MM-DDThh:mm:ssTZD">
| 屬性值 Value | 屬性值描述 Description |
|---|---|
| YYYY-MM-DDThh:mm:ssTZD | 格式詳見Date and Time Formats (ISO 8601) |
datetime 屬性使用範例A example：
要做的事<br /> <ul> <li>Empty the dishwasher</li> <li><del datetime="2012-10-11T01:25-07:00">Watch lectures</del></li> <li><del datetime="2012-10-10T23:38-07:00">Download tracks</del></li> <li>Buy a printer</li> </ul>
Demo結果如下
要做的事
- Empty the dishwasher
Watch lecturesDownload tracks- Buy a printer
範例A是以一個工作清單為例，清單中列出要做的事有哪些，已經完成就刪掉，當然文字還是留著以備忘是最好的，所以用<del>元素，加datetime屬性，則可註記上完成的時間。
HTML <samp> Tag
定義及用法 Definition and Usage
samp 元素可以用來展示程式 ( program ) 或計算機 ( computing system ) 輸出的結果 ( sample)。
使用技巧及注意事項 Tips and Notes
和 samp元素相關的有 <pre> 以及 <kbd> ，<pre>用來表示程式碼、<kdb>表示使用者輸入的內容、<samp>表示程式運算後的結果。
可使用的屬性 Attributes
支援全域屬性(Global Attributes)及事件屬性(Event Attributes)
範例 Examples
範例 1 example：
使用Windows命令列工具Ipconfig控制網路連線 <pre><samp><span class="prompt">C:\Users\dnow></span> <kbd>ipconfig /all</kbd> Windows IP 設定 主機名稱 . . . . . . . . . . . . .: dnowba-PC 主要 DNS 尾碼 . . . . . . . . . .: 節點類型 . . . . . . . . . . . . .: 混合式 IP 路由啟用 . . . . . . . . . . . : 否 WINS Proxy 啟用 . . . . . . . . . : 否 乙太網路卡 Local Area Connection: 連線特定 DNS 尾碼 . . . . . . . . : 描述 . . . . . . . . . . . . . . .: D-Link Gigabit Ethernet Adapter 實體位址 . . . . . . . . . . . . .: 14-F6-4D-1D-4B-A9 DHCP 已啟用 . . . . . . . . . . . : 是 DNS 伺服器 . . . . . . . . . . . .: 192.168.0.1 NetBIOS over Tcpip . . . . . . . .: 啟用 <span class="prompt">C:\Users\dnow></span> <span class="cursor">_</span></samp></pre>
Demo結果如下
使用Windows命令列工具Ipconfig控制網路連線
C:\Users\dnow> ipconfig /all Windows IP 設定 主機名稱 . . . . . . . . . . . . .: dnowba-PC 主要 DNS 尾碼 . . . . . . . . . .: 節點類型 . . . . . . . . . . . . .: 混合式 IP 路由啟用 . . . . . . . . . . . : 否 WINS Proxy 啟用 . . . . . . . . . : 否 乙太網路卡 Local Area Connection: 連線特定 DNS 尾碼 . . . . . . . . : 描述 . . . . . . . . . . . . . . .: D-Link Gigabit Ethernet Adapter 實體位址 . . . . . . . . . . . . .: 14-F6-4D-1D-4B-A9 DHCP 已啟用 . . . . . . . . . . . : 是 DNS 伺服器 . . . . . . . . . . . .: 192.168.0.1 NetBIOS over Tcpip . . . . . . . .: 啟用 C:\Users\dnow> _
範例中用windows的命令提示工具(Command Prompt)作示例，表示當使用者輸入了 ipconfig /all 後，windows會依指令 print 出結果，輸出的結果部分，就用<samp>來標記。
範例 2 example：
<p>我在瀏覽Dnow網站介紹HTML的網頁時，傳回 <samp>We are sorry, the page you requested cannot be found.</samp> 的訊息，不知道新的網頁名稱是什麼？該不會移除頁面了吧</p>
Demo結果如下
我在瀏覽Dnow網站介紹HTML的網頁時，傳回 We are sorry, the page you requested cannot be found. 的訊息，不知道新的網頁名稱是什麼？該不會移除頁面了吧
範例 2 則是把瀏覽網頁的錯誤訊息，片段的摘錄寫在文章中。
HTML <sub> Tag
定義及用法 Definition and Usage
當文本中需要使用下標文字 ( suberscript text ) 時使用<sub>標籤，被標記的內容會在文字基線下方建立小型的字母，例如化學式的表示。
使用技巧及注意事項 Tips and Notes
<sub>標籤在使用時還是要注意，不能只是單純的為了格式上的樣式使用(當然像LaTeX這種排版、文字美工軟體，就可以為所欲為的調整文字的基準線)，HTML5裡還是強調一個重點，所有格式類的標記目的不是樣式，而是要區別文義。
另外可參考和<sub>標籤有同樣意義的<sup>標籤。
可使用的屬性 Attributes
支援全域屬性(Global Attributes)及事件屬性(Event Attributes)
範例 Examples
範例 1 example：
澄清石灰水加入二氧化碳產生碳酸鈣和水，化學式為<br /> Ca(OH)<sub>2</sub>+CO<sub>2</sub>=CaCO<sub>3</sub>+H<sub>2</sub>O
Demo結果如下
澄清石灰水加入二氧化碳產生碳酸鈣和水，化學式為
Ca(OH)2+CO2=CaCO3+H2O
Ca(OH)2+CO2=CaCO3+H2O
範例 1 中，化學式元素的原子數就是以下標做為標記符號
範例 2 example：
<p>The coordinate of the <var>i</var>th point is (<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>). For example, the 10th point has coordinate (<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p>
Demo結果如下
The coordinate of the ith point is (xi, yi). For example, the 10th point has coordinate (x10, y10).
範例 2 中，數範例 2 中，數學式定義變數的部分也可使用<sub>標籤。在數學式中，樣式上會有許多上標、下標的文字樣式，比較建議的用法是使用MathML 來紀錄。
訂閱：
文章 (Atom)
