Posted by : Dylandy Chang 2013年2月4日 星期一

HTML被發明出來的時候,主要是為了傳輸文件,而為了表現這些文件,所以在早期發明出來的HTML 標籤有許多類似個功能,像是標題、內文、圖片、連結、表格、列表...都可以透過 HTML 標籤輕易的完成一份文件,以下我會先透過這些部份來創討論各種不同標籤的使用時機。

在創建一份文件的時候,我們要先了解到,HTML 他到底是怎麼去組成的,一份 HTML 文件可以分成兩個部份:
  1. 頭(head)
  2. 身體(body)

讓我們從「頭」開始討論吧,在瀏覽器開始載入一份文件之前,我們可以在文件的內容之前先宣告一些這份文件的初始資料,例如:
首先我們先列出比較常出現在 head 裏面的標籤,在逐一了解他們的使用方法:
  • < title >
  • < meta >
  • < style >
  • < script >
我們先從 title 標籤來看看,title 是讓我們可以自由的建立文件標題的標籤,在這個標籤內所輸入的內容會被顯示在瀏覽器分頁上方,類似 Email 裏面的主旨,用法很簡單直接輸入:

<title> 標題內容 </title>

看完了比較簡單的 title 標籤以後,讓我們來看看比較複雜的幾個標籤吧。

首先從 meta 標籤開始,meta 在英文裏面的意思即為「原」的意思,所以 meta-data 即為原資料,或者初始資料,而在 html 裏面,我們也會需要一些這樣的資料,來幫助我們建立一份網頁,好的初始資料可以讓使用者在閱讀這份文件的時候較為輕鬆,不容易出現問題(如編碼不同產生亂碼),甚至,我們可以透過 meta 標籤的撰寫,讓使用者在搜尋引擎尋找資料的時候,更容易找到我們的網頁,因為我們已經先把網頁的內容告訴搜尋引擎,跟他說我們的網頁有什麼樣的東西,這樣提供資訊會更為方便及語意化。

<meta>

在 meta 資訊裏面,有以下幾項參數可以做設定,我們可以透過這些參數來增加文件的內容、作者姓名、文字編碼...的設定:
  • keywords    // 用來定義搜尋引擎的關鍵字:讓使用者在搜尋引擎上輸入這個關鍵字的時候,可以找到這個文件。
  • description    // 描述這份文件包含了什麼樣的東西,可以讓程式設計師快速的有整體的概念。
  • author    // 宣告這份文件的作者名字
  • charset    // 設定文件的文字編碼
  • http-equiv    // 每幾秒鐘重新更新文件一次
使用 meta 的時候,要將上述的引數存放在 name 參數內,而設定值,需放在 content 裏面,例如:
<meta name="keywords" content = "slide" />
注意!

因為瀏覽這個文件的使用者可能使用各種不同的作業系統,而不同的作業系統對於預設的文字編碼略有不同,例如:微軟的 Windows 使用 Big5 為中文做編碼,但是 Linux 系統則是使用 UTF-8 來作為預設的字形編碼,若是我們沒有設定字形編碼的話,那麼可能我們使用 Windows 編輯的文件在 Linux 上會呈現亂碼的現象,而在 Linux 上編輯的文件到了 Windows 上也會呈現亂碼的現象,這樣的狀況是我們不樂見的,所以設定文件編碼,讓瀏覽器可以正常的將文件顯示出來就變得很重要了,而預設文件編碼的方式也是在 meta 裏面進行設定,請特別注意,他的使用方法和其他的參數不同,直接給值,不需使用 name 、 content 來處理:

<meta charset="utf-8" />

※一般而言我們使用 utf-8 來作為預設編碼,因為 Big5 編碼因為字數限制的關係,有些較為罕見的字並不能顯示。
<style>

在載入文件的時候我們也會先把這份文件的樣式表(CSS)一起載入,這樣在後面建立 HTML 文件的時候就有樣式可以依尋,我們使用 style 標籤來載入 CSS 的程式碼,透過 CSS 我們可以賦與個別 HTML 元素做排版、變色、變形,甚至是動畫之類的功能,使用方法如下:

<style>
    div{
      color:red;
      font-size:20px;
     }
</style>


<script>

在網頁裏面我們常常會需要用到一些本機端的程式碼,這些程式碼可以幫助我們做出許多的功能,如將右鍵上鎖,讓使用者不能對網頁進行存取,或是讓網頁有漂亮的動畫,抑或是使用程式,讓網頁和使用者互動,而這些程式碼一般我們會在網頁本體載入之前先將他載入進來,而載入的方法,即是透過 script 標籤:

<script>
    var input = Javascript 範例;
    document.write(input);
</script>

上面我們把一些 Heading 的部份做簡單的說明,到這裡,大家已經可以寫出類似下面這樣的程式碼了。

接下來我們要繼續進入 body 的部份,將基本的 HTML 元素及文件的建立方式進行說明。
從觀察一份文件我們可以發現幾件事情:
  1. 文件是有標題的
  2. 文件的標題有分層級,是巢狀的結構
  3. 文件裏面的文字有分粗體、斜體,甚至有些有刪除線
  4. 文件裏面有圖片
  5. 文件裏面有時候還有表格
  6. 有時候在撰寫文件的時候會需要條列式的舉例
讓我們一步一步的走下去,首先,我們在看一個文件的時候,我們會發現,每一份文件都是有標題的,大標題、小標題,各種不同的標題,而標題又有分層級,根據不同的層級有不同的大小和格式需要去遵守,所以,我們要怎麼建立標題呢?從英文裏面我們可以知道,標題稱為 Heading 所以,在 Html 裏面如果要使用標題的話,只要用 h 以及他的層數組合的標籤即可。

<h1>大標題</h1>
<h2>中標題</h2>
<h3>小標題</h3>


接下來我們進入正文的部份,在正文的部份,有些格式是我們常用到的,像是對文字加粗體對文字設定斜體想藏些奇奇怪怪的梗,這些東西要怎麼做呢?首先我們要先了解到,HTML 其實是可以直接輸入文字,不需要透過任何標籤都可以輸入文字的,而這些文字就會被當作內文來處理,在 HTML 剛創造出來時常常會使用這樣的方式來進行文件的編輯,但是隨著網頁技術的進步,這樣的方式已經不被推荐,因為我們並不能對他進行許多不同的格式設定,直接寫在 HTML 上的文字是死的,我們不能移動他,這樣會讓網頁變得相當靜態,所以一般我們會將內文寫在一些容器之中,這些容器,我們可以對這些容器進行格式的設定,如此一來,網站才容易動態排版。

一般我們在裝文字的時候會使用的容器有以下幾種,分別有 div 、span 及 p 這三種不同的標籤,這3個標籤的皆為一個區塊容器,他可以讓我們在這個區塊內使用任何的東西,而區別在於 div 的範圍為和內容物一樣高,寬度和頁面一樣寬 span 的範圍為高度和內容物一樣高,寬度也和內容物一樣寬,與前後元素間的距離為一行的距離而 p 元素的範圍和 span 相同,但是 p 元素和前後元素間的距離為兩行的距離,這是需要特別注意到的地方,如果使用不當的話,在排版上、在編輯 CSS 上,會造成蠻大的困擾。
確定文件內文的撰寫方式以後,我們開始會注意到文件內的文字格式要做設定,如何做設定呢?首先是粗體,在英文裡,粗體為 bold ,所以在 HTML 裡使用 b 作為對文字加粗的標籤,再來是斜體,英文中斜體的英文為 italic ,故在 HTML 內用 i 當作斜體的方法,而為了藏梗或是一些金融的修改紀錄常常需要用到刪除線,來讓文字若隱若現來表示這些文字被刪除過了的時候,我們可以使用 del 標籤來增加刪除線。

<b>這裡會變粗體</b>    這裡會變粗體
<i>這裡會變斜體</i>    這裡會變斜體
<del>這裡會有刪除線</del>    這裡會有刪除線

除了這些之外,我們也常常在文件裏面看到表格,表格是一個很方便的東西,我們可以拿來整理許多的數據,或是作為一個整理的空間,將文字轉換成圖像化的呈現,讓觀眾更容易接收到我們所要傳達的資訊,而在網頁的應用上,過去曾經流行過使用表格來進行排版,我們只要在表格的格子裏面填上我們所需要的圖形或文字,就可以很輕鬆的對網頁進行排版,這樣的想法看似很不錯,實際上這樣的作法會讓網頁的彈性變得很差,我們不能任意的對網頁的元素進行更動,不能動態的依據使用者的需求呈現出最適合使用者的網頁內容,除了不人性化的影響之外,若是一個公司的網站不能貼近使用者的使用習慣,那麼可能對公司來說是非常的賠錢,少去許多因為體貼的客製化所增加的收入。
表格的使用方法:
先在要使用表格的地方使用 table 標籤宣告表格,表格內容的每一個格子則是用 td 標籤,而要換行進行下一行的編輯時要在這一列的末端加上 tr 標籤,使得我們可以從表格的下一行開頭進行編輯。
<table border ="1">
   <tr><td>第1行第一個元素</td><td>第1行第二個元素</td></tr>
   <tr><td>第2行第一個元素</td><td>第2行第二個元素</td></tr>
</table>


第1行第一個元素第1行第二個元素
第2行第一個元素第2行第二個元素


最後我們要看到的是,在敘述我們的想法、觀念的時候,常常需要條列式的把我們的想法寫出來,條列式分為兩種:
  • 有順序性的條列
  • 沒有順序性的條列
首先我們先從有順序性的條列開始,在英文中有順序性的條列稱為 order list ,故在 HTML 中被簡稱為 ol ,每個被條列的子項目被稱為 list ,需要用 li 這個標籤作為開頭,注意!不論是有序列表或是無序列表都提供巢狀結構功能,可以在一個 ol 裏面套用多個、多層的 ol 。

<ol>
   <li>第1項
   <li>第2項
   <li>第3項
</ol>


  1. 第一項
  2. 第二項
  3. 第三項
同樣的沒有順序的性的條列式,在英文中稱為 unordered list ,簡稱為 ul ,使用方法與 ol 相同,需要在每個子項目的前面加上 li 標籤,序列可以交叉混用,這是比較方便的功能。

<ul>
   <li>第一項
   <li>第二項
   <ol>
      <li>巢狀小項1
      <li>巢狀小項2
   </ol>
</ul>


  • 第一項
  • 第二項
    1. 巢狀小項1
    2. 巢狀小項2


學完這些基本的 HTML 標籤還有配置,我們已經可以撰寫簡單的 HTML 網頁了,甚至我們可以自行 Hack 別人做好的網頁,從 Hack 別人往頁的過程中學習別人在撰寫網頁的方法、技巧,及熟練自己對於 HTML 的熟悉度,下面有一個很方便的 HTML 5 簡報程式,我們可以使用簡單的 HTML 就進行修改成為自己的簡報,大家可以下載下來自行玩玩,自己撰寫 HTML 簡報,相信會非常有成就感的。

DZSlide -by Paul Rouget

Leave a Reply

Subscribe to Posts | Subscribe to Comments

技術提供:Blogger.

- Copyright © 迪蘭帝的聊天室 -Metrominimalist- Powered by Blogger - Designed by Johanes Djogan -