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
520
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
340
Lecture 6: CSCI E-1 Spring 2013
tmacwill
1
490
Lecture 7: CSCI E-1 Spring 2013
tmacwill
0
640
Lecture 5: CSCI E-1 Spring 2013
tmacwill
1
710
Incorporating Version Control into Programming Courses
tmacwill
1
120
Lecture 4: CSCI E-1 Spring 2013
tmacwill
0
440
Lecture 3: CSCI E-1 Spring 2013
tmacwill
0
530
Lecture 2: CSCI E-1 Spring 2013
tmacwill
0
880
Lecture 1: CSCI E-1 Spring 2013
tmacwill
0
320
Other Decks in Education
See All in Education
HTML5 and the Open Web Platform - Lecture 3 - Web Technologies (1019888BNR)
signer
PRO
2
3k
Web Application Frameworks - Lecture 3 - Web Technologies (1019888BNR)
signer
PRO
0
3.1k
DIP_1_Introduction
hachama
0
270
Introduction - Lecture 1 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
2.6k
[Segah 2025] Gamified Interventions for Composting Behavior in the Workplace
ezefranca
0
180
Padlet opetuksessa
matleenalaakso
5
14k
GOVERNOR ADDRESS:2025年9月29日合同公式訪問例会:2720 Japan O.K. ロータリーEクラブ、2025年10月6日卓話:藤田 千克由 氏(国際ロータリー第2720地区 2025-2026年度 ガバナー・大分中央ロータリークラブ・大分トキハタクシー(株)顧問)
2720japanoke
0
650
相互コミュニケーションの難しさ
masakiokuda
0
280
【品女100周年企画】Pitch Deck
shinagawajoshigakuin_100th
0
8.1k
探査機自作ゼミ2025スライド
sksat
3
820
あなたの言葉に力を与える、演繹的なアプローチ
logica0419
1
200
(2025) L'origami, mieux que la règle et le compas
mansuy
0
150
Featured
See All Featured
Context Engineering - Making Every Token Count
addyosmani
8
300
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
For a Future-Friendly Web
brad_frost
180
10k
GitHub's CSS Performance
jonrohan
1032
470k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
BBQ
matthewcrist
89
9.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Code Reviewing Like a Champion
maltzj
526
40k
Side Projects
sachag
455
43k
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