网页创作/介绍
万维网只是众多互联网服务之一。互联网是计算机的网络。(“网”是“网络”的简称。)
互联网提供了在全球范围内传递数据包的方式。为了理解这些数据包,你需要服务:协议(一组规则)告诉你某个数据片段的含义,以及计算机程序(软件)允许你根据这些协议访问数据。
网页是其中一项服务,电子邮件、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. 试着想出一个你想为其创建网页或网站的主题。转到搜索引擎,尝试找到有关此主题或类似主题的网页。例如,如果你想为你的足球俱乐部创建一个网站,尝试找到其他当地和国际知名俱乐部的网站。根据你的个人品味和意见,这些网站的作者做对了什么?他们做错了什么?
有关答案,请参阅 问题和练习的答案。
上一步:需求 - 上层:目录 - 下一步:创建简单的页面