資源簡介

(共19張PPT)
第16課　探秘網頁與代碼
第四單元　校園活動線上展
第16課　學習目標
學習目標
1
2
3
了解網頁與代碼之間的對應關系。
初步認識HTML語言，知道常用標簽的作用。
驗證網頁內容的保存形式。
第16課　課堂導入
學校每年科技節都會有許多科技體驗項目，也有制作“科技節體驗項目”網站的傳統，今年輪到本班承擔網站制作的任務。同學們瀏覽了往年的科技節網站作品，發現一個網站包含多個網頁文件，每個網頁文件保存著一堆代碼。很多同學對此感到好奇：
我們看到的網頁與這些代碼之間有什么關系？如何調整代碼改變網頁的顯示效果？
問題情境
第16課　學習內容
學習內容
三 HTML代碼與網頁文件
二 顯示網頁的過程
一 網頁與HTML代碼
上網瀏覽時會接觸風格各異的網頁，里面有文字、圖像、音頻、視頻等多種資源。通過網頁中的超鏈接，可以方便地在網頁和資源之間跳轉。這一切到底是怎樣完成的呢？
圖文并茂的網頁，背后對應著一堆代碼。這堆代碼對應著描述網頁的語言——HTML（hypertext markup language，超文本標記語言）。
一、網頁與HTML代碼
第16課　學習內容
瀏覽一個網頁，然后調出瀏覽器的“開發人員”工具，觀察頁面代碼。
第16課　學習內容
一、網頁與HTML代碼
HTML語言中用于標記內容、格式或超鏈接的代碼符號叫標簽。
成對出現的雙標簽，如和。
單標簽，如。
第16課　學習內容
一、網頁與HTML代碼
標　　簽 作　　用
設置文檔頭部
設置網頁標題
設置文檔主體

設置內容的一級標題

設置新一行
設置圖像
設置超鏈接
第16課　學習內容
一、網頁與HTML代碼
HTML代碼

飛馳的火車

更多AI繪畫
作品


瀏覽器獲得網頁代碼后，就會按照這些代碼的要求，顯示相應的文字、圖像等，進而呈現出完整的網頁效果。
第16課　學習內容
二、顯示網頁的過程
1．用《記事本》軟件打開網頁文件，根據下表的修改要求，嘗試修改網頁中的代碼。
修改要求 修改記錄
修改網頁標題
更換圖像
增加圖像說明
第16課　學習內容
二、顯示網頁的過程
瀏覽器可以把HTML代碼轉換成瀏覽時看到的圖文并茂的網頁。
修改要求 修改記錄
修改網頁標題
更換圖像
增加圖像說明
修改之間的內容
修改標簽的src屬性
在標簽后面增加

標簽
第16課　學習內容
二、顯示網頁的過程
2．參照以下方法進行操作，讓網頁顯示一張笑臉圖。
方法一：修改網頁，讓它顯示計算機中的圖像文件001.png。瀏覽網頁，觀察顯示效果。
方法二：運行配套資源中的《圖像編碼轉換器》軟件，選擇圖像文件001.png后進行編碼轉換，然后用運行結果替換網頁中的標簽。確保網頁所在文件夾中沒有圖像文件001.png 后，瀏覽網頁，觀察顯示效果。
第16課　學習內容
二、顯示網頁的過程
第16課　學習內容
單擊“選擇圖像”按鈕，選擇圖像文件，就可以看到轉換后的代碼。
二、顯示網頁的過程
在網頁中顯示圖像的不同方法：
顯示方法 任務記錄
使用文件路徑 需要圖像文件 不需要圖像文件
使用圖像數據編碼 需要圖像文件 不需要圖像文件


第16課　學習內容
√
√
二、顯示網頁的過程
三、HTML代碼與網頁文件
瀏覽器需要的是 HTML代碼，實際瀏覽過程中，瀏覽器只要能得到相應的HTML代碼就可以了，并不要求必須以網頁文件形式保存。
第16課　學習內容
網頁文件是常用的保存HTML代碼的容器。
index.htm
index.html
HTML代碼一定要以網頁文件形式保存嗎？
1．運行《Web服務器》軟件。
2．修改編碼、內容等參數后。
3．根據提示訪問這個網站，看看顯示效果。
4．修改內容后再次訪問，看看顯示效果。
第16課　學習內容
三、HTML代碼與網頁文件
第16課　學習內容
啟動服務后，把最下方的地址復制到瀏覽器的地址欄中，即可訪問網站。
三、HTML代碼與網頁文件
第16課　課堂總結
1．HTML是一種可用于描述網頁的語言。
2．HTML語言中用于標記內容、格式或超鏈接的代碼符號叫標簽。
3．修改標簽及內容，可以改變網頁的顯示效果。
4．HTML代碼不一定保存在網頁文件中。
網頁中包含的圖像、音頻、視頻等必須保存在網頁所在的那個網站中嗎？請想辦法驗證你的猜想。
第16課　拓展與提升
同學們可以嘗試在網頁中設置一個指向其他網站的圖像，然后看看顯示效果。

展開更多......

收起↑