HTML

#HTML:台師大資訊實務應用讀書會 第一堂課:Basic HTML簡報下載

最近都在準備關於台師大資訊實務應用讀書會,目前我也希望能夠公開我的部分,簡報內容可能有誤,還請各位能夠看到錯誤能夠回報,非常感謝!

目前HTML簡報內的內容大體上都已經整理成Blog文章了,不過各位還是可以看看這份簡報。

簡報連結:https://speakerdeck.com/sinmaplewing/zi-xun-shi-wu-ying-yong-du-shu-hui-di-tang-ke-basic-html

#HTML(HTML5):字詞分行

在HTML裡面,如果打了太長的一連串的英文字,瀏覽器會把它當作一個詞彙,並且不會在空間狹小的時候做分行(除非中間有-,?……等等之類的分隔符,會在分隔符處分行)。不過我們平常打中文沒有這個問題,中文一個一個字,中間就算沒空白也會以字為單位去做分行。但是就算打英文文章,好似也很少遇過會有一個單字長到完全裝不下的情形。其實是真有這情況會需要,那就是網址,網址中間通常都不會有分隔符,而偏偏又得連在一起,就會導致以下的結果:
wbr.png

那該怎麼做去解決這個問題呢?就利用wbr標籤吧!

wbr:字詞方行

wbr.html
1
2
3
...
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages
...

以上是個例子,我們在我們認定可以斷行的地方去加上wbr標籤,瀏覽器就會在裝該文字的容器塞不下的時候選擇適當的wbr標籤去斷行。若文字能夠完美得塞進容器內那就不會進行斷行。

可完美放入的時候:
wbr1.png

無法完美放入的時候:
wbr2.png

(此範例對於網址的分段方法是依照DevDocs上所言The Yahoo Style Guide的分行方法。)

參考資料

  1. DevDocs:http://devdocs.io/html/
  2. w3schools.com > HTML <wbr> Tag:http://www.w3schools.com/tags/tag_wbr.asp

#HTML(HTML5):多媒體嵌入

今天終於要來提HTML5的新功能之一-放置多媒體的部分,底下一樣就用範例來解說。

embed:外部嵌入播放器播放音樂與影片

media.html
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>多媒體</title>
  </head>
  <body>
    <embed src="Sonic Generations [OST] - Rooftop Run (Modern).mp3" />
    <embed src="[灆洢]Sonic Generations - Sky Sanctuary Act2 - 0225.13-087-Rank S.mp4" />
  </body>
</html>

media01.png

這個embed標籤從很早以前就有了,不過直至HTML5才將之納為標準。

embed主要是用外部的播放程式鑲嵌在網頁上來播放音樂或影片,利用src屬性去放置音樂或影片的連結。如果該瀏覽器找不到可播放此音樂或影片的播放程式,那麼就沒辦法播放了。

不過在HTML5的標準裡,已經支援讓瀏覽器去播放音樂或影片了!底下就來看看直接讓瀏覽器播放音樂或影片的標籤吧!

audio:播放音樂

media02.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>多媒體</title>
  </head>
  <body>
    <p>
      <audio src="Sonic Generations [OST] - Rooftop Run (Modern).mp3" controls autoplay loop>
      對不起,您的瀏覽器不支援HTML5。
      </audio>
    </p>
  </body>
</html>

media02.png

audio標籤用於放置音樂,屬性有很多,在此列舉常用的controls、autoplay、loop,這些屬性跟以前看到的屬性有點不同,以前的屬性都要代值,但是HTML5中很多標籤是具有布林屬性:有出現就有功能,沒出現就沒功能。controls表示是否要出現控制面板,autoplay表示是否要自動播放,loop表示是否要循環。

audio裡面的內容可放置文字,來讓不支援HTML5的瀏覽器可以顯示。

video:播放影片

media03.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>多媒體</title>
  </head>
  <body>
    <p>
      <video src="[灆洢]Sonic Generations - Sky Sanctuary Act2 - 0225.13-087-Rank S.mp4" controls autoplay loop>
      對不起,您的瀏覽器不支援HTML5。
      </video>
    </p>
  </body>
</html>

media03.png

video標籤用於放置音樂,屬性跟audio一樣有很多,範例中一樣列舉常用的controls、autoplay、loop,這些屬性跟audio的同名屬性類似,就不多提了。

video裡面的內容一樣可放置文字,來讓不支援HTML5的瀏覽器可以顯示。

瀏覽器支援音樂、影片列表

由於audio與video是使用瀏覽器自身來播放音樂與影片,故就要來稍微注意一下每個瀏覽器支援的音樂與影片格式有哪些了,底下是列表:

音樂格式支援

Browser mp3 wav ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera NO YES YES

影片格式支援

Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera NO YES YES

看完上面的表,不知道各位有沒有發現,上面沒有一種格式可以在每個瀏覽器上皆可執行,那該怎麼辦呢?這時候就要來使用source標籤了!

source:設定音樂與影片的來源

media04.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>多媒體</title>
  </head>
  <body>
    <p>
      <audio controls autoplay loop>
        <source src="music.ogg" type="audio/ogg">
        <source src="music.mp3" type="audio/mpeg">
        對不起,您的瀏覽器不支援HTML5。
      </audio>
    </p>
    <p>
      <video controls autoplay loop>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        對不起,您的瀏覽器不支援HTML5。
      </video>
    </p>
  </body>
</html>

將audio或video內的src屬性拿掉,換成在audio或video內容內加入來source標籤,每個source標籤就代表一個音樂或是影片的來源,瀏覽器在讀的時候會照順序找尋可播放的來源,若找到有可以播放的來源時,就會播放。

最後給各位一個不錯的支援多瀏覽器的方法如下:

media05.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
<p>
  <audio controls autoplay loop>
    <source src="music.ogg" type="audio/ogg">
    <source src="music.mp3" type="audio/mpeg">
    <embed src="music.ogg" />
  </audio>
</p>
<p>
  <video controls autoplay loop>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    <embed src="movie.mp4" />
  </video>
</p>
...

除了原本加source的版本外,在給不支援HTML5的瀏覽器就用embed來取代,這樣就又可以支援更多的瀏覽器了!

參考資料

  1. DevDocs:http://devdocs.io/html/
  2. w3schools.com > HTML5 Audio:http://www.w3schools.com/html/html5_audio.asp
  3. w3schools.com > HTML5 Video:http://www.w3schools.com/html/html5_video.asp

#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

#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

#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

#HTML:基本語法結構

由於開學之後會有教學Web技術的讀書會,故我現在就一邊整理HTML+CSS的資料,一邊PO上Logdown這裡讓大家看看。

談到HTML語法,我們先來看一個簡單的HTML範例:

firstWebsite.html
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>這裡是標題的部分</title>
  </head>
  <body>
    這裡是內容的部分。 <!-- 此為註解 -->
  </body>
</html>

html1-1.png
底下我們開始對這個範例進行講解。

HTML版本宣告

每份HTML文件的第一行通常會放置該HTML是使用哪個版本的宣告,如今HTML5已漸漸成為主流,故我們會用<!DOCTYPE html>這行來進行版本宣告,若你有看過HTML4.01的版本宣告,你一定會知道以前的版本宣告有多麼冗長,它是長這樣的:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">,目前您已經可以盡量使用HTML5的版本宣告,現代的瀏覽器都支援它。

標籤(tag)與元素(element)

HTML文件是以一堆標籤形成的元素所組合而成的,標籤即是使用小於符號、標籤名稱與大於符號所組合而成的,而元素則是由開始標籤、標籤屬性以及標籤所包之內容與結束標籤所組合而成,底下是一個HTML元素的格式:

format.html
1
<標籤名 屬性1='值' 屬性2='值' ....多個屬性以此類推> 元素內容 </標籤名>

最前面的即是開始標籤,而最後面在標籤名前加上斜線的即為結束標籤。

若元素並無元素內容時,即可簡寫為下列格式:

single.html
1
<標籤名 屬性1='值' 屬性2='值'  ....多個屬性以此類推 />

即類似於將結束標籤開頭的斜線放置於開始標籤的尾部即可。

html、head、body標籤

每一份html文件的第一個最底部的標籤必定是html標籤,而html標籤的內容通常又會分成兩個標籤,一個是head標籤,另外一個是body標籤。

structure.html
1
2
3
4
5
6
7
8
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

head標籤內放置的是此HTML文件的整體資訊,像是head內一定會放的title標籤即是設定該網頁的標題。

head.html
1
2
3
4
5
...
<head>
  <title>這裡是標題的部分</title>
</head>
...

html1-2.png

body標籤內則是放置網頁的內容,打在這裡面的內容都會呈現在網頁上。

body.html
1
2
3
4
5
...
<body>
  這裡是內容的部分。
</body>
...

html1-3.png

註解

你可以利用<!-- 註解文字 -->放置註解,註解文字並不會顯示在網頁上,僅提供你在開發網頁的時候能夠方便了解該段程式碼的含意為何。

參考資料

  1. HTML基本語法:http://kaihang.tripod.com/computer/html/html.html
  2. w3school.com > HTML <html> tag:http://www.w3schools.com/tags/tag_html.asp
  3. 程式設計教學誌 > HTML 4.01:http://pydoing.blogspot.tw/2010/11/html-401-overview.html