Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Lecture 8: CSCI E-1 Spring 2013
Search
Tommy MacWilliam
April 17, 2013
Education
0
340
Lecture 8: CSCI E-1 Spring 2013
Tommy MacWilliam
April 17, 2013
Tweet
Share
More Decks by Tommy MacWilliam
See All by Tommy MacWilliam
Lecture 9: CSCI E-1 Spring 2013
tmacwill
0
270
Lecture 6: CSCI E-1 Spring 2013
tmacwill
1
410
Lecture 7: CSCI E-1 Spring 2013
tmacwill
0
440
Lecture 5: CSCI E-1 Spring 2013
tmacwill
1
440
Incorporating Version Control into Programming Courses
tmacwill
1
110
Lecture 4: CSCI E-1 Spring 2013
tmacwill
0
360
Lecture 3: CSCI E-1 Spring 2013
tmacwill
0
440
Lecture 2: CSCI E-1 Spring 2013
tmacwill
0
710
Lecture 1: CSCI E-1 Spring 2013
tmacwill
0
320
Other Decks in Education
See All in Education
自己紹介 / who-am-i
yasulab
2
3.6k
制限ボルツマンマシンの話 / Introduction of RBM
kaityo256
PRO
3
600
具体と抽象の行き来を意識する
blendthink
0
280
OpenStreetMap概要説明 / Introducing OpenStreetMap
barsaka2
0
260
week4@tcue2024
nonxxxizm
0
520
小・中・高等学校における情報教育の体系的な学習を目指したカリキュラムモデル案/curriculum model
codeforeveryone
0
230
Adobe Express
matleenalaakso
1
7.2k
Case Studies and Course Review - Lecture 12 - Information Visualisation (4019538FNR)
signer
PRO
1
1.4k
🎓 ChatGPT を組み込んだ24時間TA : 教育現場における LLM 活用の課題と改善
yasslab
PRO
0
600
英語学習から海外発表までの流れ
yasulab
18
4.1k
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
110
A question of time
ange
0
730
Featured
See All Featured
Designing for Performance
lara
604
67k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Code Review Best Practice
trishagee
58
16k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Optimizing for Happiness
mojombo
373
69k
Side Projects
sachag
451
42k
Agile that works and the tools we love
rasmusluckow
325
20k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Transcript
Computer Science E-1 Lecture 8: Web Development
Exam II
Review 4/22 7:30-8:30pm
Web Server
None
HTML
<h1>CSCI E-1</h1>
<h1>CSCI E-1</h1>
<h1>CSCI E-1</h1>
<h1>CSCI E-1</h1>
<!doctype html>
<html>
<head>
<title>Page title</title>
<body>
<!doctype html> <html> <head>...</head> <body>...</body> </html>
<p>Paragraph text</p>
<b>Bold text</b>
<i>Italicized text</i>
<b><i>Bold and italic</i></b>
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
<table> <tr> <td>table cell</td> </tr> </table>
<a href=“http://google.com”>Google</a>
<img src=“cat.jpg” />
Example
Valid HTML
http://validator.w3.org/
CSS
Selectors
Selectors • p
Selectors • p • #foo • <p id=“foo”>
Selectors • p • #foo • <p id=“foo”> • .bar
• <p class=“bar”>
Rules
#foo { color: blue; }
#foo { color: blue; }
#foo { color: blue; }
#foo { color: blue; }
#foo { color: blue; }
#foo { color: blue; }
.bar { background: red; width: 300px; }
p { font-size: 18px; }
Box Model
Box Model
#navbar a { margin: 10px; }
h1, p { padding: 10px; }
Block vs. Inline
<style>
Example
<link rel=“stylesheet” href=“...” />
Example
Layout
<div>
<span>
<!-- comments -->
Example
Bootstrap
http://twitter.github.io/bootstrap/
CSS Grid
None
None
Example
Flat UI
http://designmodo.github.io/Flat-UI/
Example
Setting up a Website
Setting up a Website • find a domain name
http://instantdomainsearch.com/
Registrars • GoDaddy • NameCheap • Network Solutions • Name.com
Setting up a Website • find a domain name •
find a web host
Web Hosts • 1&1 • BlueHost • DreamHost • HostGator
• Linode
Setting up a Website • find a domain name •
find a web host • point the domain to the host
Setting up a Website • find a domain name •
find a web host • point the domain to the host • upload files via FTP/SFTP
Computer Science E-1 Lecture 8: Web Development