《响应式Web图形设计》一1.1 为什么要学习HTML?

1.1 为什么要学习HTML?

响应式Web图形设计
作为一种最完善的体系,HTML可以让人们以更快、更有效的方式在全世界范围内交换信息。

1.1.1 HTML使得因特网更受欢迎

虽然因特网使得计算机能够通过网络相互连接,但是通过命令行或者基本的程序(如Gopher,见图1.1,或Archie)来上网的体验是不连续的。Web浏览器改变了这一切。

万维网基于HTML创建的页面和链接,使得Internet用户能够更容易地对内容进行操作。随着图像在浏览器中广泛使用,以及基础文本格式的普及,这种快速、令人沉浸的内容发布与共享,向更多的人敞开了大门。

手工编写完整网站

一些人认为,手工编程的时代已经一去不复返了。多亏了像WordPress、Drupal和ExpressionEngine这样内容管理程序包,你才可以创建一些网站,并在这些网站中自由地制作导航菜单或组织日志。把这些可重用的组件拼成一个网站是很简单的,但是创建一个博客网站并不是简单地装配好各个部分就可以了,因为每个人的需求和目标都是独一无二的。所以理解HTML可以帮助你更好地实现目标。

1.1.2 学习HTML,更好地理解网页设计

学习HTML的基础知识可以帮助你成为一个更出色的网页设计师,更快地将设想中的网页实现出来;即便不能,它也能让你知道为什么以及如何使用它。将某些编程语言和HTML结合使用,就能为网站创造更多的亮点。

1.1.3 学习HTML很容易

许多设计师通过自学HTML来让自己更加全面和专业。随着行业持续不断的发展,甚至连一些经验丰富的网站设计师也能通过别人了解到HTML更多的潜能。

和查看桌面程序和手机应用程序的代码相比,查看网页的代码非常简单。代码的透明使得学习HTML和网页设计的其他相关细节变得很容易。为了揭示HTML在网页中是如何运用的,你可以在浏览器中选择“查看源代码”之类的命令(通常可以在“文件”或“查看”菜单中找到),这样就能够准确地看到代码是什么样的(见图1.2~图1.5)。通过这种方法,很多初学者和专业人员都可以复制例子中的代码——我不会反对这种做法,反而要鼓励!


程序与标记 程序通过一些信息告诉软件去做一些事情,而HTML则可以被视为一种编程语言。然而,用计算机编程语言(如Java、C++、Python和无数其他编程语言)在处理更复杂的任务时,需要用到比HTML更多的专业技能和软件。因此,虽然HTML被称为一门语言,但是,它并不像别的编程语言那样令人却步。

分享你所学到的

在网页设计和开发行业中,许多方面的成果都是公开的。通过博客帖子、博客评论,以及GitHub、Dribbble或其他一些网站上的代码,可以与其他人一起分享你学到的东西。我们的行业以闪电般的速度前进着,而帮助别人就等于帮助自己。

!从模仿到掌握,不要停止

照搬喜欢的示例代码是一种很好的学习方式。需要注意的是,不要盲目地复制和粘贴代码和图像,并认为其是自己的。你不可以照搬从网站上找到的网页,并把它作为自己的作业交给老师——网页设计也一样(任何行业都是这样)。

网站词典

为了更透彻地理解这本书内容,你需要知道以下术语和关于网页设计的知识。

互联网包含了数以百万计的网站,每个网站都有一个唯一的网站地址,被- 称为资源定位符或URL(例如,http://www.google.com)。

  • 每个网站都包含许多相关内容的页面。
  • 网站中的每个页面都能通过桌面电脑或移动设备(如智能手机或平板电- - 脑)的Web浏览器来浏览(如Chrome、Internet Explorer、Firefox、Safari和Opera)。

网站访客从一个页面跳转到另一个网站的链接,也被称为超链接。

时间: 2024-09-08 13:11:17

《响应式Web图形设计》一1.1 为什么要学习HTML?的相关文章

《响应式Web图形设计》一1.2 HTML编程基础

1.2 HTML编程基础 响应式Web图形设计 在开始编写HTML代码之前,你还有需要掌握一些基本的术语. 1.2.1 文本编辑器 为了编写代码,你需要一个文本编辑器.如果你使用的是Windows系统PC,那么看一下你的电脑桌面上有没有一款如Notepad的基本编辑程序.如果是Mac,那么就是TextEdit.每台电脑中都有文本编辑器,无论它是什么名字,它的功能依旧. 首先,要特别注意的是,HTML必须保存在文本模式下,包括文件扩展名.html或.htm,最好在Unicode模式下. 专业的文本

《响应式Web图形设计》一13.4 多图像解决方案

13.4 多图像解决方案 响应式Web图形设计 如果你想对图像质量有更多把握,同时还可以不拘泥于一种图像格式,那么是时候该考虑下picture元素和srcset属性了. 13.4.1 picture元素 picture元素(见图13.17)是响应式图像社区(网址是http://picture.responsiveimages.org/)提出的新元素,旨在帮助网页设计师在用户可见的内容中指定合适的图像. 如果用户使用一个高清分辨率的大屏幕来访问网站,那么我们可以为之提供高清大图. 如果用户使用常规

《响应式Web图形设计》一13.3 自适应图像解决方案

13.3 自适应图像解决方案 响应式Web图形设计 为了处理自适应图像的大小问题,下面给出一些可以采用的方法. 13.3.1 另寻他法 一个看起来不太像解决方法的方法是:永远不要使用光栅图像,而要依赖其他格式的图像. 既然问题的核心是光栅图像的文件大小,那么如果我们可以使用其他文件格式或者技术来进行视觉呈现,自然也就可以减轻甚至消除自适应图像的麻烦了. 可以使用的技术有以下两种. SVG--矢量图像就是为了缩放图像而存在的(见图13.8).凭借前所未有的强大的浏览器的支持,如果你想要一张色彩简单

《响应式Web图形设计》一7.4 减小文件尺寸

7.4 减小文件尺寸 响应式Web图形设计尽管Photoshop可以导出用于网络的不同格式的优秀图像,但它通常并不能让文件变得尽可能小. 7.4.1 压缩光栅图像 Mac系统中用来最大限度优化图像的工具是 ImageOptim(见图7.24). 你只需要把图像文件拖曳到ImageOptim的窗口中,8种不同的压缩工具就会开始自动处理它们(见图7.25).用不着担心,这一压缩过程既不会有损画质,也不会削弱图像的视觉整体性. 压缩后,ImageOptim不会创建元图像的新副本.而是自动将老图像替换为

《响应式Web图形设计》一1.3 构建网页

1.3 构建网页 响应式Web图形设计通过元素,HTML为网页或文档提供了结构.这个结构是由标题.段落.块引用.超级链接和其他一些主要部分构成的.下面我们通过标记文本文件来创建一个HTML文档. 1.3.1 指定DOCTYPE 在你最常用的文本编辑器里,给第一行添加以下标签: HTML文档里的第一行就是文档类型,或者是文档类型声明.文档类型会告诉浏览器你正在使用HTML的版本,这样就能够决定浏览器如何渲染页面.对于本文档以及本书中的例子,除非另有说明,否则我们都将使用HTML5文档类型.在编写本

《响应式Web图形设计》一第13章 响应Web设计中的图像

第13章 响应Web设计中的图像 响应式Web图形设计在我们所处的时代,浏览器无处不在.现在,人们有许多设备可以连接到因特网,每一个设备都有用于网上冲浪的不同的浏览器和屏幕. 这样的多重用户体验对图像运用提出了前所未有的挑战.

《响应式Web图形设计》一第7章 为网页创建图像

第7章 为网页创建图像 响应式Web图形设计在这一章中,我们会首先学习借助Adobe Illustrator.Photoshop之类的图像软件来准备网页图像的技巧和技术.然后,我们将逐步尝试将图像导出为多种格式.最后,我们会探讨如何优化和压缩图像,以便网站加载更加迅捷.

《响应式Web图形设计》一第1章 了解HTML

第1章 了解HTML 响应式Web图形设计因特网上充满了丰富多彩的内容,只要能想到,你就能查到,它们都是像你我这样的普通人放在那里的.你也可以扮演创建者,为因特网创建内容.HTML是将想法展现给其他人的关键. HTML是超文本标记语言的缩写.尽管它听起来像一门深奥的计算机语言,但是它并不会为难使用者.理解HTML最好的方式就是将其想象为围绕文字和图像的一系列描述,并将它们展现在Web浏览器上.

《响应式Web图形设计》一7.5 总结

7.5 总结 响应式Web图形设计在本章中,我们研究了如何使用Illustrator和Photoshop这两款专业图像软件处理网页和移动设备的图像.高效的工作意味着需要高效运用这项工作所需要的工具.这包括创建图像,然后保证它们以最好的样貌从图像处理软件中导出,接下来,确保它们被压缩,以敏捷的速度发布到网站访客的眼前.在下一章中,我们将会对带透明度和阴影的图像进行研究.