#HTML(HTML5):文字標音

本來是沒特別想寫這篇,不過想想這功能在最近已經被廣泛支援了,故就想說一定要好好來介紹一下!

大家在打入中文、日文的時候,有時候應該會想加入標音吧!正好以前IE有個標籤叫做ruby標籤可以做到這樣的事情,而在HTML5終於把ruby標籤做為標準加入了!

標音

底下一樣先用一個範例來解釋:

ruby01.html
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>標音</title>
  </head>
  <body>
    <ruby><rt></rt></ruby>まれた<ruby><rt>はな</rt></ruby> <br /><ruby><rt>ㄐㄧㄢˋ</rt><rt>ㄊㄚˋ</rt></ruby>的花朵
  </body>
</html>

ruby01.png
上面的排版有點亂,不過為了不要讓文字中間出現空白,只好擠成一行了,底下列一下通用式用法的解說:

rubyusage.html
1
2
3
4
5
<ruby>
  [欲加上標音的字詞1] <rt>[標音1]</rt>
  [欲加上標音的字詞2] <rt>[標音2]</rt>
  ...
</ruby>

大體上就是如此,整個標音群組用ruby標籤包住,打上要標音的詞彙後,加上rt標籤去做標音,就可以達到標音的效果了!

rb標籤:早期的寫法會把[欲加上標音的字詞]包在<rb>...</rb>內,但是收錄進HTML5標準的時候,去除了rb標籤,所以目前的標準是要省略rb標籤的唷!

不支援標音之瀏覽器的表現方法

假設今天要讓不支援標音的瀏覽器上看起來也要至少正常一點,可以將要多餘顯示的文字用rp標籤包住。這樣的話,有支援標音的瀏覽器會忽略rp標籤裡的內容,而不支援標音的瀏覽器就會顯示rp標籤裡的內容。底下看個範例:

ruby02.html
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>標音</title>
  </head>
  <body>
    <ruby><rp></rp><rt></rt><rp></rp></ruby>まれた<ruby><rp></rp><rt>はな</rt><rp></rp></ruby> <br /><ruby><rp></rp><rt>ㄐㄧㄢˋ</rt><rp></rp><rp></rp><rt>ㄊㄚˋ</rt><rp></rp></ruby>的花朵
  </body>
</html>

ruby02.png
左邊Google Chrome可以使用標音功能,故就直接顯示其標音,rp標籤裡之內容不管;而右邊Firefox不能使用標音功能,故就把rp標籤內的內容也一併顯示出來。

  1. 與w3schools.com裡的內容不同:rp標籤我是放在rt標籤外才能讓有標音功能的瀏覽器顯示正常,但w3schools.com內的卻放在rt標籤內。
  2. Firefox支援Ruby否?根據w3schools.com的內容是說已經支援了,但我的Firefox還是沒有。如果你的Firefox沒有標音功能,可以到這裡(HTML Ruby)下載套件安裝一下就支援了!

參考資料

  1. w3schools.com > HTML <ruby> Tag:http://www.w3schools.com/tags/tag_ruby.asp
  2. w3schools.com > HTML <rp> Tag:http://www.w3schools.com/tags/tag_rp.asp
  3. Re: <rb> as part of HTML5 ruby? from Dean Lee on 2011-12-29 (public-html-ig-zh@w3.org from December 2011):http://lists.w3.org/Archives/Public/public-html-ig-zh/2011Dec/0021.html
  4. 日文歌詞標音編輯器:http://but.lolicom.org/tool/

#HTML:無序、有序與定義清單

清單在網頁中是很常使用到的東西,故多少還是要了解一下。在HTML中有三種不太一樣的清單,分別是無序清單、有序清單與定義清單,無序清單與有序清單的用法差不多,但與定義清單的用法差距比較大,底下來個別解釋其使用的方法。

無序清單

unordered-list.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>清單</title>
  </head>
  <body>
    <ul>
      <li>Sonic</li>
      <li>Tails</li>
      <li>Knuckles</li>
      <li>Amy</li>
      <li>Shadow</li>
      <li>Silver</li>
    </ul>
  </body>
</html>

list01.png

無序清單使用<ul>...</ul>將整個清單包起來,每一項使用<li>...<li>即可,效果就跟用Word按的項目符號及編號做出來的差不多。

有序清單

ordered-list.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>清單</title>
  </head>
  <body>
    <ol>
      <li>Sonic</li>
      <li>Tails</li>
      <li>Knuckles</li>
      <li>Amy</li>
      <li>Shadow</li>
      <li>Silver</li>
    </ol>
  </body>
</html>

list02.png

有序清單的使用與無序清單差不多,僅僅只是將ul(unordered list)標籤換成了ol(ordered list)標籤,效果就從原本的項目符號換成了數字編號。

如果要改變起始的編號,可使用start屬性,例如起始值要改成10,就寫<ol start="10">

HTML5提供了新的屬性,可讓ol反向計算數值,利用reversed屬性即可,僅要寫<ol reversed>即可反向。(HTML5的功能性屬性,大多都是有寫就有效果,不用給值,沒寫就沒有效果)

定義清單

description-list.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>清單</title>
  </head>
  <body>
    <dl>
      <dt>Sonic</dt>
      <dd>刺蝟音速小子(日文:ソニック・ザ・ヘッジホッグ;英文:Sonic The Hedgehog)是一個電子遊戲人物,也是世嘉公司的吉祥物,誕生於1990年。他是刺蝟音速小子系列的主角,也是世界上最有名的刺蝟,擁有超過音速的奔跑速度,被稱為「世界上最快的刺蝟」。以音速小子為主人公的電玩遊戲曾在多個平台發售,總累計銷量已經超過了7000萬套。以它為主角的動畫、漫畫作品也風靡全球。其主要創作者為中裕司,大島直人以及安田廣和。</dd>
      <dt>Tails</dt>
      <dd>初登場於音速小子2,是個有兩條尾巴的小狐狸,如同音速小子小弟般的存在。可以藉由兩條尾巴旋轉飛行,其飛行速度接近音速小子。因為天生有兩條尾巴而遭到同伴排擠,在偶然間遇到音速小子後便跟隨他。對於機械有相當高的領悟力。</dd>
    </dl>
  </body>
</html>

list03.png

與前述兩種清單不同的地方在於,整個清單用<dl>...</dl>包住,每一項從原本僅有一個li標籤,換成dt和dd各一個標籤,dt表示的是欲解釋的項目,dd表示的是欲解釋的內容,因為是解釋的內容,所以dd標籤在排版上會做自動縮排。

巢狀清單用法

若要在清單內的某一項再利用清單解釋,可用以下的做法:

nested-list.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>清單</title>
  </head>
  <body>
    <ul>
      <li>
        Team Sonic
        <ul>
          <li>Sonic</li>
          <li>Tails</li>
          <li>Knuckles</li>
        </ul>
      </li>
      <li>
        Team Dark
        <ul>
          <li>Shadow</li>
          <li>Rouge</li>
          <li>E-123 Omega</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

list04.png

上面對於每一項li標籤內又在加入了另外一個清單去做描述,而清單內的清單瀏覽器會自動在排版上去做縮排,這是很方便可以做多層巢狀清單的用法,各位也可以自己試試看如果換成用ol和dl又會發生什麼事情。

參考資料

  1. w3schools.com > HTML <ul> Tag:http://www.w3schools.com/tags/tag_ul.asp
  2. w3schools.com > HTML <ol> Tag:http://www.w3schools.com/tags/tag_ol.asp
  3. w3schools.com > HTML <dl> Tag:http://www.w3schools.com/tags/tag_dl.asp
  4. 這樣做就對了 > HTML <dl/>, <dt/> 與 <dd/> 的誤用:http://josephjiang.com/entry.php?id=340

#HTML:基本表格用法

請原諒我很久沒繼續寫HTML教學文了,
一直很想寫,但因為生病的關係停了一陣子,
真的是很不好意思。

行和列、欄和列、Row & Column

首先要先能夠分別[行和列]、[欄和列]、[Row & Column],這樣在表格的教學文中才不會出現問題,首先先看底下的圖來進行分辨:
Row & Column

或許各位會記不起來行和列的分別,所以我利用以前在赫哲補習班學到的方法來告訴大家,透過行與列的第一個筆畫即可分別,的第一個筆畫偏上下,而的第一個筆畫為左右,故可藉此來分別,不過中國大陸的行和列是與我們相反的,還請各位多多注意。

基本表格結構

底下先讓我們看一個基礎的範例:

BasicTableExample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>表格</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>英文名稱</th>
        <th>中文名稱</th>
      </tr>
      <tr>
        <td>Sonic</td>
        <td>索尼克</td>
      </tr>
      <tr>
        <td>Tails</td>
        <td>塔爾斯</td>
      </tr>
      <tr>
        <td>Knuckles</td>
        <td>納克</td>
      </tr>
      <tr>
        <td>Amy</td>
        <td>艾咪</td>
      </tr>
    </table>
  </body>
</html>

table01.png

看到程式碼這麼長,大家應該都昏了吧!我來慢慢解釋給各位聽吧!

首先,<table>...</table>包的是整個表格的內容,而table標籤本身有個屬性叫做border,在以前的標準,其值為框線的粗細大小;現時的標準,只有0與1這個值可以填,表明表格是否要有框線,若沒使用border,則預設為無框線。

再來有四組的<tr>...</tr>,每組tr標籤個別表示的是表格裡的一列,在每組tr標籤中,有<td>...</td><th>...</th>兩種標籤,分別都表示一列裡面的一格資料,只不過th標籤表示的是標題資料,td標籤表示的是一般資料。而th標籤由於是表示標題資料,故有預設的粗體、文字置中樣式會自動套上去。這樣大概就是整個表格的架構了!

合併格

接著我們來合併格子吧!底下一樣給個範例:

BasicTableExample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>表格</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>英文名稱</th>
        <th>中文名稱</th>
      </tr>
      <tr>
        <td rowspan="2">Sonic</td>
        <td>索尼克</td>
      </tr>
      <tr>
        <td>音速小子</td>
      </tr>
      <tr>
        <td>Tails</td>
        <td>塔爾斯</td>
      </tr>
      <tr>
        <td>Knuckles</td>
        <td>納克</td>
      </tr>
      <tr>
        <td>Amy</td>
        <td>艾咪</td>
      </tr>
      <tr>
        <td colspan="2">E-123 Omega</td>
      </tr>
    </table>
  </body>
</html>

table02.png

我們可以在td標籤與th標籤插入colspan與rowspan屬性去給予要合併的格數。

在範例中,Sonic該格使用了rowspan="2",也就是指Sonic該格要佔兩個列(row),所佔的位置為該格與下一列的對應位置的該格,這也使下一個tr內少了一個td標籤。同理,而E-123 Omega該格使用了colspan="2",也就是指E-123 Omega該格要佔兩個行(column),所佔的位置為該格與向右一格的格子,故其所在的tr標籤少了一個td標籤,這也就是合併格子的用法。

這樣講完了基本的表格用法,等之後再來提提更進階的表格結構吧!(雖然這個之後應該會非常久就是了XD!!)

參考資料

  1. w3schools.com > HTML Tables:http://www.w3schools.com/html/html_tables.asp
  2. w3schools.com > HTML <table> Tag:http://www.w3schools.com/tags/tag_table.asp
  3. HTML表格(table)的常用語法:http://www.pt.ntu.edu.tw/hmchai/ptcomputer03_2/hHTML/HTMLtable.htm

#Javascript:this用法整理

常用Javascript的人都知道,[this這個關鍵字在一個函式內究竟指向誰]的這個問題很令人頭大,本人在這裡整理了一下Javascript中this的指向的五種不同情況,其中前三種屬於基本的情況,而後兩種情況可基於前三種情況的方式來進行思考。

1.this指向於調用該函式之物件

如果你有學過C/C++,你可能會記得一個物件內的成員函式裡的this指的即是該成員函式所在之物件,但在Javascript裡則有那麼些許不同,Javascript裡的this看的是究竟是誰調用該函式,而不是看該函式被定義在哪個物件內,這個大原則抓到了,基本上就已經可以探知this的奧秘了。底下寫一下這種情況的公式與範例:

公式
1
物件.函式(); //函式內的this指向該物件
範例
1
2
3
4
5
6
7
8
9
10
11
12
13
var obj = {
  x: 20,
  f: function(){ console.log(this.x); }
};

obj.f(); //由於調用f函式時,點前面物件為obj,故f內的this指向obj,則輸出為20。

obj.innerobj = {
  x: 30,
  f: function(){ console.log(this.x); }
}

obj.innerobj.f(); //由於調用f函式時,點前面物件為obj.innerobj,故f內的this指向obj.innerobj,則輸出為30。

2.this指向全域物件(瀏覽器:window物件、node.js:GLOBAL物件)

如果調用函式的前方並未有物件,則函式內this就指向全域物件。在瀏覽器內全域物件為window物件,而在node.js中全域物件則為GLOBAL物件。底下一樣寫一下這種情況的公式與範例:

公式
1
函式(); //函式內的this指向全域物件
範例
1
2
3
4
5
6
var x = 10;
var f = function(){
  console.log(this.x);
};

f(); //由於調用f函式時,前方並未有[物件.]的形式,故f內的this指向全域物件,則輸出全域變數的x(10)。

例外:在使用node.js時,若使用node file.js這樣的方式執行js檔,並不會讓宣告的全域變數掛在全域物件上(意指會利用function將code整個包起來執行),故輸出應為undefined。

前兩種情況常見誤導範例

範例一、物件之成員函式內有函式(感謝NSLin在實務讀書會上的範例Code)

example1.js
1
2
3
4
5
6
7
8
9
10
11
var x = 10;
var obj = {
  x: 20,
  f: function(){
    console.log(this.x);
    var foo = function(){ console.log(this.x); }
    foo(); // (2)
  }
};

obj.f();  // (1)

這個範例會輸出多少呢?別忘記大原則,在Javascript裡的this看的是究竟是誰調用該函式,故並不會輸出20 20,而是輸出20 10,為什麼呢?因為(1)obj.f()調用時,f前面物件為obj,故f內的this指向obj。但因為調用f內的(2)foo函式時是用foo(),調用的前方並未有物件,故foo內的this指向全域物件,所以輸出會是全域變數的x的值。

若要讓foo內使用obj.x的值,解法如下:

example1.js
1
2
3
4
5
6
7
8
9
10
11
12
var x = 10;
var obj = {
  x: 20,
  f: function(){
    console.log(this.x);
    var that = this; //使用that保留在這個函式內的this
    var foo = function(){ console.log(that.x); } //使用that取得obj
    foo();
  }
};

obj.f();

範例二、借用函式

example2.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var x = 10;
var obj = {
  x: 20,
  f: function(){ console.log(this.x); }
};

obj.f(); // (1)

var fOut = obj.f;
fOut(); // (2)

var obj2 = {
  x: 30,
  f: obj.f
}

obj2.f(); // (3)

範例中三次調用之函式的this所指向的物件為何,不知道各位能不能看得出來。雖然用的是同一個函式,但是因為調用的不同,故this所指向的物件就不同。(1)obj.f()的f所指向的是obj,這比較沒有問題,輸出的會是20;而(2)fOut()裡的this,則是因為調用時前方無物件,則this所指的是全域物件,輸出的會是10;最後(3)obj2.f()則是obj2去呼叫f,故f內的this指向的是obj2,輸出的會是30。

3.this指向利用call或apply所指派給this的物件

有個方法可以更動前兩種敘述所讓this指派的值,就是利用call與apply。call與apply都是呼叫該函式並讓該函式的this指向給予call或apply的第一個參數。至於call和apply的差別則是在於其後面給予被調用之函式的參數放入的方法不同,一個是直接攤平放在第二個以後的參數;一個是直接放入一個裡面放要給予之參數的陣列。底下一樣看一下公式和範例:

公式
1
2
(A物件.)函式.call(B物件,參數1,參數2,參數3, ......); //函式的this指向B物件(若B物件為null,則指向全域物件)
(A物件.)函式.apply(B物件,[參數1,參數2,參數3, ......]); //函式的this指向B物件(若B物件為null,則指向全域物件)
範例
1
2
3
4
5
6
7
8
9
10
var obj = {
  x: 20;
  f: function(){ console.log(this.x); }
};

var obj2 = {
  x: 30;
};

obj1.f.call(obj2); //利用call指派f的this為指向obj2,故輸出為30

4.this指向new所產生之新物件

若將函式當作建構式(constructor)來用,則內部的this則指向於new所產生之新物件。

公式
1
new 建構式(); //建構式內之this指向new所產生之新物件
範例
1
2
3
4
5
6
7
8
9
10
function Monster(){
  this.hp = 100;
};

var monster = new Monster(); //Monster的this指向new出來之新物件並回傳回來,new的寫法就類似於下面的寫法。
var monster = (function(){
  var _new = { constructor: Monster, __proto__: Monster.prototype }; //在IE內可能不相似
  _new.constructor(); //這也是為何說可以利用前三種情況來變化的原因,constructor呼叫時,this指向的即是_new這個物件。
  return _new;
})();

5.callback函式內的this會指向於調用放入該callback的函式之this所指向之物件

先想想在jQuery中,我們若要讓#button這個元素被click的時候,內容改為“Clicked”這樣的字串,該如何寫呢?

clicked.js
1
2
3
$('#button').click(function(){
  this.html("Clicked");
})

此時這個this居然會指向$(‘#button’)這個物件,感覺很自然,但實際想想會覺得很神奇。假設你寫一個function,它可以吃一個function,並在裡面呼叫傳入的function,你該怎麼寫呢?

function-to-function.js
1
2
3
4
5
var f = function(innerf){
  //前面的處理
  innerf(arg1, arg2, arg3, ......);
  //後面的處理
}

但如果這樣寫的話,innerf裡的this根據前述規則就應該是全域物件了!那為什麼常常別人實作的callback函式可讓this指向於調用放入該callback的函式之this所指向之物件呢?這表示大家實作上會遵守一個規則,會將自己的this傳給callback當作它的this來用!這也是為什麼我說這個情況其實也是前三種情況的變化而已了!所以上面的code應該改成如下的形式會比較好:

function-to-function-improved.js
1
2
3
4
5
6
var f = function(innerf){
  //前面的處理
  innerf.call(this, arg1, arg2, arg3, ......);
  //或是innerf.apply(this, [arg1, arg2, arg3, ......])
  //後面的處理
}

參考資料

  1. Javascript的this用法:http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html
  2. [图解] 你不知道的 JavaScript - “this”:http://www.cnblogs.com/ruxpinsp1/archive/2008/04/20/1162463.html

#生活趣事:[13.10.07]-與時間競賽同時做完推甄資料寄送、微軟社群之星面試以及實務讀書會演講

標題有越下越長的趨勢,不太是個好現象呀……

中午兩點上完了互動網站設計,與皮卡、台灣偉以及Max三人到學校附近的貝果店吃飯,由於趕著等等要去完成推甄資料,我還是第一次吃飯比在座的人都還快。就在餐點還未來的時候,我趁著這個空檔整理備審資料時,卻發現兩吋的照片不見了,心中一陣恐慌,突然Max提醒我水源市場附近有拍證件照的機器,我就開始規劃了接下來的行程。

兩點五十分吃完飯後,首先,因為台灣偉先生要先傳真資料,我們第一步先進入了位於師大夜市外側的7-11,但由於傳真過去的圖片似乎不太清楚,結果用得有點久,我就先與Max兩人先往捷運站走。到了台電大樓站後坐了捷運到公館站,出來出口後快速向證件照機器前進,結果發現拍照要150元,看著只剩下100元紙鈔和一堆10元硬幣的錢包,忍痛將僅剩的一張紅色鈔票以及五個銀色硬幣給投了下去。拍完後又往光南大批發衝,買了文具以及資料袋後,又往學校衝,直達蔣老師辦公室後跟老師拿了推薦信,接著又到PC室確認了資料並將它們裝袋後,就到校門口的郵局把資料給寄出去了,那時已經四點左右了。

由於四點三十分要到微軟公司去面試社群之星,就趕緊從公館站坐車到微軟公司,結果已經遲了二十分鐘,那邊的職員還笑笑地問我是否是迷路了,幸好面試時,主管並沒有問我和另外一位跟我同組的組員-重光很刁鑽的問題,僅僅只是要我們做個簡單的自我介紹,以及詢問我們之前繳交的報名表上所填的資訊而已。結束後,又趕回公館的師大分部校區,準備進行晚上讀書會的課程。

今天這一路與時間的賽跑中,真的深刻地讓我了解到短時間內進行一大堆行程的可怕,研究所推甄真的一生只要一次就好了,再多真的吃不消呀!

#生活趣事:[13.10.06]-與Jack Tu在信義誠品和大真文化祝編輯的聊天

已經好久沒有寫日記心得文了,請原諒我呀Q_Q

今日菲特颱風來襲,說到菲特颱風,我的臉書和噗浪一堆人都將菲特諧音於魔法少女奈葉裡的菲特,並說這颱風可不容小覷。說真的,不用到用這種方式來形容這颱風的強勁,只要稍微出去一下就大概了解這颱風威力有多麼地可怕。

Jack Tu昨日來電,說是今日中午大真文化的祝編輯要來跟他談某本書的人設問題,這問題至少從暑假就一直談到現在,遲遲沒有定稿,至於內容是什麼恕我就不在此贅述了。

中午Jack Tu來到我家,我整理整理就與他出門去吃午餐,我們走到了光華,路上撐著雨傘,結果我的雨傘就被菲特颱風給吹爛掉了,害我這一路上都一直拿著爛掉的雨傘在死撐著。到了光華一樓,新打造的室內吃飯空間跟以前狹窄的空間有著強烈的對比,這次裝潢真的是好多了!至少我會開始想待在那兒吃飯了。

吃了少少的咖哩飯後,就搭著捷運到了市政府站,透過地下街走到了信義誠品三樓,與祝編輯會面了。由於要談論人設的事情,故在漫畫區拼命地找資料並介紹漫畫給祝編輯了解,Jack Tu一直推廣自己喜愛的作品給祝編輯,這是非常可怕的大推坑呀!!!

買完後就到了阪急樓上一家貝果店吃飯,吃飯途中他們兩個談論地很熱絡,而我則在旁邊看著參考資料中的編輯女王這部漫畫,頗有趣的,之後應該來好好追一下。

談論完後,我們就各自回家了。祝編輯知道我會做網站後,也希望我能夠幫忙他們,等等就寄個資料過去吧!

#HTML:圖片與超連結

該如何在網頁內放置圖片以及超連結,我照慣例先使用一個範例讓你看,再來解釋這個範例的意義。

pictureHyperlinkExample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>圖片與超連結範例</title>
  </head>
  <body>
    <h1 id="top">圖片與超連結</h1> <!-- 設定h1的id為top -->
    <img src="http://www.knightzone.org/image/thumbs/32.jpg" alt="全身圖" /> <!-- 放置圖片 -->
    <a href="http://www.google.com" target="_blank">往Google</a> <!-- 連結並換新分頁 -->
    <p>好幾個段落</p>
    <p>好幾個段落</p>
    <p>好幾個段落</p>
    <p>好幾個段落</p>
    <p>好幾個段落</p>
    <p>好幾個段落</p>
    <p>好幾個段落</p>
    <p>好幾個段落</p>
    <a href="#top">回Top</a> <!-- 連結至id為top的地方 -->
  </body>
</html>

html4-1.png

img標籤:放置圖片

如果要在網頁中放置圖片,可使用img標籤,它具有兩個屬性必須設定,一個為src屬性,是放你的圖片的路徑;另外一個則是alt屬性,是放你的圖片的說明文字,也有可能會被用於圖片連結不到時的替代文字。

img.html
1
<img src="圖片所在路徑" alt="說明文字" />

當要改變圖片的大小,可使用CSS語法,或是使用width(寬度)與height(高度)屬性,此兩個屬性的值在HTML5中必為數值,單位是像素點(pixel),而若在HTML4.01裡還可以使用%數。建議在你每個img標籤上都盡量加上這兩個屬性,這樣在網頁載入時若連結不到該圖片,還是會保留一塊相同大小的方塊,可避免排版亂掉。

imgwh.html
1
<img src="圖片所在路徑" alt="說明文字" width="圖片寬度" height="圖片高度"/>

a標籤:放置超連結

若要放置超連結,可使用a標籤,它有href屬性可以設定該連結要往那兒去,當使用者點擊時瀏覽器會跳至該頁面。

a.html
1
<a href="網頁所在路徑">連結文字</a>

如果不希望連結蓋掉目前的網頁,而是希望開新分頁去顯示連結的網頁,則可加上target屬性,並給予值為_blank

newpage.html
1
<a href="網頁所在路徑" target="_blank">連結文字</a>

超連結不一定要連到其他的網頁,如果這個網頁過長時,要上上下下滑動很麻煩時,可指定將瀏覽器跳到某個HTML元素位置上,每個HTML元素都可以設定id屬性去給予元素一個id名稱,這樣a標籤就可以連結到該元素上。a標籤僅需要在href屬性的值前方加上#,後面再加上要連結到的元素的id屬性名稱即可。以前HTML4.01會使用a標籤的name屬性去設立錨點,讓超連結可以連結該地方,不過到了HTML5後就刪除name屬性了,一律改使用任何HTML元素的id屬性來設定。

id.html
1
2
3
<h1 id="id名稱">標題</h1>
...
<a href="#id名稱">連結文字</h1>

當然你可以將上面連結到其他網頁以及某個HTML元素位置上的方法結合起來,變成連結到該頁的某個HTML元素上。

otherpageId.html
1
<a href="網頁所在路徑#id名稱">連結文字</a>

相對路徑與絕對路徑

以上不論是img標籤的src屬性或是a標籤的href屬性皆是放置一個檔案的路徑位置,路徑分成兩種:一種是相對路徑,另外一種則是絕對路徑。

相對路徑

相對路徑是指從你所在的位置該如何走到欲連結到的檔案的位置的路徑表示,底下用幾張我以前的ppt來解說。

假設該網頁名稱為second6.html,若要連結到與網頁在同資料夾的圖片,則直接打上該名字即可。
html4-2.png

若要連結到位於跟網頁同資料夾的picture資料夾內的圖片,則打上picture,後面再加上斜線分隔,再打上圖片名稱。如果資料夾非常多層則是一樣的道理,可以寫成同層資料夾/內層資料夾1/內層資料夾2/...以此類推/圖片名稱
html4-3.png

若要連結的圖片在網頁所在的資料夾的上一層,則使用..去表示。
html4-4.png

絕對路徑

絕對路徑通常是為了連結外部的資料,不在本網站內的資料去使用,因為不是本站的資料,所以無法使用相對路徑去連結到,只能使用絕對路徑去連結。若使用相對路徑,則網頁搬到不同的地方會連結到的位置會不同,端看該網頁的位置在何處;但若使用絕對路徑,則網頁不管搬到不同的地方則連結到的地方會是相同的。若你的資料會跟你的網站一起搬動,建議使用相對路徑;若不會,則使用絕對路徑。

若是使用絕對路徑,則開頭會先寫明協定名稱,接著是IP位置、Domain Name或是電腦內的絕對路徑,例如要連結到Google就寫<a href="http://www.google.com>Google連結</a>,如果要瀏覽網頁者連到他自己電腦的圖片則使用<img src="file:///C:/myphoto.jpeg" />(當然我不建議連到本機端這種用法)。

參考資料

  1. w3schools.com > HTML <a> Tag:http://www.w3schools.com/tags/tag_a.asp
  2. w3schools.com > HTML <img> Tag:http://www.w3schools.com/tags/tag_img.asp
  3. html5 - HTML Anchors with 'name' or 'id'? - Stack Overflow:http://stackoverflow.com/questions/484719/html-anchors-with-name-or-id

#Excel:將Excel試算表文件轉圖片

基於昨天瑪莉羊問我該怎麼將課表的Excel檔轉成圖片,又剛好我要把成績單的Excel檔也要轉成圖片,所以我就查了一下開怎麼做,底下列出如何將試算表轉成圖片。

轉換步驟

  1. 首先先開啟Excel檔案,並將要轉成圖片的範圍框起來。
    excel1.png

  2. 再來對該範圍按下Ctrl+C或是點擊滑鼠右鍵選擇複製。
    excel2.png

  3. 最後在小畫家(或是其他繪圖軟體)裡面按下Ctrl+V貼上後儲存成圖片即可。
    excel3.png

參考資料

  1. How to Save an Excel Spreadsheet As an Image or Picture | eHow:http://www.ehow.com/how_5968604_save-excel-spreadsheet-image-picture.html
  2. Excel: Save a worksheet as an image file | CyberText Newsletter:http://cybertext.wordpress.com/2011/06/29/excel-save-a-worksheet-as-an-image-file/

#HTML:設定網頁編碼

電腦裡面只能儲存0與1,並且透過二進位的方式用0與1儲存了數字,透過數字與文字的對應,電腦可以利用儲存數字的方式去儲存文字,並在顯示的時候透過對應表去找出該數字代表的文字為何,這樣的對應儲存模式就被稱為編碼。這世界上有很多語言,故編碼也有很多種,若使用的編碼不對,會導致網頁上出現我們有時候去瀏覽國外網站的時候常常會出現的亂碼現象,如下圖所示:
html3-1.png

因此我們必須要確定我們製作出來的網站是用什麼編碼方式儲存的,並且要試著從網頁裡去設定其網頁編碼,讓瀏覽器可以用正確的編碼方式去瀏覽該網站。

常見編碼

各國都有不同的編碼,底下試著列出一些常見的編碼:

語言 常見編碼名稱
繁體中文 Big5
簡體中文 GBK
日文 Shift-JIS
韓文 EUC-KR

由上表可知,每個語言都有其不同的當地的編碼方式,那麼如果要顯示所有國家語言的網站該怎麼辦?

不管你是否要做一個純粹單一語言的網站或是要做多語言的網站,我都會建議你使用Unicode萬國碼的 UTF-8 的編碼方式去儲存網站,這個編碼不僅支援多個國家的語言,有些繁體中文的罕見字其實用Big5是沒辦法表示的,但是用萬國碼卻是OK的!

如何儲存UTF-8格式的網頁

如果使用的是記事本來編輯網頁,可在儲存檔案的時候,點擊底下的編碼的選項,選擇UTF-8即可,如下圖所示:
html3-2.png

如果是使用Notepad++來編輯網頁,可在上面工具列的[編碼]裡面選擇[轉換至UTF-8碼格式(檔首無BOM)]即可,如下圖所示:
html3-3.png

用meta標籤來設定該網頁的編碼

meta標籤在HTML文件中,是用來設定該文件的meta資料,除了可以用來設定編碼外,還可以設定很多其他跟網頁有關的資料,不過在這裡我只先提該如何設定網頁的編碼。

你可以在head元素內加上<meta charset="編碼名稱" />即可設定網頁的編碼,如果你要設定其為UTF-8的編碼,可如底下範例所示:

UTF-8.html
1
2
3
4
5
6
...
<head>
  <meta charset="UTF-8" />
  <title>標題</title>
</head>
...

在HTML4.01的時候,是使用<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />這麼冗長的敘述,但是現在HTML5,你可以使用上述如此簡短的敘述即可。

參考資料

  1. MOZILLA DEVELOPER NETWORK > 應該避免的過時語法:https://developer.mozilla.org/zh-TW/docs/Web_%E9%96%8B%E7%99%BC/Historical_artifacts_to_avoid
  2. html5 - <meta charset='utf-8'> vs <meta http-equiv='Content-Type'> - Stack Overflow:http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type
  3. w3schools.com > HTML <meta> Tag:http://www.w3schools.com/tags/tag_meta.asp

#HTML:基本內文文章結構

HTML文件裡面的內容大概如你在報紙上看到的一篇篇文章,一樣會具備標題、副標題、段落等等格式,我們就先給一個範例來表現一篇文章的HTML文件吧!

article.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
  <head>
    <title>文章範例</title>
  </head>
  <body>
    <h1>主要標題</h1>
    <h2>副標題</h2>
    <hr />
    <p>第一個段落</p>
    <p>第二個段落</p>
    <p>
      <em>斜體強調</em><br />
      <strong>粗體強調</strong><br />
      <em><strong>粗斜體強調</strong></em>
    </p>
  </body>
</html>

html2-1.png

標題表示用標籤

使用h1~h6標籤分別可以表示從大到小的1級到6級的標題,當一篇文章出現標題的時候,可以使用此標籤來表示標題的部分。底下是h1~h6各個標籤範例:

header1to6.html
1
2
3
4
5
6
7
8
9
10
...
<body>
  <h1>一級標題</h1>
  <h2>二級標題</h2>
  <h3>三級標題</h3>
  <h4>四級標題</h4>
  <h5>五級標題</h5>
  <h6>六級標題</h6>
</body>
...

html2-2.png

水平線標籤

若要使用水平線來分隔文章,可以使用hr標籤來表示,hr為一個無包內容的標籤,可以寫作<hr />

段落與換行標籤

若文章中要表示段落,可將段落使用p標籤包起來,此時段落上下會與其他段落產生分隔的效果;若僅只要使用簡單的單行換行可使用br標籤,br亦為一個無包內容的標籤,可以寫作<br />

強調標籤

若文章中有需要強調的地方,可使用em標籤做斜體強調、strong標籤去做粗體強調,若要兩者一起使用,則可巢狀式的將一個標籤包起另外一個標籤(就像範例所寫的<em><strong>強調部分</strong></em>)。如果以前有用過HTML的人可能會知道有另外兩個標籤與之效果相同,分別是i(斜體)與b(粗體)標籤。在HTML5開始強調用標籤來表示文章語意的做法後,會建議使用em、strong兩個標籤來取代i與b標籤。

block元素與inline元素

大部分的HTML元素都會定義它為block元素或是inline元素。當使用該標籤會造成該元素與上下元素自動有所分隔,則該標籤所產生的元素為block元素;相對地,若並不會造成與上下元素之間的分隔的話,則為inline元素。本範例中,像是h系列的元素和p元素就屬於block元素;而em元素和strong元素則屬於inline元素。

已被廢棄使用的樣式用標籤

在HTML5當中,已不建議使用center標籤(置中)與font標籤(改變文字樣式,像是文字大小、文字顏色等)來去做樣式變化,目前HTML語法強調是被使用在文件語意上,而樣式美觀的部分就全權交給CSS語法去做處理,故若要置中或是改變文字樣式的部分請使用CSS樣式去做。(其實不只center、font標籤,其他像是align屬性(該元素對齊用)、bgcolor屬性(背景顏色屬性)……等等與樣式有關係的標籤或是屬性都已不建議使用HTML語法做更改,請盡量都使用CSS語法去撰寫)

pre標籤:直接顯示與原語法相同內容

如果有時從別的地方直接複製一篇長篇的文章,要在該文章換行或段落的地方加上<br />或是<p>...</p>實在有點麻煩,這時候只要直接先貼上該文章,然後前後加上<pre>...文章...</pre>即可,這就是pre標籤的用途。

pre.html
1
2
3
4
5
6
7
8
9
...
<body>
  <pre>
這是一篇很長的文章,
害我懶的用br和p標籤,
真是抱歉!
  </pre>
</body>
...

html2-3.png

參考資料

  1. html教學 > 第03章。常用標籤:http://m7.dfps.tp.edu.tw/chen/main5/ahtml/03.asp
  2. w3schools.com > HTML <div> and <span>:http://www.w3schools.com/html/html_blocks.asp
  3. w3schools.com > HTML <pre> tag:http://www.w3schools.com/tags/tag_pre.asp