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
290
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
240
Lecture 6: CSCI E-1 Spring 2013
tmacwill
1
390
Lecture 7: CSCI E-1 Spring 2013
tmacwill
0
380
Lecture 5: CSCI E-1 Spring 2013
tmacwill
1
390
Incorporating Version Control into Programming Courses
tmacwill
1
110
Lecture 4: CSCI E-1 Spring 2013
tmacwill
0
330
Lecture 3: CSCI E-1 Spring 2013
tmacwill
0
410
Lecture 2: CSCI E-1 Spring 2013
tmacwill
0
650
Lecture 1: CSCI E-1 Spring 2013
tmacwill
0
310
Other Decks in Education
See All in Education
Digijulkaisut
matleenalaakso
1
8.5k
[SemanaX-UFCG-2024] Guia descomplicado de entrevistas FAANG
hugaomarques
2
450
phygital__le_magasin_augmenté.pdf
martine
0
2.6k
情報Iの「縦糸」と「横糸」を意識したプログラム教育の実践
asial_edu
0
200
令和6年度 無料トライアルキャンペーン説明会
asial_edu
0
610
SUMMER SCHOOL 2024
pnuslide
0
140
Railsチュートリアルの歩き方 (第7版)
yasslab
PRO
1
1M
心房細動週間ポスター(2024年3月6日)
japanstrokeassociation
0
250
WordPressを教える人のための視点と考え方
crebowinfo
0
230
Поступление в ТОГУ 2024
pnuslide
0
34k
Dolce and Gabbana Light Blue Perfume
vicjon
0
390
week2@tcue2024
nonxxxizm
0
750
Featured
See All Featured
Building Adaptive Systems
keathley
30
1.8k
Happy Clients
brianwarren
91
6.4k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Atom: Resistance is Futile
akmur
258
25k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
Being A Developer After 40
akosma
56
580k
A Modern Web Designer's Workflow
chriscoyier
688
190k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
Designing with Data
zakiwarfel
95
4.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
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