{%hackmd BJrTq20hE %} # 網頁 ## html基本指令 ### html | 指令| 功能|說明| | ------ |:----- |--| |`<html> </html>` | 文件格式 | 檔案的開頭與結尾 | |`<title> </title>` | 網頁主題 | 必須放在抬頭區段 | | `<head> </head>` | 抬頭區段 | 描述文件的資訊，如「網頁主題」| |`<body> </body>` | 內文區段 | 內文 | ### 一般語法 | 指令| 功能| | ------ |:----- | |`<!--` 與 `-->` | 註解 | |`<comment></comment>` | 註解 | |`<a href>` | 指定超連結 | |`<* name=名稱>` | 物件命名 | |`<b>` | 粗體字 | |`<font face>` | 字形 | |`<font size>` | 字體大小 | |`<h1>~<h6>` | 文字大小(h1最大，之後漸小) | |`<hr>` | 分隔線 | |`<br>` | 換行 | |`<i>` | 斜體字 | |`<img src>` | 插入圖片 | |`<button>` | 就button | |`video src` | 插入影片 | |放YT影片 || ```htmlembedded= <div style="width: 250px;height: 80px;text-align: center;"> <svg class="animation" width="200" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line class="hex" y1="110" y2="150" stroke="purple" stroke-width="5"/> </svg> </div> ``` ## css基本指令 | 指令| 功能| | ------ |:----- | |`#`|id命名指向| |`<font size>` | 字體大小 | |`<position>`|物件排列方式| |`<top>` | 將物件定位到距離上方多遠 | |`<left>` | 將物件定位到距離左方多遠 | |`text-align` | 文字對期(靠左 置中 靠右) | |`hover` | 游標（不是鼠標）放在物體上時 | |`width` | 寬度 | |`height` | 高度 | |`background-color` | 就是background的color | |`keyframes` | 定義動畫運行 | |`animation-iteration-count`|動畫重複次數| |`animation-duration `|動畫運行時間| |`animation-name`|動畫名稱（eg:change-color & move）| 動畫 1. 圖形 2. 文字變色 排版 1. 三欄式 ## 程式碼 ### html ```htmlembedded= <!doctype html> <html> <head> <meta charset="UTF-8"> <title>哈哈網頁</title> <link rel="stylesheet" href="typesetting.css"> </head> <body> <div id="sitebody"> <div id="header"><h1>header</h1></div> <div id="sidebar_left">sidebar_left <br/> <button style="height:50px; width:80px;" id="button" onclick="window.open('https://youtu.be/PK4zx2EGnCo')">我的acapella</button> </div> <div id="sidebar_right">sidebar_right <!--動畫--> <div style="width: 250px;height: 80px;text-align: center;"> <svg class="animation" width="200" height="150" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line class="hex" y1="110" y2="150" stroke="purple" stroke-width="5"/> </svg> </div> <!--end--> </div> <div id="content"> <hr/> <img src="https://japandiary.tw/wp-content/uploads/20201020213319_29.jpg" style="width: 35%;text-align: center;"/> <iframe width="560" height="315" src="https://www.youtube.com/embed/f1bCYUDW8ww" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div id="footer">footer</div> </div> </body> </html> ``` ### css ```htmlmixed= *{margin:0;} #sitebody{ width:100%; height:100vmax; margin:0 ; } #header{ background-color:#FFD4D4; height: 200px; text-align:center; line-height:80px; } #sidebar_left{ background-color:#FFECC9; width:25%; height:100%; text-align:center; line-height:400px; float:left; } #sidebar_right{ background-color:#FFECC9; width:25%; height:100%; text-align:center; line-height:400px; float:right; } #content{ margin-left:25%; margin-right:25%; height:100%; background-color:#F2FFF2; text-align:center; line-height:400px; } #footer{ clear:both; background-color:#FFD4D4; height:200px; text-align:center; line-height:80px; } .animation{ animation: jello 1s; animation-iteration-count: infinite; } @keyframes jello { from, 100%, to { transform: none; } 22.2% { transform: skewX(0deg) skewY(-12deg); } 33.3% { transform: skewX(0deg) skewY(6deg); } 44.4% { transform: skewX(0deg) skewY(-3deg); } 55.5% { transform: skewX(0deg) skewY(1deg); } 66.6% { transform: skewX(0deg) skewY(-1deg); } 77.7% { transform: skewX(0deg) skewY(1deg); } 88.8% { transform: skewX(0deg) skewY(-1deg); } } p{ margin:20px; } .mixed{ writing-mode: vertical-lr; text-orientation: mixed; } @keyframes change-color{ 14%{color:red;} 28%{color:orange;} 42%{color:rgb(230, 23, 70);} 56%{color:lightgreen;} 70%{color:blue;} 84%{color:blueviolet;} 100%{color:purple;} } @keyframes move{ 0%{left:0px} 20%{left:200px;} 40%{left:400px;} 60%{left:60px;} 80%{left:800px;} 100%{left:953px;} } h1{ animation-name:change-color; animation-duration:1s; animation-iteration-count:infinite; } ``` ## 在 Github 上展示你的網頁 1. 在 Github 上創建一個帳號 2. 點選右上角的加號然後點選 `New repository` ![](https://cdn.discordapp.com/attachments/916177621874769970/1031109886546821201/unknown.png) 3. 幫你的 repository 取名子並創建它 ![](https://cdn.discordapp.com/attachments/916177621874769970/1031110849806487622/unknown.png) 4. 點選畫紅線的 `uploading an existing file` ![](https://cdn.discordapp.com/attachments/916177621874769970/1031111281060618320/unknown.png) 5. 上傳你的檔案 <p style='color :red'>**請注意！！須有一名為index.html的檔案**</p> ![](https://cdn.discordapp.com/attachments/916177621874769970/1031111643674972160/unknown.png) 6. 然後點選 `settings` ![](https://cdn.discordapp.com/attachments/916177621874769970/1031111789070516244/unknown.png) 7. 點選`page` ![](https://cdn.discordapp.com/attachments/916177621874769970/1031111888983052339/unknown.png) 8. 按照上面的順序依序點選 - 將分支換成 main 然後確認資料夾為 root 然後 `save` ![](https://cdn.discordapp.com/attachments/916177621874769970/1031112406610481172/unknown.png) 9. 然後刷新網頁後應該會看到 `Your site is live at ....`就代表成功了！ ![](https://i.imgur.com/3MjXlaR.png) 10. 點進連結看看你自己的網頁！(做完任何更新後都要等一下才會在網站上看到變更) ![](https://i.imgur.com/MsWBiLt.jpg) ###### 若有任何問題可以在 DC 發問