1-2 HTML 的基本架構
文章推薦指數: 80 %
上述範例的原始檔如下:. 原始檔(basic01.htm):. (灰色區域按兩下即可拷貝)
首先我們來看看這個網頁的標籤(Tags),每一個標籤都是由「」所包圍,例如上述原始碼中的,代表HTML網頁的開始,而則代表HTML網頁的結束。
在HTML網頁中,可大略分為「頭」和「身體」兩部分,茲說明如下: 「頭」的部分是由和兩個標籤所界定,大部分用於規範和整體網頁相關的資訊,這些資訊通常不會直接呈現於網頁內。
以上例來說,「頭」的部分還包含了
「身體」部分是由
事實上,每一個標籤都可以加上不同的屬性(Attributes),來改變瀏覽器對標籤的呈現方式。
以這個標籤為例,我們可以使用background來加入背景圖片,例如: Example(basicBgImage01.htm): 上述範例的原始檔如下: 原始檔(basicBgImage01.htm):(灰色區域按兩下即可拷貝)
當然,也可以讓背景重複一個直行,讀者可以自行改寫上述範例來達到此功能。
HintCSS是另一個網頁美工設計的重要主題,但我們在此先不深入探討。
請注意,標籤及屬性都沒有大小寫的區分,瀏覽器會用同樣的方式來呈現。
因此,要用大寫或小寫,完全看個人的習慣和喜好。
學習HTML,最主要就是在學習HTML的各種標籤和屬性,及其在瀏覽器內呈現的效果。
還好,基本的標籤並不是太多,所以並不難學。
很多人認為不需要學習HTML的標籤,因為只要用WYSIWYG(WhatYouSeeIsWhatYouGet,所見即所得)的HTML的編輯器(例如FrontPage、Dreamweaver、Word),就可以寫出一個漂漂亮亮的網頁了!這個觀念對非專業人士來說,完全沒有錯,但是對於要靠網頁來討生活的資訊系同學(或有志於此的其他同學)來說,就大錯特錯了,舉個例子來說,沒有一個商業網站,是用WYSIWYG的HTML編輯器製作出來的,因為若用此種編輯器,可能有下列問題存在:
在幾種主要的網頁瀏覽器(IE、Firefox、Netscape等)呈現的效果可能截然不同。
不方便插入JavaScript或VBScript的程式碼。
不方便插入ASP的程式碼。
HTML的原始碼不夠精簡,導致頻寬的浪費。
編輯器可能不完全是WYSIWYG,導致時間的浪費。
當然啦,使用這些WYSIWYG的編輯器也有優點,就是能夠快速製作,效果大致上也還好(如果你不是太挑剔),因而不必去瞭解HTML的各式各樣標籤。
但對本課程來說,因為最後網頁要內嵌JavaScript或VBScript的程式碼,光靠WYSIWYG編輯器不足以完成,因此各位同學一定要瞭解HTML的一些基本標籤和功能。
以下是試驗區,你可以直接填入HTML的內容,按「送出測試」後,即可在新網頁看到呈現的結果。
Example(htmlTest.htm):
HTML簡介與應用
延伸文章資訊
- 1網頁設計教學:軟體、範例與自學課程 - 張阿道
網頁設計師、軟體和平台 ; 程式語言, HTML, CSS, HTML, CSS, JavaScript, Sass ; 框架, Bootstrap, jQuery, Vue.js, React...
- 2網頁程式設計
(HTML 5編輯器)bluegriffon. 下載ftp Filezilla ftp. ftp上傳網址: im.hwai.edu.tw 帳 ... 瀏覽網址http://im.hwai.edu...
- 3撰寫第一個HTML 網頁範例
首先是如何撰寫第一個HTML 網頁出來,透過下面的簡單範例,你可以馬上寫出一個簡單的網頁,請先開啟記事本或是Notepade++ 程式碼編輯器,將以下程式碼複製貼上, ...
- 4網頁設計作品範例- Webs網頁設計
... 廣告網頁設計、動態背景網頁設計、動態文字網頁設計、超值網頁設計、專業網頁設計、購物網頁設計、電子商務網頁設計、各種RWD網頁設計作品展示. 標準網頁設計範例.
- 5網頁設計筆記-作業練習篇-期末作業首頁篇
本次練習共有一個html檔案,一個css檔案,一個放置圖檔的資料夾,分別命名為: ... 在本範例,接下來的單元分類將以article作區塊分類,每一個區塊皆以id命名,第一個 ...