版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
计算机技术基础实验李简红
lijianhong@网站设计与制作HTML基础南京航空航天大学本门课程目标和课程项目展示课程目标学完本门课程后，你能够：能制作界面美观大方、简洁实用的静态网站，不含动态脚本功能。课程项目展示演示示例1：课程项目展示南京航空航天大学预习检查请详述HTML文档的基本结构。图像与文本的对齐方式有哪几种？通常使用哪个标签的哪个属性来创建超链接？南京航空航天大学本章任务制作图文并茂的“广告”页面查看源代码南京航空航天大学本章目标会使用HTML的基本结构创建网页会使用文本相关标签实现文字修饰和布局会使用图像相关标签实现图文并茂的页面会使用超链接相关标签实现页面间的跳转南京航空航天大学HTML文件的基本结构HTML文档的结构<HTML><HEAD><TITLE>我的第一个网页
</TITLE></HEAD><BODY>HelloWorld!</BODY></HTML>HTML网页<HEAD>头部部分<BODY>主体部分<HTML>…</HTML>标签标记HTML文档的开始和结束网页标题网页内容，可以是文本、图像等这部分包含文本、图像和链接。它包括在<BODY>…</BODY>
标签内这部分包括标题和其他说明信息。包括在<HEAD>…</HEAD>
标签内查看源代码南京航空航天大学使用记事本创建网页使用记事本创建网页使用记事本创建网页的步骤：打开记事本输入HTML代码保存为*.html或*.htm文件，注意格式问题打开网页预览效果演示示例2：如何在记事本里创建网页
南京航空航天大学<META>标签网页中出现乱码，如何消除乱码使其正常显示？使用<META>标签<HEAD><METAhttp-equiv="Content-Type"content="text/html;charset=gb2312"><TITLE>网页标题</TITLE></HEAD>
简体中文：gb2312繁体中文：big5纯英文网页：iso-8859-1可以避免页面中的乱码南京航空航天大学页面背景色或背景图像
<BODYbgcolor="#FFCCFF“background="back_image.GIF">HelloWorld！</BODY>为了使页面美丽大方，网页背景要尽量地浅……<BODYbgcolor="#FFCCFF“> HelloWorld!</BODY>……查看源代码网页背景色彩
网页背景图像
南京航空航天大学文本相关标签字体、字号标题标签<H1>－<H6><FONT>标签特殊符号行的控制段落标签<P>换行标签<BR>使用了<H2>…<H2>换段了设置了字体的大小和颜色换行了特殊符号南京航空航天大学字体、字号相关标签标题标签
<H#>...</H#>#=1,2,3,4,5,6说明：<H1>到<H6>字体大小依次递减……<BODY><H1>一级标题</H1><H2>二级标题</H2><H3>三级标题</H3><H4>四级标题</H4><H5>五级标题</H5><H6>六级标题</H6></BODY>……查看源代码H1到H6标签用于指定不同级别的标题南京航空航天大学字体、字号相关标签<FONT>标签特殊符号<FONTsize=“+2”
color=“red”face=“律书”> ...</FONT>字体的大小值字体的颜色字体的类型特殊字符转义码空格
引号(“”)"小于(<)<大于(>)>版权号(©)©南京航空航天大学字体、字号相关标签查看源代码......<BODY><P><FONTsize="+2"color="red">
手机充值、IP卡/电话卡
</FONT><BR/>
移动 | 100| 联通
| 50</P>Copyright©2007"淘宝网"Allrights.</BODY>……空格效果南京航空航天大学行的控制相关标签段落标签<P>段(Paragraph)(可以看作是空行)<p>换行标签<BR>换行<br>…….
<Palign="center">淘宝集市欢迎您！</P><Palign="left">淘宝网首届翠友会！<BR>……</P>……查看源代码换段了换行了南京航空航天大学图像标签常见的图片格式介绍图像类型优点缺点适用场合制作工具*.jpg体积小，比较清晰有损压缩、画面失真网页图片Photoshop*.gif支持Internet标准,支持无损耗压缩和透明度，很流行支持有限的透明度,效果不如别的图像网页图片Photoshop*.swf体积小,便于网络传输制作麻烦网页动画Flash*.bmp支持24位颜色深度，兼容性好不支持压缩容量大桌面墙纸photoshop南京航空航天大学图像标签图像的基本语法<IMGsrc="images/adv_2.jpg"width="300“height="150“alt="明星演唱会开幕">图像的位置图像的宽度图像的高度为图像添加的提示性文字……<BODY><IMGsrc="images/adv_2.jpg"alt="明星演唱会开幕"width="300"height="150"></BODY>……查看源代码鼠标移到图像上，出现的提示性文字南京航空航天大学图像标签图像与文本的对齐方式<IMGalign="middle">图像与文本居中对齐,还可以取top,bottom值….<BODY><Ahref="star.html"><IMGalign="middle"src="images/adv_2.jpg"width="180"height="95"border="0"/></A>请点击广告进入明星专区</BODY>……查看源代码图像和文本居中对齐南京航空航天大学小结1
编写如下图所示效果对应的html代码字号大小为3练习答案练习代码南京航空航天大学文字布局内容分隔<HR>标签项目列表和编号有序列表<OL>无序列表<UL>预格式文本<PRE>标签水平分隔线<HR>有序列表无序列表用了预先定义好的格式南京航空航天大学如何使用内容分隔<HR>标签<HRsize="5"color="red"width="300">线的厚度值线的宽度线的颜色……<BODY><HRsize="5"color="red"width="300"><HRsize="10"color="black"width="200"><HRsize="5"color="#0000FF"width="50%"></BODY>……查看源代码<HR>标签用于在页面上绘制水平线南京航空航天大学如何使用列表无序列表语法<UL> <LI>列表项内容</LI> ……</UL>有序列表语法<OL><LI>列表项内容</LI> ……</OL><H4>注册步骤：</H4><OLtype="1"><LI>填写信息</LI>
<LI>收电子邮件</LI>
<LI>注册成功</LI>
</OL>
新人上路指南
<ULtype="circle">
<LI>如何激活会员名？
</LI>
<LI>如何注册淘宝会员？
</LI>
<LI>注册时密码设置有什么要求？</LI>
<LI>支付宝认证</LI>
</UL>查看源代码南京航空航天大学预格式文本<PRE>标签
如何实现如下图所示的页面中的文字效果？使用<PRE>标签可以实现南京航空航天大学如何使用预格式文本<PRE>标签
<PRE><IMGsrc="images/QQ.JPG"width="159"height="133"align="LEFT">
腾讯-QQ币/QQ幻想-30元卡
一口价：26.45元运费：卖家承担运费剩余时间：5天宝贝类型：全新
卖主声明：货到付款，可试用10天！
</PRE>查看源代码HTML中代码格式与浏览器中显示效果一样南京航空航天大学页面链接<A>标签链接到其他页面<Ahref="register/register.html">[免费注册]</A>链接内容链接的地址<HTML><HEAD><TITLE>链接到其他页面</TITLE></HEAD><BODY><Ahref="register/register.html">[免费注册]</A><Ahref="login/login.htm">[登录]</A></BODY></HTML>单击”[免费注册]”之后链接到的页面查看源代码南京航空航天大学页面链接<A>标签在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？链接到其他页面相对路径指定从根目录到文件的完整路径。绝对路径指定相对于当前文件的文件位置。两种方式：相对路径和绝对路径南京航空航天大学页面链接<A>标签要链接到同一目录(C:\HTML)下的页面，可编写<AHREF=“Doc1.htm”>或
<AHREF=“C:\html\Doc2.htm”>相对路径名绝对路径名南京航空航天大学页面链接<A>标签要实现如下图所示的超链接效果，怎么办？演示示例3：演示锚链接的例子
使用锚记标签南京航空航天大学页面链接<A>标签链接到本页面锚记标签用于使用户“跳”到文档的某个部分HTML的NAME
属性用于创建锚标记
<ANAME=“marker”>主题名称</A>为达到这种跳转效果，请在HREF
参数中使用该标记
<AHREF=“#marker”>主题名称</A>演示示例4：演示锚链接的例子
<HTML><HEAD><TITLE>链接到其他页面</TITLE></HEAD><BODY><Ahref="#helpme">[新人上路]</A> ……<A
name="helpme">新人上路指南</A> ……</BODY></HTML>1、定义锚标记2、链接到锚标记所在位置南京航空航天大学页面链接<A>标签电子邮件链接要链接电子邮件，可在链接标签中插入mailto:邮箱地址
<Ahref="mailto:webmaster@">站长信箱</A>演示示例5：演示电子邮件链接
<HTML><HEAD><TITLE>电子邮件链接</TITLE></HEAD><BODY> ……<Ahref="mailto:taobaoWebMater@">站长信箱</A> ……</BODY></HTML>单击”站长信箱”链接后的输出结果任何正确的电子邮箱地址均可南京航空航天大学滚动<MARQUEE>标签说明：scrolldelay：表示滚动延迟时间，默认值为90。direction：表示滚动的方向，默认为从右向左。<MARQUEEscrolldelay=“100”direction=“up">
滚动文字或图像</MARQUEE>滚动延迟时间滚动对象的方向南京航空航天大学滚动<MARQUEE>标签查看源代码<MARQUEEscrolldelay="100">水平滚动</MARQUEE><MARQUEEscrolldelay="200"
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论