資訊實務應用讀書會第一堂課：Basic HTML

資訊實務讀書會：第一堂課 Basic HTML 師大資工103級灆洢 / 曹又霖

網頁、網站、瀏覽器

網頁

網站 • 網頁的集合體。 • 通常用樹狀圖來架構網站。首頁自我介紹個人作品遊戲介紹

首頁 • 檔名通常為index • 若為HTML檔案：index.html / index.htm • 若為PHP檔案：index.php

瀏覽器

認識HTML

HTML • HyperText Markup Language • 超文件標記語言 • 用於網頁的排版

HTML網頁基本結構 <!DOCTYPE html> <html> <head> <title>這裡是標題的部分</title> </head> <body> 這裡是內容的部分。  </body> </html> 版本宣告 HTML文件文件整體資訊文件內容

基本文章結構

標題 <body> <h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6> </body>

段落 <body> <p>第一個段落</p> <p>第二個段落</p> </body>

強調標籤與換行標籤 <body> <p> <em>斜體強調</em>，<br /> <strong>粗體強調</strong>，<br /> <em><strong>粗斜體強調</strong></em> </p> </body>

pre標籤 <body> <pre> 這是一篇很長的文章，害我懶的用br和p標籤，真是抱歉！ </pre> </body>

Meta標籤：設定編碼(UTF-8) <head> <meta charset="UTF-8" /> <title>標題</title> </head>

DOM Tree

DOM Tree <!DOCTYPE html> <html> <head> <title>文章範例</title> </head> <body> <h1>主要標題</h1>
<p> <em> <strong>粗斜體強調</strong> </em> </p> </body> </html> Document html head body title 文章範例 h1 em 主要標題粗斜體強調 strong p

圖片與超連結

圖片 <body> <img src="http://www.knightzone.org/image/thumbs/32.jpg" alt="全身圖" />  </body>

超連結 <body> <a href="http://www.google.com" target="_blank">往 Google</a> </body>

表格及清單

行列&欄列行、欄、column 列、 row

表格 <body> <table border="1"> <tr> <td>5月10日</td> <td>去幫爸爸買車</td> </tr> <tr> <td>6月10日</td>
<td>去幫媽媽買房子</td> </tr> <tr> <td>7月10日</td> <td>去幫哥哥買電腦</td> </tr> </table> </body>

表格標題格 <table border="1"> <tr> <th>日期</th><th>待辦事項</th> </tr> <tr> <td>5月10日</td> <td>去幫爸爸買車</td> </tr>
</table>

合併行

合併列

符號式清單

編號式清單

多媒體嵌入

embed：外部播放器嵌入法

audio：播放音樂

video：播放影片

source：多來源 <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your
browser does not support the audio element. </audio>

參考資料與作業

• 新罪楓翼☆灆洢騎士 • http://knightzone.logdown.com/ • W3schools.com • http://www.w3schools.com/ • W3schools
簡中 • http://www.w3school.com.cn/ • Codecademy • http://www.codecademy.com/ • W3C • http://www.w3.org/ • MOZILLA DEVELOPER NETWORK • https://developer.mozilla.org/zh-TW/

作業：介紹自己興趣的網站 • 設計幾頁的網站來介紹自己的興趣的相關內容。 • 例如：音速小子、LoveLive……等等 • 禁止使用未被HTML5接納的標籤 • 你可以至w3schools.com上面查看 •
並不要求一定要通過W3C嚴格檢查 • 樣式部分可先省略 • 因為我尚未教CSS • 各位可以先自學看看

Thanks.

資訊實務應用讀書會 第一堂課：Basic HTML

資訊實務應用讀書會 第一堂課：Basic HTML

More Decks by Maplewing

Other Decks in Programming

Featured

Transcript

資訊實務應用讀書會第一堂課：Basic HTML

資訊實務應用讀書會第一堂課：Basic HTML