HTML網頁基礎

不論你是網路原住民還是網路移民,身處網際網路世界的我們,每天都和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 隨堂測驗

對內容或是測驗有疑問?歡迎加入Facebook社團討論!

懶得看文字?這邊有課程影片: