Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Lecture 8: CSCI E-1 Spring 2013
Tommy MacWilliam
April 17, 2013
Education
0
74
Lecture 8: CSCI E-1 Spring 2013
Tommy MacWilliam
April 17, 2013
Tweet
Share
More Decks by Tommy MacWilliam
See All by Tommy MacWilliam
tmacwill
0
80
tmacwill
1
200
tmacwill
0
150
tmacwill
1
160
tmacwill
1
99
tmacwill
0
140
tmacwill
0
190
tmacwill
0
360
tmacwill
0
300
Other Decks in Education
See All in Education
studyplus_edx
0
130
acoach
0
220
salvemaria2020
0
250
oripsolob
0
1.1k
kaityo256
0
300
acoach
0
140
szabadhegyiadmin
0
170
estadiane
0
140
sapi_kawahara
8
1.9k
strikr
0
320
matleenalaakso
0
140
pilatestonic
PRO
0
110
Featured
See All Featured
jponch
103
5k
jlugia
217
16k
dotmariusz
94
5.5k
kneath
219
15k
caitiem20
308
17k
bryan
31
3.4k
gr2m
83
11k
carmenhchung
31
1.5k
deanohume
294
28k
stephaniewalter
260
11k
62gerente
587
200k
jasonvnalue
81
8.1k
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