1028_htmlcss_day1

# 1028_htmlcss_day1 [![hackmd-github-sync-badge](https://hackmd.io/W8LVzdCdQd-B98vVegs4UQ/badge)](https://hackmd.io/W8LVzdCdQd-B98vVegs4UQ) --- #### 上課日期：1028 ###### tags: `html/css` ###### tags: `5xruby` --- # 相關連結: - 還沒看的，趕快去看啦!!! [AMOS老師 - 金魚都能懂的網頁教學](https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre) - Day2~Day22 - 建議看:[金魚都能懂的CSS必學屬性](https://ithelp.ithome.com.tw/users/20112550/ironman/3803?sc=iThelpR) - [課程影片](https://campus.5xruby.tw/courses/1136422/lectures/25335888) --- # 1. 基本介紹introduction > HTML是什麼？什麼是CSS？ ### 概念說明 - 畫面 > 視覺 - 程式 > 功能 - 目的：將畫面轉成網頁，網頁：html, css, 程式 - 程式：ROR, JS, ... - 框架：Bootstrap(視覺面), vue, angular, react, ... - 教學內容主要為html, css, bootstrap三大部分 ### 資料整理 - 開資料夾用日期區分，筆記時可加註當時的時間，方便對照影片中的段落。(11:00am) # 2. HTML ### web:文字圖片影音 (詳見老師提供的Xmind) * 文字：內文,引用,超連結 * 清單：ol, il, ... * 語意區塊：文章article, 章節section, 側邊欄aslide, header(常用於頁首), footer(常用於頁尾) * 圖片：圖表, 相片, gif動畫, 插畫, icon/圖示 ... > 需要知道各個格式的特性 > 檔案大小會影響傳輸速度，進而影響使用者體驗。 * 支援圖片格式：jpg, gif, png, webp, svg * [jpg](https://zh.wikipedia.org/wiki/JPEG)：一種破壞性壓縮的圖檔，顏色有256^3種 * [gif](https://zh.wikipedia.org/wiki/GIF)：256色、做動畫、醜醜的透明區 * [png](https://zh.wikipedia.org/wiki/PNG)：有8位元(跟gif一樣，只差不會動)和24位元(256^3色，平滑的半透明區) * [webp](https://zh.wikipedia.org/wiki/WebP)：破壞性壓縮、256^3、平滑的半透明區（新興的格式） * [svg](https://zh.wikipedia.org/wiki/%E5%8F%AF%E7%B8%AE%E6%94%BE%E5%90%91%E9%87%8F%E5%9C%96%E5%BD%A2)：向量檔，放大縮小畫質不變；可用於icon上，也適合給因應各種大小裝置所需的圖(RWD) * `<img src="圖片來源地址" alt="替代文字">` img只有單一個tag，沒有後面相對應的tag * 語法：<標籤屬性="值"> * 影音：影片, 聲音 ### [什麼是html(wiki)](https://zh.wikipedia.org/zh-tw/HTML) * 標記語言（不是程式語言!!） * HTML描述了一個網站的結構語意（就是網站的骨架） * 網頁不會知道自己應該長什麼樣，所以需要進行標記 ### 架構與語意 * 網頁上的東西會有很多，所以需要分組（使用`<div></div>`來區分）以結構化資訊。 (11:27am) [練習] ``` <div> <img> h2>標題</h2> <p>內文</p> </div> <div> <img> <h2>標題</h2> <p>內文</p> </div> ``` * div = division * 視覺和語意要區分清楚：語意是內容為何，視覺只是美化 * 盲人上網時使用語意閱讀器，會讀取語意標籤以理解資訊（最有名的盲人叫做**Google**!!!）(11:36am) * 標籤好好寫，才好讓Google抓取資料，出現在搜尋結果上。（不要偷懶都只用`<div>`） * 關鍵字：示範關鍵字設定的搜尋效果(12:05am) * 範例：**垂直置中**，[23種CSS垂直置中技巧| CSS可樂](http://csscoke.com/2018/08/21/css-vertical-align/) * 　SEO(搜尋引擎最佳化)：幫助商家能優先出現在目標族群的搜尋清單內。 --- ### 參考工具 - [HTML5 Outliner(chrome擴充功能)](https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo/related?hl=zh-tw)：查看網頁的結構 # 3. 標籤 ### 清單 * ol：ordered list * ul：unordered list * li：list item #### 課堂作業 - 寫一個清單 - 父層 & 子層 - 範例：`<li>`是子層，要有`<ul>`或`<ol>`作父層 - 標籤縮排很重要，是基本能力，對於層級的認知很有用(12:30am) ### head裡面 - 大部分不是給人看的，給應用程式看 - meta (property)是給社群網站使用(fb/og/...) - head和body通常不用再縮排（在`<html>`下） ### 特別的標籤 - 有些標籤像是`<img>`，標記的資訊不足時，需要額外的訊息。 - `<img src="test.svg" alt="測試用圖片">` - <標籤屬性="值"> - 特別屬性-替代文字（alt）：圖片消失時顯示的文字 - 就本範例來說，在safari裡面，要特別加上圖片的尺寸才能顯示（width="200"） # 4. VScode操作技巧 - 新增檔案： - 標題列點兩下 - 快捷鍵：cmd + n - 更換檔案性質 - 右下角切換，如圖，plain text > html - 快捷鍵: 1. cmd+k (Mac) / ctrl+k (Windows) 2. m ![](https://i.imgur.com/u99Bdm3.png) ![](https://i.imgur.com/VCXHKKs.png) - 常用[Emmet](https://pjchender.blogspot.com/2016/07/emmet.html)輸入 - 在設定裡 ![](https://i.imgur.com/p1g51NR.png) - 安裝套件 * chinese lorem 中文假文 * live server 直播伺服器 * Fake Image Snippet Collection 假圖 * auto rename tag 自動前後標籤更名 * 安裝後測試: * lorem -英文假文 * lorem10 -英文假文10個單字 * ctlorem -中文假文 * ctlorem10 -中文假文10字 * 相關設定 * 自動換行：wrap->on ![](https://i.imgur.com/sigMrpj.png)(14:25am) * 移動此行快捷鍵：alt+上下方向鍵 (Windows) / option+上下方向鍵 (Mac) # 5. 路徑 - 參考：[Background-image 之一 - 金魚都能懂的CSS必學屬性](https://ithelp.ithome.com.tw/articles/10247622) ### 課堂作業： - 做一個資料夾，內有兩個子資料夾（demo, pic） - 第一層有三個網頁（01.html,02.html ,03.html）和兩個圖檔（aaa, bbb） - demo裡有兩個網頁（d01.html, d02.html） - pic裡面有兩個圖（111, 222） - 作業一：在d01.html顯示aaa和111 - 作業二：做04.html，顯示bbb和222 # 6. 其他 ### [<!DOCTYPE html>](https://developer.mozilla.org/zh-TW/docs/Glossary/Doctype) \<!DOCTYPE>會告知你的瀏覽器這個文件是用哪個版本的 HTML （或 XML）撰寫。Doctype 是一種宣告，而非 tag。你也可以把它想作「document type declaration」（文件類型宣告），或是縮寫的「DTD」。 *(04:20pm)* # 標籤說明 - `<meta>` - `<br>` 換行，單個標籤 - `<img>` 圖片，單個標籤 - `<p>` 段落 - `<a>` 連結 - `<h1>`~`<h6>` 標題h1~h6 # Amos書單、片單 (依序) - [網頁設計入門](https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre) - [CSS必學屬性](https://ithelp.ithome.com.tw/users/20112550/ironman/3803?sc=iThelpR) - [CSS選取器](https://ithelp.ithome.com.tw/users/20112550/ironman/2799) - [網頁切版](https://ithelp.ithome.com.tw/users/20112550/ironman/2623) - [Bootstrap](https://ithelp.ithome.com.tw/users/20112550/ironman/3796) --- # 附件 - [這裡是附件的標題](這裡放連結) - [這裡是附件的標題](這裡放連結)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.