语言入门

语言入门 靖江市第一高级中学叶露

HTML语言入门 • 什么是HTML • 也就是超文本标记语言

HTML语言入门 • 一、 HTML的基本结构 • 二、常用HTML介绍 • 三、HTML的发展

一、 HTML的基本结构

头部（head）提供关于网页的信息,此对标记之间的内容不会在浏览器的主窗口显示头部（head）提供关于网页的信息,此对标记之间的内容不会在浏览器的主窗口显示主体（body）部分提供网页的具体内容,此对标记之间的内容将在浏览器的主窗口显示 <html> </html> <head> <title>网页标题 </tilte> </head> <body> </body>

学生实践1： • 1.打开“附件”中的“记事本”，在记事本中输入html基本结构，并将文件保存在D:\mzd文件夹中，文件名为“index.htm”。 • (1).网页主体部分显示“美丽的马洲岛” • (2).添加网页标题“爱我靖江” • <title>爱我靖江</title>

思考 • 在IE浏览器中打开保存过的“index.html”，看看显示的结果是什么,通过这段代码，你能否发现HTML语言的一些简单规律及特征？

二、常见的HTML标记 • HTML标记：<html> </html> • 头部信息：<head> </head> • 主体标记：<body> </body>

学生实践2 • 1、请把马洲岛的介绍添加到网页中去。 • 如何分段 • <p> </p>段落标记 • 2、将“美丽的马洲岛”居中 • <p align=”center”>美丽的马洲岛</p> • 3、网页背景的设置 • 设置背景颜色 <body bgcolor=”grey”> • 设置背景图片 • <body background=”bj5.jpg”>

标签和属性 <水果> </水果> 苹果 <标签1>……</标签1> <title>欢迎</title> <水果颜色=“红”>苹果</水果> <水果颜色=“红” 形状=“圆”>苹果</水果> <标签1 属性名=“属性值”>……</标签1> <body bgcolor=“#ccdecc”>赤子之心环保社团</body>

学生实践3（一） • 1、设置网页背景音乐为“autumn.wav” • 在<head>区域插入标记 • <bgsound src=“声音文件路径及文件名”> • 例：<bgsound src=”autumn.wav”> • 2、在“美丽的马洲岛”标题和马洲岛的介绍中间插入水平线 • <hr> 水平线

学生实践3（二） • 3、在水平线下面插入图片 • <img src=”文件地址\文件名”> • 例：<img src=”2.jpg”> • 4、将“百度一下”四个字链接到www.baidu.com • <a href=http://www.baidu.com>百度一下</a> • 5、插入滚动字幕“马洲岛欢迎您！” • <marquee>马洲岛欢迎您</marquee>

HTML的发展 • 从1993到现在，HTML语言有着很大的发展，最新版本是HTML5

拓展 • 用frontpage打开index.html，对网页进行美化，并将相应代码填在下面的表格中

总结 • 1、HTML文档本身是文本格式的文件，所以HTML代码可由任何一种文本编辑软件如记事本，写字板和WORD等进行编辑，保存后，把文件的扩展名改为.htm或.html就可以用浏览器浏览到相应的网页

总结 • 2、HTML的基本结构 • HTML标记：<html> </html> • 头部信息：<head> </head> • 主体标记：<body> </body> • 3、常见的HTML标记

语言入门

语言入门

Presentation Transcript