第16課 探秘網(wǎng)頁與代碼課件

第16課　探秘網(wǎng)頁與代碼第四單元　校園活動線上展義務(wù)教育信息科技課程資源　七年級 第16課　學(xué)習(xí)目標學(xué)習(xí)目標123了解網(wǎng)頁與代碼之間的對應(yīng)關(guān)系。初步認識HTML語言，知道常用標簽的作用。驗證網(wǎng)頁內(nèi)容的保存形式。第16課　課堂導(dǎo)入學(xué)校每年科技節(jié)都會有許多科技體驗項目，也有制作“科技節(jié)體驗項目”網(wǎng)站的傳統(tǒng)，今年輪到本班承擔網(wǎng)站制作的任務(wù)。同學(xué)們?yōu)g覽了往年的科技節(jié)網(wǎng)站作品，發(fā)現(xiàn)一個網(wǎng)站包含多個網(wǎng)頁文件，每個網(wǎng)頁文件保存著一堆代碼。很多同學(xué)對此感到好奇：我們看到的網(wǎng)頁與這些代碼之間有什么關(guān)系？如何調(diào)整代碼改變網(wǎng)頁的顯示效果？問題情境第16課　學(xué)習(xí)內(nèi)容 三 HTML代碼與網(wǎng)頁文件二 顯示網(wǎng)頁的過程一 網(wǎng)頁與HTML代碼上網(wǎng)瀏覽時會接觸風格各異的網(wǎng)頁，里面有文字、圖像、音頻、視頻等多種資源。通過網(wǎng)頁中的超鏈接，可以方便地在網(wǎng)頁和資源之間跳轉(zhuǎn)。這一切到底是怎樣完成的呢？圖文并茂的網(wǎng)頁，背后對應(yīng)著一堆代碼。這堆代碼對應(yīng)著描述網(wǎng)頁的語言——HTML（hypertext markup language，超文本標記語言）。第16課　學(xué)習(xí)內(nèi)容瀏覽一個網(wǎng)頁，然后調(diào)出瀏覽器的“開發(fā)人員”工具，觀察頁面代碼。第16課　學(xué)習(xí)內(nèi)容 HTML語言中用于標記內(nèi)容、格式或超鏈接的代碼符號叫標簽。 成對出現(xiàn)的雙標簽，如和。 單標簽，如。第16課　學(xué)習(xí)內(nèi)容第16課　學(xué)習(xí)內(nèi)容瀏覽器獲得網(wǎng)頁代碼后，就會按照這些代碼的要求，顯示相應(yīng)的文字、圖像等，進而呈現(xiàn)出完整的網(wǎng)頁效果。第16課　學(xué)習(xí)內(nèi)容1．用《記事本》軟件打開網(wǎng)頁文件，根據(jù)下表的修改要求，嘗試修改網(wǎng)頁中的代碼。第16課　學(xué)習(xí)內(nèi)容 瀏覽器可以把HTML代碼轉(zhuǎn)換成瀏覽時看到的圖文并茂的網(wǎng)頁。第16課　學(xué)習(xí)內(nèi)容2．參照以下方法進行操作，讓網(wǎng)頁顯示一張笑臉圖。方法一：修改網(wǎng)頁，讓它顯示計算機中的圖像文件001.png。瀏覽網(wǎng)頁，觀察顯示效果。方法二：運行配套資源中的《圖像編碼轉(zhuǎn)換器》軟件，選擇圖像文件001.png后進行編碼轉(zhuǎn)換，然后用運行結(jié)果替換網(wǎng)頁中的標簽。確保網(wǎng)頁所在文件夾中沒有圖像文件001.png 后，瀏覽網(wǎng)頁，觀察顯示效果。第16課　學(xué)習(xí)內(nèi)容第16課　學(xué)習(xí)內(nèi)容單擊“選擇圖像”按鈕，選擇圖像文件，就可以看到轉(zhuǎn)換后的代碼。在網(wǎng)頁中顯示圖像的不同方法：第16課　學(xué)習(xí)內(nèi)容√√瀏覽器需要的是 HTML代碼，實際瀏覽過程中，瀏覽器只要能得到相應(yīng)的HTML代碼就可以了，并不要求必須以網(wǎng)頁文件形式保存。第16課　學(xué)習(xí)內(nèi)容網(wǎng)頁文件是常用的保存HTML代碼的容器。index.htmindex.htmlHTML代碼一定要以網(wǎng)頁文件形式保存嗎？1．運行《Web服務(wù)器》軟件。2．修改編碼、內(nèi)容等參數(shù)后。3．根據(jù)提示訪問這個網(wǎng)站，看看顯示效果。4．修改內(nèi)容后再次訪問，看看顯示效果。第16課　學(xué)習(xí)內(nèi)容第16課　學(xué)習(xí)內(nèi)容啟動服務(wù)后，把最下方的地址復(fù)制到瀏覽器的地址欄中，即可訪問網(wǎng)站。第16課　課堂總結(jié)網(wǎng)頁中包含的圖像、音頻、視頻等必須保存在網(wǎng)頁所在的那個網(wǎng)站中嗎？請想辦法驗證你的猜想。第16課　拓展與提升同學(xué)們可以嘗試在網(wǎng)頁中設(shè)置一個指向其他網(wǎng)站的圖像，然后看看顯示效果。