- Back to Home »
- 網頁程式設計 »
- 網頁程式學習 - HTML 基本上手
Posted by : Unknown
2013年2月4日 星期一
HTML被發明出來的時候,主要是為了傳輸文件,而為了表現這些文件,所以在早期發明出來的HTML 標籤有許多類似個功能,像是標題、內文、圖片、連結、表格、列表...都可以透過 HTML 標籤輕易的完成一份文件,以下我會先透過這些部份來創討論各種不同標籤的使用時機。
在創建一份文件的時候,我們要先了解到,HTML 他到底是怎麼去組成的,一份 HTML 文件可以分成兩個部份:
讓我們從「頭」開始討論吧,在瀏覽器開始載入一份文件之前,我們可以在文件的內容之前先宣告一些這份文件的初始資料,例如:
- 頭(head)
- 身體(body)
讓我們從「頭」開始討論吧,在瀏覽器開始載入一份文件之前,我們可以在文件的內容之前先宣告一些這份文件的初始資料,例如:
- 文件編碼
- 網頁資訊
- 網頁標題
- 層疊樣式表(CSS)
- 網頁程式(script)
首先我們先列出比較常出現在 head 裏面的標籤,在逐一了解他們的使用方法:
看完了比較簡單的 title 標籤以後,讓我們來看看比較複雜的幾個標籤吧。
- < title >
- < meta >
- < style >
- < script >
<title> 標題內容 </title>
看完了比較簡單的 title 標籤以後,讓我們來看看比較複雜的幾個標籤吧。
首先從 meta 標籤開始,meta 在英文裏面的意思即為「原」的意思,所以 meta-data 即為原資料,或者初始資料,而在 html 裏面,我們也會需要一些這樣的資料,來幫助我們建立一份網頁,好的初始資料可以讓使用者在閱讀這份文件的時候較為輕鬆,不容易出現問題(如編碼不同產生亂碼),甚至,我們可以透過 meta 標籤的撰寫,讓使用者在搜尋引擎尋找資料的時候,更容易找到我們的網頁,因為我們已經先把網頁的內容告訴搜尋引擎,跟他說我們的網頁有什麼樣的東西,這樣提供資訊會更為方便及語意化。
在 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 來處理:
※一般而言我們使用 utf-8 來作為預設編碼,因為 Big5 編碼因為字數限制的關係,有些較為罕見的字並不能顯示。
<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>
從觀察一份文件我們可以發現幾件事情:
- 文件是有標題的
- 文件的標題有分層級,是巢狀的結構
- 文件裏面的文字有分粗體、斜體,甚至有些有刪除線
- 文件裏面有圖片
- 文件裏面有時候還有表格
- 有時候在撰寫文件的時候會需要條列式的舉例
<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 標籤宣告表格,表格內容的每一個格子則是用 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行第二個元素 |
最後我們要看到的是,在敘述我們的想法、觀念的時候,常常需要條列式的把我們的想法寫出來,條列式分為兩種:
- 有順序性的條列
- 沒有順序性的條列
<ol>
<li>第1項
<li>第2項
<li>第3項
</ol>
- 第一項
- 第二項
- 第三項
<ul>
<li>第一項
<li>第二項
<ol>
<li>巢狀小項1
<li>巢狀小項2
</ol>
</ul>
- 第一項
- 第二項
- 巢狀小項1
- 巢狀小項2
學完這些基本的 HTML 標籤還有配置,我們已經可以撰寫簡單的 HTML 網頁了,甚至我們可以自行 Hack 別人做好的網頁,從 Hack 別人往頁的過程中學習別人在撰寫網頁的方法、技巧,及熟練自己對於 HTML 的熟悉度,下面有一個很方便的 HTML 5 簡報程式,我們可以使用簡單的 HTML 就進行修改成為自己的簡報,大家可以下載下來自行玩玩,自己撰寫 HTML 簡報,相信會非常有成就感的。
DZSlide -by Paul Rouget
DZSlide -by Paul Rouget