---
# System prepended metadata

title: F5 - website

---

# F5 - website
## Introduction to the Internet

[PowerPoint](https://docs.google.com/presentation/d/1U-wVF5kvTOLvtEWN8f8awsbVwMXWNGxEoNFO6L39dVc/edit?usp=sharing)

# Website
## Codepen 平台介紹與基礎設定
  * 重點：
    * 註冊免費的帳號（要找一下）
    * 設定：settings -> Editor Preferences
        * key bindings(快速鏈) -> Sublime Text
        * Preprocessor & Library Defaults -> Preficing ( 跨瀏覽器解決CSS 問題 )-> Autoprefixer 
        * Emmet -> active (可以用縮寫的語法)
        * Editor Options (提示常用的語法和命令) -> AutocompleteLine Numbers, Line Wrapping, Code Folding, Match Brackets/Tags
Autocomplete
    * [emmet 語法列表](https://docs.emmet.io/cheat-sheet/)
    * [sublime 快速鍵](https://www.camdemy.com/media/6211)
### 範例：
![](https://i.imgur.com/Iko3vDi.png)


### html 結構
* html中結構與元素：
    * 使用`<h1>`-`<h6>`標籤作為標題
    * 使用`<p>`(paragraph)作為內文
    * `<hr>` 為水平分隔線
    * `<img>`影像 / `<a>`連結 標籤需要在開頭額外指定一些屬性（像是連結/在哪裡開啟/寬度之類的)
    * 其他補充: [w3school html_basic]
    * 使用`<h1>`-`<h6>`標籤作為標題
    * 使用`<p>`(paragraph)作為內文
    * `<hr>` 為水平分隔線
    * `<a href= ___  > __ </a>` 連結
    * `<img>`影像 / `<a>`連結 標籤需要在開頭額外指定一些屬性（像是連結/在哪裡開啟/寬度之類的)
    * 其他補充: [w3school html_basic]
 
    
## HTML結構與元素
### Example: 咖啡豆
#### Teaching Materials 
### 範例：
![](https://i.imgur.com/cUkkTUa.png)
### Video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/_ImdMpKSrHA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

* 維基百科 - https://zh.wikipedia.org/wiki/%E5%92%96%E5%95%A1%E8%B1%86
* 外果皮 - https://www.moedict.tw/%E5%A4%96%E6%9E%9C%E7%9A%AE
* 果肉 - https://pedia.cloud.edu.tw/Entry/Detail/?title=%E6%9E%9C%E8%82%89


* Learning Content：
    * 使用`<h1>`-`<h6>`標籤作為標題
    * 註解 ： command + " / " 或 Ctrl +"/"
    * `<br>` 為換行
    * `<hr>` 為水平分隔線
    * `<a>` 為連結
    * `<p>`(paragraph)作為內文
    * `<b>` 為粗體
    * `<ol>` ordered list 有排序的清單
    * `<li>` list item
    * `<ul>` unordered list 沒有排序清單
    * `<img>`影像 
    * 標籤需要在開頭額外指定一些屬性（像是連結/在哪裡開啟/寬度之類的)
    其他補充: [w3school html_basic](https://www.w3schools.com/html/html_basic.asp)
    

## css調整外觀與class/id概念
### Example： 咖啡
#### Teaching Materials 
### 範例：
![](https://i.imgur.com/RJ0CXR3.png)

### Video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/DFt_b46ZiDw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

* 維基百科 - 
https://zh.wikipedia.org/wiki/%E5%92%96%E5%95%A1%E8%B1%86


* Learning Content：
* HTML
    * `<div>` 容器 division 沒有預設的屬性
    * `<class=>` 變數設定  css -> "."
    * `<id=>` 變數設定  css -> "#"
* CSS
    * `font-size：` 字的大小
    * `color：` 字的顏色
    * `background-color：` 背景的顏色
    * `*` 代表畫面中所有的元素
    * `border: solid 1px black；` 框線
    * `display:flex;` 顯示為左右排列
    * `display:inline-block;` 顯示排成同一行
    * `vertical-align:top;` 向上對齊
    * `background-image: url();` 加入圖片
    * `background-size: cover;` 背景展開

## css的內外距
### 範例：
![](https://i.imgur.com/H7uckYG.png)

### Video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Vl8XtImYR9E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


* Learning Content：
* html
* 
    * `span` 維持他的樣式 繼承前面的屬性 
* CSS 
    * `padding` 內距
    * `margin` 外距
    * `html,body` 全個網站
    * `justify-content: center;` 左右中央
    * `align-items: center;` 上下中央
    *  `font-size:`字的大小
    *  `margin-left: ;`與左邊的距離
    *  `margin-top:` 與上面的距離
    *  `font-weight: normal;` 字體粗細的調整
    *  `line-height:` 行高
    *  `border-radius:` 圓角
    *  `overflow: hidden;` 隱藏超出的部份
    - 居中常用：justify-content, align-items
    - 記得HTML要撐滿100% width height，不然居中可能失敗 

---
##  Github Page 發佈網站 

* 到 [GitHub](https://github.com/) 註冊帳號：
* 建立新的程式碼儲存倉庫

![](https://i.imgur.com/4vGo9md.png)

* 上傳程式碼，選擇所有的程式文件並 commit

![](https://i.imgur.com/6F5ZAHy.png)

![](https://i.imgur.com/gq7P8sj.png)

*  到 Settings -> GitHub Pages 發佈

![](https://hackmd.io/_uploads/S1Imiu3vh.png)

* Source： Deploy from a branch

![](https://hackmd.io/_uploads/rJvNid2wh.png)

* Save -> 等 15分鐘, refresh the page. 全出現網頁

![](https://hackmd.io/_uploads/S1R-3_hD2.png)




{%youtube yzgaqIAiTiE %}


---


## 補充資源

* ColorZilla：https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp
* FontAwesome Icons:
http://fontawesome.io/icons/
* JSON online editor：
http://www.jsoneditoronline.org/
* emmet 語法列表:
https://docs.emmet.io/cheat-sheet/
* sublime 快速鍵:
https://www.camdemy.com/media/6211
* CSS peeper:
https://csspeeper.com/
* VScode 快速鍵 (mac OS):
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
* VScode 快速鍵 (windows):
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

---