网页简单的建设.ppt

* * * * * * * * * * * * * * * * * * * * * * 《网页设计与制作》教学课件 尹明 任务2：手工编写HTML网页（10课时） 要求: 熟悉HTML语法和常用标记 能用记事本编写简单网页 （二）操作示范与知识讲解 1.1　手工编写网页的流程及步骤 启动记事本 输入HTML源代码 保存网页文件 运行网页文件 （二）操作示范与知识讲解 1.2　认识HTML 1、HTML中文意为超文本标记语言，是Internet上描述网页内容和外观的标准。 2、HTML文件是纯文本的文件格式，一般以htm或html为扩展名。 3、HTML的使用规范 FONT face=楷体_GB2312 size=3 标记 属性 属性 4、HTML文档的结构 html head meta name=“Description” content=“网页描述 meta name=“Keywords” content=“关键词1，关键词2，关键词3，…… title页面标题 /title /head body 页面主体内容 /body /html （二）操作示范与知识讲解 1、标题标记Hn/Hn 标题主要用于分隔大段文字，使网页显示的内容结构清晰，HTML提供六级标题，为H1到H6。 例如： HTML BODY H1一级标题 /H1 H3三级标题 /H3 H6六级标题 /H6 /BODY /HTML 1.3　HTML的常用标记 （二）操作示范与知识讲解 2、换行标记BR 例如： html headtitle换行标记/title/head body浣溪沙br / 一曲新词酒一杯，br / 去年天气旧亭台，br / 夕阳西下几时回。br / 无可奈何花落去，br / 似曾相识燕归来。br / 小园香径独徘徊。br / /body/html 1.3　HTML的常用标记 （二）操作示范与知识讲解 3、段落标记P /P 例如： html headtitle换行标记/title/head bodycenter p浣溪沙/p 一曲新词酒一杯，br/ 去年天气旧亭台，br/ 夕阳西下几时回。br/ 无可奈何花落去，br/ 似曾相识燕归来。br/ 小园香径独徘徊。br/ /center/body/html 1.3　HTML的常用标记 （二）操作示范与知识讲解 4、水平线标记HR hr size=? width=？color=？Align=？noshade 例如： html headtitlehr标记/title/head body hr size=3 / hr size=6 width=60 / hr size=6 width=60% / hr size=6 width=60% align=left‘ / hr size=6 width=60% noshade / hr size=6 width=60% color=red‘ / /body/html 1.3　HTML的常用标记 （二）操作示范与知识讲解 5、文字标记FONT/FONT font size=? face=? Color=?/font center/center设文字居中对齐 注意：颜色值有两种取值方式： ①color=英文②color=#十六进制RGB编码,例如： html bodycenter FONT face=楷体_GB2312 size=3欢迎光临/FONT FONT face=宋体 size=7欢迎光临/FONT/center /body/html 1.3　HTML的常用标记 （二）操作示范与知识讲解 6、无序号列表标记UL/UL UL type=? Li列表项1 Li列表项2 …… /UL创建无序列表 说明： 1、type用来设置某个项目的项目符号，可取值为disc，表示实心圆，默认值；取值为circle，表示空心圆；取值为square，表示实心或空心的方块（取决于浏览器）； 2、取值必须是小写字母。例如： 1.3　HTML的常用标记 （二）操作示范与知识讲解 html body 默认无序列表: uL LI列表项1LI列表项2LI列表项3 /uL 使用方块作为列表项标记的无序列表: uL type=square LI列表项1LI列表项2LI列表项3 /uL /BODY/HTML （二）操作示范与知识讲解 1.3　HTML的常用标记 7、序号列表标记OL/OL OL type=? Li列表项1 Li列表项2