案例九简单的HTML网页制作.
来源：动视网
责编：小OO
时间：2025-09-27 21:48:02
案例九简单的HTML网页制作.
案例九简单的HTML网页制作一．案例内容通过使用记事本工具，使学生掌握静态网页的基本制作方法，掌握HTML的基本语法。通过实训，要求：1．掌握记事本编写网页的方法2．掌握HTML基本语法3．掌握文档修饰的方法4．掌握文字排版的方法5．掌握段落排版的方法6．掌握列表的用法7．掌握图片的插入方法8．掌握超链接的使用方法9．掌握表格的绘制方法二．工作准备PC机，浏览器，Internet网络环境三．操作步骤1．在“我的电脑”中，新建一个html文档，并使用记事本工具打开。如图1所示。图1新建html文
导读案例九简单的HTML网页制作一．案例内容通过使用记事本工具，使学生掌握静态网页的基本制作方法，掌握HTML的基本语法。通过实训，要求：1．掌握记事本编写网页的方法2．掌握HTML基本语法3．掌握文档修饰的方法4．掌握文字排版的方法5．掌握段落排版的方法6．掌握列表的用法7．掌握图片的插入方法8．掌握超链接的使用方法9．掌握表格的绘制方法二．工作准备PC机，浏览器，Internet网络环境三．操作步骤1．在“我的电脑”中，新建一个html文档，并使用记事本工具打开。如图1所示。图1新建html文
案例九 简单的HTML网页制作
一．案例内容
通过使用记事本工具，使学生掌握静态网页的基本制作方法，掌握HTML的基本语法。
通过实训，要求：
1．掌握记事本编写网页的方法
2．掌握HTML基本语法
3．掌握文档修饰的方法
4．掌握文字排版的方法
5．掌握段落排版的方法
6．掌握列表的用法
7．掌握图片的插入方法
8．掌握超链接的使用方法
9．掌握表格的绘制方法
二．工作准备
PC机，浏览器，Internet网络环境
三．操作步骤
1．在“我的电脑”中，新建一个html文档，并使用记事本工具打开。如图1所示。
图1 新建html文档
2．在页面中，构建html基本结构，如图2所示。
图2 html基本结构
3．为页面加上标题栏信息，如图3所示。
图3 加入
<p>4．为页面添加红色背景，如图4所示。<p>图4 bgcolor属性<p>5．为网页添加背景图片，如图5所示。<p>图5 背景图片<p>6．为页面添加文字标题，如图6所示。<p>图6 <hn>标签<p>7．使用<font>标签，修饰页面最中的文字，如图7所示。<p>图7 <font>标签修饰文字<p>8．使用<b>、<i>等标签，对文字的字形进行设置。如图8所示。<p>图8 字形设置<p>9．使用<p>标签进行段落设置。如图9所示。<p>图9<p>标签设置<p>10．使用<br>标签进行换行设置。如图10所示。<p>图10 <br>标签设置<p>11．绘制水平线。如图11所示。<p>图11 绘制水平线<p>12．使用<ol>、<ul>、<li>标签制作列表，如图12所示。<p>图12 制作列表<p>13．使用标签插入图片。如图13所示。<p>图13 插入图片<p>14．使用<a>标签制作一个链接到新浪网的外部链接。<p>15．使用<a>标签制作一个内部链接。<p>16．使用<a>标签制作锚点链接。<p>17．在页面中制作一个简单的报名表。如图14所示。<p>图14 制作表格<p>四．案例关键点<p>1．注意html文件的扩展名。<p>2．网页制作也可使用dreamweaver工具开发。<p>3．尝试上网搜索更多的关于htm语言的属性知识。<p>主要参考目录<p>（1）胡道元，Intranet网络技术应用，清华大学出版社，2001年9月 <p>（2）黄志晖等，Internet操作实用教程，西安电子科技大学出版社，2002 年8月 <p>（3）柯宏力等，Intranet 信息网络技术与企业信息化，北京邮电大学出版社，2000年1月 <p>（4）张贵明，网页艺术设计与应用，高等教育出版社，2004年7月 <p>（5）潘维琴，网页设计与网站开发，高等教育出版社，2004年5月 <p>（6）魏善沛，电子商务网站开发与实现，高等教育出版社，2004年7月 <p>（7）张念鲁，Web程序设计教程，高等教育出版社，2004年7月<p>（8）太平洋电脑网论坛http://itbbs.pconline.com.cn/<p>（9）天极网http://homepage.yesky.com/<p>（10）洪恩在线http://www.hongen.com/pc/<p>（11）中国软件网http://www.csdn.net/<p>（12）网页制作学习园地http://www.g168.net/<p>（13）电脑爱好者http://www.cfan.com.cn/<p>（14）电脑报http://www.cpcw.com/<p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/dysph.js"></script></div>
<div class="downbox clearfix">
<div class="ico"><img src="https://js.51dongshi.net/tpl/pc2/images/document.png" alt="文档"></div>
<div class="txt">
<h4>案例九简单的HTML网页制作.</h4>
<div class="co">案例九简单的HTML网页制作一．案例内容通过使用记事本工具，使学生掌握静态网页的基本制作方法，掌握HTML的基本语法。通过实训，要求：1．掌握记事本编写网页的方法2．掌握HTML基本语法3．掌握文档修饰的方法4．掌握文字排版的方法5．掌握段落排版的方法6．掌握列表的用法7．掌握图片的插入方法8．掌握超链接的使用方法9．掌握表格的绘制方法二．工作准备PC机，浏览器，Internet网络环境三．操作步骤1．在“我的电脑”中，新建一个html文档，并使用记事本工具打开。如图1所示。图1新建html文</div>
<div class="tj"><b>推荐度：</b><div class="tj_stars_list"><i class="tj_stars tj_05"></i></div></div>
</div>
<div class="btn">
<a href="javascript:;" class="html2word" data-model="article" data-id="rccdsvaev" title="文档下载">
<b>点击下载本文</b>
<span>文档为doc格式</span>
</a>
</div>
</div>
<script>keji_detail_ga('article_content_bottom');</script>
<div class="tvideo_box tvideo_box_tab">
<div class="hd">
<ul><li class="on">热门焦点</li><script>keji_detail_ga('hot_jiaodian_tab_title');</script></ul>
</div>
<div class="bd">
<ul class="ult_jpic clearfix">
<script>get_hot_jiaodian_content('wz_hot_jiaodian',374,'hot',1);</script>
</ul>
</div>
</div>
</div>
<!--中间文章 end-->
<!--右侧专题 star-->
<div class="ult_zt">
<script>keji_detail_ga('article_right_top');</script>
<div class="ult_ztbox">
<h4>最新推荐</h4>
<ul class="tvideo_r_a clearfix">
<script>get_detail_right('wz_right_new',374,'')</script>
</ul>
</div>
<script>keji_detail_ga('article_right_middle');</script>
<div class="ult_ztbox">
<h4>猜你喜欢</h4>
<ul class="telist_rb clearfix">
<script>get_detail_right('wz_right_love',374,'')</script>
</ul>
</div>
<script>keji_detail_ga('article_right_new_bottom');</script>
<div class="ult_ztbox">
<h4>热门推荐</h4>
<ul class="tvideo_r_b clearfix">
<script>get_detail_right('wz_right_hot',374,'')</script>
</ul>
</div>
<script>keji_detail_ga('article_right_bottom');</script>
</div>
<!--右侧专题 end-->
<div style="display:none"><a href="https://www.51dongshi.net/wzztf/rccds/rccdsvaev/">专题</a>
</div>
</div>
</div>
<script src="https://js.51dongshi.net/plug/qrcode/qrcode.min.js"></script>
<script src="https://js.51dongshi.net/js/share.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/waypoints.min.js"></script>
<script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/icon_step.js"></script>
<style>
#qrcode{padding: 15px;background: #fff;}
</style>
<div id="qrcode" style="display: none"></div>
<script>new QRCode(document.getElementById("qrcode"), "https://m.51dongshi.net/eedfrccdsvaev.html");</script>
<iframe src="https://hits.51dongshi.net/?biao=ho_article&id=188237907" border="0" frameborder="0" style="width: 0px; height: 0px"></iframe>
<script src="https://js.51dongshi.net/js/shHighlighter.js"></script>
<link rel="stylesheet" href="https://jss.51dongshi.net/js/fffz/css/box.css">
<script id="fffz" data-domain="//www.51dongshi.net/index" src="https://js.51dongshi.net/js/fffz/fffz.js"></script>
<script type="text/javascript" src="https://jss.51dongshi.net/pcwz/tj.js"></script>
<div style="display:none"><script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?4b1ebb0298b66c8a109db070c4878833";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
<!--foot star-->
<div class="footer">
<div class="m_box">
<div class="footer_in">
<a href="#" target="_blank">产品服务</a>
<a href="#" target="_blank">发展历程</a>
<a href="#" target="_blank">企业资讯</a>
<a href="#" target="_blank">企业文化</a>
<a href="#" target="_blank">关于我们</a>
<a href="#" target="_blank">加入我们</a>
<a href="#" target="_blank">联系我们</a>
<a href="#" target="_blank">网站导航</a>
<a href="#" target="_blank">网站律师</a>
</div>
<ul class="ftrlist">
<li>
<a rel="nofollow" href="https://www.itrust.org.cn" target="_blank">
<img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo01.gif" alt="中国互联网协会"></a>
</li>
<li>
<a rel="nofollow" href="https://www.12377.cn/" target="_blank">
<img src="https://js.51dongshi.net/tpl/pc2/images/12377logo.png" alt="中国互联网举报中心"></a>
</li>
<li>
<a rel="nofollow" href="http://www.cyberpolice.cn/" target="_blank">
<img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo05.gif" alt="网络110报警服务"></a>
</li>
<li>
<a rel="nofollow" href="http://www.creditchina.gov.cn/" target="_blank">
<img src="https://js.51dongshi.net/tpl/pc2/images/creditchina.gif" alt="信用中国"></a>
</li>
<li class="last">
<a rel="nofollow" href="http://www.shdf.gov.cn/shdf/channels/740.html" target="_blank">
<img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo11.png" alt="中国扫黄打非网"><p>中国扫黄打非网</p>
</a>
</li>
</ul>
<div class="footer_co">
<a href="/" class="footlogo"><img src="https://js.51dongshi.net/tpl/pc2/images/logo.png" alt="动视"></a>
<p>Copyright © 2019-2025 <a href="/" target="_blank">51dongshi.net</a> 版权所有</p>
<p>
<a rel="nofollow" target="_blank" href="https://beian.miit.gov.cn/">赣ICP备2023002352号-34</a>
</p>
<p>违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务</p>
</div>
</div>
</div>
<!--foot end-->
<a href="#0" class="cd-top">Top</a>
<script type="text/javascript">
$(function(){
var _line=parseInt($(window).height()/3);
$(window).scroll(function(){
if ($(window).scrollTop()>100) {
$('.edu_top').css({'position':'fixed','top':'0','z-index':'99'})
}else{
$('.edu_top').css({'position':'relative','top':'0'})
}
})
})
</script>
<script type="text/javascript" src="https://jss.51dongshi.net/ga/all.js"></script>
</body>
</html>
