狠狠撸

Web Dev #1
HㄒML 寶寶班
Speaker
林子閎 (Benson Lin)
DSCNUK core team member
開發版控上架一次到位

Agenda
? 前言
? 環境搭建
◆好的 IDE 帶你上天堂
? HTML basics
◆萬物皆由 tag 構成
? CSS basics
◆HTML 的化妝品
? Workshop: 自己的課表
? 認識 Git 版本控制
? 把網頁上傳到 GitHub 吧 !

認識一個酷東西就要先從...
超文本標記語言
Hypertext Markup Language

環境搭建：用什麼開發網頁？
Sublime Notepad++ Visual Studio
Code

VS Code 與它的酷工具
Extension required on this lesson:
● 繁體中文語文套件
● Live Server
● Beautify
● HTML Snippets
● Live Sass Compiler

Environment
新增一個檔案
專案名稱（根目錄）
編輯器主體
錯誤清單（檢查有沒有出事）
Let’s get started!

Live Server
在本地 IP (127.0.0.1)
建立 port (預設為5500)

About “settings.json”
vs code 有全域設定
也有專屬於專案的設定
專案設定優先於全域設定

{
" f i l e s . a ut oSa ve " : " onFoc us Cha nge " ,
" e di t or . f or ma t OnSa ve " : t r ue ,
" e di t or . f or ma t OnPa s t e " : t r ue ,
" e di t or . wor dW
r a p" : " on" ,
" [ ht ml ] " : {
" e di t or . t a bSi z e " : 2,
" e di t or . de f a ul t For ma t t e r " : " HookyQR. be a ut i f y"
},
" [ c s s ] " : {
" e di t or . t a bSi z e " : 2
},
" be a ut i f y. c onf i g" : {
" i nde nt _s i z e " : 2,
}
}
Our “settings.json”

<! DOCTYPE ht ml >
<ht ml l a ng=" e n" >
<he a d>
<me t a c ha r s e t =" UTF- 8" >
<me t a na me =" vi e wpor t " c ont e nt =" wi dt h=de vi c e - wi dt h, i ni t i a l - s c a l e =1. 0" >
<t i t l e >Doc ume nt </ t i t l e >
</ he a d>
<body>
<h1>He l l o HTM
L</ h1>
</ body>
</ ht ml >
First HTML

<! DOCTYPE ht ml >
<he a d>
</ he a d>
<body>
<h1>He l l o HTM
L</ h1>
</ body>
</ ht ml >
First HTML
opening tag closing tag
content
element

<! DOCTYPE ht ml >
<he a d>
</ he a d>
<body>
<h1>He l l o HTM
L</ h1>
</ body>
</ ht ml >
First HTML
opening tag
closing tag
content
巢狀元素(nesting element)

<! DOCTYPE ht ml >
<ht ml l a ng=" z h- TW
" >
<he a d>
<t i t l e >我的第一個HTM
L網頁</ t i t l e >
</ he a d>
<body>
<h1>He l l o HTM
L</ h1>
</ body>
</ ht ml >
First HTML
屬性(attribute)
網頁的名字

Title & Paragrath
標題:
● 分為 6 個等級
● 由大到小分別為<h1>~<h6>
● e.g. : <h1>我是標題1</h1>
段落:
● 通常會包住一段文字
● e.g. : <p>左營彭于晏</p>
● Lorem 是什麼 ?

Extension
<p>
這裡我要<b>粗</ b>，這裡我要<i >斜</ i >。
</ p>
<p>
<bi g>大</ bi g>中中中<s ma l l >小</ s ma l l >
</ p>
<p>
18公克的H<s ub>2</ s ub>O大約有6*10<s up>23</ s up>個
</ p>
something strange here ...

Extension
<p>
</ p>
<p>
</ p>
<p>
</ p>

Extension
<p>
</ p>
<p>
</ p>
<br >
<p>
</ p>
分隔線請使用<hr>
我們不會用這種方法
We will explain later

<! - - 最簡單超連結使用方式 - - >
<a hr e f =" ht t ps : / / googl e . c om" >點我去Googl e 首頁</ a >
<a hr e f =" ht t ps : / / googl e . c om" t a r ge t =" _bl a nk" >我會用新頁面開啟</ a >
<a hr e f =" ht t ps : / / googl e . c om" t a r ge t =" _s e l f " >我會用原頁面開啟</ a >
Hyperlink & Comment

<i mg s r c =" ht t ps : / / me di a . gi phy. c om/ me di a / YP1t Nwdnr 4PgObva f t / gi phy. gi f " >
<i mg s r c =" 2. gi f " a l t =" Soa p & COVI D- 19" >
<f i gur e >
<i mg s r c =" ht t ps : / / me di a . gi phy. c om/ me di a / YP1t Nwdnr 4PgObva f t / gi phy. gi f " >
<f i gc a pt i on>肥皂 & COVI D- 19</ f i gc a pt i on>
</ f i gur e >
Image
<img>沒有 closing tag
不想找圖片可以點我下載範例圖片

排版逐漸母湯...
為什麼有些物件可以獨立一行，有些物件會擠在同一行?

Block Element & Inline Element
<p> <a>
<div> <span>
<img>
<br>
<hr>
<li>
<ul>
<ol> <h1>~<h6>
<button>
<b>
<i>
<sub>
<sup>

所以我可以...
<i mg s r c =" 2. gi f " wi dt h=" 100px" >
<i mg s r c =" 2. gi f " wi dt h=" 100px" >
<br >
<di v><i mg s r c =" 2. gi f " wi dt h=" 100px" ></ di v>
<di v><i mg s r c =" 2. gi f " wi dt h=" 100px" ></ di v>
something strange here ...
圖片是換行了，但是...

你要確定餒
<p>高大資工</ p>
<p>整天發瘋</ p>
<s pa n><p>高大資工</ p></ s pa n>
<br >
<s pa n><p>整天發瘋</ p></ s pa n>
(A) (B) (C)

所以要怎麼做 ?
<s pa n>
<p>Soa p & COVI D- 19</ p>
<i mg s r c =" 2. gi f " >
</ s pa n>

List
<ul >
<l i >Googl e DSC</ l i >
<l i >W
e b De s i gn Le s s on 1</ l i >
<l i >HㄒM
L寶寶班</ l i >
</ ul >
<ol t ype =" A" >
<l i >Appl e </ l i >
<l i >Ba na na </ l i >
</ ol >

Table
<t a bl e bor der =" 1" >
<t r >
<t d>1- 1</ t d>
<t d>1- 2</ t d>
<t d>1- 3</ t d>
</ t r >
<t r >
<t d>2- 1</ t d>
<t d>2- 2</ t d>
<t d>2- 3</ t d>
</ t r >
</ t abl e >
A little hard ! 請小心服用

Table+
<c a pt i on>A Ta bl e</ capt i on>
<t r >
<t d>1- 1</ t d>
<t d>1- 2</ t d>
<t d>1- 3</ t d>
</ t r >
<t r >
<t d>2- 1</ t d>
<t d>2- 2</ t d>
<t d>2- 3</ t d>
</ t r >
</ t abl e >

Table++
<t hea d>
<c a pt i on>A Ta bl e</ capt i on>
<t r >
<t h>col umn 1</ t h>
</ t r >
</ t he ad>
<t body>
( 略)
</ t body>
</ t abl e >

Table 4.0
( 略)
<t r >
<t d c ol s pan=" 2" >我ㄔ艮月半</ t d>
<t d>1- 2</ t d>
<t d>會被擠出去</ t d>
</ t r >
<t r >
<t d>2- 1</ t d>
<t d>2- 2</ t d>
<t d>2- 3</ t d>
</ t r >
</ t body>
</ t abl e >
文字想置中? 框線太醜?
We will discuss later

你要確定餒2.0
( 略)
<t r >
<t d r ows pan=" 2" >我ㄔ艮高</ t d>
<t d>1- 2</ t d>
<t d>1- 3</ t d>
</ t r >
<t r >
<t d>2- 1</ t d>
<t d>2- 2</ t d>
<t d>2- 3</ t d>
</ t r >
</ t body>
</ t abl e >
(A) (B)
(C) (D)

Take a break or...
你乾脆來個五百項挑戰好了

新的酷東西
Cascading Style Sheets
網頁專屬的「化妝品」

<! DOCTYPE ht ml >
<ht ml l a ng=" z h- TW
" >
<he a d>
<t i t l e >我的第一個有CSS的HTM
L網頁</ t i t l e >
<l i nk r e l =" s t yl e s he e t " hr e f =" 5. c s s " >
</ he a d>
<body>
<i mg s r c =" 2. gi f " >
<h1>hel l o CSS</ h1>
</ body>
</ ht ml >
初始化
一個HTML可以連結多個CSS
5.html

* {
ma r gi n: 0;
pa ddi ng: 0;
}
初始化
5.css
每個瀏覽器預設的 margin & padding 大小不一樣
Before After

CSS Selector 1
<body>
<i mg s r c =" ba nne r . j pg" >
<h1>he l l o CSS</ h1>
</ body>
5.html
body
img h1
* {
ma r gi n: 0;
pa ddi ng: 0;
}
i mg {
wi dt h: 100%
;
} 5.css
選取img這個tag，並把它的寬度
設為使用者螢幕寬的100%
點我下載 banner.jpg

所有圖片都...
<body>
<i mg s r c =" ba nne r . j pg" >
<i mg s r c =" 2. gi f " >
</ body> 5.html
body
img img
* {
ma r gi n: 0;
pa ddi ng: 0;
}
i mg {
wi dt h: 100%
;
} 5.css
全部的<img>都被選擇到了
h1

獨一無二的美麗
<body>
<i mg i d=" ba nne r " s r c =" ba nne r . j pg" >
<i mg s r c =" 2. gi f " >
</ body> 5.html
body
img
#banner
img
* {
ma r gi n: 0;
pa ddi ng: 0;
}
#ba nne r {
wi dt h: 100%
;
} 5.css
id 跟寫程式宣告變數一樣，不能撞
名，大小寫也有差
h1

Navigation
<body>
<na v>
<s pan>我的網站</ s pan>
<a hr e f =" #" >首頁</ a>
<a hr e f =" #" >最新消息</ a>
<a hr e f =" #" >產品介紹</ a>
<a hr e f =" #" >聯絡我們</ a>
</ nav>
( 略)
</ body>
5.html
body
當遇到同類型的項目想一次修改?
img
#banner
nav img
h1
span a*4

CSS Selector 2
.navItem {
t e xt - de c or a t i on: none ;
c ol or : bl a c k;
}
na v a {
c ol or : bl a c k;
}
method 1
很多東西可以共享一個 class
body
img
#banner
nav img
h1
span a*4
.navItem
method 2
如果太多層的話會有點不妙...
5.css

CSS Premium: SCSS
之後的範例都會用SCSS撰寫
● SASS(Syntactically Awesome
Stylesheets) 語法的升級版
● 巢狀寫法、變數、繼承...
● 一鍵轉換成CSS語法

用SCSS再寫一次
nav {
s pa n {
c ol or : bl a c k;
}
}
body
img
#banner
nav img
h1
span a*4
.navItem

用SCSS再寫一次
nav {
s pa n {
c ol or : bl a c k;
}
. na vI t e m {
c ol or : bl a c k;
}
}
body
img
#banner
nav img
h1
span a*4
.navItem

Partice 1: Navigation
目標：美化導覽列，再加個酷動畫效果好
了
發揮 margin & padding 真正的功能

是要explain了沒 ?
<s pa n>
<p s t yl e =" di s pl a y: i nl i ne ; " >Soa p &
COVI D- 19</ p>
<i mg s r c =" 2. gi f " >
</ s pa n>
CSS語法可以內嵌在HTML裡
複雜的網頁不建議這麼做

Partice 2: Main Article
目標：基礎圖文排版
內距外距再來一次

<body>
( 略)
<i mg i d=" ba nne r " s r c =" ba nne r . j pg" >
<di v i d=" ma i nAr t i c l e " >
<i mg s r c =" 2. gi f " >
<p>Lor e m50. . . </ p>
</ di v>
</ body>
</ ht ml >
Partice 2: Main Article
適當的組織網頁內容會比較好維護
5.html

Partice 3: Three Column Context
目標：整齊的三欄版面
flex 再來一次

<body>
( 略)
<di v i d=" c ont e nt " >
<di v c l a s s =" c ol " >
<i mg s r c =" ht t ps : / / pi c s um. phot os / 300/ 200" a l t =" " >
<p>Lor e m100</ p>
</ di v>
</ di v>
</ body>
</ ht ml >
Partice 3: Three Column Context
適當的組織網頁內容會比較好維護
5.html
複製2次紅框範圍

Thank You !
請幫我填回饋單~

Git: 版本控制
是否有遇過:
● 報告只有一個檔案，想回溯卻已經存檔關掉了
● 一修改就另存新檔，同樣一個東西越來越多
(20210301 -> 20210302 -> 20210302二修 -> 20210302最終...)
● 一人協作還算簡單，但如果是多人協作...
(20210301紫紅 -?> 20210229紫藍最終版 <-?-> 20210301新增結尾最終最新)

Git Download
Application required on this lesson:
● Git
● Sourcetree (GUI介面，操作Git更方便)

你是指令魔人嗎 ?
寶寶班不應該上這個

都已經2021年了
這才是我要的

GitHub: 全球最大男性交友平台
● 版本控制的軟體代管服務平台
● 免費存放無限個開源專案
● 又是微軟的東西(收購)
● 男性占比95%

上架我們的作品
(1) 取個響亮的名字
(2) 專案是否要開源
Step 1: GitHub 建立空專案

(1) 建立git
(2) 本地專案路徑 & 專案名稱
Step 2: Sourcetree 進行版控
專案根目錄名稱 & sourcetree專
案名稱 & GitHub Repositiory
Name 建議一致

(1) 按下 "Stage All" 讓
檔案進入暫存區
(2) 輸入commit名稱，
按下 "Commit"
Step 3: 本地建第一個 commit
(3) 開啟終端機

(1) 指令有三行
(2) 成功在GitHub
建立main分支
Step 4: 無腦複製指令，上傳 GitHub

(1) 其他人可以追蹤/按讚專案，
有興趣幫忙開發甚至可以fork
(2) 最後一次commit會顯示在這
裡
Step 5: 欣賞一下自己的專案三分鐘
(3) 這個專案使用了哪些語言及比例

啟用 GitHub Pages
Step 6: 大功告成 !
點下Save之後，上面那個網址就正式啟用囉 !

狠狠撸

Developer Student Clubs NUK - Web Fundamentals

Recommended

More Related Content

Similar to Developer Student Clubs NUK - Web Fundamentals (20)

Recently uploaded (18)

Developer Student Clubs NUK - Web Fundamentals