HTML - HackMD

# HTML #### Artificial Intelligence and Digital Humanities #### National Chengchi University #### 2022.05.03 --- ## **網頁架構** ---- ### 基本網頁結構 ```html= <!DOCTYPE html> <html> <head> <title>TITLE</title> </head> <body> <p>CONTENT</p> </body> </html> ``` ---- ![](https://i.imgur.com/EuokrZF.png) [Reference](https://www.onlinedesignteacher.com/2016/03/the-html-template.html)  * `head`: 關於網頁的資訊，內容並不會出現在頁面上。 * `body`: 呈現在瀏覽頁面中的所有內容。 --- ## Let's Try ---- ```html= <!DOCTYPE html> <html> <head> <title>這是標題</title> </head> <body> <p>內容內容內容</p> </body> </html> ``` 1. 將上面的程式碼複製到 Sublime 2. 貼上後，另存成 ____.html 格式 3. 開啟檔案 ---- #### 你也可以在 `head` 當中加入一些網頁資訊 ```html= <head> <title>這是標題</title> <meta charset="UTF-8"> <meta name="description" content="這是我的第一個網頁">. <meta name="author" content="蔡宜庭"> </head> ``` ---- #### 試著在 `body` 中插入內容 ```html= <body> <h1>2017 至 2021 年臺灣電影統計資料</h1> <h2>財團法人國家電影中心</h2> <p>內容內容內容</p> </body> ``` ---- #### 試試看以下指令 ```html= <body> <i>這樣很美</i> <small>這樣就變小了</small> <b>這很重要</b> <mark>這超重要</mark> </body> ``` ---- #### 內容全部都在同一行？ ### 1. 前後加上 `<p></p>` ### 2. 加入 `<br>` ```html= <body> <p><i>這樣很美</i></p> <p><small>這樣就變小了</small></p> <b>這很重要</b> <br> <mark>這超重要</mark> </body> ``` ---- #### 加入網頁連結 ```html= <a href="https://www.tfai.org.tw/zh/">國家電影及視聽文化中心首頁</a> ``` ```html= <a target="_blank" href="https://www.tfai.org.tw/zh/">國家電影及視聽文化中心首頁</a> ``` ---- #### 插入圖片 ```html= <img src="./movie.png"> ``` <br> #### 調整大小 ```html= <img src="./movie.png" height="200" width="50"> ``` ```html= <img src="./movie.png" width="300"> <img src="./movie.png" width="70%"> ``` <br> #### 添加描述 ```html= <img src="./movie.png" width="300" alt="上映電影院數和單週售票數之線性關係"> ``` ![](https://i.imgur.com/lYs9Pjo.png) ---- #### 列點呈現資料 * 數字 ```html= <ol> <li>劇場 tf-idf: 0.07382155418543561</li> <li>影版 tf-idf: 0.07196829341090584</li> <li>3D tf-idf: 0.06980615584062112</li> </ol> ``` <br> * 圓點 ```html= <ul> <li>劇場 tf-idf: 0.07382155418543561</li> <li>影版 tf-idf: 0.07196829341090584</li> <li>3D tf-idf: 0.06980615584062112</li> </ul> ``` ---- #### 插入表格 ```html= <table> <tr> <th>字詞</th> <th>tf-idf</th> </tr> <tr> <td>劇場</td> <td>0.07382155418543561</td> </tr> <tr> <td>影版</td> <td>0.07196829341090584</td> </tr> <tr> <td>3D</td> <td>0.06980615584062112</td> </tr> </table> ``` ---- #### 創建按鈕 ```html= <button type="button" onclick="alert('你按下按鈕了！')">按我！</button> ``` --- ## CSS ### (Cascading Style Sheets) ---- #### 調整文字大小 ```html= <p style="font-size:150%;">這樣字就變大了</p> ``` * `font-size:` %, px, em <br> <br> #### 添加文字底色 ([色碼表](https://www.toodoo.com/db/color.html)) ```html= <p style="background-color:green;">字變綠綠的</p> <p style="background-color:#00AA88;">字變另一種綠了</p> ``` ---- #### 更改文字顏色 ```html= <head> <title>這是標題</title> <style> h1 { color:#FF8800; } h2 { color:#008800; } p { color:#AAAAAA; } </style> </head> ``` ---- #### 通常不會將頁面內容和設計樣式放置在一起 #### 因此需要新增一個**樣式表** (.css) ----  1. 剪下剛才在 `<head>` 當中的 `<style>` 設定 2. 開啟新檔案 3. 貼上 `<style>` 中的設定，另存為 `style.css` ```html= h1 { color:#FF8800; } h2 { color:#008800; } p { color:#AAAAAA; } ``` 4. 至 `.html` 檔案的 `<head>` 中貼上： ```html= <link rel="stylesheet" href="./style.css"> ``` ---- #### 調整樣式表 * `.css` ```html= .header1 { color:#FF8800; } .header2 { color:#008800; } .text1 { color:#AAAAAA; } ``` * `.html` ```html= <h1 class="header1">2017 至 2021 年臺灣電影統計資料</h1> <h2 class="header2">財團法人國家電影中心</h2> <p class="text1">內容內容內容</p> ``` ---- #### 同樣地，字體大小也可以在樣式表中設定 * `.css` ```html= #largefont{ font-size:20px; } ``` <br> * `.html` ```html= <p id="largefont">這樣字也會變大了</p> ``` --- ### **試著做一個推薦影視作品的網頁！** ---- 1. 開啟新頁面，加入不同大小的標題 (至少兩個) 2. 製作評分表格 3. 引述簡介，於其中調整字形、大小或顏色 4. 插入圖片和影片連結 5. 設計排版和顏色 6. 插入頁尾 ```html= <p><small>本網站為作業之用，如有侵權敬請告知</small></p> ``` ---- <!-- .slide: data-background="https://i.imgur.com/pSdkPlv.png"