超文本標記語言(HTML)
伺服器的回應通常使用超文本標記語言(HTML),它結合了內容及格式化資訊。HTML非常簡單,簡單到很容易使用你喜愛的文本編輯器(text editor)去製作網頁(若你使用Microsoft Word之類的文書處理,你必須把網頁儲存為純文字,而非預設的格式,並且加上一個詞尾「.html」)。HTML使用標籤(tags)來給予格式化資訊,標籤敘述內容,標記網頁區域的開頭與結束。
一個迷你網頁的HTML看起來可能如<圖表10-1>所示,一瀏覽器把它顯示成如<圖表10-2>。
<圖表10-2>中的維基百科標誌圖的圖檔留在原始圖檔,但它也可以留在全球資訊網上的任何地方。若無法存取到<img>這個圖像標籤裡的檔案名稱,瀏覽器將在這個標誌圖的位置顯示某個「錯誤的」圖像;對於這問題,可以使用一個方法來處理:「alt」是HTML的一個屬性,alt屬性指的是,在圖像無法顯示的情況下,就顯示代替文字。於是,<圖表10-1>中的「alt=」意指若無法存取到<img>這個圖像標籤裡的檔案名稱,瀏覽器將在這個標誌圖的位置顯示「Wikipedia Logo」文字。對於視聽障礙者的人,有一些網頁技巧可幫助他們,「alt=」是一個例子(譯註:幫助視障者的螢幕閱讀軟體可以閱讀「alt=」後面的那些文字,這樣,他們就知道頁面那個位置呈現的是維基百科的標誌)。
有些標籤的內容是自我獨立且完整的(self-contained),例如<圖表10-1>中的<img>;有些標籤有一個開頭和一個結束的標記,例如<圖表10-1>中的<body>和</body>。其他標籤如<p>在實務中不需要一個結束的標籤,但一個嚴謹的定義就需要一個結束的標籤</p>,我們在<圖表10-1>中使用到了。縮排及分行不是必要,但會使文本更易讀。
多數HTML文件也內含使用另一種名為「階層樣式表」(Cascading Style Sheets,CSS)的語言撰寫的資訊,使用CSS,可以定義樣式屬性,例如在一處定義標題格式,然後讓這格式應用於所有標題。以<圖表10-1>為例,我們把使用以下這個CSS,讓h2和h3標題都以紅色斜體字呈現:
HTML和CSS都是語言,但不是程式語言。它們有規範的文法及語義,但沒有迴圈及條件述句,因此,你無法用它們來表述一個演算法。
這一節只展示足以消除網頁如何運作的神秘性的內容,想製作出你在商業網站上看到的那種精美網頁,需要相當的技巧,但基本的東西非常簡單,只需花幾分鐘研究,就能製作出像樣的網頁了。學習十幾個標籤,你就能看出多數純文字網頁是如何製作的,再多學十幾個標籤,就足以應付一個隨性的網頁設計者可能關心的東西。人工製作網頁滿容易的,文書處理軟體有一個「創造HTML」的選項,也有專門製作專業水準級網頁的程式,若你打算做嚴肅的網頁設計,你將需要這類工具,但了解基本概念及原理,總是有幫助。