HTML 製作簡單網頁

1-1： HTML 網頁的基本結構
所謂的網頁，一般來說，就是指瀏覽器可以解析的檔案之意。常見的瀏覽器可以解析的檔案類型有：

除了上述的副檔名之外，其餘的檔案格式通常不被瀏覽器所理解與解析，因此當瀏覽器接觸到無法解析的檔案類型時，就會以類似『下載』的模式，提供使用者下載該檔案了。 因此網頁伺服器通常也可以作為檔案伺服器的下載之用。

html 格式檔案，可以透過一些所謂的『標記 (tag)』來將多媒體檔案嵌入到瀏覽器的畫面中， 你可以將 html 檔案想成是一個空白的畫布，而文字、色彩、影片、圖片等多媒體，則是可以放置在這個畫布上面的染料，而這些染料如何在畫布上面呈現， 那就得透過 html 的標記以及 CSS 的樣式表元素了。

換句話說，當你要製作網頁時，就得要先將這些需要的染料 (圖片、影片、文字等等媒體資料) 先準備好，然後再透過 HTML 的標記或 CSS 的元素， 將這些元件放置到你想要讓它出現在網頁的位置上，並改變或加上某些特效，這就是整個網頁囉。

瀏覽器分辨 head 與 body 的差異
因為網頁都是由瀏覽器來呈現的，因此，我們先由觀察瀏覽器如何呈現網頁來理解，當你要製作設計一個網頁時，應該要注意哪些項目。


以本網頁為例，瀏覽器主要分為：(1)上半部的功能畫面與 (2)實際可以看到的網頁部份。
而在上半部你可以發現到頁面標籤會出現『Unit01-HTML 製作簡單網頁』的項目， 至於下半部則是實際網頁作者想要讓大家查閱的部份了。



現在我們看一下這個網頁的『原始碼』項目內容到底是怎樣？

滑鼠點選 右鍵 -> 檢視網頁原始碼 (鍵盤快捷鍵：Ctrl + U)


整個網頁一開始會宣告網頁的版本 (<!doctype html>)，然後全部的內文都會被 <html> ... </html> 所涵蓋，而在這裡面主要分為兩大區塊，一塊是頭部宣告 (<head> ... </head> )，一部分則是實際顯示於瀏覽器內部的身體區塊 (<body> ... </body>)。整個網頁的項目可以變成這樣：

			
<!doctype html>
<html lang="zh-Hant-TW">
<head>
	這裡是一些宣告的部份，包括標籤頁抬頭宣告、語系編碼宣告、樣式表外部呼叫、腳本外部呼叫等
</head>
<body>
	網頁要呈現的任何資料，都是貼在這裡！
	這裡涵蓋一大堆標記 (<tag>)也是這一章節的重點
</body>
</html>
一般網頁的製作方式
網頁製作通常會使用幾種方式來處理：
本教材預計使用 notepad++ 來實做網頁。請先在桌面建立一個www的資料夾，之後要做的網頁資料一律儲存在這裡。
安裝 notepad++

請到notepad++官網下載最新版。 https://notepad-plus-plus.org/downloads/

此教材的網頁製作並不會與伺服端做同步處理，所以安裝好notepad++後就可以製作網頁
在Window本機上撰寫第一個網頁
●　假設你已經安裝好 notepad++ ，請先在桌面建立一個www的資料夾，


●　完成後請點開www的資料夾，並在裡面建立一個名叫 web1 的資料夾，這一章所作的內容都會放在web1裡。



以上兩件事完成後就可以打開notepad++
開啟notepad++後，請先另存新檔，將檔案存到桌面的web1資料夾裡，檔名設定為unit01-1-1.html，建立好後畫面會長這樣：



接下來就可以開始直接編輯該檔案！每次新的檔案要撰寫時，你都應該要先加上這些資料： 在 body 的部份，先寫入兩段文字，分別是『My first web page』跟『我的第一個網頁』，最後按下儲存小圖示或鍵盤快捷鍵(Ctrl + s)。最終檔案內容大概長這樣：
以瀏覽器查看網頁
此教材並沒有與伺服器同步，所以在本機的www資料夾裡所做的網頁並不會被其他部電腦的瀏覽器所看到，只有自己這台主機可以打開這個網頁瀏覽。

請到桌面的www資料夾裡打開剛剛存的unit01-1-1.html的檔案。(這裡使用Google Chrome瀏覽)


打開後會發現幾個小問題：
  1. 網頁最上方的標籤頁是顯示檔名並沒有相關的標題內容
  2. 文字內明明是兩行，但是卻僅有一行將兩個中英文部份整合了
例題 1.1.C：加入頁面標籤抬頭以及編碼特性
  1. 在 html 的項目內，加上 lang="zh-Hant-TW"，宣告語言使用地區為台灣繁體中文區！
  2. 在 head 的項目加入 <title>...</title>，並且在 title 中間加入『我的第一個網頁』字樣
  3. 在 head 的項目內，加入 <meta charset='utf-8' /> ，宣告語系為 utf-8
  4. 在 head 的項目內，加入 <meta name="author" content="Your Name" /> ，宣告網頁作者
  5. 處理完畢之後，請到網頁刷新頁面，看看標題頁是否順利顯示出來了？
1-2： 編寫網頁的重要注意事項
要編輯網頁之前，許多重要的項目還是歸納一下比較好：
●　成對標記與獨立標記
HTML 的標記格式基本上有兩種，一種是成對標記，在兩個標記內加入受影響的元件，例如：
  • <title>標籤頁面抬頭</title> (受影響項目僅此內部文字)
即為成對標記，這種標記不可單獨存在～否則無法規範出受影響的元件範圍。

另一種標記則是獨立標記，例如前一個例題 1.1.C 裡面的語系編碼設定，那個 <meta ...> 就是獨立標記，這種標記並沒有 </meta> 的設定，而為了方便我們做編輯，可以在這種標記的結尾加上斜線，亦即底下的樣式即可：
  • <meta ... />
　
●　HTML 標記內的屬性名 (attribute name) 與屬性值 (attribute value)
HTML 提供了很多的標記來達成許多的目的，例如 <title> 標記用來設定網頁標題抬頭，而 meta 可以用來指定語系編碼資訊等。不過，每種標記內部還有某些特別的屬性 (attribute) 可以利用～例如 meta 內加上的 charset 就是用來指定語系的『屬性名』，這個屬性名可以使用等號來提供屬性值，例如 charset="utf-8" 這樣的格式。 一般來說，等號兩邊不要加空格，等號右邊最好用雙引號 (或單引號) 來將屬性值包起來，例如：
  • <meta 屬性名="屬性值" />
每一個標記都有特別的屬性名，所有的屬性名不是可以互相亂混用的。舉例來說 charset 可以用在 <meta ..> 內，但是當然不可以用在 <title> 內！
●　多重標記撰寫的巢狀標記方式
某些時刻我們會發現到標記內還有標記，例如段落標記裡面有加粗標記，此時的寫法應該是要如下才對：
  • <p><strong>被影響的文字</strong></p>
基本上，就是外層包內層的包餃子狀況，千萬不要寫成『<p><strong>被影響的文字</p></strong>』，這樣就變成互夾，看不出外層與內層！ 在某些特別的處理上，可能會出現莫名的錯誤喔！千萬要注意！
●　body 內文的縮排
所有寫過程式的朋友大概都知道，撰寫程式時，相同的函式應該放置到同一個縮排的環境中，同樣的，撰寫網頁時，也建議您務必要使用縮排的方式來編寫， 這樣未來檢查起來會比較有效率 (當語法出錯時，這是個好習慣！)。同樣以本教材的網頁版為例，查看原始碼的結果有點像這樣：

1.3： HTML 基礎標記使用
●　文字排版的標記
製作文書經常需要標題、內文段落以及斷行的使用，HTML 針對這些功能的標記有：
  • 標題：使用 <h1> ... <h6> 作為從大到小的標題之用；
  • 段落：使用 <p>...</p> 作為一個段落之用；
  • 斷行：使用 <br /> 作為斷行之用，斷行只是類似按下 [enter] 的功能，所以為獨立標記
  • 字體加粗：使用 <strong>被加粗的文字內容</strong> 影響當中的文字
  • 文字變化：使用 <font>...</font> 來處理，其中 font 的屬性名有幾個：
    • face='字體'，字體如 'Times New Roman', '細明體', '標楷體' 等等字體
    • color='顏色'，顏色可以用文字如 red，或用色碼，如 #252525
    • size='大小'，大小可以使用 1~6 的幅度，預設是 3 。
    • 注意，font 已經不被支援了，所以這些屬性名你稍微知道即可，未來不要用 font 喔！
例題 1.3.A：請以上述的各項標記，並利用 這個檔案 的內容，完成檔名為 /www/web1/unit01-3-1.html 的網頁，完成的內容應該要有點類似如下的畫面。

透過上面的練習，你會發現到幾件事情：
  • 透過 p 的段落標記，在這個段落的上、下方都會預留一行空白，以使段落清晰
  • 使用 h1...h6 也會與段落有相同的功能，上下方都會預留一行空白，此外，字體也會自動加粗
另外，你也會發現到許多事情很麻煩，就是 strong 可能經常需要與 font 搭配，而連 h1 裡面也需要使用 font 才夠更改字型。
這些都可以透過後幾堂課的 CSS 來處理掉，目前我們還是暫時用原始的 html 來處理，未來這些 strong, font 等等，都可以不要再使用了。
●　清單項目
某些時刻我們可能會需要條列示的將一些資料彙整起來，此時就需要使用到清單與清單項目了。
  • 無須編號的清單：使用 <ul><li>項目資料</li></ul> 包起來，至於 ul 比較重要的屬性有：
    • type="disc | circle | square"：預設顯示為實心圓形(disc)，也可以修改成為空心圓(circle)或實心方塊(square)

  • 自動編號的清單：使用 <ol><li>項目資料</li></ol>，至於 ol 比較重要的屬性有：
    • type="1 | A | a | i | I"：使用數字、字母、羅馬符號做編號的功能
    • start="數字"：從第幾號開始編號

  • 在 ul 或 ol 裡面，所有的文字、圖示或/和其他元件，都需要被 <li>...</li> 包起來才是正確的
例如，單純的項目清單不需要編號時，可以使用如下的原始碼來達成：
<ul>
　　<li>第 1 個項目</li>
　　<li>第 2 個項目</li>
　　<li>第 3 個項目</li>
</ul>
可以看見所有的文字都會被 <li> 包起來才對。


例題 1.3.B：請以上述的各項標記，並利用 這個檔案 的內容，完成檔名為 /www/web1/unit01-3-2.html 的網頁，完成的內容應該要有點類似如下的畫面。

項目清單是很常使用的 HTML 標記，尤其是用在導覽列 (就是一般引導你前往某些頁面的按鈕列) 上面。因此，你一定要了解到項目清單的應用才行！
此外，你也會發現到：
  • 項目清單 (ul, ol) 整個區塊的上、下方會預留一行空白，以示區隔；
  • 清單開頭基本上都會往右縮排大約 10~30 個像素之間
  • 所有的資料通通要放在 li 與 /li 之間才行！
●　清單項目的巢狀使用與圖片的嵌入方式
如果清單內還有清單時，應該要使用所謂的巢狀清單，這種清單格式需要特別注意結束點，以下列方式來處理： 
<ul>
	<li>第 1 個項目
	<ul>
		  <li>第 1 個項目內的第 1 個清單</li>
		  <li>第 1 個項目內的第 2 個清單</li>
		  <li>第 1 個項目內的第 3 個清單</li>
	</ul></li>
	<li>第 2 個項目</li>
	<li>第 3 個項目</li>
</ul>
要注意，第二個 ul 是被整個相對的 li 所包含的～不要將 放置到錯誤的地方了！這裡是最常見的錯誤喔！

如果想要在頁面中加入圖片的話，就得要使用 img 這個標記了：
  • 嵌入圖片：使用 img 這個標記，裡面有幾個重要的屬性名：
    • src='圖檔位置'：src 是 source 的意思，意思是這個圖檔的檔名 (或網址) 之意；
    • alt='圖片說名'：當圖片檔案太大時，暫時出現的圖片解說
    • width="數字"：要不要更改寬度的意思 (單位為像素)
    • height="數字"：要不要更改高度的意思 (單位為像素)
    • align="top | bottom | middle | left | right"：文繞圖的格式
    • border="數字"：要不要有框線的意思
    • 基本上，只要有 src 與 alt 就好，其他的通通使用 CSS 來取代處理～不要用傳統的標記屬性名
例題 1.3.C：請以上述的各項標記，並利用 這個檔案 的內容搭配 這個圖檔 ，圖檔請不要修改檔名，並將圖檔放置在 /www/web1/images/ 目錄下。完成檔名為 /www/web1/unit01-3-3.html 的網頁，完成的內容應該要有點類似如下的畫面。(先將圖檔下載，再以拖曳的方式將圖檔放置到 images 目錄上， 才可以透過 notepad++ 上傳圖檔喔！)

基本上，在 li 裡面應該不要使用大區塊的標記，例如 p 之類的標記就盡量不要用。因此，若需要斷行，就得要使用 br 囉！ 此外，還是請記得，獨立標記的使用上，結尾要加上 / 來結束喔，亦即 的模樣！
●　超連結的使用
1980 年代的 Internet 會火紅，是因為電子郵件的關係，而在之後，由於 Web 的發展，讓整個 Internet 更加火熱！那為什麼 Web 網頁會紅呢？就是因為『你只需要點擊滑鼠，不需要鍵盤輸入』的關係，這樣就可以使用滑鼠在不同的頁面之間連來連去，甚至還可以連結到外部網站， 於是就將整個 Internet 的網頁串連起來了。這就是超連結！
  • 超連結：使用 a 標記，這個標記的屬性名有底下幾個比較重要的項目：
    • href='網址'：href 後面接 URL 或者是檔名，當然，需要考慮絕對、相對路徑喔！
    • title='顯示在滑鼠上面的文字'：就是滑鼠移動到超連結上，就會出現的文字
    • target="_blank | _parent | _self | _top | somename"：連結到新頁面時，要使用哪個視窗開啟的意思。 一般不建議使用，但若要使用時，常用的是 _blank 喔。
例題 1.3.D：請使用 ul 清單項目，將上面的例題 1.3.A~1.3.C 最上方通通加上三個超連結，讓三個頁面可以直接按下超連結來顯示， 而不用持續在網址列輸入。因此得要重複編輯 unit01-3-1, unit01-3-2, unit01-3-3 這三個檔案的內容。完成的內容應該要有點類似如下的畫面。

要注意， a 是成對標記，而 <a ...>被顯示的文字</a> 這樣的語法，在 a 中間的，才會顯示到瀏覽器內。 a 裡面也不要包含太多資訊，通常是一小段文字、一張圖等等，當然不太可能是一整個段落～在使用上要留意才行！
1.4： 首頁與首頁檔名、區塊與非區塊標記
●　絕對路徑與相對路徑
當 unit01-3-2.html 要呼叫 dic.jpg 時，我們是這樣呼叫的
<img src='images/dic.jpg' ../>

因為 images 與 unit01-3-2.html 都在同一個目錄中，我們稱為同一層，因此可以直接呼叫！所謂的直接呼叫指的是檔名直接從檔名開始寫， 檔名前面沒有加上任何的特殊目錄名稱之故，這種方式就稱為相對路徑的寫法之一。

經常使用於檔名或 URL 撰寫的目錄還有底下這幾個：
●　入口首頁與首頁檔名的使用
一般我們的首頁都是名為 index.html 或 index.php，這是因為伺服器會主動提供該檔案 (index.html or index.php) 給瀏覽器解析了。此教材的做法沒有與伺服器做同步所以影響不大，但我們一樣以index.html這個檔案做為首頁，未來如果能將上述做的東西丟到伺服器時就不需要做太多修改。

例題 1.4.A：請在 www底下新增名為 index.html 的首頁檔案，這個首頁檔案內容中，請用 ul 規範兩個清單， 可以用你的大名、學校、科系等等 ( !!勿將個資打在上面!! )。之後在『上課連結』的段落後，再以 ul 或 ol 搭配 a 列出今天上課的所有內容連結。， 完成的內容應該要有點類似如下的畫面：

要注意， a 是成對標記，而 <a ...>被顯示的文字</a> 這樣的語法，在 a 中間的，才會顯示到瀏覽器內。 a 裡面也不要包含太多資訊，通常是一小段文字、一張圖等等，當然不太可能是一整個段落～在使用上要留意才行！
●　區塊標記與非區塊標記
從上面談到的許多標記之後，我們也可以發現到，每種標記的影響範圍是不一樣的。舉例來說，段落標記的 p ，無論這一段文字有多長， 只要看到 p ，就會在這段文字上、下方各保留一行空白，而且，即使這個段落的文字不到 10 個字，因此不滿一行，右邊的空白範圍依舊是留白保留給 p 的， 這就是所謂的區塊標記 (block)。而另外 br, a, img, font, strong 等標記，則是僅影響內容文字而已，並不會讓整個橫的切面空間全部佔滿， 這種就是非區塊或者是內部元件區塊 (inline-block) 標記。

區塊標記與非區塊標記的使用差異相當大，未來在學到新的 HTML 標記或 CSS 元素時，記得要特別留意這些資料是否為區塊標記， 因為區塊標記還有留白 (margin 與 padding) 還有定位可以使用，非區塊標記就不能這麼亂玩了！要注意！要注意！
1.5： 課後練習
  1. 項目清單的練習：使用 這個檔案 的內容來達成底下的需求：
    1. 檔名必須是 /www/homework/hw01.5.2.html
    2. 中文編碼請用 utf-8，頁面標籤抬頭請用『unit01 的 1.5.2 作業』
    3. 必須要使用的標籤，包括 h1, p, ul, ol, li 及 font 等
    4. 請務必保持本教材提到的編輯網頁注意事項，包括縮排、成對標記的注意事項等等。
    5. 完成的圖示會有點像底下這樣：
  2. 超連結搭配圖示表示的的練習：假設你常去的網站有四個，分別是：
    • http://www.google.com
    • http://linux.vbird.org
    • http://tw.yahoo.com
    • http://dic.vbird.tw/webdesign
    請先進行素材的取得：
    1. 先到上述的四個網站去，無論是使用截圖或者是使用該網站的小圖示 (icon 或 logo)，截圖大約為 100x30 像素的大小即可 (圖示大約是寬、高比為 100:30 即可，可以使用 width 調整寬度)
    2. 每個圖檔都不應該超過 100k 喔！小小的就可以！並且將該檔案取名為 hw01-5-3a.jpg, hw01-5-3b.jpg, hw01-5-3c.jpg, hw01-5-3d.jpg， 請先丟到 /www/images/ 底下
    接下來建立檔名 hw01.5.3.html 的檔案：
    • 裡面的 body 內部網頁說明先顯示『經常要去的網站』
    • 使用清單，每個清單裡面放置一個上面抓下來的圖，圖的寬度請指定為 100 像素，且加上 1 個像素的框 (border)
    • 對應的圖給予超連結，點選圖示就可以跑到下一個網站去
    • 當跑去下一個圖示時，請開啟名稱為 readme 的瀏覽器視窗名稱 (hint: target 的使用)
    最後完成的檔案有點像底下這樣：
  3. (20%)超連結定位 (id 功能) 的同一頁面書籤設計：使用 這個檔案 的內容來達成底下的需求：
    1. 檔名就取為 /www/homeworks/hw01.5.4.html
    2. 在網頁的最上方建立一個名為 top 的錨點 (id="top")
    3. 在每個 h1 的標籤上方，根據位置，給予 a1, a3, a3 這三個錨點 (共有 3 站)
    4. 每個『點我回去 Top』的項目變成超連結，點了會回到最上方的錨點
    5. 『按我去到第 1 站』超連結到 a1 錨點，依此類推
    最後完成的圖示會有點像這樣：
  4. 在 /www/index.html 最底下新增一個『Home Works』的 h1 標記，底下使用 ul 增加上面三個頁面的連結， 同時，上述三個頁面的連結最上方要多一個 p 的段落，內容就是『回首頁』，會回到 /www/index.html 當中。完成的圖示有點像這樣：
資料來源
鳥哥上課教材資料：網頁製作長期教材 - 網站規劃與設計 (HTML, CSS, PHP, bootstrap)