简单实用的HTML语法实例教学.doc

HTML 4.0 语 法 教 学在HTML语法中，大致上可以分为： 网页架构：主要网页主架构的介绍 分隔标签：也就是所谓的水平线 排版标签：针对标签的属性，可做适当的版面编排 字体标签：教导您设定文字的字体。 文字标签：教导您设定文字的颜色、行距、变化.等等。 影像标签：教导您如何在网页中，植入图像。 背景标签：教导您如何设定背景颜色或是背景图像。 连结标签：教导您如何设定超连结，以及开视窗的条件。 表格标签：教导您如何在网页中运用表格。 序列标签：教导您如何设定文字序列或图形序列。 表单标签：教导您如何制作可填写用的表单。 框架标签：可让同一个视窗由多个网页一起组成。 其他技巧：让您的整个网页背景可以让您设定为图片或是声音。4.1 网页架构网页制作教学BODY之间则为主要语法所在，也是网页的主要呈现部分。【标签解说】 以上看到的就是一篇最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被包起来的语法）集合起来的，透过浏览器的消化整理，就便成了美仑美奂的网页了。 简单而言，通常一份完整的网页包含了二个部份：抬头（HEAD）、文件本体（BODY）。也就是各位在上面所看到的以及。 在抬头的部份中，有另一组标签。打在这里面的文字会出现在浏览器视窗最上头蓝色部份里，当作一篇网页的主题。 您可能会发现，为什么我一直没提到这一组标签，嗯！因为它可有可无。这一组标签是告诉浏览器说：我是一份HTML文件喔！也就是说它是一个网页的格式啦！通常都包在网页的最上下两端，将所有的原始码都包起来。4.2 分隔标签【文字上的分隔标签】 或许你已经发现这个问题了：天啊！我不是在记事本里排版排得很漂亮，为何透过浏览器看起来一切都走了样？对啊！别太讶异，在网页的编排里，并不像汉书或WORD一样，只要拼命按Enter键或空白键，便能完成分段或分行，因为，HTML语言是不认识我们所谓的Enter键或空白键，所以不管您按了多少次的空白或Enter，浏览器都会当作没看见啦！ 1. 使用方法：强制断行标签、强制分段标签 2. 标签解说：我们在写文章时，有时候在特定的地方会强迫断行（），或是在写完某一段的时候便会分段（），写网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。 3. 使用范例： 原始码呈现结果 这是一个断行的范例看出来了吗？这是一个断行的范例看出来了吗？ 这是一个分段的范例基本上他会比断行还多空出一行这是一个分段的范例 基本上分段会比断行还多空出一行 【分隔线标签】 1. 使用方法：上一段文字内容下一段文字内容 2. 标签解说：利用这个标签便可产生一条横分隔线。另外，其有些属性分别说明如下： 3. 使用范例：一般用法尚未加任何属性。原始码普通分隔线呈现结果普通分隔线 4.颜色属性用法：原始码橘色分隔线呈现结果橘色分隔线 5.宽度属性用法：，其单位为px（像素），宽度亦可用百分比来作设定，如50%即意为宽度占萤幕50%。原始码宽度为240px的分隔线呈现结果宽度为240px分隔线 6.厚度属性用法：原始码厚度为5的分隔线呈现结果厚度为5分隔线 7.位置属性用法：，其设定值有三个，也就是置左align=left、置中align=center、置右align=right原始码靠右的分隔线呈现结果靠右的分隔线 8.阴影属性用法：，无设定值，只要将 noshade 加入即可，通常会配合颜色设定，效果较佳。原始码实心分隔线（无阴影）呈现结果实心分隔线（无阴影） 4.3 排版标签【文字置左、置中、置右】 1. 使用方法：老实说，刚刚我们学过的分段标签再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示： 4.4 字体标签4.5 文字标签4.6 影像标签4.7 背景标签连结时颜色用法：设定“按下连结”的颜色，也就是当您滑鼠按下那连结的瞬间所呈现的颜色。原始码这是标题 连结中文字 1.已连结颜色用法：设定“按下链结后”的颜色，也就是如果该连结已经有被按过了，那么就会呈现的颜色。如此的做法，是要让使用者容易识别到底哪些连结有去过了，哪些没去过。原始码这是标题 连结文字 4.8 连结标签4.9 表格标签4.10 序列标签4.11 表单标签4.12 框架标签4.13 其他技巧 网页配色及背景音乐首先是网页的底色，通常是白白的，要怎么做变化呢？可以做自己的背景图片。要注意一点，如果背景和文字颜色一样或者颜色相近，天啊那谁知道你在写什么呀？最好文字与背景颜色有对比，像敝人当初，网页背景是黑的，字是白的红的，就可以很明显的突显出文字。如果图片中有文字，也要尽量淡化，否则影响内容就不好啰！内容的东西颜色要配的适宜（除非你想要有奇怪的风格），不然像背景大红大红，太刺眼了，有人会想去吗？剩下的就让您自己配配看吧！然后是音乐，有人喜欢用bgsound标签可是用NetScape看就没有声音了最好用embed标签 这样就可以正常播放了唷 首页应有的特质及重要性1. About Open Page：打开browser看到网站的第一个部份，有人称之为Open Page(通常是首页的一半或三分之一)，这个部份应该包含网站的主功能(亦即使用者上这个网站最希望或者最可能做的事)，ex. 一进入A即可看到“Key word search”及“Search by category”，应该尽量避免让使用者还要使用mouse上下左右拉才能看到他(她)所想要的功能或资讯，有时资讯太多，在不得已的情况下，页面可以往下沿申，但切忌右左划面过大，不符一般人的使用习惯，也会造成列印上的困扰。2. 主题明确：Open Page应包含公司Logo、网站主题(最好是一段简短的Slogan，让使用者一看就知道这个网站主要功能或架站目的,ex. A上的The worlds best products directory for volume buyers)3. Navigation：让使用者很明确了解他(她)目前在网站的什么地方(或功能)，首页上应该有主要功能的连结，各个icon如果可能的话，尽可能加上一些纯文字的说明及link；至于icon或者link的摆放亦应有其相对应的逻辑，如与整个网站或大架构较为相关的，放在较外层，与目前执行的功能或页面较为相关的link应该放在内层；另外，最好能在首页上提供Site Map的连结，让使用者可以很快了解网站的架构；所有的link应该把握 intuitive , obvious , fast的原则。4. Color or image：对于颜色的采用，应该考虑到该网站的特性及与其它相关网站的区别，特别是首页的颜色配置，应该让使用者感觉很舒服、没有压迫感，但又不失其专业性，但切忌过度追求美感而牺牲其功能性，就公司目前的网站设计理念，应该是功能性的考量优于纯美术的考量，首页的设计最好设定在60k以内，而且不要用太多层的table。 5. Meta tag：该部份不会出现在前端的页面上，但网站规划时应该将该部份一并考量，做为网站登录时使用，网站上线时务必将相关资料加入。6. 其它：首页上应该有service account 及 联络资料 Meta Tag 的简介一般常用的格式如下： All Products Online这虽说不是meta的一部份，但是也不可忽略，总长度不要超过85个Character (约10个字)。 说明网站的格式及编码方式，另外这个功能也可以拿来说明网站的名称。 铲明整个网站的关键字，关键字间用逗点隔开，总长度最好不要超过1000个Characte