偶看新闻消防水泵的检查要点:HTML 簡易教學
来源：百度文库 编辑：偶看新闻 时间：2024/05/04 19:14:33
你是否想过，我们每天看的网页到底是怎么做出来的呢？
有的网页只是单纯的文字、另一些网页有图片，还有些网页具有音乐、动画，我们要如何产生这些不同的网页？
暂且不谈动画，因为那需要一些特别的程式来制作；也不谈音乐，因为很多人厌恶看到网页中放音乐(我就是，常会被吓到)，如果只是要在网页中放入文字&图片的话，网页怎么制作出来的秘密早已存在于『检视原始码』之中。
且让我们在网页上按右键，选择『检视原始码』来看看网页是怎么做的吧。
图、在网页上按右键选择『检视原始码』
OMG，这是什么鬼？这些原始码到底在写些什么啊？根本看不懂啊！
图、诡异难懂的网页原始码
喔，不用担心，虽然这些原始码很难懂，但有很多是我们可以忽略的。把那些不需要了解的部份跳过去之后，剩下的东西就很清楚明白了。以前的人要写一个网页可能要自己去钻研这些部份，但是现在是部落格时代，我们一般使用者只是想写写部落格的话，根本不需要懂这么多内容就可以写部落格了。
『ㄟ，不对啊？我之前写部落格时，直接写就好了，根本没看过这些奇怪的东西也能写啊。』
是没错，现在的部落格系统确实都帮我们做的好好的，所以我们根本不必了解这些东西也可以写部落格，但是了解一点点网页最基本的知识会让我们写部落格时更方便。
因为部落格其实就是一个网页，只不过有程式帮我们处理一些比较麻烦的部份，但本质上它还是网页没错，所以了解一些网页知识对写部落格会有帮助。当我们学了一些简单的网页知识后再回来看这些原始码，就多少可以看懂一些内容了。
不倒翁与网页
有没有看过不倒翁？怎么推它都不会倒。网页也有点像不倒翁。网际网路刚兴起的时候有gopher、BBS 等不同的服务，到现在gopher 已经没人在用了，BBS 只剩台湾比较盛行，但是网页却还是屹立不摇，应用的层面越来越广，真的是网路上的不倒翁。
除了在意义上像是个不倒翁外，网页的结构也与不倒翁长的很像，底下就是常见的不倒翁形式。
图、不倒翁(图片由rthryip拍摄 )
一个典型的不倒翁是从头顶算起，一直到与桌面接触的那个地方，这就是一个不倒翁的『范围』。不倒翁一般又可以分为头部(Head) 与身体(Body) 两部份，由头与身体这两个部份组成一个不会倒的娃娃。
图、不倒翁由Head & Body 组成
网页也是这样子的构造，一个网页也有『范围』，也是由头部& 身体所构成，跟不倒翁完全一个样。
与不倒翁不同的是，网页是由一种叫做HTML (HyperText Markup Language，超文本标示语言) 所组成，不像不倒翁是有实际形体的物品，那我们怎么知道这个网页的范围、头部与身体在哪边呢？
HTML 概念
我们在网页中，用的是<…> & 来判断范围&头部、身体在哪边，<…>显示某个部份开始，加上斜线的则代表这个部份结束，有开始有结束，我们就可以将各个部份区别出来了(所以<…> & 分别像是数学的左括弧&右括弧，除了少数的情况外，这左、右括弧几乎都是成对出现)。
因为网页是由HTML所组成，所以在一个网页中，我们用 & 来界定一个网页的开始与结尾。对了，要写最简单的网页只要用Windows内附的『记事本』程式就可以写了。请你打开『记事本』，我们来试看看。
执行『记事本』后，请你输入，然后按Enter 键换下一行，再输入，这样我们就定出了网页的范围了。
图、利用 & 定出网页范围
不过光是这样还不够，??只有范围却没有头& 身体，并不能构成网页，所以我们还要为网页塞入头& 身体。
要加入头，我们用 来标示网页的头部开始位置(没办法，电脑是外国人发明的，所以只能用英文啦)，有了开始位置后别忘了加上一个结束的记号，否则这个头的下巴不知道要长到哪边去。
同样的，利用 & 有斜线的 就可以标示出身体的部份了。
图、建立网页的头与身体
好，有头有身体了，那么这个网页要加哪些资料进去呢？我们先从头部开始加资料吧。
一般网页的头部会放这个网页的基本资料，比方说网页的标题(title) 就是放在网页的桃喀钉。让我们用
图、在网页的head 区输入网页标题
你可能有注意到我将
图、具有标题& 内容的网页
增加HTML 网页内容
让我们回到『记事本』程式继续增加我们的网页内容。因为我们要增加的是内容部份，所以整个 区都不用理它，我们专注在 区就好，我们要让这个网页的肚子里有墨水。
图、增加网页内容于 区
写了几行之后我们存档，再回到浏览器这边，按F5 重新整理画面，ㄟ，怎么刚刚新增的内容与原本的内容全都连成一串了啊？明明我在『记事本』中把它们分开成两段落啊。
图、新内容、旧内容连成一串，难以阅读
喔，是这样子的，还记得我们前面有提到说空白、空行都会被忽略吗？所以在浏览器中就将这些空白、空行忽略掉，而将文字串在一起了。
『那怎么办呢？串成一起很难阅读耶。』
没关系，我们可以用 & 这个指引，浏览器就知道要在那边分段了。
指令将文字分段
图、利用
当我们手动以 &
得到我们想要的分段效果
图、利用
使用 & 这个指令是从段落的英文
好，我们继续往前迈进，请把下面这一段怪文字复制起来，贴到『记事本』中。
你或许不知道这一段怪文字是要做什么的，没关系，反正当作是被我骗了也罢，就请你将这段文字贴过去吧。
图、将上述的怪文字贴入『记事本』中
好，将上述的文字贴好后，回到浏览器来看看，咦？出现相片了？！
图、利用 在网页中呈现相片
解释一下刚刚发生了什么事， 是一个指示浏览器呈现图片(image) 的指令，要呈现哪张图片呢？这就要看在
中多给的src 后面接的是什么网址了。
src 是source (来源) 的简写，所以src="http://goo.gl/lknYc" 这一段指令告诉浏览器要把http://goo.gl/lknYc 这张图片抓到我们的电脑来显示在萤幕上，所以在网页上就出现一张相片了。
此外，由于我们要做的指示都已经在中说完，所以
是少数几个不以做结尾的指令，这是比较特别的部份。
资料整理： ……
设定网页开始与结尾：……
头部：……
标题：
内容：……
段落：
图片：
嵌入其他网站的相片至网页中
好，我们知道利用 可以将图片呈现在网页上了，但是我怎么知道去哪边找到要呈现的图片网址？这就是问题所在了。
其实比较大的相片网站如PicasaWeb & Flickr 都提供了让相片嵌入网页的功能，我们只要点选那个功能选项，就可以得到图片的网址。我们马上来试看看。
比方说我把一张相片上传到PicasaWeb，可以在PicasaWeb 上看到这张相片。
图、一张上传至PicasaWeb 的相片
在PicasaWeb 上将画面稍微往下拉，可以看到『Link to this Photo』的选项，点一下它。
图、选择Link to this Photo 的相片连结功能
点选连结功能后，PicasaWeb 提供了两种连结方式。第一个是提供一个网址，让我们在浏览器中输入网址连结到这张相片来；第二种方式是让我们把相片嵌入(Embed) 网页或部落格中，直接在网页里呈现相片。
既然我们要的是在网页(或部落格) 中呈现相片，那当然就是选择第二种方式喽。把Embed Image 底下方格的文字复制起来(记得选择所要的相片大小)，把这些文字贴到『记事本』去吧。
图、在PicasaWeb 选择嵌入相片
到『记事本』中，把刚刚在PicasaWeb 复制的文字贴上……嗯，怎么好多看不懂的内容？
不用担心，这些看不懂的内容其实不重要(以后有机会再解释)，重要的是我们确实看到 出现在档案中(第三行最后)，那就存档到浏览器看看结果如何吧。
图、将PicasaWeb 提供的代码贴入网页档
嘿，在网页中真的出现图片了。我们真的从PicasaWeb 那边成功地把相片引用到我们的网页上面来了。
图、在网页上显示PicasaWeb 的相片
将PicasaWeb 相片嵌入部落格
PicasaWeb 的相片不只能放在网页上，也能放到部落格中(因为部落格就是一种网页)。
部落格是一个比较方便的网页系统，它已经帮我们把 & 、 & 、
而且现在的部落格系统都提供『所视即所得』编辑器，你可以把部落格当作Word 来使用，不需要像前面这样子自己慢慢输入 换段落、有的没有的，真是方便多了。
不过，因为我们从PicasaWeb、Flickr 这类网站拿到的都是网页原始码，不能直接贴到在部落格的编辑画面中，一定要进入原始码画面才能把相片嵌入码放到部落格中(这就是我为什么还是要讲网页原始码的原因)。
一般来说，部落格撰写内容的地方都会有个标示为HTML 或是< > 的按钮，按下这个按钮就可以编辑网页原始码。以我们学校的部落??格系统来说，当你按下工具列上的HTML 按钮时，就可以进入原始码画面编辑。
图、按HTML 钮编辑HTML 原始码
将刚刚在PicasaWeb 拿到的HTML 原始码贴入适当的地方。什么叫适当地方？比方说你可以把这些原始码放在两个 之间，届时图片就会出现在这两个段落中间了。
图、在HTML 原始码画面贴入相片网站提供的代码
回到所视即所得编辑区，刚刚贴入的代码已经成功的将相片放到我们的部落格来了。
图、在编辑器中看到PicasaWeb 的相片
按下发表，在部落格中就可以看到我们把PicasaWeb 上的相片放到部落格了。