Home
Explore
Submit Search
Upload
Login
Signup
Advertisement
給高中生的Web Programming教材
Report
Shang-Pin Ma
Follow
Associate Professor of National Taiwan Ocean University
Mar. 21, 2014
•
0 likes
3 likes
×
Be the first to like this
Show More
•
2,203 views
views
×
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Check these out next
Migrating Your Data Warehouse to Amazon Redshift (DAT337) - AWS re:Invent 2018
Amazon Web Services
SharePoint Framework Teams タブ開発基礎講座
Hiroaki Oikawa
セマンティック・ウェブのためのRdf owl入門解説.ch5
Takahiro Kubo
Re-Host or Re-Architect: Understanding the Why and How of Very Different Path...
Amazon Web Services
自然言語処理で読み解く金融文書
Takahiro Kubo
AWS Summit Seoul 2023 | 팬덤을 위한 아티스트 IP 기반의 디지털 콜렉터블 플랫폼
Amazon Web Services Korea
Migrate from Oracle to Aurora PostgreSQL: Best Practices, Design Patterns, & ...
Amazon Web Services
LogicMonitor: An Overview
James McCabe
1
of
52
Top clipped slide
給高中生的Web Programming教材
Mar. 21, 2014
•
0 likes
3 likes
×
Be the first to like this
Show More
•
2,203 views
views
×
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download Now
Download to read offline
Report
Education
給高中生的Web programming教材,包含HTML、CSS以及JavaScript。
Shang-Pin Ma
Follow
Associate Professor of National Taiwan Ocean University
Advertisement
Advertisement
Advertisement
Recommended
個人データ連携から見えるSociety5.0~法令対応に向けた技術的な活用事例について~
Scalar, Inc.
387 views
•
23 slides
Azure Datalake 大全
Daiyu Hatakeyama
2.6K views
•
263 slides
RDF Semantic Graph「RDF 超入門」
オラクルエンジニア通信
9.7K views
•
100 slides
Node-REDからREST APIに接続
Hitachi, Ltd. OSS Solution Center.
878 views
•
11 slides
Microsoft AI Platform Overview
David Chou
3.5K views
•
52 slides
統合ID管理入門
山田(YAMADA) 達司(Tatsushi)
2.6K views
•
79 slides
More Related Content
Slideshows for you
(20)
Migrating Your Data Warehouse to Amazon Redshift (DAT337) - AWS re:Invent 2018
Amazon Web Services
•
1.9K views
SharePoint Framework Teams タブ開発基礎講座
Hiroaki Oikawa
•
4.2K views
セマンティック・ウェブのためのRdf owl入門解説.ch5
Takahiro Kubo
•
2.5K views
Re-Host or Re-Architect: Understanding the Why and How of Very Different Path...
Amazon Web Services
•
1.4K views
自然言語処理で読み解く金融文書
Takahiro Kubo
•
1.4K views
AWS Summit Seoul 2023 | 팬덤을 위한 아티스트 IP 기반의 디지털 콜렉터블 플랫폼
Amazon Web Services Korea
•
114 views
Migrate from Oracle to Aurora PostgreSQL: Best Practices, Design Patterns, & ...
Amazon Web Services
•
1.8K views
LogicMonitor: An Overview
James McCabe
•
790 views
Microsoft Viva Insights Overview 概要.pdf
ayako uruno
•
255 views
Keycloakの動向
Yuichi Nakamura
•
2.8K views
Accelerate Cloud Migration to AWS Cloud with Cognizant Cloud Steps
Amazon Web Services
•
1.2K views
SPARQL 사용법
홍수 허
•
804 views
How can HR make the difference?
SDWorxLLN
•
4K views
The Evolution of the HR Business Partner
ScottMadden, Inc.
•
7.5K views
Interoperability, SNOMED, HL7 and FHIR
Tim Benson
•
4.6K views
DNS, DNSSECの仕組み
Yoshitaka Hirano
•
210 views
An Intro to Building and Optimizing a Hybrid Cloud on AWS
Amazon Web Services
•
1.2K views
グラフデータベースは如何に自然言語を理解するか?
Insight Technology, Inc.
•
4.2K views
AI-Driven Personalized Email Marketing
Databricks
•
381 views
Serverless AWS構成でセキュアなSPAを目指す
Masayuki Kato
•
16.9K views
Similar to 給高中生的Web Programming教材
(20)
2010 01-07周五分享 前端的那些事儿-小米猪
小 米猪
•
225 views
Html&css培训 舒克
jay li
•
1.3K views
CSS 菜鳥救星
Ying-Hsiang Liao
•
3.3K views
PG Training
Russle Cheng
•
5.4K views
Div+css培训
pan quanjin
•
323 views
Inside the-browser
jy03845581
•
376 views
Inside the-browser
jy03845581
•
727 views
Div+css布局
flyxiang228
•
547 views
HTML CSS Javascript 语法手册
Ying wei (Joe) Chou
•
3.8K views
Web设计 3 java_script初探(程序员与设计师的双重眼光)
ziggear
•
320 views
网页制作基础
loo2k
•
269 views
Html&css基础
KenerLinfeng
•
308 views
HTML & JavaScript
Sanji Zhang
•
1.7K views
淘宝网前端开发面试题
Lumend
•
929 views
CSS 分享 (2) CSS 基本概念與語法
知世‧安索帕 台北 (使用經驗設計中心)
•
3.3K views
前端基础知识回顾
Wu tianhao
•
435 views
网页制作基础
loo2k
•
284 views
軟體弱點掃描
Rainmaker Ho
•
707 views
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
•
1.1K views
2314 365737
open
•
380 views
Advertisement
More from Shang-Pin Ma
(11)
2017-refactoring-02-重複的程式碼
Shang-Pin Ma
•
570 views
2017-refactoring-01-簡介
Shang-Pin Ma
•
791 views
2017-refactoring-實習教材
Shang-Pin Ma
•
53 views
2017-refactoring-06-魔術數字
Shang-Pin Ma
•
262 views
2017-refactoring-05-巨大的類別
Shang-Pin Ma
•
286 views
2017-refactoring-04-過多的參數
Shang-Pin Ma
•
317 views
2017-refactoring-03-過長的函式
Shang-Pin Ma
•
362 views
物件導向設計原則實習
Shang-Pin Ma
•
1.3K views
類別圖實習
Shang-Pin Ma
•
2.3K views
物件關係實習
Shang-Pin Ma
•
2.4K views
如何學好Java
Shang-Pin Ma
•
2K views
Recently uploaded
(20)
★可查可存档〖制作莫道克大学文凭证书毕业证〗
tujjj
•
2 views
PRÉ ALWYS.pptx
PROFESIRLEITELLES
•
2 views
BOT、BTO、ROT、OT招商契約書-招商企劃-教材詹翔霖老師.docx
https://mypaper.pchome.com.tw/chanrs/post/1381109792
•
2 views
★可查可存档〖制作斯图加特大学文凭证书毕业证〗
tujjj
•
2 views
★可查可存档〖制作哥廷根大学文凭证书毕业证〗
tujjj
•
2 views
美国:乔治亚大学毕业证办理流程
zumuka
•
4 views
QQ微信819 4343办UOW假毕业证成绩单,办卧龙岗大学本科毕业证书,办UOW硕士假文凭,办UOW研究生学位证书,办UOW学历认证,办卧龙岗大学高仿文...
ColumbiaDiplomaColum
•
9 views
m_1_langa_tsm-nc_1702_2_c.pdf
QueenaGao2
•
0 views
79弗吉尼亚大学.pdf
Lsa7781
•
2 views
★可查可存档〖制作阿萨巴斯卡大学文凭证书毕业证〗
mmmm282537
•
3 views
#学位证靠谱办泰勒学院文凭证书全套
qghfsvkwiqiubridge
•
2 views
★可查可存档〖制作怀特克利夫艺术设计学院文凭证书毕业证〗
tujjj
•
2 views
經營契約書-BOT、BTO、ROT、OT年國道服務區-招商企劃-教材詹翔霖老師.pdf
https://mypaper.pchome.com.tw/chanrs/post/1381109792
•
3 views
★可查可存档〖制作多特蒙德工业大学文凭证书毕业证〗
tujjj
•
2 views
餐廳空間委託經營管理案契約書-國家電影文化中心個案參考-詹翔霖老師.docx
https://mypaper.pchome.com.tw/chanrs/post/1381109792
•
3 views
无法毕业?美国乔治亚州立大学毕业证书和学位证书办理
sefomo
•
4 views
服装设计专业作品集流程规划201907.pdf
QueenaGao2
•
0 views
QQ微信819 4343办CASS假毕业证成绩单,办伦敦卡斯商学院本科毕业证书,办CASS硕士假文凭,办CASS研究生学位证书,办CASS学历认证,办伦敦...
ColumbiaDiplomaColum
•
12 views
★可查可存档〖制作查尔斯特大学文凭证书毕业证〗
tujjj
•
2 views
#专业办证《Tulsa毕业证学位证原版精仿》
sarotex825pgobom
•
2 views
Advertisement
給高中生的Web Programming教材
臺灣海洋大學 資訊工程系 馬尚彬 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> 標籤屬性(Attribute): <img src = "tabletennis.jpg" width = "400" height = "271" alt = "世桌賽金牌">
有哪一些標籤可以使用? 7 目前的標準已轉移到HTML5 https://developer.mozilla.org/en- US/docs/Web/HTML/Element
第一個HTML5程式 8 標頭 (head) 主體(body) 註解(comment)
編輯與執行 9 編輯 使用一般記事本即可編輯HTML5
建議使用Notepad++ 亦可使用其他更豐富之編輯器,如Dreamweaver、Aptana 要將附檔名存成.html或.htm 執行 用瀏覽器即可開啟執行網頁 開發期間建議用Chrome或Firefox,測試期間要確保IE、 Chrome、 Firefox、Opera四種主流瀏覽器均可支援 若要能想一般網站一樣讓所有人連結,需架設Web Server。
超連結(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可放相對路徑或絕對路徑
圖片(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屬性設定,可以做到放大縮小 圖片的效果,也可以讓圖片載入更快。
表格(Table)1 12 如何產生以下的功課表網頁?
表格(Table)2 13 範例:
表格(Table)3 14 範例 (續):
表格(Table)4 15 一個table分為三區: 頭(thead)、腳(tfoot)、身體 (tbody)
每一區都可加入表格行(table row, tr),每個表格行可加 入表格資料(table data, td) rowspan屬性: 將一個td往橫的方向擴展幾格 colspan 屬性: 將一個td往縱的方向擴展幾格
表單(Form)1 16 如何產生以下的輸入選單?
表單(Form)2 17 範例:
表單(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
其他標籤列表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>: 內部框架
其他標籤列表2 20 <b>: 粗體字
<i>: 斜體字 <big>: 加大字體 <small>: 縮小字體 <sub>:下標 <sup>:上標 <tt>: 單行間距字型 <u>: 加底線
練習1 21 目前已有一個HTML檔: example-html-partial.html,其內容 為條列商品名稱之表格,請將其改寫為包含商品價格與 「聯絡經理」連結(可自動開啟e-mail程式)之表格。 習題下載網址:http://goo.gl/RaR10
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.org/en-US/demos/tag/tech:css3
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>元素內的文字之字型設定為calibri; 若calibri不支援,則設 定為helvetica; 若helvetica再不支援,則設定為sans-serif。 類別選擇器(Class Selector) .special { color: purple; } 把class屬性設定為special之HTML元素之顏色設定為紫色。 設定顏色的好用工具: http://www.w3schools.com/tags/ref_colorpicker.asp
CSS規則4 27 ID選擇器(ID selector)
#intro { font-family: 微軟正黑體, 標楷體; } 將id為intro之HTML元素之字型設定為微軟正黑體; 若微軟正黑體 不支援,則設定為標楷體。 假類別選擇器(pseudo-class selector) 針對預設的行為觸發CSS規則的套用 a:hover { background-color: yellow; } 滑鼠游標移至超連結時,背景色改為黃色。
如何在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 = "text/css" href = "table.css">
練習2 35 目前已有一個HTML檔: example-html+css-partial.html,請 將其改寫,增加三個CSS規則:
(1) 字型改為微軟正黑體 (2) 表格標頭之背景色改為#C8C8C8 (灰色) (3) 新增滑鼠移至<td>會將<td>背景改為#FFFFCC (淡黃色)
JavaScript1 36 到目前我們開發的網頁(HTML+CSS)只是文件,無 法完全根據使用者互動產生變化。 JavaScript是讓網頁可以動起來的方法!
JavaScript2 37 JavaScript is
NOT Java! Java是編譯式(compiled)語言。 JavaScript是直譯式(interpreted)語言,不需要編譯 (compile) 只要有瀏覽器,就可以執行JavaScript JavaScript可以讓網頁動起來 可以回應使用者的要求 使用者點擊button、使用者移動滑鼠、使用者按下鍵盤 可以抓取目前網頁的內容、執行運算程式、再修改目前 網頁的內容
第一個JavaScript程式 38
基本JavaScript指令 39 window.alert("透過跳出式視窗顯示的訊息"); window.prompt("要求使用者輸入一些資料:");
document.write("<h1>你想直接印在網頁的文字內 容(Tag可以派上用場了)</h1>");
變數(Variable)宣告與型態 變數宣告方式: 一般變數宣告: [var]
變數名稱[=變數值]; 範例: var count = 10; 基本資料型態: number 數字(有小數點) 如20.46 string 文字(用雙引號或單引號括住) 如“周杰倫”、'Nexus 7' boolean 布林值 true/false 40
函式(Function)呼叫與宣告 41 函式呼叫範例: var
count = parseInt("10"); 將字串“10”轉換成數字10 函式宣告範例: 計算球體體積
物件(Object)操作 42 利用「.」來連接 「物件」與其所擁有的屬性 (Property)以及具備的功能(Method)
物件名稱.屬性名稱 範例: Math.Pi 物件名稱.方法名稱() 範例: Math.random()
透過JavaScript在網頁上輸入資料 43 方法一: 透過window.prompt()取得資料
var name = window.prompt("請輸入姓名:“) 方法二: 透過HTML Form取得資料 HTML: JavaScript: 點擊事件(event)
透過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元時,額外顯示圖片“congratulations.jpg ” 。
何謂完整的Web Application? 48 必須有「前端」與「後端」
前端:網頁的外觀與使用者介面 技術:HTML, CSS, JavaScript (jQuery), Flash 執行環境:瀏覽器 後端:接受前端的請求(request)、進行運算與資料處理 技術:PHP、.Net、JavaEE 執行環境:伺服器(Server)
其他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 CSS菜鳥救星 http://www.slideshare.net/clayliao/css101-for-beginner 接案我最行!JavaScript & Ajax 商業範例必殺技
Any Question? 52
Advertisement