JL
Uploaded byJiaxuan Lin
130 views

Developer Student Clubs NUK - Web Fundamentals

本文件介绍了网页开发的基础知识，包括HTML和CSS的基本概念、标签结构、环境搭建和版本控制。内容包括如何使用不同的IDE、HTML元素的各类应用、样式表的设置以及如何将网页上传到GitHub等。通过工作坊的形式，参与者将能实践构建自己的网页课程。

Embed presentation

Download to read offline
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 > <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 opening tag closing tag content element
<! 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 opening tag closing tag content 巢狀元素(nesting element)
<! DOCTYPE ht ml > <ht ml l a ng=" z h- TW " > <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 >我的第一個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> 這裡我要<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>
Extension <p> 這裡我要<b>粗</ b>，這裡我要<i >斜</ i >。 </ p> <p> <bi g>大</ bi g>中中中<s ma l l >小</ s ma l l > </ p> <br > <p> 18公克的H<s ub>2</ s ub>O大約有6*10<s up>23</ s up>個 </ 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 >
Iframe 影片網址
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+ <t a bl e bor der =" 1" > <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 a bl e bor der =" 1" > <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 h>col umn 2</ t h> <t h>col umn 3</ t h> </ t r > </ t he ad> <t body> ( 略) </ t body> </ t abl e >
Table 4.0 <t a bl e bor der =" 1" > ( 略) <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 a bl e bor der =" 1" > ( 略) <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> <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 >我的第一個有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" > <h1>he l l o CSS</ h1> <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" > <h1>he l l o CSS</ h1> <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 { t e xt - de c or a t i on: none ; 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 { t e xt - de c or a t i on: none ; 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" > <h1>he l l o CSS</ h1> <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次紅框範圍
Workshop: 自己的課表
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之後，上面那個網址就正式啟用囉 !

More Related Content

PDF
Html&css基础
byKenerLinfeng
 
PPT
让我们的页面跑得更快
byli qiang
 
PPT
Creating CSS Template with Barrie North
byJohn Coonen
 
PDF
[译]Efficient, maintainable CSS
byjeannewoo
 
PPTX
1.[web security share]google_hacking
byMike Ching
 
PPT
Couleurs formes et saveurs
byclamuraller
 
PDF
Meelad e nabavi aur maslak e shafayee
byMuhammad Tariq
 
PDF
桂木稿（A5）改訂
byKenji Katsuragi
 
Html&css基础
byKenerLinfeng
 
让我们的页面跑得更快
byli qiang
 
Creating CSS Template with Barrie North
byJohn Coonen
 
[译]Efficient, maintainable CSS
byjeannewoo
 
1.[web security share]google_hacking
byMike Ching
 
Couleurs formes et saveurs
byclamuraller
 
Meelad e nabavi aur maslak e shafayee
byMuhammad Tariq
 
桂木稿（A5）改訂
byKenji Katsuragi
 

Similar to Developer Student Clubs NUK - Web Fundamentals

PPTX
網頁三本柱之Html與css
byAaron King
 
PDF
HTML 入門 - 前端工程開發實務訓練
byJoseph Chiang
 
PDF
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
byKuro Hsu
 
PDF
HTML 語法教學
byShengyou Fan
 
PPT
CSS 菜鳥救星
byYing-Hsiang Liao
 
PPT
HTML教學
byTONY LEE
 
PDF
給高中生的Web Programming教材
byShang-Pin Ma
 
PDF
CSS 語法教學
byShengyou Fan
 
PDF
輕鬆學會網頁前端
byXi-Zhe Lin
 
PDF
Web 01
bySamantha Lin
 
PPTX
CSS 分享 (4) Box model 等，實習
by知世‧安索帕 台北 (使用經驗設計中心)
 
PPTX
Html
byTaiShunHuang
 
PDF
[數學軟體應用] 05 HTML+CSS
byYen-lung Tsai
 
PPT
Html & Css
byLeo Lo
 
PPT
Html02
byHt Wang
 
PDF
程式人雜誌 -- 2014 年9月號
by鍾誠 陳鍾誠
 
PDF
OpenWebSchool - 01 - WWW Intro
byHung-yu Lin
 
PPTX
CSS 分享 (2) CSS 基本概念與語法
by知世‧安索帕 台北 (使用經驗設計中心)
 
PPT
Html03
byHt Wang
 
PDF
6. CSS
byriomusi
 
網頁三本柱之Html與css
byAaron King
 
HTML 入門 - 前端工程開發實務訓練
byJoseph Chiang
 
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
byKuro Hsu
 
HTML 語法教學
byShengyou Fan
 
CSS 菜鳥救星
byYing-Hsiang Liao
 
HTML教學
byTONY LEE
 
給高中生的Web Programming教材
byShang-Pin Ma
 
CSS 語法教學
byShengyou Fan
 
輕鬆學會網頁前端
byXi-Zhe Lin
 
Web 01
bySamantha Lin
 
CSS 分享 (4) Box model 等，實習
by知世‧安索帕 台北 (使用經驗設計中心)
 
Html
byTaiShunHuang
 
[數學軟體應用] 05 HTML+CSS
byYen-lung Tsai
 
Html & Css
byLeo Lo
 
Html02
byHt Wang
 
程式人雜誌 -- 2014 年9月號
by鍾誠 陳鍾誠
 
OpenWebSchool - 01 - WWW Intro
byHung-yu Lin
 
CSS 分享 (2) CSS 基本概念與語法
by知世‧安索帕 台北 (使用經驗設計中心)
 
Html03
byHt Wang
 
6. CSS
byriomusi
 

Developer Student Clubs NUK - Web Fundamentals