網址裡的www是什麼?比爾蓋茲、貝佐斯靠它致富,發明它的人卻沒賺一毛錢

2022-03-22 12:40

? 人氣

超文本標記語言(HTML)

伺服器的回應通常使用超文本標記語言(HTML),它結合了內容及格式化資訊。HTML非常簡單,簡單到很容易使用你喜愛的文本編輯器(text editor)去製作網頁(若你使用Microsoft Word之類的文書處理,你必須把網頁儲存為純文字,而非預設的格式,並且加上一個詞尾「.html」)。HTML使用標籤(tags)來給予格式化資訊,標籤敘述內容,標記網頁區域的開頭與結束。

[啟動LINE推播] 每日重大新聞通知

一個迷你網頁的HTML看起來可能如<圖表10-1>所示,一瀏覽器把它顯示成如<圖表10-2>。

<圖10-1>:HTML基本格式(圖/商業周刊-《普林斯頓最熱門的電腦通識課》)
圖表10-1:一個簡單網頁的HTML(圖/商業周刊-《普林斯頓最熱門的電腦通識課》)

 

<圖10-2>:根據<圖10-1>code,瀏覽器顯示出的網頁(圖/商業周刊-《普林斯頓最熱門的電腦通識課》)
圖表10-2:瀏覽器顯示來自<圖表10-1>的HTML(圖/商業周刊-《普林斯頓最熱門的電腦通識課》)

<圖表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標題都以紅色斜體字呈現:

CSS(圖/商業周刊-《普林斯頓最熱門的電腦通識課》)
CSS(圖/商業周刊-《普林斯頓最熱門的電腦通識課》)

HTML和CSS都是語言,但不是程式語言。它們有規範的文法及語義,但沒有迴圈及條件述句,因此,你無法用它們來表述一個演算法。

這一節只展示足以消除網頁如何運作的神秘性的內容,想製作出你在商業網站上看到的那種精美網頁,需要相當的技巧,但基本的東西非常簡單,只需花幾分鐘研究,就能製作出像樣的網頁了。學習十幾個標籤,你就能看出多數純文字網頁是如何製作的,再多學十幾個標籤,就足以應付一個隨性的網頁設計者可能關心的東西。人工製作網頁滿容易的,文書處理軟體有一個「創造HTML」的選項,也有專門製作專業水準級網頁的程式,若你打算做嚴肅的網頁設計,你將需要這類工具,但了解基本概念及原理,總是有幫助。

關鍵字:
風傳媒歡迎各界分享發聲,來稿請寄至 opinion@storm.mg

本週最多人贊助文章