资源简介
(共18张PPT)
信息科技八年级上
网页的数据组织
第7课
通过观察和探究网页代码,认识HTML语言,掌握HTML文件的基本结构,能初步编辑HTML网页代码;在浏览网页的过程中,能理解超链接的作用。
学习目标
1、你知道网页是如何实现图片呈现的
2、超链接能链接哪些类型的文件
本课探究
1
HTML语言
HTML语言
你知道编写网页的语言吗?
网页设计常用的编程语言主要是HTML、CSS、JavaScript,其他还有JAVA、PHP、PYTHON、SQL、C/C++语言等。
HTML语言
什么是HTML语言吗?
HTML(HyperText Marked Language) 即超文本标记语言,定义了网页内容的结构和内容。用HTML编写的超文本文件称为HTML文件,HTML文件一般通过浏览器解释执行。在使用浏览器访问网页时,浏览器读取并分析HTML文件中的代码,根据解释的结果呈现网页内容。
HTML语言
查看网页代码:
HTML语言
活动一:尝试打开 一个自己熟悉的网站,使用浏览器的“开发人员工具”查看,对比观察网页显示内容和对应的HTML代码。
2
HTML标签
HTML标签
HTML文件的基本结构:
# 标记网页的开始#
# 标记头部的开始#
显 示 网 页 的 标 题 < /title><br/></head> # 标记头部的结束#<br/><body> # 标记网页正文开始#<br/>网页内容<br/></body># 标记网页正文结束#<br/></html> # 标记网页的结束#<br/>HTML标签<br/>代码理解:<br/>HTML标签<br/>教你一招:<br/>居中对齐: <center></center><br/>网页背景色: <body bgcolor="颜色名称"></body><br/>字体格式:<font face= "字体名称" size= "字号数值" color="颜色名称"> 文字</font><br/>HTML标签<br/>活动二:根据小组“人工智能”主题网站的制作方案,用HTML语言编写网页首页的代码,尝试插入主题图片,并调试查看网页效果。<br/>3<br/>超链接<br/>超链接<br/>什么是超链接?<br/>超文本链接 (Hypertext Link)简称为超链接,可以实现从一个页面跳转到另一个页面或者跳转到页面的其他位置,实现文档互联、网站互联。在HTML文档中,链接元素可以是文本、图片等。<br/>超链接<br/>超链接的标签:<br/>建立超链接的标签为<a></a>, href属性的作用是设置链接的位置,是<a></a>标签必不可少的。<br/><a href="链接位置">链接元素</a><br/>超链接<br/>超链接的标签:<br/>谢谢大家</p>
<p class="introAll">展开更多......</p>
<p class="introAllHide">收起↑ </p>
</div>
</form>
<div class="entry-content clearfix">
<p class="asset-tit">
<img src="/images/asset.png" style="width: 20px;height: 20px;vertical-align: text-bottom;margin-right: 5px;">资源预览
</p>
<div class="asset-preview">
<img src="https://preview.21cnjy.com/f2/2024/03/44/44a2cc50b72e16141644e6d4cdaf30b4.png" style="max-width:800px;">
<img src="https://preview.21cnjy.com/f2/2024/03/01/01c51cffa4c622fc47faf2b235198f2c.png" style="max-width:800px;">
<img src="https://preview.21cnjy.com/f2/2024/03/25/255af4c37f37bc852d3e852ba52a1111.png" style="max-width:800px;">
<img src="https://preview.21cnjy.com/f2/2024/03/1e/1e309dc29c71e0b2ae3e4aa329c45e26.png" style="max-width:800px;">
<img src="https://preview.21cnjy.com/f2/2024/03/b4/b44248d794867fa293d0e6d8b95d02bb.png" style="max-width:800px;">
<img src="https://preview.21cnjy.com/f2/2024/03/c2/c2511682a78560671074f304f936425b.png" style="max-width:800px;">
<img src="https://preview.21cnjy.com/f2/2024/03/74/74ed6f95a18e485fe763f419d6bab32f.png" style="max-width:800px;">
</div>
</div>
<div class="entry-footer">
<div class="entry-bar">
<div class="entry-bar-inner clearfix text-center">
</div>
</div>
<div class="entry-copyright">
<p>缩略图、资源来源于二一教育资源库</p>
</div>
</div>
</div>
</article>
</div>
<aside class="sidebar">
<div class="widget widget_views">
<h3 class="widget-title">相关资源</h3>
<ul>
<li><a href="https://doc.21cnjy.com/p-21434089.html" title="第7课《网页的数据组织》教学设计(表格式) 2024—2025学年浙教版(2023)初中信息技术八年级上册">第7课《网页的数据组织》教学设计(表格式) 2024—2025学年浙教版(2023)初中信息技术八年级上册</a></li>
<li><a href="https://doc.21cnjy.com/p-21281776.html" title="【核心素养目标】第7课《网页的数据组织》课件+教案+素材-【浙教版2023】《信息科技》八上">【核心素养目标】第7课《网页的数据组织》课件+教案+素材-【浙教版2023】《信息科技》八上</a></li>
<li><a href="https://doc.21cnjy.com/p-21268643.html" title="浙教版(2023)八年级上册信息科技 7.《网页的数据组织》教学设计+课件+学习单">浙教版(2023)八年级上册信息科技 7.《网页的数据组织》教学设计+课件+学习单</a></li>
<li><a href="https://doc.21cnjy.com/p-19006835.html" title="第7课 网页的数据组织 教案4 八上信息科技浙教版(2023)">第7课 网页的数据组织 教案4 八上信息科技浙教版(2023)</a></li>
<li><a href="https://doc.21cnjy.com/p-19006832.html" title="第7课 网页的数据组织 教案3 八上信息科技浙教版(2023)">第7课 网页的数据组织 教案3 八上信息科技浙教版(2023)</a></li>
<li><a href="https://doc.21cnjy.com/p-19006830.html" title="第7课 网页的数据组织 教案2 八上信息科技浙教版(2023)">第7课 网页的数据组织 教案2 八上信息科技浙教版(2023)</a></li>
<li><a href="https://doc.21cnjy.com/p-19006826.html" title="第7课 网页的数据组织 教案1 八上信息科技浙教版(2023)">第7课 网页的数据组织 教案1 八上信息科技浙教版(2023)</a></li>
<li><a href="https://doc.21cnjy.com/p-18709267.html" title="第7课 网页的数据组织 教学设计 八上信息科技浙教版(2023)">第7课 网页的数据组织 教学设计 八上信息科技浙教版(2023)</a></li>
<li><a href="https://doc.21cnjy.com/p-23227351.html" title="【精品解析】第二单元 第7课 网页的数据组织 课堂练习 浙教版(2023)信息科技 八年级上">【精品解析】第二单元 第7课 网页的数据组织 课堂练习 浙教版(2023)信息科技 八年级上</a></li>
<li><a href="https://doc.21cnjy.com/p-18182493.html" title="浙教版(2023)八年级上信息科技第七课 网页的数据组织 课堂练习(含答案).docx">浙教版(2023)八年级上信息科技第七课 网页的数据组织 课堂练习(含答案).docx</a></li>
</ul>
</div>
</aside>
</div>
</div>
</main>
<script src="//static.21cnjy.com/js/underscore-1.8.3.min.js"></script>
<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swanInvoke.js"></script>
<script>
function jumpbaiduboxapp(el){
if (navigator.userAgent.toLowerCase().indexOf('baiduboxapp/') >-1){
window.swanInvoke({
appKey: 'LYaggHHMnhIO7GgfWsVcMKQKoRjCXLqq',
path: 'pages/zydown/zydown',
query: {
id: el.attributes['ownattr'].nodeValue
}
});
return false;
}else{
return true;
}
};
;(function(){
var ua = navigator.userAgent.toLowerCase()
var isWXWork = ua.match(/wxwork/i) == 'wxwork';
var isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger';
var isMobile = isDesktop = false;
if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i))
{ isMobile = true; } else { isDesktop = true; }
var isAndroid = ua.indexOf('android') > -1 || ua.indexOf('Adr') > -1;
var isOS = ua.indexOf('iPhone') > -1 || ua.indexOf('iPad') > -1 || ua.indexOf('Mac') > -1;
if (isWeixin) { }
if (isAndroid) { }
// 标题固定fixed
var $fixedTit = $('#J_FixedShowDetailTit');
var fixed_tit = function () {
var titIsShow = $(window).scrollTop() > 179;
if (titIsShow) {
$fixedTit.animate({ top: 0 }, 300);
}
else {
$fixedTit.animate({ top: '-200px' }, 300);
}
};
$(window).on('scroll', _.debounce(fixed_tit, 50));
fixed_tit();
// 简介固定高度
var $height= $('.assets-intro').height();
if($height == 480) $('.introAll').show();
// 收缩
function toMore(el){
var flag = el == '.introAll' ? 1 : 0;
var overflow = flag ? "auto" : "hidden";
var maxHeight = flag ? "inherit" : "480px" ;
var className = flag ? ".introAllHide" : ".introAll";
$(el).on('click',function(){
$('.assets-intro').css({
"overflow":overflow,
"maxHeight": maxHeight
});
$(el).hide();
$(className).show();
});
}
toMore('.introAll');
toMore('.introAllHide');
})();
</script>
<!--footer开始-->
<!-- 底部 -->
<footer class="footer">
<div class="container">
<div class="clearfix">
<div class="footer-col footer-col-logo">
<!-- <mip-img src="/just/images/logo-footer.png" width="60" height="60"></mip-img> -->
</div>
<div class="footer-col footer-col-copy ">
<ul class="footer-nav hidden-xs ">
<li><a href="https://www.21cnjy.com/help/">帮助中心</a> </li>
<li><a href="https://www.21cnjy.com/about/about_contact-us.php">联系我们</a> </li>
<li><a href="https://www.21cnjy.com/about/about_opinion.php">意见反馈</a> </li>
</ul>
<div class="copyright ">
2023 版权所有© 二一教育
<a href="https://beian.miit.gov.cn" target="_blank " rel="nofollow noopener noreferrer">粤ICP备11039084</a>
</div>
</div>
<div class="footer-col footer-col-sns ">
<div class="footer-sns ">
<ul class="footer-nav hidden-xs ">
<li>友情链接:</li>
<li>
<a href="https://yj.21cnjy.com/" title="阅卷软件系统">阅卷系统</a>
<a href="https://edu.21cnjy.com/" title="美文范文">优秀范文</a>
<a href="https://paike.21cnjy.com/" title="新高考走班">走班排课</a>
<a href="https://tiku.zujuan.com/" title="组卷网题库">组卷题库</a>
<a href="https://www.chujuan.cn/" title="组题出卷网">出卷网</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<mip-fixed type="gototop"><mip-gototop></mip-gototop></mip-fixed>
<mip-stats-baidu token="0280ecaa2722243b1de4829d59602c72"></mip-stats-baidu>
<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
<script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script>
<script src="https://c.mipcdn.com/static/v2/mip-gototop/mip-gototop.js"></script>
<script src="https://c.mipcdn.com/static/v2/mip-history/mip-history.js"></script>
<script src="https://c.mipcdn.com/static/v2/mip-fixed/mip-fixed.js"></script>
<script src="https://c.mipcdn.com/extensions/platform/v1/mip-cambrian/mip-cambrian.js"></script>
<script src="https://c.mipcdn.com/static/v2/mip-share/mip-share.js"></script>
<script src="https://c.mipcdn.com/static/v2/mip-form/mip-form.js"></script>
<script src="https://c.mipcdn.com/static/v2/mip-sidebar/mip-sidebar.js"></script>
<script src="https://c.mipcdn.com/static/v2/mip-vd-tabs/mip-vd-tabs.js"></script>
<script src="https://c.mipcdn.com/static/v2/mip-lightbox/mip-lightbox.js"></script>
<script src="https://c.mipcdn.com/static/v2/mip-ad/mip-ad.js"></script>
<script src="/assets/26c9d710/jquery.js"></script>
<script src="/assets/a0893c15/yii.js"></script>
<script src="/assets/a0893c15/yii.activeForm.js"></script>
<script type="text/javascript">jQuery(document).ready(function () {
jQuery('#w0').yiiActiveForm([], []);
jQuery('#w1').yiiActiveForm([], []);
});</script>
</body>
</html>