内容正文:
《探秘网页与代码》教学课件
人教版(新教材)初中信息科技 · 七年级全一册
2025 - 2026 学年
1.7.2013
大家好,欢迎来到今天的信息科技课堂。今天,我们将一起踏上一段奇妙的旅程,去探索一个我们每天都在接触,却又充满神秘的世界——网页与代码。准备好了吗?让我们一起揭开它的神秘面纱吧!
‹#›
回忆:我们的校园科技节
那些闪闪发光的瞬间 ✨
还记得去年热闹非凡的科技节吗?大家在校园里探索、实践,每一个精彩的瞬间,都定格成了我们共同的记忆。
创意发明
脑洞大开的小创造
机器人秀
精彩纷呈的表演
编程竞技
思维的巅峰对决
1.7.2013
在开始今天的新课之前,让我们先来回忆一下去年学校举办的校园科技节。大家还记得那些激动人心的瞬间吗?无论是自己动手制作的小发明,还是观看机器人表演时的惊叹,这些都是我们宝贵的回忆。这些精彩的画面,都被老师用相机记录了下来。
‹#›
新形式:校园科技节线上展
成果永久珍藏,精彩随时回顾
线下的活动虽然精彩,但时间有限。为了让更多的同学和家长看到我们的成果,老师把这些照片和文字整理成了一个线上展示网页。无论何时何地,只要有网络,大家都能重温当时的精彩,让美好的回忆永远定格。
随时访问
打破时空限制
永久保存
定格美好瞬间
轻松分享
全家共赏
1.7.2013
线下的活动虽然精彩,但时间有限。为了让这些美好的回忆能够永久保存并分享给更多人,老师把这些照片和文字整理成了一个线上展示网页。大家看,这就是我们的“校园科技节线上展”。通过这个网页,无论何时何地,只要有网络,大家都能重温当时的精彩。
‹#›
思考与发现
对比线下照片和线上网页,大家发现线上展有哪些优势?
内容更丰富
不仅有静态的精美图片,还可以搭配详细的文字说明、清晰的分类导航,信息密度更高。
传播更广泛
打破了物理空间的限制,观众可以随时随地访问,也能轻松分享给家人朋友,受众无限扩大。
交互性更强
不再是单向的观看,观众可以点击链接跳转、进行搜索或互动,参与感和沉浸感更强。
提问:这样精美的网页,它的“背后”到底藏着什么秘密?它是如何被制作出来的呢?
1.7.2013
现在,请大家思考一个问题:和线下的照片相比,这个线上的网页有哪些优势呢?没错,它内容更丰富,传播更广泛,还能和我们互动。那么,这样一个神奇的网页,究竟是怎么被创造出来的呢?它的背后又隐藏着什么秘密呢?这正是我们今天要去探索的。
‹#›
今天的任务:探秘网页与代码
今天,我们将一起走进网页的世界,揭开网页制作的神秘面纱,探索网页与代码的奥秘!
01
认识网页的基本组成
探索浏览器中的页面,学习网页的头部、主体和页脚等关键结构,建立整体认知。
02
了解网页的“骨架”——HTML
学习HTML标签的概念,了解它是如何像骨架一样支撑起整个网页内容的。
03
亲手修改代码,改变效果
通过简单的代码修改练习,体验编程的魅力,见证代码改变网页外观的神奇时刻。
1.7.2013
今天,我们的任务就是“探秘网页与代码”。通过这节课的学习,我们将达成三个小目标:首先,我们要认识一个网页是由哪些部分组成的;其次,我们会了解支撑网页的“骨架”——HTML代码;最后,也是最激动人心的,我们将亲手尝试修改代码,看看能不能让网页发生神奇的变化!
‹#›
网页的“外衣”——基本组成部分
一个完整的网页,就像我们穿的衣服一样,有不同的部分。这些部分各司其职,共同构成了网页的“外衣”,让它看起来有序又美观。
网页标题 (Title)
网页的“眼睛”,简明扼要地告诉用户当前页面的核心主题与内容。
导航栏 (Nav)
网页的“地图”,帮助用户快速定位并跳转到网站的各个重要板块。
内容区 (Content)
网页的“躯干”,承载着网站的核心信息、产品介绍或服务详情。
页脚 (Footer)
网页的“鞋子”,通常包含版权声明、联系方式等辅助信息。
1.7.2013
首先,我们来看看网页的“外衣”,也就是它的基本组成部分。大家看这张图,一个典型的网页通常包括四个主要部分:
第一是“网页标题”,它就像网页的眼睛,让用户一眼就知道这是关于什么的页面。
第二是“导航栏”,这就像是一张地图,帮助大家在网站的各个板块之间跳转,不迷路。
第三是“内容区”,这是网页的核心部分,也是我们浏览网页最主要的目的,所有的新闻、产品介绍都在这里。
最后是“页脚”,虽然在最下面,通常包含了网站的版权信息和联系方式,也是不可或缺的一部分。
这些部分各司其职,共同构成了我们看到的完整网页。接下来,我们来逐一了解它们的功能。
‹#›
网页的“外衣”:各部分的功能(一)
01. 网页标题 (Title)
显示在浏览器的标签页上,是用户识别网页内容的第一视觉线索,直观地告诉用户当前页面的主题和核心内容。
02. 导航栏 (Navigation Bar)
如同网站的“地图”,通常包含多个功能链接。它引导访问者快速跳转到网站的不同页面或核心板块,帮助用户高效找到所需信息。
1.7.2013
我们先来看前两个部分。网页标题,就是浏览器最上方那个标签页上显示的文字,它告诉我们这个网页大概是关于什么的。而导航栏,就像是网站的地图,上面的每一个链接都能带领我们去到网站的不同地方,帮助我们快速找到想要的信息。
‹#›
网页的“外衣”:各部分的功能(二)
01. 内容区 (Content Area)
网页的核心部分,是用户浏览时最关注的区域。它用于展示网站的主要信息,如文章正文、产品介绍、图文混排内容、视频播放等,承载了网站的核心价值。
02. 页脚 (Footer)
位于网页最底部的区域,如同书籍的“封底”。通常包含版权声明、联系方式、网站地图、备案信息或其他导航链接等补充信息,是提升用户体验和提供信任背书的重要组成部分。
1.7.2013
接下来是内容区和页脚。内容区是网页的主角,我们看到的大部分文字、图片都在这里展示。而页脚,就像是网页的“封底”,通常在页面最底部,包含一些版权声明、联系方式等辅助信息。这四个部分共同构成了网页的完整结构。
‹#›
火眼金睛:找出网页的组成部分
请同学们观察一下我们熟悉的百度首页,它包含了哪些我们刚刚学过的网页组成部分?
(请同学们分组讨论并回答)
1.7.2013
理论学习完了,我们来个小测验。大家看这张百度首页的截图,谁能快速找出我们刚刚学过的网页标题、导航栏、内容区和页脚分别在哪里?大家可以和同桌讨论一下。
‹#›
网页的“骨架”——HTML代码
如果说网页的外观是“外衣”,那么支撑起这层外衣的“骨架”就是代码。
制作网页的基础代码叫做HTML,它的全称是“超文本标记语言”。
代码的编写:纯文本的逻辑构建
由标签、元素和属性构成,是浏览器能“读懂”的语言,定义了网页内容的结构与含义。
代码的呈现:视觉化的最终效果
浏览器将枯燥的代码“翻译”渲染,最终呈现为图文并茂、结构清晰的网页界面。
1.7.2013
我们已经了解了网页的“外衣”,那支撑起这件外衣的“骨架”又是什么呢?答案就是代码。专门用来制作网页的基础代码,叫做HTML,也就是“超文本标记语言”。
大家看,左边是一段简单的HTML代码,这是我们在电脑上编写的样子,主要是由各种标签和文字组成。右边,就是这段代码在浏览器里“翻译”出来并呈现给用户的网页效果。
所以HTML就是连接开发者和用户之间的桥梁,它决定了网页里有什么、它们在哪里、以及是什么样的结构。
‹#›
HTML的核心:“标记”
HTML 的核心作用就是“标记”内容。它就像给内容贴上分类标签,通过一对对特殊的符号,清晰地告诉浏览器:
这是标题
定义内容的层级与主次,让结构一目了然
这是图片
插入视觉元素,丰富页面内容与表现力
这是链接
建立页面之间的联系,实现全网跳转
💡 这些赋予内容意义的特殊符号,我们称之为:标签 (Tag)
<h1> 这是一个大标题 </h1>
👆 标题标签:用于定义页面最重要的标题层级
<p> 这是一段普通的文字段落。 </p>
👆 段落标签:用于定义正文等普通文本内容
1.7.2013
那么HTML是如何工作的呢?它的核心思想就是“标记”。想象一下,你在看一本漫画书,作者会用不同的对话框来区分谁说的话。HTML就像作者,它用一对对叫做“标签”的特殊符号,来告诉浏览器:“这段文字是标题”,“那张图是图片”。比如<h1>就代表这是一个大标题,<p>代表这是一个段落。
‹#›
HTML的基本结构:“盒子”模型
一个HTML文件就像一个大盒子,里面装着网页的所有内容。它由不同层级的标签组合而成,我们可以将它们形象地理解为嵌套的盒子结构。
<html> ... </html>— 最外层的大盒子
它是整个网页代码的容器,所有其他标签都必须放在这个大盒子里面。
<head> ... </head>— 网页的“后台”小盒子
存放网页的元数据和配置,如页面标题、字符编码,这部分内容用户一般看不见。
<body> ... </body>— 网页的“前台”小盒子
包含所有最终会显示在浏览器窗口中的内容,如文字、图片、按钮、视频等。
HTML 标签嵌套关系示意图
1.7.2013
一个HTML文件的结构非常规整,我们可以把它想象成一个“盒子”模型。最外面是一个大盒子`<html>`,里面装着两个小盒子:`<head>`和`<body>`。
`<head>`盒子里放的是网页的后台信息,比如标题、字符编码等,这些通常不会直接展示在页面上,但对于浏览器和搜索引擎非常重要。
而`<body>`盒子里放的就是我们最终能在网页上看到的所有内容,比如大标题、图片、正文文字、按钮等等。理解了这个结构,你就掌握了HTML的骨架。
‹#›
重要规则:标签要“配对”
大家注意观察,大部分HTML标签都是成对出现的,就像我们穿鞋子一样,必须一双一双的,缺一不可。
开始标签 (Opening Tag)
<h1>
结束标签 (Closing Tag)
</h1>(比开始标签多一个斜杠 /)
❌ 错误示范:结构断裂
<h1>这是一个标题(缺少结束标签,浏览器无法识别范围)
✅ 正确示范:完整包裹
<h1>这是一个标题</h1>(标签配对,逻辑清晰)
💡 结论:忘记写结束标签,浏览器会“糊涂”,整个网页的结构都可能变得混乱!
1.7.2013
写HTML代码有一个非常重要的规则,那就是标签要“配对”。就像我们穿鞋子,一定要穿一双一样。大部分标签都有一个开始标签和一个结束标签,结束标签比开始标签多一个斜杠。比如``和``。如果忘记写结束标签,浏览器就会“糊涂”,不知道标记在哪里结束,网页可能就会显示得乱七八糟。
‹#›
解锁常用标签:标题标签<h1> - <h6>
定义与用途
HTML提供了六个级别的标题标签,从最重要的<h1>到最次要的<h6>。
它们用于定义网页的结构层次,不仅影响文字的显示大小,更是搜索引擎优化(SEO)的关键。一个页面中建议只使用一次 <h1>。
层级视觉示意
H1- 一级标题 (最大/最重要)
H2- 二级标题 (次级章节)
H3- 三级标题 (子段落)
H4 - H6- 层级依次递减,字号逐渐变小。
代码与渲染效果
<h1>我的第一篇文章</h1>
<h2>1. 什么是 HTML?</h2>
我的第一篇文章
1. 什么是 HTML?
1.7.2013
接下来,我们来解锁一些最常用的标签。首先是标题标签,从`<h1>`到`<h6>`,一共有6个级别。`<h1>`是最大的一级标题,通常用于文章的主标题;`<h6>`是最小的六级标题。它们可以帮助我们构建网页的层次结构。合理使用标题标签不仅能让网页的结构清晰,方便用户阅读,也能让搜索引擎更好地理解页面内容,对SEO非常有帮助。在实际开发中,我们要注意标题的嵌套关系,不要随意跳级使用。
‹#›
解锁常用标签:段落标签 <p>
用于定义一个段落。浏览器会自动在段落前后添加空行,让文本结构更清晰、阅读体验更流畅。
代码示例
<p>这是第一段文字,介绍了校园科技节的盛况,展示了丰富多彩的科技体验和同学们的创意。</p>
<p>这是第二段文字,重点展示了机器人竞赛环节,参赛选手们沉着冷静的表现赢得了阵阵掌声。</p>
浏览器渲染效果
这是第一段文字,介绍了校园科技节的盛况,展示了丰富多彩的科技体验和同学们的创意。
这是第二段文字,重点展示了机器人竞赛环节,参赛选手们沉着冷静的表现赢得了阵阵掌声。
1.7.2013
第二个常用标签是段落标签`<p>`。用它来包裹一段文字,浏览器就会自动在段落的前后加上空行,让文章看起来更清晰、更易读。比如我们写作文分段一样,`<p>`标签就是网页里的段落分隔符。
‹#›
解锁常用标签:图片标签 <img>
用于在网页中插入图片。它是一个“单身”标签,不需要配对的结束标签,是让网页图文并茂的核心标签之一。
// 代码示例
<imgsrc="作品1.jpg"alt="科技小发明" />
src 路径属性
全称 source,告诉浏览器图片文件存储的具体位置(URL或本地路径)。就像在学校里,找教室需要知道准确的楼层和房间号一样,缺一不可。
alt 备用文本
全称 alternative,意为“替代者”。当图片因为网络、路径错误等原因无法正常显示时,将展示这段文字作为替代说明,对无障碍阅读也非常重要。
1.7.2013
想让网页图文并茂,就需要用到图片标签`<img>`。这个标签比较特殊,它是一个“单身”标签,不需要写结束标签。它有两个非常重要的属性:`src`用来告诉浏览器图片文件的位置,就像它的家庭住址;`alt`则是当图片无法显示时,显示的一段说明文字,非常有用。
‹#›
难点突破:图片的“地址” -src属性
文件路径示意图:准确的路径才能指向正确的文件
核心概念:图片的“定位器”
`src` (source) 属性的值就是图片文件的路径。就像寄快递要写对地址,路径必须准确无误,否则浏览器就无法加载和显示图片。
图片文件
你要找的同学
src 属性
班级+姓名 (地址)
浏览器
寻找同学的你
1.7.2013
`src`属性是初学者最容易出错的地方。大家可以把它想象成一个地址。你想找到一张图片,就必须给浏览器一个准确的地址。如果地址写错了,浏览器就像一个迷路的信使,找不到要送达的图片。所以,确保`src`路径的准确性至关重要。
‹#›
解锁常用标签:链接标签 <a>
标签用途
在HTML中,链接标签 <a> 是用来定义超链接的核心标签。它就像网页之间的桥梁,点击后可将用户从当前页面跳转到另一个网页、页面内的锚点位置或外部资源。
代码语法示例
<ahref="作品详情.html">查看详情</a>
•href 属性:是最重要的属性,用来指定跳转的目标地址(URL)。
页面效果展示
查看详情
浏览器会将标签包裹的内容渲染为可点击的链接样式,通常带有下划线,点击后即可跳转。
1.7.2013
网页之所以叫“网”,就是因为它有很多链接。创建链接需要用到`<a>`标签。它的`href`属性定义了点击后要跳转到的目标地址。通过`<a>`标签,我们就能把一个个独立的网页连接起来,形成一个庞大的网络。
‹#›
难点突破:标签的“嵌套”
标签可以像盒子一样,一个套一个,这就是“嵌套”。但要注意顺序,不能交叉!
正确示范
<div><p>这是正确的嵌套</p></div>
标签一一对应,像穿衣服一样层层包裹
错误示范
<div><p>这是错误的交叉</div></p>
标签交叉嵌套,会导致浏览器无法解析代码
1.7.2013
最后一个难点是标签的“嵌套”。标签可以像套娃一样,一个套在另一个里面。但是,嵌套的顺序必须正确,不能交叉。就像穿衣服,要先穿内衣再穿外套,不能把袖子交叉着穿。写代码也是一样,开始标签和结束标签的顺序必须严格对应,否则就会出错。
‹#›
回顾:网页是如何工作的?
01. 编写代码
开发者使用代码编辑器
编写 HTML 代码
02. 保存文件
将代码保存为
`.html` 后缀的文件
03. 解析代码
浏览器打开文件
读取并解析代码含义
04. 渲染展示
根据代码标记将内容
渲染成可视化的网页
代码编辑器➔HTML 文件➔浏览器解析➔呈现网页
1.7.2013
好了,学了这么多,我们来回顾一下网页到底是如何工作的。首先,开发者用代码编辑器写出HTML代码,保存成.html文件。然后,浏览器打开这个文件,读取并理解代码的含义,最后把它渲染成我们能看到的、图文并茂的网页。这个过程就像厨师照着菜谱做出美味佳肴一样。
‹#›
动手实践:修改代码,玩转网页
现在,轮到大家大显身手了!请打开老师提前下发的index.html文件,跟随引导完成以下修改任务。
🎯 任务目标
将一个简单的基础网页,通过修改标题、文本、图片等代码内容,改造成属于我们班级独一无二的活动展示页!
💻 准备好开始你的“程序员”首秀了吗?
1.7.2013
理论学习结束,现在是大家最期待的动手实践环节!老师已经为大家准备了一个基础的网页文件 index.html。你们的任务,就是通过修改代码,把它变成一个属于我们班级的活动展示页。相信自己,你们一定能做到!
‹#›
代码修改任务单
01
修改网页标题
找到 HTML 中的 <title> 标签,将其中的内容替换为:“我们班的校园活动展”
02
修改页面标题
定位到 <h1> 标题标签,更新内容为:“七年级(X)班文艺汇演精彩瞬间”
03
修改段落文字
找到正文内容中的 <p> 标签,填入文字:“这是我们班文艺汇演的优秀照片,记录了同学们的精彩表现!”
04
修改图片元素
更新 <img> 标签:将src属性改为老师提供的文件名(如show.jpg),并设置alt="文艺汇演照片"。
1.7.2013
这是我们的任务单,请大家仔细阅读。一共有四项任务,分别是修改网页标题、页面标题、段落文字和图片。大家需要找到对应的标签,然后把里面的内容替换成任务单上指定的文字。如果忘记了标签的用法,可以回头看看我们前面的内容。
‹#›
操作步骤 1:打开文件
01
定位目标文件
找到老师课前分发的index.html文件,这是我们编写网页代码的“起点”。
02
选择代码编辑器
在文件图标上单击鼠标右键,选择“打开方式”。
推荐使用:“记事本”或“Notepad++”,打开后即可看到网页的原始代码。
1.7.2013
第一步,我们需要打开文件。找到老师发给你的index.html文件,在它上面点击鼠标右键,选择“打开方式”,然后选择“记事本”或者“Notepad++”这样的代码编辑器。这样我们就能看到网页的源代码了。
‹#›
操作步骤 2:编辑与保存
01. 代码编辑
打开代码编辑器(如Notepad++),仔细阅读任务单要求,找到对应代码位置进行修改,确保语法正确。
02. 保存修改
完成修改后,点击顶部菜单栏的“文件” > “保存”,或直接按下快捷键Ctrl + S,确保所有更改生效。
1.7.2013
第二步,编辑和保存。在代码编辑器里,找到对应的标签,按照任务单修改内容。修改完成后,一定要记得保存!最简单的方法就是按下键盘上的Ctrl和S键。只有保存了,我们的修改才能生效。
‹#›
操作步骤 3:查看效果
01. 打开网页文件
在你的项目文件夹中,找到名为index.html的文件。
用鼠标双击它,系统就会自动唤起默认的浏览器,并在浏览器中打开这个网页。
02. 刷新页面看效果
(若已打开浏览器)
无需关闭再重新打开,在浏览器窗口内,按下键盘上的:
F5
页面就会刷新,立刻看到修改后的效果!
1.7.2013
最后一步,查看效果。保存好文件后,找到`index.html`文件并双击它,浏览器就会打开这个网页。如果你已经打开了网页,只需要按下键盘上的`F5`键刷新一下,就能立刻看到你修改后的效果了。是不是很神奇?
‹#›
开始你的创作吧!
请同学们开始动手修改代码。如果遇到问题,可以:
查阅教材
对照教材中的标签说明
寻找解决思路
请教同桌
小声讨论,共同分析
集思广益
询问老师
大胆举手,随时提问
老师就在你身边
1.7.2013
好了,步骤都清楚了,现在就请大家开始动手创作吧!这是一个探索和实践的过程,遇到问题是正常的。大家可以看看书,问问同桌,或者大胆地举手问老师。老师期待看到你们每个人独一无二的作品!
‹#›
成果展示与分享
邀请几位同学展示自己修改后的网页,一起来分享你的思考与收获!
代码重构
你修改了哪些标签?
回顾一下代码编辑过程,分享你尝试修改的HTML标签和属性,以及你为什么会做这样的选择。
视觉呈现
网页的效果发生了什么变化?
展示你修改后的网页界面,描述这些代码改动在浏览器中呈现出了怎样不同的视觉效果。
复盘总结
遇到的问题与解决方案?
在调试过程中遇到了什么报错或显示异常?你是如何发现并解决这些问题的?
1.7.2013
时间到!看到大家都完成了自己的作品,非常棒!现在,我想邀请几位同学来展示一下你的成果。告诉大家你修改了哪些地方,网页变成了什么样,以及在过程中有没有遇到什么有趣的问题,你又是怎么解决的。分享是最好的学习方式!
‹#›
课堂总结:今天我们学到了什么?
网页的“外衣”
认识了网页的基本组成部分:
标题、导航栏、内容区、页脚。
网页的“骨架”
了解了制作网页的基础代码:
HTML(超文本标记语言)。
核心标签
学会了使用几个常用标签:
<title>, <h1>, <p>, <img>。
重要规则
记住两个关键点:
标签书写要配对,资源路径要准确。
1.7.2013
快乐的时光总是短暂的,一节课很快就过去了。让我们一起来回顾一下今天都学到了什么。我们认识了网页的“外衣”和“骨架”,学会了几个核心的HTML标签,更重要的是,我们记住了写代码时要遵守的重要规则:标签要配对,路径要准确。
‹#›
致胜关键:严谨与规范
代码世界非常严谨,一个小小的拼写错误、一个忘记写的斜杠,都可能导致整个网页无法正常显示。
仔细检查标签
写代码时细心输入,写完后务必检查,杜绝因笔误导致的基础错误。
确保标签配对
严格遵循HTML语法规则,养成好习惯,确保所有标签都正确地首尾闭合。
认真核对路径
认真检查图片、样式表等文件的引用路径,避免因路径错误导致资源无法加载。
严谨细致的态度,是成为一名优秀信息科技人才的必备素质!
1.7.2013
在课程的最后,我想特别强调一点:严谨与规范。代码的世界容不得半点马虎,一个小小的错误都可能导致前功尽弃。希望大家从现在开始,就养成仔细检查、认真核对的好习惯。这种严谨细致的态度,不仅是学好编程的关键,更是未来成为一名优秀信息科技人才的必备素质。
‹#›
课后拓展:继续探索
01 观察与思考
浏览你喜欢的网站,尝试从页面结构的角度,分析它包含了哪些组成部分。
02 动手尝试
在今天的基础上,尝试给网页添加更多的段落文字,或者使用 <h2>、<h3> 等不同级别的标题丰富页面。
03 预习新知
提前思考,为下一课《制作网页展活动》做好准备,想想你想展示什么内容?
1.7.2013
课程结束了,但我们的探索之旅才刚刚开始。课后,老师给大家留了几个小任务。希望大家能继续保持好奇心,多观察,多动手,不断探索网页世界的更多奥秘。我们下节课再见!
‹#›
感谢观看
下课!
THANKS FOR WATCHING
1.7.2013
感谢同学们的认真参与和积极思考,今天的课程到此结束。下课!
‹#›
$