網頁原始碼III 113
網頁原始碼III 113
Embedded Files
※自雲端硬碟www資料夾下載1.html檔案至D槽。
※開啟 Notepad++，將1.html載入編輯※
◎複習:
在了解了基本的HTML標記後，我們就可以在網頁內輸入文字了。如先前所提的，
你在網頁內輸入的文字必須在<body>及</body>間，往後所介紹的標記，除了特殊的語法外，都必須遵照此項規則。
1. <br>換行、<center></center> 置中、<p></p>段落、<font></font>字體
2. 標籤內可加屬性，如:<font face="" size="" color="">
屬性間要用空白鍵進行區隔。
一、插入圖片
<img src="" alt="" width="" height=""> (image圖片)
（一）圖片檔：(按右鍵下載至 D: 磁碟機，檔名為 mcjh.png )
（二）圖片檔語法:
<center>
銘傳國中校徽<br>
<img src="mcjh.png" alt="銘傳國中校徽" width="100" height="100">
</center>
↑圖片未顯示則有替代文字
(1) <img> 這個標記(tag)用來在網頁上置入圖片。無須結束標籤
(2) src屬性 標明了圖片的所在位置。
(3) alt屬性 標明 替代文字 (如果圖片未順利出現，就會出現的文字)
(4) width屬性 標明 圖片長度，可用 像素 或 百分比(%)
(5) height屬性 標明 圖片寬度，可用 像素 或 百分比(%)
(6) 請務必自行增加置中語法檔 <center></center>
※ 亦可插入網路圖片超連結 如:
創用CC0: 大英博物館 https://cdn.pixabay.com/photo/2017/07/24/08/19/the-british-museum-2533907_960_720.jpg
<center>
大英博物館<br>
<img src="https://cdn.pixabay.com/photo/2017/07/24/08/19/the-british-museum-2533907_960_720.jpg" alt="大英博物館" width="25%">
</center>
二、超連結 <a href="(url或位址)"></a> (Hypertext Reference)
（一）超連結語法
<a href="https://mcjh.kl.edu.tw" target="_blank" > 銘傳國中 </a><br>
（二）超連結語法說明：
1. <a>代表某一事件，<a href="">代表 超連結
2. "https://mcjh.kl.edu.tw" 代表超連結的 網址(url) 或 檔案位置
3. target="_blank" ，代表跳出新頁面 ；target="_self"，代表在相同視窗開啟
◎練習題: 圖片也可以做成超連結嗎? 如何操作? (以mcjh.png為例)
三、背景聲音 <audio src="檔案名稱及位址"></audio>
＊根據不同的音樂格式採取不同語法＊
(一) HTML5中的插入背景音樂語法
＊ (聲音格式若為.mp3/.wav/.ogg) 所有瀏覽器皆可支援 ＊
1.下載音樂檔(儲存到D：)，檔名aa.mp3。
2.繼續輸入放背景音樂的語法：
<audio src="aa.mp3" autoplay controls loop></audio>
說明：
1. src 代表載入檔案位址，紅色部分是檔名，大小寫不同可能會被視為是不同的檔名。
2. autoplay：自動播放音樂。若不想一載入畫面就撥放，則刪除該語法。
3. controls：顯示音樂控制列。若不想顯示撥放畫面，則刪除該語法。
4. loop：重新播放。若只想撥放一次，則刪除該語法。
◎版權聲明: 本教學用音樂aa.mp3，取自Youtube免費音樂素材。
★☆進行上傳☆★
1.將你 D 磁碟機中 1.html、mcjh.png、aa.mp3 檔案上傳雲端硬碟 www 資料夾中。
2.進入第三方伺服器DRV，重整檔案(Ctrl+F5)。
3.複製連結並上傳連結至作業繳交區。
Page updated
Report abuse