HTML EP.2 Ocean

附件:HTMLPR.pdf (181KB)

在上一單元,學到了HTML的基本應用與架構,到目前為止,或許你可能對HTML還並不是那麼的熟悉,接下來的三個課程,我們將會學習與其的基本運用,以便於讓初學者的修改模板,我們將會有課程文件,提供教學下載,你可以在學習的過程中,配合我們的教學套件,一同學習以及操作。

第一課 基本語法


當我們已經了解HTML的結構了,我們要進一步地介紹,HTML的各種標籤,在上次的範例中,使用了<p>來當作範例,那麼,<p>標籤,又是什麼呢?通常,我們會在要顯示文字的地方,放上這個標籤來顯示文字,與其</br>是只能放在<p>裡面的,之所以放在裡面,當然也是具備有重大的意義的,在HTML打完一段文字之後,需要分行段,此時,就會用</br>直接讓文字換行,則下一行的文字可以在</br>寫下,特殊的</br>又與其他的標籤不同之處,是在於</br>他是一個單一標籤,不像是<p>,<p>和</p>需要由兩個標籤所包住裡面的內容,可是</br>卻不用。

下一個標籤是<h1>~<h6>這幾個標籤是按照標籤大小所依據標籤內文字大小的一種特殊標籤,<h1>是最大,則依序到<h6>是最小,這是最常見的標題標籤,我們通常會使用這種標籤來顯示網頁中最大的文字,雖然說是最大的文字,但是我們卻可以把這新標題文字,更改大小,變得比原來還要小,這部分可能要留到後續來學習了。

接下來的一個標籤,可能是一個全新可應用的標籤,稱為<div>這是網頁中最為常見的包覆HTML型態,網站的內部,幾乎都是由<div>一個包一個所組成的(就像是一個<div>包著一個<div>接著一層一層循序漸進的增加)我們用第一個範例「範例1」來測試看看

以下是「範例1」:

範例1

我們將<div>裡面,放入<p>

<div> <!--這裡放置的是DIV標籤,則內部放的是P標籤。-->
<p>這是範例1</p>
</div>

[備註]<!–與–>這是HTML裡面的註解,則裡面包的「這裡放置…」是註解文字,不會顯示在瀏覽器中,純最是給開發人員看的。

就如「範例1」中的,<DIV>裡面所包覆的標籤,可任意決定,不管你想放什麼標籤,都可以。

第二課  進階標籤 [連結介紹]


剛剛我們學完了基本標籤,是時候進一步的去了解它了,除了顯示文字的標籤,最重要的也就是日常生活上網最常見的,連結了。

連結的語法,也許是HTML裡面最短的標籤了,寫作<a></a>這標籤或許看起來很簡單,要如何加入連結呢?這標籤不僅僅單一是這麼的簡單,我們必須在<a>裡面加入href=”連結網址”,記得,把此段加入標籤內,不是加在</a>。

範例2

<a href="google.com" >連結要顯示的文字</a>

範例2,看似有點難度了,先別著急,讓我們依序來解析這個語法,<a>與</a>我們當然都知道,這是標籤,那麼,在<a>裡裡面的(此時<a>與</a>不同)「href=”google.com”」又是什麼意思呢?「href」來解釋上去,可以當作,連結,「=」(等於的符號)到、「”google.com”」Google.com那裏。可以作為這個解釋。所以「href=”google.com”」的意思也就是,連結(href)到(=)Google那裏(“Google”)。依照這個解析,我們把「href=”google.com”」分成了三段。

接下來,又要學一個與<a>相似的標籤了,沒有了這個標籤,整個網站就會變得乏味無趣,那就是網站中最繽紛色彩的<img>標籤,用於顯示圖片的標籤,看看範例3

範例3

<img src="images/圖片.jpg" alt="範例3的圖片" >

這個從<a>的觀點來看,似乎就簡單許多了,來一一解析範例三的標籤內容吧。這個標籤,與</br>一樣,屬於單行標籤,只有一個標籤所組成 (因為只有圖片),這個標籤為<img>,應該不用多說了,而其內容,可分為兩大部分,為A部分(src=”images/圖片.jpg”)與B部分(alt=”範例3的圖片”),則A、B兩個部分,又可以分為三部分。

A部分的解析,與<a>的href相當類似,「src」圖片位置,「=」在,「”images/圖片.jpg”」Images的資料夾裡面的「圖片.jpg」。

[註解]這次網址是不是很奇怪?「images/圖片.jpg」代表著是什麼意思?其實,那個斜線,代表著「在裡面」的意思。因此解析為images資料夾裡的「圖片.jpg」

這一課的最後一個範例,也又是在網頁整體美觀上最重要的一部分,也就是<link>標籤,通常<link>標籤,都是用於外部CSS樣式的連結,什麼是CSS,在這裡就大概的描述一下,CSS就是裝飾網頁的程式,目前只適用於HTML當中。接著看到「範例4」。

範例4

<link rel="stylesheet" type="text/css" href="樣式表.css">

這個標籤開始變得有點複雜了,從<link後面的rel=”stylesheet”這段就必須用背的了,這代表著連結到的檔案類型,「rel」讀取類型,「=」是,「”stylesheet”」類型樣式表。

type=”text/css”則是在讀取該連結檔案的時候所要讀取的格式(type的中文是類型),則依照範例4的範例「text/css」也就是,讀取的是文字(text)語法是(即斜線)CSS程式(CSS)。另一個href即是放置位置,與剛剛兩個範例一樣,也不多解釋了。

第三課 循序規律


怎麼說?從第一章節,到現在,我們所學的HTML,看似有個規律存在,的確,從外表看的確沒有那清楚,但是將所有標籤統整出來,會發現,其實真正有個隱藏的規律就藏在其中,請看「範例5」。這也是這一章節最後一個範例了。

範例5 [連結型標籤]

<標籤 連結="位置" 讀取類型="類型" id="ID名稱">

從上述的範例5很明顯地就出來了連結型標籤的所有規則,「連結=”位置”」也就是所屬的檔案位置,在連結型標籤中是最常見的,「讀取類型=”類型”」讀取檔案時所要使用的檔案類型與程式,在<link>裡最為常見。

另外,又多出了一個「id=”ID名稱”」又是什麼,從剛剛到現在一職以來都沒學過,當然,這也是為下一章節奠定好基礎,下一個章節我們將會學到CSS的始使用以及簡單修改,則為了要將CSS套用在那個標籤上(例如要給某個標籤一個裝飾的效果,如:給文字加上顏色),因此我們使用id來告訴瀏覽器說,這個標籤,有標註了一個id在標籤上,必須給它標籤該有的效果,請幫這個標籤加上效果。若標籤名稱為「CSSID」,在id上面,就要寫上「id=”CSSID”」,則範例5中的「id=”ID名稱”」所套用CSS的ID名稱,也就是「ID名稱」。

當然,在ID中,也不可能會用中文來標示(即使可以使用),雖然可以使用中文,但是對外國(例如美國、英國),他們的瀏覽器不支援中文,則中文會變成亂碼,此時ID有可能會無法使用。

在下一章節,我們將會學到CSS的簡單利用,嘗試在HTML新增CSS並且使用看看,另外,我們也會加入ID的更詳細教學內容,其實,ID不只適用於CSS當中,同時也可以用在連結中。

 

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *