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

下載本文檔

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

文檔簡介

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

第16課學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)123了解網(wǎng)頁與代碼之間的對應(yīng)關(guān)系。初步認(rèn)識HTML語言，知道常用標(biāo)簽的作用。驗證網(wǎng)頁內(nèi)容的保存形式。第16課課堂導(dǎo)入學(xué)校每年科技節(jié)都會有許多科技體驗項目，也有制作“科技節(jié)體驗項目”網(wǎng)站的傳統(tǒng)，今年輪到本班承擔(dān)網(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)容學(xué)習(xí)內(nèi)容三

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

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

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

需要圖像文件

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

需要圖像文件

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

alt="Image"/><imgsrc='***/001.png'>第16課學(xué)習(xí)內(nèi)容√√二、顯示網(wǎng)頁的過程三、HTML代碼與網(wǎng)頁文件瀏覽器需要的是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)容三、HTML代碼與網(wǎng)頁文件第16課學(xué)習(xí)內(nèi)容啟動服務(wù)后，把最下方的地址復(fù)制到瀏覽器的地址欄中，即可訪問網(wǎng)站。三、HTML代碼與網(wǎng)頁文件第16課課堂總結(jié)

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

溫馨提示

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

評論

0/150

提交評論