第16课 探秘网页与网站 课件-2024-2025学年人教版（2024）初中信息科技七年级全一册.pptx

获得哪吒2信息途径思考：我们从抖音、微博、微信公众号、门户网站等途径了解到哪吒2这部电影的信息，本质上都是网页给大家呈现的。

学习目标壹了解网页与代码之间的对应关系。贰初步认识HTML语言，知道常用标签的作用。叁制作一个小网页，学会简单发布网站。

壹HTML代码是网页的“骨架”网页与HTML代码

上网浏览时会接触风格各异的网页，里面有文字、图片、音频、视频等多种资源。通过网页中的超链接，可以方便地在网页和资源之间跳转。这一切到底是怎样完成的呢？网页与HTML代码

文字图片·音频·视频网页与HTML代码

观察左右两边的关联网页与HTML代码左边原网页的元素和右边的源代码是____________的。这里的代码我们称为_______；代码中使用尖括号的部分我们称为_______。一一对应HTML标签

超文本标记语言（HyperTextMarkupLanguage），简称HTML，是用于创建网页的标准标记语言。HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签（markuptag）。HTML使用标记标签来描述网页。HTML文档包含了HTML标签及文本内容。HTML文档也叫做web页面，包含很多因素，音乐、文字、链接、图片等。网页与HTML代码

贰HTML语言是标记语言，标签就是标记符号，浏览器获得网页代码后，就会按照标签的标记，显示相应的文字、图片等，进而呈现出完整的网页效果。显示网页的过程

HTML语言是标记语言，标签就是标记符号，浏览器获得网页代码后，就会按照标签的标记，显示相应的文字、图片等，进而呈现出完整的网页效果。HTML语言中用于标记内容、格式或超链接的代码符号叫标签。什么是标签双标签：大部分标签都是成对出现如HTML和/HTML单标签：左图代码有meta和img，现实中还有很多。显示网页的过程这些都是标签

常用的网页标签如下表。标签作用head/head设置文档头部title/title设置网页标题body/body设置文档主体h1/h1设置内容的一级标题p/p设置新一行imgsrc=***/***.jpg设置图片ahref=xxxx/a设置超链接参考左边表格认识以下代码作用显示网页的过程网页设计就像太乙真人用莲藕为哪吒重塑肉身！

我们设计网页的过程就像太乙真人用莲藕拼哪吒！我们用HTML标签搭积木，标签h1是顶天立地的标题牌，标签p是垒故事的文字砖块，标签img像画框挂出图片窗。每个标签像一节神奇莲藕，拼出网页的胳膊、腿和笑脸。最后敲下html和body标签，就像念动复活咒语，空白的屏幕“噗”地跳出会说话的小哪吒！只要我们掌握标签语言，就能在代码世界玩出重塑肉身的境界！显示网页的过程

整个网页肉身大体结构如下：显示网页的过程

登入教学平台，点击活动1哪吒的第1个网页。根据要求完成修改网页标题、更换图片、增加图片说明等任务。活动1哪吒的第1个网页

叁简单发布网站制作好网页后，如何发布你的网页让别人看到你的作品。

此刻，你们创作的网页虽已存在于学习平台，却如同锁在玻璃展柜中的艺术品。若想让作品真正活起来，还需构建专属的展示舞台——将个人电脑变身为微型服务器，让局域网内的同学都能实时访问你的创作。网站发布的目的专业级方案如Windows自带的IIS服务器，虽能承载大型平台（如我们的学习平台），但其配置复杂专业，不好快速掌握。今日我们使用不到1MB的轻量工具即可开启你的个人作品展。如何发布网站简单发布网站

看老师演示如何进行网站发布简单发布网站

简单发布网站步骤1、下载活动1设计的网页，并保存到本地（比如桌面）。2、根据网站发布的要求，网站首页通常要使用index命名，修改下载的网页的重命名为index.html，并在桌面上新建一个文件夹，作为网站目录，将index.html文件移动到新建的文件夹中。3、下载网站发布软件到新建的文件夹中，运行该程序，查看浏览器显示的网站内容。

简单发布网站步骤4、体验网站图片显示两种方法。方法一：指向了一个图片文件，找到下载的图片，保存到刚才新建的文件夹中，使用记事本打开index.html，修改图片位置代码。方法二：把图片文件中的数据按Base64编码方案进行了编码。编码后，二进制的图片数据就可以用字符串的形式表示出来。浏览器可以识别Base64编码，并显示图片。此时，图片数据保存在字符串中，因而不再需要原始图片文件。图片Base64编码基本原理：读取图片的二进制数据，编译成浏览器可以识别的Base64编码，图片在网页中就可以使用编码形式存在而不依耐原来的图片文件。注意点

注意点网页图片显示两种方法方法是否需要图片文件1、使用文件路径需要图片文件2、使用bas