HTML 網頁設計- CSS 與JavaScript

2024-11-18

文章推薦指數： 80 %

投票人數：10人

格式化. 從上述範例中，您可以看到即使我們在HTML 的原始文字檔案中進行換行，但是呈現出來的結果卻沒有 ... 少年科技人雜誌--2014年12月號(開放公益出版品) HTML網頁設計 HTML網頁設計 HTML、CSS與JavaScript HTML、CSS與JavaScript是讓WebBrowser運作的三大技術，要學會Web程式設計的第一步，就是要學會這三項技術，在本章中，我們將從最基礎的HTML開始。

如果您想要學習這些技術，筆者強烈的推薦您觀看w3schools這個網站，網址如下。

http://www.w3schools.com/ 學習HTML、CSS、JavaScript的順序，最好先從HTML開始，因為HTML最簡單，而且是整個Web技術的表現語言，學會HTML之後就可以學習CSS，看看如何對HTML進行格式化套表呈現的動作，然後再進一步學習JavaScript這個小型程式語言，以便讓網頁更加動態，增強網頁的的互動功能。

以下是w3schools當中這三個主題的網頁，如果您是一個程式設計師，相信您可以用很短的時間就學會這些主題。

http://www.w3schools.com/html/default.asp http://www.w3schools.com/css/default.asp http://www.w3schools.com/js/default.asp 一但學會了HTML、CSS、JavaScript這三種技術，您就可以開始向Server端的技術邁進了。

簡易網頁 HTML網頁是一種純文字檔案，您只要用記事本這樣的文字編輯器就可以輕易的編出來，以下是一個範例：

Hello! 檢視檔案：https://dl.dropbox.com/u/101584453/web/wp/code/hello1.htm 您可以看到在上述範例中，Hello!訊息被夾在與中間，而外層又有與包覆，像這樣的結構稱為標記語言(MarkupLanguage)。

如果我們在上述文件中再加上一句Yahoo!這樣的標記，那麼網頁中將會出現Yahoo!這個詞彙，該詞彙通常是藍色文字，而且可以用滑鼠點擊，當您點擊之後網頁就會被導到Yahoo台灣的首頁，這種點選後會導入另一個網頁的機制是Web的最大特色，稱為Hyperlink(超連結)，而那些被標記起來的文字，就稱為HyperText(超文字)。

Hello! Yahoo! (筆者註：標記a當中的href是HyperlinkReference(超連結引用)的縮寫，而a則是anchor(錨)的意思)。

檢視檔案：https://dl.dropbox.com/u/101584453/web/wp/code/hello2.htm 而這也正是HTML之全名HyperTextMarkupLanguage的意義，也就是一種含有超連結的標記語言。

由於HTML標記語言是有層次性的，因此在排版時我們經常都會使用縮排以凸顯出這種層次感，例如以上的範例經過縮排之後就變成了如下的情況。

Hello! Yahoo! 檢視檔案：https://dl.dropbox.com/u/101584453/web/wp/code/hello3.htm 這樣的結構看起來更加一目了然，能夠凸顯出每個層次之間的包含關係。

HTML的表頭雖然上述範例已經是HTML網頁了，而且也通常可以正常檢視了，但是還不夠完整，一個完整的HTML網頁通常要包含足夠的表頭資訊，以便讓瀏覽器能正確的辨認這個網頁的類型與編碼方式，以下是一個範例： Hello!你好！ Yahoo! 檢視檔案：https://dl.dropbox.com/u/101584453/web/wp/code/hello4.htm 圖、上述網頁的檢視畫面其中第一句的是告訴瀏覽器，這個文件是一個HTML檔案，而這句話，則是告訴瀏覽器這個文件的編碼是用UTF-8的格式。

所以您必須將上述檔案，儲存成unicode的UTF-8格式，這樣網頁才能正確運作，否則就有可能出現亂碼的情況，以下是筆者使用Notepad++設定UTF-8格式的情況。

圖、筆者使用Notepad++設定UTF-8格式的畫面格式化從上述範例中，您可以看到即使我們在HTML的原始文字檔案中進行換行，但是呈現出來的結果卻沒有換行，如果您真的想要強制換行的話，在HTML當中必須用
這個標記，才能讓文字真正換行。

但是強制換行並不是一個好的寫法，比較好的方法是用段落標記

...

把您的段落包起來，這樣在段落結束後就會換行了。

另外、還有...標記(也可以用...)可以讓文字變粗體，而...指令則可以讓文字呈現斜體，...標記可以強調文字，而...可以讓文字以類似程式碼的字型輸出。

若要讓文字變成上標，可以用^...，或用_...則可以讓文字變下標，以下範例綜合的呈現了這些格式化標記的結果。

一般字體(PlainText)
斜體(Italic)
粗體(Bold)

明顯(Strong) 強調(Emphasized)

這是^上標與_下標的顯示情況！

檢視檔案：https://dl.dropbox.com/u/101584453/web/wp/code/format.htm 圖、各種格式標記的網頁檢視畫面標題 HTML的章節標題共有六種層次，從h1到h6，通常h1代表最大的第一層標題，會用最大的字型顯示，而h6則是最小的第六層標題，會用最小的字型顯示。

第1層段落標題

第2層段落標題

第3層段落標題

第4層段落標題

第5層段落標題

第6層段落標題

而整個網頁的標題則是用...進行標記，如下所示。

網頁標題以下是這些標題的使用範例，您可以點選看看。

檢視檔案：https://dl.dropbox.com/u/101584453/web/wp/code/header1_6.htm 圖、Header1-6的網頁檢視畫面影像Image 在HTML中，要顯示影像或圖片，只要使用就行了。

如果要指定大小，就可以加上width與height屬性，如以下範例所示。

上述第一個指令會按照原圖大小顯示，而則會將圖形縮放到寬度200，高度300的大小，最後一個用20%代表縮放到寬度為瀏覽器畫面視窗的百分之二十那麼大。

檢視檔案：https://dl.dropbox.com/u/101584453/web/wp/code/img.htm 圖、img指令的網頁檢視畫面評論：竟然趁機為自己的書打廣告，真是太惡劣了！.... 表格Table 在HTML當中、有很多排版都是使用表格的方式製作的，例如「側欄、上方橫幅」等等，表格的語法如以下範例所示。

	欄1	欄2
列1	1,1	1,2
列2	2,1	2,2

表格的語法都是由...

所夾住的，其中...會夾住一個列，而每個列又可以分成數個欄，這些欄可能用..或...夾住，其中th通常是用在標頭、而td則是用在內容。

檢視檔案：https://dl.dropbox.com/u/101584453/web/wp/code/table.htm 表格範例的顯示結果項目list HTML的項目是用

...

語法所框住的，如果在項目的外面加上

...，那就會顯示無編號的項目清單，若加上

...，那就會顯示有編號的項目清單。

無編號項目清單：

項目1
項目2

有編號項目清單：

項目1
項目2

檢視檔案：https://dl.dropbox.com/u/101584453/web/wp/code/list.htm 項目清單的顯示結果表單Form 在HTML當中，表單(Form)是指可以讓使用者進行輸入的元件，其語法是用夾住一堆的輸入元件，這些輸入元件包含input(輸入)、textarea(文字區)、select(選項)等，其中的input還可以根據其type欄位顯示成checkbox,color,date,datetime,datetime-local,email,file,hidden,image,month,number,password,radio,range,reset,search,submit,tel,text,time,url,week等各種不同的輸入欄形式，以下是一個表單的範例。

帳號:
密碼:
信箱:
生日:
照片:
性別:男女
血型: A型 B型 AB型 O型
自我介紹：

檢視檔案：https://dl.dropbox.com/u/101584453/web/wp/code/form.htm 表單的顯示結果在上述的範例中，當submit類型的送出鈕被按下後，瀏覽器會將這些填寫的資訊，以第一章所說的GET/POST方式，發送給伺服器，如果method欄位是GET，那麼會採用在HTTP表頭網址處傳送singup?user=xxx&password=xxx.....這樣的形式送出，這種方式會將密碼顯示在瀏覽器的網址列上，比較容易被看到，若method欄位是POST，則會在HTTP表頭尾端加上user=xxx&password=xxx...的資訊，不會在網址列上被看到。

當然、如果有人監控網路上訊息的話，還是會看得到這些輸入資訊。

若要更安全，則必須採用HTTPS的SSL方式傳遞，這種方式會對訊息加密編碼，就比較不會有輸入訊息外洩的危險。

參考文獻 W3School:HTMLTurorial--http://www.w3schools.com/html/default.asp 少年科技人雜誌，採用創作共用：姓名標示、相同方式分享授權，歡迎加入雜誌社團