臺灣海洋大學 資訊工程系 馬尚彬
Web程式設計簡介
(Web Programming Introduction)
HTML+CSS+JavaScript
是否(大概)聽過以下名詞?
2
Internet
WWW
(World Wide
Web)
Web Page
Web Site
Youtube
Google
Map
Facebook
HTML
JavaScript
你瀏覽網頁嗎?
3
 是否試過[另存網頁]?
 點擊儲存的網頁會看到甚麼?
 是否觀看過網頁原始碼?
 [檢視網頁原始碼]功能;或
 直接用文字編輯器看儲存的網頁檔案
網頁原始碼
4
所有網頁都是遠端Server來的,瀏覽
器再將網頁透過URL下載到本地端電
腦(或手機或平版)
網頁包含甚麼?
5
 文字
 其實網頁本來就是網際網路上的文件
 非文字內容
 圖片、圖形、聲音、影片、應用程式
網頁的核心: 標籤(Tag)
6
 網頁的語法遵循HTML (HyperText Markup Language)
 成對標籤:
 <h1>最大標題</h1>
 <p>字型與大小設定</p>
 單一標籤:
 換行<br>
 標籤屬...
有哪一些標籤可以使用?
7
 目前的標準已轉移到HTML5
 https://developer.mozilla.org/en-
US/docs/Web/HTML/Element
第一個HTML5程式
8
標頭 (head)
主體(body)
註解(comment)
編輯與執行
9
 編輯
 使用一般記事本即可編輯HTML5
 建議使用Notepad++
 亦可使用其他更豐富之編輯器,如Dreamweaver、Aptana
 要將附檔名存成.html或.htm
 執行
 用瀏覽器即可開啟執行網...
超連結(Hyperlink)
10
 範例:
 <a href="http://www.google.com.tw">Google</a>
 <a href="mailto:albert@ntou.edu.tw">寄信給馬老師</a>
...
圖片(Image)
11
 範例:
 <img src = "tabletennis.jpg" alt = "世桌賽金牌" />
 <img src = "tabletennis.jpg" width = "400" height = "...
表格(Table)1
12
 如何產生以下的功課表網頁?
表格(Table)2
13
 範例:
表格(Table)3
14
 範例 (續):
表格(Table)4
15
 一個table分為三區: 頭(thead)、腳(tfoot)、身體
(tbody)
 每一區都可加入表格行(table row, tr),每個表格行可加
入表格資料(table data, td)
 rows...
表單(Form)1
16
 如何產生以下的輸入選單?
表單(Form)2
17
 範例:
表單(Form)3
18
 Input標籤可允許的type屬性:
• button
• checkbox
• color
• date
• datetime
• datetime-local
• email
• file
• hidden
•...
其他標籤列表1
19
 <p></p>: 段落
 <br >: break 斷行
 <hr >: horizontal line 水平橫線
 <ol></ol>: ordered list 有順序編號之清單
 <ul></ul>: u...
其他標籤列表2
20
 <b>: 粗體字
 <i>: 斜體字
 <big>: 加大字體
 <small>: 縮小字體
 <sub>:下標
 <sup>:上標
 <tt>: 單行間距字型
 <u>: 加底線
練習1
21
 目前已有一個HTML檔: example-html-partial.html,其內容
為條列商品名稱之表格,請將其改寫為包含商品價格與
「聯絡經理」連結(可自動開啟e-mail程式)之表格。
習題下載網址:http://goo...
CSS (Cascading Style Sheets)1
22
 Why CSS?
 是否發現自己編寫的HTML與一般網站中的網頁有很大
的差異?
CSS (Cascading Style Sheets)2
23
 HTML v.s CSS
 HTML 只用來設定網頁結構與內容
 CSS則負責裝飾網頁
 CSS Demo
 https://developer.mozilla.or...
CSS規則1
24
 CSS 可以適用於特定的HTML tag、特定類別(class)
的HTML元素(element)或特定ID的HTML元素
(element)
 多個適用對象之間以逗點(,)分隔
 CSS屬性
 屬性定義以大括弧(...
CSS規則2
25
選擇器(Selector)可挑選出特定的HTML tag、特定類別
(class)的HTML元素(.class形式)、或特定ID的HTML元素(#id
形式),然後套用後面宣告中的CSS屬性。
(資料來源:W3School)
CSS規則3
26
 標籤選擇器(Type Selector)
 p { font-size: 12pt; font-family: calibri, helvetica, sans-serif;}
 把<p>元素內的文字之字型設定為ca...
CSS規則4
27
 ID選擇器(ID selector)
 #intro { font-family: 微軟正黑體, 標楷體; }
 將id為intro之HTML元素之字型設定為微軟正黑體; 若微軟正黑體
不支援,則設定為標楷體。
 ...
如何在HTML中加入CSS?
28
在HTML標頭中加入<style>標籤,
設定CSS規則!
在HTML中加入了CSS
29
CSS使用前: CSS使用後:
背景(Background)
30
 可設定背景顏色與圖片
 範例:
 背景色: 淺灰色
 背景圖片: ntoulogo.gif
 固定放置於右下角、不重複顯示。
邊框(Border)1
31
 CSS可以細部設定HTML元素之留白、邊框、邊界
等細節。
Margin: 邊界
Border: 邊框
Padding: 留白
Content: 主內容
邊框(Border)2
32
 範例
CSS規則-後代(descendant)選擇器
33
 後代選擇器
 利用Tag之間的階層關係來做選擇
 範例
 只有<table>底下的<td>會套用這兩個規則
如何使用外部CSS?
34
 在HTML的<head>部分使用<link>標籤
 因此,我們可以將CSS設定獨立一份檔案,並命名
為xxx.css,讓多個HTML網頁連結使用。
<link rel = "stylesheet" type =...
練習2
35
 目前已有一個HTML檔: example-html+css-partial.html,請
將其改寫,增加三個CSS規則:
 (1) 字型改為微軟正黑體
 (2) 表格標頭之背景色改為#C8C8C8 (灰色)
 (3) 新...
JavaScript1
36
 到目前我們開發的網頁(HTML+CSS)只是文件,無
法完全根據使用者互動產生變化。
 JavaScript是讓網頁可以動起來的方法!
JavaScript2
37
 JavaScript is NOT Java!
 Java是編譯式(compiled)語言。
 JavaScript是直譯式(interpreted)語言,不需要編譯
(compile)
 只要有瀏覽器,...
第一個JavaScript程式
38
基本JavaScript指令
39
 window.alert("透過跳出式視窗顯示的訊息");
 window.prompt("要求使用者輸入一些資料:");
 document.write("<h1>你想直接印在網頁的文字內
容(Ta...
變數(Variable)宣告與型態
 變數宣告方式:
 一般變數宣告:
[var] 變數名稱[=變數值];
 範例: var count = 10;
 基本資料型態:
 number 數字(有小數點)
 如20.46
 strin...
函式(Function)呼叫與宣告
41
 函式呼叫範例:
 var count = parseInt("10");
 將字串“10”轉換成數字10
 函式宣告範例:
 計算球體體積
物件(Object)操作
42
 利用「.」來連接 「物件」與其所擁有的屬性
(Property)以及具備的功能(Method)
 物件名稱.屬性名稱
 範例: Math.Pi
 物件名稱.方法名稱()
 範例: Math.rando...
透過JavaScript在網頁上輸入資料
43
 方法一: 透過window.prompt()取得資料
 var name = window.prompt("請輸入姓名:“)
 方法二: 透過HTML Form取得資料
 HTML:
...
透過JavaScript在網頁上輸出資料
44
 方法一: 透過document.write()寫HTML code
 方法二: 修改HTML元素的內容
 HTML:
 JavaScript:
其他程式邏輯
45
 判斷式(condition)
 迴圈(loop)
HTML + CSS + JavaScript
46
 HTML: 網頁結構與內容
 CSS: 網頁的呈現與美觀
 JavaScript: 網頁的功能
練習3
47
 目前已有一個HTML檔: example-html+css+form+javascript-
partial ,其可透過點擊[銷售分析]按鈕計算一位銷售員銷
售產品後可得到的佣金,請將其改寫,判斷當佣金高於
30000元時,額...
何謂完整的Web Application?
48
 必須有「前端」與「後端」
 前端:網頁的外觀與使用者介面
 技術:HTML, CSS, JavaScript (jQuery), Flash
 執行環境:瀏覽器
 後端:接受前端的請...
其他Web技術
49
 Facebook
 Google Map
 Youtube
 Google Calendar
 Flicker / Picasa
練習4
50
 目前已有一個美食筆記(slideshow/index.html)的網
頁,請將其從展示圖片的功能改為展示Youtube影
片的功能。
學習資源
51
 MDN
 https://developer.mozilla.org/en/HTML/Element
 w3schools
 http://www.w3schools.com/tags/default.asp
 CS...
Any Question?
52
Upcoming SlideShare
Loading in …5
×

給高中生的Web Programming教材

1,590 views

Published on

給高中生的Web programming教材,包含HTML、CSS以及JavaScript。

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,590
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

給高中生的Web Programming教材

  1. 1. 臺灣海洋大學 資訊工程系 馬尚彬 Web程式設計簡介 (Web Programming Introduction) HTML+CSS+JavaScript
  2. 2. 是否(大概)聽過以下名詞? 2 Internet WWW (World Wide Web) Web Page Web Site Youtube Google Map Facebook HTML JavaScript
  3. 3. 你瀏覽網頁嗎? 3  是否試過[另存網頁]?  點擊儲存的網頁會看到甚麼?  是否觀看過網頁原始碼?  [檢視網頁原始碼]功能;或  直接用文字編輯器看儲存的網頁檔案
  4. 4. 網頁原始碼 4 所有網頁都是遠端Server來的,瀏覽 器再將網頁透過URL下載到本地端電 腦(或手機或平版)
  5. 5. 網頁包含甚麼? 5  文字  其實網頁本來就是網際網路上的文件  非文字內容  圖片、圖形、聲音、影片、應用程式
  6. 6. 網頁的核心: 標籤(Tag) 6  網頁的語法遵循HTML (HyperText Markup Language)  成對標籤:  <h1>最大標題</h1>  <p>字型與大小設定</p>  單一標籤:  換行<br>  標籤屬性(Attribute):  <img src = "tabletennis.jpg" width = "400" height = "271" alt = "世桌賽金牌">
  7. 7. 有哪一些標籤可以使用? 7  目前的標準已轉移到HTML5  https://developer.mozilla.org/en- US/docs/Web/HTML/Element
  8. 8. 第一個HTML5程式 8 標頭 (head) 主體(body) 註解(comment)
  9. 9. 編輯與執行 9  編輯  使用一般記事本即可編輯HTML5  建議使用Notepad++  亦可使用其他更豐富之編輯器,如Dreamweaver、Aptana  要將附檔名存成.html或.htm  執行  用瀏覽器即可開啟執行網頁  開發期間建議用Chrome或Firefox,測試期間要確保IE、 Chrome、 Firefox、Opera四種主流瀏覽器均可支援  若要能想一般網站一樣讓所有人連結,需架設Web Server。
  10. 10. 超連結(Hyperlink) 10  範例:  <a href="http://www.google.com.tw">Google</a>  <a href="mailto:albert@ntou.edu.tw">寄信給馬老師</a>  <a href="浪費.mp3">音樂</a>  <a href="動畫.ogg">影片</a>  <a href="#menu">主選單</a>  <a>是錨(anchor)的意思,href是指超連結(hyper reference)  href可放相對路徑或絕對路徑
  11. 11. 圖片(Image) 11  範例:  <img src = "tabletennis.jpg" alt = "世桌賽金牌" />  <img src = "tabletennis.jpg" width = "400" height = "271" alt = "世桌賽金牌" />  <img src = "tabletennis.jpg" width = "200" height = "135" alt = "世桌賽金牌" />  透過width和height屬性設定,可以做到放大縮小 圖片的效果,也可以讓圖片載入更快。
  12. 12. 表格(Table)1 12  如何產生以下的功課表網頁?
  13. 13. 表格(Table)2 13  範例:
  14. 14. 表格(Table)3 14  範例 (續):
  15. 15. 表格(Table)4 15  一個table分為三區: 頭(thead)、腳(tfoot)、身體 (tbody)  每一區都可加入表格行(table row, tr),每個表格行可加 入表格資料(table data, td)  rowspan屬性: 將一個td往橫的方向擴展幾格  colspan 屬性: 將一個td往縱的方向擴展幾格
  16. 16. 表單(Form)1 16  如何產生以下的輸入選單?
  17. 17. 表單(Form)2 17  範例:
  18. 18. 表單(Form)3 18  Input標籤可允許的type屬性: • button • checkbox • color • date • datetime • datetime-local • email • file • hidden • image • month • number • password • radio • range • reset • search • submit • tel • text • time • url • week https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
  19. 19. 其他標籤列表1 19  <p></p>: 段落  <br >: break 斷行  <hr >: horizontal line 水平橫線  <ol></ol>: ordered list 有順序編號之清單  <ul></ul>: unordered list 無順序之項目清單  <li></li>: list item 清單項目  <frameset></frameset>: 框架集  <frame></frame>: 框架  <iframe></ifame>: 內部框架
  20. 20. 其他標籤列表2 20  <b>: 粗體字  <i>: 斜體字  <big>: 加大字體  <small>: 縮小字體  <sub>:下標  <sup>:上標  <tt>: 單行間距字型  <u>: 加底線
  21. 21. 練習1 21  目前已有一個HTML檔: example-html-partial.html,其內容 為條列商品名稱之表格,請將其改寫為包含商品價格與 「聯絡經理」連結(可自動開啟e-mail程式)之表格。 習題下載網址:http://goo.gl/RaR10
  22. 22. CSS (Cascading Style Sheets)1 22  Why CSS?  是否發現自己編寫的HTML與一般網站中的網頁有很大 的差異?
  23. 23. CSS (Cascading Style Sheets)2 23  HTML v.s CSS  HTML 只用來設定網頁結構與內容  CSS則負責裝飾網頁  CSS Demo  https://developer.mozilla.org/en-US/demos/tag/tech:css3
  24. 24. CSS規則1 24  CSS 可以適用於特定的HTML tag、特定類別(class) 的HTML元素(element)或特定ID的HTML元素 (element)  多個適用對象之間以逗點(,)分隔  CSS屬性  屬性定義以大括弧({ })括住  屬性定義的寫法:屬性名稱:屬性值  多個屬性定義間以分號(;)分隔
  25. 25. CSS規則2 25 選擇器(Selector)可挑選出特定的HTML tag、特定類別 (class)的HTML元素(.class形式)、或特定ID的HTML元素(#id 形式),然後套用後面宣告中的CSS屬性。 (資料來源:W3School)
  26. 26. CSS規則3 26  標籤選擇器(Type Selector)  p { font-size: 12pt; font-family: calibri, helvetica, sans-serif;}  把<p>元素內的文字之字型設定為calibri; 若calibri不支援,則設 定為helvetica; 若helvetica再不支援,則設定為sans-serif。  類別選擇器(Class Selector)  .special { color: purple; }  把class屬性設定為special之HTML元素之顏色設定為紫色。 設定顏色的好用工具: http://www.w3schools.com/tags/ref_colorpicker.asp
  27. 27. CSS規則4 27  ID選擇器(ID selector)  #intro { font-family: 微軟正黑體, 標楷體; }  將id為intro之HTML元素之字型設定為微軟正黑體; 若微軟正黑體 不支援,則設定為標楷體。  假類別選擇器(pseudo-class selector)  針對預設的行為觸發CSS規則的套用  a:hover { background-color: yellow; }  滑鼠游標移至超連結時,背景色改為黃色。
  28. 28. 如何在HTML中加入CSS? 28 在HTML標頭中加入<style>標籤, 設定CSS規則!
  29. 29. 在HTML中加入了CSS 29 CSS使用前: CSS使用後:
  30. 30. 背景(Background) 30  可設定背景顏色與圖片  範例:  背景色: 淺灰色  背景圖片: ntoulogo.gif  固定放置於右下角、不重複顯示。
  31. 31. 邊框(Border)1 31  CSS可以細部設定HTML元素之留白、邊框、邊界 等細節。 Margin: 邊界 Border: 邊框 Padding: 留白 Content: 主內容
  32. 32. 邊框(Border)2 32  範例
  33. 33. CSS規則-後代(descendant)選擇器 33  後代選擇器  利用Tag之間的階層關係來做選擇  範例  只有<table>底下的<td>會套用這兩個規則
  34. 34. 如何使用外部CSS? 34  在HTML的<head>部分使用<link>標籤  因此,我們可以將CSS設定獨立一份檔案,並命名 為xxx.css,讓多個HTML網頁連結使用。 <link rel = "stylesheet" type = "text/css" href = "table.css">
  35. 35. 練習2 35  目前已有一個HTML檔: example-html+css-partial.html,請 將其改寫,增加三個CSS規則:  (1) 字型改為微軟正黑體  (2) 表格標頭之背景色改為#C8C8C8 (灰色)  (3) 新增滑鼠移至<td>會將<td>背景改為#FFFFCC (淡黃色)
  36. 36. JavaScript1 36  到目前我們開發的網頁(HTML+CSS)只是文件,無 法完全根據使用者互動產生變化。  JavaScript是讓網頁可以動起來的方法!
  37. 37. JavaScript2 37  JavaScript is NOT Java!  Java是編譯式(compiled)語言。  JavaScript是直譯式(interpreted)語言,不需要編譯 (compile)  只要有瀏覽器,就可以執行JavaScript  JavaScript可以讓網頁動起來  可以回應使用者的要求  使用者點擊button、使用者移動滑鼠、使用者按下鍵盤  可以抓取目前網頁的內容、執行運算程式、再修改目前 網頁的內容
  38. 38. 第一個JavaScript程式 38
  39. 39. 基本JavaScript指令 39  window.alert("透過跳出式視窗顯示的訊息");  window.prompt("要求使用者輸入一些資料:");  document.write("<h1>你想直接印在網頁的文字內 容(Tag可以派上用場了)</h1>");
  40. 40. 變數(Variable)宣告與型態  變數宣告方式:  一般變數宣告: [var] 變數名稱[=變數值];  範例: var count = 10;  基本資料型態:  number 數字(有小數點)  如20.46  string 文字(用雙引號或單引號括住)  如“周杰倫”、'Nexus 7'  boolean 布林值  true/false 40
  41. 41. 函式(Function)呼叫與宣告 41  函式呼叫範例:  var count = parseInt("10");  將字串“10”轉換成數字10  函式宣告範例:  計算球體體積
  42. 42. 物件(Object)操作 42  利用「.」來連接 「物件」與其所擁有的屬性 (Property)以及具備的功能(Method)  物件名稱.屬性名稱  範例: Math.Pi  物件名稱.方法名稱()  範例: Math.random()
  43. 43. 透過JavaScript在網頁上輸入資料 43  方法一: 透過window.prompt()取得資料  var name = window.prompt("請輸入姓名:“)  方法二: 透過HTML Form取得資料  HTML:  JavaScript: 點擊事件(event)
  44. 44. 透過JavaScript在網頁上輸出資料 44  方法一: 透過document.write()寫HTML code  方法二: 修改HTML元素的內容  HTML:  JavaScript:
  45. 45. 其他程式邏輯 45  判斷式(condition)  迴圈(loop)
  46. 46. HTML + CSS + JavaScript 46  HTML: 網頁結構與內容  CSS: 網頁的呈現與美觀  JavaScript: 網頁的功能
  47. 47. 練習3 47  目前已有一個HTML檔: example-html+css+form+javascript- partial ,其可透過點擊[銷售分析]按鈕計算一位銷售員銷 售產品後可得到的佣金,請將其改寫,判斷當佣金高於 30000元時,額外顯示圖片“congratulations.jpg ” 。
  48. 48. 何謂完整的Web Application? 48  必須有「前端」與「後端」  前端:網頁的外觀與使用者介面  技術:HTML, CSS, JavaScript (jQuery), Flash  執行環境:瀏覽器  後端:接受前端的請求(request)、進行運算與資料處理  技術:PHP、.Net、JavaEE  執行環境:伺服器(Server)
  49. 49. 其他Web技術 49  Facebook  Google Map  Youtube  Google Calendar  Flicker / Picasa
  50. 50. 練習4 50  目前已有一個美食筆記(slideshow/index.html)的網 頁,請將其從展示圖片的功能改為展示Youtube影 片的功能。
  51. 51. 學習資源 51  MDN  https://developer.mozilla.org/en/HTML/Element  w3schools  http://www.w3schools.com/tags/default.asp  CSS菜鳥救星  http://www.slideshare.net/clayliao/css101-for-beginner  接案我最行!JavaScript & Ajax 商業範例必殺技
  52. 52. Any Question? 52

×