HTML網頁基礎

Posted by

不論你是網路原住民還是網路移民，身處網際網路世界的我們，每天都和HTML語言在一起，只是你未必察覺到這件事。Web 1.0的時代，我們被動地接收着別人提供的資訊，而Web2.0時，我們開始學著發出自己的聲音，而Web x.0的現在，所有人都兼具多重角色，在這個虛擬世界中交流著，所以，讓我們花一點時間來瞭解，一切網頁的基礎：HTML。

在整份HTML語法基礎中，我們分成21個單元來進行，第一個單元是”簡介”。

[單元一] 簡介

HTML的全名是：HyperText Markup Language，超文字標記語言。相較於原始書籍閱讀而言，由HTML所建構的網路世界，能夠帶給你交織連結、四通八達的資訊，打破傳統一頁接續一頁的閱讀習慣。

而標記語言，一個透過標記的方式，改變原先純文字資料的呈現方式。如同在閱讀書籍時的行為，我們會用紅筆畫下重點，會用螢光筆標示重要名詞，也會在文章旁寫下注解。透過標記的方式，你也可以讓原先單調的純文字資訊，轉換成豐富、多元的網頁。

常見的語言有：

  • 標記語言(Markup Language)：HTML、XML
  • 腳本語言(Scripting Language)：JavaScript、VBScript、PHP
  • 程式語言(Programming Language)：Java、Objective-C、C、C++

標記語言沒有邏輯，僅需熟悉語法本身。腳本語言開始有邏輯運算，但是講究效率、簡單，執行時相較程式語言，比較沒那麼嚴謹。而程式語言能夠執行複雜的邏輯，並且能在建構階段時，就抓出錯誤與警告，提高程式實際執行的安穩性。

標記語言，顧名思義就是一堆標記標籤(tag)，透過標記標籤來讓瀏覽器知道該如何呈現網頁。標籤由角形括弧所包圍，通常成對，分為開始標籤與結束標籤：


<p>This is a paragraph.</p>

目前由於我們是示範，所以看得見這些標籤，正常而言，在瀏覽器中，這些標籤都不會被顯示出來，瀏覽器就是靠這些標籤來用各種不同的方式來呈現一個網頁，如標題、段落、換行等。

[單元二] 結構

整份HTML文件以html標籤開始，也以html標籤作為結束，裡面主要分成兩大部分：

  1. head 頭：跟整個頁面相關的資訊會放在這裡，剛開始學習可以先忽略這個部份。
  2. body 身體：想要呈現給讀者看的資訊放在這裡，也是HTML主要的學習重點

所以，整體結構如下：

<html>
 <head>
 </head>
 <body>
 </body>
</html>

[單元三] 元件

HTML語言基本上只由以下三要素所構成：

  1. Tag 標籤：框住要作用的文字或是單獨存在
  2. Attribute 屬性：放在開始標籤中的附加資訊
  3. Value 屬性值：決定屬性的內容值，以雙引號標示

但除了三要素之外，其他語言看待HTML的時候，通常會用另一個單位來存取它，這個單位稱之為「元件」element。

元件是由開始標籤＋內容＋結束標籤所構成，所以例如以下片段：

<a href="http://MobileAPPTutorial.com">Go to learn app!</a>

開始標籤：<a href=”http://MobileAPPTutorial.com”>

內容：Go to learn app!

結束標籤：</a>

元件：<a href=”http://MobileAPPTutorial.com”>Go to learn app!</a>

然而，有些HTML元件沒有內容，例如<br />、<hr />，我們稱之為空元件(empty element)，一般而言，我們透過開始標籤與結束標籤來框住一段內容，但是在沒有內容的情況下，多數人會忽略結束標籤，而寫成<br>、<hr>。如果要符合XHTML的規範，每一個開始標籤都要搭配一個結束標籤，則會將沒有內容的元件在開始標籤中做結束，寫成<br />。

元件是可以以巢狀方式出現的，例如<p><b>hello</b></p>。

[單元四] 屬性

多數元件會有屬性，透過屬性來設定該元件的某項特質，例如表格的邊框是否存在、超連結的位置要連到哪裡、元件背景的顏色是什麼等。一般來說，屬性的值以雙引號標示，除非屬性值本身包含有雙引號，則會用單引號來做標示，例如：

<p name='Lady "GAGA" Yo'>Bad Romance</p>

你對以上內容有多瞭解呢？透過以下的測驗來考考自己吧！

HTML語法 PartI 隨堂測驗