# 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)
### 範例：

### 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
### 範例：
### 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
### 範例：

### 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的內外距
### 範例：

### 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/) 註冊帳號：
* 建立新的程式碼儲存倉庫


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



* 到 Settings -> GitHub Pages 發佈


* Source： Deploy from a branch


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


{%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

---