網頁創作/介紹
全球資訊網只是眾多網際網路服務之一。網際網路是計算機的網路。(“網”是“網路”的簡稱。)
網際網路提供了在全球範圍內傳遞資料包的方式。為了理解這些資料包,你需要服務:協議(一組規則)告訴你某個資料片段的含義,以及計算機程式(軟體)允許你根據這些協議訪問資料。
網頁是其中一項服務,電子郵件、FTP、種子、即時訊息等也是。所有這些服務都需要能夠理解其協議的特定程式,儘管一些程式可以與多種服務一起使用。例如,網頁瀏覽器可能也能夠從 FTP 站點下載檔案或管理電子郵件。
全球資訊網的建立是為了使在網際網路上查詢和交換文件更容易。在全球資訊網之前,如果你想透過網際網路提供一個文件(例如,一篇科學論文、一個笑話列表、一個食譜或你的簡歷),你必須把它放在一個 FTP 站點上,然後將該 FTP 站點的地址傳遞給其他人。
有了全球資訊網,你可以將地址嵌入到頁面中,而不是到處傳遞它。更重要的是,你可以透過將地址包裹在描述性文字中來隱藏實際地址。你不再需要在 FTP 客戶端中輸入一堆數字,然後從一個資料夾移動到另一個資料夾,直到你偶然發現一個名為 ppr_john.ps 的檔案,你可以建立一個名為“John 關於人造草坪的論文”的“連結”,它將直接帶你到所需的檔案。
HTML 代表“超文字標記語言”。但什麼是“超文字”呢?
網頁是文件。它們是計算機上的檔案。當在瀏覽器中顯示時,它們以“超文字”的形式顯示。檔案和計算機的定義超出了本教科書的範圍,但在繼續之前需要解釋超文字。
在計算機上,文字檔案就像列印一樣:就像書籍或雜誌一樣。你可以滾動瀏覽檔案,而不是必須翻頁,但文字的行為方式與列印時一樣。它只是停留在頁面上,你就可以閱讀它。另一方面,超文字具有額外的功能;主要是使用“超連結”。(“超連結”通常簡稱為“連結”。)連結是頁面的一部分,當用滑鼠點選(或在觸控式螢幕上用手指輕觸)時,會將讀者帶到文件的不同部分,或帶到完全不同的文件。通常,連結是可點選的文字部分,但它們也可以是影像。例如,點選目錄中的章節標題可以帶你到該章節;一個連結的短語可以帶你到腳註或參考資料文件以獲取更多資訊。
可能是對“超文字”的第一個描述出現在 1945 年,當時範內瓦爾·布什在《大西洋月刊》上發表了一篇名為“我們可能思考”的文章,文章中描述了一種名為“美美克斯”的未來裝置。他將該裝置描述為與圖書館電子連線,能夠從圖書館顯示書籍和電影。美美克斯還讓讀者能夠自動跟隨對所引用作品的引用。
然而,美美克斯不僅僅是向用戶提供連結資訊。它是一個建立連結和跟隨連結的工具。
蒂姆·伯納斯·李設計 HTML 的初衷類似:為科學家提供一種建立相互連結的大量作品庫的方法,併為該庫的使用者提供修改某些文件的方法:例如,添加註釋或連結。
伯納斯·李夢想的後半部分直到第一個維基“維基維基網”的發明才真正實現。維基頁面是一種特殊的網頁,允許讀者編輯它們。例如,本教科書是維基的一部分。任何人都可以在其網站上更改本教科書的內容。
由於超文字與普通文字截然不同,因此在撰寫超文字時需要考慮一些事情。
在超文字連結到另一個文件的地方,作者需要說明它連結到什麼。(毫無疑問,“點選這裡”是最糟糕的建立超連結的方式,因為它沒有告訴使用者任何關於連結文件的資訊。)
當超文字文件是更大整體的一部分(例如,一個網站)時,如果使用者能夠找出它在更大整體中的位置,通常對他們有所幫助。文件應該連結到主頁。主頁是構成網站“首頁”或目錄的網頁。主頁通常包含有關網站的資訊,並具有連結選單,允許使用者導航到網站的各個部分。
例如,一個主頁可能會說:“這是克拉倫斯·懷利的個人主頁”。這表明訪問者,那裡找到的網頁可能具有個人性質,很可能由克拉倫斯建立,並對克拉倫斯具有價值。
類似地,作為網站一部分的網頁通常使用統一的風格。由於達成統一的寫作風格並不總是容易或方便(想想一個有數十位作者的網頁),因此可以使用其他提示來告訴訪問者他們在哪裡。下一章將解釋其中一個提示。
將 Web 文件稱為“頁面”是一種隱喻。它們實際上並不是“頁面”,就像書中的頁面一樣。但是,透過將新事物和未知事物與舊事物和已知事物的相似特徵進行比較,可以有效地解釋新事物和未知事物的特徵。因此,隱喻可以是一種有用而強大的工具。然而,新事物和未知事物傳統上遭受了隱喻對主題的沉重衝擊。
有人說,當電視發明時,這種新媒介花了 50 年才擺脫“盒子裡舞臺”的束縛。直到 20 世紀後期,電視節目都是用攝像機對準舞臺(電視和電影術語中的“佈景”),只是將舞臺上發生的事情傳遞給觀眾。
奇怪的是,電視上可以做到但舞臺上做不到的事情,在第一批消費級電視機開始生產時就已經可以做到了:延遲廣播(現在錄製,稍後播放)、編輯節目、使用不尋常的視角、動畫、疊加影像等等。當然,有一些“革命者”使用了這些技術,但總的來說,隱喻(電視就像舞臺)束縛了這種新媒體。
即使在今天,新聞主播也可以坐在辦公桌後面,只穿內衣,因為他們知道攝像機永遠不會做觀眾在舞臺劇中不會做的事情。
今天,網路也受到了失敗隱喻的嚴重打擊。由於網路明顯與計算機相關聯,因此許多人將創作網頁與程式設計混淆在一起。由於許多網路內容一開始就是由使用圖形化網頁瀏覽器的人員編寫的,因此網頁設計通常被認為是一項圖形設計任務。(與普遍看法相反,第一個網頁瀏覽器顯示了影像並使用了早期的樣式表。 [1])
程式設計是建立計算機程式的藝術。計算機程式是告訴計算機做什麼的東西。通常,計算機程式是指令列表。例如,一名計算機程式設計師可以編寫一個程式,告訴計算機在螢幕上開啟一個視窗,並在左上角顯示一個大的粗體文字。
超文字文件可以實現為計算機程式。現代程式設計超文字的示例是 PDF,這是 Adobe 為在計算機網路和印表機之間分發印刷文件而建立的格式。但是,HTML,用於網頁的超文字語言,不是程式語言。相反,它是一種標記語言:它允許人們“標記”文件的結構。(您可能希望在稍後自己標記了一些網頁之後再重新閱讀本節。)HTML 是一種告訴 Web 瀏覽器文件的不同部分是什麼的方法。例如,網頁的一部分可以是段落,另一部分可以是列表。
將 HTML 視為一種程式語言意味著您將它的結構、標籤、標記視為對瀏覽器的指令。例如,您可能希望指示一段特定的文字應以大號粗體字列印。您可以為此使用 HTML 程式碼的標題,因為大多數圖形瀏覽器會將標題顯示為大號粗體文字。但是,您可能會遇到使用不會將標題顯示為大號粗體文字的瀏覽器的訪問者。那就是錯誤的隱喻陷阱圍繞著您關閉的時候。
需要記住的重要一點是,HTML 告訴 Web 瀏覽器頁面不同部分的是什麼,而不是它們應該怎麼看。
將 Web 視為圖形媒介是一個更為陰險的問題,因為它在很大程度上是一個正確的觀點。大多數網頁都是透過圖形瀏覽器瀏覽的。在這種情況下,網頁的圖形設計會對訪問者如何感知和接收該頁面的內容產生決定性影響。
問題不在於將 Web 視為圖形媒介,而在於我們對“圖形媒介”的假設。由於網頁通常顯示在計算機螢幕上,因此網頁作者經常設計具有特定尺寸的佈局網格。但是,並非每個人都可能使用相同的尺寸,而且訪問者幾乎不願意更改其視窗系統的大小以滿足網站作者的願望。
Web 可以顯示在各種各樣的裝置上,其中一些根本不是圖形化的:想想語音瀏覽器或觸控瀏覽器(盲人的盲文規則)。您需要調整您對什麼是圖形媒介的假設,才能編寫出好的網頁。
建立可以被各種型別的瀏覽器訪問的網頁的做法被稱為“可訪問性”。隨著 Web 的發展,可訪問性變得越來越重要。
很明顯,當我們希望從另一個更容易理解的發明的角度來看待 Web 時,我們需要謹慎行事,並清楚地界定我們比較的侷限性。
我想提出一些與之前一樣有用的隱喻,但它們的潛在危害較小。
與 Web 進行比較的最自然的媒體候選者無疑是其他網際網路服務。它們都彼此共享提供了一種讓人們無需編輯和出版商等中間人的干預就可以直接與其他人交談的方式。這種直接聯絡的可能性源於網際網路的底層協議。在網際網路上,每臺計算機都可以與任何其他計算機通訊。
在現實生活中,有許多其他系統以 Web 允許的自由形式方式共享資訊。試著想象一下,當你想要向陌生人宣佈社群聚會,或者當你想要與相對陌生人分享你的日常煩惱時,你擁有的所有可能性:信件頁面、公告板、筆友雜誌等等。會湧入腦海。
從本章中帶走的重要思想是,Web 是一種共享資訊的方式。在 Web 上執行程式或在 Web 上展示圖形設計並沒有錯。這些都是 Web 上被人們普遍理解和接受的用途。但是,您應該區分 Web 作為一種呈現資訊的方式以及資訊所採取的形式和形狀。
您的共享需求 -> 您共享它的方式 -> 觀眾。
1. 收集典型網頁的示例。它們如何融入 Web?它們扮演什麼角色?
2. 找到一個網頁。列出該頁面所有可能的使用者,並寫下他們如何體驗該頁面。他們會找到他們正在尋找的資訊嗎?他們會找不到哪些資訊?他們是否有透過超連結查詢更多資訊的簡便方法?
如果您在本課程中學習,請讓老師選擇一個網頁,並檢視學生可以提出多少個不同的受眾。
如果您獨自學習本課程,您可以訪問 http://www.google.com,並在其搜尋框中輸入一個隨機詞,然後啟用“我感覺很幸運”連結。我發現廚房用品的名稱通常會成為很好的“隨機”詞語(“勺子”、“肉桂”、“冰箱”、“爐子”等)。
3. 嘗試使用非圖形瀏覽器或 Opera 等瀏覽器(所有圖形功能都已關閉)來檢視網頁。如果此練習作為課程的一部分完成,請組成二人組:讓一名學生背對著,讓另一名學生大聲朗讀網頁中的內容。讓無法閱讀網頁的學生給出指示,看看使用該網站是多麼困難或容易。
4. 試著想出一個你想為其建立網頁或網站的主題。轉到搜尋引擎,嘗試找到有關此主題或類似主題的網頁。例如,如果你想為你的足球俱樂部建立一個網站,嘗試找到其他當地和國際知名俱樂部的網站。根據你的個人品味和意見,這些網站的作者做對了什麼?他們做錯了什麼?
有關答案,請參閱 問題和練習的答案。
上一步:需求 - 上層:目錄 - 下一步:建立簡單的頁面