H T M L4.0语法教学在HTML语法中，大致上可以分为：网页架构：主要网页主架构的介绍分隔标签：也就是所谓的水平线排版标签：针对标签的属性，可做适当的版面编排字体标签：教导您设定文字的字体。
文字标签：教导您设定文字的颜色、行距、变化.....等等。
影像标签：教导您如何在网页中，植入图像。
背景标签：教导您如何设定背景颜色或是背景图像。
连结标签：教导您如何设定超连结，以及开视窗的条件。
表格标签：教导您如何在网页中运用表格。
序列标签：教导您如何设定文字序列或图形序列。
表单标签：教导您如何制作可填写用的表单。
框架标签：可让同一个视窗由多个网页一起组成。
其他技巧：让您的整个网页背景可以让您设定为图片或是声音。
4.1 网页架构<HTML><HEAD><TITLE>网页制作教学</TITLE><Meta></HEAD><BODY>BODY之间则为主要语法所在，也是网页的主要呈现部分。
</BODY></HTML>【标签解说】以上看到的就是一篇最简单架构的网页。
没错，网页其实就是一堆标签（所谓标签就是指被<>包起来的语法）集合起来的，透过浏览器的消化整理，就便成了美仑美奂的网页了。
简单而言，通常一份完整的网页包含了二个部份：抬头（HEAD ）、文件本体（BODY ）。
也就是各位在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
在抬头的部份<HEAD></HEAD>中，有另一组标签<TITLE></TITLE>。
打在<TITLE></TITLE>这里面的文字会出现在浏览器视窗最上头蓝色部份里，当作一篇网页的主题。
您可能会发现，为什么我一直没提到<HTML></HTML>这一组标签，嗯！因为它可有可无。
这一组标签是告诉浏览器说：我是一份HTML 文件喔！也就是说它是一个网页的格式啦！通常都包在网页的最上下两端，将所有的原始码都包起来。
4.2 分隔标签【文字上的分隔标签】或许你已经发现这个问题了：天啊！我不是在记事本里排版排得很漂亮，为何透过浏览器看起来一切都走了样？对啊！别太讶异，在网页的编排里，并不像汉书或WORD 一样，只要拼命按Enter 键或空白键，便能完成分段或分行，因为，HTML 语言是不认识我们所谓的Enter 键或空白键，所以不管您按了多少次的空白或Enter ，浏览器都会当作没看见啦！1. 使用方法：强制断行标签<br>、强制分段标签<p>2. 标签解说：我们在写文章时，有时候在特定的地方会强迫断行（<br>），或是在写完某一段的时候便会分段（<p>），写网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。
3. 使用范例：1. 使用方法：上一段文字内容<hr>下一段文字内容2. 标签解说：利用<hr>这个标签便可产生一条横分隔线。
另外，其有些属性分别说明如下：3. 使用范例：4.3 排版标签【文字置左、置中、置右】1.使用方法：老实说，刚刚我们学过的分段标签<p>再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：4.4 字体标签4.5 文字标签4.6 影像标签4.7 背景标签连结时颜色用法：<body alink="颜色码">设定“按下连结”的颜色，也就是当您滑鼠按下那连结的瞬间所呈现的颜色。
原始码<html><head><title>这是标题</title></head><body alink="#0099ff"><a href="index.htm">连结中文字</a></body></html>已连结颜色用法：<body vlink="颜色码">设定“按下链结后”的颜色，也就是如果该连结已经有被按过了，那么就会呈现的颜色。
如此的做法，是要让使用者容易识别到底哪些连结有去过了，哪些没去过。
原始码<html><head><title>这是标题</title></head><body vlink="red"><a href="demo1-10-6.htm">连结文字</a></body></html>4.8 连结标签4.9 表格标签4.10 序列标签4.11 表单标签4.12 框架标签4.13 其他技巧■ 网页配色及背景音乐首先是网页的底色，通常是白白的，要怎么做变化呢？可以做自己的背景图片。
要注意一点，如果背景和文字颜色一样～或者颜色相近，天啊～那谁知道你在写什么呀？最好文字与背景颜色有对比，像敝人当初，网页背景是黑的，字是白的红的，就可以很明显的突显出文字。
如果图片中有文字，也要尽量淡化，否则影响内容就不好啰！内容的东西颜色要配的适宜（除非你想要有奇怪的风格），不然像背景大红大红，太刺眼了，有人会想去吗？剩下的就让您自己配配看吧！然后是音乐，有人喜欢用bgsound标签<bgsound src="music.mid">可是用NetScape看就没有声音了最好用embed标签 <embed src="music.mid">这样就可以正常播放了唷～■ 首页应有的特质及重要性1.About Open Page：打开browser看到网站的第一个部份，有人称之为Open Page(通常是首页的一半或三分之一)，这个部份应该包含网站的主功能(亦即使用者上这个网站最希望或者最可能做的事)，ex. 一进入即可看到“Key word search”及“Search by category”，应该尽量避免让使用者还要使用mouse上下左右拉才能看到他(她)所想要的功能或资讯，有时资讯太多，在不得已的情况下，页面可以往下沿申，但切忌右左划面过大，不符一般人的使用习惯，也会造成列印上的困扰。
2.主题明确：Open Page应包含公司Logo、网站主题(最好是一段简短的Slogan，让使用者一看就知道这个网站主要功能或架站目的,ex. 上的The world's bestproducts 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 的简介一般常用的格式如下：•<Title>All Products Online</title>这虽说不是meta的一部份，但是也不可忽略，总长度不要超过85个Character (约10个字)。
•<meta http-quive="content-type" content="text/html; charset=iso-8859-1"> 说明网站的格式及编码方式，另外这个功能也可以拿来说明网站的名称。
•<meta name="keyword" contents="关键字一, 关键字二, 关键字三, …..">铲明整个网站的关键字，关键字间用逗点隔开，总长度最好不要超过1000个Character (约44个字)。
•<meta name="description" contents="整个网站的描述….">铲明整个网站为何吸引人的地方，可用逗点隔开，总长度最好不要超过200个Character (约15个字)，若文章真的太长，可以切割成两个部分，较不重要的部分置入下一个Description。
•<meta name="robots" content=" ALL, NONE, INDEX, NOINDEX, FOLLOW, NOFOLLOW"> 此功能是要给搜寻引擎使用的，是要用来告诉Spider哪些网页是要去撷取的或不用去撷取的，一般都设定成All(内定值)。