探秘網(wǎng)頁與代碼課件 2024-2025學年人教版（2024）初中信息科技七年級全一冊_第1頁
探秘網(wǎng)頁與代碼課件 2024-2025學年人教版（2024）初中信息科技七年級全一冊_第2頁
探秘網(wǎng)頁與代碼課件 2024-2025學年人教版（2024）初中信息科技七年級全一冊_第3頁
探秘網(wǎng)頁與代碼課件 2024-2025學年人教版（2024）初中信息科技七年級全一冊_第4頁
探秘網(wǎng)頁與代碼課件 2024-2025學年人教版（2024）初中信息科技七年級全一冊_第5頁
已閱讀5頁，還剩14頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

第16課探秘網(wǎng)頁與代碼第四單元校園活動線上展義務教育信息科技課程資源七年級

第16課學習目標學習目標123了解網(wǎng)頁與代碼之間的對應關系。初步認識HTML語言，知道常用標簽的作用。驗證網(wǎng)頁內(nèi)容的保存形式。第16課課堂導入學校每年科技節(jié)都會有許多科技體驗項目，也有制作“科技節(jié)體驗項目”網(wǎng)站的傳統(tǒng)，今年輪到本班承擔網(wǎng)站制作的任務。同學們?yōu)g覽了往年的科技節(jié)網(wǎng)站作品，發(fā)現(xiàn)一個網(wǎng)站包含多個網(wǎng)頁文件，每個網(wǎng)頁文件保存著一堆代碼。很多同學對此感到好奇：我們看到的網(wǎng)頁與這些代碼之間有什么關系？如何調(diào)整代碼改變網(wǎng)頁的顯示效果？問題情境第16課學習內(nèi)容學習內(nèi)容三

HTML代碼與網(wǎng)頁文件二

顯示網(wǎng)頁的過程一

網(wǎng)頁與HTML代碼上網(wǎng)瀏覽時會接觸風格各異的網(wǎng)頁，里面有文字、圖像、音頻、視頻等多種資源。通過網(wǎng)頁中的超鏈接，可以方便地在網(wǎng)頁和資源之間跳轉。這一切到底是怎樣完成的呢？圖文并茂的網(wǎng)頁，背后對應著一堆代碼。這堆代碼對應著描述網(wǎng)頁的語言——HTML（hypertextmarkuplanguage，超文本標記語言）。一、網(wǎng)頁與HTML代碼第16課學習內(nèi)容瀏覽一個網(wǎng)頁，然后調(diào)出瀏覽器的“開發(fā)人員”工具，觀察頁面代碼。第16課學習內(nèi)容一、網(wǎng)頁與HTML代碼HTML語言中用于標記內(nèi)容、格式或超鏈接的代碼符號叫標簽。成對出現(xiàn)的雙標簽，如<HTML>和</HTML>。單標簽，如<img>。第16課學習內(nèi)容一、網(wǎng)頁與HTML代碼標簽作用<head></head>設置文檔頭部<title></title>設置網(wǎng)頁標題<body></body>設置文檔主體<h1></h1>設置內(nèi)容的一級標題<p></p>設置新一行<imgsrc='***/***.jpg'>設置圖像<ahref='xxxx'></a>設置超鏈接第16課學習內(nèi)容一、網(wǎng)頁與HTML代碼HTML代碼<html><title>科技節(jié)——人工智能繪畫</title><body><h1>飛馳的火車</h1><imgsrc='AI-001.png'><ahref='https://***'>更多AI繪畫作品</a></body></html>瀏覽器獲得網(wǎng)頁代碼后，就會按照這些代碼的要求，顯示相應的文字、圖像等，進而呈現(xiàn)出完整的網(wǎng)頁效果。第16課學習內(nèi)容二、顯示網(wǎng)頁的過程1．用《記事本》軟件打開網(wǎng)頁文件，根據(jù)下表的修改要求，嘗試修改網(wǎng)頁中的代碼。修改要求修改記錄修改網(wǎng)頁標題更換圖像增加圖像說明第16課學習內(nèi)容二、顯示網(wǎng)頁的過程瀏覽器可以把HTML代碼轉換成瀏覽時看到的圖文并茂的網(wǎng)頁。修改要求修改記錄修改網(wǎng)頁標題更換圖像增加圖像說明修改<title></title>之間的內(nèi)容修改<img>標簽的src屬性在<img>標簽后面增加<p>標簽第16課學習內(nèi)容二、顯示網(wǎng)頁的過程2．參照以下方法進行操作，讓網(wǎng)頁顯示一張笑臉圖。方法一：修改網(wǎng)頁，讓它顯示計算機中的圖像文件001.png。瀏覽網(wǎng)頁，觀察顯示效果。方法二：運行配套資源中的《圖像編碼轉換器》軟件，選擇圖像文件001.png后進行編碼轉換，然后用運行結果替換網(wǎng)頁中的<img>標簽。確保網(wǎng)頁所在文件夾中沒有圖像文件001.png后，瀏覽網(wǎng)頁，觀察顯示效果。第16課學習內(nèi)容二、顯示網(wǎng)頁的過程第16課學習內(nèi)容單擊“選擇圖像”按鈕，選擇圖像文件，就可以看到轉換后的代碼。二、顯示網(wǎng)頁的過程在網(wǎng)頁中顯示圖像的不同方法：顯示方法任務記錄使用文件路徑

需要圖像文件

不需要圖像文件使用圖像數(shù)據(jù)編碼

需要圖像文件

不需要圖像文件<imgsrc="data:image/jpeg;base64,iVBORw0K……

alt="Image"/><imgsrc='***/001.png'>第16課學習內(nèi)容√√二、顯示網(wǎng)頁的過程三、HTML代碼與網(wǎng)頁文件瀏覽器需要的是HTML代碼，實際瀏覽過程中，瀏覽器只要能得到相應的HTML代碼就可以了，并不要求必須以網(wǎng)頁文件形式保存。第16課學習內(nèi)容網(wǎng)頁文件是常用的保存HTML代碼的容器。index.htmindex.htmlHTML代碼一定要以網(wǎng)頁文件形式保存嗎？1．運行《Web服務器》軟件。2．修改編碼、內(nèi)容等參數(shù)后。3．根據(jù)提示訪問這個網(wǎng)站，看看顯示效果。4．修改內(nèi)容后再次訪問，看看顯示效果。第16課學習內(nèi)容三、HTML代碼與網(wǎng)頁文件第16課學習內(nèi)容啟動服務后，把最下方的地址復制到瀏覽器的地址欄中，即可訪問網(wǎng)站。三、HTML代碼與網(wǎng)頁文件第16課課堂總結

1．HTML是一種可用于描述網(wǎng)頁的語言。2．HTML語言中用于標記內(nèi)容、格式或超鏈接的代碼符號叫標簽。3．修改標簽及內(nèi)容，可以改變網(wǎng)頁的顯示效果。

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論